/* CANDADO LEGAL · home animado · «Papel de seguridad» · 9-oct-2026
   Sólo se oculta/anima si <html class="mo"> (la pone el script del <head> cuando NO hay reduced-motion ni clFx=off).
   Sin .mo todo se ve completo y quieto. Sólo transform/opacity/stroke-dashoffset. */
:root{--d-xs:160ms;--d-s:240ms;--d-m:420ms;--d-l:700ms;--d-xl:1100ms;
  --e-out:cubic-bezier(.22,1,.36,1);--e-io:cubic-bezier(.65,0,.35,1);--e-press:cubic-bezier(.34,1.56,.64,1);--e-drop:cubic-bezier(.5,0,.75,0);--e-roll:cubic-bezier(.16,1,.3,1)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav: hilo de progreso + sombra ---------- */
.v2nav{transition:box-shadow var(--d-s) var(--e-out)}
.v2nav.scrolled{box-shadow:0 6px 20px -12px rgba(18,44,73,.25)}
.v2nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--oro);transform-origin:left;transform:scaleX(var(--sp,0));pointer-events:none}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:clip;isolation:isolate}
.hero .guil{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 68%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 68%,transparent);
  transform:translate3d(0,calc(var(--sy,0)*-40px),0)}
.hero-grid{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center}
.hero-txt{grid-column:1/8;min-width:0}
.hero-vis{grid-column:8/13;position:relative;align-self:center}
.hero-par{transform:translate3d(calc(var(--mx,0)*-10px),calc(var(--my,0)*-10px + var(--sy,0)*-26px),0);will-change:transform}
.hero-img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:72svh;object-fit:cover;object-position:50% 58%;border-radius:22px;box-shadow:0 30px 70px -30px rgba(18,44,73,.45)}
.hero-frame{position:relative;border-radius:22px;overflow:hidden}
.hero-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(14,34,56,.22)),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");mix-blend-mode:multiply;opacity:.4}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:22px;z-index:2}
.hero .fork-meta{max-width:60ch}
.hero .fork-eyebrow,.hero h1{max-width:none}
.hero h1{font-size:clamp(34px,4.6vw,62px)}
.hero-vis .sello-wrap{position:absolute;left:-18px;bottom:14%;width:168px;z-index:3;transform:translate3d(calc(var(--mx,0)*4px),calc(var(--my,0)*4px),0)}
.cl-sello{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 14px 22px rgba(14,34,56,.38))}
.cl-sello .s-arco{transform-box:fill-box;transform-origin:center bottom}
.cl-sello .s-ring{transform-origin:100px 100px}
.cl-sello .s-shine{transform:translateX(200px)}
.sello-wrap:hover .s-arco{transform:translateY(-6px);transition:transform 180ms var(--e-out)}
.sello-wrap .s-arco{transition:transform 220ms var(--e-drop)}
@media(max-width:1099px){.hero-vis .sello-wrap{left:-14px;width:136px}}
@media(max-width:759px){
  .hero-grid{display:flex;flex-direction:column;align-items:stretch}
  .hero-vis{order:-1;margin-bottom:46px}
  .hero-img{aspect-ratio:3/2;height:clamp(180px,26svh,240px);max-height:none;width:100%;border-radius:16px}
  .hero-frame{border-radius:16px}.hero-frame::after{border-radius:16px}
  .hero-vis .sello-wrap{left:auto;right:10px;bottom:-26px;width:96px}
  .hero.fork{min-height:0;padding-top:20px}
  .hero-dust{display:none}
}
.scrollcue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#68727E;transition:opacity var(--d-s)}
.scrollcue i{display:block;width:1px;height:36px;background:var(--line);position:relative}
.scrollcue i::after{content:"";position:absolute;left:-1.5px;top:0;width:4px;height:4px;border-radius:50%;background:var(--oro)}
.scrollcue.off{opacity:0;pointer-events:none}
@media(max-width:759px),(max-height:700px){.scrollcue{display:none}}

/* ---------- contraste (medido) ---------- */
.fork-eyebrow,.placa .k,.st3::before,.v2foot .slog{color:#8A6A22}
.fork-eyebrow::before{background:#8A6A22}

/* ---------- banda de confianza ---------- */
.home .band{position:relative}
.home .tl b{display:flex;align-items:center;height:1.15em;line-height:1}
.home .tl b em{align-self:flex-start;margin-top:.12em}
.odo{display:inline-flex;height:1em;overflow:hidden;line-height:1}
.odo .col{display:block;height:1em;overflow:hidden}
.odo .col>span{display:block;height:1em;transition:none}
.odo .sep{display:block;height:1em}
.trustline .tl{position:relative}
.trustline .tl+.tl::before{content:"";position:absolute;left:calc(clamp(18px,3vw,40px)/-2);top:6%;height:88%;width:1px;background:var(--line);transform-origin:top}
@media(max-width:640px){.trustline .tl+.tl::before{display:none}}
.rule2{height:7px;margin:0 auto 0;max-width:1100px;position:relative}
.rule2::before,.rule2::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(160,126,47,.4);transform-origin:center}
.rule2::before{top:0}.rule2::after{top:4px}

/* ---------- franjas de cine ---------- */
.cine{position:relative;margin:0;overflow:hidden;background:var(--navy-2);aspect-ratio:21/9;max-height:62svh;width:100%}
.cine picture,.cine img{display:block;width:100%;height:100%}
.cine img{object-fit:cover}
.cine figcaption{position:absolute;left:clamp(20px,4vw,48px);bottom:16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-3);background:rgba(14,34,56,.55);padding:5px 10px;border-radius:4px}
@media(max-width:759px){.cine{aspect-ratio:16/10}}

/* ---------- pasos ---------- */
.home .steps3{position:relative}
.home .band#servicios{background:var(--papel-2)}
.st3{border-top:0;padding-top:70px}
.st3::before{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--oro-3)!important;display:grid;place-items:center;font-size:14px;letter-spacing:0;transition:transform var(--d-s) var(--e-out)}
.st3:hover::before{transform:rotate(12deg)}
.st3:hover h3{color:#8A6A22}
.st3 .ico{position:absolute;right:0;top:12px;width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hilo{position:absolute;left:28px;right:0;top:28px;height:2px;background:linear-gradient(90deg,var(--oro),rgba(160,126,47,.35));transform-origin:left;transform:scaleX(1)}
@media(max-width:760px){.hilo{left:27px;right:auto;top:28px;bottom:0;width:2px;height:auto;transform-origin:top;transform:scaleY(1)}.st3{padding-left:76px;padding-top:6px;min-height:64px}.st3::before{top:0}.st3 .ico{top:6px}}

/* ---------- testimonios ---------- */
.tst{position:relative;transition:transform var(--d-m) var(--e-out),box-shadow var(--d-m) var(--e-out),border-color var(--d-m)}
.tst::before{content:"\201C";position:absolute;left:18px;top:2px;font-family:var(--disp);font-weight:800;font-size:72px;line-height:1;color:rgba(217,192,138,.7);pointer-events:none}
.tst q{display:block;padding-top:22px}
.tst::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--oro);transform:scaleX(0);transform-origin:left;transition:transform var(--d-m) var(--e-out);border-radius:16px 16px 0 0}
@media(hover:hover) and (pointer:fine){.tst:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--oro)}.tst:hover::after{transform:scaleX(1)}
  .tst .av{position:relative}.tst:hover .av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px dashed var(--oro);animation:spin 6s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-2)}
.cta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta-bg picture,.cta-bg img{display:block;width:100%;height:100%;object-fit:cover;opacity:.26;mix-blend-mode:luminosity;transform:scale(calc(1 + var(--p,0)*.06))}
.cta-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 30% 50%,transparent,rgba(14,34,56,.7))}
.cta-final .placa{position:relative}

/* ---------- reduced / sin .mo: placas y tilt quietos ---------- */

/* =============== SÓLO CON html.mo =============== */
.mo .rv{opacity:0;transform:translateY(24px);transition:opacity var(--d-l) var(--e-out) var(--dl,0ms),transform var(--d-l) var(--e-out) var(--dl,0ms)}
.mo .rv.in{opacity:1;transform:none}
.mo .cw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.mo .cw>span{display:inline-block;transform:translateY(105%);transition:transform 640ms var(--e-out) calc(var(--i,0)*50ms)}
.mo .in .cw>span{transform:none}
/* intro del hero (por animación, sin esperar al scroll) */
.mo .hero h1 .l1,.mo .hero h1 .l2{clip-path:none;animation:none}
.mo .hero h1 .cw>span{transform:none;animation:wordUp 640ms var(--e-out) calc(var(--d,0ms) + var(--i,0)*70ms) backwards;transition:none}
.mo .hero h1 .l2{--d:220ms}
@keyframes wordUp{from{transform:translateY(105%)}to{transform:none}}
.mo .fork-eyebrow::before{transform-origin:left;animation:grow 500ms var(--e-io) backwards}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.mo .hero .fork-q{animation:rise 420ms var(--e-out) 600ms backwards}
.mo .hero .placas .placa:nth-child(1){animation:rise 700ms var(--e-out) 760ms backwards}
.mo .hero .placas .placa:nth-child(2){animation:rise 700ms var(--e-out) 880ms backwards}
.mo .hero .fork-meta{animation:rise 420ms var(--e-out) 1000ms backwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mo .hero-img{animation:imgIn 1600ms var(--e-out) backwards}
@keyframes imgIn{from{transform:scale(1.08)}to{transform:none}}
.mo .scrollcue i::after{animation:cue 1800ms var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(32px);opacity:0}}
/* el sello (UNO): se dibuja, el arco cae, estampa */
.mo .s-disk{animation:sDisk 420ms var(--e-out) 900ms backwards;transform-box:fill-box;transform-origin:center}
@keyframes sDisk{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.mo .s-r{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1100ms var(--e-io) backwards}
.mo .s-r1{animation-delay:1000ms}.mo .s-r2{animation-delay:1120ms}.mo .s-r3{animation-delay:1240ms}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mo .s-body{stroke-dasharray:1;animation:draw 600ms var(--e-io) 1300ms backwards}
.mo .s-arco{animation:arco 400ms var(--e-drop) 1700ms backwards}
@keyframes arco{0%{transform:translateY(-9px)}65%{transform:translateY(0)}80%{transform:translateY(-1.5px)}100%{transform:translateY(0)}}
.mo .s-in{transform-box:fill-box;transform-origin:center;animation:stamp 320ms var(--e-press) 1960ms}
@keyframes stamp{0%{transform:none}45%{transform:scale(.94)}100%{transform:none}}
.mo .s-wave{transform-box:fill-box;transform-origin:center;opacity:0;animation:wave 700ms var(--e-out) 1960ms}
@keyframes wave{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.38)}}
.mo .s-key{transform-box:fill-box;transform-origin:center;animation:key 240ms var(--e-io) 2000ms backwards}
@keyframes key{from{transform:rotate(-90deg)}to{transform:none}}
.mo .s-shine{animation:shine 600ms var(--e-io) 2050ms backwards;transform:translateX(200px)}
@keyframes shine{from{transform:translateX(-200px)}to{transform:translateX(200px)}}
.mo .s-ring{animation:ringIn 400ms linear 2300ms backwards,ringSpin 90s linear 2700ms infinite}
@keyframes ringIn{from{opacity:0}to{opacity:1}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.mo .hero.paused .s-ring{animation-play-state:running,paused}
.mo .hero.paused .scrollcue i::after{animation-play-state:paused}

/* placas: tilt + brillo (sólo puntero fino) */
@media(hover:hover) and (pointer:fine){
  .mo .placa{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:background .22s,box-shadow .22s,transform 420ms var(--e-out)}
  .mo .placa:hover{--ty:-3px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);transition:background .22s,box-shadow .22s,transform 90ms linear}
  .mo .placa::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .22s;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(217,192,138,.18),transparent 60%)}
  .mo .placa:hover::before{opacity:1}
  .mo .placa:hover::after{transform:translateY(-50%) translateX(calc(6px + var(--mgx,0px)))}
}
.placa:active{transform:scale(.985)!important}

/* odómetro y separadores */
.mo .odo .col>span{transform:translateY(0)}
.mo .odo.go .col>span{transform:translateY(calc(var(--n)*-1em));transition:transform 1400ms var(--e-roll) calc(var(--k)*60ms)}
.mo .trustline .tl+.tl::before{transform:scaleY(0);transition:transform 600ms var(--e-io) 1500ms}
.mo .trustline.in .tl+.tl::before{transform:scaleY(1)}
.mo .rule2::before,.mo .rule2::after{transform:scaleX(0);transition:transform 900ms var(--e-io)}
.mo .rule2.in::before,.mo .rule2.in::after{transform:scaleX(1)}

/* franjas: se abren como bóveda con el scroll */
.mo .cine{clip-path:inset(calc((1 - var(--o,0))*14%) 0 calc((1 - var(--o,0))*14%) 0)}
.mo .cine img{transform:translate3d(0,calc((var(--p,.5) - .5)*16%),0) scale(1.18)}

/* pasos: hilo + sellos */
.mo .hilo{transform:scaleX(var(--p,0))}
@media(max-width:760px){.mo .hilo{transform:scaleY(var(--p,0))}}
.mo .st3::before{transform:scale(0);transition:transform 280ms var(--e-press) var(--dl,0ms)}
.mo .st3.on::before{transform:none}
.mo .st3:hover::before{transform:rotate(12deg)}
.mo .st3 .ico *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--e-io) calc(var(--dl,0ms) + 200ms)}
.mo .st3.on .ico *{stroke-dashoffset:0}
.mo .st3 .ico .arc{transition:transform 260ms var(--e-drop) calc(var(--dl,0ms) + 700ms)}

/* testimonios + CTA */
.mo .tst::before{opacity:0;transform:scale(.8);transition:opacity 500ms var(--e-out),transform 500ms var(--e-out)}
.mo .tst.in::before{opacity:1;transform:none}
.mo .cta-final.vis .placa::after{z-index:1}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .mo .cta-final.vis .placas .placa>.ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:conic-gradient(from var(--a),transparent 0 340deg,#D9C08A 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    animation:spinA 3.6s linear infinite}
}
@keyframes spinA{to{--a:360deg}}

/* móvil/táctil: sin tilt ni parallax de cursor */
@media(pointer:coarse){.hero-par{transform:none!important;will-change:auto}.hero-vis .sello-wrap{transform:none!important}}
@media(prefers-reduced-motion:reduce){.mo .rv,.mo .cw>span{opacity:1;transform:none!important}}

/* las reglas viejas `.tl span{...}` (15.5px, block) pisaban los dígitos del odómetro */
.tl b .odo,.tl b .odo span,.tl b>span{font-size:inherit;color:inherit;margin:0;line-height:1}
.tl b>.sr-only{position:absolute}
.tl b .odo .sep{display:block;height:1em}
.tl b .odo{display:inline-flex;height:1em;overflow:hidden}
.tl b .odo .col{display:block;height:1em;overflow:hidden}
.tl b .odo .col>span{display:block;height:1em}

/* foco visible + contraste del microtexto sobre navy (auditoría arte-guardian) */
.placa:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.cta-final .placa:focus-visible{outline-color:var(--oro-3);background:var(--papel)}
.cta-final .placa:focus-visible .t{color:var(--tinta)}
.cta-final .placa:focus-visible .s{color:var(--t2)}
.placa:hover .k,.placa:focus-visible .k,.cta-final .placa .k{color:var(--oro-3)}
.cta-final .placa:hover .k,.cta-final .placa:focus-visible .k{color:#8A6A22}
@media(max-width:760px){.st3 h3{padding-right:42px}}

/* candados que respiran en el hero */
.guil use{transform-box:fill-box;transform-origin:center}
.mo .guil use.pl{animation:plPulse 1900ms var(--e-io)}
@keyframes plPulse{0%,100%{stroke-opacity:.14;stroke:#A07E2F}45%{stroke-opacity:.7;stroke:#BD9A45}}

/* 26-oct: el título de las tarjetas deja espacio a la flecha (no se encima) */
.placa .t{display:block !important;padding-right:52px !important;font-size:28px !important;line-height:1.12 !important}