/* Auto Design - ficha del vehiculo (Figma 246:891).
   A diferencia de Marcas y Nuevos Autos, esta seccion va sobre fondo blanco. */

/* El tema repite el titulo del vehiculo en su propia franja blanca; la ficha
   ya trae el suyo con fecha y migaja. Esta hoja solo carga en la ficha. */
.infinite-page-title-wrap { display: none; }

.adc-detalle {
    background: var(--adc-blanco);
    color: var(--adc-texto);
    /* Compensacion del header en overlay, medida en vivo por
       assets/header.js. Ver la nota larga ahi. */
    padding: var(--adc-tapa-aire) 0 72px;
}
.adc-detalle .adc-contenedor { max-width: 1344px; }

/* --- Encabezado --------------------------------------------------------- */
.adc-detalle .adc-ficha-head {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}
.adc-detalle .adc-fecha {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-right: 30px;
    border-right: 1px solid var(--adc-borde);
    text-transform: uppercase;
    color: var(--adc-oscuro);
}
.adc-detalle .adc-fecha-dia { font-size: 22px; line-height: 1; font-weight: 800; }
.adc-detalle .adc-fecha-mes { font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: 1px; }
.adc-detalle .adc-fecha-anio { font-size: 11px; line-height: 1; font-weight: 600; color: var(--adc-texto-sec); }

/* flex:1 1 0 ademas de min-width:0: sin la base 0 el item toma el ancho del
   contenido como minimo y el titulo largo se desborda en pantallas chicas en
   vez de envolver. overflow-wrap cubre nombres de version sin espacios. */
.adc-detalle .adc-ficha-titulo { flex: 1 1 0; min-width: 0; }
.adc-detalle .adc-ficha-titulo h1 { overflow-wrap: anywhere; }
.adc-detalle .adc-ficha-titulo h1 {
    margin: 0;
    font-size: 41px;
    line-height: 49.2px;
    font-weight: 800;
    color: var(--adc-oscuro);
}
.adc-detalle .adc-migaja {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adc-oscuro);
}
.adc-detalle .adc-migaja a { color: inherit; text-decoration: none; }
.adc-detalle .adc-migaja a:hover { color: var(--adc-rojo); }
.adc-detalle .adc-migaja-icono { width: auto; height: 15px; color: var(--adc-texto-sec); }
.adc-detalle .adc-migaja-icono svg { width: auto; height: 100%; }

/* --- Cuerpo: contenido + barra lateral ---------------------------------- */
.adc-detalle .adc-ficha-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 773px) 1fr;
    gap: 40px;
    align-items: start;
}
.adc-detalle .adc-ficha-principal { min-width: 0; }

/* --- Galeria ------------------------------------------------------------ */
/* Caja fija 16:10 y la foto la llena centrada con `cover` (desde 2.8.4).
   Antes la caja tomaba la altura de la imagen para no dejar franjas; con las
   fotos sin editar del cliente (16:9, 4:3, cuadradas) eso hacia que la caja
   brincara de altura al cambiar de miniatura y que una foto cuadrada de BYD
   ocupara media pantalla. Misma proporcion que las miniaturas: lo que se ve
   en la miniatura es lo que se ve en grande. */
.adc-detalle .adc-galeria-grande {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--adc-borde);
    border-radius: 6px;
    overflow: hidden;
    display: block;
    background: var(--adc-blanco);
}
.adc-detalle .adc-galeria-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.adc-detalle .adc-galeria-vacia {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: repeating-linear-gradient(135deg, #F4F4F4 0 12px, #ECECEC 12px 24px);
}

/* Son cuatro fotos por modelo (frontal, lateral, interior, trasera) y el
   diseno las quiere en un solo renglon. Debajo de 760px cuatro columnas dejan
   miniaturas ilegibles, asi que la tira pasa a carrusel horizontal (ver el
   bloque responsivo).

   Flex CENTRADO y no `grid-template-columns: repeat(4, 1fr)`: con la rejilla,
   un modelo con 2 o 3 fotos las dejaba pegadas a la izquierda y la fila
   quedaba coja (visto en el ADX Base 2026, que trae 3). Con flex la miniatura
   conserva el mismo ancho que tendria en la rejilla de 4 —flex-basis es el
   calculo exacto de una columna, gap incluido— y el grupo se centra bajo la
   foto grande. Con 4 fotos el resultado es identico al de antes.
   Con una sola foto la tira ni se imprime (ver single-vehiculo.php). */
.adc-detalle .adc-galeria-tiras {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.adc-detalle .adc-galeria-tiras > li {
    flex: 0 1 calc((100% - 3 * 14px) / 4);
    min-width: 0;
}
.adc-detalle .adc-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    /* La miniatura es un <button>: sin esto el navegador le mete su padding
       por omision (1px 6px) y la foto queda con franjas a los lados. */
    padding: 0;
    border: 1px solid var(--adc-borde);
    border-radius: 6px;
    background: var(--adc-blanco);
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}
/* La miniatura se llena por completo. Las fotos del catalogo son 16:9, igual
   que la caja, asi que `cover` no recorta nada; y si alguna viniera con otra
   proporcion, recortar los bordes de una miniatura es preferible a dejar
   franjas blancas que rompen la fila. */
.adc-detalle .adc-mini img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* La seleccionada va a color pleno y las demas apagadas, para que se vea de
   un vistazo cual esta arriba. */
.adc-detalle .adc-mini { opacity: .5; }
.adc-detalle .adc-mini:hover { opacity: .85; border-color: var(--adc-texto-sec); }
.adc-detalle .adc-mini-activa,
.adc-detalle .adc-mini-activa:hover { opacity: 1; border-color: var(--adc-rojo); }
.adc-detalle .adc-mini:focus-visible { outline: 2px solid var(--adc-rojo); outline-offset: 2px; }

/* --- Especificaciones --------------------------------------------------- */
.adc-detalle .adc-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 20px;
    margin: 38px 0 0;
}
.adc-detalle .adc-spec { display: flex; flex-direction: column; gap: 10px; }
.adc-detalle .adc-spec dt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}
/* Los iconos que exporta el Figma no son cuadrados (el de Categoria mide
   48.8x18). Se fija el ALTO y el ancho se deja libre, si no el SVG se
   deforma: base.css estira los iconos al 100% de su caja. */
.adc-detalle .adc-spec-icono {
    width: auto;
    height: 18px;
    color: var(--adc-oscuro);
}
.adc-detalle .adc-spec-icono svg { width: auto; height: 100%; }
.adc-detalle .adc-spec-etiqueta {
    font-size: 14px;
    font-weight: 500;
    color: var(--adc-texto-tenue);
    line-height: 1.3;
}
/* Todas las cajas miden lo mismo (los 51px del Figma, o sea dos renglones)
   aunque el valor sea una sola palabra: con altura automatica "CVT" quedaba
   la mitad de alto que "Sedan/Liftback premium deportivo" y la rejilla se
   veia despareja. El texto se centra vertical y horizontalmente; si algun
   valor necesita tres renglones la caja crece, no se recorta. */
.adc-detalle .adc-spec dd {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 51px;
    padding: 6px 12px;
    border-radius: 5px;
    background: var(--adc-gris-caja);
    font-size: 13px;
    line-height: 1.45;
    color: var(--adc-texto);
    text-align: center;
    /* adas y equipamiento son textareas: conserva sus saltos de linea */
    white-space: pre-line;
}
/* Que la caja no se estire mas que sus hermanas de la misma fila. */
.adc-detalle .adc-spec { align-self: start; }

/* --- Barra lateral ------------------------------------------------------ */
/* --- Precio (barra lateral) ---------------------------------------------
   El cliente lo pidio arriba de los enlaces. Va en la misma caja gris con
   borde que usan las specs, para no meter un color nuevo en una ficha que
   es toda blanco, gris y el rojo de marca. */
.adc-detalle .adc-ficha-precio {
    margin: 0 0 22px;
    padding: 18px 20px;
    border: 1px solid var(--adc-borde);
    border-radius: 8px;
    background: var(--adc-gris-caja);
    text-align: center;
}
.adc-detalle .adc-ficha-precio-etiqueta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adc-texto-tenue);
}
.adc-detalle .adc-ficha-precio-valor {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--adc-oscuro);
}

.adc-detalle .adc-ficha-enlaces {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 26px;
    text-align: center;
}
.adc-detalle .adc-ficha-enlaces a {
    font-size: 15px;
    color: #2B6CB0;
    text-decoration: none;
}
.adc-detalle .adc-ficha-enlaces a:hover { text-decoration: underline; }

.adc-detalle .adc-anuncio { margin: 0 0 28px; text-align: center; }
.adc-detalle .adc-anuncio-titulo {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--adc-texto);
}

/* --- Banner del comparador ---------------------------------------------- */
.adc-detalle .adc-banner {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 52px 0 0;
    padding: 26px 34px;
    border-radius: 8px;
    background: linear-gradient(90deg, #DD3333 0%, #D02D2D 58%, #A81F1F 100%);
    color: var(--adc-blanco);
}
.adc-detalle .adc-banner-marca {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}
.adc-detalle .adc-banner-icono {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    color: var(--adc-blanco);
}
.adc-detalle .adc-banner-marca h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.12;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--adc-blanco);
}
.adc-detalle .adc-banner-texto {
    flex: 1 1 auto;
    margin: 0;
    padding-left: 34px;
    border-left: 1px solid rgba(255,255,255,.45);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.95);
}
.adc-detalle .adc-banner-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--adc-blanco);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.adc-detalle .adc-banner-cta:hover {
    background: var(--adc-blanco);
    color: var(--adc-rojo);
}

/* --- Responsivo --------------------------------------------------------- */
@media (max-width: 1080px) {
    .adc-detalle .adc-ficha-cuerpo { grid-template-columns: 1fr; gap: 34px; }
    .adc-detalle .adc-specs { grid-template-columns: repeat(3, 1fr); }
    .adc-detalle .adc-ficha-titulo h1 { font-size: 32px; line-height: 40px; }
}
@media (max-width: 780px) {
    .adc-detalle .adc-banner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .adc-detalle .adc-banner-texto { padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
    .adc-detalle { padding: calc(var(--adc-tapa) + 48px) 0 48px; }
    .adc-detalle .adc-ficha-head { gap: 18px; margin-bottom: 28px; }
    .adc-detalle .adc-fecha { padding-right: 18px; }
    .adc-detalle .adc-ficha-titulo h1 { font-size: 24px; line-height: 31px; }
    .adc-detalle .adc-specs { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .adc-detalle .adc-galeria-tiras { gap: 10px; }
}

/* Cuatro miniaturas en un renglon dejan de leerse por debajo de ~760px de
   ancho de columna: la tira pasa a carrusel horizontal con arrastre y
   anclaje, en vez de partirse en dos filas desiguales. */
@media (max-width: 760px) {
    .adc-detalle .adc-galeria-tiras {
        display: flex;
        /* Obligatorio reponerlo: la regla base va con `wrap` para centrar el
           grupo, y aqui la tira tiene que quedarse en UN renglon y desplazarse.
           Sin esto se partia en dos filas en vez de hacer carrusel. */
        flex-wrap: nowrap;
        /* `safe` y no `center` a secas: aqui la tira desborda a proposito, y un
           flex centrado que desborda deja las primeras miniaturas fuera del
           area con scroll, inalcanzables. Con `safe` se centra cuando cabe
           (2 fotos) y se ancla a la izquierda cuando no (3 o 4). */
        justify-content: safe center;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .adc-detalle .adc-galeria-tiras > li {
        flex: 0 0 40%;
        min-width: 0;
        scroll-snap-align: start;
    }
}
@media (max-width: 480px) {
    .adc-detalle .adc-galeria-tiras > li { flex-basis: 56%; }
    .adc-detalle .adc-ficha-precio-valor { font-size: 23px; }
}

/* ============================================================
   Anulaciones contra el tema Infinite (ver nota en nuevos-autos.css)
   ============================================================ */
.adc-detalle .adc-ficha-titulo h1 { color: var(--adc-oscuro); }
.adc-detalle .adc-banner .adc-banner-marca h2 { color: var(--adc-blanco); }
.adc-detalle .adc-ficha-enlaces a { color: #2B6CB0; }
.adc-detalle a.adc-banner-cta { color: var(--adc-blanco); text-decoration: none; }
.adc-detalle a.adc-banner-cta:hover { color: var(--adc-rojo); }

/* Las miniaturas SI llevan proporcion fija: tienen que formar un renglon
   parejo aunque las fotos vengan de distintos tamanos. Se recorta con `cover`,
   que en una miniatura no se nota. La caja grande no lleva ninguna, ver arriba.
   16/10 esta mas cerca del 1.62 real de las fotos que 16/9, asi que recorta
   menos. */
.adc-detalle .adc-galeria-grande { border-color: var(--adc-borde); }
.adc-detalle .adc-mini { aspect-ratio: 16 / 10; }

/* ============================================================
   Uso de !important, y con motivo (el otro esta en base.css,
   para prefers-reduced-motion, que es un caso de accesibilidad):
   el tema Infinite trae un script que calcula tamanos de fuente
   y los escribe COMO ESTILO INLINE en los h1 del contenido
   (medido en vivo: style="font-size: 40px"). Un estilo inline
   gana sobre cualquier regla CSS, asi que sin !important el
   titulo se queda en 40px tambien en telefonos.
   Solo se fuerza el tamano y el interlineado; el resto de las
   propiedades siguen ganando por especificidad normal.
   ============================================================ */
.adc-detalle .adc-ficha-titulo h1 { font-size: 41px !important; line-height: 49.2px !important; }
@media (max-width: 1080px) {
    .adc-detalle .adc-ficha-titulo h1 { font-size: 32px !important; line-height: 40px !important; }
}
@media (max-width: 620px) {
    .adc-detalle .adc-ficha-titulo h1 { font-size: 24px !important; line-height: 31px !important; }
}