/* ============================================================
   HERO / PORTADA
   La escena es una sola imagen —la laptop sobre la plataforma
   iluminada— y encima van el mensaje, la tarjeta de oferta y las
   garantias. El producto ya no se compone con capas CSS: venia
   del catalogo y chocaba con la laptop del fondo.
   ============================================================ */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    overflow: hidden;
    isolation: isolate;
    /* Abajo se reserva el alto con el que la caja de categorias monta sobre
       el hero (-56px), o los indicadores quedan por debajo de ella. */
    padding-block: var(--e-16) calc(var(--e-12) + 56px);
    color: var(--texto-claro);
    background: #050B14;
}

/* La portada va en <img> y no en background-image: asi el navegador la
   descubre en el HTML inicial y la pide con prioridad, en vez de esperar
   a resolver el CSS. Es la imagen mas grande sobre el pliegue. */
.hero-fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero-fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El foco se mantiene a la derecha, donde esta la laptop: al recortar
       en pantallas angostas es lo que no debe perderse. */
    object-position: 72% center;
}

/* Velo: oscurece la izquierda para que el texto tenga contraste sin
   apagar la parte iluminada de la derecha. */
.hero-velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        /* Franja inferior: las garantias y los indicadores caen justo sobre
           la plataforma iluminada, donde el texto blanco se pierde. */
        linear-gradient(0deg, rgba(3, 8, 16, .88) 0%,
                              rgba(3, 8, 16, .55) 14%,
                              transparent 30%),
        linear-gradient(100deg, rgba(3, 8, 16, .94) 0%,
                                rgba(3, 8, 16, .80) 32%,
                                rgba(3, 8, 16, .30) 54%,
                                transparent 72%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, auto);
    gap: var(--e-10);
    align-items: center;
    width: 100%;
}
.hero-grid > *, .hero-texto { min-width: 0; }
.hero-texto { container-type: inline-size; }

/* ---------- Mensaje ---------- */

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    background: rgba(16, 36, 68, .55);
    border: 1px solid rgba(54, 179, 255, .30);
    border-radius: var(--r-full);
    color: var(--azul-claro);
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    letter-spacing: .13em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--azul-claro);
    box-shadow: 0 0 10px var(--azul-claro);
}

.hero h1 {
    margin: var(--e-5) 0 0;
    font-family: var(--fuente-display);
    /* Contra el ancho de su columna, no del viewport: asi la linea larga
       cabe entera y el <br> del titular es el unico salto. */
    font-size: clamp(2.5rem, 8.2cqw, 4rem);
    font-weight: var(--peso-bold);
    letter-spacing: var(--track-hero);
    line-height: var(--lh-hero);
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #3B82F6, #60A5FA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    margin-top: var(--e-5);
    max-width: 46ch;
    font-size: var(--txt-sub);
    font-weight: var(--peso-normal);
    line-height: var(--lh-texto);
    color: var(--texto-hero);
    text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-8); }

/* El icono de WhatsApp en su circulo verde: es lo que hace reconocible el
   boton de un vistazo, mas que la palabra. */
.btn-wa-ico {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: #fff;
    flex-shrink: 0;
}

/* ---------- Tarjeta de oferta ---------- */

.hero-oferta {
    position: relative;
    display: grid;
    width: 244px;
    padding: var(--e-6);
    background: rgba(6, 14, 26, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-card);
    backdrop-filter: blur(20px);
    box-shadow: var(--sombra-alta);
}

/* Titulo con la linea de separacion debajo, como en la referencia. */
.oferta-titulo {
    padding-bottom: var(--e-4);
    margin-bottom: var(--e-5);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--txt-base);
    font-weight: var(--peso-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #fff;
}
.oferta-titulo span { display: block; color: var(--naranja); }

/* La cifra de la promocion. El porcentaje no sale de la base —no hay
   precio de lista con el que comparar— sino de contenido.PROMOCION. */
.oferta-cifra { margin-bottom: var(--e-6); }
.oferta-cifra small {
    display: block;
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-hero);
}
.oferta-cifra b {
    display: block;
    margin: 2px 0;
    font-size: 3.5rem;
    font-weight: var(--peso-negro);
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--naranja);
}

/* Las tarjetas se apilan en la misma celda para que la caja no cambie de
   alto al rotar entre productos de nombre mas largo o mas corto. */
.oferta-slide {
    grid-area: 2 / 1;
    opacity: 0;
    visibility: hidden;
    translate: 0 8px;
    transition: opacity 520ms var(--curva-out),
                translate 520ms var(--curva-out),
                visibility 0s linear 520ms;
}
.oferta-slide[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    translate: 0;
    transition-delay: 0s;
}

.oferta-slide small {
    display: block;
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-hero);
}
.oferta-slide b {
    display: block;
    margin: 2px 0 var(--e-2);
    font-size: 2.5rem;
    font-weight: var(--peso-negro);
    letter-spacing: -.045em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
/* Se recorta por lineas y no por caracteres: cortar la descripcion en el
   servidor parte los nombres a media palabra ("...18IAX10, 1"). */
.oferta-slide p {
    margin-bottom: var(--e-5);
    font-size: var(--txt-label);
    line-height: var(--lh-card);
    color: var(--texto-hero);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.oferta-slide .btn { width: 100%; }

/* ---------- Garantias ---------- */

/* Agrupadas a la izquierda, bajo la columna de texto, y no repartidas por
   todo el ancho: estiradas, la ultima caia sobre la parte iluminada de la
   escena y se leia mal. */
.hero-garantias {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-6);
    margin: var(--e-14) 0 0;
    padding: 0;
    max-width: 70%;
    list-style: none;
}
.garantia { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.garantia > svg { flex-shrink: 0; color: var(--azul-claro); margin-top: 1px; }
/* Cuerpo justo para que los cuatro rotulos entren en una linea dentro del
   ancho reservado; con el tamano anterior partian en dos. */
.garantia b {
    display: block;
    font-size: 13px;
    font-weight: var(--peso-semi);
    line-height: 1.35;
    color: #fff;
    white-space: nowrap;
}
.garantia > span > span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--texto-hero);
}

/* ---------- Indicadores ---------- */

.hero-puntos {
    display: flex;
    justify-content: center;
    gap: var(--e-2);
    margin-top: var(--e-8);
}
.hero-puntos button {
    width: 8px; height: 8px;
    padding: 0;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .28);
    transition: width var(--t-medio) var(--curva),
                background var(--t-medio) var(--curva);
}
.hero-puntos button[aria-current="true"] {
    width: 26px;
    background: var(--azul-claro);
}

/* ---------- Entrada escalonada ---------- */

@keyframes hero-entra {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.hero-eyebrow, .hero h1, .hero-sub,
.hero-acciones, .hero-garantias, .hero-puntos {
    animation: hero-entra var(--t-lento) var(--curva-out) backwards;
}
.hero h1        { animation-delay:  80ms; }
.hero-sub       { animation-delay: 160ms; }
.hero-acciones  { animation-delay: 240ms; }
.hero-garantias { animation-delay: 320ms; }
.hero-puntos    { animation-delay: 400ms; }
.hero-oferta    { animation: hero-entra 700ms var(--curva-out) 200ms backwards; }

@media (prefers-reduced-motion: reduce) {
    .oferta-slide { transition-duration: 1ms; translate: 0; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .hero { min-height: auto; padding-block: var(--e-12) var(--e-10); }
    .hero-grid { grid-template-columns: 1fr; gap: var(--e-8); }
    /* La tarjeta deja de flotar al costado y se alinea con el texto. */
    .hero-oferta { width: 100%; max-width: 340px; }
    /* En una sola columna el ancho ya no sobra: se suelta el tope. */
    .hero-garantias { grid-template-columns: 1fr 1fr; gap: var(--e-5); margin-top: var(--e-10); max-width: none; }
    .hero-sub br { display: none; }
}

@media (max-width: 700px) {
    /* Sin ancho para las dos columnas, la laptop del fondo queda detras del
       texto y lo vuelve ilegible: se sube el velo y se centra la escena. */
    .hero-fondo img { object-position: 62% center; }
    .hero-velo {
        background: linear-gradient(180deg, rgba(3, 8, 16, .90), rgba(3, 8, 16, .70) 55%, rgba(3, 8, 16, .92));
    }
    .hero-garantias { grid-template-columns: 1fr; gap: var(--e-4); }
    .hero-sub { font-size: var(--txt-md); }
    .hero h1 { font-size: clamp(1.75rem, 9.6cqw, 3rem); }
    .hero-acciones .btn { width: 100%; justify-content: center; }
}