/* `.av-grid--coches` se declaraba TAMBIEN aqui, con su propio minmax y su propio
   gap, mientras vivia ya en theme-v2-base.css: la rejilla de tarjetas la comparten
   el catalogo, la ficha de oficina y el bloque «otros coches» de la ficha de coche.
   Dos declaraciones para una rejilla compartida es justo lo que el invariante I2
   persigue. Queda solo en la base. */

/* Aqui habia dos reglas que recortaban el `padding-right` de los <select> de
   oficina: 38px del formulario del proveedor eran demasiados para una flecha de
   10px. Desde que el catalogo sirve v2/paso1-buscador.php (22-ago-2026) esos
   <select> son `.av-campo__control` y ya vienen con el relleno bueno de
   theme-v2-base.css. Mantenerlas dejaba el catalogo con 28px de relleno derecho
   frente a los 34 del resto: el mismo control con dos aspectos. */
/*
 * Autos Valls · Theme v2 — Catalogo (/nuestros-coches/)
 * Epica AUTOVA-88 (EP-10).
 *
 * Se carga ENCIMA de theme-v2-home.css, que hace de base: de ahi salen
 * .av-wrap, .av-seccion, .av-h2, .av-btn, .av-chip, .av-coche, .av-grid y todo
 * el chrome (barra superior, cabecera, pie, sticky). Aqui solo va lo propio de
 * esta pagina y los pocos ajustes sobre esa base. Ver la deuda en AUTOVA-108.
 *
 * Mobile first: las media queries son SIEMPRE min-width.
 *
 * REGLAS DE COLOR QUE NO SE NEGOCIAN (Guia de Marca, y ya mordieron en la home):
 *   - Nunca texto blanco sobre --av-cielo: da 2,78:1. Sobre cian el texto va
 *     en marino (4,64:1).
 *   - En cuerpo, los enlaces usan --av-enlace (5,0:1), no --av-cielo (3,0:1).
 *   - El estado nunca viaja solo en el color: aria-pressed ademas.
 */

/* ==================================================================
 * 0. Piezas que la base no trae
 * ================================================================== */

.av-v2 .av-h3 {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--av-marino);
    text-wrap: balance;
}

/* El <select> nativo del tema padre viene con estilos agresivos; se acota. */
.av-v2 .av-select {
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    font-family: var(--av-fuente-texto);
    font-weight: 600;
    font-size: var(--av-t-sm);
    color: var(--av-marino);
    cursor: pointer;
}
.av-v2 .av-select:focus-visible {
    outline: none;
    border-color: var(--av-cielo);
    box-shadow: var(--av-focus);
}

/* .av-btn--fantasma YA NO SE DECLARA AQUI: desde que theme-v2-base.css existe
   (AUTOVA-108) trae el mismo modificador con los mismos valores, y esta hoja
   se carga despues. Repetirlo era codigo muerto que I2 prohibe (un
   componente compartido, declarado una sola vez). Ver theme-v2-base.css. */

/* Los parrafos del catalogo son texto largo de verdad: 1.7 de interlineado y
   66ch de medida, que es donde deja de cansar. */
.av-v2 .av-coches-flota p,
.av-v2 .av-conducir__texto p,
.av-v2 .av-coches-temporada p,
.av-v2 .av-coches-cierre__texto {
    margin: 0 0 14px;
    max-width: 68ch;
    font-size: var(--av-t-base);
    line-height: 1.7;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 1. Cabecera de la pagina
 * ================================================================== */

.av-coches-cab {
    padding-top: 28px;
}
.av-v2 .av-coches-cab__h1 {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    /* La Guia de Marca manda sobre el prototipo, que se queda en 40px. */
    font-size: var(--av-t-h1-pagina);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: var(--av-marino);
    text-wrap: balance;
}
.av-coches-cab__bajada {
    margin: 0;
    max-width: 62ch;
    font-size: var(--av-t-md);
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 2. Buscador
 * ------------------------------------------------------------------
 * El marcado es del plugin y su estilo vive en la hoja base. Aqui solo el
 * titulo, que la home no tiene.
 * ================================================================== */

.av-v2 .av-buscador__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-lead);
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--av-marino);
}

/* 0 bis. La banda del buscador arrancaba PEGADA a la bajada del H1.
   En la home el buscador viene detras del hero, que ya trae su propio aire; en
   el catalogo viene detras de un H1 sobre blanco, y la separacion medida entre
   el final de la bajada y el titulo del buscador era de CERO pixeles. Los dos
   textos se leian como un solo bloque y encima el cambio de fondo blanco->gris
   cortaba justo entre ellos. */
.av-v2-coches .av-buscador {
    padding-top: 28px;
}
.av-v2-coches .av-coches-cab {
    padding-bottom: 8px;
}

/*
 * 🔴 LA TARJETA BLANCA CON SOMBRA NO ES LO QUE DIBUJA EL DISEÑO AQUI.
 *
 * En la home el buscador flota sobre el hero (por eso SI necesita tarjeta
 * blanca y sombra fuerte: se lee "encima" de una foto). En el catalogo
 * (06-catalogo.html, renderizado, no leido) el diseño lo pone detras de un H1
 * sobre fondo BLANCO: una sola fila plana, con relleno gris claro y SIN
 * sombra ni tarjeta -es la misma superficie que el resto de la pagina, solo
 * con un fondo distinto para agrupar los campos-. `.av-buscador` y
 * `.av-buscador__caja` son compartidos con la home (I2): aqui solo se pisan,
 * PARA ESTA PAGINA, las dos propiedades que cambian -que caja lleva el
 * fondo gris y que no lleva sombra-, no se redeclara el componente entero.
 */
.av-v2-coches .av-buscador {
    background: var(--av-blanco);
}

.av-v2-coches .av-buscador__caja {
    /* 0. La tarjeta del buscador NO se monta sobre nada aqui.
          En la home lleva `margin-top: -28px` para solaparse con el hero. El
          catalogo no tiene hero: ese margen negativo se comia el H2 "Consulta
          precio y disponibilidad", que quedaba medio tapado por la tarjeta. Es
          la clase de fallo que solo se ve renderizando; en el HTML el H2 estaba
          perfectamente ahi. */
    margin-top: 0;
    background: var(--av-fondo-suave);
    box-shadow: none;
}

/*
 * El diseño no dibuja "Consulta precio y disponibilidad" encima de la fila de
 * campos en el catalogo (si en la ficha de coche, que es una tarjeta aparte).
 * No se borra: un formulario sin encabezado es mas dificil de encontrar
 * navegando por titulares con lector de pantalla. Se oculta solo
 * visualmente, mismas reglas que `.av-sr` de la base (I1: no se inventa un
 * valor nuevo, se copian las mismas siete propiedades).
 */
.av-v2-coches .av-buscador__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* El buscador de ESTA pagina no es el de la home.
   ---------------------------------------------------------------------
   La home invoca [vc_NRS nrs_action_page="557"]; aqui se reproduce el
   shortcode que ya tiene la pagina, [car_rental_system display="search" ...],
   que trae DOS bloques de lugar (recogida y devolucion) y la edad del
   conductor. Son el doble de campos en el mismo ancho, y con el CSS de la home
   tal cual salian tres cosas mal, las tres medidas y no estimadas. */

/* 1. El nombre de la oficina se cortaba a media palabra: "Aeropuerto Menorca
      MAH - Curniola, 32" necesita 281px y el select tenia 257. El hueco estaba
      en los rellenos internos del formulario del plugin, que se comen 148px de
      los 1.240 del contenedor. Se anulan DENTRO de la tarjeta; el formulario
      sigue siendo el del plugin en cualquier otra pagina. */
.av-v2-coches .av-buscador__caja .px-8,
.av-v2-coches .av-buscador__caja .px-5,
.av-v2-coches .av-buscador__caja .inline_form {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. El select de oficina se lleva mas ancho, quitandoselo a fecha y hora, que
      con "07/08/2026" y "10:00" van holgadas.

      SIN ILUSIONES: la oficina mas larga de las 13 es "Son Bou - Milanos
      Pingüinos - Royal Son Bou - C. Comercial Son Bou" y mide 478px. En un
      <select> nativo eso NO cabe en ninguna anchura razonable, y hoy tampoco
      cabe. Lo que se arregla es que quepan las CORRIENTES —la de por defecto,
      "Aeropuerto Menorca MAH - Curniola, 32", son 281px— en vez de cortarse
      todas. El nombre util va siempre antes del primer guion, asi que lo que
      se pierde es la direccion. */
/* FECHA y HORA son una pareja unida: la fecha lleva el borde izquierdo y las
   esquinas redondeadas de ese lado, y la hora las del derecho —la fecha NO
   tiene borde derecho (`border-width: 1px 0 1px 1px`)—. Juntas parecen un solo
   campo; apiladas, la fecha se ve como un campo a medio pintar.

   En movil sus columnas son `col-xs-12` y se apilaban. Se las deja juntas:
   miden 151px cada una y hay 318 de columna.

   🔴 VA ANTES del bloque de 1200px A PROPOSITO. Estas columnas son a la vez
   `col-md-6` y `col-lg-3`: si esta regla fuera despues, ganaria por orden y en
   escritorio partiria el formulario en dos filas —paso—. Aqui arriba, la
   media query de abajo la pisa cuando toca. */
.av-v2-coches .av-buscador__caja .search-details-jd > .col-md-6 {
    width: 50%;
    float: left;
}

@media (min-width: 1200px) {
    .av-v2-coches .av-buscador__caja .search-details-jd > .col-lg-6 {
        width: 58%;
    }
    .av-v2-coches .av-buscador__caja .search-details-jd > .col-lg-3 {
        width: 21%;
    }
}


@media (min-width: 768px) {

}

/*
 * 🔴 «20/08/2026» SE CORTABA POR DOS PIXELES. Medido, no visto: local/campos.mjs
 * compara `scrollWidth` con `clientWidth` en cada campo, y aqui daba 114 contra 112.
 *
 * La columna de la fecha mide 121 px y el campo gastaba 28 en relleno horizontal.
 * Es la misma familia de defecto que el «12/08/20» del paso 1: el valor no cabe y
 * el navegador lo corta sin avisar, asi que la fecha se lee a medias justo donde
 * hay que elegirla.
 *
 * Se recorta el relleno en vez de tocar el ancho de la columna, que esta medido y
 * comentado mas arriba: 10 px dan 8 de margen sobre lo que hace falta.
 */
/*
 * ⚠️ Y LA REGLA QUE GANABA ERA NUESTRA, NO DEL PROVEEDOR.
 *
 * Dos intentos fallaron sin mover un pixel: primero sin `!important` y luego con el.
 * Se pregunto al navegador (`CSS.getMatchedStylesForNode`) en vez de seguir a
 * ciegas, y la culpable era `.av-buscador__caja .form-group input[type="text"]
 * { padding: 12px 14px !important }` de theme-v2-home.css: (0,3,1) contra los
 * (0,3,0) de aqui. Con `!important` en las dos, decide la especificidad.
 *
 * Se gana con UNA CLASE MAS —el `.form-group` que ya esta en el marcado— en vez de
 * subir el peso a martillazos. Misma leccion que con el rayado del paso 2.
 */
.av-v2-coches .av-buscador__caja .form-group input.pickup-date,
.av-v2-coches .av-buscador__caja .form-group input.return-date {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* 3. El boton salia a lo ancho de la tarjeta: 1.076px de "Reservar". Y su
      COLUMNA tenia fondo cian, asi que detras del boton quedaba una segunda
      caja del mismo color 77px mas ancha: parecian dos botones superpuestos.
      El color va en el boton, no en la columna que lo contiene.

      Ojo con la clase: es `search-submit-js`, no `search-submit`. Con el
      nombre a medias las reglas no aplicaban y el fondo cian seguia ahi. */
.av-v2-coches .av-buscador__caja .search-submit-js {
    float: none;
    margin-left: auto;
    background: none !important;
    padding-top: 6px;
}
.av-v2-coches .av-buscador__caja .car-rental-do-search {
    width: auto !important;
    min-width: 200px;
    margin-left: auto;
    display: block;
}

@media (min-width: 768px) {
    .av-v2-coches .av-buscador__caja .search-submit-js {
        width: auto;
        max-width: 100%;
    }
}

/* 4. El formulario trae `mb-8` del plugin: 90px de blanco al fondo de la
      tarjeta, que con el boton ya alineado arriba a la derecha no separaba de
      nada. */
.av-v2-coches .av-buscador__caja form.mb-8 {
    margin-bottom: 0 !important;
}

/* ==================================================================
 * 3. Barra de filtros
 * ================================================================== */

.av-coches-filtros {
    padding-top: 28px;
}
.av-coches-filtros__in {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los chips ya vienen estilados de la base. Aqui solo se les quita el margen
   inferior que llevan en la flota de la home, porque este contenedor ya
   reparte con gap y si no se suman los dos. */
.av-coches-filtros .av-chips {
    margin-bottom: 0;
}

/* La home pinta 9 chips; el catalogo pinta 13, y con el padding de 15px suman
   1.212px contra los 1.192px del contenedor a 1440: se pasaban por VEINTE
   pixeles y dejaban "SUV" solo en una segunda fila. Con 12px suman 1.134 y
   entran de sobra hasta 1200px de ancho. Por debajo envuelven con tres o
   cuatro en la ultima fila, que se lee bien; el problema era el huerfano.
   Medido, no estimado.
   El min-height sube a 44px: la base se queda en 38 y el area tactil minima
   de la Guia de Marca son 44x44. */


/*
 * 🔴 SOMBRA QUE NO PONE NINGUNA HOJA NUESTRA.
 *
 * Medido con CSS.getMatchedStylesForNode: el `<button class="av-chip">` de este
 * filtro llega con `box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important` de la
 * hoja GLOBAL del tema padre (`button, input[type="submit"], .button {...}`,
 * style.css del padre). No es una regla de theme-v2-*: es un reset de boton que
 * el padre aplica a TODOS los `<button>` de la web, y el diseno no la lleva
 * (chipBase no declara box-shadow). Se anula aqui, en el unico sitio de estas
 * tres paginas que pinta un `<button>` real (el resto son <a> o <details>).
 * El arreglo de fondo (un reset generico en theme-v2-base.css para cualquier
 * `<button>` de la web v2) queda pedido en PETICIONES.md: no toco esa hoja.
 */
.av-v2-coches .av-chip {
    box-shadow: none !important;
}

.av-coches-filtros__orden {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.av-coches-filtros__lab {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}
.av-coches-filtros__contador {
    margin: 0;
    font-size: var(--av-t-meta);
    color: var(--av-texto-3);
}

/* ==================================================================
 * 4. Rejilla de vehiculos
 * ================================================================== */

.av-coches-rejilla {
    padding-top: 20px;
}

/* 150px para que entren DOS columnas ya a 360px, igual que en la home: con el
   minmax(200px) del prototipo, 27 coches en una sola columna dan una pagina
   interminable en movil.
   auto-fit y NUNCA auto-fill: auto-fill deja columnas vacias cuando el ultimo
   filtro deja pocas tarjetas — en la home pinto 5 columnas para 4 tarjetas. */


/* Codigo de grupo del ERP ("Grupo B"). No es decoracion: hay dos Fiat 500
   distintos y sin esto son dos tarjetas identicas con distinto precio. */
.av-coche__grupo {
    display: block;
    margin-top: 3px;
    font-family: var(--av-fuente-texto);
    font-weight: 600;
    font-size: var(--av-t-mini);
    letter-spacing: .04em;
    color: var(--av-texto-3);
}

/* El nombre reserva dos lineas en la home; aqui lleva ademas el grupo debajo,
   asi que la reserva se hace sobre el bloque entero. */
.av-coches-rejilla .av-coche__nombre {
    min-height: 0;
}

/* Prestaciones. Van como pildoras y no como lista con vinetas: son 3-6 por
   coche y en columna se comian la mitad de la tarjeta. list-style:none con
   role implicito de lista se mantiene, asi que un lector de pantalla sigue
   anunciando "lista de N elementos". */
.av-coche__prestaciones {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.av-coche__prestaciones li {
    padding: 3px 8px;
    background: var(--av-fondo-suave);
    border-radius: 6px;
    font-size: var(--av-t-micro);
    line-height: 1.35;
    color: var(--av-texto-2);
}

.av-coche__desde {
    display: block;
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: var(--av-t-mini);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}

/* Los 8 vehiculos sin tarifa en la BD. Se pinta en el tamano del cuerpo y no
   en el de un precio: si fuera igual de grande competiria visualmente con los
   importes reales y la rejilla se leeria como si todo costara lo mismo. */
.av-v2 .av-coche__precio--consultar {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    line-height: 1.3;
    color: var(--av-texto-3);
}

.av-coches-rejilla__vacio {
    margin: 24px 0 0;
    padding: 20px;
    background: var(--av-fondo-suave);
    border-radius: var(--av-r-tarjeta);
    text-align: center;
    font-size: var(--av-t-base);
    color: var(--av-texto-2);
}

/* ==================================================================
 * 5. "Nuestra flota"
 * ================================================================== */

.av-coches-flota {
    padding-top: 44px;
}
.av-coches-flota__in {
    display: block;
}

/* Entradilla: el primer parrafo va mas grande y hace de punto de entrada.
   Doce parrafos del mismo tamano seguidos se leen como relleno aunque el
   texto valga; con una entradilla, el ojo sabe por donde empezar. */
.av-v2 .av-coches-flota__lead {
    font-size: var(--av-t-lead);
    line-height: 1.65;
    color: var(--av-marino);
}

.av-coches-flota__foto {
    margin: 20px 0 0;
    border-radius: var(--av-r-bloque);
    overflow: hidden;
    background: var(--av-fondo-suave);
}
.av-coches-flota__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔴 APAÑO SOBRE UN DEFECTO DEL ARCHIVO, no una decision de diseno.
       El adjunto 35820 trae un MARCO ROJO de unos 2px pegado en los cuatro
       lados de la propia imagen —comprobado abriendola sola sobre fondo
       negro, no es CSS de nadie—. El 3% de escala lo saca fuera del recorte.
       Se quita el dia que se suba una version limpia: ver AUTOVA-110. */
    transform: scale(1.03);
}

/* El reparto a dos columnas esta en la media query de 1024px. */
.av-coches-flota__cuerpo {
    margin-top: 22px;
}
.av-coches-flota__cuerpo > p:last-child {
    margin-bottom: 0;
}

/* Aviso de temporada. No es un parrafo mas: es un consejo, y suelto quedaba
   colgando en la mitad izquierda de la seccion sin nada al lado. */
.av-coches-temporada {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 32px;
    padding: 22px 20px;
    background: var(--av-arena);
    border-radius: var(--av-r-bloque);
}
.av-coches-temporada__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--av-blanco);
    color: var(--av-enlace);
}
.av-v2 .av-coches-temporada .av-h3 {
    font-size: var(--av-t-lg);
    margin-bottom: 6px;
}
/* Dentro de la caja el texto puede ir mas ancho: el fondo ya lo acota
   visualmente, que es lo que hacia falta y no un max-width. */
.av-v2 .av-coches-temporada p {
    max-width: none;
    margin-bottom: 0;
}

/* ==================================================================
 * 6. "Como elegir tu coche": las cuatro tarjetas guia
 * ================================================================== */

.av-grid--guia {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    /* Alineadas ARRIBA, no estiradas. Los cuatro textos son muy desiguales
       —el de las calas del norte tiene 8 lineas y el de la pareja 3—, y con la
       altura igualada las tres cortas quedaban con 130-180px de hueco muerto
       debajo. Con los topes alineados la diferencia se lee como lo que es:
       unas explicaciones mas largas que otras. */
    align-items: start;
}
.av-guia-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}
.av-guia-card:hover {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-3px);
}
/* Circulo con el numero. Fondo cian palido y numero en el cian oscuro: el cian
   de marca sobre ese fondo se queda en 2,4:1. */
.av-guia-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* El cian palido del prototipo no tiene token exacto: se usa --av-fondo-cielo,
       el mas cercano (diferencia minima, no se aprecia). Ver INCIDENCIAS.md. */
    background: var(--av-fondo-cielo);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-md);
    color: var(--av-enlace);
}
.av-v2 .av-guia-card__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-md);
    line-height: 1.25;
    margin: 0;
    color: var(--av-marino);
    /* Los titulos reales son mas largos que los del prototipo ("Si vas a las
       calas del norte" frente a "Calas del norte"): sin balance parten dejando
       una palabra sola en la segunda linea. */
    text-wrap: balance;
}
.av-guia-card__texto {
    margin: 0;
    font-size: var(--av-t-sm);
    line-height: 1.65;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 7. "Conducir en Menorca"
 * ================================================================== */

.av-coches-conducir {
    padding-top: 44px;
}
.av-conducir {
    display: grid;
    gap: 0;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    overflow: hidden;
}
.av-conducir__texto {
    padding: 28px 22px;
}
.av-conducir__texto p:last-child {
    margin-bottom: 0;
}

/* CAPITULAR. En movil NO se pinta: con el ancho de un movil, una letra de 46px
   flotando deja el primer parrafo en columnas de tres palabras. Se activa a
   partir de 768px. */
.av-conducir__entrada::first-letter {
    font-size: inherit;
}

.av-conducir__cita {
    padding: 28px 22px;
    background: var(--av-marino);
}
.av-conducir__comilla {
    display: block;
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: .6;
    color: var(--av-cielo);
}
.av-conducir__frase {
    margin: 14px 0 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-lead);
    line-height: 1.5;
    /* Blanco sobre marino: 12,9:1. */
    color: var(--av-blanco);
}
.av-conducir__sep {
    display: block;
    height: 1px;
    margin: var(--av-e-7b) 0;
    /* El prototipo usa rgba(255,255,255,.18); el token mas cercano es
       --av-sobre-blanco-12 (diferencia minima). */
    background: var(--av-sobre-blanco-12);
}
.av-conducir__pie {
    margin: 0;
    font-size: var(--av-t-meta);
    line-height: 1.6;
    color: var(--av-sobre-marino);
}

.av-coches-temporada {
    margin-top: 32px;
}
.av-coches-temporada p:last-child {
    margin-bottom: 0;
}

/* ==================================================================
 * 8. "Que mirar al elegir el tamano"
 * ================================================================== */

.av-coches-tamano {
    padding-top: 44px;
}
.av-grid--tamano {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.av-tamano-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px var(--av-e-7b);
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}
.av-tamano-card:hover {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-3px);
}
/* El icono hereda currentColor: en el prototipo iba al cian de marca a pelo y
   asi no responde al token. Se le da el cian oscuro (--av-enlace), que sobre
   el fondo palido pasa el contraste. */
.av-tamano-card__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--av-r-campo);
    background: var(--av-fondo-cielo);
    color: var(--av-enlace);
}
.av-tamano-card__texto {
    margin: 0;
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 9. "Donde recoger el coche"
 * ================================================================== */

.av-coches-enlaces {
    padding-top: 44px;
}
.av-grid--enlaces {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--av-e-7b);
    margin-top: 20px;
}
/* position:relative es lo que ancla el ::after del enlace. Si se quita, la
   zona clicable se encoge al rotulo — paso en las tarjetas de oficina de la
   home, donde el comentario decia "la tarjeta entera es clicable" y no lo era. */
.av-enlace-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}
.av-enlace-card:hover {
    box-shadow: var(--av-sombra-suave);
    transform: translateY(-3px);
}
.av-v2 .av-enlace-card__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-md);
    line-height: 1.25;
    margin: 0;
    color: var(--av-marino);
}
.av-enlace-card__texto {
    margin: 0;
    flex: 1;
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-texto-2);
}
/* SIN position: el ::after se ancla al ancestro posicionado, que tiene que ser
   la tarjeta. Como item flex el z-index funciona igual.

   🔴 21px DE ALTO, MEDIDO A 390px — por debajo del 24x24 de WCAG 2.5.8 (AA).
   No es un boton (`.av-btn`, que ya cumple 44px): es un enlace de texto corto,
   y ahi el minimo es 24, no 44. Mismo ajuste ya aplicado en
   `.av-fcoche__volver` / `.av-fcoche__recogida-ver`: min-height con flex en
   vez de subir el tamano de fuente, que cambiaria el diseno. */
.av-v2 .av-enlace-card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    align-self: flex-start;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-sm);
    color: var(--av-enlace);
}
.av-enlace-card__cta::after {
    content: "";
    position: absolute;
    inset: 0;
}
.av-enlace-card:focus-within {
    box-shadow: var(--av-focus);
}

/* ==================================================================
 * 10. Cierre y banda CTA
 * ================================================================== */

.av-coches-cierre {
    padding-top: 44px;
    padding-bottom: 8px;
}
.av-cta-banda {
    display: flex;
    flex-direction: column;
    gap: var(--av-e-7b);
    margin-top: 24px;
    padding: 26px 24px;
    background: var(--av-marino);
    border-radius: var(--av-r-bloque);
}
.av-cta-banda__texto {
    max-width: 56ch;
}
.av-cta-banda__titulo {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-lg);
    line-height: 1.25;
    color: var(--av-blanco);
}
.av-cta-banda__bajada {
    margin: 0;
    font-size: var(--av-t-sm);
    line-height: 1.6;
    color: var(--av-sobre-marino);
}
.av-cta-banda__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* El CTA principal sobre marino va CIAN CON TEXTO MARINO, que es lo que hace
   la base. Se repite aqui solo para dejar constancia: un av-btn--oscuro sobre
   esta banda seria invisible, que es exactamente lo que paso en la home. */
.av-cta-banda .av-btn {
    flex: 1 1 auto;
    /* Pildora, como en el diseno (06-catalogo.html:138-139): mismo motivo que
       el boton de la tarjeta de coche, ver el comentario de ahi arriba. */
    border-radius: var(--av-r-boton);
}

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

@media (min-width: 768px) {

    .av-coches-cab {
        padding-top: 40px;
    }
    .av-coches-filtros__in {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .av-coches-filtros .av-chips {
        flex: 1 1 100%;
        order: 1;
    }
    .av-coches-filtros__contador {
        order: 2;
    }
    .av-coches-filtros__orden {
        order: 3;
    }



    /* Texto a la izquierda y foto a la derecha, como el diseno. La foto es la
       de la biblioteca (adjunto 35820, "Nuestros Coches"), no una caja de
       maqueta. Si no hubiera foto, el parcial no pinta el <figure> y esto se
       queda en una sola columna sin hueco. */
    .av-coches-flota__in {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
        gap: 32px;
        align-items: center;
    }
    /* 16/10 y no el 4/3 del diseno: con 4/3 la foto medía 370px de alto contra
       los 237 del texto de al lado, y dejaba 133px de hueco vertical en la
       columna izquierda. A 16/10 la fila baja a ~309 y el hueco a la mitad.
       De paso el recorte se come las bandas roja superior e inferior. */
    .av-coches-flota__foto {
        margin: 0;
        aspect-ratio: 16 / 10;
    }

    /* Las dos columnas del bloque de conducir. El minmax(0, …) de la primera
       NO es decorativo: sin el, un parrafo largo desborda la celda en lugar de
       partir, porque el minimo por defecto de una columna de grid es auto. */
    .av-conducir {
        grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
    }
    .av-conducir__texto {
        padding: 36px clamp(24px, 4vw, 44px);
    }
    .av-conducir__cita {
        padding: 36px 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Ahora si: hay ancho para la capitular. */
    .av-conducir__entrada::first-letter {
        float: left;
        font-family: var(--av-fuente-titulo);
        font-weight: 800;
        font-size: 46px;
        line-height: .8;
        padding: 6px 10px 0 0;
        color: var(--av-marino);
    }

    .av-cta-banda {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 28px 32px;
    }
    .av-cta-banda__acciones {
        flex: none;
    }
    .av-cta-banda .av-btn {
        flex: none;
    }
}

/* ==================================================================
 * 12. Escritorio — 1024px
 * ================================================================== */

@media (min-width: 1024px) {

    .av-coches-cab {
        padding-top: 48px;
    }

    /* Los doce parrafos, a dos columnas. `columns` y no grid a proposito: el
       texto fluye solo y no hay que decidir a mano donde parte, que con doce
       parrafos de longitudes muy distintas seria un numero magico que se rompe
       en cuanto Alberto reescriba uno (AUTOVA-107).
       break-inside evita que un parrafo quede partido entre columnas. */
    .av-coches-flota__cuerpo {
        columns: 2;
        column-gap: 48px;
    }
    .av-v2 .av-coches-flota__cuerpo p {
        /* Sin la medida de 68ch: aqui la columna ya la impone, y con el
           max-width puesto las columnas salian de 600px con el texto pegado
           a la izquierda de cada una. */
        max-width: none;
        break-inside: avoid;
        margin-top: 0;
    }

    .av-coches-flota,
    .av-coches-conducir,
    .av-coches-tamano,
    .av-coches-enlaces,
    .av-coches-cierre {
        padding-top: 56px;
    }

}

/* ==================================================================
 * 13. Movimiento reducido
 * ================================================================== */

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

    .av-guia-card,
    .av-tamano-card,
    .av-enlace-card {
        transition: none;
    }
    .av-guia-card:hover,
    .av-tamano-card:hover,
    .av-enlace-card:hover {
        transform: none;
    }
}