/* ===========================================================================
   Luxemotor · Web pública v2 · FUNDAMENTOS

   Aquí no hay ni un componente: solo las decisiones de las que cuelga todo lo
   demás. Color, tipografía, ritmo vertical y unas cuantas reglas de base.

   La regla es que **ningún componente escriba un color, un tamaño de letra o
   una medida a mano**. Todo sale de las fichas de abajo. Cambiar la identidad
   tiene que ser tocar este bloque, no doscientas líneas repartidas.
   =========================================================================== */

/* --- La tipografía ---------------------------------------------------------

   ARCHIVO, alojada aquí y no traída de Google. Traerla de fuera manda la IP de
   cada visitante a un tercero —lo que obliga a pedir consentimiento— y añade
   una conexión más antes de que se pinte una sola letra.

   Es una grotesca industrial, de la familia de las que se usan en señalética y
   en prensa deportiva: ancha, de trazo firme y con mucho carácter en los pesos
   altos. Se ha elegido porque **es de la misma familia que el logotipo**, que
   es una grotesca pesada e inclinada; una tipografía humanista o geométrica al
   lado de ese logotipo se vería prestada.

   Es VARIABLE: un solo fichero lleva del peso 100 al 900 y del ancho 62 al
   125. Con tipografías normales harían falta seis ficheros para tener los
   pesos que usa esta web; así son 90 KB y una sola descarga.

   `font-display: swap` pinta el texto desde el primer momento con la del
   sistema y lo cambia cuando llega la buena: nunca hay una pantalla en blanco
   esperando a una letra.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/assets/fuentes/archivo-latin.woff2") format("woff2");
    /* Español, catalán, euskera, gallego, inglés y francés entran aquí. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/assets/fuentes/archivo-latin-ext.woff2") format("woff2");
    /* El segundo fichero **solo se descarga si hace falta**: el navegador mira
       qué letras hay en la página. Una página en español no lo pide nunca. */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Color ----------------------------------------------------------

       Blanco y naranja, que es lo que pidió el usuario. El naranja es el de
       la marca, medido del propio logotipo: la palabra «MOTOR» es #FF6600
       exacto.

       LOS GRISES NO SON GRISES PUROS: llevan una pizca de amarillo dentro.
       Un gris neutro al lado de un naranja saturado se ve azulado y sucio;
       inclinarlo hacia el acento hace que la pantalla se lea como una sola
       cosa y no como dos paletas pegadas.
       ------------------------------------------------------------------- */

    --naranja: #ff6600;

    /* #FF6600 sobre blanco da 2,9:1 de contraste. Vale para superficies,
       filetes e iconos, y para texto grande en negrita, pero NO para texto
       normal, que necesita 4,5:1. Para eso está este otro, que se ve igual de
       naranja y llega a 5,5:1. Enlaces y letra pequeña, siempre con él. */
    --naranja-tinta: #b34700;

    /* El de los botones cuando se pasa por encima: el mismo tono, un punto
       menos de luz, para que el cambio se note sin parecer otro color. */
    --naranja-hondo: #e65c00;

    /* Fondos teñidos: destacar un bloque sin meter otro color en la paleta. */
    --naranja-velo: #fff3ea;

    --tinta: #1a1613;
    --tinta-media: #574f49;

    /* El gris del texto secundario está ajustado para llegar a 4,5:1 sobre
       blanco. Un gris más claro se ve más elegante en la maqueta y deja de
       leerse en un móvil al sol. */
    --tinta-suave: #7a7069;

    --blanco: #ffffff;
    --hueso: #faf7f4;
    --linea: #e9e2db;
    --linea-fuerte: #d6ccc3;
    /* Un gris tan claro que casi no está. Es el borde de las tarjetas: tiene
       que cerrarlas, no dibujarlas. */
    --linea-tenue: #f1ece6;

    /* Situación del vehículo. Son SEMÁFORO, no identidad: van aparte del
       naranja de la marca a propósito, porque si «reservado» fuera el naranja
       corporativo dejaría de leerse como un aviso. */
    --reservado: #c2410c;
    --vendido: #b3261e;
    --bien: #15803d;
    --mal: #b3261e;

    /* --- Tipografía ------------------------------------------------------ */

    --letra: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --letra-numeros: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Escala tipográfica. Las cuatro grandes crecen con la pantalla —de móvil
       a monitor— en vez de dar saltos en cada punto de ruptura: así un titular
       nunca se queda enano en grande ni parte en tres renglones en pequeño. */
    --t-diminuto: .75rem;      /* 12px · etiquetas, contadores */
    --t-menudo: .8125rem;      /* 13px */
    --t-pequeno: .875rem;      /* 14px · datos de la tarjeta */
    --t-normal: 1rem;          /* 16px · texto corrido */
    --t-cuerpo: 1.0625rem;     /* 17px · páginas de contenido */
    --t-medio: clamp(1.125rem, .95rem + .55vw, 1.375rem);
    --t-grande: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
    --t-titular: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem);
    --t-portada: clamp(2.125rem, 1.3rem + 3.2vw, 3.5rem);

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-fuerte: 600;
    --peso-recio: 700;

    --alto-apretado: 1.1;      /* titulares */
    --alto-normal: 1.4;        /* subtítulos, tarjetas */
    --alto-lectura: 1.65;      /* texto corrido */

    /* --- Ritmo -----------------------------------------------------------

       Una sola escala, en pasos de 4 px. Que todo el espaciado salga de aquí
       es lo que hace que una página parezca compuesta y no amontonada.
       ------------------------------------------------------------------- */

    --e1: .25rem;
    --e2: .5rem;
    --e3: .75rem;
    --e4: 1rem;
    --e5: 1.25rem;
    --e6: 1.5rem;
    --e8: 2rem;
    --e10: 2.5rem;
    --e12: 3rem;
    --e16: 4rem;

    /* La separación entre bloques grandes también respira con la pantalla. */
    --e-seccion: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

    /* --- Medidas ---------------------------------------------------------- */

    --ancho: 1280px;
    --ancho-lectura: 42rem;    /* ~70 caracteres: lo que se lee sin cansarse */
    --margen-lateral: clamp(1rem, .5rem + 2vw, 2rem);

    --radio: 12px;
    --radio-corto: 8px;
    --radio-pildora: 999px;

    /* Sombras en dos capas: una pegada al borde que dibuja el canto y otra
       ancha y muy tenue que separa del fondo. De una sola capa salen esas
       sombras grises y planas que delatan una plantilla. */
    --sombra-baja: 0 1px 2px rgb(26 22 19 / 6%), 0 2px 8px rgb(26 22 19 / 4%);
    --sombra-media: 0 2px 4px rgb(26 22 19 / 6%), 0 12px 28px rgb(26 22 19 / 8%);
    --sombra-alta: 0 4px 8px rgb(26 22 19 / 8%), 0 24px 48px rgb(26 22 19 / 12%);

    --transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Que un enlace a un ancla no salte de golpe. Se anula más abajo para
       quien haya pedido menos movimiento en su sistema. */
    scroll-behavior: smooth;
    /* Safari en horizontal agranda la letra por su cuenta y descuadra la
       rejilla de tarjetas. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--tinta);
    background: var(--blanco);
    font-family: var(--letra);
    font-size: var(--t-normal);
    line-height: var(--alto-lectura);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Los titulares se componen apretados y sin viudas: `text-wrap: balance`
   reparte las líneas para que la última no se quede con una palabra suelta. */
h1, h2, h3, h4 {
    margin: 0;
    font-weight: var(--peso-recio);
    line-height: var(--alto-apretado);
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: var(--t-titular); }
h2 { font-size: var(--t-grande); }
h3 { font-size: var(--t-medio); letter-spacing: -.015em; }
h4 { font-size: var(--t-normal); letter-spacing: 0; }

p { margin: 0; }

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Los números se alinean en columna —precios, kilómetros, contadores— con
   cifras de ancho fijo. Sin esto, un 1 ocupa menos que un 8 y las columnas
   bailan. */
.cifras,
.tarjeta-precio,
.ficha-precio {
    font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* El foco se ve SIEMPRE, y solo cuando se navega con teclado. Quitarlo es la
   forma más rápida de dejar la web inservible para quien no usa ratón. */
:focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--naranja);
    color: var(--blanco);
}

/* Quien ha pedido menos movimiento en su sistema, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen-lateral);
}

/* **El aire de arriba lo pone la página, no lo que haya dentro.**

   No lo ponía nadie: lo único que separaba el contenido de la cabecera era el
   margen del aviso de la tienda. En las páginas sin aviso —que son casi todas—
   **el título quedaba pegado al logotipo**, y en las que sí lo tenían el hueco
   parecía correcto por casualidad. Lo vio el usuario en `/vehiculos-en-venta`.

   Ahora lo pone `main` y siempre mide lo mismo, haya aviso o no haya. Lo que va
   dentro no tiene que saber que existe una cabecera encima. */
main.contenedor {
    padding-top: var(--e6);
}

/* --- Puente con los componentes de la maqueta anterior ---------------------

   Los nombres viejos, apuntando a la paleta nueva. Existen para que la web
   siga funcionando entera mientras se rehace pantalla por pantalla, y **se
   van borrando** según cada componente se reescriba con los nombres nuevos.
   Cuando este bloque se quede vacío, es que el rediseño ha terminado.
   ------------------------------------------------------------------------- */

:root {
    --suave: var(--tinta-suave);
    --fondo: var(--blanco);
    --fondo-alterno: var(--hueso);
    --acento: var(--naranja);
    --acento-oscuro: var(--naranja-tinta);
    --sombra: var(--sombra-media);
}

/* --- Franja de contacto ----------------------------------------------------

   Los dos teléfonos y el parking, arriba del todo. Oscura, para que enmarque
   la cabecera blanca de debajo y se lea de un vistazo sin robarle sitio al
   coche, que es lo que se viene a ver.

   No se queda pegada al hacer scroll: la que se pega es la cabecera. Dos
   barras fijas serían dos dedos de pantalla menos en un móvil.
   -------------------------------------------------------------------------- */

.franja {
    background: var(--tinta);
    color: var(--hueso);
    font-size: var(--t-menudo);
}

.franja-fila {
    display: flex;
    align-items: center;
    gap: var(--e5);
    min-height: 2.5rem;
    padding-block: var(--e2);
    flex-wrap: wrap;
}

/* --- Un teléfono con su icono --------------------------------------------

   El mismo bloque en la franja de arriba y en el pie: lo pinta `_contacto.php`,
   que está escrito una sola vez. Aquí solo va lo que comparten los dos sitios;
   el color y la colocación los pone cada contexto, más abajo.
   -------------------------------------------------------------------------- */

.contacto-dato {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: inherit;
    text-decoration: none;
    font-weight: var(--peso-medio);
    /* Los números se leen mejor sin que las cifras bailen de ancho. */
    font-variant-numeric: tabular-nums;
}

.contacto-icono {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: 0 0 auto;
    color: var(--naranja);
}

a.contacto-dato {
    transition: color var(--transicion);
}

.franja a.contacto-dato:hover,
.franja a.contacto-dato:focus-visible { color: var(--naranja); }

/* El parking no se pulsa: ni cambia de color ni pinta el icono de naranja, que
   sería prometer un enlace que no existe. */
.franja-parking {
    margin-left: auto;
    color: var(--linea-fuerte);
    font-weight: var(--peso-normal);
}

.franja-parking .contacto-icono { color: inherit; }

/* Texto que no se ve pero que un lector de pantalla sí lee. Hace falta cada vez
   que el sentido lo pone un dibujo: sin «Teléfono:» delante, quien no ve la
   pantalla oye dos ristras de cifras seguidas y no sabe cuál es cuál. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* En pantalla estrecha caben los dos teléfonos y poco más: el parking se va.
   Es un detalle simpático; los teléfonos son el motivo de la franja. */
@media (max-width: 40rem) {
    .franja-fila { gap: var(--e4); justify-content: space-between; }
    .franja-parking { display: none; }
}

/* --- Cabecera -------------------------------------------------------------

   Blanca, pegada arriba y con un filete finísimo. El escaparate es el coche:
   la cabecera tiene que estar y no llamar la atención.
   -------------------------------------------------------------------------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
}

.cabecera-fila {
    display: flex;
    align-items: center;
    gap: var(--e6);
    min-height: 4.5rem;
}

@media (min-width: 62rem) {
    .cabecera-fila { min-height: 5.25rem; }
}

/* El logotipo. Alto fijo y ancho automático: manda cuánto ocupa de alto en la
   barra. El fichero es el original y no se toca. */
.marca {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: auto;
}

.marca img {
    height: 2.25rem;
    width: auto;
}

@media (min-width: 62rem) {
    .marca img { height: 2.75rem; }
}

/* --- Navegación ------------------------------------------------------------

   El subrayado no es un borde que aparece: es una barra que CRECE desde el
   centro. Cuesta cuatro líneas y es la diferencia entre un menú que responde y
   uno que parpadea.
   -------------------------------------------------------------------------- */

.navegacion {
    display: flex;
    align-items: center;
    gap: var(--e6);
}

.navegacion > a,
.navegacion-grupo > a {
    position: relative;
    padding: var(--e2) 0;
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-fuerte);
    letter-spacing: .01em;
    line-height: 1.2;
    transition: color var(--transicion);
}

/* El nombre y su flechita van juntos y no se separan: si el menú va apretado,
   el navegador parte la línea por el espacio de delante de la flecha y la deja
   colgando debajo del apartado. */
.navegacion-grupo > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* La flechita de los apartados que llevan páginas dentro. Gira al desplegarse,
   que es la única manera de saber si lo que hay abierto es esto o lo de al
   lado. */
.navegacion-flecha {
    width: .8em;
    height: .8em;
    margin-left: .15em;
    vertical-align: -.08em;
    opacity: .55;
    transition: transform var(--transicion), opacity var(--transicion);
}

.navegacion-grupo:hover .navegacion-flecha,
.navegacion-grupo:focus-within .navegacion-flecha {
    opacity: 1;
    transform: rotate(180deg);
}

/* El botón no lleva subrayado: ya es un botón. */
.navegacion > a:not(.navegacion-boton)::after,
.navegacion-grupo > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--naranja);
    transform: scaleX(0);
    transition: transform var(--transicion);
}

.navegacion > a:hover,
.navegacion-grupo > a:hover,
.navegacion a.activo {
    color: var(--tinta);
}

.navegacion > a.activo:not(.navegacion-boton)::after,
.navegacion-grupo > a.activo::after,
.navegacion > a:hover:not(.navegacion-boton)::after,
.navegacion-grupo > a:hover::after {
    transform: scaleX(1);
}

/* --- El botón del menú ----------------------------------------------------

   La única de las secciones que pide algo en vez de limitarse a estar. Cuál es
   lo decide la intranet; aquí solo se pinta.

   Va separada del resto por un filete vertical: sin él parece un enlace más al
   que le han puesto color, y con él se lee como lo que es.
   -------------------------------------------------------------------------- */

/* El selector lleva `.navegacion >` delante a propósito: sin él pesa menos que
   la regla de los enlaces del menú y el relleno de ahí se impondría. Es eso o
   un `!important`, y un `!important` puesto hoy es un rato perdido mañana. */
.navegacion > a.navegacion-boton {
    padding: .5rem 1.1rem;
    border-radius: var(--radio-pildora);
    background: var(--naranja);
    color: var(--blanco);
    white-space: nowrap;
    transition: background var(--transicion), transform var(--transicion);
}

.navegacion > a.navegacion-boton:hover,
.navegacion > a.navegacion-boton:focus-visible {
    background: var(--naranja-hondo);
    /* Un pelo hacia arriba: se nota que responde sin que salte nada de sitio. */
    transform: translateY(-1px);
}

.navegacion > a.navegacion-boton.activo { background: var(--naranja-tinta); }

/* --- El botón del menú en pantalla estrecha --------------------------------

   Tres rayas que se convierten en un aspa. Se anima la transformación, no la
   forma, para que vaya fino también en un móvil viejo.
   -------------------------------------------------------------------------- */

.menu-boton {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 .6rem;
    margin-right: -.6rem;
    border: 0;
    background: none;
    cursor: pointer;
}

.menu-boton span {
    display: block;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
    transition: transform var(--transicion), opacity var(--transicion);
}

.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Escritorio y móvil ---------------------------------------------------- */

@media (max-width: 61.999rem) {
    /* Sin JavaScript el botón no haría nada, así que no sale. El menú se queda
       desplegado en varias filas y la web se navega igual. */
    .con-js .menu-boton { display: flex; }

    .navegacion { flex-wrap: wrap; gap: var(--e2) var(--e4); }

    /* El menú se sale de la pantalla y entra deslizándose. Se queda en el DOM
       —`visibility`, no `display: none`— para que la animación exista y para
       que el lector de pantalla no lo pierda. */
    .con-js .navegacion {
        /* Colgado de la cabecera, no de la ventana. Con una medida fija desde
           arriba —«4,5 rem»— el panel se subía encima del logotipo en cuanto
           apareció la franja de los teléfonos, porque esa medida ya no era la
           altura de lo que hay encima. Así cae siempre justo debajo, haya lo
           que haya arriba. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 78dvh;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        /* Sin esto el menú se parte en DOS COLUMNAS. La regla de más arriba
           permite que los enlaces salten de línea, y una columna con altura
           máxima que no cabe no desborda: se dobla al lado. Con los submenús
           desplegados y el botón del final se pasa de largo, y en el móvil
           salían «Contactar» y «Vender mi coche» en una segunda columna medio
           fuera de la pantalla. */
        flex-wrap: nowrap;
        gap: 0;
        padding: var(--e4) var(--margen-lateral) var(--e8);
        background: var(--blanco);
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--sombra-alta);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--transicion), opacity var(--transicion), visibility var(--transicion);
    }

    .con-js .cabecera[data-abierto="1"] .navegacion {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .con-js .navegacion > a,
    .con-js .navegacion-grupo {
        border-bottom: 1px solid var(--linea);
    }

    .con-js .navegacion > a,
    .con-js .navegacion-grupo > a {
        display: block;
        padding: var(--e4) 0;
        font-size: var(--t-medio);
        font-weight: var(--peso-recio);
        letter-spacing: -.01em;
        color: var(--tinta);
    }

    /* El apartado con páginas dentro y su flechita, en la misma línea. Como
       bloque, la flechita se caía debajo del nombre y parecía un botón suelto.
       Va solo aquí, no en todos los enlaces: un apartado de nombre largo tiene
       que poder partirse en dos líneas antes que salirse de la pantalla. */
    .con-js .navegacion-grupo > a {
        display: flex;
        align-items: center;
    }

    /* En el móvil no hay «encima del ratón»: el subrayado que crece no sirve,
       así que la página en la que se está se marca con una barra al lado. */
    .con-js .navegacion > a::after,
    .con-js .navegacion-grupo > a::after {
        left: calc(var(--margen-lateral) * -1);
        right: auto;
        top: 0;
        bottom: 0;
        width: 3px;
        height: auto;
        transform: scaleY(0);
    }

    .con-js .navegacion > a.activo::after,
    .con-js .navegacion-grupo > a.activo::after {
        transform: scaleY(1);
    }

    /* El botón sigue siendo un botón dentro del menú desplegado: a lo ancho y
       al final de todo, que es donde cae el pulgar. Sin el filete de abajo,
       que aquí sería una raya cruzándole el naranja. */
    .con-js .navegacion > a.navegacion-boton {
        margin-top: var(--e5);
        padding: var(--e4) var(--e5);
        border-bottom: 0;
        color: var(--blanco);
        text-align: center;
    }
}

/* --- Submenús ------------------------------------------------------------

   Sin JavaScript: se abre con el ratón encima (`:hover`) y con el tabulador
   (`:focus-within`), así que quien navegue con teclado llega igual.

   El padre sigue siendo un enlace a su propia página. Con el dedo no hay
   «encima», de modo que el primer toque entra en «Taller», donde sus páginas
   están como botones al final: por eso hacen falta las dos cosas.
   ------------------------------------------------------------------------- */

.navegacion-grupo {
    position: relative;
    display: inline-flex;
}

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

@media (min-width: 62rem) {
    .submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 20;
        min-width: 13rem;
        padding: var(--e2);
        margin-top: .75rem;
        border: 1px solid var(--linea);
        border-radius: var(--radio-corto);
        background: var(--blanco);
        box-shadow: var(--sombra-alta);

        /* Oculto sin `display: none`, para que la transición funcione y para
           que el lector de pantalla no lo pierda al tabular. */
        visibility: hidden;
        opacity: 0;
        transform: translate(-50%, -.35rem);
        transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
    }

    /* El puente invisible entre el enlace y el desplegable. Sin él, al bajar el
       ratón se cruzan los .75rem de separación, el `:hover` se pierde y el menú
       se cierra en la cara. */
    .submenu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -.75rem;
        height: .75rem;
    }

    .navegacion-grupo:hover .submenu,
    .navegacion-grupo:focus-within .submenu {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .submenu a {
        padding: var(--e2) var(--e3);
        border-radius: 5px;
        font-size: var(--t-pequeno);
        font-weight: var(--peso-medio);
        color: var(--tinta-media);
        white-space: nowrap;
        transition: background var(--transicion), color var(--transicion);
    }

    .submenu a:hover {
        background: var(--hueso);
        color: var(--tinta);
    }

    .submenu a.activo {
        color: var(--naranja-tinta);
    }
}

@media (max-width: 61.999rem) {
    .navegacion-grupo {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .submenu {
        padding: 0 0 var(--e4) var(--e4);
        gap: var(--e1);
    }

    .submenu a {
        padding: var(--e2) 0;
        font-size: var(--t-normal);
        font-weight: var(--peso-medio);
        color: var(--tinta-media);
    }

    .submenu a.activo { color: var(--naranja-tinta); }
}

/* Selector de idioma. Solo sale con más de uno publicado. */

.idiomas {
    display: flex;
    align-items: center;
    gap: var(--e1);
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-pildora);
}

.idiomas a {
    padding: .25rem .6rem;
    border-radius: var(--radio-pildora);
    color: var(--tinta-suave);
    font-size: var(--t-diminuto);
    font-weight: var(--peso-recio);
    letter-spacing: .06em;
    line-height: 1.4;
    transition: background var(--transicion), color var(--transicion);
}

.idiomas a:hover {
    color: var(--tinta);
}

.idiomas a.activo {
    background: var(--tinta);
    color: var(--blanco);
}

@media (max-width: 61.999rem) {
    /* Delante del botón del menú, no dentro: cambiar de idioma no debería
       obligar a abrir nada. */
    .idiomas,
    .idiomas-plegado { order: 2; }
    .menu-boton { order: 3; }
}

/* --- El idioma plegado ----------------------------------------------------

   A partir de los idiomas que diga la intranet, las pastillas no caben y se
   convierten en un desplegable. Es un `<details>` del navegador: se abre y se
   cierra sin una línea de JavaScript, se maneja con el teclado y funciona
   igual en un móvil de hace diez años.
   -------------------------------------------------------------------------- */

.idiomas-plegado {
    position: relative;
    flex: 0 0 auto;
}

.idiomas-plegado > summary {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .35rem .7rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-pildora);
    color: var(--tinta);
    font-size: var(--t-diminuto);
    font-weight: var(--peso-recio);
    letter-spacing: .06em;
    line-height: 1.4;
    cursor: pointer;
    /* Fuera el triangulito que pone el navegador: ya hay una flecha dibujada,
       y son dos maneras distintas de decir lo mismo. */
    list-style: none;
}

.idiomas-plegado > summary::-webkit-details-marker { display: none; }

.idiomas-plegado > summary:hover { border-color: var(--linea-fuerte); }

.idiomas-plegado > summary .navegacion-flecha { opacity: .55; }

.idiomas-plegado[open] > summary .navegacion-flecha { transform: rotate(180deg); }

.idiomas-lista {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 5.5rem;
    padding: var(--e2);
    margin-top: .4rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    box-shadow: var(--sombra-alta);
}

.idiomas-lista a {
    padding: .4rem .6rem;
    border-radius: var(--radio-corto);
    color: var(--tinta-media);
    font-size: var(--t-diminuto);
    font-weight: var(--peso-recio);
    letter-spacing: .06em;
}

.idiomas-lista a:hover { background: var(--hueso); color: var(--tinta); }

.idiomas-lista a.activo { background: var(--tinta); color: var(--blanco); }

/* --- Portada ------------------------------------------------------------- */

/* El titular de la portada, compuesto grande y apretado. La letra variable
   permite estrecharla un punto (`font-stretch`) para que a tamaño grande no se
   deshilache: es lo que hace que un titular parezca compuesto y no escalado. */
.hero {
    padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0 clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.hero h1 {
    max-width: 20ch;
    font-size: var(--t-portada);
    font-weight: 800;
    font-stretch: 96%;
    letter-spacing: -.035em;
    line-height: 1.02;
}

/* El filete naranja debajo del titular: un solo gesto de color, corto y
   grueso. Es la firma de la página y no se repite en ningún otro sitio. */
.hero h1::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 5px;
    margin-top: var(--e5);
    background: var(--naranja);
}

.hero p {
    margin-top: var(--e5);
    max-width: 46ch;
    color: var(--tinta-media);
    font-size: var(--t-medio);
    line-height: 1.5;
}

/* --- Bloques ------------------------------------------------------------- */

.bloque {
    padding-bottom: var(--e-seccion);
}

/* Cabecera de sección: el título a la izquierda y el enlace a la derecha,
   separados por una línea que llega hasta el final. El filete alineado con la
   base del título es lo que ordena la página de un vistazo. */
.bloque-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e3) var(--e6);
    margin-bottom: var(--e8);
    padding-bottom: var(--e4);
    border-bottom: 2px solid var(--tinta);
}

.bloque-cabecera h1,
.bloque-cabecera h2 {
    font-size: var(--t-grande);
    font-weight: 800;
    font-stretch: 98%;
    letter-spacing: -.03em;
}


/* La flecha se separa al pasar por encima: mueve el ojo hacia donde lleva. */
.enlace-mas {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--naranja-tinta);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-recio);
}

.enlace-mas::after {
    content: "→";
    transition: transform var(--transicion);
}

.enlace-mas:hover::after {
    transform: translateX(4px);
}

.vacio {
    color: var(--tinta-suave);
    padding: var(--e16) 0;
    text-align: center;
}

.nota {
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
}

/* --- Listado con filtros -------------------------------------------------

   Los filtros a la IZQUIERDA y los coches a la derecha. En pantalla estrecha,
   los filtros arriba: si van debajo, para volver a filtrar hay que recorrer
   cien tarjetas.

   El orden se pone con CSS y no cambiando el HTML: en el código los coches van
   primero, que es lo que interesa a quien lee la página con un lector de
   pantalla o llega desde un buscador.
   ------------------------------------------------------------------------- */

.listado-columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

/* **Fondo gris claro**, pedido por el usuario: separa la columna de filtros del
   listado sin necesidad de una línea. */
.listado-filtros {
    order: -1;
    padding: var(--e5);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--hueso);
}

/* --- La barra de ordenar ---------------------------------------------------

   Encima de las tarjetas y pegada a la derecha, que es donde la busca todo el
   mundo. En pantalla estrecha se estira de lado a lado: apretada contra el
   borde derecho, en un móvil, es un desplegable diminuto en una esquina.
   -------------------------------------------------------------------------- */

.listado-barra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--e2);
    margin-bottom: var(--e4);
}

.listado-barra label {
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
    white-space: nowrap;
}

/* El mismo campo que los del filtro de precios: es el mismo formulario. */
.listado-barra select {
    flex: 1 1 auto;
    max-width: 16rem;
    padding: .55rem .7rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    font-size: var(--t-pequeno);
    cursor: pointer;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.listado-barra select:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgb(255 102 0 / 15%);
}

@media (min-width: 40rem) {
    .listado-barra select {
        flex: 0 0 auto;
    }
}

/* --- Los filtros, plegables en el móvil ------------------------------------

   En pantalla estrecha nacen cerrados: sin esto hay que bajar la columna entera
   para llegar a los coches, y la página parece un formulario con un listado
   escondido al final.

   Es una casilla escondida con su etiqueta, así que se abre y se cierra **sin
   JavaScript**. En pantalla ancha se le quita el rótulo y se deja siempre
   abierto. No es un `<details>` porque a un `<details>` cerrado no se le puede
   enseñar el contenido desde el CSS: lo esconde el navegador por dentro.
   -------------------------------------------------------------------------- */

.filtros-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    padding: var(--e2) 0;
    font-size: var(--t-normal);
    font-weight: var(--peso-recio);
    cursor: pointer;
}

.filtros-resumen svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: var(--tinta-suave);
    transition: transform var(--transicion);
}

.filtros-interruptor:checked ~ .filtros-resumen svg {
    transform: rotate(180deg);
}

/* El cuerpo solo se ve con la casilla marcada. En pantalla ancha, siempre. */
.filtros-cuerpo {
    display: none;
}

.filtros-interruptor:checked ~ .filtros-cuerpo {
    display: block;
}

/* Que se vea el foco al llegar con el teclado: la casilla está escondida, así
   que el recuadro tiene que salir en su etiqueta. */
.filtros-interruptor:focus-visible ~ .filtros-resumen {
    outline: 2px solid var(--naranja);
    outline-offset: 2px;
}

/* «Mostrar todos», lo primero de la columna y solo cuando hay algo que quitar. */
.filtros-todos {
    display: block;
    margin: var(--e3) 0 var(--e2);
    padding: var(--e3) var(--e4);
    border: 1px solid var(--naranja);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    color: var(--naranja-tinta);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-recio);
    text-align: center;
    transition: background var(--transicion), color var(--transicion);
}

.filtros-todos:hover {
    background: var(--naranja);
    color: var(--blanco);
}

@media (min-width: 62rem) {
    .listado-columnas {
        grid-template-columns: 17rem 1fr;
        align-items: start;
    }

    /* Sin `position: sticky` y sin desplazamiento propio: la columna ocupa lo
       que ocupe y se baja con la página. Una caja que se desplaza por dentro,
       dentro de una página que también se desplaza, obliga a acertar con el
       ratón para mover una u otra. */
    .listado-filtros {
        grid-column: 1;
        grid-row: 1;
    }

    .listado-resultados {
        grid-column: 2;
        grid-row: 1;
    }

    /* En pantalla ancha no hay nada que plegar: el rótulo desaparece y los
       filtros se ven siempre, esté la casilla marcada o no. */
    .filtros-resumen {
        display: none;
    }

    .filtros-cuerpo,
    .filtros-interruptor:checked ~ .filtros-cuerpo {
        display: block;
    }
}

.listado-filtros form {
    display: flex;
    flex-direction: column;
}

.filtro {
    margin: 0;
    padding: var(--e5) 0;
    border: 0;
    border-top: 1px solid var(--linea);
}

.filtro:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* El `float` de aquí abajo no es decoración: es **la única forma de que un
   `<legend>` deje de ser «el rótulo del recuadro»** y pase a colocarse como un
   párrafo cualquiera. `display: block` no basta; el navegador lo sigue tratando
   aparte, y eso daba dos fallos de una vez:

   - **La raya del filtro anterior cruzaba el título.** El rótulo de un
     `<fieldset>` se dibuja ENCIMA de su borde superior, y aquí ese borde es la
     línea que separa un grupo de filtros del siguiente.
   - **Sobraba hueco entre el título y sus casillas.** El relleno del recuadro
     —1,25 rem— quedaba por DEBAJO del rótulo en vez de por encima, sumándose al
     margen propio del título.

   Con `float` el rótulo entra en el flujo normal: el borde vuelve a quedar por
   encima de él, el relleno separa un grupo del otro como se pretendía, y entre
   el título y sus opciones queda solo su margen. */
.filtro legend {
    float: left;
    width: 100%;
}

/* Lo que va detrás tiene que bajar del flotante en vez de solaparse con él. */
.filtro legend ~ * {
    clear: both;
}

.filtro legend,
.filtro-titulo {
    margin-bottom: var(--e2);
    padding: 0;
    font-size: var(--t-diminuto);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta);
}

.filtro-titulo {
    display: block;
}

/* Sin tope de alto y sin desplazamiento propio: cada filtro ocupa lo que
   necesite. Una lista con su propia barra dentro de una columna que ya se
   desplaza obliga a acertar con el ratón en el sitio exacto. */
.filtro-lista {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.filtro-opcion {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: .3rem 0;
    font-size: var(--t-pequeno);
    color: var(--tinta-media);
    cursor: pointer;
    transition: color var(--transicion);
}

.filtro-opcion:hover {
    color: var(--tinta);
}

/* Los distintivos se enseñan con su pegatina y no con su nombre: es la misma
   que el cliente tiene pegada en el parabrisas y la reconoce sin leer nada.
   «Sin distintivo» no tiene pegatina —no hay ninguna que poner— y se queda con
   su nombre, así que la lista mezcla las dos cosas y hay que darles la misma
   altura para que no bailen. */
.filtro-lista-pegatinas .filtro-opcion {
    min-height: 2.5rem;
}

.filtro-pegatina {
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 auto;
    /* Apagadas hasta que se pasa por encima o se marcan: cuatro pegatinas a todo
       color, una debajo de otra, gritan más que los coches. */
    opacity: .55;
    filter: saturate(.75);
    transition: opacity var(--transicion), filter var(--transicion);
}

.filtro-opcion:hover .filtro-pegatina,
.filtro-opcion:has(:checked) .filtro-pegatina {
    opacity: 1;
    filter: none;
}

/* Las opciones que no llevan a ningún sitio.

   Marcado Audi, una carrocería de la que no hay ningún Audi se queda así:
   marcarla daría una lista vacía. **Apagada, no escondida** —esconderla haría
   saltar la columna entera a cada clic— y **sin decir cuántos coches hay**, que
   esa cifra no se enseña en ninguna parte del escaparate.

   El `disabled` del `input` es lo que de verdad impide marcarla y lo que hace
   que un lector de pantalla la anuncie como no disponible; esto es solo cómo se
   ve. Se deja legible a propósito: sirve para saber qué hay en el catálogo
   aunque hoy no encaje con lo que se está pidiendo. */
.filtro-opcion-apagada {
    opacity: .4;
    cursor: not-allowed;
}

.filtro-opcion-apagada:hover {
    color: var(--tinta-media);
}

.filtro-opcion-apagada input[type="checkbox"] {
    cursor: not-allowed;
}

/* La casilla, en naranja y con el tamaño de un objetivo tocable de verdad.
   `accent-color` pinta la casilla nativa del sistema: se ve integrada en cada
   plataforma y no hay que rehacerla con `appearance: none`, que es lo que
   rompe el modo de alto contraste de Windows. */
.filtro-opcion input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--naranja);
    cursor: pointer;
}

.filtro-opcion span:first-of-type {
    flex: 1 1 auto;
}


.filtro input[type="number"] {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    font: inherit;
    font-size: var(--t-pequeno);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.filtro input[type="number"]:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgb(255 102 0 / 15%);
}

.filtro-rango {
    display: flex;
    align-items: center;
    gap: var(--e2);
}

/* Las casillas las esconde la barra al montarse, y hay que decirlo aquí porque
   `display: flex` gana al `[hidden]` que trae el navegador de fábrica. Sin
   JavaScript no se esconden y son las que filtran. */
.filtro-rango[hidden] {
    display: none;
}

.filtro-rango span {
    color: var(--tinta-suave);
}

/* La barra, dentro de la columna de filtros. Es la misma que la de la portada;
   aquí solo se aprieta un poco, que la columna es estrecha: la cifra al tamaño
   del resto de la columna y sin tanto hueco por debajo. */
.filtro .rango-cifras {
    margin-bottom: var(--e2);
    font-size: var(--t-pequeno);
}

.filtro-botones {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding-top: var(--e5);
    border-top: 1px solid var(--linea);
}

/* Con JavaScript el botón «Filtrar» sobra y se quita del todo, pero su caja se
   quedaba con el borde puesto: una raya suelta al final de la columna, debajo
   del último filtro y sin nada debajo. Si no queda botón, no hay nada que
   separar. */
.filtro-botones:not(:has(button)) {
    display: none;
}

.filtro-botones button {
    padding: .7rem 1.4rem;
    border: 0;
    border-radius: var(--radio-corto);
    background: var(--naranja);
    color: var(--blanco);
    font: inherit;
    font-size: var(--t-pequeno);
    font-weight: var(--peso-recio);
    cursor: pointer;
    transition: background var(--transicion);
}

.filtro-botones button:hover {
    background: var(--naranja-hondo);
}

.filtro-botones a {
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-medio);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.filtro-botones a:hover {
    color: var(--tinta);
}

/* --- Buscador ------------------------------------------------------------ */

.buscador {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.75rem;
}

.buscador input {
    flex: 1 1 auto;
    max-width: 24rem;
    padding: .55rem .8rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    font: inherit;
}

.buscador input:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: transparent;
}

.buscador button {
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

/* --- Rejilla de vehículos ------------------------------------------------ */

/* TRES POR FILA en pantalla grande, decidido por el usuario. Se fija el número
   de columnas en vez de dejar que quepan las que quepan: con `auto-fill`, un
   monitor ancho pinta cuatro o cinco y las tarjetas se quedan enanas.

   De abajo arriba: una en el móvil, dos en la tableta, tres a partir de
   portátil. En el móvil una y no dos, porque la foto del coche es lo que se
   mira y a media pantalla no se ve nada. */
/* `minmax(0, 1fr)` Y NO `1fr`. Esto no es un detalle: `1fr` es en realidad
   `minmax(auto, 1fr)`, y ese `auto` deja que un contenido ancho —el iframe de
   YouTube, que trae su propio tamaño— ENSANCHE su columna. El resultado son
   columnas de 368, 335 y 473 px en la misma fila y las miniaturas de distinto
   tamaño. Con `minmax(0, …)` las tres columnas miden exactamente lo mismo
   lleven foto o vídeo. */
.rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e8) var(--e5);
}

@media (min-width: 40rem) {
    .rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .rejilla {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Las tarjetas que todavía no toca enseñar.

   Los coches del listado van apareciendo por tandas según se baja —no hay
   paginación—, pero **están todos en el HTML desde el principio**: así Google ve
   el catálogo entero y los vídeos siguen su criterio de siempre.

   **Escondidas solo si hay JavaScript.** Sin él no hay quien las vaya soltando,
   así que se ven las cien, como antes. Y se esconden desde aquí y no desde el
   JavaScript porque aquel va con `defer`: se verían todas y desaparecerían de
   golpe con la página ya pintada. Mismo motivo que el menú de la cabecera. */
.con-js .tarjeta.tanda-oculta {
    display: none;
}

/* --- La tarjeta ------------------------------------------------------------

   Sin marco. Un recuadro alrededor de cada coche llena la rejilla de líneas y
   compite con la fotografía, que es lo único que se mira. La tarjeta se separa
   del fondo con sombra, y solo cuando se pasa por encima.
   -------------------------------------------------------------------------- */

.tarjeta {
    position: relative;
    border: 1px solid var(--linea-tenue);
    border-radius: var(--radio);
    background: var(--blanco);
    transition: transform var(--transicion), box-shadow var(--transicion),
                border-color var(--transicion);
}

/* Al pasar por encima se levanta un poco y **el borde se pone naranja**, el
   mismo que ya toma el nombre del coche. Pedido por el usuario el 30/08/2026: el
   borde se oscurecía un punto y no se leía como parte del mismo gesto.

   Nada más: ni sombras grandes ni la fotografía creciendo. Son cien tarjetas en
   una página y cada gesto se repite cien veces. */
.tarjeta:hover {
    transform: translateY(-2px);
    border-color: var(--naranja);
    box-shadow: var(--sombra-media);
}

.tarjeta-enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* El foco se dibuja sobre la tarjeta entera, no sobre el enlace de dentro. */
.tarjeta-enlace:focus-visible {
    outline: none;
}

.tarjeta:has(.tarjeta-enlace:focus-visible) {
    outline: 2px solid var(--naranja);
    outline-offset: 3px;
}

.tarjeta-foto {
    position: relative;
    /* 3/2, como estaba. Es la proporción más cercana al 16/9 del vídeo, así
       que las tarjetas con vídeo dejan la menor franja negra posible. */
    aspect-ratio: 3 / 2;
    border-radius: var(--radio) var(--radio) 0 0;
    overflow: hidden;
    background: var(--hueso);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La foto se acerca un punto al pasar por encima. Es el único movimiento de la
   tarjeta aparte de levantarse, y da la sensación de que hay algo detrás. */
.tarjeta-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.2, 0, .2, 1);
}

.tarjeta:hover .tarjeta-foto img {
    transform: scale(1.04);
}

/* --- La pegatina de la DGT ------------------------------------------------

   La misma que se cuelga del retrovisor. Se coloca pisando el borde entre la
   fotografía y el cuerpo: casi toda sobre la foto, la punta sobre el blanco.
   Ahí se reconoce de un vistazo sin taparle nada al coche.
   -------------------------------------------------------------------------- */

.tarjeta-distintivo {
    position: absolute;
    top: -1.6rem;
    right: var(--e4);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    /* Un aro blanco alrededor: la separa de la fotografía, que puede ser de
       cualquier color, sin dibujarle un borde encima. */
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--blanco), var(--sombra-media);
}

/* El nombre y la versión dejan sitio a la pegatina: sin esto, un modelo de
   nombre largo se le mete debajo. */
.tarjeta-cuerpo:has(.tarjeta-distintivo) .tarjeta-titulo,
.tarjeta-cuerpo:has(.tarjeta-distintivo) .tarjeta-version {
    padding-right: 3.75rem;
}

.tarjeta-sin-foto {
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
}

/* --- Vídeo de la tarjeta -------------------------------------------------

   MISMA ESTRUCTURA QUE LA WEB ACTUAL: un `.video-wrapper` en posición relativa
   y el iframe dentro, en el flujo, con su alto de 270 px. Nada de meterlo en
   una caja de proporción fija con `object-fit`: eso deforma el reproductor de
   YouTube y es lo que hacía que se viera peor que en la v1.

   `.oculto` hace aquí lo que `d-none` en la web actual, que usa Bootstrap.
   ------------------------------------------------------------------------- */

.oculto {
    display: none;
}

/* TODAS LAS TARJETAS, LA MISMA PROPORCIÓN, lleven foto o vídeo. El `height="270"`
   del iframe —heredado de la web actual— dejaba el vídeo con 270 px de alto sea
   cual sea el ancho de la columna: al meter los filtros al lado, la columna se
   estrechó y los vídeos salieron apaisados al revés, casi verticales.

   El marco impone la proporción y el iframe lo llena entero. El atributo
   `height` del HTML se queda —no cambia el comportamiento de carga, que es lo
   que no se toca— pero manda el CSS. */
.tarjeta-con-video {
    background: #000;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-wrapper iframe,
.lazy-video-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* El botón de play, solo en pantallas táctiles. Lo enseña el JavaScript. */
.lazy-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: rgb(0 0 0 / 60%);
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    z-index: 2;
}

/* La etiqueta de situación: solo sale si el coche NO está simplemente en venta.
   El texto viene traducido del glosario; aquí solo se pinta en mayúsculas.

   La etiqueta base no se posiciona: así vale igual dentro de la foto de la
   tarjeta —con `etiqueta-flotante`— que en la cabecera de la ficha, donde va en
   el flujo, al lado del nombre del coche. */
.etiqueta {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Encima de la foto o del vídeo de la tarjeta. */
.etiqueta-flotante {
    position: absolute;
    top: .6rem;
    left: .6rem;
    /* Por encima del vídeo, que se pinta en su propio marco. */
    z-index: 3;
}

/* Naranja el reservado, rojo el vendido. El color es el aviso: se lee de un
   vistazo desde lejos sin llegar a leer la palabra. */
.etiqueta-reservado {
    background: var(--reservado);
}

.etiqueta-vendido {
    background: var(--vendido);
}

/* `position: relative` para que la pegatina de la DGT se coloque respecto a
   este bloque, que empieza justo donde acaba la fotografía. Así se sube sobre
   ella con una medida fija y no depende de lo alta que sea la foto. */
.tarjeta-cuerpo {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Ocupa todo lo que sobra de la tarjeta. De esto depende que el pie se
       pueda empujar al fondo y que las direcciones queden a la misma altura en
       toda la fila. */
    flex: 1 1 auto;
    gap: var(--e1);
    padding: var(--e4) var(--e4) var(--e4);
}

/* El naranja de la marca aparece al pasar por encima, no siempre. Cien titulares
   naranjas seguidos son una pared de color: se pierde la jerarquía y deja de
   señalar nada. Encima de una tarjeta, en cambio, dice «esta». */
.tarjeta:hover .tarjeta-titulo { color: var(--naranja); }

.tarjeta-titulo {
    font-size: var(--t-normal);
    font-weight: var(--peso-recio);
    letter-spacing: -.02em;
    line-height: 1.25;
    transition: color var(--transicion);
    /* Una línea: los nombres largos descuadrarían la rejilla entera. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tarjeta-version {
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Los datos separados por un punto medio puesto con CSS, no escrito en el
   HTML: así el último no lo lleva y el lector de pantalla no lee «punto». */
/* --- La ficha rápida de la tarjeta ----------------------------------------

   Año, kilómetros, combustible, cambio y potencia, cada uno con su icono, en
   DOS COLUMNAS de igual ancho.

   En una sola fila no caben los cinco, y puestos en dos filas alineadas a la
   izquierda dejaban un socavón de blanco a la derecha. En dos columnas la
   tarjeta se llena y los datos quedan en cuadrícula, que además se lee más
   rápido que una ristra separada por puntos.
   -------------------------------------------------------------------------- */

.tarjeta-datos {
    display: grid;
    /* TRES columnas, pegadas a la izquierda y del ancho de lo que llevan
       dentro. Con tres, los cinco datos caben en dos filas —año, kilómetros y
       potencia arriba; combustible y cambio abajo— en vez de tres.

       `minmax(0, max-content)` y no `max-content` a secas: en una tarjeta
       estrecha, un combustible de nombre largo se saldría de la caja en lugar
       de recortarse. */
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: start;
    /* La separación entre columnas es corta a propósito: en el listado, con el
       panel de filtros al lado, las tarjetas son bastante más estrechas que en
       la portada y con más aire el tercer dato se recortaba. */
    gap: var(--e2) var(--e4);
    /* Es una lista, y el navegador se la sangra y le pone bolos. Aquí los datos
       tienen que empezar donde empieza el nombre del coche. */
    padding: 0;
    list-style: none;
    margin-top: var(--e3);
    color: var(--tinta-media);
    font-size: var(--t-menudo);
}

.tarjeta-dato {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    line-height: 1.2;
    /* Un dato no se parte nunca en dos renglones: antes se recorta. Partido
       descuadra la cuadrícula entera. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tarjeta-dato-icono {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--tinta-suave);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* El dibujo de los iconos vive escondido al principio de la página: está para
   que lo copien las tarjetas, no para verse. */
.iconos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Los precios de la tarjeta --------------------------------------------

   Dos columnas: a la izquierda el de contado, que es el precio de verdad y
   manda por tamaño; a la derecha el financiado y su cuota, en menor.

   Sin financiación la columna derecha no se pinta y la izquierda se queda sola,
   que es exactamente lo que hay que decir.

   El bloque va PEGADO a los datos, no empujado al fondo de la tarjeta: con
   `margin-top: auto` se iba al final de la caja más alta de la fila y dejaba un
   agujero en las demás. Como todas tienen la foto en la misma proporción y el
   nombre en una sola línea, quedan alineados solos.
   -------------------------------------------------------------------------- */

.tarjeta-precios {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e4);
    padding-top: var(--e3);
    margin-top: var(--e3);
    border-top: 1px solid var(--linea);
}

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

/* «Al contado», «Financiado». Pequeño y en mayúsculas de caja baja: tiene que
   ordenar la lectura, no competir con la cifra. */
.tarjeta-precio-que {
    color: var(--tinta-suave);
    font-size: var(--t-diminuto);
    font-weight: var(--peso-medio);
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.tarjeta-precio-cuanto {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
}

/* La columna de la derecha, alineada a la derecha. Las dos cifras van al MISMO
   tamaño: son dos precios del mismo coche y uno no vale menos que el otro por
   estar a la derecha. */
.tarjeta-precio-financiado {
    align-items: flex-end;
    text-align: right;
}

/* El tercer renglón de cada columna: «IVA deducible» a la izquierda y la cuota
   a la derecha. Misma letra y mismo color en los dos, para que se lean como lo
   que son: la letra pequeña de cada precio. */
.tarjeta-precio-nota {
    color: var(--naranja-tinta);
    font-size: var(--t-menudo);
    font-weight: var(--peso-fuerte);
    line-height: 1.3;
}

/* --- Los sellos de la tarjeta ---------------------------------------------

   «Financiación 100%» y «IVA deducible». En la web actual el primero va encima
   de la fotografía, tapando el coche. Aquí abajo acompañan sin estorbar.
   -------------------------------------------------------------------------- */

/* El pie repite las dos columnas de los precios: debajo del de contado, dónde
   está el coche; debajo de la cuota, los sellos.

   Alineados por ARRIBA: así «Financiación 100%» cae en la misma línea que la
   calle, que es lo que se lee de un vistazo. Por abajo se emparejaba con la
   población y quedaba descolgado. */
.tarjeta-pie {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
    /* `auto` empuja el pie al fondo de la tarjeta. Todas las de una fila miden
       lo mismo, así que la dirección de la tienda cae SIEMPRE a la misma altura
       aunque un coche no lleve financiación o tenga el nombre más corto.

       Con los renglones ya cuadrados arriba, ese `auto` no reparte casi nada:
       el hueco de verdad lo pone el `padding`, que es corto a propósito. */
    margin-top: auto;
    padding-top: var(--e2);
}

.tarjeta-tienda {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--tinta-suave);
    font-size: var(--t-diminuto);
    line-height: 1.35;
}

.tarjeta-tienda span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tarjeta-sellos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    color: var(--tinta-suave);
    font-size: var(--t-diminuto);
    font-weight: var(--peso-medio);
    text-align: right;
}


/* --- Ficha --------------------------------------------------------------- */

/* Sin relleno arriba: **ahora lo pone `main`**, igual para todas las páginas. */
.ficha {
    padding: 0 0 var(--e12);
}

/* El aviso de la tienda va pegado al borde de arriba de la página, que ya
   separa lo suyo, y con poco por debajo: el aviso y el «Volver» son la misma
   cosa —el encabezado— y entre ellos no cabe un socavón.

   `:has()` porque hay que tocar al aviso mirando lo que viene DESPUÉS, y solo
   cuando lo que viene es la ficha. */
.aviso-web:has(+ .ficha) {
    margin-top: 0;
    margin-bottom: var(--e3);
}

/* Entre el aviso de la tienda, «Volver al listado» y el nombre del coche había un
   socavón: se sumaban el margen de abajo del aviso, el renglón de «Volver» con
   los suyos y el margen de arriba de la cabecera. Tres separaciones para lo que
   es una sola cosa —el encabezado de la página—.

   El aviso es lo primero de la ficha, así que arriba no lleva nada —ya separa el
   relleno de la propia ficha— y abajo lo justo para no tocar el enlace. */
.ficha > .aviso-web:first-child {
    margin-top: 0;
    margin-bottom: var(--e2);
}

.volver {
    display: inline-block;
    margin-bottom: var(--e3);
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
}

.volver:hover {
    color: var(--tinta);
}

.ficha-cabecera {
    margin: 0 0 var(--e6);
}

.ficha-cabecera h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
    margin: 0;
    font-size: var(--t-titular);
    line-height: var(--alto-apretado);
    letter-spacing: -.02em;
}

/* **«Reservado» al lado de un título de 2,5 rem era un susurro.** El sello está
   dimensionado para la tarjeta, donde la rejilla es apretada; aquí, junto al
   nombre del coche, se perdía. Y es lo primero que tiene que ver quien entra
   desde un enlace guardado o desde un resultado de Google: **nueve de los ciento
   seis publicados están reservados**.

   Se le sube el cuerpo y el relleno, sin tocar el de la tarjeta. El color no
   cambia: sigue siendo el del semáforo, aparte del naranja de la marca. */
.ficha-cabecera .etiqueta {
    padding: var(--e1) var(--e4);
    font-size: var(--t-menudo);
}

.ficha-version {
    margin: var(--e2) 0 0;
    color: var(--tinta-suave);
    font-size: var(--t-medio);
}

/* Aquí NO hay una franja con año, kilómetros, combustible y cambio bajo el
   nombre del coche. Se puso el 13/08/2026 y el usuario la quitó en cuanto la
   vio: en esta pantalla esos cuatro datos están a un palmo, en la columna de la
   derecha, así que era decir dos veces lo mismo uno al lado del otro. En las
   referencias funciona porque allí esa columna no existe. */

/* --- La ficha, en dos columnas ---------------------------------------------

   La galería a la izquierda y el resumen del coche a la derecha. **La galería no
   ocupa el ancho de la página**: decisión del usuario del 13/08/2026. A su lado
   va información del vehículo, pero NO el equipamiento, que se va abajo a todo
   el ancho.

   En pantalla estrecha se apilan y la galería va primero: lo que vende un coche
   es la fotografía, no una lista de datos.
   -------------------------------------------------------------------------- */

.ficha-principal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
    margin-bottom: var(--e-seccion);
}

@media (min-width: 62rem) {
    .ficha-principal {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--e8);
        align-items: start;
    }

    /* El resumen se queda pegado mientras se recorre la galería: el precio no se
       pierde de vista por mucho que se baje. El desplazamiento arranca por
       debajo de la cabecera del sitio, que también es pegajosa y mide 4,5 rem. */
    .ficha-resumen {
        position: sticky;
        top: calc(4.5rem + var(--e4));
    }
}

/* --- La caja de precio ------------------------------------------------------

   **Los dos precios pesan lo mismo**, uno al lado del otro. Antes el financiado
   era un renglón gris y pequeño colgando del de contado, y eso lo enseñaba como
   una nota al pie de un precio que no lo es: son dos formas de comprar el mismo
   coche. Decisión del usuario del 13/08/2026, que además quitó la palabra
   «contado»: el primero se llama «Precio» y ya.

   Va en caja con fondo propio porque es lo que se viene a buscar. Es también lo
   que hacen las dos referencias que puso el usuario.
   -------------------------------------------------------------------------- */

.ficha-precios {
    padding: var(--e5);
    border: 1px solid var(--linea-tenue);
    border-radius: var(--radio);
    background: var(--hueso);
}

/* El sello de «Reservado» encima de los precios: lo primero que se lee de la
   caja, antes que la cifra. Aquí sí manda por delante del precio. */
.ficha-precios-situacion {
    margin: 0 0 var(--e4);
}

/* Los dos, en columnas de igual ancho. Se parten en dos renglones cuando no
   caben —una columna estrecha, o un idioma de rótulos largos—, y entonces
   siguen pesando lo mismo, que es de lo que se trata. */
.ficha-precios-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--e4);
}

.ficha-precio {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    margin: 0;
}

.ficha-precio-que {
    color: var(--tinta-suave);
    font-size: var(--t-diminuto);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ficha-precio-cuanto {
    font-size: var(--t-grande);
    font-weight: var(--peso-recio);
    line-height: var(--alto-apretado);
    letter-spacing: -.02em;
}

/* La cuota. Se lee de un vistazo, pero no compite con las dos cifras de arriba:
   tres números del mismo tamaño en la misma caja no dejan mandar a ninguno.

   En naranja tinta y no en el naranja de la marca: este llega a 4,5:1 sobre el
   fondo y el otro no, y esto es texto normal. */
.ficha-precio-cuota {
    color: var(--naranja-tinta);
    font-size: var(--t-medio);
    font-weight: var(--peso-fuerte);
}

/* Del coche, no de una de las dos formas de pagarlo: por eso va debajo de los
   dos y no dentro de ninguno. */
/* El IVA deducible, **pegado a su precio**. Estaba suelto debajo de la caja
   entera y quedaba a un palmo de la cifra, con un socavón en medio. Es una nota
   del precio de contado, así que va donde está el precio, igual que la cuota va
   debajo del financiado.

   `align-self: start` para que la píldora mida lo que mide el texto y no se
   estire a lo ancho de la columna: el padre es una caja flexible en columna. */
.ficha-iva {
    align-self: start;
    margin-top: var(--e1);
    padding: var(--e1) var(--e3);
    border-radius: var(--radio-pildora);
    background: var(--naranja-velo);
    color: var(--naranja-tinta);
    font-size: var(--t-menudo);
    font-weight: var(--peso-medio);
}

/* Las condiciones de la simulación. **Donde hay una cuota tiene que haber letra
   pequeña**: con qué entrada y a cuántos meses sale ese número, y que la
   operación está sujeta a estudio. Faltaba, y lo avisó el usuario.

   Pequeña pero legible: en `--t-menudo` sobre el fondo de la caja, no en un gris
   que no se lea. Una condición que no se puede leer es como no ponerla. */
.ficha-financiacion-letra {
    margin: var(--e4) 0 0;
    padding-top: var(--e3);
    border-top: 1px solid var(--linea);
    color: var(--tinta-media);
    font-size: var(--t-menudo);
    line-height: var(--alto-normal);
}

/* Los datos del coche: rótulo arriba y valor debajo, en dos columnas.

   Era una tabla de dos columnas con el rótulo a la izquierda en doce rem fijos,
   y en la columna estrecha de la derecha eso no cabe: el valor se quedaba con
   cuatro dedos de sitio y partía en tres renglones. */
/* Debajo de la caja de precio, y sin filete propio: la caja ya tiene su borde y
   dos líneas seguidas se leen como un error de maquetación. */
.ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--e1) var(--e4);
    margin: var(--e3) 0 0;
    padding: 0;
}

.ficha-dato {
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--linea-tenue);
}

/* El rótulo, con su icono delante. El icono es decorativo —no dice nada que no
   diga el rótulo— y está para que la columna se recorra de un vistazo en vez de
   leerse renglón a renglón. */
.ficha-dato dt {
    display: flex;
    align-items: center;
    gap: var(--e2);
    color: var(--tinta-suave);
    font-size: var(--t-diminuto);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ficha-dato-icono {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--naranja);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ficha-dato dd {
    margin: var(--e1) 0 0 calc(1rem + var(--e2));
    font-weight: var(--peso-medio);
}

/* La pegatina se alinea con el resto de valores, bajo su rótulo. */

/* El distintivo es la pegatina de verdad, no las letras «B» o «C». A todo color
   y sin apagar, al revés que en la columna de filtros: allí hay cuatro seguidas
   y gritan; aquí es una sola y es un dato del coche. */
.ficha-pegatina {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
}

/* --- La galería de la ficha -------------------------------------------------

   El vídeo primero y luego las fotografías, en un solo carrusel.

   **Sin JavaScript se ven todas las láminas, una debajo de otra**, que es más de
   lo que hacía la parrilla de antes: el vídeo también entra. El apilado en una
   sola celda lo hace el CSS bajo `.con-js`, no el script, para que no se vean
   treinta fotos y desaparezcan de golpe con la página ya pintada.
   -------------------------------------------------------------------------- */

.galeria-marco {
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--tinta);
}

/* **El marco mide siempre lo mismo, y por eso la página no salta.**

   Antes cada lámina traía su proporción: las fotos a 4:3 y el vídeo a 16:9. Al
   pasar del vídeo a la primera foto, la caja crecía y **todo lo de abajo daba un
   brinco**. Ahora la altura la fija el marco y las láminas se ajustan a él.

   **3:2 porque es la de las fotografías**, que son el 96 % de las láminas: 400 ×
   266 las de hoy y 1920 × 1280 las que manda la intranet (8.10). Con el marco a
   4:3 se les recortaba una franja arriba y otra abajo a todas, que en la foto de
   un coche es justo donde está el coche.

   El vídeo, que es 16:9, entra dentro con dos franjas negras. Es lo que hace
   cualquier reproductor y se lee como tal.

   **Sin JavaScript el marco NO puede tener altura fija**: las láminas van una
   debajo de otra y las recortaría todas menos la primera. */
.con-js .galeria-marco {
    aspect-ratio: 3 / 2;
}

.galeria-pista {
    display: grid;
    gap: var(--e2);
}

.con-js .galeria-pista {
    height: 100%;
    gap: 0;
}

.galeria-lamina img,
.galeria-lamina video,
.galeria-lamina iframe {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    /* **Entera, no recortada.** Una foto de coche recortada pierde el coche, y
       la mayoría son 3:2 exactas: no les sobra nada por ningún lado. La que
       venga con otra proporción entra con franjas y se ve completa. */
    object-fit: contain;
    border: 0;
    background: var(--tinta);
}

/* Con el marco ya acotado, la lámina lo llena y la proporción la manda él. */
.con-js .galeria-lamina img,
.con-js .galeria-lamina video,
.con-js .galeria-lamina iframe {
    height: 100%;
    aspect-ratio: auto;
}

/* Con JavaScript, todas en la misma celda y solo una a la vista.

   **Se esconden con `display: none` y no con `visibility`**, y esto no es un
   detalle de gusto: la portada apila sus cinco slides con `visibility` porque
   allí da igual, pero aquí hay veintiocho fotografías. Una imagen con
   `loading="lazy"` dentro de algo con `visibility: hidden` **sí se descarga**
   —ocupa su sitio en la página y el navegador la considera visible—, así que
   apilarlas así habría pedido las veintiocho de golpe al abrir la ficha. Con
   `display: none` no se pide ninguna hasta que le toca salir.

   El mismo motivo por el que las tandas del listado usan `display: none`.

   La contrapartida es que no hay fundido al cambiar de foto: un elemento que
   pasa de `none` a `block` no puede transicionar. Se prefiere no descargar
   veintiocho fotografías que nadie ha pedido. */
.con-js .galeria-lamina {
    grid-area: 1 / 1;
    display: none;
    height: 100%;
}

.con-js .galeria-lamina:first-child,
.con-js .galeria-lamina[data-visible] {
    display: block;
}

/* Y cuando el script ha tomado el mando, la primera deja de ser especial: manda
   `data-visible` y nada más. Mismo motivo que en el carrusel de la portada: si
   el script no llega a marcarla, se ve igualmente. */
.con-js .ficha-galeria[data-listo] .galeria-lamina:first-child:not([data-visible]) {
    display: none;
}

/* La foto es un botón: al pulsarla se abre a pantalla completa. El botón no se
   ve —no tiene fondo ni borde—, lo que se ve es la fotografía. */
.galeria-ampliar {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

/* **Nada de esto se selecciona.** Son mandos que se pulsan seguido, y pulsar dos
   veces rápido selecciona lo que hay debajo: la foto se quedaba teñida de naranja
   —el color de `::selection`— y así seguía aunque se cerrase el diálogo, porque
   la selección vive en el documento y no en lo que se cerró. Solo se quitaba
   recargando. */
.galeria-ampliar,
.galeria-miniatura,
.galeria-flecha,
.galeria-cerrar,
.galeria-pantalla {
    -webkit-user-select: none;
    user-select: none;
}

/* --- La fotografía a pantalla completa --------------------------------------

   Es un `<dialog>`: la tecla de escape, el fondo, la trampa de foco y la
   devolución del foco al cerrar los pone el navegador. Aquí solo va el aspecto.
   -------------------------------------------------------------------------- */

.galeria-pantalla {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    padding: var(--e6);
    border: 0;
    background: none;
    /* Es la caja que se pulsa para cerrar, así que el cursor lo anuncia. */
    cursor: zoom-out;
}

.galeria-pantalla::backdrop {
    background: rgb(26 22 19 / 92%);
}

.galeria-pantalla img {
    display: block;
    width: 100%;
    height: 100%;
    /* Entera y sin recortar: se ha abierto justo para verla toda. */
    object-fit: contain;
    /* Pulsar la foto pasa a la siguiente; pulsar fuera cierra. Dos cursores
       distintos para dos cosas distintas. */
    cursor: pointer;
}

.galeria-cerrar {
    position: fixed;
    top: var(--e4);
    right: var(--e4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 88%);
    color: var(--tinta);
    cursor: pointer;
}

.galeria-cerrar svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Las flechas de la foto ampliada. Van fijas a la ventana y no a la caja, porque
   la caja es la pantalla entera. Con el dedo y con el teclado ya se pasaba; esto
   es para el ratón. */
.galeria-pantalla-anterior,
.galeria-pantalla-siguiente {
    position: fixed;
    top: 50%;
}

.galeria-pantalla-anterior {
    left: var(--e4);
}

.galeria-pantalla-siguiente {
    right: var(--e4);
}

.galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 88%);
    color: var(--tinta);
    box-shadow: var(--sombra-baja);
    cursor: pointer;
    transition: background var(--transicion);
}

/* **`display: flex` gana al `[hidden]` que trae el navegador de fábrica**, así
   que hay que decirlo aquí. Sin esto, las flechas salen sin JavaScript y no
   mueven nada: justo lo que el `hidden` del HTML venía a evitar.

   Es la misma trampa que ya estaba anotada en `.filtro-rango[hidden]`. Se cayó
   otra vez. */
.galeria-flecha[hidden] {
    display: none;
}

.galeria-flecha:hover {
    background: var(--blanco);
}

.galeria-flecha svg {
    width: 1.25rem;
    height: 1.25rem;
}

.galeria-anterior {
    left: var(--e3);
}

.galeria-siguiente {
    right: var(--e3);
}

/* Por dónde se va. Dos cifras sobre la propia fotografía, abajo a la derecha. */
.galeria-contador {
    position: absolute;
    right: var(--e3);
    bottom: var(--e3);
    margin: 0;
    padding: var(--e1) var(--e3);
    border-radius: var(--radio-pildora);
    background: rgb(26 22 19 / 70%);
    color: var(--blanco);
    font-size: var(--t-menudo);
    font-variant-numeric: tabular-nums;
}

/* La tira de miniaturas. Se desplaza a lo ancho: con treinta fotografías no
   caben, y apilarlas en varias filas devolvería la parrilla que se quitó. */
.galeria-miniaturas {
    display: flex;
    gap: var(--e2);
    margin-top: var(--e2);
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-padding: var(--e2);
}

/* Lo mismo que las flechas: sin JavaScript no hay a qué llevar, y una tira de
   miniaturas que no responde es peor que ninguna. */
.galeria-miniaturas[hidden] {
    display: none;
}

/* Cuando la tira no cabe, el borde derecho se difumina: es lo que dice que ahí
   sigue habiendo fotos. **La marca la pone el JavaScript**, que es quien sabe si
   cabe o no; permanente, con tres miniaturas, parecería un error de pintado. */
.galeria-miniaturas-sigue {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

.galeria-miniatura {
    flex: 0 0 auto;
    width: 5.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radio-corto);
    background: none;
    cursor: pointer;
    opacity: .55;
    transition: opacity var(--transicion);
}

.galeria-miniatura:hover,
.galeria-miniatura[aria-current="true"] {
    opacity: 1;
}

/* Las miniaturas sí van recortadas a la medida: son sellos de 5,5 rem para
   reconocer la foto de un vistazo, no para verla. */
.galeria-miniatura img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio-corto);
}

/* La del vídeo no es una foto: es un rótulo con su triángulo. Sacarle un
   fotograma exigiría procesarlo, y del de YouTube no tenemos ninguno. */
.galeria-miniatura-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e1);
    aspect-ratio: 3 / 2;
    border-radius: var(--radio-corto);
    background: var(--tinta);
    color: var(--blanco);
    font-size: var(--t-diminuto);
}

.galeria-miniatura-video svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* La descripción y el aviso de WhatsApp, en las mismas dos columnas que la
   galería y el resumen: **la descripción con el ancho de las fotografías**.

   La descripción sola ocupaba el ancho entero, porque acotada dejaba media
   página en blanco. Ahora hay algo que poner al lado. */
.ficha-contar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
    margin-bottom: var(--e8);
}

@media (min-width: 62rem) {
    .ficha-contar {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--e8);
        align-items: start;
    }
}

.ficha-texto,
.ficha-equipamiento {
    margin-bottom: var(--e8);
}

.ficha-texto {
    margin-bottom: 0;
}

/* --- Preguntar por WhatsApp -------------------------------------------------

   En el hueco que dejaba la descripción. No es un canal nuevo: el número es el
   mismo que enseñan la franja de arriba y el pie, y sale del parámetro
   `web_whatsapp` de la intranet.
   -------------------------------------------------------------------------- */

.ficha-whatsapp {
    padding: var(--e6);
    border: 1px solid var(--linea-tenue);
    border-radius: var(--radio);
    background: var(--hueso);
}

.ficha-whatsapp h2 {
    margin: 0 0 var(--e2);
    font-size: var(--t-medio);
}

.ficha-whatsapp p {
    margin: 0 0 var(--e5);
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    line-height: var(--alto-normal);
}

/* El verde es el de WhatsApp: aquí la marca que se reconoce es la suya, no la
   nuestra, y un enlace naranja no diría que se abre WhatsApp. */
.ficha-whatsapp-enlace {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: var(--e4) var(--e5);
    border-radius: var(--radio-corto);
    text-align: center;
    background: #25d366;
    color: #0b3d1f;
    font-weight: var(--peso-recio);
    font-variant-numeric: tabular-nums;
    transition: filter var(--transicion);
}

.ficha-whatsapp-enlace:hover {
    filter: brightness(.95);
}

.ficha-whatsapp-enlace svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
}

/* El rótulo arriba y el número debajo. En un solo renglón, en el móvil partía
   por donde le tocaba y dejaba el número roto en dos: «…WhatsApp 674 / 231 117». */
.ficha-whatsapp-lineas {
    display: flex;
    flex-direction: column;
    line-height: var(--alto-apretado);
}

.ficha-whatsapp-numero {
    font-size: var(--t-medio);
    font-variant-numeric: tabular-nums;
}

/* El tamaño de estos dos títulos se define con el de los otros tres, más
   arriba: **las cinco secciones de la ficha llevan el mismo**. */
.ficha-texto h2,
.ficha-equipamiento h2 {
    margin: 0 0 var(--e5);
}

/* --- El equipamiento, agrupado ----------------------------------------------

   Seguridad, Confort, Multimedia… en vez de una lista de sesenta cosas seguidas.
   Los grupos y su orden los manda la intranet.

   **Los grupos van en rejilla, no uno debajo de otro.** En una sola columna, un
   coche bien equipado son tres pantallas de lista; así se abarcan de un vistazo y
   se encuentra el que se busca por el rótulo.
   -------------------------------------------------------------------------- */

.ficha-equipamiento > .equipo-grupo {
    break-inside: avoid;
    margin-bottom: var(--e6);
}

@media (min-width: 48rem) {
    .ficha-equipamiento {
        columns: 2;
        column-gap: var(--e10);
    }

    /* El título del bloque no entra en las columnas: va encima de las dos. */
    .ficha-equipamiento h2 {
        column-span: all;
    }
}

@media (min-width: 75rem) {
    .ficha-equipamiento {
        columns: 3;
    }
}

.equipo-grupo h3 {
    margin: 0 0 var(--e2);
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--linea-tenue);
    color: var(--tinta);
    font-size: var(--t-normal);
    font-weight: var(--peso-fuerte);
}

.ficha-equipamiento ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--tinta-media);
    line-height: var(--alto-normal);
}

.ficha-equipamiento li {
    margin-bottom: var(--e1);
}

/* El equipamiento escrito a mano. Es un grupo más, con su título, así que se
   lee igual que los valores de los demás: mismo color y mismo interlineado.
   Solo cambia que es un párrafo y no una lista, porque es texto libre. */
.ficha-equipamiento-mas {
    margin: 0;
    color: var(--tinta-media);
    line-height: var(--alto-normal);
}

/* El texto común a todos los anuncios: se distingue del propio del coche. */
/* --- La descripción ---------------------------------------------------------

   **Sin tope de ancho, y esto se decidió mirando los datos.**

   Se le puso la medida de lectura del proyecto —unos 70 caracteres— con el
   argumento de que a 1.280 px salen renglones de 160. El usuario vio el
   resultado: «El texto ocupa la mitad del espacio horizontal, la otra mitad está
   en blanco y es extraño». Y tenía razón, porque el argumento no aplicaba aquí.

   **Solo 1 de los 106 coches publicados tiene texto propio.** En los otros 105 la
   descripción es el párrafo de condiciones y nada más: unas dos líneas. Acotar
   dos líneas a media página no las hace más legibles, solo deja un hueco al
   lado.

   Si algún día se escriben descripciones largas de verdad, esto hay que
   revisarlo: entonces el tope sí tendrá sentido.
   -------------------------------------------------------------------------- */

.ficha-texto > p,
.ficha-comun {
    line-height: var(--alto-lectura);
}

/* El texto común a todos los anuncios, un tono por debajo del que se escribió
   para ESTE coche: lo de arriba es de él, esto es de la casa.

   **Y separado de él.** Estaban pegados sin un renglón en medio —`p` no lleva
   margen en esta hoja— y se leían como un solo párrafo de dos voces distintas. */
.ficha-comun {
    margin: var(--e5) 0 0;
    color: var(--tinta-media);
}

/* Aquí hubo unas cajas que partían el texto común del anuncio por sus `<h3>`.
   Se quitaron el 13/08/2026: repetían lo que dice «Por qué Luxemotor» y salían
   de una convención escondida en el código. Los argumentos de venta están ahora
   en un solo sitio, y esa caja ya tiene su estilo —`.porques`—. */

/* --- Páginas de contenido --------------------------------------------------

   Tres composiciones, no una, porque no todas las páginas tienen lo mismo:

     · **Con fotografía**: portada a dos columnas, título a un lado y foto al
       otro. Debajo, el texto en columna de lectura.
     · **Solo texto y largo** —los legales—: el texto con su índice de apartados
       al lado. Ese hueco NO se deja vacío, y tampoco se rellena ensanchando el
       texto: 160 caracteres por línea se leen mal, y son justo las páginas más
       largas del sitio.
     · **Solo texto y corto**: columna centrada.

   La columna de lectura son 52rem, unos 90 caracteres. Es el límite alto de lo
   cómodo, y está elegido a conciencia: por encima, al saltar de línea el ojo
   pierde el renglón y hay que volver a buscarlo.
   -------------------------------------------------------------------------- */

.seccion {
    padding: var(--e10) 0 var(--e12);
}

/* --- La portada de la sección --------------------------------------------- */

.seccion-portada {
    display: grid;
    gap: var(--e6);
    align-items: center;
    margin-bottom: var(--e10);
}

/* Con fotografía, dos columnas. La de la foto un punto más ancha: una imagen
   apaisada al lado de un titular necesita más sitio para no quedarse enana. */
.seccion-con-foto .seccion-portada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--e10);
}

.seccion-portada h1 {
    margin: 0;
    font-size: var(--t-portada);
    letter-spacing: -.03em;
}

/* El filete naranja debajo del titular. Es lo único que hay de la marca en
   estas páginas y basta: separa el título del subtítulo sin una línea gris de
   las de siempre. */
.seccion-portada h1::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    margin: var(--e5) 0 0;
    border-radius: var(--radio-pildora);
    background: var(--naranja);
}

.seccion-subtitulo {
    margin: var(--e5) 0 0;
    max-width: 34rem;
    color: var(--tinta-media);
    font-size: var(--t-medio);
    font-weight: var(--peso-normal);
    line-height: var(--alto-normal);
    text-wrap: balance;
}

/* La foto llena su columna con proporción fija: así todas las páginas se abren
   igual, lleve la fotografía la proporción que lleve. */
.seccion-portada-foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
}

/* --- El texto y su índice -------------------------------------------------- */

.seccion-lectura {
    display: grid;
    justify-content: center;
}

.seccion-lectura > .seccion-cuerpo {
    max-width: 52rem;
}

/* Con índice, dos columnas y las dos juntas centradas: el índice no se va al
   borde de la pantalla, se queda pegado a su texto. */
.seccion-con-indice {
    grid-template-columns: 15rem minmax(0, 52rem);
    gap: var(--e10);
}

.seccion-indice {
    position: sticky;
    top: var(--e8);
    align-self: start;
    padding-right: var(--e5);
    border-right: 1px solid var(--linea);
    font-size: var(--t-menudo);
}

.seccion-indice-titulo {
    margin: 0 0 var(--e3);
    color: var(--tinta);
    font-weight: var(--peso-recio);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.seccion-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: apartado;
}

.seccion-indice li {
    counter-increment: apartado;
    margin-bottom: var(--e2);
    line-height: 1.4;
}

.seccion-indice a {
    color: var(--tinta-suave);
    transition: color var(--transicion);
}

.seccion-indice a:hover {
    color: var(--naranja-tinta);
}

/* --- El cuerpo ------------------------------------------------------------- */

.seccion-cuerpo {
    font-size: var(--t-cuerpo);
}

/* La entradilla: el primer párrafo, más grande y más claro. Es lo que separa una
   página compuesta de un montón de párrafos iguales uno detrás de otro. */
.seccion-cuerpo > p:first-of-type {
    color: var(--tinta-media);
    font-size: var(--t-medio);
    line-height: var(--alto-normal);
}

.seccion-cuerpo > * + * {
    margin-top: var(--e5);
}

.seccion-cuerpo h2 {
    margin-top: var(--e12);
    font-size: var(--t-grande);
    /* El desplazamiento del ancla, para que el índice no deje el encabezado
       pegado al borde de arriba. */
    scroll-margin-top: var(--e8);
}

.seccion-cuerpo h3 {
    margin-top: var(--e8);
    font-size: var(--t-medio);
}

.seccion-cuerpo h2 + p,
.seccion-cuerpo h3 + p,
.seccion-cuerpo h2 + ul,
.seccion-cuerpo h3 + ul {
    margin-top: var(--e3);
}

.seccion-cuerpo ul,
.seccion-cuerpo ol {
    padding: 0;
    list-style: none;
}

.seccion-cuerpo li {
    position: relative;
    padding-left: var(--e5);
    margin-bottom: var(--e2);
}

/* Un guion naranja en vez del punto del navegador. Detalle pequeño y de los que
   más se notan: el punto por defecto delata una página sin diseñar. */
.seccion-cuerpo ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: .6rem;
    height: 2px;
    border-radius: var(--radio-pildora);
    background: var(--naranja);
}

.seccion-cuerpo ol {
    counter-reset: punto;
}

.seccion-cuerpo ol > li {
    counter-increment: punto;
    padding-left: var(--e6);
}

.seccion-cuerpo ol > li::before {
    content: counter(punto) ".";
    position: absolute;
    left: 0;
    color: var(--naranja-tinta);
    font-weight: var(--peso-recio);
    font-variant-numeric: tabular-nums;
}

/* Las listas largas, a dos columnas: los cien puntos de revisión en una sola
   columna son doce renglones cortos y un río de blanco a la derecha.
   `:has()` es lo que permite distinguirlas de una lista de tres. */
.seccion-cuerpo ul:has(> li:nth-child(8)) {
    columns: 2;
    column-gap: var(--e8);
}

.seccion-cuerpo ul:has(> li:nth-child(8)) > li {
    break-inside: avoid;
}

.seccion-cuerpo img {
    margin: var(--e8) 0;
    border-radius: var(--radio);
    box-shadow: var(--sombra-baja);
}

.seccion-cuerpo a {
    color: var(--naranja-tinta);
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* --- La galería ------------------------------------------------------------ */

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--e5);
    margin-top: var(--e12);
}

.galeria img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: var(--sombra-baja);
}

/* --- Las páginas que cuelgan de esta --------------------------------------- */

.seccion-hijas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--e5);
    margin-top: var(--e-seccion);
    padding-top: var(--e8);
    border-top: 1px solid var(--linea);
}

/* Tarjetas con su fotografía. Eran tres pastillas grises, que es lo que se pone
   cuando no se ha pensado en ellas. */
.seccion-hija {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--linea-tenue);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra-baja);
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.seccion-hija:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.seccion-hija-foto img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.seccion-hija-texto {
    display: block;
    padding: var(--e5);
}

.seccion-hija-titulo {
    display: block;
    font-weight: var(--peso-recio);
    line-height: var(--alto-normal);
}

.seccion-hija:hover .seccion-hija-titulo {
    color: var(--naranja-tinta);
}

.seccion-hija-entradilla {
    display: block;
    margin-top: var(--e2);
    color: var(--tinta-suave);
    font-size: var(--t-pequeno);
    line-height: 1.45;
}

@media (max-width: 62rem) {
    /* La foto de portada baja debajo del título: a media pantalla, dos columnas
       dejan el titular en una tira de cuatro palabras por línea. */
    .seccion-con-foto .seccion-portada {
        grid-template-columns: 1fr;
        gap: var(--e6);
    }

    /* Y el índice deja de estar al lado. **No se esconde**: en un documento de
       doce apartados es lo que evita tener que bajar a ciegas. */
    .seccion-con-indice {
        grid-template-columns: 1fr;
        gap: var(--e6);
    }

    .seccion-indice {
        position: static;
        padding: var(--e4) var(--e5);
        border-right: 0;
        border-radius: var(--radio);
        background: var(--hueso);
    }
}

/* --- Dónde puedo verlo --------------------------------------------------- */

/* --- Los tres bloques del final de la ficha ---------------------------------

   «¿Por qué comprar en Luxemotor?», «¿Dónde puedo verlo?» y «Solicitar
   información» son **tres bloques del mismo rango**, y ahí abajo tienen que
   leerse como tres cajas iguales.

   Estaban de tres maneras: «Por qué» era una franja suelta sin recuadro, con
   filete negro bajo el título y la letra más ancha; la tienda tenía un relleno
   de 1,25 rem y el título en 1,15 rem; el formulario, 1,75 rem de relleno y el
   título en el tamaño normal de la casa. Ahora los tres van igual.

   Solo dentro de la ficha: en la portada «Por qué Luxemotor» sigue siendo una
   franja a todo lo ancho, que es donde no hay cajas con las que cuadrar, y el
   formulario de «Contactar» conserva el suyo.
   -------------------------------------------------------------------------- */

.ficha-tienda,
.ficha .porques,
.ficha .formulario {
    margin: 0 0 var(--e8);
    padding: var(--e6);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo-alterno);
}

/* «Por qué Luxemotor» viene de la portada, donde es una sección a todo lo ancho:
   hay que quitarle lo que allí la separa de lo de arriba y lo de abajo. */
.ficha .porques {
    padding-top: var(--e6);
    border-top: 1px solid var(--linea);
}

/* Y su cabecera pierde el filete negro: los otros dos no lo llevan, y dentro de
   una caja de bordes suaves un subrayado de dos píxeles negro es otra cosa. */
.ficha .porques .bloque-cabecera {
    margin-bottom: var(--e5);
    padding-bottom: 0;
    border-bottom: 0;
}

/* **LOS CINCO TÍTULOS DE LA FICHA, DEL MISMO TAMAÑO**: el `h2` normal del sitio.

   Son las cinco secciones de la página —Descripción, Equipamiento, Por qué
   Luxemotor, Dónde puedo verlo y Solicitar información— y todas están al mismo
   nivel. Estaban en tres tamaños distintos: 1,15 rem las dos primeras y la
   tienda, el normal del sitio el formulario, y el normal pero con la letra más
   ancha «Por qué Luxemotor», que venía de la portada.

   Tres tamaños de título en una misma página no se leen como una jerarquía: se
   leen como un descuido. */
.ficha-texto h2,
.ficha-equipamiento h2,
.ficha-tienda h2,
.ficha-parecidos h2,
.ficha .porques .bloque-cabecera h2,
.ficha .formulario h2 {
    font-size: var(--t-grande);
    font-weight: var(--peso-recio);
    font-stretch: normal;
    letter-spacing: -.02em;
}

/* **La separación bajo el título la pone UNA sola cosa.**
   En «Por qué Luxemotor» el título vive dentro de `bloque-cabecera`, así que el
   hueco lo da la cabecera y el título va a cero; si los dos llevaran margen se
   sumarían y quedaría el doble de aire que en los otros dos bloques. Pasó. */
.ficha-tienda h2,
.ficha .formulario h2 {
    margin: 0 0 var(--e5);
}

.ficha .porques .bloque-cabecera h2 {
    margin: 0;
}

/* Los datos y el horario a la izquierda; el mapa a la derecha, ocupando lo
   mismo de alto.

   La altura la marca la columna de la izquierda —la dirección, el teléfono y el
   horario—, y el mapa la iguala. Antes el mapa tenía su propia proporción y
   sobresalía o se quedaba corto según lo que hubiera al lado. */
.tienda-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e6);
    align-items: stretch;
}

/* En pantalla estrecha, uno debajo del otro: dos columnas de 160 px no sirven
   ni para leer la dirección ni para ver el mapa. */
@media (max-width: 720px) {
    .tienda-columnas {
        grid-template-columns: 1fr;
    }
}

/* --- El mapa ---------------------------------------------------------------

   **Nace sin `iframe`**: hasta que el visitante pulsa, no se manda nada a
   Google. La caja ya ocupa el sitio que ocupará el mapa, así que al cargarlo la
   página no da un salto.
   -------------------------------------------------------------------------- */

.mapa {
    display: flex;
    /* Con una dirección corta, la fila se quedaría en un par de líneas y el
       mapa sería una rendija donde no se ve nada. */
    min-height: 15rem;
    border-radius: var(--radio);
    overflow: hidden;
}

.mapa iframe {
    flex: 1;
    width: 100%;
    border: 0;
}

/* Lo que se ve mientras no se ha cargado. Ni un cuadro gris vacío ni una foto
   falsa de un mapa: se dice lo que pasa y se ofrece el botón. */
.mapa-aviso {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e4);
    padding: var(--e6);
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--hueso);
    text-align: center;
}

.mapa-aviso p {
    margin: 0;
    max-width: 26rem;
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    line-height: 1.5;
}

.mapa-boton {
    padding: .7rem 1.5rem;
    border: 0;
    border-radius: var(--radio-corto);
    background: var(--naranja);
    color: var(--blanco);
    font: inherit;
    font-size: var(--t-pequeno);
    font-weight: var(--peso-recio);
    cursor: pointer;
    transition: background var(--transicion);
}

.mapa-boton:hover {
    background: var(--naranja-hondo);
}

@media (max-width: 720px) {
    .mapa {
        min-height: 13rem;
    }
}

/* --- La página de contacto -------------------------------------------------

   La estructura de la web actual, pedida por el usuario: el formulario a un
   lado y cómo localizarnos al otro, con los mapas debajo. Todo en una columna
   obligaba a bajar hasta el final para ver un teléfono.
   -------------------------------------------------------------------------- */

.contacto-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--e10);
    align-items: start;
    margin-top: var(--e10);
}

/* El formulario ya trae su propio marco: aquí se le quita el margen de arriba,
   que en esta composición lo descuadraba respecto a la columna de al lado. */
.contacto-formulario .formulario {
    margin-top: 0;
}

.contacto-bloque {
    padding: var(--e5) 0;
    border-top: 1px solid var(--linea-tenue);
}

.contacto-bloque:first-child {
    padding-top: 0;
    border-top: 0;
}

.contacto-bloque h2 {
    margin: 0 0 var(--e3);
    font-size: var(--t-normal);
    font-weight: var(--peso-recio);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.contacto-bloque address {
    font-style: normal;
    line-height: 1.6;
}

.contacto-bloque p {
    margin: var(--e2) 0 0;
}

/* Los dos teléfonos, uno debajo del otro y con sus iconos: son el dato que más
   se busca en esta página. */
.contacto-telefonos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
    font-size: var(--t-cuerpo);
}

.contacto-parking {
    color: var(--naranja-tinta);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-medio);
}

.contacto-tienda-telefono {
    font-variant-numeric: tabular-nums;
}

/* Los mapas, a lo ancho y debajo de todo. Con dos tiendas, dos mapas: caben
   uno al lado del otro mientras haya sitio. */
.contacto-mapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--e5);
    margin-top: var(--e12);
}

.contacto-mapas .mapa {
    min-height: 22rem;
}

@media (max-width: 62rem) {
    .contacto-columnas {
        grid-template-columns: 1fr;
        gap: var(--e8);
    }

    /* En estrecho, primero cómo localizarnos y después el formulario: quien
       entra en «Contactar» desde un móvil casi siempre quiere el teléfono. */
    .contacto-ficha {
        order: -1;
    }
}

/* Los datos de la tienda. Se les cambió el recuadro y el título el 13/08/2026,
   pero **por dentro seguían con el diseño de antes**: rem sueltos, pesos escritos
   a mano y `--suave`, que es un gris del juego viejo. Ahora van con los mismos
   componentes que el resto del sitio. */
.ficha-tienda address {
    font-style: normal;
    color: var(--tinta-media);
    line-height: var(--alto-normal);
}

/* El nombre de la tienda manda sobre la dirección: es lo que se busca cuando ya
   se conocen las dos. */
.tienda-nombre {
    margin: 0 0 var(--e1);
    font-size: var(--t-medio);
    font-weight: var(--peso-fuerte);
}

.tienda-telefono {
    margin: var(--e3) 0;
    color: var(--tinta-media);
}

/* El teléfono, en el naranja de los enlaces y no en negro: en el móvil se pulsa
   y llama, así que tiene que verse que es pulsable. `naranja-tinta` porque es
   letra normal y el naranja de la marca no llega a 4,5:1. */
.tienda-telefono a {
    color: var(--naranja-tinta);
    font-weight: var(--peso-fuerte);
}

/* --- Error --------------------------------------------------------------- */

.error {
    text-align: center;
    padding: 5rem 0;
}

.error h1 {
    font-size: 4rem;
    margin: 0;
    color: var(--linea);
}

/* --- Pie ------------------------------------------------------------------

   **En el pie NO hay ninguna marca dibujada ni compuesta**: ni logotipo, ni el
   nombre compuesto a mano. Decidido por el usuario el 11/08/2026. La marca
   aparece una sola vez y como dato: la razón social de la franja registral.

   Va en oscuro y a sangre. Un pie del mismo color que la página no cierra nada
   —se lee como una sección más que se ha quedado sin fondo—, y aquí es donde
   acaba el recorrido: contacto, enlaces y quiénes somos legalmente.

   Los colores salen todos de la paleta de arriba, mezclados con `color-mix`.
   Ninguno está escrito a mano, que es la regla de esta hoja.
   -------------------------------------------------------------------------- */

.pie {
    margin-top: var(--e-seccion);
    background: var(--tinta);
    color: color-mix(in srgb, var(--blanco) 68%, var(--tinta));
    font-size: var(--t-pequeno);
    line-height: 1.6;
}

.pie a {
    color: inherit;
    transition: color var(--transicion);
}

.pie a:hover {
    color: var(--blanco);
}

.pie p {
    margin: 0;
}

/* La columna de enlaces es la más ancha de las tres: lleva doce entradas y
   alguna es una frase entera —«Política de privacidad y protección de datos»—.
   Estrecha, esa sola se parte en tres renglones y deshace la retícula. */
.pie-rejilla {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.5fr;
    gap: var(--e10);
    padding: var(--e12) 0;
}

/* El título de cada columna, en blanco y con un filete naranja debajo. El
   filete lo hereda de la web actual, que lleva uno igual: es lo que separa una
   columna de otra sin tener que meter líneas verticales. */
.pie-bloque h2 {
    margin: 0 0 var(--e5);
    color: var(--blanco);
    font-size: var(--t-normal);
    font-weight: var(--peso-fuerte);
    line-height: var(--alto-normal);
}

.pie-bloque h2::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: var(--e3);
    border-radius: var(--radio-pildora);
    background: var(--naranja);
}

/* El párrafo de presentación no se estira a lo ancho de su columna en un
   monitor grande: pasado cierto punto se lee peor, no mejor. */
.pie-presentacion p {
    max-width: 34rem;
}

.pie-tienda {
    margin-bottom: var(--e5);
}

.pie-tienda-nombre {
    color: var(--blanco);
    font-weight: var(--peso-medio);
}

.pie-tienda address {
    font-style: normal;
}

/* Los dos teléfonos, uno debajo del otro. Arriba van en fila porque la franja
   es una línea; aquí hay columna, y en fila se partirían por la mitad. */
.pie-telefonos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
    margin-top: var(--e4);
}

.pie a.contacto-dato:hover,
.pie a.contacto-dato:focus-visible { color: var(--blanco); }

/* Los enlaces en dos columnas: son doce y en una sola dejarían la columna del
   pie el doble de alta que las otras dos. */
.pie-enlaces {
    columns: 2;
    column-gap: var(--e6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pie-enlaces li {
    /* Que un enlace no se parta entre las dos columnas. */
    break-inside: avoid;
    margin-bottom: var(--e2);
}

/* --- La franja registral -------------------------------------------------- */

.pie-registral {
    border-top: 1px solid color-mix(in srgb, var(--blanco) 12%, transparent);
    padding: var(--e5) 0;
    font-size: var(--t-menudo);
    color: color-mix(in srgb, var(--blanco) 52%, var(--tinta));
}

.pie-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
}

/* Datos registrales: se leen poco y ocupan mucho, así que en pequeño. */
.pie-legal {
    max-width: 60rem;
}

/* Volver a abrir la configuración de cookies. **Retirar el consentimiento tiene
   que costar lo mismo que darlo**, y por eso está en todas las páginas.

   Solo con JavaScript: sin él nunca se cargó nada, así que no hay nada que
   retirar y un botón que no hace nada sobra. */
.pie-cookies {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
    transition: color var(--transicion);
}

.con-js .pie-cookies {
    display: inline;
}

.pie-cookies:hover {
    color: var(--blanco);
}

@media (max-width: 62rem) {
    /* En tableta, la presentación se pone encima a todo lo ancho y contacto y
       enlaces se reparten debajo: cortar un párrafo en una columna estrecha lo
       deja en un renglón por palabra. */
    .pie-rejilla {
        grid-template-columns: 1fr 1fr;
        gap: var(--e8);
        padding: var(--e10) 0;
    }

    .pie-presentacion {
        grid-column: 1 / -1;
    }
}

@media (max-width: 40rem) {
    .pie-rejilla {
        grid-template-columns: 1fr;
    }

    /* Con el pie a una columna, los enlaces vuelven a dos: en una sola serían
       doce renglones seguidos, y el pie se haría más largo que la página. */
    .pie-enlaces {
        column-gap: var(--e4);
    }
}

/* --- Avisos --------------------------------------------------------------- */

/* La franja que anuncia un cierre o un horario especial. Centrada y ancha,
   como en la web actual: es lo primero que hay que ver al entrar. */
/* El tamaño de la letra, ajustado dos veces el 11/08/2026. Estaba en
   `--t-pequeno`, 14 px; se subió al doble a petición del usuario y **28 px se
   veían enormes**, así que se queda a la mitad de ese salto: 18 px en móvil y
   22 en monitor.

   Sigue siendo bastante más grande que todo lo que tiene alrededor —el texto
   corrido de la web son 17— que es de lo que se trataba: que un aviso se lea
   antes que nada.

   **Y hueco por debajo, no solo por encima.** Pegado al título de la página
   —«Vehículos en venta»— el aviso parecía formar parte de él. Es un margen, así
   que se funde con el de lo que venga detrás en vez de sumarse: en la portada,
   donde debajo está el buscador, no cambia nada. */
.aviso-web {
    margin: var(--e4) 0 var(--e6);
    padding: var(--e4) var(--e5);
    border-radius: var(--radio-corto);
    border-left: 4px solid;
    font-size: var(--t-medio);
    font-weight: var(--peso-medio);
    line-height: var(--alto-normal);
}

.aviso-web-aviso {
    border-color: var(--naranja);
    background: var(--naranja-velo);
    color: #7c3a04;
}

.aviso-web-importante {
    border-color: var(--mal);
    background: #fdf1f0;
    color: #8a1c16;
}

/* --- Horario de las tiendas ---------------------------------------------- */

.tienda-horario {
    margin-top: 1.25rem;
}

.tienda-horario h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
}

.horario-semana,
.horario-cierres {
    margin: 0;
    padding: 0;
    list-style: none;
}

.horario-semana li {
    line-height: 1.7;
}

/* Los cierres se separan del horario y van marcados: son la excepción, y la
   excepción es justo lo que hay que ver. */
.horario-cierres {
    margin-top: .6rem;
    padding-left: .7rem;
    border-left: 3px solid var(--acento);
    font-weight: 600;
}

.tiendas {
    margin: 2.5rem 0;
}

.tiendas-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.tienda {
    padding: 1.25rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.tienda h3 {
    margin: 0 0 var(--e2);
}

.tienda address {
    font-style: normal;
}

/* --- Formularios --------------------------------------------------------- */

/* **El salto se para por debajo de la cabecera.** La cabecera del sitio es
   pegajosa y mide 4,5 rem: al llegar aquí desde un enlace `#formulario`, el
   navegador dejaba el borde de arriba de la caja en lo alto de la ventana y la
   cabecera tapaba el título y los primeros campos. `scroll-margin-top` le dice
   dónde tiene que parar de verdad. */
.formulario {
    scroll-margin-top: calc(4.5rem + var(--e5));
    margin: 3rem 0;
    padding: 1.75rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo-alterno);
}

.formulario h2 {
    margin-top: 0;
}

.formulario-campos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
}

/* Los textos largos ocupan las dos columnas: escribir un mensaje en media
   pantalla es incómodo, y es el campo que más se usa. `campo-completo` hace lo
   mismo con un campo de una línea cuya ETIQUETA es larga —una pregunta
   entera—, que en media columna se parte en tres renglones. */
.campo-area,
.campo-completo {
    grid-column: 1 / -1;
}

.campo {
    margin: 0 0 1rem;
}

.campo label {
    display: block;
    margin-bottom: .3rem;
    font-size: .9rem;
    color: var(--suave);
}

.campo input,
.campo textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--fondo);
    color: inherit;
    font: inherit;
}

.campo textarea {
    resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

.formulario-pie {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .5rem 0 0;
}

.obligatorios {
    color: var(--suave);
    font-size: .85rem;
}

.formulario button {
    padding: .85rem 2.25rem;
    border: 0;
    border-radius: var(--radio-corto);
    background: var(--naranja);
    color: var(--blanco);
    font: inherit;
    font-weight: var(--peso-recio);
    cursor: pointer;
    transition: background var(--transicion), transform var(--transicion);
}

.formulario button:hover {
    background: var(--naranja-hondo);
    transform: translateY(-1px);
}

.formulario button:active {
    transform: translateY(0);
}

/* El campo trampa. Fuera de la pantalla en vez de `display:none`: hay robots
   que descartan lo que está oculto de la forma evidente, y este parece un campo
   normal hasta que se mira el CSS. */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso {
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    border-radius: var(--radio);
    border-left: 4px solid;
}

.aviso p {
    margin: 0;
}

.aviso ul {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
}

.aviso-bien {
    border-color: #15803d;
    background: #f0fdf4;
    color: #14532d;
}

.aviso-mal {
    border-color: #b91c1c;
    background: #fef2f2;
    color: #7f1d1d;
}

@media (max-width: 720px) {
    .formulario-campos {
        grid-template-columns: 1fr;
    }
}

/* --- Vídeo propio --------------------------------------------------------- */

/* Llena su marco igual que el iframe de YouTube: todas las tarjetas tienen la
   misma proporción, lleven foto o vídeo. La proporción la impone el marco y el
   vídeo lo rellena. */
.video-propio {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* El vídeo suelto de la ficha ya no existe: es la primera lámina de la galería,
   y su tamaño lo pone `.galeria-lamina-video`. */


/* --- Aviso de cookies ------------------------------------------------------

   Los tres botones de la primera capa se pintan IGUALES a propósito. No es
   una decisión de diseño: la guía de la Agencia Española de Protección de
   Datos exige que rechazar cueste lo mismo que aceptar, y un «Rechazar» en
   gris pequeño al lado de un «Aceptar» en naranja es justo lo que más se
   sanciona. Si algún día se rediseña el pie, esto no se toca.

   Sin JavaScript no se pinta nada: los botones no harían nada, así que no se
   carga ninguna cookie y no hay nada que preguntar.
   -------------------------------------------------------------------------- */

.cookies-aviso {
    display: none;
}

.con-js .cookies[data-estado="pendiente"] .cookies-aviso {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4) var(--e8);
    padding: var(--e5) var(--margen-lateral);
    border-top: 3px solid var(--naranja);
    background: var(--blanco);
    box-shadow: var(--sombra-alta);
}

.cookies-texto {
    flex: 1 1 24rem;
    max-width: 52rem;
}

.cookies-texto h2 {
    margin: 0 0 var(--e2);
    font-size: var(--t-medio);
}

.cookies-texto p {
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    line-height: 1.55;
}

.cookies-texto a {
    color: var(--naranja-tinta);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.cookies-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
}

/* Los tres, el mismo tamaño, el mismo color y el mismo peso. */
.cookies-boton {
    flex: 1 1 auto;
    min-width: 10rem;
    padding: .8rem 1.5rem;
    border: 0;
    border-radius: var(--radio-corto);
    background: var(--naranja);
    color: var(--blanco);
    font: inherit;
    font-size: var(--t-pequeno);
    font-weight: var(--peso-recio);
    text-align: center;
    cursor: pointer;
    transition: background var(--transicion);
}

.cookies-boton:hover {
    background: var(--naranja-hondo);
}

/* --- La segunda capa ------------------------------------------------------ */

.cookies-fondo {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgb(26 22 19 / 55%);
}

.cookies-panel {
    position: fixed;
    z-index: 80;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(34rem, calc(100vw - 2 * var(--margen-lateral)));
    max-height: min(40rem, calc(100vh - 3rem));
    overflow-y: auto;
    padding: var(--e6);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra-alta);
}

.cookies-panel h2 {
    margin: 0 0 var(--e5);
    font-size: var(--t-grande);
}

.cookies-grupo {
    padding: var(--e4) 0;
    border-top: 1px solid var(--linea-tenue);
}

.cookies-grupo p {
    margin: var(--e2) 0 0;
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    line-height: 1.55;
}

.cookies-etiqueta {
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-weight: var(--peso-fuerte);
    cursor: pointer;
}

.cookies-etiqueta input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--naranja);
}

/* «Siempre activas»: se dice al lado de la casilla bloqueada, para que se vea
   que no es que esté rota. */
.cookies-etiqueta em {
    margin-left: auto;
    color: var(--tinta-suave);
    font-size: var(--t-menudo);
    font-style: normal;
    font-weight: var(--peso-normal);
}

.cookies-etiqueta input:disabled {
    cursor: not-allowed;
}

.cookies-panel .cookies-botones {
    margin-top: var(--e6);
}

@media (max-width: 720px) {
    /* En el móvil el aviso ocupa el ancho entero y los botones se apilan: tres
       botones en fila en una pantalla estrecha salen de dos letras cada uno. */
    .cookies-botones {
        width: 100%;
    }

    .cookies-boton {
        flex: 1 1 100%;
    }
}

/* --- El carrusel de la portada ---------------------------------------------

   **La caja es 16:9 y la fotografía también.** Por eso aquí no hay ni un
   `object-fit` de recorte ni una altura forzada: la imagen entra entera y no se
   deforma en ninguna pantalla. Es lo que falla en la web actual, donde la foto
   lleva `w-100 h-100` y se estira a la caja.

   Si algún día se admite otra proporción, esto hay que repensarlo entero: no
   basta con añadir un `cover`.
   -------------------------------------------------------------------------- */

.carrusel {
    position: relative;
    /* Sin margen arriba: el aire de la página lo pone `main`. */
    margin: 0 0 var(--e-seccion);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-alta);
    background: var(--tinta);
}

/* Con un aviso justo debajo, el hueco se acorta. `--e-seccion` es la separación
   entre bloques distintos —el carrusel y las novedades son dos cosas—, pero un
   aviso pegado al carrusel es lo MISMO: la cabecera de la página. A 72 px
   parecía que se le había olvidado a alguien ahí en medio. */
.carrusel:has(+ .aviso-web) {
    margin-bottom: var(--e4);
}

.carrusel-pista {
    display: grid;
}

/* Todos los slides ocupan la MISMA celda, uno encima de otro. Así la caja mide
   siempre lo mismo y la página no salta al cambiar de slide. */
.carrusel-slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    transition: opacity 600ms ease;
}

/* El primero se ve siempre, también sin JavaScript: si el script no llega a
   ejecutarse, la portada enseña un slide entero y funciona igual. */
.carrusel-slide:first-child,
.carrusel-slide[data-visible] {
    opacity: 1;
}

/* El que no se ve no se puede tabular: si no, el teclado entra en botones
   invisibles. */
.carrusel-slide:not([data-visible]):not(:first-child) {
    visibility: hidden;
}

/* Y cuando el JavaScript ha tomado el mando, el primero deja de ser especial:
   manda `data-visible` y nada más.

   **La marca la pone el propio script, no la clase `con-js`**, y eso no es un
   matiz: con `con-js` bastaba que el script no llegara a hacer su trabajo —por
   un error, o porque se salía al haber un solo slide— para que el primero se
   quedara escondido y **el carrusel se viera negro**. Pasó, con un solo slide
   activo. Ahora, si el script no llega a marcarlo, se ve igualmente. */
.carrusel[data-listo] .carrusel-slide:first-child:not([data-visible]) {
    opacity: 0;
    visibility: hidden;
}

.carrusel-foto {
    display: block;
    width: 100%;
    height: auto;
}

/* El velo del carrusel: oscurece la foto para que se lea el titular blanco. Sin
   él, una frase blanca sobre una fotografía clara no se lee, y quien sube la foto
   no tiene por qué saberlo.

   **Va donde está el texto y en ningún sitio más**, y por eso tiene dos ejes:

   - **De abajo arriba** lo oscurece el `background`: fuerte en la base y acabado
     antes de la mitad de la foto.
   - **De izquierda a derecha lo recorta la máscara.** El texto no cruza la
     fotografía: el titular está limitado a 20 caracteres de ancho y la frase a
     46, así que ocupan como mucho la mitad izquierda. Todo lo que se oscurecía a
     la derecha se oscurecía para nada.

   El velo terminaba antes tapando la foto entera —82 % de negro en la base, 55 %
   a media altura y algo hasta arriba—. Bajarlo por su eje vertical se hizo el
   13/08/2026 y **se notaba poco**, porque donde de verdad pesa es en la franja del
   texto y ahí no hay margen: por debajo del 70 % la frase deja de leerse. Lo que
   sí se nota es quitarlo del lado que sobra.

   Los números salen de MEDIR las fotos, no de probar a ojo: se compone el
   degradado sobre cada slide publicado y se calcula el contraste del blanco en el
   tercio de abajo, que es donde va el texto.

   **El listón es 4,5 y no 3,0.** El titular es grande y le bastaría 3,0, pero la
   frase son 18–22 px en peso normal, así que manda ella. El peor slide —una foto
   clara— se queda en 5,22, y la máscara no le quita nada: donde hay letras vale 1.

   **Si el navegador no entiende `mask`, el velo se queda entero de lado a lado**,
   que es exactamente como estaba. El fallo es la versión de antes, no una portada
   ilegible.

   En pantalla estrecha esto no existe —ver más abajo—: allí el texto va debajo de
   la foto, sobre fondo sólido. */
.carrusel-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(26 22 19 / 70%) 0%,
        rgb(26 22 19 / 48%) 30%,
        rgb(26 22 19 / 10%) 55%,
        transparent 70%
    );
    /* Entero hasta la mitad —toda la anchura que puede llegar a ocupar el
       texto—, y de ahí a nada. El cuarto de la derecha queda limpio del todo. */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 75%);
    mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 75%);
}

.carrusel-texto {
    position: absolute;
    inset: auto 0 0;
    padding: var(--e8) var(--e10);
    color: var(--blanco);
}

.carrusel-texto h2 {
    margin: 0;
    max-width: 20ch;
    color: var(--blanco);
    font-size: var(--t-portada);
    letter-spacing: -.03em;
    text-wrap: balance;
}

.carrusel-texto p {
    margin: var(--e4) 0 0;
    max-width: 46ch;
    font-size: var(--t-medio);
    line-height: var(--alto-normal);
}

.carrusel-boton {
    display: inline-block;
    margin-top: var(--e6);
    padding: .9rem 2rem;
    border-radius: var(--radio-corto);
    background: var(--naranja);
    color: var(--blanco);
    font-weight: var(--peso-recio);
    transition: background var(--transicion), transform var(--transicion);
}

.carrusel-boton:hover {
    background: var(--naranja-hondo);
    color: var(--blanco);
    transform: translateY(-1px);
}

/* --- Los mandos ------------------------------------------------------------ */

.carrusel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 82%);
    color: var(--tinta);
    cursor: pointer;
    transition: background var(--transicion);
}

/* **El mismo fallo que tenía la galería de la ficha, y aquí llevaba desde que se
   escribió**: `display: grid` gana al `[hidden]` del navegador, así que sin
   JavaScript salían las flechas y los puntos sin mover nada. El HTML los nace
   escondidos a propósito y el CSS los estaba destapando. */
.carrusel-flecha[hidden],
.carrusel-puntos[hidden] {
    display: none;
}

.carrusel-flecha:hover {
    background: var(--blanco);
}

.carrusel-flecha svg {
    width: 1.25rem;
    height: 1.25rem;
}

.carrusel-anterior { left: var(--e5); }
.carrusel-siguiente { right: var(--e5); }

.carrusel-puntos {
    position: absolute;
    right: var(--e10);
    bottom: var(--e8);
    display: flex;
    gap: var(--e2);
}

.carrusel-punto {
    width: .6rem;
    height: .6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 45%);
    cursor: pointer;
    transition: background var(--transicion), width var(--transicion);
}

.carrusel-punto[aria-selected="true"] {
    width: 1.6rem;
    border-radius: var(--radio-pildora);
    background: var(--naranja);
}

@media (max-width: 62rem) {
    /* En pantalla estrecha el texto NO va encima de la foto: un 16:9 en un móvil
       son unos 220 px de alto, y ahí no cabe un titular legible. La foto se ve
       entera arriba y el texto va debajo, sobre fondo sólido. **Nada se recorta
       tampoco aquí.** */
    .carrusel-texto {
        position: static;
        padding: var(--e6) var(--e5) var(--e8);
        background: var(--tinta);
    }

    .carrusel-velo {
        display: none;
    }

    .carrusel-texto h2 {
        font-size: var(--t-grande);
    }

    .carrusel-texto p {
        font-size: var(--t-normal);
    }

    .carrusel-flecha {
        top: 0;
        transform: none;
        margin-top: 25vw;
    }

    .carrusel-puntos {
        right: var(--e5);
        bottom: auto;
        top: 0;
        margin-top: 4vw;
    }
}

/* Quien ha pedido menos movimiento en su sistema no ve transiciones. El
   avance automático también se para: eso lo hace el JavaScript. */
@media (prefers-reduced-motion: reduce) {
    .carrusel-slide {
        transition: none;
    }
}

/* --- Por qué Luxemotor -----------------------------------------------------

   Los motivos de la portada. **Sin iconos y a conciencia**: los dibujados a
   mano no daban la talla, así que esto se sostiene con tipografía. El número
   grande en naranja ordena la lectura y ocupa el sitio que tendría el icono,
   para que la tarjeta no se vea desnuda.
   -------------------------------------------------------------------------- */

.porques {
    padding-top: var(--e-seccion);
    border-top: 1px solid var(--linea);
}

/* **Cuatro columnas contadas, no las que quepan.**

   Con `auto-fit` el reparto lo decidía el ancho disponible, y con cinco motivos
   salían cuatro en una fila y uno solo en la siguiente. El usuario: «Eso no es
   profesional ni estético».

   Se arregló por los dos lados: «Taller propio» se apagó —quedan cuatro— y las
   columnas se fijan. Cuatro divide limpio en los tres anchos: **cuatro, dos y
   una**. Ninguna fila coja.

   Si algún día vuelven a ser cinco, hay que volver aquí: es el precio de que el
   reparto sea exacto en vez de automático. */
.porques-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
}

@media (min-width: 40rem) {
    .porques-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .porques-rejilla {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--e5);
    }
}

/* **Sin filete naranja arriba**: sobraba. Cuatro rayas en fila competían con el
   contenido y hacían que el bloque pareciera un formulario. */
.porque {
    padding: 0;
}

.porque-numero {
    display: block;
    margin-bottom: var(--e2);
    color: var(--naranja);
    font-size: var(--t-menudo);
    font-weight: var(--peso-recio);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.porque h3 {
    margin: 0 0 var(--e2);
    font-size: var(--t-medio);
}

.porque p {
    margin: 0;
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    line-height: 1.55;
}

/* --- Dónde estamos ---------------------------------------------------------

   Cierra la portada: quien ha llegado hasta aquí ya ha visto los coches y ya
   sabe por qué comprarlos aquí; lo siguiente que necesita es dónde ir y cuándo.
   -------------------------------------------------------------------------- */

.donde-tienda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--e8);
    align-items: start;
}

.donde-tienda + .donde-tienda {
    margin-top: var(--e10);
    padding-top: var(--e10);
    border-top: 1px solid var(--linea);
}

.donde-datos h3 {
    margin: 0 0 var(--e3);
    font-size: var(--t-medio);
}

/* Abierto o cerrado. Es el dato por el que se mira esta franja, así que va
   arriba y con su punto de color. */
.donde-estado {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e4);
    padding: var(--e2) var(--e4);
    border-radius: var(--radio-pildora);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-fuerte);
}

.donde-abierto {
    background: #f0fdf4;
    color: #14532d;
}

.donde-cerrado {
    background: var(--hueso);
    color: var(--tinta-media);
}

.donde-punto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

.donde-datos address {
    font-style: normal;
    line-height: 1.6;
}

.donde-telefono {
    margin: var(--e2) 0 0;
    font-variant-numeric: tabular-nums;
}

.donde-tienda .mapa {
    min-height: 18rem;
}

@media (max-width: 62rem) {
    .donde-tienda {
        grid-template-columns: 1fr;
        gap: var(--e5);
    }
}

/* --- El buscador de la portada ---------------------------------------------

   Tres bloques, como los pidió el usuario: las carrocerías con su dibujo, el
   buscador de marca y precio, y el botón de verlos todos.

   Todo son enlaces y un formulario que va al listado: **sin JavaScript funciona
   igual**, y cualquier búsqueda se puede guardar y compartir.
   -------------------------------------------------------------------------- */

.buscar {
    margin: var(--e8) 0 var(--e-seccion);
}

.buscar-bloque + .buscar-bloque {
    margin-top: var(--e8);
}

.buscar-bloque h2 {
    margin: 0 0 var(--e5);
    font-size: var(--t-medio);
    font-weight: var(--peso-recio);
}

/* --- Las carrocerías -------------------------------------------------------

   Botones anchos y con el dibujo grande: es lo primero que se toca en un móvil
   y tiene que ser fácil de acertar con el dedo.
   -------------------------------------------------------------------------- */

.buscar-carrocerias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--e3);
}

.buscar-carroceria {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: var(--e4) var(--e3);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--tinta);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-fuerte);
    line-height: var(--alto-normal);
    text-align: center;
    transition: border-color var(--transicion), box-shadow var(--transicion),
                color var(--transicion), transform var(--transicion);
}

.buscar-carroceria:hover {
    border-color: var(--naranja);
    color: var(--naranja-tinta);
    box-shadow: var(--sombra-baja);
    transform: translateY(-2px);
}


/* --- El buscador ----------------------------------------------------------- */

.buscar-formulario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    gap: var(--e4);
    align-items: end;
    padding: var(--e5);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--hueso);
}

.buscar-campo {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    /* Sin esto, el desplegable de marcas abierto estira la fila entera. */
    position: relative;
}

.buscar-etiqueta {
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    font-weight: var(--peso-medio);
}

.buscar-campo select {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    font: inherit;
    line-height: var(--alto-normal);
}

/* --- Varias marcas a la vez ------------------------------------------------

   Casillas dentro de un `<details>`, no un `select multiple`: el múltiple del
   navegador obliga a mantener pulsada una tecla para elegir dos cosas, y en un
   móvil no hay tecla que mantener.

   Se abre y se cierra **sin JavaScript**, igual que el selector de idiomas.
   -------------------------------------------------------------------------- */

.buscar-marcas summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    padding: .7rem .8rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    font-size: var(--t-normal);
    cursor: pointer;
    list-style: none;
}

.buscar-marcas summary::-webkit-details-marker {
    display: none;
}

.buscar-marcas summary svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    color: var(--tinta-suave);
    transition: transform var(--transicion);
}

.buscar-marcas[open] summary svg {
    transform: rotate(180deg);
}

/* La lista se sale por encima de lo que haya debajo en vez de empujarlo: con
   veinte marcas, empujar movería el botón de buscar media pantalla. */
.buscar-marcas-lista {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: var(--e1);
    padding: var(--e3);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-corto);
    background: var(--blanco);
    box-shadow: var(--sombra-media);
}

.buscar-marcas-lista label {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e1) var(--e2);
    border-radius: var(--radio-corto);
    font-size: var(--t-pequeno);
    cursor: pointer;
}

.buscar-marcas-lista label:hover {
    background: var(--hueso);
}

.buscar-marcas-lista input {
    accent-color: var(--naranja);
}

/* --- La barra de dos topes -------------------------------------------------

   **La misma en la portada y en el listado**: el precio del buscador, y el
   precio y el año de los filtros. Por eso no cuelga de `.buscar-`: se pinta
   donde la monten.

   **Ni un desplegable**: solo la barra. Lo que se envía son los dos campos que
   ella escribe —ocultos en la portada, las casillas de siempre en el listado—.

   Nace por donde esté filtrado, y sin filtros, en los extremos: el coche más
   barato y el más caro, así que de entrada no filtra nada. **Los topes no se
   pueden cruzar**, que es lo que venía a arreglar: con dos casillas sueltas se
   podía pedir «desde 160.000 hasta 40.000».
   -------------------------------------------------------------------------- */

.rango-cifras {
    display: block;
    margin-bottom: var(--e3);
    font-size: var(--t-normal);
    font-weight: var(--peso-fuerte);
    font-variant-numeric: tabular-nums;
}

.rango-barra {
    position: relative;
    height: 1.5rem;
}

/* La vía por la que corren los topes, y el tramo elegido pintado encima. */
.rango-barra::before,
.rango-relleno {
    content: "";
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: var(--radio-pildora);
}

.rango-barra::before {
    left: 0;
    right: 0;
    background: var(--linea-fuerte);
}

.rango-relleno {
    background: var(--naranja);
}

/* Los dos deslizadores, uno encima del otro. La barra no recibe el ratón —si no,
   el de arriba taparía al de abajo—; solo lo reciben los tiradores. */
.rango-tope {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    appearance: none;
    pointer-events: none;
}

.rango-tope::-webkit-slider-thumb {
    appearance: none;
    pointer-events: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid var(--naranja);
    border-radius: 50%;
    background: var(--blanco);
    box-shadow: var(--sombra-baja);
    cursor: grab;
}

.rango-tope::-moz-range-thumb {
    pointer-events: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid var(--naranja);
    border-radius: 50%;
    background: var(--blanco);
    box-shadow: var(--sombra-baja);
    cursor: grab;
}

.rango-tope:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--naranja);
    outline-offset: 2px;
}

/* **El mismo alto que los desplegables de al lado**: mismo relleno vertical y un
   borde del mismo grosor, aunque aquí sea del color del propio botón. Sin ese
   borde queda dos píxeles más bajo y se nota. */
.buscar-boton {
    padding: .7rem 2rem;
    border: 1px solid var(--naranja);
    border-radius: var(--radio-corto);
    background: var(--naranja);
    color: var(--blanco);
    font: inherit;
    font-weight: var(--peso-recio);
    line-height: var(--alto-normal);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}

.buscar-boton:hover {
    border-color: var(--naranja-hondo);
}

.buscar-boton:hover {
    background: var(--naranja-hondo);
}

/* --- Verlos todos ----------------------------------------------------------

   Aparte del buscador y a propósito, pedido por el usuario: hay mucha gente que
   no viene a filtrar nada. Por eso ocupa el ancho entero y no es un enlace
   pequeño debajo del formulario.
   -------------------------------------------------------------------------- */

.buscar-todos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e3);
    margin-bottom: var(--e8);
    padding: var(--e5);
    border: 2px solid var(--tinta);
    border-radius: var(--radio);
    color: var(--tinta);
    font-size: var(--t-medio);
    font-weight: var(--peso-recio);
    transition: background var(--transicion), color var(--transicion);
}

.buscar-todos:hover {
    background: var(--tinta);
    color: var(--blanco);
}


@media (max-width: 40rem) {
    /* El botón, debajo y a todo lo ancho: en una fila de tres, en un móvil se
       queda en dos letras. */
    .buscar-formulario {
        grid-template-columns: 1fr;
    }

    .buscar-boton {
        width: 100%;
    }
}

/* --- Coches parecidos, en la ficha de uno vendido ---------------------------
 *
 * Solo sale ahí: quien llega a un coche que ya no está se iba de la web sin ver
 * nada más. Usa la misma `.rejilla` que el listado, así que las tarjetas son
 * exactamente las de siempre y no hay una segunda tarjeta que mantener.
 *
 * La línea de arriba lo separa del formulario que tiene encima: sin ella, los
 * dos bloques se leen como uno solo y las tarjetas parecen parte del formulario.
 */
.ficha-parecidos {
    margin-top: var(--e12);
    padding-top: var(--e6);
    border-top: 1px solid var(--linea);
}

.ficha-parecidos h2 {
    margin: 0 0 var(--e5);
}

.ficha-parecidos-todos {
    margin: var(--e5) 0 0;
    text-align: center;
}