/* Mitic · efectos y animación por sección (2026-10-18). Misma gráfica: solo movimiento.
   Todo cuelga de html.fx-on, que mitic-efectos.js pone solo con JS, sin ?estatico=1 y sin prefers-reduced-motion:
   sin esa clase la página queda idéntica y quieta. Los flotes usan la propiedad `translate` (no `transform`)
   para no pelear con los reveals, el tilt ni los :hover que ya usan transform. */

/* barra de progreso de lectura: la cinta a rayas crece con el scroll (solo navegadores con scroll-timeline) */
.progreso{display:none}
@supports (animation-timeline:scroll()){
  html.fx-on .progreso{display:block;position:fixed;left:0;top:0;width:100%;height:4px;z-index:200;pointer-events:none;transform-origin:0 50%;
    background:repeating-linear-gradient(-45deg,#EA580C 0 10px,#FFD23F 10px 20px);animation:fx-prog linear both;animation-timeline:scroll(root)}
}
@keyframes fx-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* la cinta de las bandas avanza como cinta de obra */
.franja{overflow-x:clip}
html.fx-on .franja::after{left:-68px;animation:fx-cinta 2.4s linear infinite}
@keyframes fx-cinta{to{translate:33.94px 0}}   /* 24px de periodo a -45° = 24·√2 en horizontal: el bucle no salta */

/* encabezados: el guion del eyebrow se dibuja y el título entra con una cortina de abajo arriba */
html.fx-on .sec-head.reveal .eyebrow::before{width:0;transition:width .7s var(--ease-out) .15s}
html.fx-on .sec-head.reveal.in .eyebrow::before{width:22px}
html.fx-on .sec-head.reveal h2{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-out) .05s}
html.fx-on .sec-head.reveal.in h2{clip-path:inset(0 0 -10% 0)}

/* luz que sigue al cursor en las bandas oscuras (las coordenadas las pone mitic-efectos.js) */
html.fx-on .sec-hierro{background:radial-gradient(520px circle at var(--fx-x,50%) var(--fx-y,40%),rgba(234,88,12,.16),transparent 62%),#1A1816}
html.fx-on .sec-marca{background:radial-gradient(560px circle at var(--fx-x,50%) var(--fx-y,40%),rgba(255,210,63,.13),transparent 62%),var(--marca-hover)}

/* problema: la brasa respira, cada cifra sube al pasar */
html.fx-on .sec-marca::before{animation:fx-brasa 7s ease-in-out infinite alternate}
@keyframes fx-brasa{from{opacity:.75;scale:1}to{opacity:1;scale:1.08}}
html.fx-on .pain-item{transition:translate .35s var(--ease-out)}
html.fx-on .pain-item:hover{translate:0 -6px}
html.fx-on .pain-stat{transition:text-shadow .35s}
html.fx-on .pain-item:hover .pain-stat{text-shadow:0 0 28px rgba(255,210,63,.55)}

/* ventajas: la foto se acerca despacio, la tarjeta flotante respira, los íconos saltan al pasar */
html.fx-on .feat-foto img{transition:scale 1.2s var(--ease-out)}
html.fx-on .feat-foto:hover img{scale:1.05}
html.fx-on .feat-badge{animation:fx-flota 5s ease-in-out infinite}
html.fx-on .feat-list .card-ic{transition:rotate .35s var(--ease-out),scale .35s var(--ease-out)}
html.fx-on .feat-list li:hover .card-ic{rotate:-8deg;scale:1.1}
@keyframes fx-flota{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* cómo funciona: el hilo se dibuja paso a paso y cada número late una vez al aparecer */
html.fx-on .how-steps li:not(:last-child)::before{transform-origin:top;scale:1 0;transition:scale .6s var(--ease-out)}
html.fx-on .how-steps.in li:nth-child(1)::before{scale:1 1;transition-delay:.35s}
html.fx-on .how-steps.in li:nth-child(2)::before{scale:1 1;transition-delay:.75s}
html.fx-on .how-steps .how-n{scale:.4;transition:scale .5s cubic-bezier(.34,1.56,.64,1)}
html.fx-on .how-steps.in .how-n{scale:1;animation:fx-late 1.6s ease-out 2}
html.fx-on .how-steps.in li:nth-child(2) .how-n{transition-delay:.4s;animation-delay:.4s}
html.fx-on .how-steps.in li:nth-child(3) .how-n{transition-delay:.8s;animation-delay:.8s}
@keyframes fx-late{0%{box-shadow:0 0 0 6px var(--fondo),0 0 0 6px rgba(234,88,12,.6)}100%{box-shadow:0 0 0 6px var(--fondo),0 0 0 22px rgba(234,88,12,0)}}
html.fx-on .how-qr .qr-card{animation:fx-flota 6s ease-in-out infinite}
html.fx-on .gc-uses .chip{transition:translate .25s var(--ease-out),background .25s}
html.fx-on .gc-uses .chip:hover{translate:0 -3px}

/* la app: el visor responde al toque (mitic-app.css); aquí solo su resplandor respira */
html.fx-on .esc-paneles::before{animation:fx-brasa 6s ease-in-out infinite alternate}

/* botones naranjas: destello que cruza al pasar; el del hero late dos veces al cargar para llamar la vista */
html.fx-on .btn-primario{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  background-size:250% 100%;background-repeat:no-repeat;background-position:160% 0;transition:background-position .7s var(--ease-out),transform var(--d-2),box-shadow var(--d-2)}
html.fx-on .btn-primario:hover{background-position:-60% 0}
html.fx-on .hero .btn-primario{animation:fx-llama 2.2s ease-out 1.6s 2}
@keyframes fx-llama{0%{box-shadow:0 0 0 0 rgba(234,88,12,.55)}100%{box-shadow:0 0 0 16px rgba(234,88,12,0)}}

/* preguntas: la tarjeta naranja respira; cierre: el logo late suave */
html.fx-on .prim-side::after{animation:fx-brasa 6s ease-in-out infinite alternate}
html.fx-on .cta-logo svg{animation:fx-flota 5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  html.fx-on *,html.fx-on *::before,html.fx-on *::after{animation:none!important;transition:none!important}
}

/* ───────── Aparición y desaparición al hacer scroll (2026-10-18, pedido del dueño) ─────────
   mitic-efectos.js vigila .reveal, .stagger y los .sr que él mismo marca: al entrar en pantalla pone .in, al salir
   la quita y anota por dónde salió (data-sr-pos="arriba"|"abajo"), así el elemento se va en la dirección del scroll
   y vuelve a entrar desde ese lado. Usa las propiedades `translate`/`scale` (no `transform`) para no pisar las
   transformaciones propias: plan recomendado, abanico de teléfonos, tilt del QR, hovers. */
html.js.fx-on .reveal,html.js.fx-on .stagger>*{transform:none}
html.js.fx-on .reveal,html.js.fx-on .stagger>*,html.fx-on .sr{opacity:0;translate:0 48px;scale:.97;filter:blur(6px);
  transition:opacity .7s var(--ease-out),translate .9s cubic-bezier(.22,1,.36,1),scale .9s cubic-bezier(.22,1,.36,1),filter .7s var(--ease-out);
  transition-delay:var(--sr-d,0ms)}
html.js.fx-on [data-sr-pos="arriba"].reveal,html.js.fx-on [data-sr-pos="arriba"].stagger>*,html.fx-on .sr[data-sr-pos="arriba"]{translate:0 -48px}
html.js.fx-on .reveal.in,html.js.fx-on .stagger.in>*,html.fx-on .sr.in{opacity:1;translate:0 0;scale:1;filter:none}
/* variantes */
html.fx-on .sr-izq:not(.in){translate:-70px 0}
html.fx-on .sr-der:not(.in){translate:70px 0}
html.fx-on .sr-zoom:not(.in){scale:.82;translate:0 0}
html.fx-on .sr-brota:not(.in){scale:.6;translate:0 14px;filter:none}
html.js.fx-on .feat-foto.reveal:not(.in){translate:-80px 0;scale:.94}
html.js.fx-on .how-qr.reveal:not(.in){scale:.85;translate:0 0}
html.js.fx-on .esc-paneles.reveal:not(.in){scale:.9;translate:0 60px}
/* cascada de los hijos de .stagger al volver a entrar */
html.js.fx-on .stagger>*:nth-child(2){--sr-d:70ms}html.js.fx-on .stagger>*:nth-child(3){--sr-d:140ms}html.js.fx-on .stagger>*:nth-child(4){--sr-d:210ms}
html.js.fx-on .stagger>*:nth-child(5){--sr-d:280ms}html.js.fx-on .stagger>*:nth-child(6){--sr-d:350ms}