/*
 * Autos Valls · Theme v2 — Base
 * ------------------------------
 * Epica AUTOVA-65 (EP-9), partido de theme-v2-home.css en AUTOVA-108. Se
 * carga en TODAS las paginas v2 (av_v2_plantilla_v2() != ''), no solo en la
 * home: topbar, cabecera, buscador, pie, barra sticky y los componentes que
 * se repiten en dos o mas pantallas (.av-btn, .av-card, .av-chip, .av-coche,
 * .av-migas, .av-precio...). Depende de theme-v2-tokens.css.
 *
 * COMO SE DECIDIO QUE ES BASE Y QUE ES DE LA HOME (criterio, no vista):
 * se busco cada clase con grep en template-parts/, page-templates/ e inc/.
 * La que aparecia en dos o mas paginas vino aqui; la que solo pintaba
 * home-v2/ se quedo en theme-v2-home.css. Asi salieron tres sorpresas sobre
 * la lista que traia el encargo:
 *
 *   - .av-coche y .av-chip (seccion "Flota" del diseño) los pinta TAMBIEN
 *     template-parts/coches-v2/rejilla.php y filtros.php. .av-grid--flota
 *     (la rejilla de dos columnas de la home) y .av-flota__vacio/__mas NO:
 *     esos se quedan en home.
 *   - .av-faqs__in / .av-faq / .av-faq__p / .av-faq__r los pinta TAMBIEN
 *     template-parts/oficinas-v2/faqs.php, con el mismo marcado ("Mismo
 *     criterio que la home", dice su propio comentario). .av-faqs__cta /
 *     .av-faqs__enlace (el "Ver todas las preguntas") solo los usa la home.
 *   - .av-oficina y .av-grid--oficinas, pese al nombre, los pinta SOLO
 *     home-v2/offices.php: oficinas-v2/rejilla.php usa su propio marcado
 *     (.av-oficina2). Se quedan en home, tal y como decia el encargo.
 *
 * Mobile first: las media queries suben, nunca bajan. Las secciones 12
 * (tablet) y 13 (escritorio) del theme-v2-home.css original mezclaban reglas
 * de base y de home dentro del mismo @media: se han partido regla a regla,
 * no en bloque, así que aquí y en theme-v2-home.css hay un @media (min-width:
 * 768px) y uno de 1024px cada uno, con las reglas que le tocan a cada hoja.
 *
 * La composicion (rejillas, ritmo, jerarquia) sale del proyecto de diseño.
 * Los valores atomicos —color, radius, tipografia— NO: salen de la marca
 * real via theme-v2-tokens.css.
 */

/* ==================================================================
 * 0. Base de la pagina
 * ================================================================== */

body.av-v2 {
    margin: 0;
    background: var(--av-blanco);
    color: var(--av-marino);
    font-family: var(--av-fuente-texto);
    font-size: var(--av-t-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* El tema padre mete reglas globales agresivas. Se acotan al ambito av-.
 *
 * OJO: el padding lateral va en LONGHAND a proposito. Con el atajo
 * `padding: 0 20px` esta regla (0,2,0 de especificidad) machacaba el
 * padding vertical de todo lo que combina .av-wrap con otra clase
 * —.av-hero__in, .av-topbar__in, .av-ventajas__lista—, que tienen menos
 * especificidad. El sintoma era el subtitulo del hero tapado por el buscador. */
/* 🔴 EL ANCHO DE LA WEB SE DECIDE AQUI Y EN NINGUN OTRO SITIO.
   Los 1240px estaban escritos a mano en base y en reserva, y --av-ancho existia
   con CERO usos: cambiar el ancho del sitio habria sido buscarlo por cinco
   declaraciones repartidas en dos hojas, y encontrar cuatro. */
.av-v2 .av-wrap {
    width: 100%;
    box-sizing: border-box;
    max-width: var(--av-ancho);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--av-gutter-movil);
    padding-right: var(--av-gutter-movil);
}

.av-v2 a {
    color: var(--av-enlace);
    text-decoration: none;
}

.av-v2 a:hover {
    color: var(--av-marino);
}

/* --av-focus-color, no --av-cielo: el cian real da 2.78:1 sobre blanco y
   WCAG 1.4.11 (indicadores de UI) exige 3:1. La excepcion del CTA (CONTRATO
   §2.2) es del boton, no de este anillo generico. */
.av-v2 :focus-visible {
    outline: 2px solid var(--av-focus-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.av-v2 img {
    max-width: 100%;
}

/* [hidden] tiene que ganar SIEMPRE.
 *
 * El navegador aplica `[hidden] { display: none }` desde su hoja de
 * usuario-agente, que pierde contra CUALQUIER regla de autor con clase. Como
 * `.av-coche` declara `display: flex`, las tarjetas seguian visibles al
 * ocultarlas desde JS: los filtros de la flota cambiaban el aria-pressed pero
 * no escondian ni un coche.
 *
 * Se declara una vez para todo el ambito .av-v2 en lugar de parchear cada
 * componente, porque el mismo patron se usa en el codigo promocional plegado y
 * en el menu movil. */
.av-v2 [hidden] {
    display: none !important;
}

/* Texto solo para lectores de pantalla */
.av-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Especificidad .av-v2 obligatoria: sin ella gana `.av-v2 a` (0,1,1 contra
   el 0,1,0 de `.av-skip` sola) y "Saltar al contenido" se pinta en
   --av-enlace sobre marino, 2.57:1 -- ilegible justo en el enlace que existe
   para quien navega con teclado, y que SOLO se ve al recibir foco.
   Detectado midiendo el computado real, el CSS de aqui ya "decia" blanco. */
.av-v2 .av-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--av-marino);
    color: var(--av-blanco);
    padding: 12px var(--av-e-7b);
    border-radius: 0 0 var(--av-r-boton) 0;
}

.av-v2 .av-skip:focus {
    left: 0;
    color: var(--av-blanco);
}

/* --- Tipografia comun --------------------------------------------- */

.av-v2 .av-h2 {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h3);
    line-height: 1.2;
    /* Sin letter-spacing: el diseño usa `--av-ls-titular` (apretado) SOLO en
       el H1. Los H2 de las 15 pantallas (32px 800) no llevan la propiedad —
       ni una vez, no es media inconsistencia del prototipo a promediar. */
    margin: 0 0 8px;
    color: var(--av-marino);
    text-wrap: balance;
}

.av-v2 .av-h2--claro {
    color: var(--av-blanco);
}

.av-eyebrow {
    display: inline-block;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-eyebrow);
    letter-spacing: var(--av-ls-eyebrow);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.av-eyebrow--claro { color: var(--av-eyebrow); }

/* Alias de --claro con el nombre que fija el CONTRATO (§3): mismo valor, dos
   nombres porque --claro ya estaba en produccion cuando se cerro el
   vocabulario y cambiar las plantillas que lo usan no es parte de este
   encargo (AUTOVA-108). */
.av-eyebrow--sobre-marino { color: var(--av-eyebrow); }

/* Sobre blanco NO puede ir --av-cielo: el cian real da 2.78:1 y ni siquiera
   llega al 3:1 de texto grande. Va la variante oscura, que da 5.0:1. */
.av-eyebrow--cielo { color: var(--av-enlace); }

/* --- Botones ------------------------------------------------------- */
/* Padding 14px 32px, radius 9px (--av-r-boton), Sora 700 15px, transicion,
   area tactil minima 44x44 SIEMPRE — ni --sm la baja, ver mas abajo.
   ---------------------------------------------------------------------
   NIVELES DE CTA:

     --primary  🔴 usa --av-cta-bg / --av-cta-texto / --av-cta-hover, NUNCA
                --av-cielo ni un hex directo (CONTRATO.md §2.2). El par
                cian-con-blanco que pide el diseño da 2.78:1 y NO pasa AA:
                es una excepcion CONOCIDA Y AISLADA, solo para este trabajo
                local (no se despliega). Revertir al marino accesible es
                cambiar --av-cta-bg/--av-cta-hover en theme-v2-tokens.css,
                nada mas. Ver INCIDENCIAS.md, "CTA cian con texto blanco".

     --oscuro   🔴 el mismo boton primario que --primary (usa --av-cta-bg /
                --av-cta-texto / --av-cta-hover), a ANCHO COMPLETO. No es
                "marino a fuego": lo era hasta que se detecto que --primary
                y --oscuro pintaban la MISMA accion ("Reservar") de dos
                colores distintos a diez centimetros -- doce sitios en
                marino (tarjeta de coche, catalogo, blog, articulo, ficha,
                ayuda, tarifas, contacto, paso 2 de la reserva) y uno en
                cian (la cabecera). Quien quiera cambiar el color de estos
                trece botones va a --av-cta-* en tokens.css, no aqui.

     --secundario  blanco con borde y texto marino. Accion secundaria sobre
                fondo claro.

     --fantasma  borde blanco translucido, sin fondo. SOLO sobre fondo
                oscuro (marino): sobre blanco el borde no se veria
                (--av-sobre-blanco-40 es un rgba de blanco).

     --claro    blanco solido con texto marino, sin borde. Para una accion
                secundaria que tiene que "flotar" sobre un fondo oscuro o de
                color, donde --secundario (con borde gris) se perderia.

   Modificadores de tamaño y ancho, combinables con cualquiera de arriba:

     --sm       reduce padding y tipografia. NO toca min-height: 44px es el
                area de pulsacion minima y no es negociable (Criterios,
                cabecera de este encargo). Mismo criterio que ya usaba
                `.av-coche .av-btn--oscuro`.

     --full     width: 100%. Antes solo lo llevaba --oscuro a fuego; ahora
                cualquier boton puede pedirlo sin heredar el color marino. */

.av-v2 .av-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 14px 24px;
    border: 1px solid transparent;
    /* 🔴 PILDORA POR DEFECTO, y no --av-r-boton.
     *
     * Estaba en 9px y cada pagina se lo corregia por su cuenta: coches, ficha y
     * oficinas llevaban su propio parche a --av-r-pill sobre selectores propios,
     * y home, blog, ficha de coche, ayuda, nosotros y las landings se habian
     * quedado con la esquina cuadrada sin que nadie lo mirara.
     *
     * Contado sobre las 15 pantallas del diseño: de los 42 botones de accion,
     * 37 son pildora (999px), 5 llevan 20px y 4 llevan 9px. El 9px del diseño no
     * es el boton: es el ENLACE DEL TELEFONO de la cabecera, que aqui no usa
     * .av-btn sino .av-tel. Asi que el defecto estaba al reves.
     *
     * Quien necesite esquina viva lo pide con --av-r-boton en su selector. */
    border-radius: var(--av-r-boton);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    /* Sin letter-spacing: los 42 botones de accion del diseño (01-home.html,
       06-catalogo.html...) no le ponen la propiedad a ninguno. */
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--av-transicion), color var(--av-transicion);
}

/* 🔴 El tema hijo arrastra en su style.css legacy (linea ~644) una regla
 * GLOBAL con !important:
 *     button, input[type="submit"], .button { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important }
 * Ningun archivo theme-v2-* la pone y el diseño no la lleva, pero se cuela en
 * TODO <button> de verdad: el hamburguesa, los chips de filtro de la flota, los
 * acordeones. `box-shadow: none` a secas no la toca — hace falta el mismo
 * !important. Se encontro con CSS.getMatchedStylesForNode por CDP, no a ojo.
 *
 * Aqui, una vez, en vez de parchearlo <button> por <button> y pagina por pagina.
 * Quien quiera sombra en un boton la declara despues, con su propio selector. */
.av-v2 button {
    box-shadow: none !important;
}

/*
 * 🔴 EL CARRUSEL DE RESEÑAS (wp-review-slider-pro), RESCATADO.
 *
 * Sale en seis paginas, y en la ficha de oficina del aeropuerto pinta 156 nodos:
 * las reseñas de clientes de verdad, que es contenido que la gente lee antes de
 * decidir. Medido con Chrome:
 *
 *   texto de la reseña ... 4,10:1  (hace falta 4,5)
 *   autor y fecha ........ el gris del plugin, fuera de la paleta
 *   flechas .............. Poppins, y sin contraste medible
 *
 * Es CSS del plugin, si. Pero pinta DENTRO de nuestras paginas y quien lo lee no
 * distingue de quien es la regla — el mismo criterio con el que ya se rescataron
 * el acordeon de Click&Go, la tabla de fianzas de la ayuda y la prosa de la
 * ficha de oficina. El !important es inevitable contra el CSS del plugin, y por
 * eso va acotado a `.av-v2`: en los otros cinco idiomas el widget se queda como
 * estaba.
 *
 * NO se toca el plugin: se actualiza y se lo lleva por delante.
 */
.av-v2 .wprevpro .indrevtxt,
.av-v2 .wprevpro [class*="wpproslider_t5_P_"],
.av-v2 .wprevpro [class*="wpproslider_t5_STRONG_"],
.av-v2 .wprevpro [class*="wpproslider_t5_DIV_"] {
    font-family: var(--av-fuente-texto) !important;
    color: var(--av-texto-2) !important;
}

/* El autor y la fecha, en el gris terciario de la casa. `.wprev_showdate_T5` va
   aparte porque cuelga de un <span> propio dentro del texto de la reseña y no lo
   alcanzaba el selector de arriba. */
.av-v2 .wprevpro [class*="wpproslider_t5_STRONG_"],
.av-v2 .wprevpro [class*="wprev_showdate_"],
.av-v2 .wprevpro [class*="wpproslider_t5_SPAN_"] {
    color: var(--av-texto-3) !important;
}

/* Las flechas del carrusel. font-weight ademas de family: el plugin las deja en
   400 y la marca solo usa Sora en 700 y 800. */
.av-v2 .wprevpro .slickwprev-arrow {
    font-family: var(--av-fuente-titulo) !important;
    font-weight: 700 !important;
    color: var(--av-marino) !important;
}



.av-v2 .av-btn--primary {
    background: var(--av-cta-bg);
    color: var(--av-cta-texto);
}

.av-v2 .av-btn--primary:hover {
    background: var(--av-cta-hover);
    color: var(--av-cta-texto);
}

/* --av-cta-*, no --av-marino a fuego: es el mismo boton primario que
   --primary, solo que a ancho completo. Pintarlo con un color propio es lo
   que tenia "Reservar" cian en la cabecera y "Reservar" marino en la
   tarjeta de al lado -- dos colores para la misma accion. Con esto, cambiar
   el color de los trece sitios que usan --oscuro es cambiar --av-cta-bg /
   --av-cta-hover en tokens.css, aqui no. */
.av-v2 .av-btn--oscuro {
    background: var(--av-cta-bg);
    color: var(--av-cta-texto);
    width: 100%;
}

.av-v2 .av-btn--oscuro:hover {
    background: var(--av-cta-hover);
    color: var(--av-cta-texto);
}

.av-v2 .av-btn--secundario {
    background: var(--av-blanco);
    border-color: var(--av-borde);
    color: var(--av-marino);
}

.av-v2 .av-btn--secundario:hover {
    border-color: var(--av-marino);
    color: var(--av-marino);
}

/* Ghost: borde blanco translucido sobre fondo oscuro. El aclarado en hover
   es el mismo gesto que .av-btn--primary: sube visibilidad sin perder
   contraste de texto, que aqui ya es blanco puro (no hay nada que perder). */
.av-v2 .av-btn--fantasma {
    background: none;
    border-color: var(--av-sobre-blanco-40);
    color: var(--av-blanco);
}

.av-v2 .av-btn--fantasma:hover {
    background: var(--av-sobre-blanco-12);
    border-color: var(--av-sobre-blanco-40);
    color: var(--av-blanco);
}

/* Blanco solido, sin borde: secundario para fondos oscuros o de color donde
   --secundario (borde --av-borde, pensado para fondo blanco) desapareceria. */
.av-v2 .av-btn--claro {
    background: var(--av-blanco);
    border-color: var(--av-blanco);
    color: var(--av-marino);
}

.av-v2 .av-btn--claro:hover {
    background: var(--av-sobre-marino);
    border-color: var(--av-sobre-marino);
    color: var(--av-marino);
}

/* min-height NO se toca: 44px es el area de pulsacion minima. --sm solo
   encoge lo visual, igual que ya hacia `.av-coche .av-btn--oscuro`. */
.av-v2 .av-btn--sm {
    padding: 10px var(--av-e-7b);
    font-size: var(--av-t-sm);
}

.av-v2 .av-btn--full {
    width: 100%;
}

/* --- Secciones ----------------------------------------------------- */

.av-seccion {
    padding-top: 48px;
}

.av-seccion__cab {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.av-seccion__bajada {
    margin: 0;
    max-width: 60ch;
    font-size: var(--av-t-base);
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* Modificadores de fondo. Sin --suave/--arena/--marino la seccion es blanca:
   asi son las tres bandas de color que ya usaban .av-buscador, .av-ventajas
   y .av-oficina/.av-confianza__caja antes de tener nombre generico. */
.av-seccion--suave {
    background: var(--av-fondo-suave);
}

.av-seccion--arena {
    background: var(--av-arena);
}

/* Sobre marino el cuerpo va en --av-sobre-marino (8.4:1) y los titulares en
   blanco: --av-h2 por defecto es marino y desaparece sobre si mismo. */
.av-seccion--marino {
    background: var(--av-marino);
    color: var(--av-sobre-marino);
}

.av-seccion--marino .av-h2 {
    color: var(--av-blanco);
}

/* ==================================================================
 * 0 bis. Componentes compartidos
 * ------------------------------------------------------------------
 * CONTRATO.md §3 cierra esta lista de nombres. Van aqui y no en cada hoja de
 * pagina para que "cambiar un CSS cambie en toda la web" (invariante I2).
 * Los valores salen del patron repetido en las 15 pantallas del diseño
 * (busqueda por grep, no a ojo) y, donde el diseno no pasa AA, del mismo
 * criterio que ya aplica el resto de esta hoja: el texto pequeño necesita
 * 4,5:1 aunque el prototipo lo pinte en cian puro.
 * ================================================================== */

/* --- Tarjeta generica -----------------------------------------------
 * El patron ya se repetia CUATRO veces sin nombre comun: .av-coche,
 * .av-tarjeta, .av-resena, .av-clickgo__item/.av-beneficio. Blanco, borde
 * de 1px, radio, y al pasar por encima se levanta 3px y proyecta sombra.
 * Estas cuatro implementaciones NO se han refundido en .av-card en este
 * encargo —tocar su marcado no es "partir el CSS en dos"—, pero cualquier
 * pantalla nueva (task D) ya tiene de donde tirar sin reinventarlo. */
.av-card {
    display: flex;
    flex-direction: column;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    overflow: hidden;
    transition: box-shadow var(--av-transicion-lenta), transform var(--av-transicion-lenta);
}

.av-card:hover,
.av-card:focus-within {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-3px);
}

/* Foto arriba en 16:10 (como .av-tarjeta__media): la proporcion va en la
   IMAGEN, no en el contenedor, que es el bug que ya se caza en la cabecera
   de .av-tarjeta__media — un aspect-ratio en el padre y height:100% en el
   hijo crean una dependencia circular que el navegador resuelve ignorando
   el recorte. */
.av-card--foto {
    border-radius: var(--av-r-bloque);
}

.av-card--foto .av-card__media {
    display: block;
    background: var(--av-fondo-suave);
}

.av-card--foto .av-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Sin animacion de hover: para listas largas (guias, articulos) donde el
   levantamiento de 12 tarjetas a la vez es ruido, no una señal. */
.av-card--plana {
    box-shadow: none;
}

.av-card--plana:hover,
.av-card--plana:focus-within {
    box-shadow: none;
    transform: none;
}

/* Sombra permanente en vez de borde: el patron del formulario de contacto
   del diseno (08-contacto-y-oficinas), no una tarjeta de lista. */
.av-card--elevada {
    border-color: transparent;
    box-shadow: var(--av-sombra-1);
}

/* --- Chip: version en CLASE del estado activo -----------------------
 * .av-v2 .av-chip[aria-pressed="true"] (mas abajo, seccion Flota) ya cubre
 * el filtro de la flota, que viaja el estado en el atributo ARIA. Donde el
 * estado no sea un boton con aria-pressed (por ejemplo chips de solo
 * lectura), esta clase da el mismo aspecto. */
.av-v2 .av-chip--activo {
    background: var(--av-enlace);
    border-color: var(--av-enlace);
    color: var(--av-blanco);
}

/* --- Migas de pan -----------------------------------------------------
 * Franja de contexto bajo la cabecera, como el chrome del diseno
 * (00-chrome.html): "Inicio" en azul de enlace —el diseno lo pinta en
 * --av-cielo puro, que sigue sin llegar a 4.5:1— y la pagina actual en
 * marino, sin enlace.
 *
 * 🔴 Marcado real, no el que se habia inventado aqui: blog, ficha de oficina
 * y articulo ya traian CADA UNA su propia copia byte a byte de este bloque
 * (`.av-migas__lista` ordenada + `.av-migas__it`, con schema.org
 * BreadcrumbList) porque `.av-migas` nunca tuvo un consumidor real en la
 * base — violaba I2 por partida triple. Los valores de aqui son EXACTAMENTE
 * los que ya tenian esas tres hojas (convertidos a los tokens de espaciado
 * que ya coincidian al byte, `6px 8px` -> --av-e-2/--av-e-3 y `12px 0` ->
 * --av-e-5), para que puedan borrar su copia sin que cambie un pixel.
 * Contacto y ficha de coche usan otro marcado (`__in`/`__actual`, sin
 * lista); coordinado con el orquestador para unificarlo. */
.av-migas {
    background: var(--av-blanco);
    border-bottom: 1px solid var(--av-borde);
}

.av-migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--av-e-2) var(--av-e-3);
    margin: 0;
    padding: var(--av-e-5) 0;
    list-style: none;
    font-size: var(--av-t-meta);
    color: var(--av-texto-3);
}

.av-migas__it + .av-migas__it::before {
    content: "›";
    margin-right: var(--av-e-3);
    color: var(--av-texto-3);
}

.av-v2 .av-migas__it a {
    color: var(--av-texto-3);
    text-decoration: none;
}

.av-v2 .av-migas__it a:hover,
/* :hover ademas de :focus-visible. Las tres hojas de pagina que tenian su propia
   copia de .av-migas subrayaban en las dos, y al consolidarlas aqui se habria
   perdido el hover sin que nadie lo notara: un enlace de migas que no responde al
   raton parece texto muerto. */
.av-v2 .av-migas__it a:hover,
.av-v2 .av-migas__it a:focus-visible {
    color: var(--av-marino);
    text-decoration: underline;
}

.av-migas__it--aqui {
    font-weight: 600;
    color: var(--av-marino);
}

/* --- Placeholder "FOTO REAL" ------------------------------------------
 * La trama rayada del diseno para el hueco de una foto que todavia no
 * existe. Valores literales del diseno (EEF4FA / E2EDF7 / 8FA9C2), ya
 * tokenizados como --av-placeholder-*. El texto va en mayusculas y
 * pequeño a proposito: es una nota de produccion, no contenido. */
.av-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--av-e-2);
    min-height: 120px;
    padding: var(--av-e-3);
    background: repeating-linear-gradient(135deg, var(--av-placeholder-a) 0 10px, var(--av-placeholder-b) 10px 20px);
    text-align: center;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-mini);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--av-placeholder-texto);
}

/* --- Precio -------------------------------------------------------
 * Numeros de precio SIEMPRE en Sora 800 (regla de marca, ya la aplicaba
 * .av-coche__precio). El <b> hereda el peso por el mismo motivo que ahi:
 * el navegador le da bold (700) de por si y pisa el 800 declarado. */
.av-precio {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h4);
    line-height: 1.1;
    color: var(--av-marino);
}

.av-precio b {
    font-weight: inherit;
}

.av-precio small {
    margin-left: 2px;
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: var(--av-t-cap);
    /* --av-texto-3 y no el gris de rotulo del diseño:
       a este tamaño sigue siendo texto que se lee, y el gris de rotulo del diseño da
       2.3:1. Mismo criterio que el resto de la hoja. */
    color: var(--av-texto-3);
}

.av-precio--grande {
    font-size: var(--av-t-h3);
}

/* --- Lista con palomita ---------------------------------------------
 * Patron del diseno (landing de ubicacion, resumen de tarifa en el paso 1):
 * circulo solido con un check y el texto al lado. El diseno pinta el
 * circulo en --av-cielo con el check en blanco (2.78:1 a 11px): se pinta en
 * --av-enlace, que es el mismo ajuste que ya lleva el resto de la hoja
 * cuando el diseno pide blanco sobre cian fuera del CTA. */
.av-lista-check {
    display: flex;
    flex-direction: column;
    gap: var(--av-e-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-lista-check li {
    display: flex;
    align-items: flex-start;
    gap: var(--av-e-4);
    font-size: var(--av-t-sm);
    line-height: 1.5;
    color: var(--av-texto-2);
}

.av-lista-check li::before {
    content: "\2713";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: var(--av-r-pill);
    background: var(--av-enlace);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-mini);
    line-height: 1;
}

/* --- Acordeon ---------------------------------------------------------
 * Para FAQ largas (la pagina de FAQs del diseño agrupa por bloques de hasta
 * seis preguntas cada uno: ahi si compensa plegar, al reves que los cuatro
 * resumenes de .av-faq en home/oficinas, que se quedan siempre abiertos).
 * Mismo gesto de "+" a 45° que ya usa .av-promo__mas: un solo patron de
 * "expandible" en toda la hoja, no dos con el mismo aspecto. */
.av-acordeon__item {
    border-bottom: 1px solid var(--av-borde);
}

.av-v2 .av-acordeon__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-e-5);
    width: 100%;
    background: none;
    border: 0;
    padding: var(--av-e-7) 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    line-height: 1.35;
    color: var(--av-marino);
    text-align: left;
    cursor: pointer;
}

.av-acordeon__marca {
    flex: none;
    font-size: var(--av-t-lg);
    line-height: 1;
    color: var(--av-enlace);
    transition: transform var(--av-transicion);
}

.av-v2 .av-acordeon__pregunta[aria-expanded="true"] .av-acordeon__marca {
    transform: rotate(45deg);
}

.av-acordeon__respuesta {
    margin: 0 0 var(--av-e-7);
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 1. Topbar
 * ================================================================== */

.av-topbar {
    display: none;                 /* Oculta en movil, por diseno */
    /* --av-marino-900, no --av-marino-950: el diseno (00-chrome.html:5)
       pinta ESTA franja con el valor de --av-marino-900. El de
       --av-marino-950 es el color de la barra de navegacion del propio
       prototipo (el selector de las 15 pantallas), no de ninguna pagina
       real -- confundirlos pintaba la topbar mas oscura de lo que toca. */
    background: var(--av-marino-900);
    color: var(--av-eyebrow);
    /* Sin token exacto para .07 de alfa (10/12/28/40 son los escalones mas
       cercanos); un solo uso en todo el diseno, se pide en PETICIONES.md. */
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: var(--av-t-mini);
}

.av-topbar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-e-7b);
    padding-top: 8px;
    padding-bottom: 8px;
}

.av-topbar p {
    margin: 0;
}

.av-topbar__claim {
    letter-spacing: .08em;
    text-transform: uppercase;
}

.av-topbar__der {
    display: flex;
    align-items: center;
    gap: var(--av-e-7b);
}

.av-topbar__rating b {
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
}

/* --- Selector de idiomas: codigos de texto, no banderas --------------
 * Como el diseno. Una bandera no es un idioma y a 18px no se lee. */

.av-idiomas__lista,
.av-topbar__cuenta {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.av-idiomas__lista li,
.av-topbar__cuenta li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-v2 .av-idioma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 4px 5px;
    border-radius: 5px;
    font-family: var(--av-fuente-titulo);
    font-weight: 600;
    font-size: var(--av-t-micro);
    letter-spacing: .06em;
    color: var(--av-eyebrow);
    transition: color var(--av-transicion), background-color var(--av-transicion);
}

.av-v2 a.av-idioma:hover {
    color: var(--av-blanco);
    background: var(--av-sobre-blanco-10);
}

/* El idioma actual no es un enlace: es el estado. Se distingue por peso y
   color ademas de por el fondo, no solo por color.
   Sin token exacto para .14 (10/12/28/40 disponibles): se usa el 12, que ya
   es el redondeo que aplico el mismo criterio en nosotros.css (delta .02,
   no se aprecia sobre este fondo tan oscuro). */
.av-v2 .av-idioma--actual {
    font-weight: 800;
    color: var(--av-blanco);
    background: var(--av-sobre-blanco-12);
    cursor: default;
}

.av-v2 .av-topbar__cuenta a {
    color: var(--av-eyebrow);
    font-size: var(--av-t-mini);
    white-space: nowrap;
    transition: color var(--av-transicion);
}

.av-v2 .av-topbar__cuenta a:hover {
    color: var(--av-blanco);
}
/* ==================================================================
 * 2. Cabecera
 * ================================================================== */

/* "Menorca desde 1986", junto al logo. Como el diseno: 11px, versalitas y en
   el azul de eyebrow, para que acompane al logo sin competir con el.
   Oculto por debajo de 768px, donde el logo ya llena su lado. */
.av-header__desde {
    display: none;
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-micro);
    letter-spacing: .12em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--av-eyebrow);
}

.av-header {
    position: relative;
    z-index: 3;                    /* Por encima del hero: el logo cuelga sobre el */
    background: var(--av-marino);
    color: var(--av-blanco);
}

.av-header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 66px;
}

/* 🔴 Divergencia real del diseno, no un calco: 00-chrome.html solo pone un
   <img> de 34px sobre el marino, sin cartela ni sombra -- ahi el logo es el
   trazo monocromo del prototipo (assets/valls-logo-mark.png), pensado para ir
   directo sobre fondo oscuro. El logo REAL configurado en el sitio es a
   color y sobre marino se ilegibiliza (y en algunos subsitios directamente
   no contrasta). La cartela blanca que cuelga del borde superior e invade
   el hero es la solucion practica: el logo real necesita una superficie
   clara. Se conserva -- documentado aqui, no en INCIDENCIAS todavia hasta
   que el orquestador lo revise.
   align-self:flex-start la pega arriba; el margen inferior negativo la hace
   sobresalir. El z-index del header la mantiene visible sobre la seccion
   siguiente. */
.av-logo {
    display: flex;
    align-items: center;
    flex: none;
    align-self: flex-start;
    background: var(--av-blanco);
    border-radius: 0 0 var(--av-r-chip) var(--av-r-chip);
    padding: 12px 16px 14px;
    margin-bottom: -20px;
    /* Sin escalon de --av-sombra-* que case (10px/30/.07 y 14px/32/.14 son
       los mas cercanos y cambian la caida visible de la cartela); se deja
       literal pero recalculado sobre el marino real, no sobre el
       rgb(0,26,58) suelto que traia antes (ni marino real ni marino viejo
       del diseno: no correspondia a nada del sistema). */
    box-shadow: 0 8px 20px rgba(0, 48, 105, .28);
}

.av-logo img,
.av-logo .no-logo {
    height: 34px;
    width: auto;
    display: block;
    margin: 0;
    mix-blend-mode: multiply;
}

/* Si no hay logo configurado, siteLogosHTML() imprime un <h3> con el nombre. */
.av-logo .no-logo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-lead);
    line-height: 34px;
    color: var(--av-marino);
    white-space: nowrap;
}

.av-nav {
    display: none;                 /* Se muestra desde 1024px */
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* nowrap: la cabecera nunca puede partirse en dos filas. Si el menu creciera,
   se aprieta el gap antes que envolver. */
.av-nav .av-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.av-nav .av-nav__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Estado activo con subrayado de 2px en cielo, no con un bloque gris.
   Guia de Marca, pagina 16: "Tabs con subrayado 2px Cielo".
   El subrayado es un pseudo-elemento y no un border para que no mueva el
   texto al aparecer. */
.av-nav .av-nav__list > li > a {
    position: relative;
    display: block;
    color: var(--av-sobre-marino);
    font-size: var(--av-t-sm);
    line-height: 1.2;
    padding: 22px 11px;
    white-space: nowrap;
    transition: color var(--av-transicion);
}

.av-nav .av-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--av-cielo);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--av-transicion);
}

.av-nav .av-nav__list > li > a:hover {
    color: var(--av-blanco);
}

.av-nav .av-nav__list > li > a:hover::after {
    transform: scaleX(1);
}

.av-nav .av-nav__list > li.current-menu-item > a,
.av-nav .av-nav__list > li.current_page_item > a {
    color: var(--av-blanco);
    font-weight: 600;
}

.av-nav .av-nav__list > li.current-menu-item > a::after,
.av-nav .av-nav__list > li.current_page_item > a::after {
    transform: scaleX(1);
}

.av-header__actions {
    display: flex;
    align-items: center;
    flex: none;
    gap: 10px;
}

/* Especificidad .av-v2 obligatoria: sin ella gana `.av-v2 a` y el telefono se
   pinta en el color de enlace (--av-enlace) sobre marino, que da 1.9:1 y es
   ilegible. Sobre fondo marino, el texto va en blanco. */
.av-v2 .av-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--av-sobre-blanco-28);
    border-radius: var(--av-r-boton);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-meta);
    padding: 9px 15px;
    white-space: nowrap;
    transition: background-color var(--av-transicion), border-color var(--av-transicion);
}

/* El diseno (00-chrome.html:39) solo cambia el fondo al pasar el raton, no
   el borde: se quita el aclarado de border-color que traia esta regla
   (rgba(255,255,255,.5), sin equivalente en el diseno ni en el vocabulario
   de tokens) para no inventar un estado que la referencia no pide. */
.av-v2 .av-tel:hover {
    background: var(--av-sobre-blanco-12);
    color: var(--av-blanco);
}

.av-tel svg {
    flex: none;
    opacity: .8;
}

/* Especificidad .av-v2 a proposito: si no, la gana `.av-v2 .av-btn`
   (que es display:inline-flex) y el CTA se cuela en movil. */
.av-v2 .av-header__cta {
    display: none;                 /* Se muestra desde 1024px */
}

/* 🔴 box-shadow con !important, y no es la opcion naranja del tema (esa la
 * neutraliza `.av-v2 .bottom_bar` mas abajo, y es otra regla). Esta viene de
 * `style.css` del PROPIO tema hijo, de antes del rediseno v2 (linea ~644):
 * `.box_shadow, .edit-link a, ..., button, input[type="submit"], .button,
 * footer#colophon .widget a.button { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
 * !important; }`. Selector de un solo elemento (`button`) pero CON
 * !important, asi que ninguna especificidad sin !important le gana, y
 * `getComputedStyle` seguia devolviendo esa sombra aunque aqui se pusiera
 * `box-shadow:none` a secas -- se comprobo con CSS.getMatchedStylesForNode
 * por CDP, no a ojo, porque a ojo el "none" del CSS parecia suficiente.
 * Se le gana con su misma arma: !important + mas especificidad. */
.av-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    /* padding y border-radius tambien de la opcion global de <button>
       (theme-options-1.min.css: padding 7px 16px, radius 4px, sin
       !important esta vez, pero sin resetear aqui tampoco ganaban porque
       no habia ninguna declaracion que les hiciera competencia). Sin esto
       el area de 44x44 no era exacta: el padding se sumaba dentro y
       recolocaba el icono. */
    padding: 0;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none !important;
    font-family: inherit;
    color: var(--av-blanco);
    cursor: pointer;
}

.av-burger__icon,
.av-burger__icon::before,
.av-burger__icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.av-burger__icon {
    position: relative;
}

.av-burger__icon::before,
.av-burger__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.av-burger__icon::before { top: -6px; }
.av-burger__icon::after  { top: 6px; }

.av-nav-movil {
    background: var(--av-marino-900);
    padding: 8px 20px 16px;
}

.av-nav-movil .av-nav-movil__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.av-nav-movil .av-nav-movil__list > li > a {
    display: block;
    color: var(--av-sobre-marino);
    font-size: var(--av-t-base);
    padding: 12px 4px;
    /* Panel movil sin referencia en el diseno (00-chrome.html solo dibuja el
       icono ☰, no el desplegable). Nearest token: --av-sobre-blanco-10
       (delta .02, no se aprecia en un separador de 1px). */
    border-bottom: 1px solid var(--av-sobre-blanco-10);
}
/* ==================================================================
 * 4. Buscador (marcado del plugin, aqui solo estilo)
 * ================================================================== */

.av-buscador {
    background: var(--av-fondo-suave);
    padding-bottom: 4px;
}

.av-buscador__caja {
    position: relative;
    margin-top: -28px;
    background: var(--av-blanco);
    border-radius: var(--av-r-bloque);
    box-shadow: var(--av-sombra-fuerte);
    padding: 16px;
}

.av-buscador__nota {
    margin: 12px 0 0;
    font-size: var(--av-t-meta);
    color: var(--av-texto-3);
}

/* Neutraliza el fondo azul que el tema padre y style.css ponen al formulario
   (style.css:233-239). Dentro de la tarjeta blanca sobraria. */
.av-buscador__caja #search_form.search_form_row,
.av-buscador__caja .search_form_row {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* El formulario del plugin viene con rejilla de Bootstrap 3 y utilidades
   propias (`limit_width px-5`). Las negativas de `.row` y el padding de `px-5`
   se salen de la tarjeta y provocaban scroll horizontal en movil.
   Se neutralizan SOLO dentro de la tarjeta: el formulario sigue siendo el
   del plugin en cualquier otra pagina. */
.av-buscador__caja .limit_width {
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.av-buscador__caja .row {
    margin-left: 0;
    margin-right: 0;
}

.av-buscador__caja [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

/* El plugin monta cada campo como .form-group con la etiqueta DESPUES del
   input y posicionada encima con position:absolute (patron "floating label"),
   dentro de pildoras con sombra. El diseno los quiere al reves: etiqueta
   fuera y arriba, caja rectangular con borde de 1px.
   Se invierte el orden visual con flex-direction:column-reverse, que respeta
   el orden del DOM (y por tanto la relacion label/input y el foco). */
/* La "pildora" no es el campo: es el .form-group, al que el plugin le pone
   fondo blanco, radius 41px y sombra. Se neutraliza para que la caja visible
   sea el input, como en el diseno. Con !important porque el plugin usa
   selectores con ID (#search_form_jd ...) que ganan por especificidad. */
.av-buscador__caja .form-group {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 14px;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.av-buscador__caja label,
.av-buscador__caja label.filled {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block;
    width: auto;
    font-family: var(--av-fuente-titulo) !important;
    font-weight: 700 !important;
    font-size: var(--av-t-eyebrow) !important;
    line-height: 1.2;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--av-texto-3) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: none !important;
    pointer-events: auto;
}

/* Selectores con .form-group (0,3,0) a proposito: style.css:431 —heredado del
   proveedor anterior— lleva `.search-details-jd .pickup-time { border:none
   !important }` (0,2,0). Con !important en ambos lados gana la especificidad,
   y por eso los dos selects de HORA salian sin caja. */
.av-buscador__caja .form-group input[type="text"],
.av-buscador__caja .form-group input[type="date"],
.av-buscador__caja .form-group input[type="number"],
.av-buscador__caja .form-group select,
.av-buscador__caja .form-group .select2-selection {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--av-borde) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 12px 14px !important;
    font-family: var(--av-fuente-texto);
    font-size: var(--av-t-base);
    font-weight: 600;
    line-height: 1.2;
    color: var(--av-marino) !important;
    background-color: var(--av-blanco) !important;
    transition: border-color var(--av-transicion), box-shadow var(--av-transicion);
}

.av-buscador__caja .form-group input:focus,
.av-buscador__caja .form-group select:focus {
    border-color: var(--av-cielo) !important;
    box-shadow: var(--av-focus) !important;
    outline: none;
}

/* Los iconos que el plugin mete dentro de cada campo se retiran: con la
   etiqueta fuera ya no aportan nada y desalinean el texto. */
.av-buscador__caja .form-group > i,
.av-buscador__caja .form-group > svg,
.av-buscador__caja .form-group .fa,
.av-buscador__caja .form-group .fas,
.av-buscador__caja .form-group .far {
    display: none !important;
}

/* --- Fecha + hora, leidas como un solo campo ------------------------
 * Siguen siendo dos campos independientes en el DOM y los dos se envian.
 * Solo se juntan visualmente: se quita el hueco entre las dos columnas y se
 * unen los bordes, dejando el del select como separador interno.
 * :has() para el hueco; donde no haya soporte quedan dos cajas separadas,
 * que es exactamente lo que habia antes. Degradado seguro. */

.av-buscador__caja [class*="col-"]:has(.pickup-date),
.av-buscador__caja [class*="col-"]:has(.return-date) {
    padding-right: 0 !important;
}

.av-buscador__caja [class*="col-"]:has(.pickup-time) {
    padding-left: 0 !important;
}

.av-buscador__caja .form-group input.pickup-date,
.av-buscador__caja .form-group input.return-date {
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.av-buscador__caja .form-group select.pickup-time {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* La etiqueta "Hora" se queda VISIBLE. Se probo a ocultarla para que el grupo
   leyera como un solo campo, pero al sacarla del flujo la caja del select
   perdia 19px de alto y quedaba desalineada con la de la fecha. Alinear a
   ojo con un padding fijo seria fragil. Dos etiquetas sobre una caja unida
   se entienden igual de bien y no dependen de ningun numero magico. */

/* --- Codigo promocional plegado ------------------------------------
 * La columna se oculta con [hidden] desde JS. Si el JS no corre, el campo se
 * ve como siempre: nunca queda inaccesible. */

/* !important porque el tema pinta todos los <button> con fondo y sombra. */
.av-buscador__caja .av-promo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    min-height: 0 !important;
    margin: 2px 0 10px !important;
    padding: 6px 2px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--av-fuente-titulo);
    /* 700, no 600: el diseño solo usa Sora en 700 y 800 (theme-v2-tokens.css,
       "maximo dos pesos por pieza"). El 600 no existe en el repertorio de marca. */
    font-weight: 700;
    font-size: var(--av-t-meta);
    color: var(--av-enlace) !important;
    cursor: pointer;
}

.av-promo:hover {
    color: var(--av-marino);
}

.av-promo__mas {
    font-size: var(--av-t-base);
    line-height: 1;
}

.av-promo[aria-expanded="true"] .av-promo__mas {
    transform: rotate(45deg);
}

/* El select nativo pierde la flecha del sistema al quitarle el fondo:
   se repone como imagen de fondo, en el gris de texto terciario. */
.av-buscador__caja .form-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C8CAB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}

/* La columna (`.search-submit-js`) YA NO se fuerza a 100% aqui: el diseno
   (01-home.html) pone el boton en linea, al final de la fila de campos, no
   en su propia fila a todo el ancho. Solo el control (input/button) llena SU
   columna; el ancho de la columna lo fijan los breakpoints de abajo, a mano,
   porque el plugin no le da clase `col-sm-*` a esta columna en concreto (solo
   `col-xs-12 col-md-4 col-lg-3`) y sin ese porcentaje intermedio se queda a
   ancho completo entre 768 y 991px. */
.av-buscador__caja .search-submit-js {
    box-sizing: border-box;
}

.av-buscador__caja button[type="submit"],
.av-buscador__caja input[type="submit"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    /* 🔴 POR --av-cta-*, COMO LOS OTROS 88 BOTONES (20-ago-2026).
     *
     * Estuvo en cian con texto marino, y estaba razonado: era el unico CTA cian
     * de la pagina y destacaba sobre los botones azules. Pero al llevar el
     * buscador a los heroes quedaba un boton de otro color justo al lado del
     * «Reservar» de la cabecera, que es marino. Decision del cliente: que sea
     * como el resto.
     *
     * Al pasar por el token, si algun dia se cambia el color de los botones de
     * la web, este cambia con ellos y no se queda descolgado. */
    background: var(--av-cta-bg) !important;
    border: 0 !important;
    /* 9px, como todos los botones de la web. Se decide en --av-r-boton. */
    border-radius: var(--av-r-boton) !important;
    color: var(--av-cta-texto) !important;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    cursor: pointer;
    transition: background-color var(--av-transicion);

}

.av-buscador__caja button[type="submit"]:hover,
.av-buscador__caja input[type="submit"]:hover {
    background: var(--av-cielo-hover) !important;
}
/* ==================================================================
 * 6. Flota -- lo compartido con el catalogo (.av-chips, .av-coche)
 * ------------------------------------------------------------------
 * .av-coche y .av-chip los pinta tambien template-parts/coches-v2/rejilla.php
 * y filtros.php: dos paginas, va a base. La rejilla propia de la home
 * (.av-grid--flota) y los estados vacio/mas se quedan en theme-v2-home.css:
 * ahi no los usa nadie mas.
 * ================================================================== */

/* LA TIRA DE PASTILLAS. En movil se DESPLAZA, no se parte en cinco filas.
 *
 * Medido a 390px antes de unificar: los 13 filtros del catalogo ocupaban 200px de
 * alto repartidos en CINCO filas, mientras los del blog iban en una sola con
 * scroll. El mismo componente con dos comportamientos.
 *
 * A partir de 768px vuelve a `wrap`: ahi caben —13 pastillas suman 1.142px en una
 * caja de 1.192— y un scroll horizontal en un escritorio ancho es raro. */
.av-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.av-chips::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .av-chips {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* LA PASTILLA, UNA SOLA PARA TODA LA WEB.
 *
 * Habia CUATRO. Medidas a 390px antes de unificar:
 *
 *   Home       12,5px  peso 700  alto 39  padding 9/15
 *   Catalogo   12,5px  peso 700  alto 44  padding 9/12
 *   Contacto   12,5px  peso 800  alto 39  padding 9/15
 *   Blog       13px    peso 700  alto 44  padding 11/16   <- y ademas otra clase
 *
 * Gana la del blog, y no por gusto: 13px es --av-t-meta, un peldaño real de la
 * escala, mientras que 12,5 no sale de ningun token; y 44px es el objetivo tactil
 * comodo, frente a los 39 de home y contacto.
 *
 * Las otras tres se declaraban encima en sus hojas de pagina. Se han quitado de
 * coches.css y reserva.css: si vuelve a aparecer una pastilla distinta, es que
 * alguien ha vuelto a redeclararla fuera de aqui. */
.av-v2 .av-chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    white-space: nowrap;
    line-height: 1.2;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-meta);
    border-radius: var(--av-r-pill);
    padding: 11px 16px;
    min-height: 44px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    color: var(--av-texto-2);
    cursor: pointer;
    /* !important, y viene de style.css del propio tema hijo, no de una
       opcion del proveedor: ver el comentario de .av-burger, mismo origen
       (linea ~644, selector `button` con !important). Sin el !important
       aqui tambien, se colaba el mismo halo oscuro en cada chip de filtro. */
    box-shadow: none !important;
    transition: background-color var(--av-transicion), color var(--av-transicion), border-color var(--av-transicion);
}

.av-v2 .av-chip:hover {
    border-color: var(--av-cielo);
    color: var(--av-marino);
}

/* Pildora MACIZA con texto BLANCO, con el borde del mismo color que el fondo:
   es lo que hace el diseno, y contra las pildoras huecas del resto se distingue
   de un vistazo.
   El fondo es el cian oscuro (--av-enlace) y no el cian de marca: el blanco
   sobre --av-cielo da 2.78:1 y no pasa AA ni como texto grande —este es de 12.5px,
   asi que le exigen 4.5:1—. Sobre --av-enlace da 5.0:1 y sigue leyendose como
   cian. Si algun dia se quiere el cian claro exacto del prototipo, el texto
   tiene que volver a marino.
   El estado ademas viaja en aria-pressed, no solo en el color. */
/* El estado «esta seleccionada» llegaba con cuatro nombres segun la pantalla:
   --activo, is-activa, aria-pressed, --on, y el --aqui del blog. Se agrupan para
   que el aspecto sea uno solo, sin obligar a renombrar el marcado de cada sitio. */
.av-v2 .av-chip[aria-pressed="true"],
.av-v2 .av-chip[aria-current],
.av-v2 .av-chip.is-activa,
.av-v2 .av-chip.av-chip--on,
.av-v2 .av-chip.av-chip--aqui {
    background: var(--av-enlace);
    border-color: var(--av-enlace);
    color: var(--av-blanco);
    font-weight: 800;
}

.av-grid {
    display: grid;
    gap: var(--av-e-7);
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * 🔴 LOS MODIFICADORES GENERICOS, AQUI Y NO EN theme-v2-home.css.
 *
 * Se declaraban en la hoja de la home —que solo carga en la home— y los usaban
 * ademas `oficinas-v2/servicios.php` y `ayuda-v2/enlaces.php`. En esas dos
 * paginas la clase estaba en el marcado y NO EXISTIA en el CSS: `.av-grid` daba
 * `display:grid` sin columnas, asi que las tres tarjetas de «En cualquiera de
 * nuestras oficinas» y las tres de «Ver la flota y los precios» se apilaban en
 * UNA columna de 1192px. Medido, no supuesto — y sin dar ningun error, que es
 * como fallan siempre las cosas en este proyecto.
 *
 * Un modificador que usan tres paginas es de la base por definicion.
 */
.av-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--av-e-8);
}

.av-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    /* 20px y no los 16 de `.av-grid`: medido en el diseño renderizado, sus
       bloques de tres columnas van a 20 («Por que elegir», «En cualquiera de
       nuestras oficinas»). Se pone aqui y no en cada pagina porque son cuatro
       las que usan este modificador. */
    gap: var(--av-e-8);
}
.av-coche {
    display: flex;
    flex-direction: column;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    overflow: hidden;
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}

.av-coche:hover {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-3px);
}

/* Fondo liso con un degradado muy suave, no la trama de rayas del prototipo.
   Alli la trama marcaba "aqui ira una FOTO REAL"; con las fotos puestas —PNG
   de vehiculo recortado sobre fondo claro— las rayas se ven a traves y
   ensucian. El degradado da algo de profundidad y deja el coche limpio.
   Si algun vehiculo no tuviera foto, el hueco se ve como una superficie
   intencionada, no rota. */
.av-coche__foto {
    height: 140px;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--av-tarjeta-foto-a) 0%, var(--av-tarjeta-foto-b) 100%);
}

.av-coche__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--av-transicion);
}

.av-coche:hover .av-coche__foto img {
    transform: scale(1.04);
}

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

.av-coche__nombre {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-md);
    line-height: 1.2;
    margin: 0;
    color: var(--av-marino);
}

.av-coche__specs {
    margin: 0;
    font-size: var(--av-t-cap);
    color: var(--av-texto-3);
}

/* Los numeros de precio SIEMPRE en Sora 800. */
.av-coche__precio {
    margin: auto 0 4px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.1;
    color: var(--av-marino);
}

/*
 * 🔴 EL <b> DEL PRECIO SE COMIA EL PESO 800 QUE DECLARA LA REGLA DE ARRIBA.
 *
 * `.av-coche__precio` dice «los numeros de precio SIEMPRE en Sora 800», pero el
 * numero va dentro de un `<b>` y el navegador le da `font-weight: bold` (700) por
 * su cuenta, que pisa el 800 heredado. Resultado: la home y «Nuestros Coches»
 * pintaban 700 donde la hoja decia 800, y nadie lo veia porque son 100 de peso.
 *
 * Salio al comparar esta tarjeta con la del paso 2 (EP-18 F6), que si daba 800.
 * Se corrige aqui, en la base, para que las tres paginas digan lo mismo.
 */
.av-coche__precio b {
    font-weight: inherit;
}

.av-coche__precio small {
    margin-left: 2px;
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: var(--av-t-cap);
    color: var(--av-texto-3);
}

/* El nombre reserva dos lineas porque los del ERP tienen longitudes muy
   distintas ("Nissan Juke" frente a "KIA Stonic Fiat Tipo o simil") y sin
   reserva el bloque de texto baila entre tarjetas.
   Las specs NO reservan: tras deduplicarlas caben todas en una linea, y
   reservarles dos abria un hueco muerto bajo cada coche. El precio y el boton
   se alinean solos con el margin-top:auto del precio. */
.av-coche__nombre {
    min-height: calc(2 * 1.2em);
}

.av-v2 .av-coche .av-btn--oscuro {
    padding-left: 10px;
    padding-right: 10px;
    /* var(--av-t-cap): coincide exacto con el 12.5px del diseno
       (01-home.html:104) para este boton; antes era un 13px suelto. */
    font-size: var(--av-t-cap);
}
/* ==================================================================
 * 10. Pie
 * ================================================================== */

/* SIN margen superior. Lo llevaba de 56px y, como la seccion anterior es la
   banda de arena a sangre y el pie es marino a sangre, esos 56px se veian como
   una franja BLANCA de lado a lado entre dos colores: parecia un fallo, no un
   respiro. El aire ya lo pone el padding del propio pie.
   (En el diseno el pie va sobre blanco y ahi el margen si tenia sentido.) */
.av-footer {
    background: var(--av-marino);
    color: var(--av-sobre-marino);
}

.av-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
    padding-top: 38px;
}

.av-footer__tit {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-eyebrow);
    letter-spacing: var(--av-ls-eyebrow);
    text-transform: uppercase;
    color: var(--av-eyebrow);
    margin: 0 0 12px;
}

.av-footer .av-footer__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.av-v2 .av-footer__lista a {
    color: var(--av-sobre-marino);
    font-size: var(--av-t-nav);
}

.av-v2 .av-footer__lista a:hover {
    color: var(--av-blanco);
}

.av-v2 .av-footer__tel {
    display: inline-block;
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-md);
    min-height: 44px;
    line-height: 44px;
}

.av-footer__horario {
    margin: 0 0 10px;
    font-size: var(--av-t-meta);
    line-height: 1.6;
}

/* La direccion de la sede. En el pie es donde la busca todo el mundo, y ademas
   es la senal NAP que cuenta para el SEO local, que es donde este sitio gana. */
.av-footer__sede {
    margin: 0 0 14px;
    max-width: 30ch;
    font-size: var(--av-t-cap);
    line-height: 1.6;
    color: var(--av-eyebrow);
}

/* Idiomas como ENLACES, no como texto suelto: pintados como "ES · DE · EN" sin
   enlace parecian un selector que no llevaba a ningun sitio. */
.av-footer__idiomas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.av-v2 .av-footer__idioma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 26px;
    padding: 4px 7px;
    border-radius: 5px;
    font-family: var(--av-fuente-titulo);
    font-weight: 600;
    font-size: var(--av-t-mini);
    letter-spacing: .06em;
    color: var(--av-sobre-marino);
    transition: background-color var(--av-transicion), color var(--av-transicion);
}

.av-v2 a.av-footer__idioma:hover {
    background: var(--av-sobre-blanco-12);
    color: var(--av-blanco);
}

/* Sin token exacto para .14 (10/12/28/40): mismo redondeo que ya aplico
   nosotros.css para el mismo caso (delta .02). */
.av-footer__idioma--actual {
    background: var(--av-sobre-blanco-12);
    color: var(--av-blanco);
}

.av-footer__legal {
    margin-top: 24px;
    padding: 20px 0 28px;
    /* Exacto: el diseno (00-chrome.html:102) usa este mismo .12 en el borde
       superior del bloque legal del pie. */
    border-top: 1px solid var(--av-sobre-blanco-12);
    font-size: var(--av-t-xs);
    line-height: 1.6;
    color: var(--av-sobre-marino);
}

.av-footer__legal p {
    margin: 0 0 10px;
}

.av-footer__legal p:last-child {
    margin-bottom: 0;
}

/* Los enlaces de los avisos legales, legibles sobre marino: --av-enlace es la
   variante para fondo BLANCO y aqui daba 1.9:1. */
.av-v2 .av-footer__legal a {
    color: var(--av-sobre-marino);
    text-decoration: underline;
}

.av-v2 .av-footer__legal a:hover {
    color: var(--av-blanco);
}

/* La tira de logos institucionales (Gobierno, IDAE, UE, Illes Balears) es un
   JPG con FONDO BLANCO y tinta oscura: sobre el pie marino se veia como un
   recorte pegado. Se le da su propia superficie blanca con aire alrededor,
   que ademas es como se presenta esta cartelería en cualquier otro sitio. */
.av-footer__legal img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 10px 14px;
    box-sizing: border-box;
    background: var(--av-blanco);
    border-radius: var(--av-r-boton);
}

/* --- Barra inferior del tema padre ---------------------------------
 * La pinta template-parts/content-bottom_bar.php del tema PADRE y trae los
 * avisos legales y el copyright, asi que no se puede quitar. Pero venia en
 * NARANJA (opcion global del tema padre), que corta el pie marino por la mitad y ademas no pasa
 * ningun contraste:
 *
 *     blanco sobre naranja ......... 2.9:1
 *     enlaces (--av-enlace) ........ 1.7:1
 *
 * El naranja es una opcion global del tema: cambiarla afectaria a las 7 webs
 * de la red y a todas sus paginas. Se reescribe SOLO dentro de .av-v2, que es
 * la home v2 y nada mas.
 */

.av-v2 .bottom_bar {
    background: var(--av-marino-950) !important;
    color: var(--av-sobre-marino) !important;
    border-top: 1px solid var(--av-sobre-blanco-10);
    font-size: var(--av-t-cap);
}

.av-v2 .bottom_bar_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    box-sizing: border-box;
    max-width: var(--av-ancho);
    margin: 0 auto;
    padding: 14px 20px;
}

.av-v2 .bottom_bar .site-rights {
    color: var(--av-sobre-marino);
}

.av-v2 .bottom-bar-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--av-e-7b);
}

.av-v2 .bottom-bar-data a {
    color: var(--av-blanco);
    text-decoration: none;
}

.av-v2 .bottom-bar-data a:hover {
    color: var(--av-cielo);
    text-decoration: underline;
}

/* El separador "-" que mete el tema entre enlaces sobra habiendo `gap`. */
.av-v2 .bottom-bar-data label {
    display: none;
}

/* El sello DMCA es una imagen de 121x20 con fondo propio: se deja como esta,
   solo se alinea. */
.av-v2 .bottom-bar-data img {
    display: block;
}
/* ==================================================================
 * FAQ -- lista compartida con oficinas-v2 (template-parts/oficinas-v2/faqs.php
 * usa exactamente el mismo marcado: .av-faqs__in, .av-faq, .av-faq__p/__r)
 * ================================================================== */

/* --- FAQs: <details> nativos --------------------------------------- */

/* 900px como el diseno, y con `.av-v2` delante para ganarle a `.av-v2 .av-wrap`,
   que lleva max-width 1240 y tiene la misma especificidad de clase. Sin eso las
   respuestas ocupaban 1200px: mas de 180 caracteres por linea, cuando la medida
   comoda son 60-75. */
.av-v2 .av-faqs__in {
    max-width: 900px;
}

.av-faqs__lista {
    display: flex;
    flex-direction: column;
}

/* LISTA CON SEPARADORES Y TODAS LAS RESPUESTAS A LA VISTA, como el diseno.
   Antes era un acordeon de <details> con tarjetas, que dejaba tres de las
   cuatro respuestas escondidas. Con cuatro preguntas de dos lineas, plegarlas
   solo anade un clic: el acordeon compensa a partir de quince, no de cuatro.
   Y asi el contenido esta delante sin depender de ninguna interaccion. */
.av-faq {
    border-bottom: 1px solid var(--av-borde);
    padding: var(--av-e-7b) 0;
}

.av-faq:last-child {
    border-bottom: 0;
}

.av-faq__p {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    line-height: 1.35;
    color: var(--av-marino);
}

.av-faq__r {
    margin: 0;
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-texto-2);
}
/* ==================================================================
 * 11. Barra sticky (solo movil)
 * ================================================================== */

.av-sticky {
    position: sticky;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--av-blanco);
    border-top: 1px solid var(--av-borde);
    /* Exacto: --av-sombra-sticky ya es este mismo valor (0 -6px 20px,
       recalculado sobre el marino real), estaba literal aqui en vez de
       usar el token dedicado. */
    box-shadow: var(--av-sombra-sticky);
    /* Margen derecho extra: el widget de chat (wpbot-pro) flota abajo a la
       derecha y tapaba el CTA. No se le puede pedir que se aparte, asi que se
       aparta el boton. */
    padding: 12px 122px 12px 14px;
}

.av-sticky .av-btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: var(--av-t-nav);
}

.av-sticky__lab {
    display: block;
    font-size: var(--av-t-mini);
    line-height: 1.3;
    color: var(--av-texto-3);
}

.av-sticky__precio {
    display: block;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-base);
    color: var(--av-marino);
}

.av-sticky__precio small {
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: var(--av-t-micro);
    color: var(--av-texto-3);
}
/* ==================================================================
 * 12. Tablet -- 768px
 * ================================================================== */

@media (min-width: 768px) {

    .av-v2 .av-wrap {
        padding-left: var(--av-gutter);
        padding-right: var(--av-gutter);
    }

    .av-topbar {
        display: block;
    }

    .av-seccion {
        padding-top: 60px;
    }

    .av-seccion__cab {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 22px;
    }

    .av-seccion__cab--simple {
        display: block;
    }

    .av-v2 .av-h2 {
        font-size: var(--av-t-h2);
        line-height: 1.15;
    }

    .av-buscador__caja {
        margin-top: -42px;
        padding: var(--av-e-7b);
    }

    /* Misma anchura que "Edad" (col-sm-6) en este tramo: sin esto el submit
       se queda a `col-xs-12` (100%, ver el comentario junto a .search-submit-js
       mas arriba) y cae en su propia fila a todo el ancho. */
    .av-buscador__caja .search-submit-js {
        width: 50%;
    }

    /* La barra sticky es solo para movil. */
    .av-sticky {
        display: none;
    }
}
/* ==================================================================
 * 13. Escritorio -- 1024px
 * ================================================================== */

/* Solo desde 1200px: entre 768 y 1199 la nav de ocho entradas, el telefono y
   el CTA ya llenan la fila, y la etiqueta partia en dos lineas. */
@media (min-width: 1200px) {
    .av-header__desde {
        display: block;
    }
}

@media (min-width: 1024px) {

    .av-nav {
        display: flex;
    }

    .av-v2 .av-header__cta {
        display: inline-flex;
    }

    .av-burger,
    .av-nav-movil {
        display: none !important;
    }

    /* Ancho igual al de "Edad" (col-md-4) entre 1024 y 1199: por debajo de
       1200 el plugin lo baja a 33% antes de llegar a la anchura final de
       abajo. */
    .av-buscador__caja .search-submit-js {
        width: 33.3333%;
    }
}

/* Este bloque va DESPUES del de 1024px a proposito: los dos usan min-width
   (no rangos), asi que a 1440px se aplicarian los dos y gana el que este
   mas abajo en el archivo. Si este 25% se quedara arriba, el 33% de al lado
   lo pisaria en todo el escritorio ancho. */
@media (min-width: 1200px) {
    /* Ancho igual al de "Edad" (col-lg-3) desde aqui: el diseño
       (01-home.html) pone el submit en la misma fila que los demas campos,
       no debajo a todo el ancho. */
    .av-buscador__caja .search-submit-js {
        width: 25%;
    }
}
/* ==================================================================
 * 14. Movimiento reducido
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

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

    .av-coche:hover,
    .av-tarjeta:hover,
    .av-clickgo__item:hover,
    .av-beneficio:hover,
    .av-oficina:hover,
    .av-oficina:focus-within {
        transform: none;
    }

    .av-oficina:hover .av-oficina__foto,
    .av-oficina:focus-within .av-oficina__foto {
        transform: none;
    }
}
/* ==================================================================
 * 99. CAMPOS DE FORMULARIO · lo minimo que cumple, en toda la web
 * ==================================================================
 *
 * Auditado con local/campos.mjs sobre las nueve paginas v2 y los cuatro pasos del
 * flujo, a 390 px. Salieron 26 campos con el zoom de iOS, 6 desbordando su
 * contenedor y 2 sin ninguna señal de foco. No eran de una pantalla: eran los
 * mismos siete campos del motor repetidos en la home, el catalogo y la ficha de
 * oficina.
 *
 * 🔴 ESTA ES LA PRIMERA REGLA DE ESTA HOJA QUE ALCANZA AL MARCADO DEL MOTOR, Y ES
 * A PROPOSITO.
 *
 * La hoja se cargaba en el flujo justificando que «los 228 selectores llevan TODOS
 * el prefijo .av-, y el motor no usa ni una clase av-, no puede tocarlo». Aqui se
 * rompe esa invariante a sabiendas: los campos que se ven mal SON los del motor, y
 * arreglarlos uno a uno en cuatro hojas distintas era garantizar que se separaran
 * otra vez. Se acota a `.av-v2`, asi que fuera de las paginas v2 no aplica nada.
 */

/*
 * 🔴 EL ZOOM DE iOS. 16 px NO ES UNA PREFERENCIA DE TAMAÑO: ES EL UMBRAL.
 *
 * Safari en iPhone amplia la pagina al enfocar un campo cuya letra mida menos de
 * 16 px, y al ampliarla la descuadra: la cabecera se sale, el resto del formulario
 * queda fuera de pantalla y hay que hacer zoom hacia atras a mano. No hay ajuste
 * que lo desactive sin bloquear tambien el zoom del usuario, que no se toca.
 *
 * El 63,7 % del trafico de AutosValls es movil. De los siete campos del buscador,
 * los siete estaban por debajo: 15 px en la home y la ficha, 13 en el catalogo.
 *
 * ⚠️ Solo por debajo de 768: en escritorio no existe el problema y subir la letra
 * ahi si descuadraria cajas que estan medidas.
 * ⚠️ Y VA CON `!important`, QUE AQUI SI PROCEDE. La primera version sin el arreglo
 * 7 campos de 26: los otros 19 llevan un tamaño declarado con dos clases —el 13 px
 * que el catalogo le puso a las oficinas para que cupieran, el 14 del paso 1— y
 * ganaban por especificidad. Esto no es una preferencia de tamaño que alguien deba
 * poder ajustar hacia abajo: es el umbral por debajo del cual Safari rompe la
 * pagina. Si algo tiene que perder, es el tamaño local.
 */
@media (max-width: 767px) {
    .av-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    .av-v2 select,
    .av-v2 textarea {
        font-size: var(--av-t-md) !important;
    }
}

/*
 * EL FOCO, VISIBLE EN TODOS LOS CAMPOS.
 *
 * El tema del proveedor trae `a, a:focus, button, img, picture, input, select, div
 * { outline: 0 }` en su hoja base: apaga el anillo del navegador en TODA la web y
 * no pone nada a cambio. Quedaban dos campos sin ninguna señal —el orden del
 * catalogo y el buscador del blog—, y el resto dependia de que su hoja lo
 * repusiera.
 *
 * ⚠️ `:focus` ademas de `:focus-visible`. Solo con `:focus-visible` un campo
 * enfocado con el dedo o con el raton no enseña nada, y en movil —que es el 63,7 %—
 * eso es justo el caso normal. En un CAMPO se quiere ver siempre; el matiz de
 * `:focus-visible` es para botones y enlaces.
 */
.av-v2 input:focus,
.av-v2 select:focus,
.av-v2 textarea:focus,
.av-v2 input:focus-visible,
.av-v2 select:focus-visible,
.av-v2 textarea:focus-visible {
    outline: none;
    border-color: var(--av-cielo);
    box-shadow: var(--av-focus);
}

/*
 * EL DESBORDE DE 4 px DE LAS DOS FECHAS, en la home, el catalogo y la ficha.
 *
 * Medido: el campo ocupa 310 px —exactamente el ancho de su `.form-group`— y ademas
 * lleva `margin-left: 4px` de la clase `ml-1` del proveedor. Con `border-box` el
 * margen se suma POR FUERA, asi que el campo acaba 4 px a la derecha de su
 * contenedor. En un formulario de 390 px se ve como una fila descuadrada.
 *
 * ⚠️ El primer intento acotaba la regla a `.av-buscador__caja` y no aplico: `ml-1`
 * viene con `!important` desde la hoja del proveedor y hay que ganarle ahi mismo.
 * Se ataca la clase, no el campo, porque `ml-1` es la causa y aparece en mas sitios.
 */
.av-v2 input.ml-1,
.av-v2 select.ml-1,
.av-v2 textarea.ml-1 {
    margin-left: 0 !important;
    box-sizing: border-box;
}

/*
 * 🔴 Y LAS FECHAS NO ESTABAN ALINEADAS CON EL RESTO DE CAMPOS.
 *
 * Esto no lo caza ninguna medida de desborde: el campo cabe en su contenedor, no se
 * sale de la pagina y el texto no se corta. Simplemente es ~16 px MAS ANCHO que los
 * desplegables de al lado y empieza y acaba antes, asi que la columna de campos se
 * ve torcida. Se vio en la captura del buscador de la home a 390 px, mirando —
 * despues de que el informe dijera «limpio».
 *
 * La causa: los desplegables van al 100 % del contenedor y las dos fechas llevan un
 * ancho propio calculado por el datepicker del proveedor.
 *
 * 🔴 Y AQUI SE PARA, CON LA CAUSA IDENTIFICADA Y SIN ARREGLAR. Queda anotado.
 *
 * Se probaron dos reglas de ancho sobre el campo y ninguna movio un pixel, porque
 * el campo NO era el problema: medido, las dos fechas y los desplegables ocupan ya
 * el 100 % de su contenedor. Lo que difiere es el contenedor — el `.form-group` de
 * la fecha mide 310 px y el del desplegable 302, dentro de columnas identicas de
 * 318. Ese desajuste de 8 px viene de la rejilla del proveedor, no de la hoja.
 *
 * Se quitaron las dos reglas en vez de dejarlas puestas «por si acaso»: CSS que no
 * hace nada es peor que ninguno, porque el siguiente que lo lea creera que el caso
 * esta cubierto.
 *
 * Afecta al buscador de la home y al de la ficha de oficina (8 px) y a cinco campos
 * del paso 4 (19 px). Lo detecta `local/campos.mjs` como DESALINEADO, asi que no se
 * va a perder.
 */

/* ==================================================================
 * EL BUSCADOR · .av-buscar
 * ------------------------------------------------------------------
 * 🔴 MUDADO DESDE theme-v2-reserva.css el 20-ago-2026.
 *
 * Este formulario era exclusivo de la pagina 557 y por eso su CSS vivia en la
 * hoja de la reserva. Desde que se amplio el gate de
 * Extensions/.../template.Step1ItemsSearchForm.php lo pintan tambien la home,
 * el catalogo, /oficinas/ y las fichas de oficina: cinco pantallas mas. Con el
 * CSS en la hoja de la reserva, en esas cinco salia SIN ESTILO —diez filas a
 * todo lo ancho— y sin dar ningun error.
 *
 * Un componente que usan seis pantallas es de la base, por definicion.
 *
 * 🔴 Y EL PREFIJO PASA DE `.av-v2-reserva` A `.av-v2`.
 *
 * Al mudar las reglas se vinieron con el prefijo de la pagina de reserva, asi
 * que en la home NO aplicaban: las fechas se quedaban en 17px de alto con el
 * padding del navegador mientras las horas median 34. Misma especificidad —dos
 * clases— pero valido en las seis pantallas que pintan el buscador.
 *
 * ================================================================== */

.av-v2 .av-buscar {
    margin: 0;
    /* 620px SOLO en el paso 1, donde el buscador vive en una columna estrecha
       junto al resumen. En los heroes ocupa el ancho del contenedor: sin esta
       distincion la home se quedaba con una barra de 620px en un hueco de
       1156. */
    max-width: none;
}

.av-v2 .av-buscar__caja {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 22px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    box-sizing: border-box;
    /* --av-sombra-1 es .07 de alpha; aqui la hoja pedia .06. Delta minimo, ver INCIDENCIAS. */
    box-shadow: var(--av-sombra-1);
}

.av-v2 .av-buscar__par {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
}

.av-v2 .av-buscar__error {
    margin: 0;
    font-size: var(--av-t-cap);
    line-height: 1.45;
    /* --av-coral da 3,7:1 sobre blanco y esto es texto pequeño. --av-coral-900 llega a 5,4:1. */
    color: var(--av-coral-900);
}

.av-v2 .av-buscar__linea {
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-v2 .av-buscar__casilla {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: var(--av-t-nav);
    font-weight: 600;
    line-height: 1.4;
    color: var(--av-texto-2);
    cursor: pointer;
}

.av-v2 .av-buscar__casilla-check {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--av-marino);
    cursor: pointer;
}

.av-v2 .av-buscar__casilla-check:focus-visible {
    outline: none;
    box-shadow: var(--av-focus);
    /* --av-r-mini y no --av-r-boton: el mas pequeño de la escala general es 9px,
       mas del doble en un checkbox de 16px, y el anillo de foco se comeria el
       control. Por eso existe un escalon aparte para controles diminutos. */
    border-radius: var(--av-r-mini);
}

.av-v2 .av-buscar__info {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--av-blanco);
    border: 1.5px solid var(--av-enlace);
    border-radius: 50%;
    color: var(--av-enlace);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-micro);
    line-height: 1;
    cursor: pointer;
    /*
     * 🔴 `!important`, Y NO HAY OTRA FORMA.
     *
     * El tema del proveedor trae
     *   `.box_shadow, .edit-link a, button, input[type="submit"], … {
     *        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }`
     * En un circulo de 24 px eso dibuja un rectangulo gris flotante que parece un
     * anillo de foco mal puesto. Un `box-shadow: none` normal NO gana: hay que
     * repetirle el `!important`.
     *
     * ⚠️ Y casi se va por el camino equivocado: parecia foco. Se midio —
     * `CSS.getMatchedStylesForNode` — y el foco estaba donde debia (`driver_age`);
     * lo que sobraba era la sombra heredada. Preguntar al navegador que regla gana
     * cuesta un minuto y ahorra media hora de retocar la regla que no era.
     *
     * Solo se veia en la captura; ninguna medida numerica la delataba.
     */
    box-shadow: none !important;
    transition: background var(--av-transicion), color var(--av-transicion);
}

.av-v2 .av-buscar__info:hover,
.av-v2 .av-buscar__info[aria-expanded="true"] {
    background: var(--av-enlace);
    color: var(--av-blanco);
}

.av-v2 .av-buscar__info:focus-visible {
    outline: none;
    box-shadow: var(--av-focus);
}

.av-v2 .av-buscar__ayuda {
    margin: -4px 0 0;
    padding: 10px 12px;
    background: var(--av-fondo-cielo);
    /* Sin --av-r- exacto para 8px: el mas cercano es --av-r-boton (9px). Ver INCIDENCIAS. */
    border-radius: var(--av-r-boton);
    font-size: var(--av-t-cap);
    line-height: 1.5;
    color: var(--av-texto-2);
}

.av-v2 .av-buscar__ayuda[hidden],
.av-v2 .av-buscar__devolucion[hidden],
.av-v2 .av-buscar__edad[hidden],
.av-v2 .av-buscar__promo-campo[hidden],
.av-v2 .av-buscar__error[hidden] {
    display: none;
}

.av-v2 .av-buscar__promo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.av-v2 .av-buscar__promo-abrir {
    margin: 0;
    padding: 4px 0;
    background: none;
    border: 0;
    color: var(--av-enlace);
    font-family: var(--av-fuente-texto);
    font-weight: 600;
    font-size: var(--av-t-meta);
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none !important; /* misma sombra `!important` del proveedor; ver av-buscar__info */
}

.av-v2 .av-buscar__promo-abrir:hover {
    color: var(--av-marino);
}

.av-v2 .av-buscar__promo-abrir:focus-visible {
    outline: none;
    box-shadow: var(--av-focus);
    border-radius: var(--av-r-boton);
}

.av-v2 .av-buscar__promo-campo {
    width: 100%;
}

.av-v2 .av-buscar__accion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 3px;
}

.av-v2 .av-buscar__cta {
    width: 100%;
    min-height: 48px;
    /* 9px, como todos los botones de la web. El radio de los botones se decide
       en --av-r-boton y en ningun otro sitio. */
    border-radius: var(--av-r-boton);
    font-size: var(--av-t-base);
}

.av-v2 .av-buscar__cancelar {
    text-align: center;
}



/* ==================================================================
 * EL CAMPO DE FORMULARIO · .av-campo
 * ------------------------------------------------------------------
 * 🔴 MUDADO DESDE theme-v2-reserva.css el 20-ago-2026, con el buscador.
 *
 * Rotulo + control, el ladrillo del que estan hechos los seis campos del
 * buscador. Vivia entero en la hoja de la reserva y por eso, al pintarse el
 * buscador en la home, los `<input>` de fecha se quedaban en 17px de alto con
 * el padding del navegador —1px 2px— mientras los `<select>` de hora median 34.
 * Se veia la fecha flotando 24px por encima de su hora.
 *
 * ⚠️ El invariante I2 no lo cazo: comprueba reglas que EMPIEZAN por `.av-campo`
 * y estas empezaban por `.av-v2-reserva`. Una regla acotada a una pagina puede
 * esconder un componente compartido.
 * ================================================================== */

.av-v2 .av-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0; /* sin esto un <select> con texto largo empuja la rejilla */
    margin: 0;
}

.av-v2 .av-campo__envoltorio {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

.av-v2 .av-campo__rotulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-eyebrow);
    letter-spacing: .12em;
    text-transform: uppercase;
    /*
     * El diseño pone estos rotulos en --av-texto-etiqueta: 2,5:1 sobre blanco, y
     * ademas a 10,5 px. Se usa --av-texto-3, que da 5,5:1.
     */
    color: var(--av-texto-3);
}

.av-v2 .av-campo__control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 12px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    font-family: var(--av-fuente-texto);
    font-size: var(--av-t-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--av-marino);
    box-shadow: none;
    transition: border-color var(--av-transicion), box-shadow var(--av-transicion);
}

.av-v2 select.av-campo__control {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003069' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px 16px;
}

.av-v2 input.av-campo__control[readonly] {
    background: var(--av-blanco);
    cursor: pointer;
}

.av-v2 .av-campo__control:focus,
.av-v2 .av-campo__control:focus-visible {
    outline: none;
    border-color: var(--av-cielo);
    box-shadow: var(--av-focus);
}

.av-v2 .av-campo__control::placeholder {
    color: var(--av-texto-3);
    font-weight: 500;
    opacity: 1;
}

.av-v2 .av-campo__control[aria-invalid="true"] {
    border-color: var(--av-coral);
}

/* La columna estrecha del paso 1, y solo del paso 1. */
.av-v2-reserva .av-buscar {
    max-width: 620px;
}

/* ------------------------------------------------------------------
 * El buscador EN HORIZONTAL, para los heroes.
 *
 * En el paso 1 el formulario vive en una columna de 620px y va apilado, que es
 * lo correcto alli. En un hero de 1156px apilado son NUEVE filas y ocupa media
 * pantalla. El diseño lo resuelve en UNA fila.
 *
 * Se consigue sin tocar el marcado, gracias a las dos casillas que ya vienen
 * marcadas por defecto: «Devuelvo en la misma oficina» pliega el segundo
 * desplegable de oficina y «Tengo la edad estandar» pliega el selector de edad.
 * De siete controles quedan cuatro grupos: oficina · recogida · devolucion ·
 * boton. Lo secundario —las dos casillas y el cupon— baja a una segunda linea.
 *
 * Se ordena con `order` y no con `grid-template-areas` a proposito: los dos
 * `.av-buscar__par` son hermanos identicos y `:nth-of-type` no sabe
 * distinguirlos, asi que cualquier rejilla explicita dependeria de contar
 * hijos — y contar hijos se rompe el dia que alguien anada un campo.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
    .av-buscador .av-buscar__caja {
        display: flex;
        /* 🔴 row EXPLICITO. La regla del paso 1 declara `flex-direction: column`
           y `display:flex` no la reinicia: son propiedades distintas. Sin esto
           el flex-basis fijaba ALTURAS en vez de anchos —el campo de oficina
           media 515×210 con un control de 34px dentro— y todo seguia apilado
           aunque el contenedor ya fuera flex. */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--av-e-5) var(--av-e-6);
    }

    /*
     * 🔴 EL ORDEN, EXPLICITO Y PARA LOS DOS ESTADOS.
     *
     * Con las casillas marcadas se ven cuatro grupos; al desmarcarlas aparecen
     * la oficina de devolucion y la edad. Sin ordenar, el resultado era este:
     * el campo de edad tambien lleva `.av-campo`, asi que heredaba el order de
     * la oficina de recogida y SE COLABA ENTRE LAS FECHAS. Y los paneles de
     * ayuda estan en order 0, asi que al pulsar la «i» saltaban al principio
     * del formulario.
     *
     * Secuencia: recogida -> devolucion -> cuando -> hasta cuando -> edad ->
     * buscar. Y debajo, lo que matiza: casillas, ayudas y cupon.
     */
    .av-buscador .av-buscar__caja > .av-campo {
        order: 1;
        flex: 1 1 210px;
        min-width: 0;
    }

    /* Los dos pares (fecha + hora). La fecha mas ancha: una fecha completa
       necesita sitio y una hora cabe en la mitad. */
    .av-buscador .av-buscar__caja > .av-buscar__par {
        order: 3;
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        /* end y no stretch: el rotulo de «Fecha de recogida» ocupa dos lineas
           cuando el de «Hora» ocupa una, y sin esto las dos cajas quedaban a
           distinta altura. */
        align-items: end;
        gap: var(--av-e-3);
        flex: 1 1 250px;
        min-width: 0;
    }

    /* Recogida y devolucion emparejadas: «de donde y cuando» juntos.
       `:has()` distingue los dos pares, que como clase son identicos. Donde no
       haya soporte, ambos se quedan en order 3 y salen en el orden del DOM, que
       tambien es correcto — solo pierde el emparejado. */
    .av-buscador .av-buscar__caja > .av-buscar__par:has([name^="pickup"]) { order: 2; }
    .av-buscador .av-buscar__caja > .av-buscar__devolucion { order: 3; }
    .av-buscador .av-buscar__caja > .av-buscar__par:has([name^="return"]) { order: 4; }
    /* La edad no crece: al desmarcar su casilla se quedaba sola en la segunda
       fila y se estiraba a 549px para un desplegable de dos palabras. */
    .av-buscador .av-buscar__caja > .av-buscar__edad {
        order: 5;
        flex: 0 1 210px;
    }

    .av-buscador .av-buscar__caja > .av-buscar__accion {
        order: 6;
        flex: 0 0 auto;
        margin: 0;
    }

    .av-buscador .av-buscar__caja > .av-buscar__accion .av-boton {
        width: auto;
        min-width: 150px;
    }

    /* Un salto de linea de verdad despues del boton.
       Sin esto, al desmarcar las casillas la de «misma oficina» se colaba en la
       misma fila que el boton y la de la edad caia sola en una tercera: tres
       filas desordenadas. Un item flex vacio al 100% obliga a cortar ahi. */
    .av-buscador .av-buscar__caja::after {
        content: "";
        order: 7;
        flex: 1 0 100%;
        height: 0;
    }

    /* Segunda linea: lo que matiza la busqueda, no lo que la define. */
    .av-buscador .av-buscar__caja > .av-buscar__linea,
    .av-buscador .av-buscar__caja > .av-buscar__promo,
    .av-buscador .av-buscar__caja > .av-buscar__ayuda {
        order: 8;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }

    /* El panel de ayuda, cuando se abre, a toda la fila: es un parrafo. */
    .av-buscador .av-buscar__caja > .av-buscar__ayuda {
        order: 9;
        flex: 1 1 100%;
    }

    /* La casilla y su boton de ayuda, en linea. Apilados, el «i» quedaba como
       un boton grande suelto debajo del texto y parecia una accion principal,
       cuando solo abre una explicacion. */
    .av-buscador .av-buscar__caja > .av-buscar__linea {
        display: flex;
        align-items: center;
        gap: var(--av-e-2);
    }

    .av-buscador .av-buscar__caja > .av-buscar__linea .av-buscar__casilla {
        width: auto;
    }

}

/* ====================================================================
 * Tarjeta de coche  ·  COMPONENTE COMPARTIDO
 *
 * Vivia en theme-v2-ficha.css con el nombre `.av-fcoche`, y ahi se quedo
 * mientras solo la usaba la ficha de OFICINA. Al reutilizarla en la ficha de
 * COCHE aparecio una colision de nombres que no se ve leyendo un solo archivo:
 *
 *   .av-fcoche__foto  en theme-v2-ficha.css       = miniatura de la tarjeta
 *   .av-fcoche__foto  en theme-v2-ficha-coche.css = LA FOTO GRANDE del vehiculo
 *
 * Las dos hojas nunca se cargaban juntas, asi que nadie lo notaba. En cuanto la
 * ficha de coche pinta estas tarjetas, hereda las reglas equivocadas.
 *
 * Renombrada a `.av-coche-tarjeta` y traida aqui, que es donde este proyecto
 * declara los componentes que usa mas de una pantalla (invariante I2). Declararla
 * en dos hojas la marcaria el verificador.
 * ==================================================================== */

/* ====================================================================
 * COCHES DISPONIBLES  (dentro de la columna, ANTES de la prosa)
 * ==================================================================== */

.av-fdisponibles { margin-bottom: 36px; }

.av-fdisponibles__tit { margin: 0 0 6px; }

.av-fdisponibles__bajada {
    margin: 0 0 var(--av-e-7b);
    max-width: var(--av-medida);
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-texto-3);
}

.av-fdisponibles__mas { margin: 16px 0 0; }

/*
 * 🔴 TARJETA MINIMA, no la ficha de producto del catalogo.
 *
 * La primera version reutilizaba la tarjeta grande: 466px de alto, tres
 * columnas a todo el ancho de la pagina y por debajo del texto. Ocupaba media
 * pantalla y empujaba la prosa fuera del primer scroll.
 *
 * El diseno las pinta dentro de la columna izquierda, con foto de 110px y la
 * ficha en 7px de gap. Aqui caben tres por fila en 780px de columna.
 *
 * auto-fit y NO auto-fill: con auto-fill una fila incompleta reserva columnas
 * vacias y descentra las tarjetas. Paso en la home.
 */
/* UNA COLUMNA EN MOVIL, y no es una preferencia: es aritmetica.
 *
 * Con minmax(150px) caben dos columnas a 390px, de 167px cada una. El CTA de la
 * tarjeta queda entonces en 133px utiles, y «Ver disponibilidad» mide 120px de
 * texto: con su padding necesita 140. Se partia en dos lineas y el boton pasaba de
 * 44px de alto a 58, en las 27 tarjetas del catalogo.
 *
 * Con 200px ya no entran dos (2x200 + 14 de hueco > los ~350 utiles), asi que cae
 * a una sola columna. Es ademas lo que hace el diseño en su pantalla de catalogo:
 * tarjeta a ancho completo, foto mas grande y el boton en una linea.
 *
 * A partir de 768px manda la regla de tres columnas de mas abajo. */
.av-grid--coches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * TRES COLUMNAS en escritorio, no `auto-fit` a secas.
 *
 * En la columna de ~780px, `minmax(150px)` resolvia a CUATRO columnas y los
 * seis coches quedaban 4 + 2: dos tarjetas sueltas en la segunda fila con la
 * mitad de la fila vacia. Con tres son 3 + 3.
 *
 * `grid-auto-rows: 1fr` iguala las dos filas: sin el, la fila con un nombre de
 * dos lineas («Citroen C3 Automatico») crece y desalinea los botones.
 */
@media (min-width: 1000px) {
    .av-grid--coches { grid-template-columns: repeat(3, 1fr); }
}

.av-coche-tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-blanco);
    overflow: hidden;
}

.av-coche-tarjeta__foto {
    position: relative;
    height: 110px;
    background: var(--av-fondo-suave);
}

/* Absoluto: con la imagen en flujo, una foto mas alta que la caja la estira
   —height:100% no resuelve porque la altura del padre no es un valor definido
   para el porcentaje del hijo. */
.av-coche-tarjeta__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.av-coche-tarjeta__in {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
}

.av-coche-tarjeta__nombre {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-entradilla);
    line-height: 1.25;
    color: var(--av-marino);
}

.av-coche-tarjeta__specs {
    margin: 0;
    font-size: var(--av-t-xs);
    line-height: 1.4;
    color: var(--av-texto-3);
}

/* `margin-top:auto` empuja el precio y el CTA al pie de la tarjeta, para que
   las de nombre corto y largo alineen el boton a la misma altura. */
.av-coche-tarjeta__precio {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: auto 0 0;
    color: var(--av-marino);
}

.av-coche-tarjeta__precio strong {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-bloque-lg);
}

.av-coche-tarjeta__precio small {
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: var(--av-t-xs);
    color: var(--av-texto-3);
}

/*
 * 🔴 ESPECIFICIDAD, NO ORDEN: MEDIDO, NO SUPUESTO.
 *
 * El marcado es `<a class="av-btn av-btn--oscuro av-fcoche__cta">`. Con un
 * solo selector de clase, `.av-coche-tarjeta__cta` tiene especificidad (0,1,0);
 * `.av-v2 .av-btn` de theme-v2-base.css tiene (0,2,0), dos clases. Gana la
 * base pese a cargarse antes: la especificidad decide antes que el orden.
 * Medido con el DOM real (no leyendo el CSS): el boton salia con el padding,
 * el tamano de letra Y el radio de la base — 14px 24px / 15px / 9px — en vez
 * de los 10px 12px / 12.5px / pildora que dice esta regla. Se repite el
 * prefijo `.av-v2` para igualar especificidad y ganar por orden, que es el
 * patron que ya usa el resto de esta hoja (`.av-v2 .av-btn--tel`, `.av-v2
 * .av-btn--fantasma`).
 */
.av-v2 .av-coche-tarjeta__cta {
    padding: 10px 12px;
    font-size: var(--av-t-cap);
    border-radius: var(--av-r-boton);
}

/* El selector de idiomas dentro del menu movil. En el movil la barra superior
   esta oculta, asi que este es el unico selector a la vista sin bajar al pie.
   Hereda el aspecto de .av-idiomas; aqui solo se le da el mismo aire que a los
   enlaces del menu, para que no quede pegado al ultimo. */
.av-idiomas--movil {
    padding: var(--av-e-5) var(--av-e-6) var(--av-e-6);
}