/* Umami Labs · efectos especiales
   Todo se apaga solo si el visitante pide «menos movimiento» en su móvil u ordenador. */

/* ---- barra de progreso al bajar ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red),var(--red3),#FFB199);z-index:120;pointer-events:none}

/* ---- intro ---- */
.intro{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:transform .8s cubic-bezier(.77,0,.18,1)}
.intro.out{transform:translateY(-100%)}
.intro svg circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:introDot .55s cubic-bezier(.2,.9,.3,1.4) forwards}
.intro svg circle:nth-child(1){animation-delay:.05s}.intro svg circle:nth-child(2){animation-delay:.14s}.intro svg circle:nth-child(3){animation-delay:.23s}.intro svg circle:nth-child(4){animation-delay:.32s}.intro svg circle:nth-child(5){animation-delay:.41s}
.intro span{font-family:var(--f-head);font-weight:600;letter-spacing:.32em;color:var(--paper);font-size:14px;opacity:0;animation:introTxt .5s .55s forwards}
@keyframes introDot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes introTxt{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.32em}}

/* ---- partículas de la portada ---- */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:1}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-vis{transition:transform .25s ease-out;will-change:transform}

/* ---- titulares que suben palabra a palabra ---- */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sw > span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.split.in .sw > span,.split.go .sw > span{transform:none}

/* ---- cursor propio (solo con ratón) ---- */
.cur,.cur-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;mix-blend-mode:difference}
.cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;transition:width .25s,height .25s,margin .25s,background .25s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.cur.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:#fff}
.cur.look{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--red3);mix-blend-mode:normal;border-color:var(--red3);display:flex;align-items:center;justify-content:center}
.cur.look::after{content:'Ver';font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#16151B}
body.has-cur,body.has-cur a,body.has-cur button{cursor:none}
body.has-cur input,body.has-cur textarea,body.has-cur select{cursor:text}

/* ---- cinta de servicios ---- */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;padding:22px 0;border-block:1px solid var(--dk3)}
.marquee .track{display:flex;width:max-content;will-change:transform}
.marquee span{font-family:var(--f-head);font-weight:600;font-size:clamp(22px,3.4vw,40px);letter-spacing:-.02em;white-space:nowrap;padding-right:34px;display:flex;align-items:center;gap:34px}
.marquee span i{width:14px;height:14px;border-radius:50%;background:var(--red);display:inline-block;flex:none}
.marquee span b{font-weight:600;color:transparent;-webkit-text-stroke:1.2px var(--paper)}

/* ---- fugas que se tapan ---- */
.meter{display:flex;align-items:center;gap:16px;margin:-18px 0 26px;flex-wrap:wrap}
.meter .bar{flex:1;min-width:180px;height:10px;border-radius:99px;background:#E3DED6;overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),#3DBE7A);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.meter b{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;min-width:190px}
.fuga{position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.fuga .st{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red2)}
.fuga .st i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(229,72,42,.5);animation:leak 1.4s infinite}
@keyframes leak{70%{box-shadow:0 0 0 9px rgba(229,72,42,0)}100%{box-shadow:0 0 0 0 rgba(229,72,42,0)}}
.fuga .drip{position:absolute;top:0;right:26px;width:8px;height:12px;background:var(--red);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:.85;animation:drip 2.2s infinite ease-in}
@keyframes drip{0%{transform:translateY(-14px) scale(.6);opacity:0}15%{opacity:.85}80%{transform:translateY(150px) scale(1);opacity:.6}100%{transform:translateY(190px);opacity:0}}
.fuga.sealed{box-shadow:inset 0 0 0 2px #3DBE7A}
.fuga.sealed .st{color:#1F8A52}
.fuga.sealed .st i{background:#3DBE7A;animation:none}
.fuga.sealed .drip{display:none}
.fuga.sealed .n{color:#1F8A52}
.strip{transition:box-shadow .6s,transform .6s}
.strip.lit{box-shadow:0 0 0 3px var(--red3),0 24px 60px -20px rgba(229,72,42,.7);transform:scale(1.01)}

/* ---- demo en vivo del agente ---- */
.live{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{width:320px;max-width:100%;border-radius:42px;background:#0D0C11;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px #2E2D36,0 0 80px -10px rgba(255,106,74,.25)}
.phone .scr{border-radius:32px;overflow:hidden;background:#F4F2EE;height:560px;display:flex;flex-direction:column;position:relative}
.phone .nt{position:absolute;top:9px;left:50%;width:96px;height:24px;margin-left:-48px;border-radius:20px;background:#0D0C11;z-index:2}
.phone .hd{background:#16151B;color:#fff;padding:42px 16px 12px;display:flex;align-items:center;gap:10px}
.phone .hd .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#E5482A,#FF9A7A);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:700;font-size:14px}
.phone .hd b{display:block;font-size:14px;font-family:var(--f-head);font-weight:600}
.phone .hd small{font-size:11px;color:#B9B6C2}
.phone .hd small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3DDC84;margin-right:4px;vertical-align:1px}
.phone .ms{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;justify-content:flex-end}
.phone .m{max-width:82%;padding:9px 12px;border-radius:16px;font-size:13.5px;line-height:1.42;color:#16151B;animation:pop .35s cubic-bezier(.2,.9,.3,1.3) both}
.phone .m.c{align-self:flex-end;background:#16151B;color:#fff;border-bottom-right-radius:4px}
.phone .m.a{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.phone .m.t{background:#fff;align-self:flex-start;display:flex;gap:4px;padding:12px}
.phone .m.t i{width:6px;height:6px;border-radius:50%;background:#B9B6C2;animation:qd2 1s infinite}
.phone .m.t i:nth-child(2){animation-delay:.15s}.phone .m.t i:nth-child(3){animation-delay:.3s}
@keyframes qd2{40%{transform:translateY(-3px);opacity:1}0%,80%,100%{opacity:.35}}
.phone .toast{align-self:center;background:#E7F6EE;color:#1F8A52;border:1px solid #BFE5CF;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.04em;padding:7px 11px;border-radius:999px;animation:pop .4s both}
.phone .in{margin:0 10px 12px;border-radius:999px;background:#fff;border:1px solid #D9D5CD;padding:10px 14px;font-size:13px;color:#8A8792;min-height:40px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.live .cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dkmute)}
.q-wide{margin-top:56px}

/* ---- focos y grano en las secciones oscuras ---- */
.dark{position:relative;isolation:isolate}
.dark::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(255,106,74,.13),transparent 60%);transition:background .1s}
.dark::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- inclinación 3D ---- */
.tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tilt.on{transition:transform .08s linear}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 50%);opacity:0;transition:opacity .3s;z-index:3}
.tilt.on .glare{opacity:1}
.work,.agent,.niche,.perk{position:relative}

/* ---- botones magnéticos ---- */
.btn{will-change:transform}
.btn .lbl{display:inline-block;transition:transform .2s}

/* ---- números que suben ---- */
[data-count]{font-variant-numeric:tabular-nums}

@media (max-width:1020px){.q-grid.with-live{grid-template-columns:1fr}.live{order:2}}
@media (max-width:760px){.phone .scr{height:500px}.meter b{min-width:0}}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .sw > span{transform:none!important;transition:none}
  .marquee .track{transform:none!important}
  .fuga .drip,.fuga .st i{animation:none}
  .dark::before{display:none}
}

/* Si el JavaScript fallara, la intro se quita sola */
.intro{animation:introAuto .8s 2.6s forwards}
@keyframes introAuto{to{transform:translateY(-100%);visibility:hidden}}