/* Capa de movimiento del sitio final (opción 8). Va después de nucleo.css y kit.css.
   Reglas: solo transform/translate/scale/opacity/clip-path; hover solo con mouse; nada llamativo en bucle infinito;
   todo visible sin JS (los estados ocultos dependen de .motion, que agrega mundo.js). */

@keyframes pop { from { opacity: 0; scale: .6; } }
@keyframes lift { from { opacity: 0; translate: 0 26px; scale: .97; } }
@keyframes drop { from { opacity: 0; translate: 0 -18px; scale: .96; } }
@keyframes slide-l { from { opacity: 0; translate: -16px 0; } }
@keyframes ring { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.7; } }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes bob { to { transform: translateY(-10px); } }
@keyframes rise-stage { from { opacity: 0; translate: 0 48px; } }
@keyframes in-l { from { opacity: 0; translate: -40px 12px; } }
@keyframes in-r { from { opacity: 0; translate: 40px 12px; } }
@keyframes glow-drift { to { translate: 6% 4%; scale: 1.08; } }

/* Barra de lectura */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--warm), var(--c2, var(--warm))); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Cabecera: se asienta con sombra al bajar */
.top { transition: background-color .3s ease, box-shadow .35s ease, border-color .3s ease; }
.top.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .7); }
:root[data-theme="light"] .top.scrolled { box-shadow: 0 12px 30px -24px rgba(0, 0, 0, .25); }

/* Botón principal: reflejo que cruza con el mouse */
.btn-main { position: relative; overflow: hidden; isolation: isolate; }
.btn-main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
:root[data-theme="light"] .btn-main::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); }
@media (hover: hover) and (pointer: fine) { .btn-main:hover::after { transform: translateX(110%); transition: transform .7s var(--ease-out); } }

/* Portada: el titular entra por partes, luego el panel sube y las tarjetas llegan desde los lados */
.motion .hero h1 span { animation: enter .9s var(--ease-out) .22s backwards; }
.motion .floor { animation: enter 1.4s var(--ease-out) .5s backwards; }
/* Las tarjetas entran cuando se ven (movimiento.js agrega .in), no al cargar */
.motion .card:not(.in) { opacity: 0; }
.motion .card.in.g-card, .motion .card.in.cat-card { animation: in-l .9s var(--ease-out) backwards, bob 7s ease-in-out infinite alternate; }
.motion .card.in.cert-card, .motion .card.in.plan-card { animation: in-r .9s var(--ease-out) backwards, bob 7s ease-in-out infinite alternate; }
.motion .card.in.g-card { animation-delay: .05s, 1s; }
.motion .card.in.cert-card { animation-delay: .15s, 1.8s; }
.motion .card.in.cat-card { animation-delay: .25s, 1.4s; }
.motion .card.in.plan-card { animation-delay: .35s, 2.2s; }
.motion .circuit { animation: enter 1s var(--ease-out) 1.1s backwards; }
@media (max-width: 1200px) {
  .motion .card.in.g-card, .motion .card.in.cat-card, .motion .card.in.cert-card, .motion .card.in.plan-card { animation: lift .7s var(--ease-out) backwards; animation-delay: calc(min(var(--ri, 0), 6) * 80ms); }
}

/* El panel sube al cargar y se endereza al hacer scroll (scroll-driven) o al aparecer (sin soporte) */
.motion .dash { animation: rise-stage 1.1s var(--ease-out) .45s backwards; }
@keyframes tilt { from { transform: rotateX(16deg) scale(.95); } }
@media (min-width: 1201px) {
  @supports (animation-timeline: view()) {
    .motion .dash { animation: rise-stage 1.1s var(--ease-out) .45s backwards, tilt linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% cover 42%; }
  }
  @supports not (animation-timeline: view()) {
    .dash { transition: transform 1.2s var(--ease-out); }
    .motion .dash:not(.flat) { transform: rotateX(12deg) scale(.96); }
  }
}
.motion .stats.in .stat i svg { stroke-dasharray: 20; animation: tick .5s var(--ease-out) backwards; animation-delay: calc(.5s + var(--k, 0) * 90ms); }

/* Títulos de sección: se descubren de abajo hacia arriba */
.motion .reveal .h2, .motion .tldr h2, .motion .gift-text h2 { clip-path: inset(-15% -4% 100% -4%); translate: 0 .35em; }
.motion .reveal.in .h2, .motion .tldr.in h2, .motion .gift-box.in .gift-text h2 { clip-path: inset(-15% -4% -25% -4%); translate: 0 0; transition: clip-path .9s var(--ease-out) .06s, translate .9s var(--ease-out) .06s; }

/* Tarjetas de servicios, planes e informe: suben con una leve escala; el ícono aparece después */
.svc, .plan, .dim { --reveal: lift; }
.motion .in .ico, .motion .in.ico { animation: pop .6s var(--ease-out) backwards; animation-delay: calc(.18s + min(var(--ri, 0), 6) * 70ms); }
.motion .dim.in .low { animation: slide-l .7s var(--ease-out) .3s backwards; }
.in-plans span:nth-child(2) { --k: 1; }
.in-plans span:nth-child(3) { --k: 2; }
.motion .dim.in .in-plans span { animation: pop .45s var(--ease-out) backwards; animation-delay: calc(.45s + var(--k, 0) * 70ms); }
.motion .ledger.in .entry .n { animation: pop .5s var(--ease-out) backwards; animation-delay: calc(.2s + var(--k, 0) * 60ms); }

/* Proceso: los pasos caen como avisos y una línea los va uniendo */
.steps { position: relative; isolation: isolate; }
.steps::before { content: ""; position: absolute; left: 43px; top: 32px; bottom: 32px; width: 2px; z-index: -1; border-radius: 2px; background: linear-gradient(var(--warm), var(--c2, var(--warm))); transform-origin: 50% 0; }
.step { --reveal: drop; }
.motion .steps .step.in { animation-delay: calc(min(var(--ri, 0), 4) * 130ms); }
.step .ico { position: relative; }
.step .ico::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--warm); opacity: 0; pointer-events: none; }
.motion .step.in .ico::after { animation: ring 1.2s var(--ease-out) 1 both; animation-delay: calc(.35s + min(var(--ri, 0), 4) * 130ms); }
.motion .steps::before { transform: scaleY(0); }
@supports (animation-timeline: view()) {
  .motion .steps::before { animation: fill-line linear both; animation-timeline: view(); animation-range: entry 30% cover 65%; }
  @keyframes fill-line { to { transform: scaleY(1); } }
}
@supports not (animation-timeline: view()) {
  .motion .steps.in::before { transform: scaleY(1); transition: transform 1.6s var(--ease-out) .3s; }
}

/* Planes: el recomendado enciende su filo; la etiqueta aparece */
.motion .pick::before { transform: scaleX(0); opacity: 0; }
.motion .pick.in::before { transform: scaleX(1); opacity: 1; transition: transform 1.4s var(--ease-out) .45s, opacity .6s ease .45s; }
.motion .plan.in .rec { animation: pop .5s var(--ease-out) .5s backwards; }
.motion .promises.in li .ico { animation-delay: calc(.2s + var(--k, 0) * 70ms); }

/* Beneficio: un reflejo cruza una vez */
.gift-box { position: relative; overflow: hidden; isolation: isolate; }
.gift-box::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--warm) 16%, transparent) 50%, transparent 65%); transform: translateX(-100%); pointer-events: none; }
.motion .gift-box.in::after { animation: shine 1.6s var(--ease-out) .5s 1 both; }

/* Formulario: la confirmación entra con su marca */
.form-status b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #3ecf8e; vertical-align: 1px; animation: pop .45s var(--ease-out) .1s backwards; }

/* Cierre: la luz se mueve lento (ambiental) */
.final::before { animation: glow-drift 12s ease-in-out infinite alternate; }

/* Efectos en bucle en pausa cuando no se ven (movimiento.js agrega .off) */
.off .spot i, .off .horizon::before, .off .floor::before, .off .circuit .pulse, .off .card, .final.off::before { animation-play-state: paused !important; }

/* Tarjetas del inicio en pantallas táctiles o chicas: quietas */
@media (max-width: 1200px), (hover: none) { .card.float { --px: 0; --py: 0; } }