/* ============================================================
   Base — reset, tipografia y utilidades
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Elimina el retardo de 300ms al tocar en movil. */
    touch-action: manipulation;
    /* El resaltado por defecto de iOS choca con nuestros estados de hover. */
    -webkit-tap-highlight-color: rgba(22, 119, 255, .12);
}

/* Los anclas del menu no deben quedar bajo el header fijo. */
:target, [id] { scroll-margin-top: calc(var(--alto-header) + var(--e-6)); }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: var(--txt-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* El "display: none" que trae el atributo hidden lo pisa cualquier display
   que declaremos despues, asi que un elemento con hidden y display:flex se
   sigue viendo. Se refuerza aqui una vez en lugar de recordarlo en cada
   componente que se oculta desde JS. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
}

h1 { font-size: var(--txt-hero); font-weight: 700; }
h2 { font-size: var(--txt-3xl); font-weight: 700; letter-spacing: -.03em; }
h3 { font-size: var(--txt-h4); font-weight: 600; letter-spacing: -.02em; }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, select { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }

/* El foco siempre visible: es requisito de accesibilidad, no decoracion. */
:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.oscuro :focus-visible { outline-color: var(--azul-claro); }

/* Visible solo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Salto al contenido, primer tabulador de la pagina. */
.saltar {
    position: absolute;
    top: -60px; left: var(--e-4);
    z-index: calc(var(--z-header) + 10);
    padding: var(--e-3) var(--e-5);
    background: var(--azul);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 600;
    /* transform en lugar de top: no dispara reflow. */
    transform: translateY(-120%);
    transition: transform var(--t-medio) var(--curva);
}
.saltar:focus { transform: none; top: var(--e-3); }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--e-5);
}

.num { font-variant-numeric: tabular-nums; }

/* Eyebrow: etiqueta corta en versalitas sobre un titulo. */
.eyebrow {
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--azul);
}

/* 24px arriba y abajo: entre dos secciones quedan 48, no los 128 de antes.
   En el diseno van pegadas, no separadas por una pantalla de aire. */
.seccion { padding-block: var(--e-6); }

.seccion-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    margin-bottom: var(--e-5);
    flex-wrap: wrap;
}

.seccion-cabecera h2 {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    font-size: var(--txt-h3);
}
.seccion-cabecera h2 svg { color: var(--azul); flex-shrink: 0; }
/* El total va junto al titulo, en pequeno: el sitio de la derecha lo ocupa
   el enlace al catalogo completo. */
.seccion-cabecera h2 .num {
    font-size: var(--txt-sm);
    font-weight: var(--peso-normal);
    color: var(--texto-desc);
}

.enlace-mas {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    color: var(--azul);
    font-weight: 650;
    font-size: var(--txt-base);
}
.enlace-mas svg { transition: transform var(--t-rapido) var(--curva); }
.enlace-mas:hover svg { transform: translateX(3px); }

/* --- Botones --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-6);
    border-radius: var(--r-btn);
    font-weight: 650;
    font-size: var(--txt-base);
    white-space: nowrap;
    transition: background var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva);
}
.btn:active { transform: translateY(1px); }

.btn-primario { background: var(--azul); color: #fff; box-shadow: var(--glow-azul); }
.btn-primario:hover { background: var(--azul-hover); }

.btn-fantasma {
    background: transparent;
    color: var(--texto-claro);
    border: 1px solid var(--glass-borde);
}
.btn-fantasma:hover { background: rgba(255,255,255,.06); }

.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #1BA34E; }

.btn-linea {
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--borde);
}
.btn-linea:hover { border-color: var(--borde-fuerte); background: var(--fondo); }

.btn-sm { padding: var(--e-2) var(--e-4); font-size: var(--txt-sm); }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 3px var(--e-2);
    border-radius: var(--r-sm);
    font-size: var(--txt-xs);
    font-weight: 700;
    letter-spacing: .01em;
}
.badge-naranja { background: var(--naranja); color: #fff; }
.badge-azul    { background: var(--azul); color: #fff; }
.badge-cian    { background: var(--azul-claro); color: var(--hero); }
.badge-stock   { background: var(--exito-fondo); color: var(--exito); }
.badge-bajo    { background: var(--alerta-fondo); color: var(--alerta); }
.badge-agotado { background: var(--error-fondo); color: var(--error); }

/* --- Animaciones de entrada (activadas por animaciones.js) --- */
.por-animar {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-lento) var(--curva),
                transform var(--t-lento) var(--curva);
}
.por-animar.visible { opacity: 1; transform: none; }
[data-animar="aparecer"].por-animar { transform: scale(.97); }
[data-animar="aparecer"].por-animar.visible { transform: none; }

/* Menu movil desplegado */
@media (max-width: 860px) {
    .nav.abierto {
        position: absolute;
        top: var(--alto-header); left: 0; right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e-3);
        background: var(--navbar);
        border-bottom: 1px solid var(--glass-borde);
        box-shadow: var(--sombra-alta);
    }
    .nav.abierto a { padding: var(--e-3) var(--e-4); }
    .nav.abierto a[aria-current="page"]::after { display: none; }
}

/* --- Botones V2 --- */
.btn-lg { padding: var(--e-4) var(--e-7); font-size: var(--txt-base); border-radius: var(--r-btn); }
.btn-glass {
    background: var(--glass);
    color: #fff;
    border: 1px solid var(--glass-borde);
    backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }

/* Contorno sobre fondo oscuro, sin relleno: el de la tarjeta de promocion. */
.btn-linea-claro {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}
.btn-linea-claro:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45); }

/* Boton del asesor: degradado azul, no el verde de WhatsApp. Dentro del
   panel oscuro el verde competia con las tarjetas de color, y el diseno lo
   pide azul aunque el enlace lleve a WhatsApp. */
.btn-ia {
    background: linear-gradient(100deg, #2563EB, #4F46E5);
    color: #fff;
    box-shadow: 0 10px 30px rgba(37, 99, 235, .38);
}
.btn-ia:hover { background: linear-gradient(100deg, #1D4ED8, #4338CA); }
.btn-ia-ico {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    flex-shrink: 0;
}
.btn-primario { background: var(--azul); box-shadow: var(--glow-azul); }
.btn-primario:hover { background: var(--azul-hover); box-shadow: 0 12px 40px rgba(22,119,255,.42); }

/* Microinteraccion de botones. La escala se mantiene en 1.02: por encima
   se lee como animacion en lugar de respuesta al puntero. */
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.99); }
.btn-lg:hover { box-shadow: 0 14px 44px rgba(22, 119, 255, .40); }