/* CANDADO LEGAL · capa 2 «vivo» · an_extra.css · 9-oct-2026
   Microinteracciones: scroll, hover, clic y costuras entre bloques. Cargar DESPUÉS de cl-motion.css.
   Reglas: sin html.mo todo queda en su estado FINAL (quieto y completo). Sólo transform/opacity/clip-path/
   stroke-dashoffset (única excepción documentada: outline-offset del foco, M8).
   Apagar una mejora: borrar su bloque (cada uno va entre «M# ---» y el siguiente) o quitar la clase de <html>
   correspondiente que pone an_extra.js (an-off-M#). */
:root{
  --d-beat:900ms;                          /* latido completo (M6) */
  --e-settle:cubic-bezier(.34,1.32,.64,1); /* rebote corto ~6 % (abanico M4, clic M7) */
  --e-type:steps(54,end);                  /* mecanografiado: 49 caracteres + filete/hueco ≈ 54 celdas mono (M2) */
}

/* M1 --- Doble filete dorado bajo cada h2: el «papel de seguridad» firma el título ---------
   Reposo: filete visible. Con .mo: se dibuja de izq. a der. al terminar de subir las palabras. */
.h2w{position:relative;padding-bottom:18px}
.h2w::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:5px;pointer-events:none;
  background:linear-gradient(var(--oro),var(--oro)) 0 0/100% 1px no-repeat,linear-gradient(var(--oro),var(--oro)) 0 100%/72% 1px no-repeat;
  transform-origin:left}
.cta-final .h2w::after{background:linear-gradient(var(--oro-3),var(--oro-3)) 0 0/100% 1px no-repeat,linear-gradient(var(--oro-3),var(--oro-3)) 0 100%/72% 1px no-repeat}
.mo .h2w::after{transform:scaleX(0);transition:transform 700ms var(--e-io) calc(var(--nw,4)*50ms + 380ms)}
.mo .h2w.in::after{transform:none}

/* M2 --- Eyebrow mecanografiado (hero, ms 120→1320): el contrato se escribe a máquina ---------- */
.hero .fork-eyebrow{width:fit-content;max-width:100%}   /* el recorte en % debe medir el texto, no la columna */
.mo .hero .fork-eyebrow{animation:anType 1200ms var(--e-type) 120ms backwards}
@keyframes anType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:759px){.mo .hero .fork-eyebrow{animation:anType 700ms var(--e-io) 120ms backwards}} /* 2 renglones: barrido continuo */

/* M3 --- Pasos: el número se SELLA y el candado del paso 3 se cierra cuando llega el hilo -------
   (sustituye el scale(0→1) de la capa 1 por un golpe de sello con micro-sacudida) */
.st3::after{content:"";position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--oro-3);opacity:0;pointer-events:none}
@media(max-width:760px){.st3::after{top:0}}
.mo .st3.on::before{animation:anSeal 560ms var(--e-out) var(--dl,0ms) backwards}
@keyframes anSeal{0%{opacity:0;transform:scale(1.7) rotate(-16deg)}
  42%{opacity:1;transform:scale(.9) rotate(3deg)}58%{transform:scale(1.04) rotate(-2.5deg)}
  74%{transform:scale(.99) rotate(1.2deg)}100%{transform:none}}
.mo .st3.on::after{animation:anInk 640ms var(--e-out) calc(var(--dl,0ms) + 230ms)}
@keyframes anInk{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
/* candado: abierto mientras el hilo viaja; cae y hace «clac» al llegar (.steps3.lock) */
.st3 .ico .arc{transform-box:view-box;transform-origin:16px 11px}
/* (la capa 1 dejaba al arco sin trazo animado: su `transition` pisaba la de stroke-dashoffset) */
.mo .steps3 .st3 .ico .arc{transition:stroke-dashoffset 700ms var(--e-io) calc(var(--dl,0ms) + 200ms),transform 300ms var(--e-drop)}
.mo .steps3:not(.lock) .st3:last-child .ico .arc{transform:translateY(-2.6px) rotate(18deg)}
.mo .steps3.lock .st3:last-child .ico .arc{transform:none}
.mo .steps3.lock .st3:last-child .ico{animation:anClac 360ms var(--e-press) 300ms}
@keyframes anClac{0%{transform:none}40%{transform:scale(.86)}100%{transform:none}}
.mo .steps3.lock .st3:last-child::after{animation:anInk 700ms var(--e-out) 320ms}

/* M4 --- Testimonios en abanico: entran girados desde el centro y se enderezan --------------- */
@media(min-width:861px){
  .mo .tsts .tst.rv{transform-origin:50% 120%;transition:opacity 600ms var(--e-out) var(--dl,0ms),transform 1000ms var(--e-settle) var(--dl,0ms)}
  .mo .tsts .tst.rv:nth-child(1){--dl:0ms;transform:translate3d(28%,48px,0) rotate(-7deg)}
  .mo .tsts .tst.rv:nth-child(2){--dl:120ms;transform:translate3d(0,56px,0)}
  .mo .tsts .tst.rv:nth-child(3){--dl:240ms;transform:translate3d(-28%,48px,0) rotate(7deg)}
  .mo .tsts .tst.rv.in{transform:none}
}
@media(max-width:860px){ /* móvil: una columna, sólo una inclinación alterna que se corrige */
  .mo .tsts .tst.rv{transition:opacity 600ms var(--e-out),transform 800ms var(--e-settle)}
  .mo .tsts .tst.rv:nth-child(odd){transform:translate3d(0,28px,0) rotate(-2.5deg)}
  .mo .tsts .tst.rv:nth-child(even){transform:translate3d(0,28px,0) rotate(2.5deg)}
  .mo .tsts .tst.rv.in{transform:none}
}
/* arreglo de la capa 1: `.mo .rv.in{transform:none}` anulaba el levantamiento al hover */
@media(hover:hover) and (pointer:fine){.mo .tsts .tst.rv.in:hover{transform:translateY(-4px);transition:transform var(--d-m) var(--e-out),box-shadow var(--d-m) var(--e-out)}}

/* M5 --- Placas: la flecha gira como anLlave en la cerradura (hover con puntero fino y foco) ------ */
@media(hover:hover) and (pointer:fine){.mo .placa:hover::after{animation:anLlave 560ms var(--e-io)}}
.mo .placa:focus-visible::after{animation:anLlave 560ms var(--e-io)}
@keyframes anLlave{
  0%{transform:translateY(-50%) translateX(0) perspective(80px) rotateX(0)}
  30%{transform:translateY(-50%) translateX(10px) perspective(80px) rotateX(0)}            /* entra */
  75%{transform:translateY(-50%) translateX(10px) perspective(80px) rotateX(180deg)}       /* gira */
  88%{transform:translateY(-50%) translateX(7px) perspective(80px) rotateX(180deg)}        /* clic */
  100%{transform:translateY(-50%) translateX(calc(6px + var(--mgx,0px))) perspective(80px) rotateX(180deg)}}

/* M6 --- Latido del botón principal en reposo (cada 8 s sin interacción, máx. 4) --------------- */
html.mo .placas>.placa.beat:nth-child(n){animation:anBeat var(--d-beat) var(--e-io)}
html.mo .placas>.placa.beat:nth-child(n)::after{animation:anNudge var(--d-beat) var(--e-out)}
@keyframes anBeat{0%,36%,100%{transform:none}16%{transform:scale(1.016)}52%{transform:scale(1.008)}68%{transform:none}}
@keyframes anNudge{0%,100%{transform:translateY(-50%)}18%{transform:translateY(-50%) translateX(9px)}34%{transform:translateY(-50%)}52%{transform:translateY(-50%) translateX(5px)}}

/* M7 --- Odómetro: «clic» de cerradura al terminar de rodar ----------------------------------- */
.mo .odo.clk{animation:anClk 420ms var(--e-settle)}
@keyframes anClk{0%{transform:none}35%{transform:translateY(-.06em) scale(1.05)}100%{transform:none}}

/* M8 --- Footer y foco: el teléfono se entinta en oro; anillo de foco que «aprieta» ------------ */
.v2tel{position:relative;isolation:isolate;overflow:hidden;transition:border-color .2s,transform var(--d-xs) var(--e-out)}
.v2tel::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(217,192,138,.34);transform:scaleX(0);transform-origin:right;transition:transform 260ms var(--e-io);pointer-events:none}
@media(hover:hover) and (pointer:fine){.v2tel:hover::before{transform:none;transform-origin:left;transition-duration:380ms;transition-timing-function:var(--e-out)}}
.v2tel:focus-visible::before{transform:none}
.v2tel:active{transform:scale(.97)}
/* foco por teclado: anillo navy (oro-3 sobre navy). Excepción documentada: outline-offset = sólo paint, 1 elemento */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.cta-final :where(a,button):focus-visible{outline-color:var(--oro-3)}
.v2tel:focus-visible{outline-offset:4px}
.mo :where(a,button,summary,[tabindex]):focus-visible{animation:anFocus 220ms var(--e-out)}
@keyframes anFocus{from{outline-offset:10px;outline-color:transparent}}

/* reduced-motion: sin .mo no corre nada de lo anterior; se QUEDAN el filete, el subrayado del odómetro,
   el entintado del teléfono (cambio de estado, no movimiento: se vuelve instantáneo) y el anillo de foco. */
@media(prefers-reduced-motion:reduce){.v2tel::before{transition:none}.v2tel:active{transform:none}}