/* Auto Design - paleta y cimientos compartidos.
   Los valores salen de las variables del Figma "Auto_design_verthx":
   Punch #DD3333, Ebony Clay #293742, Dove Gray #6D6D6D, Montserrat, ancho 1300. */

/* ============================================================
   Alto del header del tema (ver assets/header.js)
   ------------------------------------------------------------
   header.js mide el header real y publica --adc-header. Estos
   valores son solo el RESPALDO: el primer pintado antes de que
   corra el script, y el caso sin JavaScript. Medidos en vivo en
   autodesign.mx el 27/08/2026.
   ============================================================ */
:root { --adc-header-def: 0px; }                                   /* header movil: va en flujo */
@media (min-width: 1000px) { :root { --adc-header-def: 212px; } }  /* menu de escritorio en dos filas */
@media (min-width: 1280px) { :root { --adc-header-def: 131px; } }  /* menu en una sola fila */

.adc-comparador,
.adc-marcas,
.adc-nuevos,
.adc-detalle {
    /* Marca */
    --adc-rojo: #DD3333;
    --adc-rojo-hover: #C62B2B;
    --adc-oscuro: #293742;

    /* Secciones oscuras */
    --adc-negro: #000000;
    --adc-tarjeta: #181818;
    --adc-tarjeta-alt: #1D2023;
    --adc-tarjeta-borde: #262626;

    /* Secciones claras */
    --adc-blanco: #FFFFFF;
    --adc-gris-caja: #F6F6F6;
    --adc-borde: #E6E6E6;

    /* Texto */
    --adc-texto: #333333;
    --adc-texto-sec: #6D6D6D;
    --adc-texto-tenue: #959595;

    /* Cristal de las tarjetas (valores del Figma, no elegidos a ojo):
       relleno #C7C7C7, contorno de 1px negro al 30% y desenfoque de fondo de
       22px. La opacidad del relleno cambia por seccion: 12% sobre el fondo
       oscuro de Marcas y Nuevos Autos, 6% sobre el blanco del comparador.
       El 12% del Figma tapaba casi toda la textura y las tarjetas se leian
       como bloques grises planos; se bajo a 8% para que el humo se alcance a
       ver detras. Si el cliente lo quiere mas solido, este es el numero.
       El desenfoque solo se nota si el fondo detras es una imagen; por eso
       Marcas y Nuevos Autos llevan la textura de humo como background-image
       real y no como degradado. */
    --adc-vidrio: rgba(199, 199, 199, .08);
    --adc-vidrio-suave: rgba(199, 199, 199, .06);
    --adc-vidrio-borde: rgba(0, 0, 0, .30);
    --adc-vidrio-blur: 22px;

    /* Medidas */
    --adc-ancho: 1300px;
    --adc-radio: 10px;

    /* Lo que se empuja hacia abajo para no quedar tapado por el header.
       Los 90px de aire estan medidos sobre el render del Figma (el contenido
       arranca en y=221 y el nav mide 131). Marcas y el comparador no los
       suman: ahi el hero va pegado al nav, como en el diseno. */
    --adc-tapa: var(--adc-header, var(--adc-header-def));
    --adc-tapa-aire: calc(var(--adc-tapa) + 90px);

    --adc-fuente: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    box-sizing: border-box;
    font-family: var(--adc-fuente);
}

.adc-comparador *,
.adc-comparador *::before,
.adc-comparador *::after,
.adc-marcas *,
.adc-marcas *::before,
.adc-marcas *::after,
.adc-nuevos *,
.adc-nuevos *::before,
.adc-nuevos *::after,
.adc-detalle *,
.adc-detalle *::before,
.adc-detalle *::after { box-sizing: border-box; }

/* Contenedor centrado que usan las tres secciones nuevas */
.adc-contenedor {
    width: 100%;
    max-width: var(--adc-ancho);
    margin: 0 auto;
    padding: 0 24px;
}

.adc-vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--adc-texto-tenue);
    font-size: 16px;
}

/* Los iconos heredan el color del texto que los rodea, para poder usar el
   mismo SVG sobre fondo oscuro y sobre fondo blanco. */
.adc-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.adc-icono svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Paginacion nativa de WordPress */
.adc-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 48px 0 0;
}
.adc-paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 15px;
    text-decoration: none;
    color: var(--adc-texto-tenue);
    transition: color .15s ease, background-color .15s ease;
}
.adc-paginacion .page-numbers:hover { color: var(--adc-blanco); }
.adc-paginacion .page-numbers.current {
    color: var(--adc-rojo);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .adc-comparador *,
    .adc-marcas *,
    .adc-nuevos *,
    .adc-detalle * {
        transition: none !important;
        animation: none !important;
    }
}