/* Auto Design - listado de modelos por marca (Figma 235:506) */

/* La franja blanca de titulo que imprime el tema ("Acura ADX Base") sobra:
   esta plantilla trae su propio encabezado. Esta hoja solo carga aqui. */
/* ============================================================
   Compensacion del header del tema
   ------------------------------------------------------------
   El header de Infinite es transparente y va en OVERLAY, no en
   flujo, asi que hay que empujar la seccion hacia abajo. Cuanto
   depende del ancho, y ya no se clava aqui: lo mide
   assets/header.js y lo publica en --adc-header. Ver la nota
   larga en ese archivo y los respaldos en base.css.
   ============================================================ */
.infinite-page-title-wrap { display: none; }

/* La franja clara bajo la seccion es `.infinite-body-wrapper`, que el tema
   pinta de blanco con `body.infinite-full .infinite-body-wrapper` (0,2,1).
   Un `body:has(...) .clase` empata en 0,2,1 y PIERDE por orden de carga,
   porque la hoja del tema va despues. El `html` inicial sube a 0,2,2 y gana. */
html body:has(.adc-nuevos),
html body:has(.adc-nuevos) .infinite-body-wrapper,
html body:has(.adc-nuevos) .infinite-body-outer-wrapper,
html body:has(.adc-nuevos) .infinite-page-wrapper,
html body:has(.adc-nuevos) .infinite-content-container,
html body:has(.adc-nuevos) .infinite-content-area { background-color: #000; }

.adc-nuevos {
    background-color: #000;
    /* Textura de humo del Figma, exportada del propio archivo en vez de
       reconstruida con degradados: la version anterior apilaba cinco
       repeating-linear-gradient y no se parecia al diseno. Ademas el
       backdrop-filter de las tarjetas necesita una imagen real detras para
       que el desenfoque se note. */
    background-image: url("img/fondo-humo.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: var(--adc-blanco);
    padding: var(--adc-tapa-aire) 0 88px;
}

.adc-nuevos .adc-nuevos-titulo {
    margin: 0 0 44px;
    font-size: 41px;
    line-height: 49.2px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adc-blanco);
}
.adc-nuevos-titulo span { color: var(--adc-rojo); }
/* El subrayado corto rojo bajo el titulo */
.adc-nuevos .adc-nuevos-titulo::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 12px;
    background: var(--adc-rojo);
}

/* --- Rejilla de vehiculos ----------------------------------------------- */
.adc-nuevos .adc-autos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.adc-nuevos .adc-auto {
    display: flex;
    flex-direction: column;
    border-radius: var(--adc-radio);
    /* Mismo cristal que las tarjetas de Marcas: 12% sobre fondo oscuro. */
    background: var(--adc-vidrio);
    -webkit-backdrop-filter: blur(var(--adc-vidrio-blur));
    backdrop-filter: blur(var(--adc-vidrio-blur));
    border: 1px solid var(--adc-vidrio-borde);
    overflow: hidden;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.adc-auto:hover,
.adc-nuevos .adc-auto:focus-visible {
    background: rgba(199, 199, 199, .20);
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-3px);
}
.adc-nuevos .adc-auto:focus-visible {
    outline: 2px solid var(--adc-rojo);
    outline-offset: 3px;
}

/* La foto llena TODA la caja 16:10, centrada, sea cual sea su proporcion
   (desde 2.8.4). Las fotos del cliente se suben sin editar y llegan en 16:9,
   4:3 y cuadradas (BYD); con `contain` cada marca salia de otro tamano y las
   cuadradas estiraban la tarjeta. Con `cover` + posicion absoluta la caja
   siempre mide lo mismo y la foto se recorta parejo por los bordes.
   Los iconos (energia, patrocinado) van encima con un fondo oscuro propio,
   porque el fondo de estudio de las fotos es claro. */
.adc-nuevos .adc-auto-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.adc-nuevos .adc-auto-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
/* Hueco cuando el vehiculo todavia no tiene foto: mantiene la altura de la
   tarjeta para que la rejilla no se descuadre.
   Antes era un rayado diagonal, que se leia como "imagen rota". Ahora va el
   logo de Auto Design sobre un panel mas oscuro que la tarjeta: el logo es
   plateado sobre transparente y necesita fondo oscuro para verse.
   `contain` + 58% para que quede holgado en cualquier ancho de tarjeta y no
   se deforme; la opacidad lo baja al tono de un marcador de posicion, sin
   competir con las tarjetas que si traen foto. */
.adc-nuevos .adc-auto-sin-foto {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #151719;
    background-image: url("img/logo-autodesign.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 58% auto;
    opacity: .8;
}

.adc-nuevos .adc-auto-energia {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

.adc-nuevos .adc-auto-patrocinado {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 5px 12px;
    z-index: 1;
    border-radius: 5px;
    background: rgba(0, 0, 0, .55);
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.adc-nuevos .adc-auto-info { padding: 6px 22px 22px; }

.adc-nuevos .adc-auto-nombre {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--adc-blanco);
}
.adc-nuevos .adc-auto-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--adc-texto-tenue);
}

/* Precio: renglon propio bajo version/anio, en blanco y con peso.
   Si el vehiculo no trae precio no se pinta el bloque, para no dejar un
   hueco vacio con la rejilla descuadrada. */
.adc-nuevos .adc-auto-precio {
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--adc-blanco);
}

/* Refuerzo contra las reglas de enlaces del tema */
.adc-nuevos a.adc-auto,
.adc-nuevos a.adc-auto:hover { text-decoration: none; box-shadow: none; }
.adc-nuevos a.adc-auto .adc-auto-nombre { color: var(--adc-blanco); }
.adc-nuevos a.adc-auto .adc-auto-meta { color: var(--adc-texto-tenue); }

/* --- Responsivo --------------------------------------------------------- */
@media (max-width: 1080px) {
    .adc-nuevos .adc-autos-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .adc-nuevos .adc-nuevos-titulo { font-size: 32px; line-height: 40px; }
}
@media (max-width: 680px) {
    .adc-nuevos { padding: calc(var(--adc-tapa) + 48px) 0 60px; }
    .adc-nuevos .adc-autos-grid { grid-template-columns: 1fr; gap: 18px; }
    .adc-nuevos .adc-nuevos-titulo { font-size: 24px; line-height: 32px; margin-bottom: 28px; }
    .adc-nuevos .adc-auto-nombre { font-size: 17px; }
}

/* ============================================================
   Anulaciones contra el tema Infinite
   ------------------------------------------------------------
   El tema define `.infinite-body h1..h6 { color:#2d2d2d }` con
   especificidad (0,1,1). Un selector de una sola clase, como
   `.adc-nuevos-titulo`, vale (0,1,0) y PIERDE. Todo titulo mio
   necesita dos clases para ganar. Sin !important a proposito:
   asi el dia que alguien quiera pisar esto desde el tema, puede.
   ============================================================ */
.adc-nuevos .adc-nuevos-titulo,
.adc-nuevos .adc-auto .adc-auto-nombre { color: var(--adc-blanco); }
.adc-nuevos .adc-nuevos-titulo span { color: var(--adc-rojo); }
.adc-nuevos .adc-auto .adc-auto-meta { color: var(--adc-texto-tenue); }
.adc-nuevos .adc-auto .adc-auto-precio { color: var(--adc-blanco); }
.adc-nuevos a.adc-auto,
.adc-nuevos a.adc-auto:hover,
.adc-nuevos a.adc-auto:focus { text-decoration: none; box-shadow: none; }

/* ============================================================
   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-nuevos .adc-nuevos-titulo { font-size: 41px !important; line-height: 49.2px !important; }
@media (max-width: 1080px) {
    .adc-nuevos .adc-nuevos-titulo { font-size: 32px !important; line-height: 40px !important; }
}
@media (max-width: 680px) {
    .adc-nuevos .adc-nuevos-titulo { font-size: 24px !important; line-height: 32px !important; }
}