/* ==========================================================================
   Agro 4×4 — sistema de diseño
   Los valores salen del prototipo de docs/diseno/. No se deducen: se copian.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografías
   Auto-alojadas: la política de seguridad de contenido es font-src 'self' y
   la ficha en PDF necesita los ficheros dentro de la imagen. Las tres son
   SIL OFL 1.1; las licencias están junto a los ficheros.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-400-800.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Paleta. El rojo NUNCA se usa para texto pequeño: sobre carbón da 3,3:1.
     Va como fondo de botón con texto blanco (5,9:1), como cuadrado del
     antetítulo, como borde de llamada a la acción y como subrayado activo.

     El hover del prototipo, #E0323B, se ha partido en dos: el mismo tono no
     puede servir para las dos cosas y cumplir AA en ambas.
       - Como TEXTO sobre carbón daba 4,34:1, por debajo del mínimo.
       - Como FONDO de botón, con blanco encima, daba 4,48:1, también por debajo.
     Aclararlo arregla lo primero y empeora lo segundo. Ver el ADR 0005. */
  --carbon: #0D0D0E;
  --superficie: #111115;
  --banda: #08080A;
  --linea: #26262B;
  --linea-suave: #1B1B20;
  --linea-fuerte: #45454E;
  --plata: #8C867E;
  --plata-claro: #B9B3A9;
  --hueso: #F3F0EA;
  --blanco: #FFFFFF;
  --rojo: #C8161F;
  /* Fondo de botón al pasar por encima. Con blanco encima: 4,66:1. */
  --rojo-fondo-hover: #DC2F38;
  /* Rojo de texto y de trazo sobre fondo oscuro. Sobre carbón: 4,73:1. */
  --rojo-texto: #E53E47;

  /* Tonos de apoyo tomados del prototipo */
  --campo-fondo: #0A0A0C;
  --campo-borde: #33333A;
  --campo-marcador: #6C6862;
  --casilla-borde: #4A4A52;
  --separador-datos: #3E3E46;
  --placa-linea: #D8D4CC;

  /* Tipografías */
  --fuente-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --fuente-titular: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --fuente-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Escala de titulares, fluida entre 390 y 1440.
     Los extremos son los valores exactos de las dos maquetaciones aprobadas. */
  --t-hero: clamp(44px, 5.83vw, 84px);
  --t-titulo: clamp(40px, 4.58vw, 66px);
  --t-seccion: clamp(32px, 3.61vw, 52px);
  --t-bloque: clamp(28px, 3.06vw, 44px);
  --t-sub: clamp(24px, 2.64vw, 38px);

  /* Disposición */
  --ancho-contenedor: 1440px;
  --margen-lateral: 20px;
  --alto-cabecera: 64px;
  --alto-barra-utilidad: 40px;

  /* Zonas táctiles: 44 px mínimo en móvil, pie incluido. */
  --tactil: 44px;
}

@media (min-width: 768px) {
  :root {
    --margen-lateral: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --margen-lateral: 80px;
    --alto-cabecera: 84px;
  }
}

/* --------------------------------------------------------------------------
   3. Reset y base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* La web es oscura por diseño, no por preferencia del sistema. */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--hueso);
  font-family: var(--fuente-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* Ningún ancho provoca scroll horizontal: lo que desborda scrollea dentro
     de su propio contenedor, no en la página. */
  overflow-x: hidden;
}

a {
  color: var(--hueso);
  text-decoration: none;
}

a:hover {
  color: var(--rojo-texto);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.03;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* Los atributos width y height del marcado están para reservar el hueco y
   evitar que el layout salte. Sin este height:auto se aplican además como
   tamaño real, y cualquier aspect-ratio de más abajo queda ignorado. */
img[width][height] {
  height: auto;
}

button {
  font: inherit;
}

hr {
  border: 0;
}

/* Foco visible siempre: es el único indicador para quien navega con teclado. */
:focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 2px;
}

/* Oculto con clip en vez de sacarlo a -9999px: así no cuenta como contenido
   fuera del lienzo y no depende de que el body recorte el desbordamiento. */
.salto-al-contenido {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--hueso);
  color: var(--carbon);
  padding: 12px 20px;
  font-weight: 700;
  clip-path: inset(50%);
}

.salto-al-contenido:focus {
  clip-path: none;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icono {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4. Utilidades tipográficas
   -------------------------------------------------------------------------- */
.mono {
  font-family: var(--fuente-mono);
}

.serif {
  font-family: var(--fuente-titular);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.antetitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plata-claro);
}

.antetitulo::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--rojo);
  flex: 0 0 8px;
}

.etiqueta {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plata);
}

.titular-hero { font-size: var(--t-hero); line-height: 0.98; }
.titular-pagina { font-size: var(--t-titulo); line-height: 1.0; }
.titular-seccion { font-size: var(--t-seccion); }
.titular-bloque { font-size: var(--t-bloque); }
.titular-sub { font-size: var(--t-sub); }

.texto-secundario {
  color: var(--plata-claro);
}

.texto-apagado {
  color: var(--plata);
}

/* El precio va en hueso, nunca en rojo. */
.precio {
  font-family: var(--fuente-mono);
  font-size: 21px;
  font-weight: 600;
  color: var(--hueso);
  letter-spacing: -0.01em;
}

.precio-iva {
  font-family: var(--fuente-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--plata);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Componentes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border: 0;
  cursor: pointer;
}

.btn-rojo { background: var(--rojo); color: var(--blanco); }
.btn-rojo:hover { background: var(--rojo-fondo-hover); color: var(--blanco); }
.btn-linea { background: transparent; color: var(--hueso); border: 1px solid var(--linea-fuerte); }
.btn-linea:hover { border-color: var(--hueso); color: var(--hueso); }
.btn-hueso { background: var(--hueso); color: var(--carbon); }
.btn-hueso:hover { background: var(--blanco); color: var(--carbon); }

/* Botón que lleva un número de teléfono: sin versalitas ni tracking. */
.btn-telefono {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 15px;
}

.btn-ancho { width: 100%; }
.btn-grande { min-height: 60px; padding: 0 32px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
}

.tarjeta:hover {
  border-color: var(--linea-fuerte);
}

/* Proporción 3:2 de fotografía de producto. Reservar el hueco evita que el
   layout salte al cargar. Ninguna tarjeta va sin imagen. */
.foto {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: #101014;
  object-fit: cover;
  display: block;
}

.linea {
  height: 1px;
  background: var(--linea);
  border: 0;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--plata-claro);
}

.chip-activo {
  border-color: var(--rojo);
  color: var(--hueso);
}

.campo {
  width: 100%;
  min-height: 52px;
  background: var(--campo-fondo);
  border: 1px solid var(--campo-borde);
  color: var(--hueso);
  font-family: var(--fuente-ui);
  font-size: 15px;
  padding: 14px 16px;
}

.campo::placeholder {
  color: var(--campo-marcador);
}

.casilla {
  width: 22px;
  height: 22px;
  border: 1px solid var(--casilla-borde);
  background: var(--campo-fondo);
  flex: 0 0 22px;
}

/* Enlace con flecha roja: la flecha es decorativa, el texto lleva el color. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tactil);
  font-size: 14px;
  font-weight: 600;
  color: var(--hueso);
}

.enlace-flecha .icono {
  stroke: var(--rojo-texto);
}

/* Tira horizontal que scrollea dentro de su contenedor, nunca en la página. */
.tira {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tira > * {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   6. Disposición
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion {
  padding-block: clamp(48px, 6vw, 88px);
}

.seccion-banda {
  background: var(--banda);
  border-block: 1px solid var(--linea);
}

.seccion-superficie {
  background: var(--superficie);
  border-block: 1px solid var(--linea);
}

.rejilla {
  display: grid;
  gap: 24px;
}

/* De una columna a la cuenta indicada, sin saltos bruscos. */
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cabecera-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.cabecera-seccion__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   7. Barra de utilidad y cabecera
   -------------------------------------------------------------------------- */
.barra-utilidad {
  background: var(--banda);
  border-bottom: 1px solid var(--linea-suave);
  /* Solo escritorio: en móvil la información vive en la cabecera y el pie. */
  display: none;
}

.barra-utilidad__interior {
  height: var(--alto-barra-utilidad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
}

.barra-utilidad__grupo {
  display: flex;
  align-items: center;
  gap: 22px;
}

.barra-utilidad__separador {
  width: 1px;
  height: 12px;
  background: var(--linea);
}

/* Fija arriba en todos los anchos: en un catálogo largo, el acceso al menú y
   al presupuesto tiene que estar siempre a un toque. La barra de utilidad se
   va con el scroll; la cabecera se queda. */
.cabecera {
  background: var(--carbon);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Con la cabecera fija, un ancla dejaría su destino debajo de ella. */
[id] {
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
}

/* Mientras el panel de menú está abierto la página de detrás no se mueve. */
body.sin-scroll {
  overflow: hidden;
}

.cabecera__interior {
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
}

.marca__cuadro {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  background: var(--rojo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--blanco);
  letter-spacing: -0.02em;
}

.marca__textos {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.marca__nombre {
  font-family: var(--fuente-titular);
  font-size: 19px;
  line-height: 1;
  color: var(--hueso);
}

.marca__razon {
  font-family: var(--fuente-mono);
  font-size: 6px;
  letter-spacing: 0.20em;
  color: var(--plata);
  text-transform: uppercase;
}

.navegacion {
  display: none;
  align-items: center;
  gap: 21px;
}

.navegacion__enlace {
  display: flex;
  align-items: center;
  height: var(--alto-cabecera);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--plata-claro);
  border-bottom: 2px solid transparent;
}

.navegacion__enlace:hover {
  color: var(--hueso);
}

.navegacion__enlace[aria-current="page"] {
  color: var(--hueso);
  border-bottom-color: var(--rojo);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Botón cuadrado de 44 px: teléfono en móvil, menú en móvil. */
.boton-icono {
  width: var(--tactil);
  height: var(--tactil);
  flex: 0 0 var(--tactil);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea-fuerte);
  background: transparent;
  color: var(--hueso);
  cursor: pointer;
}

.boton-icono--sin-borde {
  border: 0;
  margin-left: -10px;
}

.cabecera__telefono,
.cabecera__presupuesto {
  display: none;
}

/* El acceso directo al teléfono solo existe en móvil: en escritorio ya está
   en la barra de utilidad y en el botón con el número. */
.cabecera__telefono-movil {
  display: flex;
}

textarea.campo {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

/* La marca del panel de menú va a tamaño grande en cualquier ancho. */
.marca--panel .marca__cuadro { width: 37px; height: 37px; flex: 0 0 37px; font-size: 14px; }
.marca--panel .marca__nombre { font-size: 24px; }
.marca--panel .marca__razon { font-size: 8px; }

@media (min-width: 1200px) {
  .barra-utilidad { display: block; }
  .panel-menu { display: none; }
  .navegacion { display: flex; }
  .cabecera__menu { display: none; }
  .cabecera__telefono,
  .cabecera__presupuesto { display: inline-flex; }
  .cabecera__telefono-movil { display: none; }
  .marca__cuadro { width: 40px; height: 40px; flex: 0 0 40px; font-size: 15px; }
  .marca__nombre { font-size: 26px; }
  .marca__razon { font-size: 9px; }
  .marca { gap: 12px; }
}

/* --------------------------------------------------------------------------
   7.b Panel de menú (móvil y tablet)
   -------------------------------------------------------------------------- */
.panel-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--carbon);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.panel-menu[hidden] {
  display: none;
}

.panel-menu__cabecera {
  height: var(--alto-cabecera);
  padding-inline: var(--margen-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--linea);
  flex: 0 0 auto;
}

.panel-menu__navegacion {
  display: flex;
  flex-direction: column;
  padding-inline: var(--margen-lateral);
}

.panel-menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  font-size: 17px;
  font-weight: 600;
  color: var(--hueso);
  border-bottom: 1px solid var(--linea-suave);
}

.panel-menu__enlace .icono {
  stroke: var(--plata);
}

.panel-menu__enlace[aria-current="page"] {
  color: var(--hueso);
}

.panel-menu__enlace[aria-current="page"] .icono {
  stroke: var(--rojo-texto);
}

.panel-menu__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px var(--margen-lateral) 0;
}

.panel-menu__pie {
  padding: 24px var(--margen-lateral) 32px;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--plata);
}

/* --------------------------------------------------------------------------
   8. Pie
   -------------------------------------------------------------------------- */
.pie {
  background: var(--banda);
  border-top: 1px solid var(--linea);
}

.pie__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 0;
  flex-wrap: wrap;
}

.pie__lema {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
  line-height: 1.9;
}

.pie__columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: 8px;
}

.pie__columna {
  display: flex;
  flex-direction: column;
}

.pie__titulo {
  padding: 20px 0 8px;
}

/* Zona táctil de 44 px también en el pie: es requisito, no detalle. */
.pie__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  font-size: 14.5px;
  color: var(--plata-claro);
  border-bottom: 1px solid var(--linea-suave);
}

.pie__enlace .icono {
  stroke: var(--plata);
}

.pie__enlace:hover {
  color: var(--hueso);
}

.pie__telefono {
  font-family: var(--fuente-mono);
  color: var(--hueso);
}

.pie__legal {
  font-family: var(--fuente-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--plata);
  line-height: 1.8;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 900px) {
  .pie__cabecera { padding: 52px 0 40px; border-bottom: 1px solid var(--linea); }
  .pie__columnas { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding: 40px 0; }
  .pie__titulo { padding: 0 0 14px; }
  .pie__enlace { min-height: 36px; border-bottom: 0; font-size: 14px; }
  .pie__legal { flex-direction: row; justify-content: space-between; gap: 24px; border-top: 1px solid var(--linea); border-bottom: 0; padding: 20px 0; }
}

/* --------------------------------------------------------------------------
   8.b Publicidad de la financiación europea — obligatoria en todas las páginas
   Los dos logotipos están diseñados sobre blanco: por eso la placa. No se
   recolorean, no se invierten y no se deforman. El emblema no baja de tamaño
   hasta perder las doce estrellas.
   -------------------------------------------------------------------------- */
.financiacion {
  border-top: 1px solid var(--linea);
  padding: 30px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.financiacion__texto {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--plata-claro);
}

.financiacion__placa {
  background: var(--blanco);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.financiacion__logo {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.financiacion__separador {
  height: 1px;
  background: var(--placa-linea);
  border: 0;
}

/* Los dos logotipos en fila ocupan unos 753 px con la altura de 92 px que
   pide el emblema para que se distingan las doce estrellas. Por debajo de
   900 px de ventana no caben, así que siguen apilados. El flex-wrap es la red
   de seguridad: si alguna vez no cupieran, envuelven en vez de desbordar. */
@media (min-width: 900px) {
  .financiacion { padding: 30px 0 36px; }
  .financiacion__placa {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    padding: 18px 26px;
    align-self: flex-start;
  }
  .financiacion__logo { width: auto; max-width: none; height: 92px; }
  .financiacion__separador { width: 1px; height: 74px; }
}

/* --------------------------------------------------------------------------
   9. Barra inferior de acciones (móvil)
   -------------------------------------------------------------------------- */
.barra-inferior {
  position: sticky;
  bottom: 0;
  z-index: 9;
  background: rgba(8, 8, 10, 0.97);
  border-top: 1px solid var(--linea);
  padding: 12px var(--margen-lateral);
  display: flex;
  align-items: center;
  gap: 10px;
  /* Respeta la zona segura de los móviles con barra de gestos. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.barra-inferior__icono {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea-fuerte);
  color: var(--hueso);
}

.barra-inferior__accion {
  flex: 1;
  /* Sin esto el botón no puede encoger por debajo de su texto y saca la barra
     del lienzo en pantallas muy estrechas. */
  min-width: 0;
  min-height: 52px;
  font-size: 12.5px;
  padding: 0 12px;
}

/* En la ficha, el precio va a la izquierda del todo, delante de los botones. */
.barra-inferior__precio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  padding-right: 12px;
}

.barra-inferior__precio-etiqueta {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

.barra-inferior__precio-cifra {
  font-size: 19px;
  font-weight: 600;
  color: var(--hueso);
}

/* Por debajo del ancho del diseño, la barra de la ficha lleva cuatro piezas y
   no caben con las medidas de 390. Se aprieta el espaciado y el precio se
   queda solo con la cifra: la etiqueta la repite la ficha unos píxeles más
   arriba. Las zonas táctiles no bajan de 44 px. */
@media (max-width: 359px) {
  .barra-inferior {
    padding-inline: 12px;
    gap: 8px;
  }
  .barra-inferior__icono {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }
  .barra-inferior__precio {
    padding-right: 4px;
  }
  .barra-inferior__precio-etiqueta {
    display: none;
  }
  .barra-inferior__precio-cifra {
    font-size: 17px;
  }
  .barra-inferior__accion {
    font-size: 11.5px;
    padding: 0 8px;
    letter-spacing: 0.03em;
  }
}

@media (min-width: 1200px) {
  .barra-inferior { display: none; }
}

/* --------------------------------------------------------------------------
   10. Preferencias del usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   11. Tarjeta de vehículo
   Se usa en el catálogo, en la portada y en los relacionados. Es un
   contenedor con enlaces dentro, nunca un enlace envolvente.
   -------------------------------------------------------------------------- */
.tarjeta-vehiculo {
  cursor: pointer;
}

.tarjeta-vehiculo__imagen {
  position: relative;
}

.insignia {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(8, 8, 10, 0.82);
  border: 1px solid var(--linea);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata-claro);
}

.tarjeta-vehiculo__cuerpo {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tarjeta-vehiculo__marca {
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--plata);
  text-transform: uppercase;
}

.tarjeta-vehiculo__nombre {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.22;
  margin-top: 8px;
}

.tarjeta-vehiculo__nombre--compacta {
  font-size: 16px;
}

.tarjeta-vehiculo__datos {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--fuente-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--plata-claro);
  text-transform: uppercase;
}

.tarjeta-vehiculo__separador {
  color: var(--separador-datos);
}

.tarjeta-vehiculo__hueco {
  flex: 1;
  min-height: 16px;
}

.tarjeta-vehiculo__linea {
  margin: 16px 0 14px;
}

.tarjeta-vehiculo__precio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tarjeta-vehiculo__accion {
  margin-top: 16px;
  min-height: 46px;
  width: 100%;
  font-size: 12px;
  padding: 0 10px;
}

/* --------------------------------------------------------------------------
   12. Catálogo
   -------------------------------------------------------------------------- */
.catalogo-cabecera {
  padding-block: clamp(32px, 4vw, 56px) 0;
}

.catalogo-cabecera .antetitulo {
  margin-bottom: 16px;
}

.catalogo-cabecera__entrada {
  margin-top: 20px;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
}

.catalogo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: clamp(32px, 4vw, 48px) clamp(48px, 6vw, 88px);
}

/* El rail de 300 con hueco de 40 solo existe cuando hay sitio. Por debajo,
   los filtros viven en el panel a pantalla completa. */
.catalogo__rail {
  display: none;
}

.catalogo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 28px;
}

.catalogo__cuenta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
}

.catalogo__numero {
  font-size: 22px;
  font-weight: 600;
  color: var(--hueso);
}

.catalogo__herramientas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.catalogo__abrir-filtros {
  min-height: 48px;
  padding: 0 20px;
}

.catalogo__orden {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalogo__selector {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--campo-borde);
  background: var(--campo-fondo);
  color: var(--hueso);
  font-family: var(--fuente-ui);
  font-size: 14px;
  cursor: pointer;
}

.catalogo__activos {
  margin-bottom: 24px;
}

.catalogo__rejilla {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.catalogo__vacio {
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.catalogo__vacio-acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (min-width: 1100px) {
  .catalogo {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }
  .catalogo__rail { display: block; }
  .catalogo__abrir-filtros { display: none; }
  /* Con rail, la rejilla del catálogo es de dos columnas; tres cuando el
     catálogo crece lo bastante para paginar. */
  .catalogo__rejilla[data-columnas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo__rejilla[data-columnas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   13. Filtros
   -------------------------------------------------------------------------- */
.filtros {
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.filtros__grupo {
  border: 0;
  border-bottom: 1px solid var(--linea);
  margin: 0;
  padding: 22px 20px;
}

.filtros__grupo:last-of-type {
  border-bottom: 0;
}

.filtros__titulo {
  color: var(--hueso);
  padding: 0;
  margin-bottom: 8px;
}

.filtros__opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tactil);
  cursor: pointer;
}

.filtros__opcion--vacia {
  opacity: 0.45;
  cursor: not-allowed;
}

.filtros__casilla {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  accent-color: var(--rojo);
  cursor: inherit;
}

.filtros__texto {
  flex: 1;
  font-size: 14.5px;
  color: var(--plata-claro);
}

.filtros__cuenta {
  font-size: 12px;
  color: var(--plata);
}

.filtros__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--linea);
}

.filtros__ayuda {
  margin-top: 20px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Panel de filtros a pantalla completa, por debajo de 1100. */
.panel-filtros {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--carbon);
  display: flex;
  flex-direction: column;
}

.panel-filtros[hidden] {
  display: none;
}

.panel-filtros__cabecera {
  height: var(--alto-cabecera);
  padding-inline: var(--margen-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--linea);
  flex: 0 0 auto;
}

.panel-filtros__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 20px var(--margen-lateral) 32px;
}

@media (min-width: 1100px) {
  .panel-filtros { display: none; }
}

/* --------------------------------------------------------------------------
   14. Paginación
   -------------------------------------------------------------------------- */
.paginacion {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.paginacion__resumen {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--plata);
  text-transform: uppercase;
}

.paginacion__enlaces {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.paginacion__pagina {
  min-width: var(--tactil);
  min-height: var(--tactil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  font-family: var(--fuente-mono);
  font-size: 14px;
  color: var(--plata-claro);
}

.paginacion__pagina:hover {
  border-color: var(--linea-fuerte);
}

.paginacion__pagina--actual {
  border-color: var(--rojo);
  color: var(--hueso);
}

/* --------------------------------------------------------------------------
   15. Migas de pan
   -------------------------------------------------------------------------- */
.migas {
  background: var(--banda);
  border-bottom: 1px solid var(--linea);
}

.migas__lista {
  list-style: none;
  margin: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

.migas__paso {
  display: flex;
  align-items: center;
  gap: 10px;
}

.migas__paso a {
  color: var(--plata);
}

.migas__paso a:hover {
  color: var(--hueso);
}

.migas__separador {
  color: var(--separador-datos);
}

.migas__actual {
  color: var(--hueso);
}

/* --------------------------------------------------------------------------
   16. Ficha de vehículo
   -------------------------------------------------------------------------- */
.ficha__disposicion {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

/* El prototipo reparte 760 de galería y el resto de resumen sobre 1280. */
@media (min-width: 1100px) {
  .ficha__disposicion {
    grid-template-columns: minmax(0, 760fr) minmax(0, 472fr);
  }
}

.ficha__resumen {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ficha__titulo {
  font-size: clamp(30px, 2.64vw, 38px);
  font-weight: 800;
  line-height: 1.08;
}

.ficha__referencia {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--plata);
  text-transform: uppercase;
}

.ficha__precio {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.ficha__precio-cifra {
  font-size: clamp(38px, 3.19vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hueso);
  line-height: 1;
}

.ficha__precio-iva {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plata);
  padding-bottom: 6px;
}

/* Tres columnas en cualquier ancho, como el prototipo: seis casillas quedan
   en dos filas de tres, y cinco en una de tres más una de dos. */
.ficha__datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ficha__dato {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--campo-fondo);
  border: 1px solid var(--linea);
  min-width: 0;
}

@media (max-width: 419px) {
  .ficha__datos { gap: 8px; }
  .ficha__dato { padding: 14px 12px; }
  .ficha__dato-etiqueta { font-size: 9.5px; letter-spacing: 0.12em; }
  .ficha__dato-valor { font-size: 15px; }
}

.ficha__dato-etiqueta {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plata);
}

.ficha__dato-valor {
  font-size: 16px;
  font-weight: 600;
  color: var(--hueso);
}

/* Caja de presupuesto: el único bloque con borde rojo de la página. */
.caja-presupuesto {
  border: 1px solid var(--rojo);
  background: var(--superficie);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.caja-presupuesto__texto {
  font-size: 14.5px;
  line-height: 1.6;
}

.caja-presupuesto__accion {
  min-height: 58px;
  margin-top: 2px;
}

.caja-presupuesto__compromiso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--plata-claro);
}

/* En escritorio la caja acompaña al scroll: la acción principal no se pierde
   al recorrer la ficha técnica. Debajo de la cabecera fija. */
@media (min-width: 1100px) {
  .ficha__resumen {
    position: sticky;
    top: calc(var(--alto-cabecera) + 24px);
  }
}

.ficha__acciones-tecnica {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ficha__pdf {
  min-height: 48px;
  padding: 0 20px;
}

.enlace-externo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tactil);
  font-size: 13px;
  color: var(--plata-claro);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--linea-fuerte);
}

.enlace-externo:hover {
  color: var(--hueso);
}

/* --------------------------------------------------------------------------
   17. Galería
   -------------------------------------------------------------------------- */
.galeria {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Sin esto, la tira de miniaturas de más abajo estira todo el bloque hasta
     su ancho natural y saca la página del lienzo en pantallas estrechas: el
     min-width automático de los elementos de rejilla y flex es su contenido. */
  min-width: 0;
}

.ficha__galeria {
  min-width: 0;
}

.galeria__principal {
  position: relative;
  border: 1px solid var(--linea);
}

.galeria__grande {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #101014;
}

.galeria__grande[hidden] {
  display: none;
}

.galeria__insignia {
  top: 14px;
  left: 14px;
  height: 28px;
  padding: 0 12px;
}

.galeria__miniaturas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  gap: 12px;
  /* Las miniaturas scrollean dentro de su contenedor, nunca en la página. */
  overflow-x: auto;
  min-width: 0;
}

.galeria__miniatura {
  display: block;
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.galeria__miniatura img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 0.72;
}

.galeria__miniatura:hover img {
  opacity: 1;
}

.galeria__miniatura--activa {
  border-color: var(--rojo);
}

.galeria__miniatura--activa img {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   18. Ficha técnica
   -------------------------------------------------------------------------- */
.ficha-tecnica {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .ficha-tecnica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ficha-tecnica__columna {
  margin: 0;
  border: 1px solid var(--linea);
  background: var(--carbon);
  /* Si un valor largo no cabe, scrollea dentro de su tabla, no en la página. */
  overflow-x: auto;
}

.ficha-tecnica__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
  align-items: baseline;
}

.ficha-tecnica__fila:last-child {
  border-bottom: 0;
}

@media (min-width: 600px) {
  .ficha-tecnica__fila { grid-template-columns: minmax(120px, 200px) 1fr; }
}

.ficha-tecnica__etiqueta {
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--plata);
}

.ficha-tecnica__valor {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hueso);
}

.ficha-tecnica__aviso,
.ficha-tecnica__nota {
  margin-top: 20px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--plata);
  text-transform: uppercase;
}

.ficha-tecnica__aviso {
  color: var(--plata-claro);
}

/* --------------------------------------------------------------------------
   19. Formulario de presupuesto
   -------------------------------------------------------------------------- */
.presupuesto {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 1000px) {
  .presupuesto { grid-template-columns: minmax(0, 1fr) 400px; }
}

.presupuesto__principal {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.presupuesto__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.presupuesto__entrada {
  font-size: 16px;
  line-height: 1.6;
  max-width: 620px;
}

.presupuesto__lateral {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.presupuesto__vehiculo-cuerpo {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.presupuesto__vehiculo-nombre {
  font-size: 19px;
  font-weight: 700;
}

.presupuesto__contacto {
  padding: 22px;
  gap: 14px;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formulario__pareja {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .formulario__pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.campo--error {
  border-color: var(--rojo-texto);
}

.formulario__error {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rojo-texto);
}

.formulario__consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tactil);
  cursor: pointer;
}

.formulario__consentimiento .casilla {
  margin-top: 2px;
  accent-color: var(--rojo);
}

.formulario__consentimiento-texto {
  font-size: 13.5px;
  line-height: 1.55;
}

.formulario__consentimiento-texto a {
  color: var(--hueso);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.formulario__enviar {
  min-height: 56px;
  margin-top: 8px;
  align-self: flex-start;
  padding-inline: 40px;
}

.formulario__compromiso {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--plata-claro);
}

/* El campo trampa del antispam. Fuera del alcance visual y del foco, pero
   presente para los robots que rellenan todo lo que encuentran. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   20. Avisos
   -------------------------------------------------------------------------- */
.aviso {
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aviso--error {
  border-color: var(--rojo);
}

.aviso__titulo {
  font-size: 16px;
  font-weight: 700;
}

.aviso__lista {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--plata-claro);
}

.aviso__lista a {
  color: var(--plata-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aviso__lista a:hover {
  color: var(--hueso);
}

/* --------------------------------------------------------------------------
   21. Estado de enviado
   -------------------------------------------------------------------------- */
.enviado {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.enviado__cabecera {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.enviado__marca {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  background: var(--rojo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.enviado__titulos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.enviado__referencia {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

.enviado__compromiso {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
}

.enviado__compromiso-titulo {
  font-size: 18px;
  font-weight: 700;
}

.enviado__compromiso-texto {
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 6px;
}

.enviado__resumen {
  padding: 8px 24px 12px;
}

.enviado__resumen-titulo {
  display: block;
  padding: 16px 0 6px;
  color: var(--hueso);
}

.enviado__lista {
  margin: 0;
}

.enviado__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
  align-items: baseline;
}

.enviado__fila:last-child {
  border-bottom: 0;
}

@media (min-width: 600px) {
  .enviado__fila { grid-template-columns: 150px 1fr; }
}

.enviado__etiqueta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

.enviado__valor {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hueso);
  /* Un mensaje largo sin espacios no puede sacar la caja del lienzo. */
  overflow-wrap: anywhere;
}

.enviado__acciones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.enviado__acciones .btn {
  min-height: 56px;
  padding-inline: 24px;
}

.enviado__nota {
  font-size: 13.5px;
  line-height: 1.6;
}

.enviado__nota a {
  color: var(--plata-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   22. Prosa (páginas legales y textos largos)
   Medida de línea corta: un texto legal se lee mal a todo lo ancho.
   -------------------------------------------------------------------------- */
.prosa {
  max-width: 760px;
}

.prosa > * + * {
  margin-top: 20px;
}

.prosa h1 + .prosa__version {
  margin-top: 16px;
}

.prosa__version {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

.prosa__entrada {
  font-size: 17px;
  line-height: 1.7;
  color: var(--plata-claro);
}

.prosa h2 {
  margin-top: 48px;
  font-family: var(--fuente-titular);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.005em;
  line-height: 1.15;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
}

.prosa p,
.prosa li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--plata-claro);
}

.prosa strong {
  color: var(--hueso);
  font-weight: 700;
}

.prosa ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prosa li::marker {
  color: var(--rojo);
}

.prosa a {
  color: var(--hueso);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linea-fuerte);
}

.prosa a:hover {
  color: var(--rojo-texto);
  text-decoration-color: currentColor;
}

/* Las tablas del texto legal scrollean dentro de su caja, no en la página. */
.prosa__tabla {
  overflow-x: auto;
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.prosa__tabla table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

.prosa__tabla th,
.prosa__tabla td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--linea);
  color: var(--plata-claro);
}

.prosa__tabla thead th {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
  background: var(--carbon);
}

.prosa__tabla tbody th {
  color: var(--hueso);
  font-weight: 600;
  width: 40%;
}

.prosa__tabla tr:last-child th,
.prosa__tabla tr:last-child td {
  border-bottom: 0;
}

.prosa__aviso {
  margin-top: 28px;
}

/* Primera capa de información del formulario: letra pequeña, siempre visible. */
.formulario__capa-informativa {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--plata);
  max-width: 640px;
}

.formulario__capa-informativa strong {
  color: var(--plata-claro);
  font-weight: 600;
}

.formulario__capa-informativa a {
  color: var(--plata-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   23. Portada
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(520px, 42vw, 600px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dos degradados: uno lateral para escritorio y otro vertical para móvil, que
   es donde el texto se apoya abajo. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(13, 13, 14, 0.97) 18%, rgba(13, 13, 14, 0.55) 60%, rgba(13, 13, 14, 0.35) 100%);
}

@media (min-width: 900px) {
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(13, 13, 14, 0.94) 0%, rgba(13, 13, 14, 0.78) 42%, rgba(13, 13, 14, 0.20) 100%),
      linear-gradient(0deg, rgba(13, 13, 14, 0.85) 0%, rgba(13, 13, 14, 0) 45%);
  }
}

.hero__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: clamp(32px, 5vw, 0px);
}

.hero__entrada {
  font-size: clamp(15.5px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--plata-claro);
  max-width: 560px;
}

.hero__acciones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero__acciones .btn {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 600px) {
  .hero__acciones .btn { flex: 0 0 auto; }
}

.hero__compromiso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plata-claro);
}

/* --------------------------------------------------------------------------
   24. Franja de marcas
   -------------------------------------------------------------------------- */
.franja {
  padding-block: 32px;
}

.franja__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.franja__intro {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.franja__texto {
  font-size: 15px;
}

.franja__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.franja__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--plata-claro);
}

.franja__marca:hover {
  border-color: var(--linea-fuerte);
  color: var(--hueso);
}

.franja__nombre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* En escritorio la franja se reparte en siete columnas iguales, sin scroll. */
@media (min-width: 1100px) {
  .franja__lista {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
  }
  .franja__marca {
    justify-content: center;
    min-height: 72px;
    border: 0;
    border-left: 1px solid var(--linea);
    background: transparent;
  }
  .franja__lista > li:first-child .franja__marca { border-left: 0; }
  .franja__nombre { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   25. Banda de cifras
   -------------------------------------------------------------------------- */
.cifras {
  padding-block: 0;
}

.cifras__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-block: 34px;
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 32px;
  border-left: 1px solid var(--linea);
}

.cifra__valor {
  font-size: 22px;
  font-weight: 600;
  color: var(--hueso);
}

.cifra__valor--corta {
  font-size: 17px;
}

.cifra__texto {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plata);
}

/* --------------------------------------------------------------------------
   26. Tarjeta de familia
   -------------------------------------------------------------------------- */
.tarjeta-familia {
  overflow: hidden;
}

.tarjeta-familia__cuerpo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tarjeta-familia__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tarjeta-familia__titulo h3 {
  font-size: 20px;
  font-weight: 700;
}

.tarjeta-familia__enlace {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hueso);
}

.tarjeta-familia__enlace .icono {
  stroke: var(--rojo-texto);
}

/* --------------------------------------------------------------------------
   27. Pasos y taller
   -------------------------------------------------------------------------- */
.paso {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--superficie);
  border: 1px solid var(--linea);
}

.paso__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paso__numero {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--rojo-texto);
}

.paso__titulo {
  font-size: 21px;
  font-weight: 700;
}

.paso__texto {
  font-size: 15px;
  line-height: 1.6;
}

.taller {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .taller { grid-template-columns: 1.05fr 1fr; }
}

.taller__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--linea);
}

.taller__texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.taller__entrada {
  font-size: 17px;
  line-height: 1.7;
}

.taller__pendiente {
  font-size: 15px;
  line-height: 1.7;
}

.taller__acciones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.taller__acciones .btn {
  min-height: 54px;
  padding-inline: 26px;
}

/* --------------------------------------------------------------------------
   28. Llamada a la acción
   -------------------------------------------------------------------------- */
.llamada-seccion {
  padding-block: clamp(48px, 6vw, 80px);
}

.llamada {
  border: 1px solid var(--rojo);
  background: var(--superficie);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

@media (min-width: 900px) {
  .llamada { grid-template-columns: 1fr auto; }
}

.llamada__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.llamada__entrada {
  font-size: 16px;
  line-height: 1.6;
}

.llamada__acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(300px, 100%);
}

.llamada__acciones .btn {
  min-height: 60px;
}

/* --------------------------------------------------------------------------
   29. Cabecera de página interior
   -------------------------------------------------------------------------- */
.cabecera-pagina {
  padding-block: clamp(32px, 4vw, 44px);
}

.cabecera-pagina__interior {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.cabecera-pagina__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cabecera-pagina__entrada {
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 660px;
}

.cabecera-pagina .btn {
  min-height: 52px;
  padding-inline: 22px;
}

/* --------------------------------------------------------------------------
   30. Marcas
   -------------------------------------------------------------------------- */
.marca-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-block: 40px;
  border-bottom: 1px solid var(--linea);
  align-items: start;
}

@media (min-width: 1000px) {
  .marca-fila { grid-template-columns: 380px 1fr; }
}

.marca-fila:last-child {
  border-bottom: 0;
}

.marca-fila__ficha {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.marca-fila__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--plata-claro);
}

.marca-fila__nombre {
  font-size: clamp(16px, 1.4vw, 18.8px);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.marca-fila__descripcion {
  font-size: 15px;
  line-height: 1.65;
}

.marca-fila__vehiculos {
  min-width: 0;
}

/* auto-fill y no auto-fit: con una sola tarjeta, auto-fit la estiraría a todo
   el ancho y quedaría desproporcionada. Con auto-fill se mantienen las tres
   columnas y los huecos se quedan vacíos, como en el prototipo. */
.marca-fila__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}

.marca-fila__vacia {
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.marca-fila__vacia-titulo {
  font-size: 18px;
  font-weight: 700;
}

.tarjeta-compacta {
  overflow: hidden;
}

.tarjeta-compacta__cuerpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tarjeta-compacta__familia {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plata);
}

.tarjeta-compacta__nombre {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hueso);
}

.tarjeta-compacta__hueco {
  flex: 1;
  min-height: 6px;
}

.tarjeta-compacta__precio {
  font-size: 17px;
  font-weight: 600;
  color: var(--hueso);
}

.marcas-resumen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.marcas-resumen__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 16px 20px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--plata-claro);
  flex-wrap: wrap;
}

.marcas-resumen__marca:hover {
  border-color: var(--linea-fuerte);
}

.marcas-resumen__nombre {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--hueso);
}

.marcas-resumen__cuenta {
  font-size: 13px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   31. Contacto
   -------------------------------------------------------------------------- */
.contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .contacto { grid-template-columns: 1fr 400px; }
}

.contacto__vias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.contacto__via {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--linea);
}

.contacto__via:last-child {
  border-bottom: 0;
}

.contacto__detalle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.contacto__valor {
  font-size: 17px;
  color: var(--hueso);
  overflow-wrap: anywhere;
}

.contacto__nota {
  font-size: 13.5px;
}

.contacto__formulario {
  padding: 28px;
  gap: 16px;
}

.contacto__aviso {
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   32. Indicador de navegación
   Barra indeterminada arriba del todo. No mide progreso: el servidor no lo
   reporta, así que un porcentaje sería una cifra inventada. Solo dice que la
   petición está en marcha.
   -------------------------------------------------------------------------- */
.indicador-navegacion {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  /* Por debajo va el rojo al 22 %, para que se vea el recorrido completo. */
  background: rgba(200, 22, 31, 0.22);
}

.indicador-navegacion[hidden] {
  display: none;
}

.indicador-navegacion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rojo);
  animation: indicador-navegacion 1.5s ease-in-out infinite;
}

@keyframes indicador-navegacion {
  0% { transform: translateX(-100%) scaleX(0.35); }
  50% { transform: translateX(0) scaleX(0.6); }
  100% { transform: translateX(100%) scaleX(0.35); }
}

/* Con movimiento reducido la barra sigue apareciendo, pero quieta: el aviso de
   que la petición está en marcha no depende de la animación. */
@media (prefers-reduced-motion: reduce) {
  .indicador-navegacion::after {
    animation: none;
    transform: none;
    opacity: 0.85;
  }
}

/* --------------------------------------------------------------------------
   33. Visor de PDF
   -------------------------------------------------------------------------- */

/* Ventana de previsualización de la ficha en PDF. Solo aparece por encima de
   900px: por debajo, el botón de la ficha técnica descarga en vez de abrirla,
   porque los navegadores móviles no pintan un PDF dentro de un iframe.

   La caja va sobre un velo oscuro y ocupa casi toda la ventana: el PDF es A4
   en vertical y en un hueco pequeño no se lee nada. */
.visor-pdf {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vw, 40px);
  background: rgba(0, 0, 0, 0.8);
}

.visor-pdf[hidden] {
  display: none;
}

/* La hoja es A4 en vertical: a ancho completo de una pantalla grande sale
   desmesurada y obliga a desplazarse para ver una sola página. La ventana se
   limita a una medida de lectura y se centra sobre el velo. */
.visor-pdf__cabecera,
.visor-pdf__cuerpo {
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
}

.visor-pdf__cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-bottom: 0;
  background: var(--superficie);
}

.visor-pdf__titulo {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visor-pdf__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.visor-pdf__descargar {
  min-height: 44px;
  padding: 0 20px;
}

.visor-pdf__cuerpo {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--linea);
  /* El PDF es una pieza de impresión sobre blanco: el marco se apoya en gris
     para que la hoja se distinga de su fondo mientras carga. */
  background: #3A3A3E;
}

.visor-pdf__marco {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}