/* ============================================================================
   MOISÉS MOTA · MY DIGITAL WORLD — EFECTOS (Fase 3.1)
   ----------------------------------------------------------------------------
   Lluvia de estrellas digitales, efectos de scroll y ajustes finos para iPhone.
   Se carga después de mm-story.css.

   Misma regla de siempre: nada de esto puede dejar contenido invisible.
   Lo que se anima parte de un estado visible salvo bajo .mm-gsap.
   ========================================================================== */

/* ============================================
   PALETA DE LAS CUATRO LÍNEAS
   ============================================ */
:root {
    --mm-rent: #f6a000;   /* Alquileres   — ámbar  */
    --mm-mkt:  #06b6d4;   /* Marketing    — cian   */
    --mm-ia:   #a78bfa;   /* Automatización — violeta */
    --mm-inv:  #34d399;   /* Inversión    — esmeralda */
}

/* ============================================
   LLUVIA DE ESTRELLAS DIGITALES
   --------------------------------------------
   Canvas de fondo, detrás de todo el contenido. Lo dibuja mm-fx.js.
   Si el canvas no se crea, no pasa nada: es puramente decorativo.
   ============================================ */
.mm-stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .85;
}

/* El contenido va por encima de la lluvia */
body > main,
body > nav,
body > footer,
body > .whatsapp-float,
body > .mm-progress { position: relative; z-index: 1; }

/* Las secciones con fondo propio tapan la lluvia: se las hace translúcidas
   para que se vea pasar por detrás. */
.mm-hero, .mm-chapter, .mm-paths, .mm-intro, .mm-final { background-color: transparent; }

/* ============================================
   ENTRADA DE TARJETAS EN 3D
   ============================================ */
.mm-gsap .mm-fx-card {
    opacity: 0;
    transform: perspective(1000px) rotateX(12deg) translateY(46px);
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

/* ============================================
   ESCALA AL ENTRAR (imágenes y bloques)
   ============================================ */
.mm-gsap .mm-fx-zoom { opacity: 0; transform: scale(.92); will-change: transform, opacity; }

/* ============================================
   CINTA DESLIZANTE DE PALABRAS
   ============================================ */
.mm-marquee {
    position: relative;
    overflow: hidden;
    padding: 26px 0;
    border-top: 1px solid var(--mm-line);
    border-bottom: 1px solid var(--mm-line);
    background: rgba(3, 7, 18, .55);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mm-marquee__row {
    display: flex;
    gap: 46px;
    width: max-content;
    will-change: transform;
}
.mm-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--text-secondary);
}
.mm-marquee__item i { font-size: .7em; }
.mm-marquee__item:nth-child(4n+1) i { color: var(--mm-rent); }
.mm-marquee__item:nth-child(4n+2) i { color: var(--mm-mkt); }
.mm-marquee__item:nth-child(4n+3) i { color: var(--mm-ia); }
.mm-marquee__item:nth-child(4n)   i { color: var(--mm-inv); }

/* ============================================
   NÚMEROS QUE CUENTAN
   ============================================ */
.mm-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ============================================
   BRILLO QUE SIGUE AL CURSOR EN LAS TARJETAS
   ============================================ */
.mm-fx-shine { position: relative; overflow: hidden; }
.mm-fx-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(260px circle at var(--mm-mx, 50%) var(--mm-my, 50%),
                rgba(255, 255, 255, .10), transparent 65%);
    transition: opacity .35s ease;
    pointer-events: none;
}
.mm-fx-shine:hover::after { opacity: 1; }

/* ============================================
   LÍNEA QUE SE DIBUJA AL PASAR
   ============================================ */
.mm-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--mm-rent), var(--mm-mkt), var(--mm-ia), var(--mm-inv));
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}
html:not(.mm-gsap) .mm-rule { transform: scaleX(1); }

/* ============================================
   AJUSTES PARA IPHONE
   ============================================ */

/* Alto real de la ventana: en Safari 100vh queda por debajo de la barra.
   dvh se ajusta solo cuando la barra aparece o desaparece. */
@supports (height: 100dvh) {
    .mm-chapter__sticky { min-height: 100dvh; }
}

/* Respeta el notch y la barra inferior */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.navbar-dark { padding-top: calc(18px + env(safe-area-inset-top) * .5); }
.whatsapp-float {
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
    right: calc(1.2rem + env(safe-area-inset-right));
}
.footer-dark { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }

/* Sin el destello gris al tocar */
a, button, summary, [role="button"] {
    -webkit-tap-highlight-color: rgba(6, 182, 212, .18);
}

/* Evita que el zoom automático de iOS agrande el formulario:
   Safari hace zoom si la letra del campo mide menos de 16px. */
input, select, textarea { font-size: 16px; }

/* Rebote controlado */
html { overscroll-behavior-y: none; }

/* Áreas de toque cómodas */
@media (pointer: coarse) {
    .nav-link, .mm-path__cta, .footer-links-col a, .mm-faq summary {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .mm-path__cta { display: inline-flex; }
    .footer-links-col a { display: inline-flex; }
}

/* ============================================
   RESPONSIVE FINO
   ============================================ */

/* iPhone SE y pantallas muy angostas */
@media (max-width: 380px) {
    .mm-chapter__lead { font-size: 1.65rem; }
    .mm-marquee__item { font-size: 1rem; gap: 10px; }
    .mm-marquee { padding: 18px 0; }
    .mm-final h2 { font-size: 1.8rem; }
}

/* iPhone estándar en horizontal: el sticky molesta más de lo que aporta */
@media (max-height: 500px) and (orientation: landscape) {
    .mm-chapter__sticky { position: static; min-height: auto; }
    .mm-hero { padding: 100px 0 50px; }
}

/* ============================================
   MOVIMIENTO REDUCIDO
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .mm-stars { display: none; }
    .mm-gsap .mm-fx-card,
    .mm-gsap .mm-fx-zoom {
        opacity: 1 !important;
        transform: none !important;
    }
    .mm-marquee__row { transform: none !important; }
    .mm-rule { transform: scaleX(1) !important; }
    .mm-fx-shine::after { display: none; }
}