/*
 * Autos Valls · Theme v2 — Home
 * -----------------------------
 * Epica AUTOVA-65 (EP-9). Se carga SOLO en paginas con la plantilla
 * page-templates/home-v2.php. Depende de theme-v2-tokens.css.
 *
 * Mobile first: las media queries suben, nunca bajan.
 * La composicion (rejillas, ritmo, jerarquia) sale del proyecto de Claude
 * Design. Los valores atomicos —color, radius, tipografia— NO: salen de la
 * marca real via theme-v2-tokens.css. El diseno propone Montserrat y #3498DB,
 * que no son de Autos Valls. Ver la cabecera de theme-v2-tokens.css.
 */

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

body.av-v2 {
    margin: 0;
    background: #FFFFFF;
    color: var(--av-marino);
    font-family: var(--av-fuente-texto);
    font-size: 16px;
    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. */
.av-v2 .av-wrap {
    width: 100%;
    box-sizing: border-box;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

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

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

.av-v2 :focus-visible {
    outline: 2px solid var(--av-cielo);
    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;
}

.av-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--av-marino);
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: 0 0 var(--av-r-boton) 0;
}

.av-skip:focus {
    left: 0;
    color: #FFFFFF;
}

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

.av-v2 .av-h2 {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    color: var(--av-marino);
    text-wrap: balance;
}

.av-v2 .av-h2--claro {
    color: #FFFFFF;
}

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

.av-eyebrow--claro { 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 8px, Sora 700 15px, transicion .2s ease,
   area tactil minima 44x44.
   ---------------------------------------------------------------------
   DOS NIVELES DE CTA, y el color de cada uno esta obligado por el contraste:

     --primary  cian con texto MARINO. Es "reservar": cabecera, buscador,
                barra sticky. Va en cian y no en marino porque la cabecera
                YA es marina y un boton marino sobre ella desaparece — paso,
                y el CTA principal del sitio estuvo invisible.
                Texto marino y no blanco porque sobre cian el blanco da
                2.78:1; el marino da 4.64:1 y pasa AA.

     --oscuro   marino con texto blanco (12.9:1). Es "ver disponibilidad":
                dentro de las tarjetas de coche, sobre blanco.

   Asi el cian solo aparece en la accion que cierra la venta, que es
   exactamente lo que la guia de marca llama "lo que confirma o esta activo".
   Ver la cabecera de theme-v2-tokens.css. */

.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;
    border-radius: var(--av-r-boton);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--av-transicion), color var(--av-transicion);
}

.av-v2 .av-btn--primary {
    background: var(--av-cielo);
    color: var(--av-marino);
}

/* El hover ACLARA en vez de oscurecer: si oscureciera, el texto marino
   perderia contraste (3.6:1). Aclarando sube a 5.8:1. */
.av-v2 .av-btn--primary:hover {
    background: var(--av-cielo-hover);
    color: var(--av-marino);
}

.av-v2 .av-btn--oscuro {
    background: var(--av-marino);
    color: #FFFFFF;
    width: 100%;
}

.av-v2 .av-btn--oscuro:hover {
    background: var(--av-marino-900);
    color: #FFFFFF;
}

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

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

/* --- 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: 15px;
    line-height: 1.6;
    color: var(--av-texto-2);
}

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

.av-topbar {
    display: none;                 /* Oculta en movil, por diseno */
    background: var(--av-marino-950);
    color: var(--av-eyebrow);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 11.5px;
}

.av-topbar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    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: 18px;
}

.av-topbar__rating b {
    color: #FFFFFF;
    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: 11px;
    letter-spacing: .06em;
    color: var(--av-eyebrow);
    transition: color var(--av-transicion), background-color var(--av-transicion);
}

.av-v2 a.av-idioma:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .1);
}

/* 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. */
.av-v2 .av-idioma--actual {
    font-weight: 800;
    color: #FFFFFF;
    background: rgba(255, 255, 255, .14);
    cursor: default;
}

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

.av-v2 .av-topbar__cuenta a:hover {
    color: #FFFFFF;
}

/* ==================================================================
 * 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: 11px;
    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: #FFFFFF;
}

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

/* La cartela del logo cuelga del borde superior e invade el hero, como en el
   diseno. Necesita align-self:flex-start para pegarse arriba y un margen
   inferior negativo para sobresalir. El z-index del header la mantiene visible
   por encima de la seccion siguiente. */
.av-logo {
    display: flex;
    align-items: center;
    flex: none;
    align-self: flex-start;
    background: #FFFFFF;
    border-radius: 0 0 12px 12px;
    padding: 12px 16px 14px;
    margin-bottom: -20px;
    box-shadow: 0 8px 20px rgba(0, 26, 58, .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: 17px;
    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: 14px;
    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: #FFFFFF;
}

.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: #FFFFFF;
    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 (#00789f) 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 rgba(255, 255, 255, .3);
    border-radius: var(--av-r-boton);
    color: #FFFFFF;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 15px;
    white-space: nowrap;
    transition: background-color var(--av-transicion), border-color var(--av-transicion);
}

.av-v2 .av-tel:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    color: #FFFFFF;
}

.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 */
}

.av-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    color: #FFFFFF;
    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: 15px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ==================================================================
 * 3. Hero
 * ================================================================== */

.av-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    overflow: hidden;
    /* Color de respaldo: si la imagen no carga, el texto blanco sigue
       teniendo contraste suficiente. */
    background: var(--av-marino);
}

/* El encuadre del hero depende de la foto concreta: un `cover` centrado suele
   recortar justo lo que vende (la arena, la orilla, el turquesa).
   Va como variable para poder reajustarlo desde el CSS adicional del
   Customizer si se cambia la imagen destacada, sin tocar el tema ni desplegar:
       .av-hero { --av-hero-pos: 50%; }
   Valor actual afinado para Cala Galdana (2560x1920): deja la playa en el
   tercio superior del recorte, el resto de agua turquesa, y saca de cuadro
   los bloques de hotel de la parte alta de la foto. */
.av-hero {
    --av-hero-pos: 45%;
}

.av-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--av-hero-pos, 50%);
}

/* El velo es obligatorio: la guia prohibe texto sobre foto sin el.
 *
 * Dos capas en vez de una:
 *   1. Un degradado vertical que oscurece arriba (para la cabecera) y abajo
 *      (para el titular), dejando respirar la franja central de la foto.
 *   2. Un degradado lateral que refuerza SOLO la izquierda, que es donde cae
 *      el texto. Asi el titular tiene contraste garantizado sin apagar la
 *      mitad derecha de la imagen, que es la que se ve.
 *
 * Con una sola capa uniforme al 30% en el centro, una foto clara obligaba a
 * subir la opacidad global y el turquesa se iba a gris. */
.av-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(0, 26, 58, .88) 0%,
            rgba(0, 26, 58, .78) 32%,
            rgba(0, 26, 58, .34) 52%,
            rgba(0, 26, 58, 0) 72%),
        linear-gradient(180deg,
            rgba(0, 48, 105, .55) 0%,
            rgba(0, 48, 105, .12) 38%,
            rgba(0, 48, 105, .78) 100%);
}

/* El padding inferior deja sitio al buscador, que sube -28px en movil y -42px
   desde 768px. Sin este colchon el subtitulo queda debajo de la tarjeta. */
/* Sombra ademas del velo. La Guia de Marca prohibe "texto sobre foto sin velo
   NI sombra": llevar las dos es lo correcto, no redundante. La sombra cubre el
   caso peor —un reflejo claro justo detras de una letra— sin tener que subir
   la opacidad del velo y apagar la foto entera. */
.av-hero__in {
    position: relative;
    z-index: 1;
    padding-top: 64px;
    padding-bottom: 64px;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(10, 25, 42, .55);
}

/* El eyebrow del hero va sobre foto, no sobre marino solido: necesita mas
   luminosidad que --av-eyebrow para mantener el contraste. */
.av-hero .av-eyebrow--claro {
    color: #d6e7f5;
}

.av-hero__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    /* clamp del diseno. El tope estaba en 48px porque la "Guia de Marca" lo
       fijaba ahi, pero esa guia la genero Claude Design y ya no manda. */
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    max-width: 20ch;
    text-wrap: balance;
    color: #FFFFFF;
}

.av-hero__sub {
    margin: 0;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.6;
    color: #d6e7f5;
}

/* En movil el texto ocupa TODO el ancho, asi que el degradado lateral no
   protege nada: hay titular sobre la parte mas clara de la foto. Medido a
   412px con el velo de escritorio, el H1 caia a 1,66:1 (necesita 3,0) y el
   subtitulo a 3,35:1 (necesita 4,5). Aqui manda un velo vertical mas denso;
   la foto pasa a ser fondo, que es su papel en una pantalla de 412px. */
@media (max-width: 767px) {
    .av-hero::after {
        background: linear-gradient(180deg,
            rgba(0, 26, 58, .72) 0%,
            rgba(0, 26, 58, .62) 26%,
            rgba(0, 26, 58, .84) 62%,
            rgba(0, 26, 58, .92) 100%);
    }
}

/* ==================================================================
 * 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: #FFFFFF;
    border-radius: var(--av-r-bloque);
    box-shadow: var(--av-sombra-fuerte);
    padding: 16px;
}

.av-buscador__nota {
    margin: 12px 0 0;
    font-size: 13px;
    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: 10.5px !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: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--av-marino) !important;
    background-color: #FFFFFF !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);
    font-weight: 600;
    font-size: 13px;
    color: var(--av-enlace) !important;
    cursor: pointer;
}

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

.av-promo__mas {
    font-size: 15px;
    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;
}

.av-buscador__caja .search-submit-js,
.av-buscador__caja button[type="submit"],
.av-buscador__caja input[type="submit"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    /* El unico CTA cian de la pagina, y a proposito: es la accion principal y
       necesita destacar sobre los botones marino. El texto va en marino porque
       sobre cian el blanco se queda en 2.78:1. Asi da 4.64:1. */
    background: var(--av-cielo) !important;
    border: 0 !important;
    border-radius: var(--av-r-boton) !important;
    color: var(--av-marino) !important;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--av-transicion);
}

.av-buscador__caja .search-submit-js:hover,
.av-buscador__caja button[type="submit"]:hover,
.av-buscador__caja input[type="submit"]:hover {
    background: var(--av-cielo-hover) !important;
}

/* ==================================================================
 * 5. Barra de ventajas
 * ================================================================== */

.av-ventajas {
    background: var(--av-arena);
    margin-top: 28px;
}

.av-ventajas__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
    list-style: none;
    margin: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 13px;
    color: var(--av-texto-2);
    text-align: center;
}

/* ==================================================================
 * 6. Flota
 * ================================================================== */

.av-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.av-v2 .av-chip {
    flex: none;
    white-space: nowrap;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 12.5px;
    border-radius: var(--av-r-pill);
    padding: 9px 15px;
    min-height: 38px;
    background: #FFFFFF;
    border: 1px solid var(--av-borde);
    color: var(--av-texto-2);
    cursor: pointer;
    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 #00a6e2 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 #00789f 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. */
.av-v2 .av-chip[aria-pressed="true"] {
    background: var(--av-enlace);
    border-color: var(--av-enlace);
    color: #FFFFFF;
}

.av-grid {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 150px para que entren DOS columnas ya a 360px. Con el minmax(200px) del
   diseno la home movil se iba a 9.294px de alto: ocho coches y cuatro oficinas
   en una sola columna. */
.av-grid--flota {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.av-coche {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    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, #f1f5fa 0%, #e4edf6 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: 16px;
    line-height: 1.2;
    margin: 0;
    color: var(--av-marino);
}

.av-coche__specs {
    margin: 0;
    font-size: 12.5px;
    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: 12.5px;
    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;
    font-size: 13px;
}

.av-flota__vacio {
    margin: 20px 0 0;
    color: var(--av-texto-2);
}

.av-flota__mas {
    margin: 24px 0 0;
    text-align: center;
}

/* ==================================================================
 * 7. Bloque editorial
 * ================================================================== */

.av-editorial__in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}

.av-editorial__media {
    border-radius: var(--av-r-bloque);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: repeating-linear-gradient(135deg, #edf3fa 0 10px, #e0ebf6 10px 20px);
}

.av-editorial__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.av-editorial__texto p {
    margin: 0 0 16px;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--av-texto-2);
}

.av-editorial__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==================================================================
 * 8. Oficinas
 * ================================================================== */

.av-grid--oficinas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* La tarjeta es una COLUMNA FLEX con el rotulo al final, no un contenedor con
   el rotulo posicionado encima.
   El motivo no es estetico: el enlace se estira sobre toda la tarjeta con un
   ::after de `position:absolute; inset:0`, y ese ::after se ancla al ancestro
   POSICIONADO mas cercano. Cuando el rotulo era `position:absolute`, el enlace
   solo cubria el rotulo: la mitad de arriba de la tarjeta —la foto— no era
   clicable, pese a lo que decia el comentario de aqui abajo. Comprobado con
   elementFromPoint antes y despues. */
.av-oficina {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    border-radius: var(--av-r-tarjeta);
    overflow: hidden;
    background: var(--av-marino);
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}

/* El mismo gesto que las tarjetas de coche y las de "Por que elegir": se
   levanta 3px y proyecta sombra. Y la foto se acerca un punto, que es lo que
   convierte la tarjeta en algo que invita a pulsarla.
   focus-within para que quien navega con teclado reciba el mismo aviso. */
.av-oficina:hover,
.av-oficina:focus-within {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-3px);
}

.av-oficina__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--av-transicion);
}

.av-oficina:hover .av-oficina__foto,
.av-oficina:focus-within .av-oficina__foto {
    transform: scale(1.05);
}

.av-oficina::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 48, 105, 0) 35%, rgba(0, 48, 105, .92) 100%);
}

/* SIN POSICIONAR, a proposito. Ni `absolute` ni `relative`: cualquiera de las
   dos lo convierte en el ancla del ::after que estira el enlace, y entonces la
   zona clicable se encoge al rotulo. El z-index funciona igual porque es un
   item flex, y esos aceptan z-index estando en `static`. Ver .av-oficina. */
.av-oficina__rotulo {
    z-index: 1;
    padding: 15px;
    color: #FFFFFF;
}

.av-oficina__nombre {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    margin: 0 0 2px;
}

.av-v2 .av-oficina__nombre a {
    color: #FFFFFF;
}

/* La tarjeta entera es clicable, pero el enlace real es el titulo: asi conserva
   nombre accesible en lugar de ser un div con onclick. */
.av-v2 .av-oficina__nombre a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* El foco se dibuja sobre el ::after, que cubre la tarjeta, y no sobre el texto
   del titulo: si no, quien navega con teclado ve un recuadro de dos palabras
   para un objetivo del tamano de la tarjeta. */
.av-v2 .av-oficina__nombre a:focus-visible {
    outline: none;
}

.av-v2 .av-oficina__nombre a:focus-visible::after {
    outline: 3px solid var(--av-cielo);
    outline-offset: -3px;
    border-radius: var(--av-r-tarjeta);
}

.av-oficina__detalle {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--av-sobre-marino);
}

/* ==================================================================
 * 9. Bloque "Sin sorpresas"
 * ================================================================== */

.av-confianza__caja {
    background: var(--av-marino);
    color: #FFFFFF;
    border-radius: 18px;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

.av-confianza__texto p {
    margin: 0;
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--av-sobre-marino);
}

.av-confianza__cifras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.av-cifra {
    background: rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 18px;
}

.av-cifra__num {
    display: block;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    color: #FFFFFF;
}

.av-cifra__lab {
    font-size: 12.5px;
    color: var(--av-eyebrow);
}

/* ==================================================================
 * 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: 10.5px;
    letter-spacing: .18em;
    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: 13.5px;
}

.av-v2 .av-footer__lista a:hover {
    color: #FFFFFF;
}

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

.av-footer__horario {
    margin: 0 0 10px;
    font-size: 13px;
    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: 12.5px;
    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: 11.5px;
    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: rgba(255, 255, 255, .12);
    color: #FFFFFF;
}

.av-footer__idioma--actual {
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
}

.av-footer__legal {
    margin-top: 24px;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px;
    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: #FFFFFF;
}

/* 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: #FFFFFF;
    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 (#ff6600), 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 rgba(255, 255, 255, .1);
    font-size: 12.5px;
}

.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: 1240px;
    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 18px;
}

.av-v2 .bottom-bar-data a {
    color: #FFFFFF;
    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;
}

/* ==================================================================
 * 10 bis. Secciones recuperadas de la home anterior
 * ------------------------------------------------------------------
 * El diseno de Claude Design solo dibuja 8 secciones; la home que habia
 * tenia 14. Estas piezas conservan TODO el contenido (que valia el 59% de
 * las palabras indexables de la pagina) con la piel del theme v2.
 * Ver AUTOVA-86.
 * ================================================================== */

.av-seccion__bajada--ancha {
    max-width: 78ch;
}

/* --- Rejillas auxiliares ------------------------------------------- */

.av-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.av-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* --- Tarjeta con foto (Por que elegir) ------------------------------
 * Estructura del diseno: foto arriba en 16:10, y debajo titulo y texto.
 * Antes era un icono SVG dentro de un cuadrado redondeado, que es otra
 * cosa: la foto ocupa el tercio superior de la tarjeta y cambia el peso
 * visual de toda la seccion.
 *
 * Si una tarjeta no tiene foto configurada, no se pinta el hueco: la
 * tarjeta queda de solo texto en vez de con un marcador.
 */

.av-tarjeta {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    overflow: hidden;
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}

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

/* La proporcion va en la IMAGEN, no en el contenedor.
 *
 * Estaba al reves: `aspect-ratio` en el <span> y `height:100%` en el <img>.
 * Eso crea una dependencia circular —la altura del padre depende del contenido
 * y la del hijo del padre— y el navegador la rompe usando la altura intrinseca
 * de la foto. Resultado: el recorte 16:10 NUNCA se aplicaba.
 *
 * No se veia porque las tres fotos de entonces eran casi 3:2 y la diferencia
 * con 16:10 es de unos pocos pixeles. Al poner una foto VERTICAL (800x1200) la
 * tarjeta se estiro a 942px de alto y quedo a la vista.
 */
.av-tarjeta__media {
    display: block;
    background: var(--av-fondo-suave);
}

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

.av-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
}

.av-tarjeta__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    color: var(--av-marino);
}

.av-tarjeta__texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* --- Click&Go: BANDA CLARA A TODO EL ANCHO -------------------------
 * Hasta el 2026-08-06 esto era una caja marino oscura de 1192px con radio y
 * tarjetas translucidas dentro. El diseno hace justo lo contrario: una banda
 * clara (#F7FAFD) que ocupa TODO el ancho de la ventana, con tarjetas blancas
 * encima. Es una de las cuatro bandas a sangre de la home —hero, buscador,
 * ventajas y esta— y sin ella la pagina pierde el unico respiro claro entre la
 * flota y las oficinas.
 *
 * `padding-top` se anula porque la banda trae el suyo: si no, suma el de
 * .av-seccion y abre un hueco de 100px.
 */

.av-v2 .av-clickgo {
    padding-top: 0;
    margin-top: 48px;
    background: #f7fafd;
}

.av-clickgo__caja {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* La pildora y el titular van en la MISMA fila, como el diseno. */
.av-clickgo__cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.av-clickgo__cab .av-h2 {
    margin: 0;
}

/* Pildora maciza. Va en el cian oscuro y no en el de marca por lo mismo que el
   chip de filtro: el blanco sobre #00a6e2 da 2.78:1. */
.av-v2 .av-clickgo__pildora {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin: 0;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--av-enlace);
    color: #FFFFFF;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.av-clickgo__lista {
    gap: 18px;
}

/* --- TARJETA DE SERVICIO ------------------------------------------
 * UN SOLO componente para dos sitios: los cuatro items de Click&Go y los
 * cuatro beneficios de long tail. Antes eran dos cosas distintas —Click&Go
 * en columna sin borde, beneficios en fila con el icono al lado, gris macizo
 * y otro radio— y en una pagina donde todo lo demas es "tarjeta blanca con
 * borde" se notaba que eran los dos huerfanos.
 *
 * Si se toca aqui, se tocan los dos. Es a proposito.
 */
.av-clickgo__item,
.av-beneficio {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    padding: 18px;
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}

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

.av-clickgo__icono,
.av-beneficio__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--av-fondo-suave);
    color: var(--av-enlace);
    margin-bottom: 12px;
}

.av-clickgo__titulo,
.av-beneficio__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--av-marino);
}

.av-clickgo__texto,
.av-beneficio__texto {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* --- Editorial invertido (imagen a la derecha) ---------------------- */
/* En movil el orden del DOM ya deja el texto primero; en dos columnas se
   coloca la imagen a la derecha para alternar con el bloque de las calas. */

@media (min-width: 768px) {
    .av-editorial--invertido .av-editorial__media {
        order: 2;
    }
}

/* --- Beneficios de long tail --------------------------------------- */

/* MISMA TARJETA QUE EL RESTO DE LA HOME: fondo blanco, borde de 1px, radio 16
   y el mismo levantamiento al pasar por encima que las de "Por que elegir", las
   de coche y las de oficina.
   Antes eran cajas de un gris azulado macizo, sin borde y con radio 14: el
   unico componente de la pagina que no seguia el patron, y se notaba. */
/* --- 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: 18px 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: 15px;
    line-height: 1.35;
    color: var(--av-marino);
}

.av-faq__r {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* Enlace de texto, no boton con borde: en el diseno es un "Ver todas las
   preguntas frecuentes >" en color de acento. */
.av-faqs__cta {
    margin: 18px 0 0;
}

.av-v2 .av-faqs__enlace {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 14px;
    color: var(--av-enlace);
}

.av-v2 .av-faqs__enlace:hover {
    color: var(--av-marino);
    text-decoration: underline;
}

/* --- Mapa ----------------------------------------------------------- */
/* DOS COLUMNAS: texto a la izquierda, mapa a la derecha, como el diseno.
   Antes el texto iba arriba y el mapa a todo el ancho debajo, que dejaba la
   seccion mucho mas alta y el titular desconectado de lo que ilustra.
   Donde el diseno pone una foto de una cala nosotros dejamos el iframe de
   Google Maps: en una seccion que se llama "Encuentranos", un mapa de verdad
   sirve y una foto decora. */

.av-mapa__in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

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

.av-mapa__texto .av-h2 {
    margin: 0;
}

/* El override va DESPUES de la regla base a proposito: misma especificidad, asi
   que gana la ultima. Estuvo declarado 100 lineas antes y no aplicaba nada. */
@media (min-width: 768px) {
    .av-mapa__in {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 32px;
    }
}

.av-mapa__marco {
    border-radius: var(--av-r-bloque);
    overflow: hidden;
    border: 1px solid var(--av-borde);
    aspect-ratio: 4 / 3;
    background: var(--av-fondo-suave);
}

.av-mapa__marco iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* El diseno lo pinta marino, no como boton secundario: es el remate de la
   seccion y tiene que pesar. */
.av-mapa__cta {
    margin: 4px 0 0;
}

.av-v2 .av-mapa__cta .av-btn {
    background: var(--av-marino);
    border-color: var(--av-marino);
    color: #FFFFFF;
}

.av-v2 .av-mapa__cta .av-btn:hover {
    background: var(--av-marino-900);
    color: #FFFFFF;
}

/* --- Resenas -------------------------------------------------------- */
/* Tarjetas propias, como en el diseno. Antes lo pintaba el shortcode del
   plugin, que inyecta su propio CSS con un azul (#2386dd) ajeno a la marca.
   Los datos siguen saliendo de la misma tabla del plugin. */

.av-resenas__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.av-resena {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
}

/* El color no basta para transmitir la nota: al lado va el texto real
   ("5 de 5") para lectores de pantalla. */
.av-resena__estrellas {
    color: var(--av-cielo);
    font-size: 15px;
    letter-spacing: .12em;
    line-height: 1;
}

.av-resena__texto {
    margin: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.65;
    color: var(--av-texto-2);
}

.av-resena__firma {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

/* Circulo marino con la inicial en blanco, como el diseno. Antes era un chip
   palido con la letra en marino y no se leia como un avatar.
   El diseno alterna marino y cian entre tarjetas; aqui van todos en marino
   porque una inicial blanca sobre el cian de marca da 2.78:1. */
.av-resena__inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--av-marino);
    color: #FFFFFF;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 13px;
}

.av-resena__nombre {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 13.5px;
    color: var(--av-marino);
}

@media (min-width: 768px) {
    .av-resenas__lista {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- CTA telefonico ------------------------------------------------- */

/* Banda de arena a TODO EL ANCHO, como el diseno. Era una caja con radio de 18
   dentro del contenedor, y ademas de 1240px: mas ancha que el resto del
   contenido, asi que ni siquiera alineaba con las secciones de arriba. */
.av-v2 .av-cta-tel {
    padding-top: 0;
    margin-top: 48px;
    background: var(--av-arena);
}

.av-cta-tel__in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
    box-sizing: border-box;
}

.av-cta-tel__sub {
    font-family: var(--av-fuente-titulo);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--av-marino);
}

.av-cta-tel__texto {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--av-texto-2);
    max-width: 54ch;
}

.av-cta-tel__sede {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--av-texto-3);
}

/* Marino con texto blanco y radio de pildora, como el diseno (#1A3A5C,
   border-radius 50px). Llamar por telefono NO compite con "Reservar": el cian
   se reserva para la accion que cierra la venta. */
.av-v2 .av-cta-tel__boton {
    background: var(--av-marino);
    color: #FFFFFF;
    border-radius: var(--av-r-pill);
    font-size: 17px;
    padding: 16px 28px;
    justify-self: start;
}

.av-v2 .av-cta-tel__boton:hover {
    background: var(--av-marino-900);
    color: #FFFFFF;
}

/* ==================================================================
 * 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: #FFFFFF;
    border-top: 1px solid var(--av-borde);
    box-shadow: 0 -6px 20px rgba(0, 48, 105, .1);
    /* 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: 13.5px;
}

.av-sticky__lab {
    display: block;
    font-size: 11.5px;
    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: 15px;
    color: var(--av-marino);
}

.av-sticky__precio small {
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: 11px;
    color: var(--av-texto-3);
}

/* ==================================================================
 * 12. Tablet — 768px
 * ================================================================== */

@media (min-width: 768px) {

    .av-v2 .av-wrap {
        padding-left: 24px;
        padding-right: 24px;
    }

    .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: 32px;
        line-height: 1.15;
    }

    .av-hero {
        min-height: 520px;
    }

    .av-hero__in {
        padding-top: 84px;
        padding-bottom: 78px;
    }

    .av-buscador__caja {
        margin-top: -42px;
        padding: 18px;
    }

    .av-editorial__in {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .av-confianza__caja {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 36px;
        padding: 44px 40px;
    }

    /* SIGUEN EN 2x2, no en cuatro columnas.
       El prototipo pone `auto-fit minmax(120px,1fr)`, que en la mitad derecha
       de la caja da cuatro columnas de ~124px. Ahi las cuatro etiquetas se
       parten en dos lineas —"años en / Menorca", "oficinas en la / isla"— y las
       cajas quedan desiguales y apretadas. En 2x2 cada una tiene ~270px y todas
       las etiquetas caben en una linea.
       El prototipo no lo sufria porque sus etiquetas eran mas cortas. */
    .av-confianza__cifras {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .av-clickgo__caja {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .av-cta-tel__in {
        grid-template-columns: 1fr auto;
        padding-top: 44px;
        padding-bottom: 44px;
    }

    /* 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;
    }

    /* 240px fuerza CUATRO columnas en el contenedor de 1240px. Con 200px
       entraban cinco y los ocho coches quedaban en 5+3, con un hueco muerto a
       la derecha de la segunda fila. En 4+4 la rejilla cierra. */
    .av-grid--flota {
        gap: 18px;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* auto-FIT, no auto-fill. Son cuatro oficinas y auto-fill creaba CINCO
       columnas: la quinta se quedaba vacia, las cuatro tarjetas encogian de
       288 a 226px y sobraba un hueco a la derecha de la fila. auto-fit colapsa
       la pista vacia y las cuatro ocupan el ancho, como en el diseno. */
    .av-grid--oficinas {
        gap: 18px;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

/* ==================================================================
 * 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: 16px !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.
 */