/* Kit de movimiento de landings (agente Movimiento e interacción). Catálogo y reglas: Plantillas/Movimiento/LEEME.md.
   Trabaja con Scripts/movimiento.js, que pone la clase js-mov y las variables --hp, --sp, --py, --pp, --mx, --my.
   Los colores salen de la marca de cada sitio; si no existen, usa los de respaldo. Solo transform y opacity en lo que se mueve. */
:root{
  --mv-acento:var(--miel,var(--acento,#d9a441));
  --mv-tinta:var(--azuki,var(--tinta,#3a2a28));
  --mv-suave:var(--sakura,#f3d6cb);
  --mv-linea:var(--linea,#e7e4dc);
  --mv-exito:var(--exito,var(--acento,#2f5d50));
  --mv-caja:var(--superficie,var(--caja,#fff))
}
/* Chips flotantes del hero (opcional: <span class="flota f1|f2|f3" aria-hidden="true"> dentro de .tel-hero, con números reales de esa captura) */
[data-tipo="hero"]{overflow-x:clip}
.tel-hero{position:relative}
.flota{position:absolute;z-index:2;background:var(--mv-caja);border:1px solid var(--mv-linea);border-radius:14px;padding:8px 12px;font-size:.82rem;line-height:1.25;color:var(--tinta-2,var(--suave,#666));box-shadow:0 10px 28px rgba(0,0,0,.12);white-space:nowrap}
.flota b{display:block;font-family:var(--f-display,inherit);font-size:1.15rem;color:var(--mv-tinta)}
.flota.f1{left:-34px;top:44%}
.flota.f2{right:-30px;top:66%}.flota.f2 b{color:var(--mv-exito)}
.flota.f3{right:-18px;top:9%;background:var(--mv-acento);border-color:var(--mv-acento);color:var(--sobre-miel,#2a1a10);font-weight:800}
@media (max-width:420px){.flota.f1{left:-4px}.flota.f2{right:-4px}.flota.f3{right:-2px}.flota{max-width:44vw;white-space:normal}}
.pin-tel{display:none}
@media print{.flota,.deco,.fondo-vivo{display:none}}

@media screen and (prefers-reduced-motion:no-preference){
  @keyframes mv-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes mv-media{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes mv-chip{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
  @keyframes mv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes mv-brillo{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
  @keyframes mv-late{0%,100%{transform:scale(1)}40%{transform:scale(1.05)}70%{transform:scale(.99)}}

  /* ===== hero: texto en cascada, imagen que entra inclinada en 3D y se endereza al bajar, sigue al mouse ===== */
  .js-mov [data-tipo="hero"]{position:relative;isolation:isolate}
  .js-mov [data-tipo="hero"] .mv-texto{translate:0 calc(var(--hp,0) * 40px);opacity:calc(1 - var(--hp,0) * .35)}
  .js-mov [data-tipo="hero"] .mv-texto>*{animation:mv-entra .6s cubic-bezier(.2,.8,.2,1) both}
  .js-mov [data-tipo="hero"] .mv-texto>:nth-child(1){animation-delay:.05s}.js-mov [data-tipo="hero"] .mv-texto>:nth-child(2){animation-delay:.14s}
  .js-mov [data-tipo="hero"] .mv-texto>:nth-child(3){animation-delay:.26s}.js-mov [data-tipo="hero"] .mv-texto>:nth-child(4){animation-delay:.38s}
  .js-mov [data-tipo="hero"] .mv-texto>:nth-child(5){animation-delay:.48s}.js-mov [data-tipo="hero"] .mv-texto>:nth-child(n+6){animation-delay:.56s}
  .js-mov [data-tipo="hero"] .mv-media{animation:mv-media .9s cubic-bezier(.2,.9,.25,1.1) .25s backwards;rotate:y calc(-16deg + var(--hp,0) * 16deg);translate:0 calc(var(--hp,0) * -50px);transform:rotateX(calc(var(--my,0) * -5deg)) rotateY(calc(var(--mx,0) * 7deg));transition:transform .35s ease-out}
  .js-mov [data-tipo="hero"]>*,.js-mov [data-tipo="hero"] .grid{perspective:1400px}
  .js-mov [data-tipo="hero"]::before,.js-mov [data-tipo="hero"]::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:-1;opacity:.55}
  .js-mov [data-tipo="hero"]::before{width:min(360px,70vw);height:min(360px,70vw);background:var(--mv-suave);right:0;top:30px;translate:0 calc(var(--hp,0) * 160px);scale:calc(1 + var(--hp,0) * .2)}
  .js-mov [data-tipo="hero"]::after{width:min(280px,60vw);height:min(280px,60vw);background:var(--mv-acento);left:0;bottom:-60px;opacity:.3;translate:0 calc(var(--hp,0) * -110px)}
  .js-mov .flota{animation:mv-chip .5s cubic-bezier(.2,.9,.25,1.4) backwards,mv-bob 5s ease-in-out infinite}
  .js-mov .flota.f3{animation-delay:.95s,1.45s}.js-mov .flota.f1{animation-delay:1.15s,1.65s}.js-mov .flota.f2{animation-delay:1.35s,2.4s}
  .js-mov .flota.f1{translate:calc(var(--hp,0) * -18px + var(--mx,0) * -10px) calc(var(--hp,0) * -90px + var(--my,0) * -8px)}
  .js-mov .flota.f2{translate:calc(var(--hp,0) * 18px + var(--mx,0) * 14px) calc(var(--hp,0) * -150px + var(--my,0) * 10px)}
  .js-mov .flota.f3{translate:calc(var(--hp,0) * 10px + var(--mx,0) * 8px) calc(var(--hp,0) * -40px + var(--my,0) * -6px)}

  /* ===== toda la página ===== */
  .js-mov .cab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--mv-acento),var(--mv-tinta));transform-origin:0 50%;transform:scaleX(var(--sp,0))}
  .fondo-vivo{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
  .fondo-vivo.activa{opacity:1}
  .f-suave{background:radial-gradient(120% 80% at 80% 10%,color-mix(in srgb,var(--mv-suave) 60%,transparent),transparent 70%)}
  .f-acento{background:radial-gradient(120% 80% at 15% 20%,color-mix(in srgb,var(--mv-acento) 26%,transparent),transparent 70%)}
  .f-linea{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--mv-linea) 80%,transparent),transparent 70%)}
  .js-mov main section:not([data-tipo="hero"]){position:relative;isolation:isolate;overflow-x:clip}
  .js-mov [data-par]{translate:0 calc(var(--py,0) * 1px)}
  .js-mov .deco{position:absolute;z-index:-1;border-radius:50%;filter:blur(55px);pointer-events:none;opacity:.42}
  .js-mov .deco.d1{width:min(380px,60vw);height:min(380px,60vw);background:var(--mv-suave);right:0;top:10%}
  .js-mov .deco.d2{width:min(320px,55vw);height:min(320px,55vw);background:var(--mv-acento);left:0;top:30%;opacity:.25}
  .js-mov .rev{opacity:0;transform:translateY(56px) scale(.96);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .js-mov .rev.vis{opacity:1;transform:none}
  .js-mov h2.rev{transform:translateY(34px)}
  .js-mov .btn{transition:transform .12s ease,box-shadow .2s ease}
  .js-mov .btn:active{transform:scale(.97)}
  .js-mov [data-tipo="hero"] .btn:first-of-type{position:relative;overflow:hidden}
  .js-mov [data-tipo="hero"] .btn:first-of-type::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%);animation:mv-brillo 1s ease-out 1.5s both;pointer-events:none}
  @media (hover:hover){.js-mov .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.14)}}

  /* ===== dolores: llegan como mensajes, uno tras otro ===== */
  .js-mov [data-tipo="dolores"] li.rev{transform:translateY(40px) scale(.55);transform-origin:12% 100%;transition:opacity .45s ease,transform .75s cubic-bezier(.2,1.4,.35,1);transition-delay:calc(var(--i,0) * 220ms + 150ms)}
  .js-mov [data-tipo="dolores"] li:nth-child(even).rev{transform-origin:88% 100%}
  .js-mov [data-tipo="dolores"] li.rev.vis{transform:none}
  .js-mov [data-tipo="dolores"] li span{display:block;transition:opacity .5s ease;transition-delay:calc(var(--i,0) * 220ms + 650ms)}
  .js-mov [data-tipo="dolores"] li.rev:not(.vis) span{opacity:0}

  /* ===== pasos: números que giran; con pantallas reales, teléfono fijo en computador y por turno en celular ===== */
  .js-mov [data-tipo="pasos"] li.rev{transform:translateX(-40px)}
  .js-mov [data-tipo="pasos"] li.rev.vis{transform:none}
  .js-mov [data-tipo="pasos"] li h3::before{display:inline-grid;transition:transform .6s cubic-bezier(.2,1.5,.35,1);transition-delay:calc(var(--i,0) * 120ms + 200ms)}
  .js-mov [data-tipo="pasos"] li.rev:not(.vis) h3::before{transform:scale(0) rotate(-120deg)}
  .js-mov [data-tipo="pasos"] li .tel{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease;transition-delay:calc(var(--i,0) * 120ms + 150ms)}
  .js-mov [data-tipo="pasos"] li.rev:not(.vis) .tel{opacity:0;transform:translateX(-60px) rotate(-6deg)}
  .js-mov [data-tipo="pasos"] li:nth-child(even).rev:not(.vis) .tel{transform:translateX(60px) rotate(6deg)}
  .js-mov [data-tipo="pasos"] ol.pin{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:72px;position:relative;padding-left:56px}
  .js-mov [data-tipo="pasos"] ol.pin>li{grid-column:1;min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  .js-mov [data-tipo="pasos"] ol.pin>li.rev.vis{opacity:.35}
  .js-mov [data-tipo="pasos"] ol.pin>li.actual,.js-mov [data-tipo="pasos"] ol.pin>li.rev.vis.actual{opacity:1}
  .js-mov [data-tipo="pasos"] ol.pin>li .tel{display:none}
  .js-mov [data-tipo="pasos"] ol.pin>li h3{font-size:1.7rem}.js-mov [data-tipo="pasos"] ol.pin>li p{font-size:1.12rem;max-width:30em}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel{display:block;grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(50vh - 290px);align-self:start}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel .tel{position:relative;max-width:280px}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel img{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel img:not(:first-child){position:absolute;inset:12px;width:calc(100% - 24px)}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel img:not(.activa){opacity:0;transform:translateY(24px) scale(.96)}
  .js-mov [data-tipo="pasos"] ol.pin::before,.js-mov [data-tipo="pasos"] ol.pin::after{content:"";position:absolute;left:16px;top:34vh;bottom:34vh;width:3px;border-radius:3px;background:var(--mv-linea)}
  .js-mov [data-tipo="pasos"] ol.pin::after{background:linear-gradient(var(--mv-acento),var(--mv-tinta));transform-origin:50% 0;transform:scaleY(var(--pp,0))}

  /* ===== ejemplo: se imprime como boleta, los montos cuentan, el total se subraya y el precio cae como timbre ===== */
  .js-mov [data-tipo="ejemplo"] tr.rev{transform:translateX(-30px);transition-delay:calc(var(--i,0) * 120ms)}
  .js-mov [data-tipo="ejemplo"] tr.rev.vis{transform:none}
  .js-mov [data-tipo="ejemplo"] tr.total td{position:relative}
  .js-mov [data-tipo="ejemplo"] tr.total.rev td{border-top-color:transparent}
  .js-mov [data-tipo="ejemplo"] tr.total td::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--mv-tinta);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s ease;transition-delay:calc(var(--i,0) * 120ms + 250ms)}
  .js-mov [data-tipo="ejemplo"] tr.total.vis td::before{transform:scaleX(1)}
  .js-mov [data-tipo="ejemplo"] tr.precio.rev{transform:scale(1.5) rotate(-4deg);transition:opacity .3s ease,transform .55s cubic-bezier(.2,1.6,.35,1);transition-delay:calc(var(--i,0) * 120ms + 200ms)}
  .js-mov [data-tipo="ejemplo"] tr.precio.rev.vis{transform:none}

  /* ===== incluye: cada check se dibuja cuando aparece su tarjeta ===== */
  .js-mov [data-tipo="incluye"] li.rev{transition-delay:calc(var(--i,0) * 70ms)}
  .js-mov [data-tipo="incluye"] li::before{transition:transform .45s cubic-bezier(.2,1.6,.35,1);transition-delay:calc(var(--i,0) * 70ms + 350ms)}
  .js-mov [data-tipo="incluye"] li.rev:not(.vis)::before{transform:rotate(-45deg) scale(0)}

  /* ===== compara: filas por turno y la columna propia (.nuestra) se ilumina de arriba abajo ===== */
  .js-mov [data-tipo="compara"] tr.rev{transform:translateY(18px);transition-delay:calc(var(--i,0) * 110ms)}
  .js-mov [data-tipo="compara"] tr.rev.vis{transform:none}
  .js-mov [data-tipo="compara"] .nuestra{position:relative}
  .js-mov [data-tipo="compara"] tr .nuestra::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-110%);pointer-events:none}
  .js-mov [data-tipo="compara"] tr.vis .nuestra::after{transition:transform .8s ease;transition-delay:calc(var(--i,0) * 110ms + 300ms);transform:translateX(110%)}

  /* ===== para-quien: los dos bloques entran desde lados opuestos ===== */
  .js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(odd){transform:translateX(-80px) rotate(-2deg)}
  .js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(even){transform:translateX(80px) rotate(2deg)}
  .js-mov [data-tipo="para-quien"] .rev.vis:not(h2):not(p){transform:none}

  /* ===== precio: la caja sube con un leve giro, el monto cuenta, el botón late una vez y el sello gira ===== */
  .js-mov [data-tipo="precio"] .rev:is(.precio-caja,.caja){transform:translateY(60px) scale(.9) rotate(-1.5deg)}
  .js-mov [data-tipo="precio"] .rev.vis:is(.precio-caja,.caja){transform:none}
  .js-mov [data-tipo="precio"] .vis .btn{animation:mv-late .8s ease 1.3s 1}
  .js-mov [data-tipo="precio"] .garantia.rev .sello{transition:transform .6s cubic-bezier(.2,1.6,.35,1);transition-delay:.5s}
  .js-mov [data-tipo="precio"] .garantia.rev:not(.vis) .sello{transform:scale(0) rotate(-90deg)}

  /* ===== faq: la respuesta se abre suave ===== */
  .js-mov [data-tipo="faq"] details[open]>:not(summary){animation:mv-entra .35s cubic-bezier(.2,.8,.2,1)}

  /* ===== cierre: el título crece cuando la sección entra ===== */
  .js-mov [data-tipo="cierre"] h2{transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s ease}
  .js-mov [data-tipo="cierre"]:not(.en-vista) h2{transform:scale(.9);opacity:0}

  @media (hover:hover){.js-mov .tarjeta.rev.vis:hover{transform:translateY(-4px);transition-delay:0s}}

  /* ===== celular: las entradas laterales pasan a verticales, nada parte fuera de la pantalla ===== */
  @media (max-width:760px){
    .js-mov [data-tipo="pasos"] li.rev{transform:translateY(40px)}
    .js-mov [data-tipo="pasos"] li.rev:not(.vis) .tel{transform:translateY(40px) rotate(-3deg) scale(.94)}
    .js-mov [data-tipo="pasos"] li:nth-child(even).rev:not(.vis) .tel{transform:translateY(40px) rotate(3deg) scale(.94)}
    .js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(odd),.js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(even){transform:translateY(50px)}
    .js-mov [data-tipo="ejemplo"] tr.rev{transform:translateY(16px)}
    .js-mov [data-tipo="ejemplo"] tr.precio.rev{transform:scale(.8)}
    .js-mov [data-tipo="precio"] .rev:is(.precio-caja,.caja){transform:translateY(60px) scale(.94)}
  }
}

/* Oferta de lanzamiento (fecha fija igual para todos; se oculta sola al terminar). Ver comun.oferta */
.oferta-banda{background:var(--tinta,#1d1d1b);color:var(--fondo,#fff);font-size:.92rem;line-height:1.35;position:relative;z-index:21}
.oferta-banda .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:10px 0;text-align:center}
.oferta-banda .ob-chip{background:var(--acento,var(--miel,#f5b700));color:var(--tinta,#1d1d1b);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.oferta-banda .cuenta{font-weight:800;color:var(--acento,var(--miel,#f5b700));font-variant-numeric:tabular-nums}
.oferta-banda a{color:inherit;font-weight:700}
.oferta-precio{margin:6px 0 14px;padding:14px 16px;border-radius:16px;background:var(--acento-suave,var(--acento-fondo,#fff4d6));text-align:left;font-size:.95rem}
.oferta-precio p{margin:0 0 4px}.oferta-precio .op-tit{font-weight:800}.oferta-precio .op-despues{color:var(--bruma,var(--tinta-2,#555))}
.oferta-precio .cuenta{font-weight:800;color:var(--alerta,var(--error,#a8432f));font-variant-numeric:tabular-nums}.oferta-precio .op-bono{margin-top:8px}
[data-fin][hidden]{display:none!important}