/* ═════════════════════════════════════════════════════════════
   Naoj · capa de movimiento (versión 2)
   Va encima de landing.css sin cambiar su contenido. Solo anima transform y opacity,
   respeta "reducir movimiento" y no mueve el diseño mientras carga (sin saltos).
   ═════════════════════════════════════════════════════════════ */
:root{ --dur:420ms; --jade-deep:#0b3d2b; --night-green:#0b1814; }

/* ───── Patrón maya (greca escalonada) que deriva muy lento ───── */
.hero,.specs,.demo,.final{position:relative;isolation:isolate}
.specs,.demo,.final{overflow:hidden}
.patron{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.patron::before{content:"";position:absolute;inset:-96px;background:url(../img/patron-maya.svg) 0 0/96px 96px repeat;opacity:.06;animation:deriva 48s linear infinite}
.patron-hero::before{opacity:.5;-webkit-mask-image:radial-gradient(closest-side at 78% 42%,#000,transparent);mask-image:radial-gradient(closest-side at 78% 42%,#000,transparent);inset:-96px -96px -96px 30%}
.patron-hero{filter:saturate(.7)}
.patron-final::before{opacity:.12;-webkit-mask-image:radial-gradient(70% 80% at 50% 45%,transparent 18%,#000 75%);mask-image:radial-gradient(70% 80% at 50% 45%,transparent 18%,#000 75%)}
@keyframes deriva{to{transform:translate3d(96px,96px,0)}}

/* ───── Logotipo de la cabecera: la N se dibuja y el texto entra ───── */
.logo-anim{display:block;height:34px;width:auto;color:#272725;overflow:visible}
.lg-n{fill:#1D4432;fill-opacity:0;stroke:#1D4432;stroke-width:10;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trazo 1.1s cubic-bezier(.6,0,.2,1) .1s forwards,relleno .45s ease .9s forwards}
.lg-t{opacity:0;animation:entra-izq .6s var(--ease) 1s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes relleno{to{fill-opacity:1}}
@keyframes entra-izq{from{opacity:0;transform:translate(300px,42.6px)}to{opacity:1;transform:translate(326.6px,42.6px)}}

/* ───── Portada: una sola secuencia al cargar ───── */
.js .hero .reveal{opacity:1;transform:none;transition:none}
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:subir .7s var(--ease) .25s both}
.hero h1{animation:subir .8s var(--ease) .35s both}
.hero .lead{animation:subir .8s var(--ease) .5s both}
.hero .hero-cta{animation:subir .8s var(--ease) .62s both}
.hero .maya{animation:subir .8s var(--ease) .74s both}
.hero-visual{--px:0;--py:0;perspective:1400px}
.hero-visual .laptop{animation:pantalla 1s var(--ease) .45s both;translate:calc(var(--px) * 6px) calc(var(--py) * 5px);transform-origin:50% 100%}
@keyframes pantalla{from{opacity:0;transform:translateY(40px) rotateX(10deg) scale(.96)}to{opacity:1;transform:none}}
.hero-visual .phone{animation:subir .9s var(--ease) .75s both,float 6s ease-in-out 1.7s infinite;translate:calc(var(--px) * 12px) calc(var(--py) * 10px)}

/* Tarjetas flotantes con datos de la demo */
.fcard{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;border-radius:16px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 40px -18px rgba(20,32,28,.45),0 0 0 1px rgba(20,32,28,.06);
  font-size:13px;line-height:1.25;color:var(--ink);translate:calc(var(--px) * 22px) calc(var(--py) * 18px);min-width:0}
.fcard small{display:block;color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
.fcard small em{font-style:normal;color:#9aa69f;margin-left:6px}
.fcard b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fcard b.fc-msg{font-family:'Public Sans',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:0;max-width:190px}
.fc-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--green);color:#fff}
.fc-ico.amber{background:#e7a93a}
.fc-ico svg,.chip-ico svg,.chip-ok svg,.role-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green-soft);color:var(--green-2);font-weight:800;font-size:13px}
.fc-bar,.chip-bar{display:block;height:5px;margin-top:6px;border-radius:9px;background:#e3e9e4;overflow:hidden;width:120px}
.fc-bar i,.chip-bar i{display:block;height:100%;border-radius:inherit;background:var(--green);transform-origin:0 50%;transform:scaleX(var(--v,.786));animation:barra 1.2s var(--ease) var(--bd,1.5s) both}
@keyframes barra{from{transform:scaleX(0)}}
.fc1{left:-6%;bottom:13%;animation:aparecer .7s var(--ease) 1.05s both,mecer 7s ease-in-out 2s infinite}
.fc2{left:8%;top:-3%;animation:aparecer .7s var(--ease) 1.2s both,mecer 8s ease-in-out 2.3s infinite reverse}
.fc3{right:-5%;top:9%;animation:aparecer .7s var(--ease) 1.35s both,mecer 9s ease-in-out 2.6s infinite}
@keyframes mecer{50%{transform:translateY(-7px)}}

/* ───── Contadores ───── */
[data-count]{font-variant-numeric:tabular-nums}
.spec-grid b span{font:inherit;color:inherit;line-height:inherit}

/* ───── Funciones: captura que crece, texto escalonado, demostración encima ───── */
.js .feat[data-reveal]{opacity:1;transform:none}
.js .feat[data-reveal] .laptop{opacity:0;transform:translateY(34px) scale(.95);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .feat[data-reveal] .phone{opacity:0;transform:translateY(46px);transition:opacity .8s var(--ease) .18s,transform .9s var(--ease) .18s}
.js .feat[data-reveal] .feat-txt>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .feat[data-reveal] .ticks li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .feat[data-reveal] .chip{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--ease) .55s,transform .6s var(--ease) .55s}
.js .feat.in .laptop,.js .feat.in .phone,.js .feat.in .feat-txt>*,.js .feat.in .ticks li,.js .feat.in .chip{opacity:1;transform:none}
.feat-txt>:nth-child(2){transition-delay:.08s!important}.feat-txt>:nth-child(3){transition-delay:.16s!important}.feat-txt>:nth-child(4){transition-delay:.24s!important}
.ticks li:nth-child(1){transition-delay:.3s!important}.ticks li:nth-child(2){transition-delay:.4s!important}.ticks li:nth-child(3){transition-delay:.5s!important}
.feat .ticks li::before{transition:transform .4s var(--ease)}
.feat.in .ticks li::before{animation:pop .45s var(--ease) both}
.feat.in .ticks li:nth-child(1)::before{animation-delay:.45s}.feat.in .ticks li:nth-child(2)::before{animation-delay:.55s}.feat.in .ticks li:nth-child(3)::before{animation-delay:.65s}
@keyframes pop{from{transform:scale(0)}60%{transform:scale(1.15)}to{transform:scale(1)}}
.feat-img .laptop .screen{transition:box-shadow .4s var(--ease)}
.feat:hover .feat-img .laptop .screen{box-shadow:0 40px 90px -30px rgba(20,32,28,.5)}

.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;border-radius:16px;background:#fff;
  box-shadow:0 20px 44px -20px rgba(20,32,28,.5),0 0 0 1px rgba(20,32,28,.06);font-size:13px;line-height:1.25;translate:0 var(--dy,0px)}
.chip small{display:block;color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
.chip b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip-l{left:-30px;bottom:16%}
.chip-r{right:-26px;top:12%}
.chip-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--green);color:#fff}
.chip-ico.ok{background:var(--green-soft);color:var(--green)}
.chip-bar{--v:.765;--bd:.9s;width:130px}
.chip-date{flex:none;display:grid;place-items:center;width:46px;height:48px;border-radius:12px;background:var(--ink);color:#fff;line-height:1}
.chip-date b{font-size:19px;color:#fff}.chip-date small{color:var(--mint);font-size:11px;text-transform:lowercase}
.chip-ok{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff}
.feat.in .chip-ok{animation:pop .5s var(--ease) 1.1s both}
.chip-seg{gap:2px;padding:4px;border-radius:999px;background:#fff}
.chip-seg span{padding:7px 12px;border-radius:999px;font-weight:700;font-size:12.5px;color:var(--muted);transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.chip-seg span.on{background:var(--green);color:#fff;box-shadow:0 6px 14px -6px rgba(31,107,83,.7)}
.chip-seg span.on:nth-child(2){background:#e7a93a}
.chip-seg span.on:nth-child(3){background:#c8473a}
.chip-seg span.on:nth-child(4){background:#3c4a44}
.chip-notif{animation:aviso 6s var(--ease) 1.4s infinite both}
@keyframes aviso{0%,100%{opacity:0;transform:translateY(12px)}10%,78%{opacity:1;transform:none}88%{opacity:0;transform:translateY(-8px)}}
.js .feat:not(.in) .chip-notif{animation:none}

/* ───── Microinteracciones ───── */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:rotate(-8deg) scale(1.08)}
.ed,.step-grid li,.faq details{position:relative;isolation:isolate}
.ed::before,.step-grid li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(31,107,83,.09),transparent 70%)}
.ed.best::before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(159,216,191,.16),transparent 70%)}
.ed:hover::before,.step-grid li:hover::before{opacity:1}
.step-grid li{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.step-grid li:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.step-grid b{transition:transform .35s var(--ease)}
.step-grid li:hover b{transform:scale(1.08) rotate(-4deg)}
.faq details{transition:box-shadow .3s var(--ease)}
.faq details:hover{box-shadow:inset 0 0 0 1px #c9d4cc}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--green)}
.faq details p{animation:abrir .35s var(--ease)}
@keyframes abrir{from{opacity:0;transform:translateY(-6px)}}
.chips li{transition:background-color .25s,color .25s,transform .25s var(--ease)}
.chips li:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.gal-track figure.on img{transition:box-shadow .4s var(--ease)}
.gal-track figure.on:hover img{box-shadow:0 30px 70px -30px rgba(20,32,28,.6)}
.spec-grid li{transition:background-color .3s var(--ease)}
.spec-grid li:hover{background:#1a2924}

/* ───── Demo: los cuatro perfiles ───── */
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.role{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border-radius:18px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.role:hover{background:rgba(255,255,255,.07);transform:translateY(-3px)}
.role:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.role b{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;margin-top:6px}
.role small{color:#b9c6bf;font-size:14px;line-height:1.45}
.role-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(159,216,191,.12);color:var(--mint);transition:background-color .3s,color .3s}
.role::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--mint);transform:scaleX(0);transition:transform .4s var(--ease)}
.role.on{background:rgba(159,216,191,.1);box-shadow:inset 0 0 0 1px rgba(159,216,191,.55)}
.role.on .role-ico{background:var(--mint);color:var(--jade-deep)}
.role.on::after{transform:scaleX(1)}
.demo-frame{position:relative}
.demo-poster{position:absolute;left:0;right:0;bottom:0;top:43px;width:100%;height:calc(100% - 43px);object-fit:cover;object-position:top;z-index:2;
  opacity:1;transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none;background:var(--ink)}
.demo-frame.cargado .demo-poster{opacity:0;transform:scale(1.02)}
.demo-frame.cambiando .demo-poster{animation:cambio .45s var(--ease)}
@keyframes cambio{from{opacity:.4;transform:scale(1.015)}}
.demo-frame{transition:box-shadow .5s var(--ease)}
.demo-frame.reveal.in{box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(159,216,191,.18),0 0 80px -20px rgba(31,107,83,.45)}

/* ───── Cierre comercial ───── */
.final{background:radial-gradient(900px 480px at 50% 28%,#1f6b53 0%,var(--jade-deep) 48%,var(--night-green) 100%);padding:120px 0}
.final-mark{position:relative;width:120px;margin:0 auto 34px}
.final-mark img{position:relative;width:120px;height:auto;animation:mecer 6s ease-in-out infinite}
.halo{position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(closest-side,rgba(159,216,191,.38),rgba(159,216,191,0));animation:latir 4.5s ease-in-out infinite}
@keyframes latir{50%{opacity:.55;transform:scale(1.12)}}
.final h2{color:#fff}
.btn.mint{background:var(--mint);color:var(--jade-deep)}
.btn.mint:hover{background:#b8e5d1;box-shadow:0 14px 34px -12px rgba(159,216,191,.6)}
.final-note{margin:20px auto 0!important;font-size:15px!important;color:#9fb5aa!important}

/* ───── Tablet y celular ───── */
@media (max-width:1100px){
  .fc1{left:-2%}.fc3{right:-2%}
  .chip-l{left:-12px}.chip-r{right:-10px}
}
@media (max-width:1000px){
  .roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .patron-hero::before{inset:-96px;-webkit-mask-image:radial-gradient(closest-side at 50% 70%,#000,transparent);mask-image:radial-gradient(closest-side at 50% 70%,#000,transparent)}
}
@media (max-width:600px){
  .fcard{padding:8px 11px 8px 8px;gap:8px;border-radius:13px}
  .fcard b{font-size:16px}.fcard small{font-size:10.5px}
  .fc-ico,.fc-av{width:30px;height:30px;border-radius:9px}.fc-ico svg{width:16px;height:16px}
  .fc-bar{width:84px}
  .fc1{left:0;bottom:6%}.fc2{display:none}.fc3{right:0;top:-6%}
  .fcard b.fc-msg{font-size:12px;max-width:140px}
  .chip{padding:8px 11px 8px 8px;gap:8px}.chip b{font-size:16px}.chip small{font-size:11px}
  .chip-ico{width:30px;height:30px}.chip-bar{width:96px}
  .chip-l{left:8px;bottom:8px}.chip-r{right:8px;top:8px}
  .chip-seg span{padding:6px 8px;font-size:11px}
  .role{padding:14px}.role small{display:none}.role b{font-size:16px;margin-top:2px}
  .final{padding:88px 0}
}

/* ───── Reducir movimiento: todo visible y quieto ───── */
@media (prefers-reduced-motion:reduce){
  .patron::before,.lg-n,.lg-t,.fcard,.final-mark img,.halo,.chip-notif{animation:none!important}
  .lg-n{stroke-dashoffset:0;fill-opacity:1}.lg-t{opacity:1;transform:translate(326.6px,42.6px)}
  .js .feat[data-reveal] .laptop,.js .feat[data-reveal] .phone,.js .feat[data-reveal] .feat-txt>*,.js .feat[data-reveal] .ticks li,.js .feat[data-reveal] .chip{opacity:1;transform:none}
  .chip-notif{opacity:1}
  .fcard,.hero-visual .laptop,.hero-visual .phone,.chip{translate:none}
}