/* ============================================================
   Sección: HERO  (pieza reutilizable — ver ADR-0006)
   Portado fiel de la v1 (Hero.module.css + HeroCard.module.css).
   Clases namespaceadas a mano (.hero__ / .hero-card--) porque NO usamos
   CSS Modules ni build step (ADR-0003). Todos los valores salen de tokens.css.
   ============================================================ */

.hero {
    /* fondo con tintes muy suaves: celeste (izq) → blanco → rosa (der).
       Encima, un puente lavanda (#8c8ae6) tenue arriba-centro cierra el hueco
       blanco del techo → banda de color CONTINUA detrás del nav (nunca blanca). */
    background-image:
        radial-gradient(ellipse 1500px 460px at 50% -16%, rgba(140, 138, 230, 0.07) 0%, transparent 72%),
        linear-gradient(
            115deg,
            rgba(0, 184, 230, 0.08) 0%,
            #ffffff 45%,
            rgba(229, 0, 126, 0.07) 100%
        );
    /* La sección se estira hacia ARRIBA, por detrás del nav flotante (sticky), para
       que el tinte arranque en y=0 como en el diseño (el nav pinta encima por
       z-index). El padding-top recompensa el tirón: el contenido no se mueve, solo
       el color sube detrás de la barra. */
    --pull: calc(var(--nav-height) + var(--space-10));
    margin-top: calc(-1 * var(--pull));
    padding-top: calc(var(--space-16) + var(--pull));
    padding-bottom: var(--space-24);
    overflow: hidden;
}

/* ---------- Grid de 2 columnas ---------- */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--space-16);
}

/* ---------- Columna izquierda ---------- */
.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.hero__headline {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: var(--fs-display-xl);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
}

.hero__listen {
    color: var(--color-primary);
}
.hero__solve {
    color: var(--color-ink);
}
.hero__scale {
    color: var(--color-accent);
}

.hero__lead {
    max-width: min(46ch, 100%); /* nunca más ancho que el contenedor (evita overflow en mobile) */
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-neutral-600);
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-pill);
    background: var(--color-ink); /* desktop: oscuro #0F1117 */
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    transition: transform var(--transition), background var(--transition);
}

.hero__cta:hover {
    background: #000;
    transform: translateY(-2px);
}

/* ---------- Columna derecha: imagen + tarjetas ---------- */
.hero__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.hero__headphones {
    position: relative;
    z-index: 1;
    width: 82%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(15, 17, 23, 0.25));
}

/* Imagen compuesta para mobile: oculta en desktop, se muestra <1024. */
.hero__mobile-image {
    display: none;
}

/* ============================================================
   Tarjetas flotantes (HeroCard) — cáscara común
   ============================================================ */
.hero-card {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    /* sombra rosa SOLO en la parte inferior: offset-Y hacia abajo + spread
       negativo (recorta los lados/arriba). Tono tenue, grosor marcado. */
    box-shadow: 0 20px 30px -12px rgba(229, 0, 126, 0.32);
    will-change: transform; /* punto de partida para la animación (aparecer/flotar) */
}

/* variante glass: deja ver el fondo un toque, SIN blur ni sombra (plano) */
.hero-card--glass {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

.hero-card__label {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: 0.625rem; /* 10px */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---------- Posicionamiento de cada tarjeta (ajustable) ----------
   --d   = delay de entrada (escalonado, una card tras otra)
   --dur = duración del float (distinta en cada una → flotan desincronizadas,
           se ve orgánico y no como un bloque). */
.hero-card--qa {
    top: 3%;
    left: 15%; /* corrida a la izquierda, sobre la mitad de la tarjeta WhatsApp */
    align-items: flex-start;
    --d: 0.15s;
    --dur: 5s;
}
.hero-card--whatsapp {
    top: 13%;
    left: -2%;
    max-width: 220px;
    --d: 0.35s;
    --dur: 5.6s;
}
.hero-card--nps {
    top: 26%;
    right: 8%; /* sobre la imagen de los auris, un toque a la derecha */
    --d: 0.55s;
    --dur: 4.6s;
}
.hero-card--accion {
    bottom: 28%;
    left: -1%;
    max-width: 172px;
    --d: 0.75s;
    --dur: 5.3s;
}
.hero-card--insight {
    bottom: 18%;
    right: -3%;
    max-width: 230px;
    --d: 0.95s;
    --dur: 4.9s;
}

/* Entrada escalonada (una vez) + float idle (infinito). Dos animaciones en la
   misma card: el float arranca justo cuando termina la entrada (delay = --d +
   0.6s). Cuando el float corre, gana el transform (va 2do en la lista); antes,
   manda la entrada. Ambas usan translateY: como la posición es por top/left, el
   transform queda libre. */
.hero-card--qa,
.hero-card--whatsapp,
.hero-card--nps,
.hero-card--accion,
.hero-card--insight {
    animation:
        heroCardIn 0.6s ease-out var(--d) both,
        heroCardFloat var(--dur) ease-in-out calc(var(--d) + 0.6s) infinite;
}

@keyframes heroCardIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Movimiento reducido: sin entrada ni float, las tarjetas quedan quietas. */
@media (prefers-reduced-motion: reduce) {
    .hero-card--qa,
    .hero-card--whatsapp,
    .hero-card--nps,
    .hero-card--accion,
    .hero-card--insight {
        animation: none;
    }
}

/* ---------- Contenido interno de las tarjetas ---------- */
.hero__qa-value {
    font-family: var(--font-display);
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}
.hero__qa-value strong {
    font-size: 1.75rem;
    font-weight: var(--fw-extrabold);
    color: var(--color-accent);
    line-height: 1;
}
.hero__qa-value span {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

/* burbuja de chat: fondo violeta con opacidad + texto violeta al 100% */
.hero__chat-text {
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: rgba(76, 65, 112, 0.12);
    color: var(--color-lavender-700);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

.hero__nps {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}
.hero__bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
}
.hero__bars i {
    width: 5px;
    background: var(--color-accent);
    border-radius: 2px;
}
.hero__bars i:nth-child(1) {
    height: 35%;
}
.hero__bars i:nth-child(2) {
    height: 55%;
}
.hero__bars i:nth-child(3) {
    height: 75%;
}
.hero__bars i:nth-child(4) {
    height: 100%;
}
.hero__trend-up {
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    color: var(--color-success);
}

.hero__accion {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--color-text);
}
.hero__accion img {
    margin-top: 1px;
    flex-shrink: 0;
}

.hero__insight {
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: var(--fw-semibold);
    color: var(--color-lavender-700);
}
.hero__insight strong {
    color: var(--color-accent);
    font-weight: var(--fw-bold);
}

/* ================= Responsive ================= */
/* ~1280 (hasta 1439): las 2 columnas quedan completas, solo achicamos
   un poco las tarjetas. El titular NO se toca (1440+ queda como está). */
@media (max-width: 1439px) {
    .hero-card {
        padding: var(--space-2) var(--space-3);
    }
    .hero-card--whatsapp {
        max-width: 190px;
    }
    .hero-card--accion {
        max-width: 158px;
    }
    .hero-card--insight {
        max-width: 196px;
    }
    .hero__chat-text,
    .hero__accion,
    .hero__insight {
        font-size: 0.76rem;
    }
    .hero__qa-value strong {
        font-size: 1.55rem;
    }
}

/* 900–1200: MANTENEMOS las 2 columnas (deben entrar juntas hasta 1024).
   Achicamos titular + tarjetas (más chicas que en 1280) para que quepan. */
@media (max-width: 1200px) {
    .hero__grid {
        gap: var(--space-6);
    }
    .hero__headline {
        font-size: var(--fs-display-l);
    }
    .hero__lead {
        font-size: var(--fs-body);
    }
    .hero-card {
        padding: var(--space-2);
        gap: 2px;
    }
    .hero-card__label {
        font-size: 0.5625rem; /* 9px */
    }
    .hero-card--qa {
        left: 8%;
    }
    .hero-card--whatsapp {
        max-width: 138px;
    }
    .hero-card--accion {
        max-width: 130px;
    }
    .hero-card--insight {
        max-width: 154px;
    }
    .hero__chat-text,
    .hero__accion,
    .hero__insight {
        font-size: 0.64rem;
    }
    .hero__qa-value strong {
        font-size: 1.2rem;
    }
}

/* ---------- < 1024: versión mobile = una sola imagen compuesta ----------
   Las tarjetas flotantes (position:absolute) no se acomodan bien en poco ancho,
   así que abajo de 1024 mostramos la imagen que ya trae todo integrado y
   ocultamos la versión "viva" (auriculares SVG + HeroCards). */
@media (max-width: 1023px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4); /* imagen más cerca del botón de demo */
    }
    /* fuera el gradiente celeste/rosa en mobile: la imagen ya trae su propio fondo.
       Bajo el padding lateral y recorto el padding de abajo. */
    .hero {
        background: var(--color-white);
        --page-padding-x: var(--space-4);
        padding-block: var(--space-8) var(--space-6);
    }
    .hero__visual {
        aspect-ratio: auto; /* la imagen define su propio alto */
    }
    .hero__mobile-image {
        display: block;
        width: 100%;
        max-width: 440px; /* SVG vertical (390×491) con PNG 1080px adentro → nítido */
        margin-inline: auto;
    }
    /* LISTEN/SOLVE/SCALE más grande en mobile (vw → escala con la pantalla) */
    .hero__headline {
        font-size: clamp(2.75rem, 14vw, 4rem);
    }
    /* "Ver una Demo" en mobile: rosa, full-width y bajito */
    .hero__cta {
        width: 100%;
        padding: var(--space-2) var(--space-4);
        font-size: var(--fs-body-lg);
        background: var(--color-accent);
    }
    /* Prefijo .hero__visual para asegurar que le gana a la regla base de .hero-card. */
    .hero__visual .hero__headphones,
    .hero__visual .hero-card--qa,
    .hero__visual .hero-card--whatsapp,
    .hero__visual .hero-card--nps,
    .hero__visual .hero-card--accion,
    .hero__visual .hero-card--insight {
        display: none;
    }
}