/* ═══════════════════════════════════════════════════════════════
   ACIE · Capa de movimiento (motion.css) — v3
   Tipografía que se revela, subrayados que se dibujan, brillos de
   marca y micro-interacciones. Solo páginas públicas.

   Dos modos que decide motion.js según la pantalla:
   · .fx-porletra  → escritorio: cascada letra a letra con desenfoque.
   · .fx-porpalabra→ móvil: cascada palabra a palabra. Un titular son
     ~12 palabras animadas en vez de ~120 letras: en un teléfono de
     gama media es la diferencia entre fluido y trabado.

   Reglas de la casa: todo respeta prefers-reduced-motion y ninguna
   animación toca propiedades de layout (solo transform, opacity y
   background-position).
   ═══════════════════════════════════════════════════════════════ */

/* ── 0 · Salud general de la página ──────────────────────────────
   height:auto en imágenes con <picture>: los atributos width/height
   (que evitan saltos de layout) NO deben imponer la altura cuando el
   CSS limita el ancho — sin esto la foto del héroe salía estirada
   3 veces a lo alto. Y el desplazamiento entre anclas va suave. */
picture img { height: auto; }
html { scroll-behavior: smooth; }

/* La página entra con un fundido corto: quita el «golpe» del cambio
   de página y hace que navegar entre pestañas se sienta continuo.
   En móvil es aún más corto: un fundido largo sobre una conexión
   celular se suma a la espera real y la página se siente lenta. */
body { animation: fx-pagina .4s ease-out; }
@keyframes fx-pagina { from { opacity: 0; } }
@media (max-width: 768px) {
    body { animation-duration: .18s; }
}

/* ── 1a · Escritorio: titulares letra a letra ────────────────────
   Cada letra sube con un desenfoque que se disipa. El ritmo es
   pausado (32 ms por letra, 0,75 s por letra) para que se sienta
   elegante y no un parpadeo. --i lo pone el script. */
.fx-porletra .fxw { display: inline-block; white-space: nowrap; }
.fx-porletra .fxl {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    filter: blur(5px);
}
.fx-porletra.fx-in .fxl {
    animation: fx-letra .95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i) * 46ms);
}
@keyframes fx-letra {
    55%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── 1t · Móvil: el titular del héroe se ESCRIBE ─────────────────
   Efecto máquina de escribir: cada letra aparece de golpe (así se ve
   teclear, sin fundidos) a cadencia humana, con un cursor que
   parpadea junto a la última letra. El cursor es un box-shadow para
   no mover ni un píxel del layout. Lo conduce motion.js letra a
   letra: solo UN elemento cambia por tecla — fluido en cualquier
   teléfono. Las letras invisibles ya ocupan su espacio, así que el
   texto no salta ni reacomoda nada mientras se escribe. */
.fx-tecleo .fxw { display: inline-block; white-space: nowrap; }
.fx-tecleo .fxl { opacity: 0; }
.fx-tecleo .fxl.fx-visible { opacity: 1; }
.fx-tecleo .fxl.fx-actual { animation: fx-cursor .85s steps(1) infinite; }
@keyframes fx-cursor {
    0%, 100% { box-shadow: 3px 0 0 0 var(--v3-verde); }
    50%      { box-shadow: none; }
}

/* ── 1b · Móvil: los demás titulares, palabra a palabra ──────────
   La palabra entera sube y se funde como un bloque. Pocas capas,
   ritmo sereno: fluido hasta en un gama de entrada. */
.fx-porpalabra .fxw {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(0.45em);
}
.fx-porpalabra.fx-in .fxw {
    animation: fx-palabra .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i) * 135ms);
}
@keyframes fx-palabra {
    100% { opacity: 1; transform: translateY(0); }
}

/* ── 2 · El degradado de marca respira ───────────────────────────
   OJO: animation no se suma entre reglas, se pisa. Por eso donde el
   trozo lleva degradado se declaran LAS DOS animaciones juntas
   (entrada + brillo), cada una con su retardo. */
.fx-porletra .text-gradient .fxl,
.fx-tecleo .text-gradient .fxl,
.fx-porpalabra .text-gradient .fxw {
    background-image: linear-gradient(100deg,
        var(--v3-verde) 0%, var(--v3-azul) 30%, var(--v3-verde) 60%,
        var(--v3-verde-osc) 80%, var(--v3-verde) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fx-porletra.fx-in .text-gradient .fxl {
    animation: fx-letra .95s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               fx-brillo 7s linear infinite;
    animation-delay: calc(var(--i) * 46ms), 0s;
}
.fx-porpalabra.fx-in .text-gradient .fxw {
    animation: fx-palabra .9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               fx-brillo 7s linear infinite;
    animation-delay: calc(var(--i) * 135ms), 0s;
}
@keyframes fx-brillo {
    to { background-position: -220% 0; }
}
/* Al terminar de escribirse, el degradado del titular cobra vida. */
.fx-tecleo.fx-brilla .text-gradient .fxl {
    animation: fx-brillo 7s linear infinite;
}

/* ── 3 · Palabras acentuadas: subrayado que se dibuja ──────────── */
.fx-tipo .fx-subraya {
    background-image: linear-gradient(90deg, var(--acie-verde), var(--acie-amarillo));
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 0% 0.14em;
    border-radius: 2px;
    transition: background-size 1.3s cubic-bezier(0.22, 1, 0.36, 1) .75s;
}
.fx-tipo.fx-in .fx-subraya { background-size: 100% 0.14em; }

/* ── 4 · La barra de navegación reacciona al scroll ────────────── */
.navbar { transition: box-shadow .35s ease, background-color .35s ease; }
.navbar.fx-flotante {
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(12,18,34,.06), 0 12px 32px -18px rgba(12,18,34,.25);
}
.nav-links a { position: relative; }
.nav-links a:not(.nav-btn-verify)::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: -4px;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--acie-verde), var(--acie-azul));
    transition: left .28s cubic-bezier(0.22, 1, 0.36, 1), right .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:not(.nav-btn-verify):hover::after,
.nav-links a:not(.nav-btn-verify).active::after { left: 8%; right: 8%; }

/* ── 5 · Botones con barrido de luz ────────────────────────────── */
.btn-primary, .btn-whatsapp-large {
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s ease;
}
.btn-primary::before, .btn-whatsapp-large::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}
.btn-primary:hover::before, .btn-whatsapp-large:hover::before { left: 130%; }
.btn-primary:hover, .btn-whatsapp-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(12,18,34,.08), 0 16px 32px -12px rgba(0,166,80,.45);
}
.btn-primary:active, .btn-whatsapp-large:active { transform: translateY(0) scale(0.98); }

/* ── 6 · Las burbujas del héroe flotan y siguen el scroll ──────── */
.hero-image-wrapper .circle-bg {
    animation: fx-deriva 11s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateY(calc(var(--fx-par, 0) * 1px));
}
.hero-image-wrapper .circle-bg.bg-green  { animation-duration: 13s; animation-delay: -4s; }
.hero-image-wrapper .circle-bg.bg-yellow { animation-duration: 9s;  animation-delay: -7s; }
@keyframes fx-deriva {
    from { translate: 0 0; }
    to   { translate: 14px 18px; }
}
.hero-image { transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-image-wrapper:hover .hero-image { transform: translateY(-6px) scale(1.015); }

.floating-badge { animation: fx-latido 5s ease-in-out infinite; }
@keyframes fx-latido {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ── 7 · Tarjetas: elevación con acento de marca ───────────────── */
.path-card, .otra-card, .dip-card, .plan-card {
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s ease;
}
.path-card:hover, .otra-card:hover, .dip-card:hover, .plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(12,18,34,.05), 0 26px 48px -18px rgba(0,166,80,.28);
}
.path-card .path-icon, .otra-card .otra-icon-wrap {
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.path-card:hover .path-icon { transform: translateY(-4px) rotate(-4deg) scale(1.08); }
.otra-card:hover .otra-icon-wrap { transform: translateY(-4px) rotate(4deg) scale(1.06); }

/* ── 8 · Apariciones auxiliares ────────────────────────────────── */
.fx-sube {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-sube.fx-in { opacity: 1; transform: translateY(0); }

/* ── 8b · Fluidez en móvil: quitar lo que traba el scroll ────────
   Tres costos invisibles que en un teléfono se sienten como tirones:
   1. Las burbujas del héroe llevan blur(60px) y derivaban sin parar:
      cada cuadro es un repintado caro. En móvil quedan quietas (el
      blur decorativo se ve igual; el movimiento ahí no se extraña).
   2. El vidrio esmerilado de la barra (backdrop-filter) obliga a
      desenfocar todo lo que pasa por debajo EN CADA cuadro de
      scroll. En móvil la barra pasa a blanco casi opaco: mismo
      efecto visual, costo cero.
   3. Los pulsos que animan box-shadow (botón grande de las landings,
      banner de fecha) y el anillo que gira tras el héroe: cada uno
      es un repintado por cuadro. En móvil, quietos.
   4. El brillo del degradado (fx-brillo) anima background-position
      sobre letras con background-clip:text: repinta cada letra en
      cada cuadro, PARA SIEMPRE. En móvil el degradado queda fijo
      una vez escrito — igual de bonito, sin ese motor encendido. */
@media (max-width: 768px) {
    .hero-image-wrapper .circle-bg { animation: none; }
    .hero-image-wrapper::before { animation: none; }
    .btn-cta-lg, .start-date-banner { animation: none !important; }
    .navbar.fx-flotante {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(255, 255, 255, 0.97);
    }
    .fx-tecleo.fx-brilla .text-gradient .fxl { animation: none; }
    .fx-porpalabra.fx-in .text-gradient .fxw {
        animation: fx-palabra .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: calc(var(--i) * 135ms);
    }
}

/* ── 9 · Accesibilidad: con «reducir movimiento» nada se desplaza,
   pero el sitio no queda muerto: fundido suave de solo opacidad.
   OJO: Android en ahorro de batería también reporta reduce-motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body { animation: none; }
    .fx-porletra .fxl, .fx-porpalabra .fxw { transform: none; filter: none; }
    /* El tecleo ya es de solo opacidad (nada se mueve): se conserva,
       solo sin el parpadeo del cursor. */
    .fx-tecleo .fxl.fx-actual { animation: none; }
    .fx-porletra.fx-in .fxl,
    .fx-porletra.fx-in .text-gradient .fxl {
        animation: fx-fundido .5s ease forwards;
        animation-delay: calc(var(--i) * 10ms);
    }
    .fx-porpalabra.fx-in .fxw,
    .fx-porpalabra.fx-in .text-gradient .fxw {
        animation: fx-fundido .5s ease forwards;
        animation-delay: calc(var(--i) * 40ms);
    }
    .fx-tipo .fx-subraya { background-size: 100% 0.14em; transition: none; }
    .hero-image-wrapper .circle-bg, .floating-badge { animation: none !important; }
    .fx-sube { opacity: 1; transform: none; transition: none; }
    .btn-primary::before, .btn-whatsapp-large::before { display: none; }
}
@keyframes fx-fundido { to { opacity: 1; } }

/* En pantallas táctiles no hay hover: que nada dependa de él. */
@media (hover: none) {
    .btn-primary::before, .btn-whatsapp-large::before { display: none; }
}