/*
 * Autos Valls · Theme v2 — Ficha de coche
 * ----------------------------------------
 * /nuestros-coches/{modelo}/  ·  Pantalla 07 del diseño «Pantallas en vivo».
 *
 * Se carga ENCIMA de theme-v2-base.css, que trae el chrome (.av-wrap,
 * .av-seccion, .av-btn, .av-migas, .av-card, .av-chip, .av-precio,
 * .av-lista-check, el buscador del plugin re-estilado...). Aquí solo va lo
 * propio de esta página: la rejilla de dos columnas, la galería, la rejilla
 * de datos técnicos y el ajuste del buscador a una tarjeta estrecha.
 *
 * Mobile-first: todas las media queries son min-width. Cero hex (I1): todo
 * por var(--av-*).
 */

/* ====================================================================
 * 1. Volver al catálogo
 * ==================================================================== */

/* --av-enlace y NO --av-cielo: el diseño pinta este enlace en cian puro
   (2.78:1 sobre blanco, no llega a AA). Mismo ajuste que ya usa el resto del
   sistema para texto sobre blanco fuera del CTA. */
/* min-height 24px y no 44: es un enlace de texto, no un boton, y WCAG 2.5.8
   (AA) pide 24x24 a los objetivos que no van en linea dentro de un parrafo.
   Medido a 390px daba 20px de alto. El margen negativo compensa el padding
   para que no se mueva nada de sitio. */
.av-fcoche__volver {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: var(--av-e-1) 0;
    gap: var(--av-e-2);
    margin-bottom: calc(var(--av-e-7) - var(--av-e-1));
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-nav);
    color: var(--av-enlace);
    text-decoration: none;
}

.av-fcoche__volver:hover,
.av-fcoche__volver:focus-visible {
    text-decoration: underline;
}

/* ====================================================================
 * 2. La rejilla de dos columnas
 * ==================================================================== */

.av-fcoche {
    padding-top: var(--av-e-9);
}

/* auto-fit y no auto-fill: con una sola tarjeta en el aside, auto-fill
   dejaría una tercera pista fantasma vacía en pantallas muy anchas, igual
   que ya se documentó para la home. minmax(320px,...) evita que la columna
   de reserva se aplaste por debajo de lo que el buscador necesita. */
.av-fcoche__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--av-e-11);
    align-items: start;
}

.av-fcoche__principal {
    display: flex;
    flex-direction: column;
    gap: var(--av-e-8);
    min-width: 0;
}

.av-fcoche__aside {
    display: flex;
    flex-direction: column;
    gap: var(--av-e-6);
    min-width: 0;
}

/* ====================================================================
 * 3. Galería — SIN "FOTO REAL DE FLOTA": si falta una imagen no hay hueco
 *    (mismo criterio que coches-v2/rejilla.php, ver theme-v2-ficha-coche.php).
 * ==================================================================== */

.av-fcoche__foto {
    border-radius: var(--av-r-bloque);
    overflow: hidden;
    background: var(--av-fondo-suave);
}

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

/*
 * 🔴 CON auto-fit Y `1fr` COMO TECHO, LA FILA DE MINIATURAS DESAPARECÍA.
 *
 * El diseño pinta 4 miniaturas fijas (EXTERIOR/INTERIOR/MALETERO/EN RUTA);
 * la BD real solo trae 1 o 2 fotos por vehiculo (`item_image_2`, casi nunca
 * `item_image_3` — comprobado por consulta directa, no supuesto). Con
 * `auto-fit` y `minmax(110px, 1fr)`, UNA sola miniatura colapsa las columnas
 * vacias y el `1fr` la estira a TODO el ancho de la galeria: se pintaba como
 * una segunda foto grande apilada, no como una miniatura. Es el mismo defecto
 * que ya document. AV-T-108/109 para huecos con un solo elemento en un grid
 * elastico.
 *
 * Se quita el `1fr`: `auto-fill` con techo fijo (140px) dejan la miniatura en
 * su tamaño real sea cual sea el numero de fotos, y el sobrante de la fila
 * queda vacio en vez de repartirse entre las que hay. No se etiqueta cada
 * miniatura ("EXTERIOR"/"INTERIOR"...) porque no sabemos que es cada foto en
 * la BD real: inventar la etiqueta seria el mismo error que rechaza
 * COMPARAR.md para los datos.
 */
.av-fcoche__miniaturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 140px));
    gap: var(--av-e-5);
    margin-top: var(--av-e-5);
}

.av-fcoche__mini {
    border-radius: var(--av-r-campo);
    overflow: hidden;
    background: var(--av-fondo-suave);
}

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

/* ====================================================================
 * 4. Título y subtítulo
 * ==================================================================== */

/* clamp() propio y no --av-t-h1 (que es clamp(30,4.4vw,52) — el H1 de home):
   mismo criterio que theme-v2-ficha.css:143, cada hero/H1 de página trae su
   propia escala cuando el diseño la pide más pequeña que la de home. */
.av-fcoche__h1 {
    margin: 0 0 var(--av-e-3);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h1-pagina);
    line-height: 1.1;
    color: var(--av-marino);
}

/* --av-texto-3 y NO el gris de rotulo del diseño.
   Aquí decía "el gris del diseño vale porque es una línea corta de ficha
   técnica". Al medirlo con Chrome dio 2,24:1 y era ilegible: "Mini · Manual ·
   4 plazas · Aire Acondicionado" es información que se lee, y WCAG no exime a
   un texto por ser corto. El token de ese gris ya no existe (ver la cabecera de
   theme-v2-tokens.css). --av-texto-3 da 5,5:1. */
.av-fcoche__subtitulo {
    margin: 0 0 var(--av-e-7);
    font-size: var(--av-t-entradilla);
    color: var(--av-texto-3);
}

/* ====================================================================
 * 5. Prosa — el copy SEO del post_content, ya podado de shortcodes.
 * ==================================================================== */

.av-fcoche__prosa {
    max-width: var(--av-medida);
    font-size: var(--av-t-md);
    line-height: 1.75;
    color: var(--av-texto-2);
}

.av-fcoche__prosa > *:first-child { margin-top: 0; }
.av-fcoche__prosa > *:last-child { margin-bottom: 0; }

.av-fcoche__prosa h2 {
    margin: var(--av-e-9) 0 var(--av-e-5);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h4);
    color: var(--av-marino);
}

.av-fcoche__prosa h3 {
    margin: var(--av-e-8) 0 var(--av-e-4);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-lg);
    color: var(--av-marino);
}

.av-fcoche__prosa p { margin: 0 0 var(--av-e-7); }

.av-fcoche__prosa ul,
.av-fcoche__prosa ol {
    margin: 0 0 var(--av-e-7);
    padding-left: 20px;
}

.av-fcoche__prosa li { margin-bottom: var(--av-e-2); }

.av-fcoche__prosa a { color: var(--av-enlace); }

/* 🔴 EL "BOTÓN" DE TELÉFONO DEL post_content NO ES UN SHORTCODE, ES UN <a
   class="button big">. No lo intercepta el mecanismo de arriba (que solo
   redirige TAGS de shortcode) y hereda el degradado azul del TEMA PADRE
   (linear-gradient cian->marino) con el texto en --av-enlace, un azul
   oscuro que sobre ese fondo se lee mal — medido en Chrome, no a ojo: el
   propio número de teléfono quedaba casi ilegible. Se neutraliza aquí, con
   una regla más específica que la del padre, para que se vea como el resto
   de enlaces de la prosa: mismo texto real, sin la píldora. */
.av-fcoche__prosa a.button.big {
    display: inline;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--av-enlace);
    font-weight: 700;
}

/* ====================================================================
 * 6. Rejilla de datos técnicos
 * ==================================================================== */

.av-fcoche__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--av-e-5);
}

/* .av-card + .av-card--plana: la tarjeta compartida sin la sombra/elevación
   al pasar el ratón (I2 — no se redeclara .av-card, solo se le añade el
   padding que le falta con una clase propia, tal y como pide el §1 del
   contrato). El radio real es --av-r-tarjeta (14px, el de .av-card) y no el
   --av-r-chip (12px) que dibuja el prototipo: la diferencia de 2px no se
   aprecia y así la caja sigue siendo la MISMA tarjeta que el resto del
   sitio, no una cuarta variante de radio. */
.av-fcoche__dato {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--av-e-6);
}

.av-fcoche__dato-etq {
    font-size: var(--av-t-mini);
    color: var(--av-texto-3);
}

.av-fcoche__dato-val {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-base);
    color: var(--av-marino);
}

/* ====================================================================
 * 7. "Qué incluye" — .av-lista-check compartida, sin redeclarar
 * ==================================================================== */

.av-fcoche__h2 {
    margin: var(--av-e-4) 0 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h4);
    color: var(--av-marino);
}

.av-fcoche__incluye {
    margin-top: var(--av-e-6);
}

/* ====================================================================
 * 8. Aside · tarjeta de reserva
 * ==================================================================== */

/* Compuesto con .av-buscador__caja (base.css) a propósito: así las reglas
   de base para .form-group/label/input/select/submit siguen aplicando (son
   selectores descendientes de esa clase) y aquí solo se pisan las
   propiedades DE LA CAJA MISMA — que en base están pensadas para flotar a
   caballo de un hero ancho, no para una tarjeta de aside. Mismo patrón que
   pide el §1 del contrato para "ajustar con una variable local", llevado a
   nivel de selector porque aquí lo que cambia es la caja entera, no un solo
   valor. */
.av-fcoche__reserva.av-buscador__caja {
    margin-top: 0;
    padding: var(--av-e-8);
    border: 1.5px solid var(--av-cielo);
    border-radius: var(--av-r-bloque);
    box-shadow: none;
}

.av-fcoche__reserva-cab {
    margin-bottom: var(--av-e-6);
}

.av-fcoche__reserva-tit {
    margin: 0 0 var(--av-e-3);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-base);
    color: var(--av-marino);
}

.av-fcoche__precio-consultar {
    margin: 0;
    font-size: var(--av-t-sm);
    color: var(--av-texto-3);
}

/*
 * El buscador real del plugin es horizontal (ubicación + fecha/hora x2 +
 * edad + cupón, en columnas Bootstrap 3 que solo colapsan por MEDIA QUERY
 * DE VIEWPORT). Metido en una tarjeta de ~380px de un layout de escritorio,
 * esas columnas seguirían intentando ir lado a lado -contra el ancho real
 * que tienen aquí, no el del viewport-. Se fuerza a una sola columna
 * SIEMPRE, sea cual sea el ancho de pantalla: es la única forma de que este
 * widget (que no se toca ni se reimplementa, ver la cabecera de
 * av_v2_coche_buscador_shortcode()) quepa en un aside sin desbordar.
 */
.av-fcoche__reserva.av-buscador__caja [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    float: none;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Al forzar la columna única, la fecha y la hora dejan de estar
   lado a lado: se restauran los bordes y el radio completos que base.css
   les quita para "unirlas" visualmente cuando sí son vecinas. */
.av-fcoche__reserva.av-buscador__caja .form-group input.pickup-date,
.av-fcoche__reserva.av-buscador__caja .form-group input.return-date {
    border-right-width: 1px !important;
    border-top-right-radius: var(--av-r-campo) !important;
    border-bottom-right-radius: var(--av-r-campo) !important;
}

.av-fcoche__reserva.av-buscador__caja .form-group select.pickup-time {
    border-top-left-radius: var(--av-r-campo) !important;
    border-bottom-left-radius: var(--av-r-campo) !important;
}

/* ====================================================================
 * 9. Aside · dónde recoges
 * ==================================================================== */

.av-fcoche__recogida {
    padding: var(--av-e-7);
}

.av-fcoche__recogida-tit {
    margin: 0 0 var(--av-e-4);
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-sm);
    color: var(--av-marino);
}

.av-fcoche__recogida-p {
    margin: 0 0 var(--av-e-4);
    font-size: var(--av-t-cap);
    line-height: 1.7;
    color: var(--av-texto-2);
}

/* La lista de oficinas de recogida, COMPACTA a proposito.
   Son 12 enlaces; en vertical suben el aside por encima del alto de la ventana y
   su `position: sticky` deja de pegarse. En linea ocupan tres renglones. */
.av-fcoche__recogida-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--av-e-2) var(--av-e-3);
    margin: var(--av-e-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--av-t-meta);
    line-height: 1.5;
}

/* Separador tipografico entre oficinas: evita doce vinetas y evita tener que
   escribir comas en el PHP, que serian texto de cara al publico. */
.av-fcoche__recogida-item + .av-fcoche__recogida-item::before {
    content: "·";
    margin-right: var(--av-e-3);
    color: var(--av-texto-3);
}

.av-fcoche__recogida-item a {
    color: var(--av-enlace);
}

.av-fcoche__recogida-lista a {
    color: var(--av-enlace);
}

/* Igual que .av-fcoche__volver: 19px medidos a 390px, por debajo de los 24x24
   de WCAG 2.5.8. */
.av-fcoche__recogida-ver {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-cap);
    color: var(--av-enlace);
    text-decoration: none;
}

.av-fcoche__recogida-ver:hover,
.av-fcoche__recogida-ver:focus-visible {
    text-decoration: underline;
}

/* ====================================================================
 * 10. Escritorio — la columna de reserva se queda pegajosa mientras se lee
 *     la ficha larga, como cualquier aside de compra.
 * ==================================================================== */

/* EL STICKY ES LA TARJETA DE RESERVA, NO EL ASIDE ENTERO. 2026-08-20.
 *
 * Antes lo era el aside, y llevaba tiempo sin hacer nada: medido, el aside media
 * 1.101px de alto. Un elemento sticky mas alto que la ventana NO SE PEGA -- se
 * comporta como estatico. La regla existia y era decorativa.
 *
 * Al recortar el formulario bajo a 794px, y al encender la lista de oficinas
 * subio a 898px: seguia al borde de cualquier portatil. Asi que en vez de elegir
 * entre el sticky y los 228 enlaces internos, se pega solo lo que interesa que
 * acompañe al scroll -- el formulario, ~560px -- y la tarjeta de recogida se queda.
 *
 * `align-self: stretch` en el aside NO es cosmetico: sticky solo se mueve dentro
 * de la caja de su padre. Con el `align-items: start` de la rejilla, el aside mide
 * lo que su contenido y la tarjeta se despegaria a los ~340px de scroll. Estirado,
 * el aside ocupa toda la fila y la tarjeta acompaña la pagina entera.
 */
@media (min-width: 900px) {
    .av-fcoche__aside {
        align-self: stretch;
    }

    .av-fcoche__reserva {
        position: sticky;
        top: var(--av-e-8);
    }
}

/* ==================================================================
 * 99. Rescates del post_content
 * ==================================================================
 *
 * 🔴 EL ENLACE DEL TELEFONO DE LA PROSA SALE EN Poppins, Y NO ES SUYO.
 *
 * El post_content de las fichas trae `<a class="button big" href="tel:…">`, y
 * `.button` hereda la regla GLOBAL del tema PADRE (`theme-options.min.css`:
 * "button, input[type=submit], .button { font-family:'Poppins',sans-serif }").
 * Es el mismo archivo generado por el panel Redux que ya dejaba una sombra
 * fantasma en cada boton (ver el reset de theme-v2-base.css) y que pinta el
 * buscador. No se puede editar a mano: el panel lo reescribe.
 *
 * marca.mjs lo conto: un nodo, pero es el TELEFONO, y sale en las 45 fichas.
 *
 * Mismo criterio que `.faq-question` en theme-v2-ficha.css y que
 * `.vc_tta-panel-title` en theme-v2-landing.css: el codigo de terceros pinta
 * DENTRO de nuestra plantilla, y quien abre la pagina no distingue de quien es
 * la regla.
 */
.av-v2 .av-fcoche__prosa .button {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
}

/* ====================================================================
 * 11. Otros coches que te pueden servir
 *
 * Bloque a sangre y con fondo propio: separa visualmente lo que es NAVEGACION
 * de lo que es el vehiculo. Sin el cambio de fondo se leia como una seccion mas
 * de la ficha y quedaba pegado al pie.
 *
 * La rejilla (.av-grid--coches) y la tarjeta (.av-coche-tarjeta) viven en
 * theme-v2-base.css: las comparte con la ficha de oficina.
 * ==================================================================== */

.av-fcoche__otros {
    margin-top: var(--av-e-11);
    padding: var(--av-e-11) 0 var(--av-e-12);
    background: var(--av-arena);
}

.av-fcoche__otros-tit {
    margin: 0 0 var(--av-e-8);
}

/* 🔴 EL ENLACE NO PUEDE IR EN --av-enlace SOBRE ARENA.
 *
 * Medido con contraste.mjs nada mas montar el bloque: 4,42:1, y el minimo para
 * texto normal es 4,5. Ese mismo token sobre BLANCO da 5,02 y pasa — por eso el
 * token no esta mal y no se toca: lo que falla es la combinacion.
 *
 * Es una trampa general de este proyecto: cualquier `.av-enlace` que caiga sobre
 * `--av-arena` se queda a 4,42. Hoy solo pasa aqui (comprobado en home, oficinas,
 * ficha de oficina y contacto: todas OK), asi que se arregla en su sitio y no se
 * mueve nada global. Si aparece un segundo caso, esta regla se sube a base.css.
 *
 * --av-texto-2 sobre arena da 11,37:1. Se mantiene el subrayado para que siga
 * leyendose como enlace y no como texto suelto. */
.av-fcoche__otros-mas {
    margin: var(--av-e-8) 0 0;
}

.av-fcoche__otros-mas .av-enlace {
    color: var(--av-texto-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}