@font-face{font-family:DingoPoppins;src:url(/fonts/Poppins-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:DingoMontserrat;src:url(/fonts/Montserrat-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#031c86;--ink2:#132ea8;--mid:#1180d0;--teal:#15cccc;--blue:#2f6bff;--green:#1fbf8f;
  --sky1:#e8f3ff;--sky2:#cfe7f7;--sky3:#bfd9f5;
  --text:#0a1846;--muted:#475785;--line:rgba(3,28,134,.10);
  --glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.82);
  --shadow:0 1px 1px rgba(3,28,134,.04),0 8px 24px -8px rgba(3,28,134,.14),0 30px 60px -30px rgba(3,28,134,.22);
  --shadow-lg:0 2px 2px rgba(3,28,134,.04),0 20px 50px -18px rgba(3,28,134,.28),0 60px 120px -50px rgba(17,128,208,.35);
  --grad:linear-gradient(110deg,#031c86 5%,#132ea8 25%,#1180d0 45%,#15cccc 65%,#1180d0 85%,#031c86 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --r:22px;
  --gut:clamp(16px,4vw,40px);
  --slow:1;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sky1);color:var(--text);font-family:DingoMontserrat,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:DingoPoppins,ui-sans-serif,system-ui,sans-serif;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.05}
p{margin:0}
::selection{background:rgba(21,204,204,.3)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:820px}

/* ---------- Background ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#f3f9ff 0%,var(--sky1) 35%,var(--sky2) 75%,var(--sky3) 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.b1{width:60vmax;height:60vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,#bfe4ff 0%,rgba(191,228,255,0) 70%);animation:drift1 calc(28s*var(--slow)) ease-in-out infinite alternate}
.b2{width:50vmax;height:50vmax;right:-16vmax;top:8vh;background:radial-gradient(circle,rgba(21,204,204,.45) 0%,rgba(21,204,204,0) 68%);animation:drift2 calc(34s*var(--slow)) ease-in-out infinite alternate}
.b3{width:55vmax;height:55vmax;left:20vw;bottom:-30vmax;background:radial-gradient(circle,rgba(47,107,255,.32) 0%,rgba(47,107,255,0) 70%);animation:drift3 calc(40s*var(--slow)) ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-16vw,22vh,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(-12vw,-18vh,0) scale(1.1)}}
#field{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.grain{position:absolute;inset:0;opacity:.035;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Crear gradient ---------- */
.crear{background:var(--grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:crear calc(3s*var(--slow)) ease-in-out infinite alternate;padding-bottom:.06em}
@keyframes crear{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- Buttons ---------- */
.btn{--bh:46px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--bh);padding:0 22px;border-radius:999px;font-family:DingoPoppins,sans-serif;font-size:15px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .3s,color .3s;isolation:isolate}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-lg{--bh:58px;padding:0 30px;font-size:17px}
.btn-primary{color:#fff;background:linear-gradient(135deg,#0a2aa8,#031c86 55%,#06207f);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -10px rgba(3,28,134,.7),0 2px 6px rgba(3,28,134,.25);overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(21,204,204,.55) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;animation:sheen calc(4.5s*var(--slow)) ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 40px -12px rgba(3,28,134,.75),0 0 0 6px rgba(21,204,204,.14)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(3,28,134,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.85);transform:translateY(-2px)}
.btn-soft{color:var(--ink);background:rgba(3,28,134,.06);box-shadow:inset 0 0 0 1px rgba(3,28,134,.1)}
.btn-soft:hover{background:rgba(3,28,134,.1);transform:translateY(-2px)}
.btn-white{color:var(--ink);background:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(0,0,0,.4),0 0 0 6px rgba(255,255,255,.15)}
.btn-nav{--bh:40px;padding:0 20px;font-size:14px;color:#fff;background:var(--ink);box-shadow:0 6px 18px -6px rgba(3,28,134,.6)}
.btn-nav:hover{background:var(--ink2);transform:translateY(-1px)}
.magnetic{will-change:transform}

/* ---------- Nav ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;padding:0 var(--gut);pointer-events:none}
.nav-inner{pointer-events:auto;max-width:1100px;margin:0 auto;height:62px;display:flex;align-items:center;gap:20px;padding:0 10px 0 22px;border-radius:999px;background:rgba(255,255,255,.5);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 30px -14px rgba(3,28,134,.25);transition:background .4s,box-shadow .4s,height .4s var(--ease)}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.78);height:56px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 40px -16px rgba(3,28,134,.35)}
.brand img{height:30px;width:auto}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{position:relative;text-decoration:none;font-size:14.5px;color:var(--muted);padding:8px 14px;border-radius:999px;transition:color .3s,background .3s}
.nav-links a:hover{color:var(--ink);background:rgba(3,28,134,.06)}
@media (max-width:820px){.nav-links{display:none}.btn-nav{margin-left:auto}.nav-inner{padding-left:18px}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px);transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js .reveal{transform:none;filter:none;transition:opacity .6s ease}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(130px,20vh,190px) 0 40px;text-align:center}
.hero-inner{display:flex;flex-direction:column;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 8px 24px -12px rgba(3,28,134,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px;color:var(--ink);text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s}
.badge:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #fff,0 14px 30px -12px rgba(3,28,134,.4)}
.badge-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.badge-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:ping calc(2.2s*var(--slow)) var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.badge-arrow{color:var(--mid);transition:transform .4s var(--ease)}
.badge:hover .badge-arrow{transform:translateX(3px)}
.hero-title{margin-top:28px;font-size:clamp(52px,10.4vw,132px);line-height:.98;letter-spacing:-.045em}
.hero-title .line{display:block}
.hero-lead{margin-top:28px;max-width:640px;font-size:clamp(17px,1.9vw,20px);color:var(--muted);line-height:1.55}
.hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-note{margin-top:18px;font-size:14px;color:var(--muted)}
.hero .reveal:nth-child(2){--d:.08s}.hero .reveal:nth-child(3){--d:.16s}.hero .reveal:nth-child(4){--d:.24s}.hero .reveal:nth-child(5){--d:.32s}

.marquee{margin-top:clamp(56px,9vh,96px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);--d:.4s}
.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee calc(32s*var(--slow)) linear infinite}
.marquee span{font-family:DingoPoppins,sans-serif;font-size:clamp(18px,2.2vw,26px);color:rgba(3,28,134,.38);letter-spacing:-.02em;white-space:nowrap}
.marquee i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Section heads ---------- */
section{position:relative}
.demo,.how,.what,.pricing,.studio,.faq{padding:clamp(80px,12vw,150px) 0 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,6vw,72px)}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:18px}
.sec-head h2{font-size:clamp(36px,6vw,68px);letter-spacing:-.04em}
.sec-lead{margin-top:20px;color:var(--muted);font-size:clamp(16px,1.6vw,19px)}

/* ---------- Demo ---------- */
.demo-stage{position:relative;max-width:980px;margin:0 auto;perspective:1600px}
.window{position:relative;border-radius:26px;background:rgba(255,255,255,.62);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),var(--shadow-lg);overflow:hidden;transform-origin:50% 0;transform:rotateX(var(--tilt,10deg)) scale(var(--sc,.96));transition:transform .2s linear;will-change:transform}
.win-bar{height:46px;display:flex;align-items:center;padding:0 16px;gap:12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}
.dots{display:flex;gap:7px;width:70px}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(3,28,134,.12)}
.dots i:first-child{background:#ff8a80}.dots i:nth-child(2){background:#ffd166}.dots i:nth-child(3){background:#5ed3a7}
.win-url{margin:0 auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);background:rgba(3,28,134,.05);padding:6px 16px;border-radius:999px}
.win-url svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.win-spacer{width:70px}
.sw{width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.s1{background:#031c86}.s2{background:#15cccc}.s3{background:#2f6bff}.s4{background:#fff}
.chat-col{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat{flex:1;min-height:0;overflow:hidden;padding:24px 24px 8px;display:flex;flex-direction:column;gap:14px;transition:opacity .6s}
.chat.fade{opacity:0}
.composer{margin:10px 18px 18px;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;border-radius:18px;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(3,28,134,.1),0 6px 18px -10px rgba(3,28,134,.25);transition:box-shadow .4s}
.composer.live{box-shadow:inset 0 0 0 1.5px rgba(21,204,204,.7),0 0 0 6px rgba(21,204,204,.12)}
.mic,.send{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;transition:background .3s,color .3s,transform .3s var(--ease)}
.mic{color:var(--ink);background:rgba(3,28,134,.06);position:relative}
.mic svg,.send svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.composer.live .mic{color:#fff;background:linear-gradient(135deg,var(--teal),var(--mid))}
.composer.live .mic::after{content:"";position:absolute;inset:-4px;border-radius:15px;border:2px solid var(--teal);animation:ping 1.4s var(--ease) infinite}
.send{color:rgba(3,28,134,.35);background:rgba(3,28,134,.05)}
.composer.ready .send{color:#fff;background:var(--ink)}
.send.press{transform:scale(.88)}
.comp-text{flex:1;min-width:0;font-size:14.5px;color:var(--text);line-height:1.45}
.comp-text .ph{color:rgba(71,87,133,.6)}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--mid);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.msg{max-width:78%;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.msg.show{opacity:1;transform:none}
.msg.me{align-self:flex-end}
.msg.me .bubble{background:linear-gradient(135deg,#0b2db0,#031c86);color:#fff;border-radius:20px 20px 6px 20px;box-shadow:0 10px 24px -12px rgba(3,28,134,.7)}
.msg.me .meta{justify-content:flex-end}
.msg.bot{align-self:flex-start;display:flex;gap:10px;align-items:flex-start}
.avatar{flex:none;width:32px;height:32px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line),0 4px 12px -6px rgba(3,28,134,.35)}
.avatar img{height:17px;width:auto}
.bot-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.msg.bot .bubble{background:#fff;border-radius:6px 20px 20px 20px;box-shadow:inset 0 0 0 1px var(--line),0 8px 20px -14px rgba(3,28,134,.35)}
.bubble{padding:11px 15px;font-size:14px;line-height:1.5}
.meta{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-top:5px}
.meta .wv{display:inline-flex;gap:2px;align-items:center;height:10px}
.meta .wv i{width:2px;height:100%;background:var(--teal);border-radius:2px}
.meta .wv i:nth-child(2){height:60%}.meta .wv i:nth-child(3){height:85%}.meta .wv i:nth-child(4){height:40%}
.typing{display:inline-flex;gap:4px;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(3,28,134,.35);animation:bob 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:linear-gradient(135deg,rgba(21,204,204,.12),rgba(47,107,255,.10));box-shadow:inset 0 0 0 1px rgba(21,204,204,.35);font-size:12.5px;color:var(--ink);width:max-content;max-width:100%}
.chip .sws{display:flex}
.chip .sws span{width:18px;height:18px;border-radius:50%;border:2px solid #fff;margin-left:-6px}
.chip .sws span:first-child{margin-left:0}
.chip .aa{font-family:DingoPoppins,sans-serif;font-size:13px;background:#fff;border-radius:8px;padding:2px 7px;box-shadow:inset 0 0 0 1px var(--line)}
.chip .ok{color:var(--green);font-weight:700}

.script{width:min(420px,100%);background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -18px rgba(3,28,134,.45);overflow:hidden}
.script-h{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-family:DingoPoppins,sans-serif;font-size:13px;color:var(--ink)}
.script-h small{font-family:DingoMontserrat,sans-serif;font-size:11px;color:var(--muted)}
.rows{padding:6px 14px}
.row{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:7px 0;font-size:12px;color:var(--text);border-bottom:1px dashed rgba(3,28,134,.08);opacity:0;transform:translateX(-8px);transition:all .5s var(--ease)}
.row:last-child{border-bottom:0}
.row.show{opacity:1;transform:none}
.row b{font-family:DingoPoppins,sans-serif;font-weight:700;color:var(--mid);font-size:11.5px}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 14px 12px}
.frame{aspect-ratio:9/16;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(160deg,#dcecff,#bfe6ec);opacity:0;transform:scale(.9);transition:all .6s var(--ease)}
.frame.show{opacity:1;transform:none}
.frame::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;left:20%;top:22%;background:linear-gradient(135deg,var(--teal),var(--blue));opacity:.75}
.frame:nth-child(2)::before{left:-10%;top:40%;width:80%;border-radius:30%}
.frame:nth-child(3)::before{left:30%;top:10%;width:50%;background:linear-gradient(135deg,var(--blue),var(--ink))}
.frame:nth-child(4){background:linear-gradient(160deg,#031c86,#1180d0)}
.frame:nth-child(4)::before{width:34%;left:33%;top:40%;background:#fff;opacity:.9;border-radius:6px}
.frame::after{content:"";position:absolute;left:12%;right:30%;bottom:14%;height:5px;border-radius:4px;background:rgba(255,255,255,.85)}
.script-f{display:flex;justify-content:flex-end;padding:0 14px 12px}
.approve{font-family:DingoPoppins,sans-serif;font-size:12px;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;transition:all .4s var(--ease)}
.approve.press{transform:scale(.92)}
.approve.done{background:var(--green)}
.cursor{position:absolute;width:18px;height:18px;z-index:5;pointer-events:none;opacity:0;transition:transform .9s var(--ease),opacity .3s}
.cursor svg{width:18px;height:18px;fill:#fff;stroke:var(--ink);stroke-width:1.6}

.reel-wrap{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.reel{width:150px;aspect-ratio:9/16;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(165deg,#031c86,#1180d0 60%,#15cccc);box-shadow:0 20px 40px -16px rgba(3,28,134,.6),inset 0 0 0 1px rgba(255,255,255,.2)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.qc{display:flex;flex-direction:column;gap:8px}
.qc span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);background:#fff;padding:7px 11px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);opacity:0;transform:translateY(6px);transition:all .5s var(--ease)}
.qc span.show{opacity:1;transform:none}
.qc span::before{content:"✓";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;font-size:10px}

.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;font-size:13px;color:var(--ink);background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 16px 36px -16px rgba(3,28,134,.4);animation:float calc(7s*var(--slow)) ease-in-out infinite;white-space:nowrap}
.fc1{left:-64px;top:110px}
.fc2{right:-58px;top:70px;animation-delay:-2s}
.fc3{right:-40px;bottom:120px;animation-delay:-4s}
.fc4{left:-50px;bottom:60px;animation-delay:-1s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
.fc-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:12px}
.fc-ico.ok{background:var(--green);color:#fff}
.fc-ico.ratio{background:linear-gradient(135deg,var(--teal),var(--blue));width:14px;height:22px;border-radius:4px}
.fc-ico.wave{display:flex;gap:2px;align-items:center;background:rgba(21,204,204,.15)}
.fc-ico.wave i{width:2px;height:10px;background:var(--teal);border-radius:2px;animation:eq calc(.9s*var(--slow)) ease-in-out infinite}
.fc-ico.wave i:nth-child(2){animation-delay:.15s}.fc-ico.wave i:nth-child(3){animation-delay:.3s}.fc-ico.wave i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.1)}}

@media (max-width:1100px){.fc1,.fc4{left:-12px}.fc2,.fc3{right:-12px}}
@media (max-width:820px){
  .float-chip{display:none}
  .fc2,.fc3{display:flex;font-size:12px;padding:8px 11px}
  .fc2{top:-18px;right:8px}.fc3{bottom:-18px;right:auto;left:8px}
}
@media (max-width:520px){
  .window{border-radius:20px}
  .win-bar{height:40px;padding:0 12px}
  .dots{width:auto}.win-spacer{display:none}.win-url{margin-left:auto;margin-right:0;font-size:11.5px;padding:5px 12px}
  .win-body{height:520px}
  .chat{padding:16px 12px 6px;gap:12px}
  .composer{margin:8px 10px 10px}
  .msg{max-width:90%}
  .bubble{font-size:13.5px}
  .reel{width:118px}
}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;counter-reset:s}
.step{position:relative;padding:0 6px}
.step:nth-child(2){--d:.1s}.step:nth-child(3){--d:.2s}.step:nth-child(4){--d:.3s}
.step-num{position:relative;z-index:1;width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #fff,var(--shadow);font-family:DingoPoppins,sans-serif;font-size:18px;color:var(--ink)}
.step-art{margin:26px 0 22px;height:64px;display:flex;align-items:center;gap:5px}
.step h3{font-size:22px;letter-spacing:-.02em}
.step p{margin-top:10px;color:var(--muted);font-size:15.5px}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr;gap:44px 22px}
  .steps::before,.steps::after{display:none}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:16px}
  .step{display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding:20px;border-radius:var(--r);background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),var(--shadow)}
  .step-num{width:56px;height:56px;border-radius:18px;font-size:16px;grid-row:span 3}
  .step-art{display:none}
  .step h3{font-size:19px;align-self:center}
  .step p{grid-column:2;margin-top:6px;font-size:15px}
}

/* ---------- Cards / Bento ---------- */
.card{position:relative;border-radius:var(--r);padding:26px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),var(--shadow);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #fff,var(--shadow-lg)}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(21,204,204,.16),transparent 60%)}
.spot:hover::before{opacity:1}
.card h3{font-size:19px;letter-spacing:-.02em;line-height:1.2}
.card p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:22px;background:linear-gradient(135deg,rgba(21,204,204,.16),rgba(47,107,255,.14));box-shadow:inset 0 0 0 1px rgba(21,204,204,.25);color:var(--ink);transition:transform .6s var(--ease)}
.card:hover .ico{transform:rotate(-6deg) scale(1.06)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bento .big{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;min-height:420px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(232,243,255,.55))}
.bento .big h3{font-size:clamp(24px,2.6vw,32px)}
.bento .big p{font-size:16px;max-width:420px}
.bento .wide{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.bento .card:nth-child(4n+2){--d:.06s}.bento .card:nth-child(4n+3){--d:.12s}.bento .card:nth-child(4n){--d:.18s}
.brand-kit{display:flex;align-items:center;gap:10px}
.bk-logo{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bk-logo img{height:30px;width:auto}
.bk-sw{width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);animation:float calc(5s*var(--slow)) ease-in-out infinite}
.k1{background:#031c86}.k2{background:#15cccc;animation-delay:-1s}.k3{background:#2f6bff;animation-delay:-2s}.k4{background:#1fbf8f;animation-delay:-3s}
.bk-type{font-family:DingoPoppins,sans-serif;font-size:30px;color:var(--ink);margin-left:6px}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;gap:12px}
  .bento .big,.bento .wide{grid-column:auto;grid-row:auto;min-height:0}
  .card{padding:22px}
  .ico{margin-bottom:16px}
  .bk-sw{width:32px;height:32px}
}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px 28px 28px;border-radius:26px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),var(--shadow);transition:transform .6s var(--ease),box-shadow .6s var(--ease);overflow:hidden}
.plan:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px #fff,var(--shadow-lg)}
.plan:nth-child(2){--d:.08s}.plan:nth-child(3){--d:.16s}
.plan h3{font-size:24px}
.plan-cr{margin-top:6px;color:var(--muted);font-size:15px}
.plan-cr b{font-family:DingoPoppins,sans-serif;color:var(--ink)}
.price{margin-top:26px;font-family:DingoPoppins,sans-serif;font-size:clamp(34px,3.6vw,44px);color:var(--ink);letter-spacing:-.035em;line-height:1;display:flex;align-items:baseline;gap:2px}
.price .cur{font-size:.55em;align-self:flex-start;margin-top:.15em}
.price .per{font-family:DingoMontserrat,sans-serif;font-size:15px;letter-spacing:0;color:var(--muted);margin-left:6px}
.per-reel{margin-top:10px;display:inline-block;width:max-content;font-size:13px;color:var(--ink);background:rgba(21,204,204,.14);padding:4px 10px;border-radius:999px}
.plan ul{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{position:relative;padding-left:28px;font-size:15px;color:var(--text)}
.plan li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(31,191,143,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fbf8f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .btn{width:100%}
.plan.featured{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(240,248,255,.85));box-shadow:var(--shadow-lg);transform:translateY(-10px)}
.plan.featured:hover{transform:translateY(-16px)}
.plan.featured::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);background-size:300% 100%;animation:crear calc(3s*var(--slow)) ease-in-out infinite alternate;-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);pointer-events:none}
.tag{position:absolute;top:22px;right:22px;font-family:DingoPoppins,sans-serif;font-size:12px;color:#fff;padding:5px 11px;border-radius:999px;background:linear-gradient(110deg,var(--ink),var(--mid) 60%,var(--teal));box-shadow:0 6px 16px -6px rgba(17,128,208,.8)}
.ondemand{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;max-width:980px;margin:18px auto 0;padding:24px 28px;border-radius:var(--r);background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ondemand h3{font-size:21px}
.ondemand p{margin-top:4px;color:var(--muted);font-size:15px}
.od-prices{display:flex;gap:26px}
.od-prices div{display:flex;flex-direction:column}
.od-prices span{font-size:13px;color:var(--muted)}
.od-prices b{font-family:DingoPoppins,sans-serif;font-size:24px;color:var(--ink);letter-spacing:-.02em}
.fine{max-width:760px;margin:26px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}
@media (max-width:900px){
  .plans{grid-template-columns:1fr;max-width:480px}
  .plan.featured{transform:none;order:-1}
  .plan.featured:hover{transform:translateY(-6px)}
  .ondemand{grid-template-columns:1fr;max-width:480px;gap:18px}
}
@media (max-width:420px){.od-prices{gap:18px}.od-prices b{font-size:21px}.plan{padding:28px 22px 22px}}

/* ---------- Studio ---------- */
.studio-card{position:relative;overflow:hidden;border-radius:32px;padding:clamp(36px,6vw,80px);background:radial-gradient(120% 140% at 100% 0%,#1180d0 0%,#132ea8 38%,#031c86 70%);color:#fff;box-shadow:0 40px 90px -40px rgba(3,28,134,.8);display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;isolation:isolate}
.studio-card::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(21,204,204,.55),transparent 65%);filter:blur(30px);z-index:-1;animation:drift2 calc(18s*var(--slow)) ease-in-out infinite alternate}
#studioField{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.6}
.studio-logo{height:38px;width:auto;margin-bottom:34px}
.studio-card h2{color:#fff;font-size:clamp(34px,5vw,60px);letter-spacing:-.04em}
.studio-copy p{margin-top:18px;color:rgba(255,255,255,.82);font-size:clamp(16px,1.6vw,18px);max-width:560px}
.studio-quote{font-family:DingoPoppins,sans-serif;color:#fff !important;font-size:clamp(20px,2.2vw,26px) !important;letter-spacing:-.02em;line-height:1.25}
.studio-copy .btn{margin-top:32px}
.studio-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-content:flex-end}
.studio-tags li{padding:10px 16px;border-radius:999px;font-size:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:float calc(6s*var(--slow)) ease-in-out infinite}
.studio-tags li:nth-child(2){animation-delay:-1.2s}.studio-tags li:nth-child(3){animation-delay:-2.4s}.studio-tags li:nth-child(4){animation-delay:-3.6s}.studio-tags li:nth-child(5){animation-delay:-4.8s}
@media (max-width:860px){.studio-card{grid-template-columns:1fr;border-radius:26px}.studio-tags{justify-content:flex-start}}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:20px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 6px 20px -14px rgba(3,28,134,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s,box-shadow .4s}
.faq details[open]{background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px #fff,var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;font-family:DingoPoppins,sans-serif;font-size:clamp(16px,1.8vw,19px);color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(3,28,134,.06);transition:transform .5s var(--ease),background .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .5s var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus{transform:rotate(180deg);background:rgba(21,204,204,.18)}
details[open] .plus::after{transform:rotate(0)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ans p{overflow:hidden;min-height:0;padding:0 24px;color:var(--muted);font-size:16px}
details[open] .ans{grid-template-rows:1fr}
details[open] .ans p{padding-bottom:22px}
.faq-list details:nth-child(2){--d:.05s}.faq-list details:nth-child(3){--d:.1s}.faq-list details:nth-child(4){--d:.15s}.faq-list details:nth-child(5){--d:.2s}

/* ---------- Final CTA ---------- */
.final{padding:clamp(100px,14vw,170px) 0 clamp(80px,10vw,130px);text-align:center}
.final-inner{display:flex;flex-direction:column;align-items:center}
.final h2{font-size:clamp(40px,7.4vw,92px);letter-spacing:-.045em;line-height:1}
.final p{margin:24px 0 36px;color:var(--muted);font-size:clamp(17px,1.8vw,20px)}

/* ---------- Footer ---------- */
.footer{padding:0 0 40px}
.foot-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--line)}
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-brand img{height:28px;width:auto}
.foot-brand p{font-size:14px;color:var(--muted);padding-left:16px;border-left:1px solid var(--line)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.foot-links a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--ink)}
.copy{width:100%;font-size:13px;color:rgba(71,87,133,.75)}
@media (max-width:700px){.foot-links{margin-left:0;width:100%}}

@media (max-width:420px){
  body{font-size:16px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{width:100%}
  .badge{font-size:13px}
}
@media (max-width:560px){.sec-head h2 br,.final h2 br,.studio-card h2 br{display:none}.badge{border-radius:20px;text-align:left}}

/* Showreel (se carga el video de YouTube recién al tocar) y botón de WhatsApp en el estudio */
.oficio{padding:clamp(60px,9vw,110px) 0 0}
.showreel{max-width:1080px;margin:0 auto}
.sr-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:28px;overflow:hidden;cursor:pointer;background:#031c86;box-shadow:0 40px 90px -40px rgba(3,28,134,.55)}
.sr-play img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease),filter .6s}
.sr-play:hover img{transform:scale(1.08);filter:saturate(1.1)}
.sr-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,28,134,0) 45%,rgba(3,28,134,.55))}
.sr-boton{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;color:#031c86;background:rgba(255,255,255,.92);box-shadow:0 0 0 12px rgba(255,255,255,.18);animation:sr-pulso 2.6s ease-in-out infinite}
.sr-boton svg{margin-left:4px}
@keyframes sr-pulso{50%{box-shadow:0 0 0 22px rgba(255,255,255,.06)}}
.sr-label{position:absolute;left:28px;bottom:24px;z-index:2;color:#fff;font-family:DingoPoppins,sans-serif;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em}
.showreel iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:28px;display:block}
.studio-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.studio-ctas .btn{margin-top:0!important}
.btn-ghost-white{color:#fff;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn-ghost-white:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #fff,0 0 0 6px rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){.sr-boton{animation-duration:9s}}
@media (max-width:560px){.sr-play,.showreel iframe{border-radius:20px}.sr-boton{width:72px;height:72px;margin:-36px 0 0 -36px}}

/* Showreel en reproducción automática (sin sonido) con botón de sonido */
.sr-play{cursor:default}
.sr-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;transform:scale(1.22)}
.sr-play img{transition:opacity .8s}
.sr-play.vivo img{opacity:0}
.sr-play.vivo::after{background:linear-gradient(180deg,rgba(3,28,134,0) 60%,rgba(3,28,134,.45))}
.sr-sonido{position:absolute;right:20px;bottom:20px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#031c86;font:600 14px DingoMontserrat,sans-serif;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);transition:transform .3s var(--ease),box-shadow .3s}
.sr-sonido:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.18)}
.sr-sonido .on{display:none}.sr-sonido[aria-pressed=true] .on{display:block}.sr-sonido[aria-pressed=true] .off{display:none}
@media (max-width:560px){.sr-sonido{right:12px;bottom:12px;padding:8px 12px;font-size:13px}}

/* ═════════════ Ronda 2 ═════════════ */

/* ---------- Hero: banner de regalo ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.gift{position:relative;display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:7px 8px 7px 7px;border-radius:999px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px -18px rgba(3,28,134,.5);isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gift::before,.gift::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from var(--ang),#15cccc,#2f6bff,#1fbf8f,#6fe7e0,#15cccc);animation:gift-spin calc(5s*var(--slow)) linear infinite;pointer-events:none}
.gift::before{padding:2px;-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)}
.gift::after{z-index:-1;filter:blur(18px);opacity:.45}
@keyframes gift-spin{to{--ang:360deg}}
.gift:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 24px 50px -18px rgba(3,28,134,.6)}
.gift-tag{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#1fbf8f,#15cccc);font-family:DingoPoppins,sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 16px -6px rgba(31,191,143,.9)}
.gift-tag::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);background-size:250% 100%;animation:sheen calc(3.2s*var(--slow)) ease-in-out infinite}
.gift-tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gift-txt{font-size:14.5px;line-height:1.35;text-align:left}
.gift-txt b{font-family:DingoPoppins,sans-serif;font-weight:700;letter-spacing:-.01em}
.gift-plus{margin-left:6px;color:var(--mid);white-space:nowrap}
.gift-arrow{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .5s var(--ease)}
.gift-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gift:hover .gift-arrow{transform:translateX(3px)}
.kicker{display:block;margin-bottom:22px;font-family:DingoMontserrat,sans-serif;font-weight:500;font-size:clamp(12.5px,1.3vw,15px);line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
@media (max-width:640px){
  .gift{border-radius:22px;align-items:center;padding:8px}
  .gift-txt{font-size:13.5px}
  .gift-txt b{display:block}
  .gift-plus{margin-left:0}
}
@media (max-width:380px){.gift-tag{padding:7px 10px;font-size:12px}.gift-tag svg{display:none}}

/* ---------- Qué es Dingo ---------- */
.pro{padding:clamp(70px,10vw,130px) 0 0}
.pro-lead{max-width:780px;margin-left:auto;margin-right:auto}
.pro-lead strong{font-family:DingoPoppins,sans-serif;font-weight:700;color:var(--ink)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillar{position:relative;overflow:hidden;padding:28px;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),var(--shadow);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pillar:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #fff,var(--shadow-lg)}
.pillar:nth-child(2){--d:.08s}.pillar:nth-child(3){--d:.16s}
.p-num{display:inline-block;font-family:DingoPoppins,sans-serif;font-size:14px;background:var(--grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:crear calc(3s*var(--slow)) ease-in-out infinite alternate}
.pillar h3{margin-top:14px;font-size:20px;line-height:1.2}
.pillar p{margin-top:10px;color:var(--muted);font-size:15.5px}
.pro-statement{max-width:860px;margin:clamp(40px,6vw,64px) auto 0;text-align:center;font-family:DingoPoppins,sans-serif;font-size:clamp(22px,3vw,34px);line-height:1.2;letter-spacing:-.03em;color:var(--ink)}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}

/* ---------- Demo sin barra lateral ---------- */
.demo-stage{max-width:820px}
.win-body{display:block;height:580px;overflow:hidden}
.chat-col{height:100%}
.fc1{left:-80px;top:96px}
.fc5{right:-84px;top:46%;animation-delay:-3s}
.fc2{right:-64px;top:60px}
.fc3{right:-50px;bottom:84px}
.fc4{left:-70px;bottom:70px}
.fc-ico.wave{justify-content:center;gap:2px;padding:0}
.fc-ico.wave i{flex:none}
.fc-ico.brand{position:relative;width:30px;background:none}
.fc-ico.brand i{position:absolute;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(3,28,134,.5)}
.fc-ico.brand i:nth-child(1){left:0;background:#031c86}.fc-ico.brand i:nth-child(2){left:8px;background:#15cccc}.fc-ico.brand i:nth-child(3){left:16px;background:#2f6bff}
@media (max-width:1000px){.fc1,.fc4{left:-14px}.fc2,.fc3,.fc5{right:-14px}}
@media (max-width:820px){
  .win-body{height:560px}
  .fc5{display:flex;font-size:12px;padding:8px 11px;top:-18px;left:8px;right:auto}
}
@media (max-width:520px){.win-body{height:540px}}
.reel{width:150px;aspect-ratio:9/16;border-radius:18px;position:relative;overflow:hidden;background:#031c86;box-shadow:0 20px 40px -16px rgba(3,28,134,.6)}
.deliv-wide{width:min(330px,100%)}
@media (max-width:520px){.reel{width:122px}.deliv-wide{width:100%}}

/* ---------- Mini ejemplo: motion (9:16, loop de 9 s) ---------- */
.mreel{--T:calc(5.6s*var(--slow,1));position:absolute;inset:0;overflow:hidden;container-type:size;background:#031c86;font-family:DingoPoppins,sans-serif;color:#fff;border-radius:inherit;isolation:isolate}
.mreel>*{position:absolute}
.mreel *{animation-duration:var(--T);animation-iteration-count:infinite;animation-fill-mode:both}
.mq-bg{inset:-40%;background:radial-gradient(40% 30% at 30% 30%,#2f6bff,transparent 70%),radial-gradient(35% 30% at 72% 70%,rgba(21,204,204,.6),transparent 70%),#031c86;animation-name:mq-spin;animation-timing-function:linear}
@keyframes mq-spin{to{transform:rotate(360deg)}}
.mq-glow{width:80cqw;height:80cqw;left:10cqw;top:10cqh;border-radius:50%;background:radial-gradient(circle,rgba(111,231,224,.35),transparent 65%);animation-name:mq-glow;animation-timing-function:ease-in-out}
@keyframes mq-glow{0%,100%{transform:translate(-10cqw,0)}50%{transform:translate(12cqw,40cqh)}}
.mq-a{left:8cqw;right:6cqw;top:34cqh}
.mq-m{display:block;overflow:hidden;line-height:1;padding-bottom:.05em}
.mq-m b{display:block;font-size:24cqw;letter-spacing:-.04em;animation-name:mq-up}
.mq-m.m2 b{font-size:15cqw;color:#6fe7e0;animation-delay:calc(var(--T)*.016)}
@keyframes mq-up{0%,3%{transform:translateY(110%);animation-timing-function:cubic-bezier(.16,1,.3,1)}10%{transform:translateY(0)}20%{transform:translateY(0);animation-timing-function:cubic-bezier(.7,0,.84,0)}24%,100%{transform:translateY(-110%)}}
.mq-ul{display:block;height:1.6cqw;width:58%;margin-top:2.4cqw;border-radius:2cqw;background:#fff;transform-origin:left;animation-name:mq-ul}
@keyframes mq-ul{0%,10%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}15%{transform:scaleX(1)}19%{transform:scaleX(1);animation-timing-function:cubic-bezier(.7,0,.84,0)}22%,100%{transform:translateX(100%) scaleX(0)}}
.mq-wipe{inset:0;background:linear-gradient(165deg,#15cccc,#6fe7e0 60%,#c7f7f1);clip-path:inset(100% 0 0 0);animation-name:mq-wipe}
@keyframes mq-wipe{0%,21%{clip-path:inset(100% 0 0 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}27%{clip-path:inset(0 0 0 0)}47%{clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.65,0,.35,1)}53%{clip-path:inset(0 0 100% 0)}53.2%,100%{clip-path:inset(100% 0 0 0)}}
.mq-card{left:18cqw;top:18cqh;width:64cqw;height:48cqh;border-radius:6cqw;background:#fff;overflow:hidden;transform-origin:0 0;opacity:0;box-shadow:0 6cqw 12cqw -5cqw rgba(3,28,134,.55);animation-name:mq-card}
.mq-card::before,.mq-card::after{content:"";position:absolute;left:4cqw;height:2.6cqw;border-radius:2cqw;background:#031c86}
.mq-card::before{bottom:8cqw;width:34cqw}
.mq-card::after{bottom:4cqw;width:20cqw;background:#15cccc}
.mq-img{position:absolute;left:3cqw;right:3cqw;top:3cqw;bottom:14cqw;border-radius:4cqw;background:radial-gradient(circle at 68% 38%,#fff 0 8cqw,rgba(255,255,255,0) 8.5cqw),radial-gradient(circle at 30% 120%,#15cccc 0 22cqw,transparent 22.5cqw),linear-gradient(160deg,#2f6bff,#031c86)}
.mq-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-100%);animation-name:mq-shine}
@keyframes mq-shine{0%,36%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.65,0,.35,1)}43%,100%{transform:translateX(100%)}}
@keyframes mq-card{0%,26%{opacity:0;transform:translateY(14cqh) scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}33%{opacity:1;transform:translateY(0) scale(1)}45%{opacity:1;transform:translateY(-1cqh) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}50%{opacity:1;transform:translate(-6cqw,8cqh) scale(.5625,.458)}51%,100%{opacity:0;transform:translate(-6cqw,8cqh) scale(.5625,.458)}}
.mq-chip{right:9cqw;top:58cqh;padding:1.8cqw 3.6cqw;border-radius:9cqw;background:#031c86;font-size:6cqw;letter-spacing:.04em;white-space:nowrap;opacity:0;box-shadow:0 3cqw 6cqw -2cqw rgba(3,28,134,.6);animation-name:mq-chip}
@keyframes mq-chip{0%,32%{opacity:0;transform:scale(.85) rotate(-12deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}37%{opacity:1;transform:scale(1) rotate(-5deg)}45%{opacity:1;transform:scale(1) rotate(-5deg);animation-timing-function:cubic-bezier(.7,0,.84,0)}48%,100%{opacity:0;transform:translateY(4cqh) scale(.9) rotate(-5deg)}}
.mq-grid{left:12cqw;top:26cqh;width:76cqw;height:48cqh}
.mq-grid i{position:absolute;width:36cqw;height:22cqh;border-radius:4cqw;opacity:0;animation-name:mq-tile}
.mq-grid .t1{left:0;top:0;--tx:20cqw;--ty:13cqh;background:radial-gradient(circle at 68% 38%,#fff 0 4.5cqw,transparent 5cqw),linear-gradient(160deg,#2f6bff,#031c86);box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.25);animation-name:mq-tile1}
.mq-grid .t2{right:0;top:0;--tx:-20cqw;--ty:13cqh;background:#fff;animation-delay:calc(var(--T)*.015)}
.mq-grid .t3{left:0;bottom:0;--tx:20cqw;--ty:-13cqh;background:#15cccc;animation-delay:calc(var(--T)*.03)}
.mq-grid .t4{right:0;bottom:0;--tx:-20cqw;--ty:-13cqh;background:linear-gradient(135deg,#6fe7e0,#2f6bff);animation-delay:calc(var(--T)*.045)}
@keyframes mq-tile{0%,50%{opacity:0;transform:scale(.85) rotate(6deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}56%{opacity:1;transform:scale(1) rotate(0)}65%{opacity:1;transform:translate(0,0) scale(1);border-radius:4cqw;animation-timing-function:cubic-bezier(.7,0,.84,0)}71%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2);border-radius:50%}}
@keyframes mq-tile1{0%,49.6%{opacity:0}50.4%{opacity:1;transform:none}65%{opacity:1;transform:translate(0,0) scale(1);border-radius:4cqw;animation-timing-function:cubic-bezier(.7,0,.84,0)}71%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2);border-radius:50%}}
.mq-sp{left:50cqw;top:50cqh;width:0;height:0}
.mq-sp i{position:absolute;left:-1cqw;top:-1cqw;width:2cqw;height:2cqw;border-radius:50%;background:#fff;box-shadow:0 0 3cqw #6fe7e0;opacity:0;animation-name:mq-spark;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.mq-sp i:nth-child(1){--a:15deg}.mq-sp i:nth-child(2){--a:75deg}.mq-sp i:nth-child(3){--a:135deg}.mq-sp i:nth-child(4){--a:195deg}.mq-sp i:nth-child(5){--a:255deg}.mq-sp i:nth-child(6){--a:315deg}
@keyframes mq-spark{0%,77%{opacity:0;transform:rotate(var(--a)) translateX(12cqw) scale(.5)}79%{opacity:1}89%,100%{opacity:0;transform:rotate(var(--a)) translateX(42cqw) scale(1)}}
.mq-logo{left:28cqw;top:calc(50cqh - 9.2cqw);width:44cqw;height:auto;opacity:0;animation-name:mq-logo}
@keyframes mq-logo{0%,75%{opacity:0;transform:scale(.85);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}81%{opacity:1;transform:scale(1)}95%{opacity:1;transform:scale(1.02);animation-timing-function:cubic-bezier(.7,0,.84,0)}99%,100%{opacity:0;transform:scale(.96)}}
.mq-sub{left:0;right:0;top:calc(50cqh + 35cqw);text-align:center;overflow:hidden;line-height:1.2}
.mq-sub b{display:inline-block;font-size:6.6cqw;letter-spacing:.12em;text-transform:uppercase;animation-name:mq-subup}
@keyframes mq-subup{0%,81%{transform:translateY(120%);animation-timing-function:cubic-bezier(.16,1,.3,1)}86%{transform:translateY(0)}95%{transform:translateY(0);animation-timing-function:cubic-bezier(.7,0,.84,0)}99%,100%{transform:translateY(120%)}}
.mq-prog{left:7cqw;right:7cqw;bottom:6cqw;height:max(2px,.8cqw);border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.mq-prog i{position:absolute;inset:0;background:#fff;transform-origin:left;animation-name:prog;animation-timing-function:linear}

/* ---------- Mini ejemplo: edición (timeline) ---------- */
.medit{--T:calc(4.4s*var(--slow,1));position:relative;width:100%;aspect-ratio:2/1;border-radius:14px;overflow:hidden;container-type:inline-size;background:radial-gradient(120% 90% at 50% 0%,#132a7a,#0a1640 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 44px -24px rgba(3,28,134,.7);font-family:DingoPoppins,sans-serif}
.medit *{position:absolute;animation-duration:var(--T);animation-iteration-count:infinite;animation-fill-mode:both}
.medit::after{content:"";position:absolute;inset:0;background:#0a1640;animation:me-veil var(--T) infinite both}
@keyframes me-veil{0%{opacity:1}4%,94%{opacity:0}100%{opacity:1}}
.me-prev{left:27cqw;top:3cqw;width:46cqw;height:25.9cqw;border-radius:1.4cqw;overflow:hidden;background:#000;box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.5)}
.me-s{inset:0}
.me-s.s1{background:linear-gradient(160deg,#2a4fd0,#0b1f6b)}
.me-s.s1 b{left:50%;bottom:-2cqw;width:16cqw;height:20cqw;margin-left:-8cqw;background:radial-gradient(circle at 50% 22%,#ffd9c2 0 3.4cqw,transparent 3.6cqw),radial-gradient(ellipse 8cqw 7cqw at 50% 100%,#031c86 98%,transparent 100%)}
.me-s.s2{background:radial-gradient(circle at 60% 45%,#fff 0 4cqw,transparent 4.3cqw),radial-gradient(circle at 60% 45%,#6fe7e0 0 9cqw,transparent 9.3cqw),linear-gradient(160deg,#15cccc,#0f8f9a);opacity:0;animation-name:me-s2;animation-timing-function:steps(1,end)}
.me-s.s3{background:radial-gradient(ellipse 12cqw 8cqw at 50% 62%,rgba(255,255,255,.18),transparent 70%),linear-gradient(160deg,#1a1f5c,#05093a);opacity:0;animation-name:me-s3;animation-timing-function:steps(1,end)}
.me-s.s3::after{content:"";position:absolute;left:50%;top:30%;width:9cqw;height:11cqw;margin-left:-4.5cqw;border-radius:1.4cqw;background:linear-gradient(160deg,#6fe7e0,#2f6bff);box-shadow:0 2cqw 4cqw rgba(21,204,204,.4)}
@keyframes me-s2{0%,60.2%{opacity:0}60.3%,71.3%{opacity:1}71.4%,100%{opacity:0}}
@keyframes me-s3{0%,71.3%{opacity:0}71.4%,100%{opacity:1}}
.me-cap{left:0;right:0;bottom:2.2cqw;display:flex;justify-content:center;gap:1cqw}
.me-cap b{position:relative;padding:.5cqw 1.2cqw;border-radius:.8cqw;background:rgba(0,0,0,.55);color:#fff;font-size:2.6cqw;opacity:0;animation-name:me-word;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.me-cap b:nth-child(2){animation-delay:calc(var(--T)*.04)}
.me-cap b.k{background:#15cccc;color:#031c86;animation-delay:calc(var(--T)*.08)}
@keyframes me-word{0%,44%{opacity:0;transform:translateY(40%) scale(.85)}47%,100%{opacity:1;transform:none}}
.me-rec{left:1.4cqw;top:1.2cqw;font-size:1.6cqw;letter-spacing:.1em;color:#fff;padding:.3cqw .8cqw;border-radius:.6cqw;background:rgba(0,0,0,.4)}
.me-tl{left:3cqw;right:3cqw;top:31.5cqw;height:16cqw;border-radius:1.4cqw;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.me-ruler{left:1cqw;right:1cqw;top:.6cqw;height:1.4cqw;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 2cqw);-webkit-mask:linear-gradient(#000 0 0);opacity:.7}
.me-c{top:2.8cqw;height:4.6cqw;border-radius:.8cqw;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.me-c::before{content:"";position:absolute;left:.8cqw;right:.8cqw;top:.9cqw;height:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.35)}
.me-c.c1{left:2cqw;width:24cqw;background:linear-gradient(180deg,#3d6dff,#2f5ae0)}
.me-c.c2{left:26.6cqw;width:15cqw;background:linear-gradient(180deg,#25d6d6,#13b3b3)}
.me-c.c2x{left:41.6cqw;width:14cqw;background:linear-gradient(180deg,#25d6d6,#13b3b3);animation-name:me-c2x}
.me-c.c2x::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,rgba(255,138,128,.85) 0 .7cqw,rgba(255,138,128,.45) .7cqw 1.4cqw);box-shadow:inset 0 0 0 2px #ff8a80;opacity:0;animation:me-hatch var(--T) infinite both}
.me-c.c2x em{position:absolute;left:0;right:0;top:-2.6cqw;text-align:center;font-style:normal;font-size:1.5cqw;letter-spacing:.06em;color:#ff8a80;opacity:0;animation:me-hatch var(--T) infinite both}
@keyframes me-hatch{0%,15%{opacity:0}17%,100%{opacity:1}}
@keyframes me-c2x{0%,21%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.7,0,.84,0)}28%,100%{opacity:0;transform:translateY(-70%) scale(.92)}}
.me-c.c3{left:56.4cqw;width:30cqw;background:linear-gradient(180deg,#7b88ff,#5d6be6);animation-name:me-ripple}
@keyframes me-ripple{0%,28%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}35%{transform:translateX(-14.6cqw);animation-timing-function:cubic-bezier(.22,1,.36,1)}38%,100%{transform:translateX(-14.2cqw)}}
.me-snap{left:41.7cqw;top:2cqw;width:.35cqw;height:6.2cqw;border-radius:1cqw;background:#6fe7e0;box-shadow:0 0 1.6cqw #6fe7e0;opacity:0;animation-name:me-snap}
@keyframes me-snap{0%,35%{opacity:0;transform:scaleY(.6)}37%{opacity:1;transform:scaleY(1.1)}44%,100%{opacity:0;transform:scaleY(1)}}
.me-cp{top:8.2cqw;height:2.4cqw;border-radius:.6cqw;background:rgba(255,255,255,.82);opacity:0;transform-origin:left;animation-name:me-cp;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.me-cp.cp1{left:4cqw;width:10cqw}.me-cp.cp2{left:16cqw;width:8cqw;animation-delay:calc(var(--T)*.025)}.me-cp.cp3{left:28cqw;width:11cqw;animation-delay:calc(var(--T)*.05)}.me-cp.cp4{left:45cqw;width:15cqw;background:#6fe7e0;animation-delay:calc(var(--T)*.075)}
@keyframes me-cp{0%,39%{opacity:0;transform:scaleX(.6)}43%,100%{opacity:1;transform:none}}
.me-au{left:2cqw;right:22cqw;top:11.6cqw;height:3.4cqw;background:repeating-linear-gradient(90deg,#1fbf8f 0 .45cqw,transparent .45cqw .9cqw);clip-path:polygon(0 45%,4% 20%,8% 55%,12% 10%,17% 40%,22% 15%,27% 50%,32% 25%,38% 5%,44% 35%,50% 20%,56% 45%,62% 10%,68% 30%,74% 20%,80% 50%,86% 15%,92% 35%,100% 25%,100% 75%,92% 65%,86% 85%,80% 50%,74% 80%,68% 70%,62% 90%,56% 55%,50% 80%,44% 65%,38% 95%,32% 75%,27% 50%,22% 85%,17% 60%,12% 90%,8% 45%,4% 80%,0 55%)}
.me-blade{left:41.4cqw;top:-1.2cqw;width:.5cqw;height:9.4cqw;border-radius:1cqw;background:#ff8a80;opacity:0;animation-name:me-blade}
.me-blade::before{content:"✂";position:absolute;left:50%;top:-2.6cqw;transform:translateX(-50%);font-size:2.4cqw;color:#ff8a80}
@keyframes me-blade{0%,6%{opacity:0;transform:translateY(-3cqw);animation-timing-function:cubic-bezier(.16,1,.3,1)}11%{opacity:1;transform:none}15%{transform:scaleX(1)}16%{transform:scaleX(2.4);box-shadow:0 0 2cqw #ff8a80}18%{opacity:1;transform:scaleX(1);animation-timing-function:cubic-bezier(.7,0,.84,0)}22%,100%{opacity:0;transform:translateY(-2cqw)}}
.me-ph{left:2cqw;top:-.6cqw;width:.35cqw;height:16.6cqw;background:#fff;box-shadow:0 0 1cqw rgba(255,255,255,.6);animation-name:me-ph}
.me-ph::before{content:"";position:absolute;left:-.9cqw;top:0;border:1.05cqw solid transparent;border-top:1.3cqw solid #fff}
@keyframes me-ph{0%,42%{transform:translateX(0);animation-timing-function:linear}94%,100%{transform:translateX(70cqw)}}

/* ---------- Mini ejemplo: diseño (carrusel) ---------- */
.mdesign{--T:calc(6.6s*var(--slow,1));position:relative;width:100%;aspect-ratio:2/1;border-radius:14px;overflow:hidden;container-type:inline-size;background:radial-gradient(rgba(3,28,134,.12) 1px,transparent 1.2px) 0 0/2.4cqw 2.4cqw,linear-gradient(160deg,#f6faff,#e6f0fc);box-shadow:inset 0 0 0 1px rgba(3,28,134,.08),0 24px 44px -26px rgba(3,28,134,.45);font-family:DingoPoppins,sans-serif}
.mdesign *{position:absolute;animation-duration:var(--T);animation-iteration-count:infinite;animation-fill-mode:both}
.mdesign::after{content:"";position:absolute;inset:0;background:#eef5fd;animation:me-veil var(--T) infinite both;pointer-events:none}
.md-board{left:5cqw;top:3cqw;width:35.2cqw;height:44cqw;border-radius:1.2cqw;background:#fff;overflow:hidden;box-shadow:0 2cqw 4cqw -1.4cqw rgba(3,28,134,.35)}
.md-board.b1{animation-name:md-b1}
@keyframes md-b1{0%,2%{transform:scale(.95);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}7%{transform:none;opacity:1}62%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}70%,100%{transform:translateX(-44cqw);opacity:0}}
.md-board.b2{z-index:0;animation-name:md-b2}
@keyframes md-b2{0%,62%{transform:translateX(50cqw);opacity:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}70%,100%{transform:none;opacity:1}}
.md-guides{inset:0;background:linear-gradient(90deg,rgba(21,204,204,.45) 1px,transparent 1px) 0 0/33.33% 100%,linear-gradient(rgba(21,204,204,.45) 1px,transparent 1px) 0 0/100% 25%;animation-name:md-guides}
@keyframes md-guides{0%,3%{opacity:0}8%{opacity:.9}36%,100%{opacity:.18}}
.md-img{left:7%;right:7%;top:6%;height:48%;border-radius:.9cqw;background:radial-gradient(circle at 70% 38%,#fff 0 3.4cqw,transparent 3.6cqw),radial-gradient(circle at 18% 115%,#15cccc 0 10cqw,transparent 10.2cqw),linear-gradient(160deg,#2f6bff,#031c86);opacity:0;animation-name:md-img}
@keyframes md-img{0%,7%{opacity:0;transform:translateX(-14%) scale(.96);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}14%,100%{opacity:1;transform:none}}
.md-h{left:7%;top:58%;overflow:hidden;line-height:1.05}
.md-h.h2{top:68%}
.md-h b{position:relative;display:block;font-size:4.2cqw;letter-spacing:-.03em;color:#031c86;animation-name:md-up}
.md-h.h2 b{color:#2f6bff;animation-delay:calc(var(--T)*.02)}
@keyframes md-up{0%,15%{transform:translateY(110%);animation-timing-function:cubic-bezier(.16,1,.3,1)}21%,100%{transform:none}}
.md-cta{left:7%;bottom:7%;width:34%;height:7.5%;border-radius:3cqw;box-shadow:inset 0 0 0 .25cqw rgba(3,28,134,.25);background:transparent;animation-name:md-cta}
@keyframes md-cta{0%,45.5%{background:transparent;transform:none}47%{background:#15cccc;transform:scale(1.08);box-shadow:0 0 0 1.2cqw rgba(21,204,204,.25)}52%,100%{background:#15cccc;transform:none;box-shadow:0 0 0 0 rgba(21,204,204,0)}}
.md-logo{right:7%;bottom:6.5%;height:9%;width:auto;opacity:0;animation-name:md-logo}
@keyframes md-logo{0%,50%{opacity:0;transform:translate(30%,-40%) scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}55%,100%{opacity:1;transform:none}}
.md-snapline{left:0;right:0;bottom:10.5%;height:1px;background:#ff4fa3;opacity:0;animation-name:md-snap}
@keyframes md-snap{0%,53%{opacity:0}54.5%{opacity:1}60%,100%{opacity:0}}
.md-num{left:8%;top:6%;font-size:12cqw;line-height:1;letter-spacing:-.05em;background:linear-gradient(135deg,#15cccc,#2f6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.md-l{left:8%;height:3%;border-radius:1cqw;background:rgba(3,28,134,.85);transform-origin:left;animation-name:md-l}
.md-l.l1{top:44%;width:76%}.md-l.l2{top:52%;width:62%;background:rgba(3,28,134,.35);animation-delay:calc(var(--T)*.015)}.md-l.l3{top:60%;width:70%;background:rgba(3,28,134,.35);animation-delay:calc(var(--T)*.03)}
@keyframes md-l{0%,68%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}75%,100%{transform:scaleX(1)}}
.md-dot{right:8%;bottom:8%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6fe7e0,#15cccc 60%,#0f9fa8)}
.md-pal{left:47cqw;top:6cqw;width:46cqw;height:38cqw;border-radius:1.4cqw;background:rgba(255,255,255,.85);box-shadow:0 1.6cqw 3.2cqw -1.4cqw rgba(3,28,134,.3);z-index:2}
.md-pal i[class^=sw]{width:9cqw;height:9cqw;border-radius:1.2cqw;opacity:0;animation-name:md-pop;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.md-pal .sw1{left:3cqw;top:3cqw;background:#031c86}
.md-pal .sw2{left:14cqw;top:3cqw;background:#15cccc;animation-delay:calc(var(--T)*.015)}
.md-pal .sw3{left:3cqw;top:14cqw;background:#2f6bff;animation-delay:calc(var(--T)*.03)}
.md-pal .sw4{left:14cqw;top:14cqw;background:#1fbf8f;animation-delay:calc(var(--T)*.045)}
@keyframes md-pop{0%,24%{opacity:0;transform:scale(.85)}29%,100%{opacity:1;transform:none}}
.md-aa{left:27cqw;top:2.4cqw;font-size:10cqw;line-height:1;color:#031c86;opacity:0;animation-name:md-pop;animation-delay:calc(var(--T)*.06)}
.md-tb{left:27.6cqw;top:15.4cqw;width:14cqw;height:1.4cqw;border-radius:1cqw;background:rgba(3,28,134,.2);box-shadow:0 2.6cqw 0 rgba(3,28,134,.12)}
.md-pal::after{content:"Paleta y tipografía";position:absolute;left:3cqw;bottom:2.6cqw;font-family:DingoMontserrat,sans-serif;font-size:2.1cqw;color:#475785;letter-spacing:.02em}
.md-flyx{left:18.5cqw;top:13.5cqw;width:0;height:0;z-index:3;margin-left:47cqw;animation-name:md-fx}
@keyframes md-fx{0%,38%{transform:translateX(0);animation-timing-function:cubic-bezier(.25,.6,.3,1)}46%,100%{transform:translateX(-52cqw)}}
.md-fly{left:-2.4cqw;top:-2.4cqw;width:4.8cqw;height:4.8cqw;border-radius:50%;background:#15cccc;box-shadow:0 1cqw 2cqw rgba(21,204,204,.6);opacity:0;animation-name:md-fy}
@keyframes md-fy{0%,34%{opacity:0;transform:translateY(0) scale(.6)}36%{opacity:1;transform:translateY(0) scale(1.12);animation-timing-function:ease-out}38%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.35)}46%{opacity:1;transform:translateY(28.9cqw) scale(.7)}47.5%,100%{opacity:0;transform:translateY(28.9cqw) scale(.4)}}
.md-dots{left:5cqw;width:35.2cqw;top:47.8cqw;height:1cqw;display:flex;justify-content:center;gap:.8cqw}
.md-dots i{position:relative;width:1cqw;height:1cqw;border-radius:1cqw;background:rgba(3,28,134,.2)}
.md-dots i:first-child{animation-name:md-d1}.md-dots i:nth-child(2){animation-name:md-d2}
@keyframes md-d1{0%,64%{width:2.6cqw;background:#031c86}70%,100%{width:1cqw;background:rgba(3,28,134,.2)}}
@keyframes md-d2{0%,64%{width:1cqw;background:rgba(3,28,134,.2)}70%,100%{width:2.6cqw;background:#031c86}}

/* ---------- Mini ejemplo: ajustes sobre el cuadro ---------- */
.mrev{--T:calc(4.6s*var(--slow,1));position:relative;width:100%;aspect-ratio:100/38;container-type:inline-size;animation:mrv-fade var(--T) infinite both}
.mrev *{animation-duration:var(--T);animation-iteration-count:infinite;animation-fill-mode:both}
@keyframes mrv-fade{0%{opacity:0}4%,94%{opacity:1}100%{opacity:0}}
.rv-frame{position:absolute;left:0;top:1cqw;width:56cqw;height:31.5cqw;border-radius:1.6cqw;overflow:visible;background:radial-gradient(circle at 20% 120%,rgba(21,204,204,.55),transparent 55%),linear-gradient(160deg,#2a4fd0,#031c86);box-shadow:0 2cqw 4cqw -1.6cqw rgba(3,28,134,.55)}
.rv-t1,.rv-t2{position:absolute;left:5%;border-radius:1cqw}
.rv-t1{top:14%;width:46%;height:9%;background:#fff}
.rv-t2{top:28%;width:30%;height:6%;background:rgba(111,231,224,.7)}
.rv-logo{position:absolute;right:7%;bottom:10%;width:8.4cqw;height:8.4cqw;border-radius:1.2cqw;background:#fff;display:grid;place-items:center;transform-origin:100% 100%;animation-name:rv-logo}
.rv-logo img{height:62%;width:auto}
@keyframes rv-logo{0%,50%{transform:scale(1);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}57%,100%{transform:scale(1.45)}}
.rv-draw{position:absolute;right:1%;bottom:3%;width:26cqw;height:16cqw;overflow:visible}
.rv-draw path{fill:none;stroke:#ffd166;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:270;stroke-dashoffset:270;animation-name:rv-draw}
@keyframes rv-draw{0%,18%{stroke-dashoffset:270;opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}27%{stroke-dashoffset:0}48%{opacity:1}52%,100%{stroke-dashoffset:0;opacity:0}}
.rv-pin{position:absolute;right:20%;bottom:36%;width:3cqw;height:3cqw;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#15cccc;box-shadow:0 0 0 .5cqw #fff,0 1cqw 2cqw rgba(0,0,0,.35);animation-name:rv-pin}
@keyframes rv-pin{0%,15%{opacity:0;transform:translateY(-3cqw) rotate(-45deg) scale(.85);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}19%{opacity:1;transform:rotate(-45deg)}48%{opacity:1}52%,100%{opacity:0;transform:rotate(-45deg)}}
.rv-panel{position:absolute;left:60cqw;right:0;top:1cqw;height:31.5cqw;border-radius:1.6cqw;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 2cqw 4cqw -2cqw rgba(3,28,134,.35)}
.rv-h{position:absolute;left:2.4cqw;top:2.2cqw;font-family:DingoMontserrat,sans-serif;font-weight:500;font-size:2.2cqw;letter-spacing:.08em;text-transform:uppercase;color:#475785}
.rv-bub{position:absolute;left:2.4cqw;right:2.4cqw;top:7cqw;display:flex;gap:1.4cqw;align-items:flex-start;padding:1.6cqw;border-radius:1.4cqw;background:#fff;box-shadow:inset 0 0 0 1px rgba(3,28,134,.08);opacity:0;animation-name:rv-bub;font-size:2.4cqw;color:#0a1846;line-height:1.3}
.rv-bub em{display:block;font-style:normal;font-size:1.8cqw;color:#1180d0}
.rv-av{flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;background:linear-gradient(135deg,#15cccc,#2f6bff)}
@keyframes rv-bub{0%,23%{opacity:0;transform:translateX(10%);animation-timing-function:cubic-bezier(.16,1,.3,1)}30%,100%{opacity:1;transform:none}}
.rv-btn{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2.6cqw;height:5.4cqw;border-radius:3cqw;display:grid;place-items:center;background:#031c86;color:#fff;font-family:DingoPoppins,sans-serif;font-size:2.3cqw;animation-name:rv-btn}
.rv-btn::after{content:"Aprobado ✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;animation:rv-btnt var(--T) infinite both}
@keyframes rv-btn{0%,42%{transform:none;background:#031c86;color:#fff}44%{transform:scale(.95)}46%{transform:none;background:#1fbf8f;color:transparent}100%{background:#1fbf8f;color:transparent}}
@keyframes rv-btnt{0%,45%{opacity:0}47%,100%{opacity:1}}
.rv-done{position:absolute;left:2.4cqw;bottom:9.8cqw;padding:.9cqw 1.8cqw;border-radius:3cqw;background:rgba(31,191,143,.14);color:#0f8a66;font-family:DingoPoppins,sans-serif;font-size:2.2cqw;opacity:0;animation-name:rv-done}
@keyframes rv-done{0%,57%{opacity:0;transform:translateY(30%) scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}62%,100%{opacity:1;transform:none}}
.rv-cur{position:absolute;left:0;top:0;width:3.6cqw;height:3.6cqw;fill:#fff;stroke:#031c86;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35));animation-name:rv-cur}
@keyframes rv-cur{0%,3%{transform:translate(72cqw,30cqw);opacity:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}5%{opacity:1}14%{transform:translate(46.5cqw,23.6cqw)}15%{transform:translate(46.5cqw,23.6cqw) scale(.85)}16.5%{transform:translate(46.5cqw,23.6cqw) scale(1)}30%{transform:translate(46.5cqw,23.6cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}41%{transform:translate(79cqw,26cqw)}43%{transform:translate(79cqw,26cqw) scale(.85)}44.5%{transform:translate(79cqw,26cqw) scale(1);opacity:1;animation-timing-function:cubic-bezier(.7,0,.84,0)}54%,100%{transform:translate(96cqw,40cqw);opacity:0}}

/* ---------- Bento ---------- */
.bento{grid-auto-flow:row dense}
.bento .big{min-height:0}
.mini-reel{flex:1;display:grid;place-items:center;padding:12px 0 28px}
.mr-screen{position:relative;width:min(250px,64%);aspect-ratio:9/16;border-radius:26px;overflow:hidden;box-shadow:0 34px 70px -26px rgba(3,28,134,.6),inset 0 0 0 1px rgba(255,255,255,.25);animation:float calc(6s*var(--slow)) ease-in-out infinite}
.mr-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);background:linear-gradient(130deg,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.mini-wide{margin-bottom:22px}
.bento .wide{justify-content:flex-start}
.bento .wide .card-copy{margin-top:auto}
@media (max-width:1000px){.bento .big{grid-column:span 2;grid-row:auto}.mr-screen{width:min(230px,56%)}}
@media (max-width:560px){.bento .big{grid-column:auto}.mr-screen{width:min(220px,70%)}}

/* ---------- Cómo funciona: línea que termina en el paso 04 y animaciones por paso ---------- */
.steps::before,.steps::after{content:"";position:absolute;top:34px;left:40px;width:calc(75% + 13.5px);height:2px;border-radius:2px}
.steps::before{background:rgba(3,28,134,.08)}
.steps::after{background:linear-gradient(90deg,var(--teal),var(--blue));transform-origin:left;transform:scaleX(var(--p,0));transition:transform .25s linear}
.step-num{transition:background .6s var(--ease),color .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease)}
.step.lit .step-num{color:#fff;background:linear-gradient(135deg,var(--teal),var(--blue));box-shadow:0 10px 26px -10px rgba(47,107,255,.8),0 0 0 6px rgba(21,204,204,.14);transform:scale(1.04)}
.step-art{height:86px;margin:24px 0 18px;position:relative;display:block}
@media (max-width:900px){.steps::before,.steps::after{display:none}}
/* 01: dictado y transcripción */
.sa-voice{display:flex;align-items:center;gap:10px}
.sv-mic{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--teal),var(--blue));box-shadow:0 10px 22px -10px rgba(47,107,255,.9)}
.sv-mic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--teal);animation:ping calc(1.8s*var(--slow)) var(--ease) infinite}
.sv-mic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-bars{display:flex;align-items:center;gap:3px;height:40px}
.sv-bars i{width:4px;height:100%;border-radius:4px;background:linear-gradient(180deg,var(--teal),var(--blue));animation:eq calc(1s*var(--slow)) ease-in-out infinite}
.sv-bars i:nth-child(2){animation-delay:-.2s}.sv-bars i:nth-child(3){animation-delay:-.5s}.sv-bars i:nth-child(4){animation-delay:-.35s}.sv-bars i:nth-child(5){animation-delay:-.7s}.sv-bars i:nth-child(6){animation-delay:-.1s}.sv-bars i:nth-child(7){animation-delay:-.6s}
.sv-txt{display:flex;flex-direction:column;gap:7px;width:76px}
.sv-txt i{position:relative;height:6px;border-radius:4px;background:rgba(3,28,134,.1);overflow:hidden}
.sv-txt i:nth-child(2){width:80%}.sv-txt i:nth-child(3){width:58%}
.sv-txt i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:sv-type calc(2.2s*var(--slow)) infinite both}
.sv-txt i:nth-child(2)::after{animation-delay:.35s}.sv-txt i:nth-child(3)::after{animation-delay:.7s}
@keyframes sv-type{0%,8%{transform:scaleX(0);animation-timing-function:steps(8,end)}38%,85%{transform:scaleX(1);opacity:1}95%,100%{transform:scaleX(1);opacity:0}}
/* 02: guion que se escribe, pregunta y OK */
.sa-script{width:150px}
.ss-doc{position:absolute;left:0;top:4px;width:96px;height:78px;padding:14px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow);display:flex;flex-direction:column;gap:8px}
.ss-doc i{position:relative;display:block;height:6px;border-radius:4px;background:rgba(3,28,134,.08);overflow:hidden}
.ss-doc i:nth-child(2){width:78%}.ss-doc i:nth-child(3){width:90%}.ss-doc i:nth-child(4){width:55%}
.ss-doc i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--mid),var(--teal));transform-origin:left;animation:ss-write calc(2.8s*var(--slow)) infinite both}
.ss-doc i:nth-child(2)::after{animation-delay:.18s}.ss-doc i:nth-child(3)::after{animation-delay:.36s}.ss-doc i:nth-child(4)::after{animation-delay:.54s}
@keyframes ss-write{0%,4%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}22%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.ss-q{position:absolute;left:82px;top:-6px;width:32px;height:32px;border-radius:12px 12px 12px 4px;display:grid;place-items:center;color:#fff;font-family:DingoPoppins,sans-serif;font-size:17px;background:linear-gradient(135deg,var(--teal),var(--blue));box-shadow:0 10px 20px -8px rgba(47,107,255,.8);animation:ss-q calc(2.8s*var(--slow)) infinite both}
@keyframes ss-q{0%,26%{opacity:0;transform:translateY(8px) scale(.85);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}34%{opacity:1;transform:none}56%{opacity:1;transform:translateY(-3px);animation-timing-function:cubic-bezier(.7,0,.84,0)}62%,100%{opacity:0;transform:translateY(-10px) scale(.9)}}
.ss-ok{position:absolute;left:62px;top:40px;padding:4px 10px;border-radius:8px;border:2.5px solid var(--green);color:var(--green);font-family:DingoPoppins,sans-serif;font-size:15px;letter-spacing:.08em;background:rgba(255,255,255,.9);animation:ss-ok calc(2.8s*var(--slow)) infinite both}
@keyframes ss-ok{0%,62%{opacity:0;transform:rotate(-14deg) scale(1.5);animation-timing-function:cubic-bezier(.22,1,.36,1)}68%{opacity:1;transform:rotate(-12deg) scale(.96)}72%,92%{opacity:1;transform:rotate(-12deg) scale(1)}100%{opacity:0;transform:rotate(-12deg) scale(1)}}
/* 03: tira de cuadros, marca con lápiz y pin */
.sa-review{width:200px}
.rw-strip{position:absolute;left:0;right:0;top:12px;height:62px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.rw-track{display:flex;gap:6px;width:max-content;animation:rw-scroll calc(16s*var(--slow)) infinite}
.rw-track i{width:34px;height:60px;border-radius:7px;background:linear-gradient(160deg,#d6e9ff,#bfe6ec);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.rw-track i:nth-child(4n+2){background:linear-gradient(160deg,#9fd4f0,#2f6bff)}
.rw-track i:nth-child(4n+3){background:linear-gradient(160deg,#6fe7e0,#15cccc)}
.rw-track i:nth-child(4n){background:linear-gradient(160deg,#2f6bff,#031c86)}
@keyframes rw-scroll{0%,20%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}24.5%,45%{transform:translateX(-40px);animation-timing-function:cubic-bezier(.65,0,.35,1)}49.5%,70%{transform:translateX(-80px);animation-timing-function:cubic-bezier(.65,0,.35,1)}74.5%,95%{transform:translateX(-120px);animation-timing-function:cubic-bezier(.65,0,.35,1)}99.5%,100%{transform:translateX(-160px)}}
.rw-pen{position:absolute;left:78px;top:2px;width:44px;height:82px;overflow:visible}
.rw-pen path{fill:none;stroke:#ffb020;stroke-width:3;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:rw-draw calc(4s*var(--slow)) infinite both}
@keyframes rw-draw{0%,4%{stroke-dashoffset:200;opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}28%,80%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
.rw-pin{position:absolute;left:112px;top:-4px;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--teal);box-shadow:0 0 0 3px #fff,0 6px 12px -4px rgba(3,28,134,.5);animation:rw-pin calc(4s*var(--slow)) infinite both}
@keyframes rw-pin{0%,28%{opacity:0;transform:translateY(-14px) rotate(-45deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}36%,80%{opacity:1;transform:rotate(-45deg)}95%,100%{opacity:0;transform:rotate(-45deg)}}
.rw-ok{position:absolute;left:124px;top:56px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;background:var(--green);box-shadow:0 8px 16px -6px rgba(31,191,143,.9);animation:rw-ok calc(4s*var(--slow)) infinite both}
@keyframes rw-ok{0%,66%{opacity:0;transform:scale(.85);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}74%,82%{opacity:1;transform:none}95%,100%{opacity:0}}
/* 04: la pieza llega, check con estallido y descarga */
.sa-deliver{width:130px}
.sd-tray{position:absolute;left:8px;right:8px;bottom:2px;height:16px;border:2.5px solid rgba(3,28,134,.2);border-top:0;border-radius:0 0 12px 12px}
.sd-piece{position:absolute;left:44px;top:4px;width:38px;height:66px;border-radius:9px;background:linear-gradient(165deg,#031c86,#1180d0 60%,#15cccc);box-shadow:0 14px 24px -12px rgba(3,28,134,.8);transform-origin:50% 100%;animation:sd-drop calc(2.6s*var(--slow)) infinite both}
.sd-piece i{position:absolute;left:6px;right:10px;bottom:12px;height:4px;border-radius:3px;background:#fff;box-shadow:0 -7px 0 rgba(255,255,255,.55)}
.sd-piece::before{content:"";position:absolute;left:8px;top:12px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,rgba(111,231,224,.6) 45%,transparent 70%)}
@keyframes sd-drop{0%,4%{opacity:0;transform:translateY(-46px) scale(.92);animation-timing-function:cubic-bezier(.55,0,.85,.4)}16%{opacity:1;transform:translateY(2px) scale(1.02,.96);animation-timing-function:cubic-bezier(.22,1,.36,1)}24%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px)}}
.sd-check{position:absolute;left:72px;top:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green);box-shadow:0 8px 16px -6px rgba(31,191,143,.9);animation:sd-pop calc(2.6s*var(--slow)) infinite both}
.sd-check svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;animation:sd-tick calc(2.6s*var(--slow)) infinite both}
@keyframes sd-pop{0%,22%{opacity:0;transform:scale(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}30%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sd-tick{0%,27%{stroke-dashoffset:22;animation-timing-function:cubic-bezier(.65,0,.35,1)}36%,100%{stroke-dashoffset:0}}
.sd-burst{position:absolute;left:85px;top:9px;width:0;height:0}
.sd-burst i{position:absolute;left:-1px;top:-4px;width:2.5px;height:8px;border-radius:2px;background:var(--green);opacity:0;animation:sd-burst calc(2.6s*var(--slow)) infinite both}
.sd-burst i:nth-child(1){--r:0deg}.sd-burst i:nth-child(2){--r:45deg}.sd-burst i:nth-child(3){--r:90deg}.sd-burst i:nth-child(4){--r:135deg}.sd-burst i:nth-child(5){--r:180deg}.sd-burst i:nth-child(6){--r:225deg}.sd-burst i:nth-child(7){--r:270deg}.sd-burst i:nth-child(8){--r:315deg}
@keyframes sd-burst{0%,26%{opacity:0;transform:rotate(var(--r)) translateY(-10px) scaleY(.3)}30%{opacity:1;transform:rotate(var(--r)) translateY(-16px) scaleY(1);animation-timing-function:cubic-bezier(.16,1,.3,1)}42%,100%{opacity:0;transform:rotate(var(--r)) translateY(-24px) scaleY(.4)}}
.sd-dl{position:absolute;left:96px;top:34px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 6px 14px -8px rgba(3,28,134,.5);animation:sd-dl calc(2.6s*var(--slow)) infinite both}
.sd-dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:sd-arrow calc(2.6s*var(--slow)) infinite both}
@keyframes sd-dl{0%,40%{opacity:0;transform:translateY(-6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}48%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sd-arrow{0%,50%{transform:none}56%{transform:translateY(3px)}62%{transform:none}68%{transform:translateY(3px)}74%,100%{transform:none}}

/* ---------- Precios: bloque de regalo ---------- */
.freebie{position:relative;overflow:hidden;max-width:980px;margin:0 auto 34px;padding:clamp(28px,5vw,56px);border-radius:32px;display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:center;color:#fff;background:linear-gradient(120deg,#031c86 0%,#132ea8 35%,#1180d0 75%,#15cccc 120%);background-size:180% 180%;animation:fb-shift calc(14s*var(--slow)) ease-in-out infinite alternate;box-shadow:0 44px 90px -40px rgba(3,28,134,.8);isolation:isolate}
.freebie::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(111,231,224,.55),transparent 65%);filter:blur(30px);z-index:-1;animation:drift2 calc(16s*var(--slow)) ease-in-out infinite alternate}
@keyframes fb-shift{to{background-position:100% 100%}}
.fb-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
.fb-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.fb-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#5ff0c0}
.fb-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #5ff0c0;animation:ping calc(2s*var(--slow)) var(--ease) infinite}
.freebie h3{margin-top:16px;color:#fff;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.035em;line-height:1.05}
.fb-hl{background:linear-gradient(110deg,#fff 10%,#c7f7f1 35%,#6fe7e0 55%,#c7f7f1 75%,#fff 95%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:crear calc(3s*var(--slow)) ease-in-out infinite alternate}
.fb-copy>p:not(.fb-eyebrow){margin:18px 0 30px;color:rgba(255,255,255,.86);font-size:clamp(16px,1.7vw,18.5px);max-width:520px}
.fb-copy b{color:#fff;font-family:DingoPoppins,sans-serif;font-weight:700}
.fb-art{position:relative;height:260px}
.fb-ticket{position:absolute;width:180px;height:124px;padding:16px 20px;border-radius:20px;display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 24px 40px -20px rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask:radial-gradient(circle 11px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 11px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.fb-ticket b{font-family:DingoPoppins,sans-serif;font-size:46px;line-height:1;letter-spacing:-.04em;color:#fff}
.fb-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.fb-s{margin-top:4px;font-size:13px;color:rgba(255,255,255,.85)}
.t-a{left:4%;top:14px;--rot:-8deg;transform:rotate(var(--rot));animation:fb-float calc(7s*var(--slow)) ease-in-out infinite}
.t-b{right:2%;top:118px;--rot:7deg;transform:rotate(var(--rot));animation:fb-float calc(7s*var(--slow)) ease-in-out infinite;animation-delay:-3.5s;background:rgba(31,191,143,.24)}
.t-b b{color:#c9ffe9}
@keyframes fb-float{0%,100%{transform:translateY(0) rotate(var(--rot))}50%{transform:translateY(-12px) rotate(calc(var(--rot) * .7))}}
.fb-spark{position:absolute;width:16px;height:16px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:fb-twinkle calc(2.8s*var(--slow)) ease-in-out infinite}
.fb-spark.s1{left:62%;top:6px}.fb-spark.s2{left:0;top:170px;width:11px;height:11px;animation-delay:-.9s}.fb-spark.s3{right:6%;top:64px;width:10px;height:10px;animation-delay:-1.6s}.fb-spark.s4{left:44%;bottom:0;width:13px;height:13px;animation-delay:-2.2s}
@keyframes fb-twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.4}50%{transform:scale(1) rotate(45deg);opacity:1}}
@media (max-width:900px){.freebie{grid-template-columns:1fr;max-width:480px}.fb-art{height:220px}.t-b{top:96px}}
@media (max-width:420px){.freebie{border-radius:26px}.fb-ticket{width:156px;height:112px}.fb-ticket b{font-size:40px}.freebie .btn{width:100%}}

/* ---------- Estudio: foto del equipo ---------- */
.studio-card{grid-template-columns:1.1fr 1fr;align-items:center}
.studio-side{display:flex;flex-direction:column;gap:18px}
.studio-photo{position:relative;margin:0;aspect-ratio:4/4.3;border-radius:24px;overflow:hidden;box-shadow:0 34px 70px -30px rgba(0,0,0,.6);transform:translateY(var(--py,0px));transition:transform .3s linear}
.studio-photo img{width:100%;height:112%;object-fit:cover;transform:translateY(var(--iy,-6%)) scale(1.02);transition:transform 1s var(--ease)}
.studio-photo:hover img{transform:translateY(var(--iy,-6%)) scale(1.07)}
.studio-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);background:linear-gradient(180deg,transparent 55%,rgba(3,28,134,.55));pointer-events:none}
.studio-photo figcaption{position:absolute;left:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;font-size:13px;color:#fff;background:rgba(3,28,134,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.rec-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#ff6b6b}
.rec-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #ff6b6b;animation:ping calc(2s*var(--slow)) var(--ease) infinite}
.studio-tags{justify-content:flex-start}
@media (max-width:860px){.studio-photo{aspect-ratio:4/3.4}}

/* ---------- FAQ con títulos ---------- */
.faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:1.3}
.ans a{color:var(--mid)}
.frames.f45 .frame{aspect-ratio:4/5}
.steps::before,.steps::after{z-index:0}
.step{z-index:1}
.step-num{z-index:2}
.pro .sec-head{max-width:920px}
.pro .sec-head h2{font-size:clamp(34px,5.2vw,62px)}
@media (min-width:1181px){.fc1{left:-150px;top:150px}.fc4{left:-128px;bottom:90px}.fc2{right:-128px;top:70px}.fc5{right:-150px}.fc3{right:-118px;bottom:96px}}
@media (min-width:1001px) and (max-width:1180px){.fc1{left:-70px;top:160px}.fc4{left:-60px}.fc2{right:-60px}.fc5{right:-70px}.fc3{right:-56px}}
@media (max-width:860px){.studio-card{grid-template-columns:1fr;gap:32px}.studio-photo{transform:none}}

/* ---------- Estudio: marcas con las que trabajamos (logos tal cual, sobre chips de vidrio iguales) ---------- */
.clients{grid-column:1/-1;margin-top:8px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.clients-title{font-family:DingoMontserrat,sans-serif;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:18px}
.clients-viewport{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{list-style:none;margin:0;padding:0 12px 0 0;display:flex;gap:12px;flex:none;animation:clients calc(60s*var(--slow)) linear infinite}
.clients-viewport:hover .clients-track{animation-play-state:paused}
.clients-track li{flex:none;width:150px;height:84px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .4s,transform .5s var(--ease)}
.clients-track li:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.clients-track img{width:128px;height:auto;max-height:74px;object-fit:contain}
@keyframes clients{to{transform:translateX(-100%)}}
@media (max-width:560px){.clients-track li{width:122px;height:70px;border-radius:14px}.clients-track img{width:104px}}
.deliv-wide{flex:none;width:340px;max-width:calc(100vw - 120px)}

/* ---------- Estudio: collage de rodaje (fotos reales, en blanco y negro desde el archivo) ---------- */
.studio-photo{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:4/4.1;overflow:visible;border-radius:0;box-shadow:none;background:none}
.studio-photo::after{display:none}
.studio-photo>span{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 26px 50px -26px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.2)}
.studio-photo>span::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);background:linear-gradient(180deg,transparent 55%,rgba(3,28,134,.45));pointer-events:none}
.sp-main{grid-row:1/3}
.studio-photo img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;transform:translateY(var(--iy,-6%)) scale(1.02);transition:transform 1.2s var(--ease)}
.sp-main img{animation:sp-kb calc(18s*var(--slow)) ease-in-out infinite alternate}
@keyframes sp-kb{from{scale:1}to{scale:1.07}}
.studio-photo>span:hover img{transform:translateY(var(--iy,-6%)) scale(1.08)}
.studio-photo figcaption{left:14px;bottom:14px}
@media (max-width:860px){.studio-photo{aspect-ratio:4/3.6}}

/* ═════════════ Ronda 3 ═════════════ */
/* Chat como el del portal */
.composer{min-height:58px;gap:10px;padding:8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(3,28,134,.1),0 10px 26px -14px rgba(3,28,134,.35)}
.comp-plus{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#031c86;background:rgba(3,28,134,.06)}
.comp-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mic,.send{width:40px;height:40px;border-radius:50%;color:#fff;background:#031c86}
.send{color:#fff;background:#031c86;opacity:.55;transition:opacity .25s,transform .25s var(--ease)}
.composer.ready .send{opacity:1;background:#031c86}
.send svg{width:18px;height:18px;stroke-width:2}
.composer.live .mic{color:#fff;background:#031c86}
.composer.live .mic::after{border-radius:50%;inset:-4px}
.msg.me .bubble{background:#031c86;color:#fff;border-radius:18px;box-shadow:0 10px 24px -14px rgba(3,28,134,.7)}
.msg.bot .bubble{background:#fff;border-radius:18px}
.avatar{width:30px;height:30px;border-radius:50%;background:#031c86;box-shadow:0 4px 12px -6px rgba(3,28,134,.6)}
.chat-avatar-d{display:block;width:12px;height:21px;background:#fff;-webkit-mask:url(/dingo-d.svg) center/contain no-repeat;mask:url(/dingo-d.svg) center/contain no-repeat}
@media (max-width:520px){.comp-plus{display:none}.composer{gap:8px}}

/* La "d" de Dingo como máscara, siempre entera dentro de su caja */
.dmark{display:block;width:100%;height:100%;background:#031c86;-webkit-mask:url(/dingo-d.svg) center/contain no-repeat;mask:url(/dingo-d.svg) center/contain no-repeat}
.bk-logo{padding:11px 17px}
.rv-logo{padding:1.4cqw 2cqw}
.md-logo{right:7%;bottom:5%;width:9%;height:auto;aspect-ratio:1;padding:1.6%;border-radius:1cqw;background:#fff;box-shadow:0 .4cqw 1cqw rgba(3,28,134,.2);box-sizing:border-box}
.md-logo .dmark{position:relative}

/* Collage de rodaje: 4 fotos iguales */
.studio-photo{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1.08}
.studio-photo>span{grid-row:auto}
.studio-photo>span:nth-child(1) img{animation:sp-kb calc(9s*var(--slow)) ease-in-out infinite alternate}
.studio-photo>span:nth-child(4) img{animation:sp-kb calc(11s*var(--slow)) ease-in-out infinite alternate-reverse}
@media (max-width:860px){.studio-photo{aspect-ratio:1/1}}

/* Ejemplos reales en video */
.vcard{flex-direction:row !important;align-items:center;gap:24px}
.vbox{position:relative;flex:none;width:min(200px,42%);aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#031c86;box-shadow:0 26px 50px -24px rgba(3,28,134,.6),inset 0 0 0 1px rgba(255,255,255,.25)}
.vbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vtag{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font-size:11.5px;color:#fff;background:rgba(3,28,134,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vcard .card-copy{margin-top:0 !important}
.v-eyebrow{margin:0 0 8px !important;font-size:12px !important;letter-spacing:.14em;text-transform:uppercase;color:var(--mid) !important}
@media (max-width:420px){.vcard{gap:16px}.vbox{width:44%}}
@media (prefers-reduced-motion:reduce){.window{transform:none}}

/* ═════════════ Ronda 4 ═════════════ */
/* Collage de rodaje compacto */
.studio-side{align-items:flex-end}
.studio-photo{width:min(360px,100%);aspect-ratio:1/1;gap:8px}
.studio-photo>span{border-radius:16px}
.studio-tags{justify-content:flex-end;max-width:420px}
@media (max-width:860px){.studio-side{align-items:flex-start}.studio-photo{width:min(300px,100%);aspect-ratio:1/1}.studio-tags{justify-content:flex-start}}
/* Logos solos, sin cajas, todos a la misma altura y opacidad plena */
.clients-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.clients-track{gap:18px;padding-right:18px}
.clients-track li{width:auto;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.clients-track li:hover{background:none;transform:none}
.clients-track img{display:block;width:auto;height:76px;max-height:none;opacity:1}
@media (max-width:560px){.clients-track{gap:10px;padding-right:10px}.clients-track li{width:auto;height:auto}.clients-track img{width:auto;height:58px}}
/* Próximamente: pedidos por WhatsApp */
.wsp{position:relative;max-width:820px;margin:clamp(48px,7vw,80px) auto 0;padding:24px 28px 24px 24px;border-radius:28px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;background:rgba(255,255,255,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),var(--shadow);overflow:hidden}
.wsp::before{content:"";position:absolute;width:320px;height:320px;left:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.22),transparent 65%);pointer-events:none}
.wsp-phone{position:relative;width:210px;border-radius:24px;overflow:hidden;background:#efeae2;box-shadow:0 24px 44px -22px rgba(3,28,134,.45),inset 0 0 0 1px rgba(0,0,0,.05)}
.wsp-top{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#075e54;color:#fff}
.wsp-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#031c86}
.wsp-av .chat-avatar-d{width:10px;height:18px}
.wsp-name{display:flex;flex-direction:column;line-height:1.15}
.wsp-name b{font-family:DingoPoppins,sans-serif;font-size:13px}
.wsp-name small{font-size:10.5px;opacity:.8}
.wsp-body{display:flex;flex-direction:column;gap:8px;padding:12px 10px 14px;min-height:150px}
.wsp-msg{max-width:86%;padding:7px 10px;border-radius:10px;font-size:12px;line-height:1.35;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;animation:wsp-in 6s infinite both}
.wsp-msg.in{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.wsp-msg.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:3px;animation-delay:.9s}
.wsp-msg.typing{display:inline-flex;gap:3px;padding:10px 12px;animation-delay:1.8s}
.wsp-msg.typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:bob 1.1s ease-in-out infinite}
.wsp-msg.typing i:nth-child(2){animation-delay:.15s}.wsp-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes wsp-in{0%{opacity:0;transform:translateY(8px) scale(.96)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.voice{display:flex;align-items:center;gap:8px;width:150px}
.wsp-play{flex:none;width:0;height:0;border-left:9px solid #54656f;border-top:6px solid transparent;border-bottom:6px solid transparent}
.wsp-wave{flex:1;display:flex;align-items:center;gap:2px;height:18px}
.wsp-wave i{flex:1;height:100%;border-radius:2px;background:#25a85a;animation:eq 1s ease-in-out infinite}
.wsp-wave i:nth-child(3n){animation-delay:-.3s}.wsp-wave i:nth-child(4n){animation-delay:-.55s}.wsp-wave i:nth-child(5n){animation-delay:-.75s}
.voice small{font-size:10px;color:#667781}
.wsp-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-family:DingoPoppins,sans-serif;font-size:12.5px;letter-spacing:.04em;color:#0f7a43;background:rgba(37,211,102,.16);box-shadow:inset 0 0 0 1px rgba(37,211,102,.4)}
.wsp-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.wsp-copy h3{margin-top:14px;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;line-height:1.12}
.wsp-copy p{margin:10px 0 18px;color:var(--muted);font-size:15.5px;max-width:440px}
@media (max-width:640px){.wsp{grid-template-columns:1fr;padding:22px;gap:22px}.wsp-phone{width:100%;max-width:260px}}

/* ═════════════ Novedad: WhatsApp ═════════════ */
.news-chip{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 12px 5px 5px;border-radius:999px;font-size:13px;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(37,211,102,.35),0 8px 20px -12px rgba(15,122,67,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .4s var(--ease)}
.news-chip:hover{transform:translateY(-2px)}
.news-chip b{font-family:DingoPoppins,sans-serif;font-weight:700;color:#0f7a43}
.nc-tag{padding:3px 9px;border-radius:999px;font-family:DingoPoppins,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#1fbf8f,#15cccc)}
.nc-sep{color:var(--muted)}
.nc-arrow{color:#0f7a43;animation:nc-bob 1.8s ease-in-out infinite}
@keyframes nc-bob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
.hero .news-chip+.hero-title{margin-top:22px}

.wsp{padding:30px 34px 30px 30px;gap:40px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(230,252,243,.62));box-shadow:0 34px 70px -36px rgba(15,122,67,.55),var(--shadow);isolation:isolate}
.wsp::before{content:"";position:absolute;inset:0;width:auto;height:auto;left:0;top:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),#25d366,#15cccc,#2f6bff,#1fbf8f,#25d366);animation:gift-spin 6s linear infinite;-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);pointer-events:none}
.wsp::after{content:"";position:absolute;width:420px;height:420px;right:-160px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.28),transparent 65%);z-index:-1;animation:drift2 14s ease-in-out infinite alternate;pointer-events:none}
.wsp-news{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-family:DingoPoppins,sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#0f7a43}
.wsp-star{width:14px;height:14px;background:#1fbf8f;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:fb-twinkle 2.4s ease-in-out infinite}
.wsp-copy{position:relative}
.wsp-pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 16px;border-radius:999px;font-size:17px;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#0f9d58,#1fbf8f 55%,#15cccc);box-shadow:0 14px 30px -12px rgba(15,157,88,.75),inset 0 1px 0 rgba(255,255,255,.35);animation:wsp-pulse 2.8s ease-in-out infinite}
.wsp-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);background-size:250% 100%;animation:sheen 3.2s ease-in-out infinite}
@keyframes wsp-pulse{0%,100%{box-shadow:0 14px 30px -12px rgba(15,157,88,.75),0 0 0 0 rgba(37,211,102,.35)}50%{box-shadow:0 14px 30px -12px rgba(15,157,88,.75),0 0 0 10px rgba(37,211,102,0)}}
.wsp-pill-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#fff}
.wsp-pill-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #fff;animation:ping 2s var(--ease) infinite}
.wsp-copy h3{margin-top:18px;font-size:clamp(26px,3.2vw,38px)}
.wsp-txt{margin:12px 0 22px;color:var(--muted);font-size:16px;max-width:460px}

.wsp-phone{width:250px;border-radius:28px;border:6px solid #0b1846;box-shadow:0 30px 60px -26px rgba(3,28,134,.6)}
.wsp-body{min-height:232px;gap:9px}
.wsp-msg{animation:none;opacity:0}
.wsp-msg.m1{animation:wsp-a 9s infinite both}
.wsp-msg.m2{animation:wsp-b 9s infinite both}
.wsp-msg.m3{animation:wsp-t 9s infinite both}
.wsp-msg.m4{animation:wsp-d 9s infinite both}
@keyframes wsp-a{0%,3%{opacity:0;transform:translateY(10px) scale(.96)}8%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes wsp-b{0%,16%{opacity:0;transform:translateY(10px) scale(.96)}21%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes wsp-t{0%,50%{opacity:0;transform:translateY(8px);max-height:0;padding-top:0;padding-bottom:0;margin-top:-9px}53%,64%{opacity:1;transform:none;max-height:40px;padding-top:10px;padding-bottom:10px;margin-top:0}67%,100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-9px}}
@keyframes wsp-d{0%,66%{opacity:0;transform:translateY(10px) scale(.96)}71%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.wsp-wave{position:relative}
.wsp-wave i{background:#8fcfa8;animation:none}
.wsp-wave i:nth-child(odd){height:60%}.wsp-wave i:nth-child(3n){height:100%}.wsp-wave i:nth-child(4n){height:40%}.wsp-wave i:nth-child(5n){height:80%}
.wsp-wave::after{content:"";position:absolute;inset:0;background:#25a85a;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/14 - 2px),transparent 0 calc(100%/14));opacity:.85;clip-path:inset(0 100% 0 0);animation:wsp-play 9s linear infinite}
.wsp-head{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#25a85a;box-shadow:0 0 0 3px rgba(37,168,90,.2);animation:wsp-headmove 9s linear infinite}
@keyframes wsp-play{0%,22%{clip-path:inset(0 100% 0 0)}48%,100%{clip-path:inset(0 0 0 0)}}
@keyframes wsp-headmove{0%,22%{left:0}48%,100%{left:100%}}
.voice{width:176px}
@media (max-width:640px){.wsp{padding:24px 22px}.wsp-phone{width:100%;max-width:280px}.wsp-pill{font-size:15px}}
.wsp-news{margin-right:14px;vertical-align:middle}
.news-chip{white-space:nowrap;max-width:100%}@media (max-width:420px){.news-chip{font-size:12px;gap:6px}.nc-arrow{display:none}.nc-tag{font-size:10px;padding:3px 7px}}

/* WhatsApp: versión delicada (sin borde girando), badge que sale del borde */
.wsp{max-width:640px;margin-top:clamp(56px,7vw,84px);padding:24px 26px 24px 22px;gap:26px;border-radius:24px;overflow:visible;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(21,160,140,.16),0 18px 40px -26px rgba(3,28,134,.35)}
.wsp::before,.wsp::after{display:none}
.wsp-copy{position:static}
.wsp-news{margin:0 0 6px;font-size:11.5px;letter-spacing:.18em;color:#2a9d74;font-family:DingoMontserrat,sans-serif;font-weight:500}
.wsp-star{width:10px;height:10px;background:#5fd3a5}
.wsp-pill{position:absolute;top:-17px;right:26px;z-index:2;padding:7px 14px 7px 12px;font-size:13.5px;gap:8px;transform:rotate(3deg);background:linear-gradient(135deg,#22b573,#3fd0a4 60%,#4dd6cf);box-shadow:0 10px 22px -10px rgba(15,157,88,.6),inset 0 1px 0 rgba(255,255,255,.35);animation:wsp-pulse2 3.2s ease-in-out infinite}
@keyframes wsp-pulse2{0%,100%{box-shadow:0 10px 22px -10px rgba(15,157,88,.6),0 0 0 0 rgba(37,211,102,.28)}50%{box-shadow:0 10px 22px -10px rgba(15,157,88,.6),0 0 0 8px rgba(37,211,102,0)}}
.wsp-pill-dot{width:7px;height:7px}
.wsp-copy h3{margin-top:4px;font-size:clamp(20px,2.2vw,25px);line-height:1.18}
.wsp-txt{margin:8px 0 16px;font-size:14.5px}
.wsp .btn{--bh:40px;padding:0 18px;font-size:14px}
.wsp-phone{width:186px;border-width:4px;border-radius:22px;box-shadow:0 18px 34px -20px rgba(3,28,134,.45)}
.wsp-top{padding:8px 10px}
.wsp-av{width:24px;height:24px}
.wsp-av .chat-avatar-d{width:9px;height:15px}
.wsp-body{min-height:196px;padding:10px 8px 12px;gap:7px}
.wsp-msg{font-size:11px;padding:6px 9px}
.voice{width:140px}
@media (max-width:640px){.wsp{padding:26px 20px 20px;gap:18px}.wsp-phone{width:100%;max-width:230px}.wsp-pill{right:18px;font-size:13px}}

/* ═════════════ Ronda 5 ═════════════ */
/* Etiquetas del estudio quietas */
.studio-tags li{animation:none}
/* Showreel más protagonista, sin texto sobre el video, botón de sonido solo ícono */
.showreel{max-width:1180px}
.sr-label{display:none}
.sr-sonido{width:44px;height:44px;padding:0;justify-content:center;gap:0;border-radius:50%;right:18px;bottom:18px}
.sr-sonido svg{width:20px;height:20px}
@media (max-width:560px){.sr-sonido{width:40px;height:40px;padding:0;right:12px;bottom:12px}}
/* Robustez en móvil: ninguna columna puede crecer más que su contenedor (Safari mide distinto) */
@media (max-width:900px){
  .freebie{grid-template-columns:minmax(0,1fr)}
  .plans,.ondemand{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){.studio-card{grid-template-columns:minmax(0,1fr)}.pillars{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.wsp{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:minmax(0,1fr)}}
.fb-copy,.studio-copy,.wsp-copy,.card-copy,.sec-head{min-width:0;overflow-wrap:break-word}
@media (max-width:480px){
  .freebie{padding:26px 20px}
  .freebie .btn,.studio-copy .btn,.hero-cta .btn{white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:var(--bh);padding-top:10px;padding-bottom:10px}
  .freebie .btn-lg{font-size:16px;padding-left:20px;padding-right:20px}
  .fb-art{height:210px}
  .t-a{left:0}
  .t-b{right:4%;top:92px}
  .fb-ticket{width:150px;height:106px;padding:14px 18px}
  .fb-ticket b{font-size:38px}
  .gift-txt{min-width:0}
  .od-prices b{font-size:20px}
}
@media (max-width:760px){.sr-play iframe{transform:scale(1.42)}}

/* ═════════════ Ronda 6: reestructura ═════════════ */
/* Hero de la productora con el showreel */
.hero-reel{margin-top:clamp(40px,6vw,64px)}
.hero-reel .showreel{max-width:1100px}
.hero .marquee{margin-top:clamp(40px,6vw,64px)}
/* Presentación del agente */
.agent-intro{padding-top:clamp(90px,13vw,170px)}
.agent-intro .sec-head h2{font-size:clamp(34px,5.6vw,66px)}
.agent-sign{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto clamp(44px,6vw,72px)}
.agent-slogan{font-family:DingoPoppins,sans-serif;font-size:clamp(44px,8vw,100px);line-height:1;letter-spacing:-.045em;color:var(--ink);margin-bottom:30px}
.agent-sign .hero-note{margin-top:16px}
.incl{padding-top:clamp(70px,10vw,120px)}
.final .hero-cta{margin-top:0}
/* Tarjeta ancha de rodajes */
.bento .wide>.ico{margin-bottom:auto}

/* Composer del demo: rectángulo redondeado que crece sin deformarse */
.composer{border-radius:24px;align-items:flex-end}
.comp-text{max-height:4.5em;overflow:hidden;align-self:center;padding:2px 0}
@media (max-width:520px){
  .composer{flex-wrap:wrap;align-items:center;padding:10px 10px 8px;gap:6px;border-radius:22px}
  .comp-text{order:-1;flex:1 1 100%;padding:2px 6px 4px;font-size:14px}
  .comp-plus{display:grid;width:36px;height:36px;margin-right:auto}
  .mic,.send{width:36px;height:36px}
}
@media (max-width:480px){.fc3,.fc4,.fc1{display:none !important}}
@media (max-width:820px){.fc2{top:-20px;right:8px;bottom:auto}.fc5{top:-20px;left:8px;right:auto}.fc3{bottom:-20px;left:8px;right:auto;top:auto}}
.hero .hero-title{font-size:clamp(40px,6.3vw,84px);margin-top:20px}.hero{padding-top:clamp(120px,16vh,160px)}.hero .hero-lead{margin-top:20px}.hero .hero-cta{margin-top:28px}
.bento .wide .brand-kit{flex:1;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}.bento .wide .brand-kit .bk-sw{width:52px;height:52px;border-radius:15px}.bento .wide .brand-kit .bk-logo{width:68px;height:68px}.bento .wide .brand-kit .bk-type{font-size:40px}@media (max-width:560px){.bento .wide .brand-kit{gap:8px}.bento .wide .brand-kit .bk-sw{width:34px;height:34px}.bento .wide .brand-kit .bk-logo{width:50px;height:50px}.bento .wide .brand-kit .bk-type{font-size:28px}}
.nowrap{white-space:nowrap}

/* ═════════════ Barrido de anchos: demo y chips ═════════════ */
/* Barra del navegador: la URL se corta con puntos suspensivos */
.win-bar{min-width:0}
.win-url{min-width:0;max-width:calc(100% - 150px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:center}
.win-url svg{display:inline-block;vertical-align:-2px;margin-right:6px}
@media (max-width:520px){.win-url{max-width:calc(100% - 64px)}}
/* Chip de identidad: siempre dentro de su caja */
.bot-body{align-items:flex-start;max-width:100%}
.chip{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;row-gap:6px}
.script,.reel-wrap{max-width:100%}
/* Burbujas legibles */
.msg{max-width:80%}
.bubble{overflow-wrap:break-word}
@media (max-width:480px){.msg{max-width:94%}.chat{padding-left:10px;padding-right:10px}.avatar{width:26px;height:26px}.msg.bot{gap:8px}}
/* Burbujas flotantes: alrededor de la ventana solo si hay lugar (≥1181px); si no, en una fila arriba de la ventana */
@media (max-width:1180px){
  .demo-stage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px}
  .demo-stage .float-chip{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;order:1;font-size:12.5px;padding:8px 12px;margin:0}
  .demo-stage .float-chip.fc1,.demo-stage .float-chip.fc4{display:none !important}
  .demo-stage .float-chip.fc2,.demo-stage .float-chip.fc3,.demo-stage .float-chip.fc5{display:flex !important}
  .demo-stage .window{order:2;flex:1 1 100%;margin-top:6px}
}
@media (max-width:480px){.demo-stage .float-chip{font-size:11.5px;padding:6px 10px;gap:6px}.demo-stage .fc-ico{width:18px;height:18px}.demo-stage .fc-ico.brand{width:26px}.demo-stage .fc-ico.brand i{width:12px;height:12px;top:3px}.demo-stage .fc-ico.brand i:nth-child(2){left:7px}.demo-stage .fc-ico.brand i:nth-child(3){left:14px}}
.ans a{overflow-wrap:anywhere}


/* Promo vigente (sale del Estudio) */
.promo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:0 auto clamp(22px,3vw,34px);max-width:860px;padding:14px 18px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:var(--shadow);font-size:15px;color:var(--text)}
.promo-strip[hidden]{display:none}
.promo-tag{font-family:DingoPoppins,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff}
.promo-strip .promo-code{font:700 14px/1 DingoPoppins,sans-serif;letter-spacing:.08em;padding:9px 14px;border-radius:999px;border:1.5px dashed var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:transform .2s var(--ease)}
.promo-strip .promo-code:hover{transform:translateY(-1px)}
.promo-strip .promo-code[data-ok]::after{content:' ✓ copiado';font-weight:500;letter-spacing:0}
.promo-hasta{color:var(--muted);font-size:13px}
@media (max-width:620px){.promo-strip{border-radius:22px}}

/* El eslogan queda como una línea chica arriba de los botones (el título de la sección es el gancho). */
.agent-slogan{font-size:clamp(18px,2vw,22px)!important;letter-spacing:-.01em!important;margin-bottom:18px!important;font-weight:600}
/* ---------- Arriba de todo: showreel de lado a lado y marcas corriendo sin márgenes ---------- */
.top-reel{position:relative;width:100%;margin:0;padding:0;background:#031c86}
.top-reel .showreel{max-width:none;width:100%;margin:0}
.top-reel .sr-play{border-radius:0;box-shadow:none;aspect-ratio:16/9;max-height:100svh}
.top-reel .sr-play::after{background:linear-gradient(180deg,rgba(3,28,134,.35) 0,rgba(3,28,134,0) 18%,rgba(3,28,134,0) 70%,rgba(3,28,134,.7))}
.clients-band{margin:0;padding:22px 0 26px;border:0;background:#031c86}
.clients-band .clients-title{margin:0 0 16px;padding:0 var(--gut);text-align:center;font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.16em}
.clients-band .clients-viewport{-webkit-mask-image:none;mask-image:none}
.clients-band .clients-track{gap:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px);animation-duration:calc(45s*var(--slow))}
.clients-band .clients-track img{height:clamp(46px,5.5vw,70px)}
.hero{padding-top:clamp(64px,10vh,110px)}
/* Gratis + novedad, ahora en la sección del agente */
.agent-chips{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 auto clamp(28px,4vw,40px);text-align:center}
.agent-chips .news-chip{margin-top:0}
/* Producciones: reel de producciones (YouTube sin cookies, arranca en silencio) y contacto para proyectos a medida */
.producciones{padding:clamp(64px,9vw,110px) 0 0}
.producciones .sec-head{text-align:center;max-width:820px;margin:0 auto}
.prod-reel{max-width:1100px;margin:clamp(28px,4vw,44px) auto 0}
.prod-cta{display:flex;justify-content:center;margin-top:28px}
/* Ícono de sonido: trazo limpio (parlante + ondas o cruz), centrado en el botón */
.sr-sonido svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Texto solo para lectores de pantalla y buscadores (la bajada del título principal) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Preguntas en dos columnas (cada columna crece sola al abrir una respuesta) */
@media (min-width:861px){.faq .wrap.narrow{max-width:1100px}.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start}}
#agente .sec-head{max-width:1100px}
.btn-wsp svg{fill:currentColor;stroke:none}
/* ---------- El estudio: título fijo, servicios que se encienden con el scroll, de lado a lado ---------- */
.servicios{--pasos:7;position:relative;height:calc(var(--pasos) * 22vh + 100vh);margin-top:clamp(56px,8vw,96px);background:radial-gradient(120% 120% at 100% 0%,#1180d0 0%,#132ea8 38%,#031c86 72%);color:#fff}
.sv-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(80px,10vh,110px) clamp(20px,5vw,72px) clamp(28px,5vh,56px);overflow:hidden}
.sv-logo{width:96px;height:auto;margin-bottom:22px}
.sv-copy h2{color:#fff;font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-.04em;margin:0 0 clamp(20px,3vh,34px)}
.sv-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sv-item{padding:8px 0 8px 18px;border-left:2px solid rgba(255,255,255,.14);opacity:.32;transition:opacity .5s var(--ease),border-color .5s var(--ease)}
.sv-item h3{margin:0;font-family:DingoPoppins,sans-serif;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em;color:#fff}
.sv-item p{margin:0;max-width:520px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .5s var(--ease)}
.sv-item.activo{opacity:1;border-left-color:#6fe7e0}
.sv-item.activo p{max-height:140px;opacity:1;margin-top:6px}
.sv-media{position:relative;height:min(68vh,640px);border-radius:24px;overflow:hidden;background:#020d55;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.sv-capa{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.sv-capa.activo{opacity:1;transform:none}
.sv-capa video,.sv-capa>img{width:100%;height:100%;object-fit:cover;display:block}
.sv-fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
.sv-fotos span{border-radius:16px;overflow:hidden}.sv-fotos img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.sv-foto-una img{filter:none}
.sv-texto,.sv-ai{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,56px);background:radial-gradient(90% 90% at 80% 20%,#1fbf8f55,transparent 60%),radial-gradient(80% 80% at 10% 90%,#2f6bff66,transparent 60%),#031c86}
.sv-texto span{font-family:DingoPoppins,sans-serif;font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:-.04em;color:#fff;opacity:.25;transition:opacity .6s var(--ease)}
.sv-texto.activo span{animation:sv-encender calc(4s*var(--slow)) var(--ease) infinite}
.sv-texto span:nth-child(2){animation-delay:1s!important}.sv-texto span:nth-child(3){animation-delay:2s!important}.sv-texto span:nth-child(4){animation-delay:3s!important}
@keyframes sv-encender{0%,30%{opacity:1}45%,100%{opacity:.25}}
.sv-ai b{font-family:DingoPoppins,sans-serif;font-size:clamp(90px,14vw,200px);line-height:.85;letter-spacing:-.06em;background:linear-gradient(120deg,#fff,#6fe7e0 60%,#2f6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-ai span{font-family:DingoPoppins,sans-serif;font-size:clamp(28px,4vw,54px);letter-spacing:-.03em;color:#fff;margin-top:6px}
.sv-ai small{margin-top:18px;font-size:14px;color:rgba(255,255,255,.7)}
/* REC: el punto rojo y el código de tiempo corriendo, como en cámara */
.rec{position:absolute;top:18px;left:20px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;font-style:italic}
.rec i{width:9px;height:9px;border-radius:50%;background:#ff2d2d;box-shadow:0 0 10px #ff2d2d;animation:rec-parpadeo 1s steps(1) infinite}
.rec b{font-weight:500;letter-spacing:.14em}
@keyframes rec-parpadeo{50%{opacity:.15}}
@media (max-width:860px){
  .sv-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:18px;padding-top:84px}
  .sv-media{height:38vh;order:-1;border-radius:18px}
  .sv-logo{display:none}
  .sv-copy h2{font-size:clamp(28px,8vw,40px);margin-bottom:12px}
  .sv-item:not(.activo){display:none}
  .sv-item{border-left:0;padding-left:0}
}
@media (prefers-reduced-motion:reduce){.sv-capa{transition:opacity .2s}.sv-texto.activo span{animation:none;opacity:1}.rec i{animation:none}}

/* Estudio v2: presentación siempre visible, avance continuo (barra que se llena) y "para tu marca" que se lee sobre el azul */
.sv-intro{margin:0 0 clamp(16px,2.6vh,28px);max-width:560px;font-size:clamp(15px,1.25vw,17px);line-height:1.55;color:rgba(255,255,255,.86)}
.sv-crear{background:linear-gradient(90deg,#9ff5ee,#ffffff 45%,#7fd8ff 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 18px rgba(111,231,224,.35))}
.sv-item{position:relative;border-left-color:rgba(255,255,255,.12)}
.sv-barra{position:absolute;left:-2px;top:0;width:2px;height:calc(var(--p,0)*100%);background:#6fe7e0;transition:height .15s linear}
.sv-item.activo{border-left-color:rgba(255,255,255,.12)}
.sv-item:not(.activo) .sv-barra{height:0}
.sv-galeria{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;padding:8px;background:#eef0f3}
.sv-galeria img{width:100%;height:100%;object-fit:cover;border-radius:12px;transform:scale(1.06);transition:transform 4s var(--ease)}
.sv-galeria.activo img{transform:none}
@media (max-width:860px){.sv-intro{font-size:14px;margin-bottom:10px}}
/* Producciones con video propio: arranca al instante */
.vplay video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Parte 2 · Agencias (marca blanca) */
.agencias{padding:clamp(80px,11vw,140px) 0 clamp(20px,4vw,40px)}
.ag-head{max-width:820px;margin:0 0 clamp(32px,5vw,56px);text-align:left}
.ag-head h2{font-size:clamp(36px,5.4vw,66px);line-height:1.02;letter-spacing:-.04em;margin:0 0 18px}
.ag-head .sec-lead{margin:0;text-align:left;max-width:640px}
.ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ag-item{padding:26px 24px;border-radius:22px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 10px 30px -18px rgba(3,28,134,.35);text-align:left}
.ag-item h3{margin:0 0 8px;font-family:DingoPoppins,sans-serif;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.ag-item p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.ag-cta{justify-content:flex-start;margin-top:30px}
@media (max-width:860px){.ag-grid{grid-template-columns:1fr}}
/* Marketing de contenidos: dos piezas reales en teléfonos */
.sv-telefonos{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);background:radial-gradient(80% 80% at 70% 20%,#1fbf8f40,transparent 60%),#031c86}
.sv-telefonos .tel{position:relative;height:86%;aspect-ratio:9/19;border-radius:28px;padding:7px;background:#0b0f2a;box-shadow:0 30px 60px -20px #000c,inset 0 0 0 2px #2b3566;overflow:hidden;transform:rotate(-3deg)}
.sv-telefonos .tel-2{transform:rotate(3deg) translateY(18px)}
.sv-telefonos .tel::before{content:"";position:absolute;top:10px;left:50%;width:34%;height:14px;border-radius:10px;background:#0b0f2a;transform:translateX(-50%);z-index:2}
.sv-telefonos video{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block}
/* El reel de producciones dentro de Partner audiovisual */
.ag-reel{max-width:none;margin:0 0 clamp(28px,4vw,44px)}
/* Recomendá y ganá créditos */
.referidos{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 clamp(28px,4vw,40px);padding:24px 28px;border-radius:24px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 12px 30px -18px rgba(3,28,134,.4)}
.referidos h3{margin:0 0 6px;font-family:DingoPoppins,sans-serif;font-size:clamp(20px,2.2vw,26px);color:var(--ink);letter-spacing:-.02em}
.referidos p{margin:0;color:var(--muted);max-width:620px}

/* Marketing de contenidos v2: 4 reels en teléfonos sobre fondo claro */
.sv-telefonos{background:linear-gradient(160deg,#f4f7fd,#e3ebfa)!important;gap:clamp(8px,1.6vw,20px)}
.sv-telefonos .tel{height:80%;transform:rotate(-2deg);box-shadow:0 26px 50px -22px rgba(3,28,134,.55),inset 0 0 0 2px #2b3566}
.sv-telefonos .tel-alt{transform:rotate(2deg) translateY(16px)}
@media (max-width:860px){.sv-telefonos .tel:nth-child(n+3){display:none}}
/* Producción fotográfica: 3 columnas que suben y bajan a distinta velocidad */
.sv-parallax{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 8px;background:#eef0f3;overflow:hidden}
.px-col{display:flex;flex-direction:column;gap:8px;animation:px-sube calc(26s*var(--slow)) linear infinite}
.px-col:nth-child(2){animation-name:px-baja;animation-duration:calc(34s*var(--slow))}
.px-col:nth-child(3){animation-duration:calc(20s*var(--slow))}
.px-col img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
@keyframes px-sube{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes px-baja{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.px-col{animation:none}}
/* Botón "Gratis": sobrio, sin borde de colores ni brillo animado */
.gift{background:#fff!important;box-shadow:0 10px 30px -16px rgba(3,28,134,.45),inset 0 0 0 1px #d5ddf3!important}
.gift::after,.gift::before,.gift-tag::after{display:none!important;animation:none!important}
.gift-tag{background:var(--ink)!important;box-shadow:none!important}
.gift-plus{color:var(--muted)!important}
/* Teléfonos proporcionados: no se encogen */
.sv-telefonos .tel{flex:0 0 auto;height:auto!important;width:min(29cqw,calc(80cqh * 9 / 19.5));aspect-ratio:9/19.5;max-height:none}
.sv-telefonos .tel video{object-fit:cover}
@media (max-width:860px){.sv-telefonos .tel{width:min(30cqw,calc(80cqh * 9 / 19.5))}}
.sv-telefonos{container-type:size}
/* Agente Dingo: título protagonista */
.agente-titulo{font-size:clamp(3.2rem,11vw,9rem)!important;line-height:.95!important;text-transform:uppercase;letter-spacing:-.02em}
/* CTA del agente al final de la explicación */
.agent-cta{padding:clamp(40px,6vw,80px) 0}
.agent-cta .agent-chips{display:flex;flex-direction:column;align-items:center;gap:12px}
.agent-cta .agent-sign{text-align:center;margin-top:26px}
.agent-cta .hero-cta{justify-content:center}
/* Títulos en una sola línea */
h2.una-linea{white-space:nowrap;font-size:clamp(1.25rem,5.4vw,3.6rem)!important}
/* Mobile: el reel arranca debajo del menú */
@media (max-width:860px){.top-reel{padding-top:84px}}
/* Mobile: servicios compactos, todo entra en la pantalla */
@media (max-width:860px){
  .sv-pin{padding:82px 18px 18px;gap:14px;grid-template-rows:auto auto;align-content:start}
  .sv-media{height:min(36svh,300px)}
  .sv-copy h2{font-size:clamp(24px,7vw,30px);line-height:1.05;margin-bottom:8px}
  .sv-copy h2 br{display:none}
  .sv-intro{font-size:13.5px!important;line-height:1.45;margin-bottom:8px!important}
  .sv-lista{gap:0}
  .sv-item{padding:4px 0}
  .sv-item h3{font-size:19px}
  .sv-item.activo p{max-height:none;font-size:14.5px;line-height:1.45}
}
/* Estrellitas de IA en el título del agente */
.ag-envoltura{position:relative;display:inline-block;padding:0 .18em}
.chispas{position:absolute;inset:0;pointer-events:none}
.chispas i{position:absolute;display:block;aspect-ratio:1;background:linear-gradient(135deg,#9ff5ee,#2fb8e6 55%,#2f6bff);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:chispa 2.6s var(--ease,ease) infinite}
.chispas .ch1{width:.42em;top:-.32em;right:-.22em}
.chispas .ch2{width:.22em;top:.02em;right:-.42em;animation-delay:.6s}
.chispas .ch3{width:.2em;bottom:-.12em;left:-.26em;animation-delay:1.2s}
.chispas .ch4{width:.14em;top:-.22em;left:.1em;animation-delay:1.8s}
@keyframes chispa{0%,100%{transform:scale(.55) rotate(0);opacity:.55}50%{transform:scale(1) rotate(90deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.chispas i{animation:none}}
@media (max-width:860px){.chispas .ch1{right:-.12em;top:-.4em}.chispas .ch2{right:-.2em;top:-.02em}}
@media (max-width:860px){.sv-media{height:clamp(200px,calc(100svh - 430px),440px)!important}}
.agente-titulo{white-space:nowrap}
@media (max-width:860px){.agente-titulo{font-size:10.4vw!important}}
@media (max-width:860px){.agente-titulo{font-size:11.6vw!important}.ag-envoltura{padding:0 .1em}.chispas .ch1{width:.5em}.chispas .ch2{width:.28em}.chispas .ch3{width:.26em}}
/* Teléfonos: proporción cercana al video (9:16) y el video siempre dentro del marco */
.sv-telefonos .tel{aspect-ratio:9/17.6;width:min(28cqw,calc(82cqh * 9 / 17.6))!important;height:auto!important;padding:0!important;overflow:hidden;isolation:isolate}
.sv-telefonos .tel video{position:absolute;inset:6px;width:calc(100% - 12px)!important;height:calc(100% - 12px)!important;object-fit:cover;border-radius:22px;clip-path:inset(0 round 22px)}
.sv-telefonos .tel::before{top:12px;height:12px;width:30%}
@media (max-width:860px){.sv-telefonos .tel{width:min(29cqw,calc(80cqh * 9 / 17.6))!important}.sv-telefonos .tel video{inset:4px;width:calc(100% - 8px)!important;height:calc(100% - 8px)!important;border-radius:16px;clip-path:inset(0 round 16px)}}
/* Partner de agencias: todo centrado */
.ag-head{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.ag-head .sec-lead{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.ag-item{text-align:center}
.ag-cta,.hero-cta{justify-content:center!important}
/* WhatsApp en el verde de Dingo */
.btn-wsp{background:var(--green)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 14px 30px -14px rgba(31,191,143,.75)!important}
.btn-wsp:hover{background:#18a87d!important;color:#fff!important}
/* Agente: etiqueta Nuevo sobre el título */
.agent-intro .sec-head{display:flex;flex-direction:column;align-items:center}
.ag-nuevo{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;font-family:DingoPoppins,sans-serif;font-weight:700;font-size:clamp(13px,1.2vw,16px);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,var(--teal),var(--blue));box-shadow:0 10px 26px -12px rgba(47,107,255,.8);margin-bottom:14px}
/* La demo va pegada al título del agente; los pilares debajo del chat */
.agent-intro{padding-bottom:clamp(16px,3vw,32px)!important}
.demo-sin-titulo{padding-top:clamp(8px,2vw,24px)!important}
.agent-pilares{padding:clamp(24px,4vw,56px) 0 0}
.agent-pilares .pillars{margin-top:0}
/* Gratis: bloque más grande */
.agent-gift{gap:clamp(14px,1.6vw,22px)!important;padding:12px 14px 12px 12px!important}
.agent-gift .gift-tag{padding:12px 20px!important;font-size:clamp(14px,1.3vw,17px)!important;gap:8px}
.agent-gift .gift-tag svg{width:19px;height:19px}
.agent-gift .gift-txt{font-size:clamp(15px,1.5vw,20px)!important;line-height:1.3}
.agent-gift .gift-arrow{width:48px;height:48px}
.agent-gift .gift-arrow svg{width:20px;height:20px}
@media (max-width:860px){.agent-gift{border-radius:26px!important;padding:12px!important}.agent-gift .gift-txt{font-size:16px!important}}
/* Stickers de Dingo animados (motion): logo oficial en SVG + personajes; arrancan al entrar en pantalla */
#dingo,#agencias,#agente,#como,#incluye,#que-pedir,#precios,#preguntas,.final,.final-inner,.ag-reel,.demo-stage{position:relative}
.stk{position:absolute;z-index:6;pointer-events:none;user-select:none;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.stk svg{display:block;width:100%;height:auto;overflow:visible}
.stk .lg path{fill:#031c86}
.stk *{animation-play-state:paused}
.stk.vivo *{animation-play-state:running}
.stk image,.stk path,.stk g,.stk rect{transform-box:fill-box}
/* Ubicación: esquinas de videos y entre secciones; tamaños distintos */
.stk-glitch{width:clamp(170px,18vw,260px);right:-34px;top:-56px}
.stk-gato{width:clamp(150px,14vw,210px);right:6%;top:24px}
.stk-camaleon{width:clamp(160px,16vw,230px);right:4%;top:-8px}
.stk-velocidad{width:clamp(160px,16vw,230px);left:5%;top:34px}
.stk-perro{width:clamp(120px,11vw,170px);left:6%;top:14px}
.stk-corona{width:clamp(80px,7vw,110px);left:4%;top:-70px}

/* Camaleón: saca la lengua, se come el punto de la i y el punto vuelve */
.stk-camaleon .lengua{fill:none;stroke:#ff4f8b;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:cm-lengua 6s infinite}
.stk-camaleon .lg-pi{transform-origin:center;animation:cm-punto 6s infinite}
.stk-camaleon image{transform-origin:40% 30%;animation:cm-trago 6s infinite}
@keyframes cm-lengua{0%,18%{stroke-dashoffset:100}23%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.6,0,.4,1)}31%,100%{stroke-dashoffset:100}}
@keyframes cm-punto{0%,23%{transform:translate(0,0) scale(1);opacity:1}31%{transform:translate(560px,-190px) scale(.25);opacity:1}32%,76%{transform:translate(560px,-190px) scale(0);opacity:0}77%{transform:translate(0,0) scale(0);opacity:1}83%{transform:scale(1.25)}88%,100%{transform:scale(1)}}
@keyframes cm-trago{0%,31%,40%,100%{transform:scale(1)}34%{transform:scale(1.04) rotate(-1.5deg)}37%{transform:scale(.99)}}

/* Gato y perro: se asoman desde atrás del logo */
.stk-gato .pj{animation:pj-asoma 6.5s cubic-bezier(.34,1.4,.5,1) infinite}
.stk-perro .pj{animation:pj-asoma 7s cubic-bezier(.34,1.4,.5,1) infinite 1.2s}
@keyframes pj-asoma{0%,8%{transform:translateY(110%)}22%,62%{transform:translateY(0)}36%{transform:translateY(0) rotate(-4deg)}48%{transform:translateY(0) rotate(3deg)}74%,100%{transform:translateY(110%)}}

/* Glitch: azul limpio, ráfaga de interferencia y vuelve al azul */
.stk-glitch .gl-c path{fill:#00d9ff}.stk-glitch .gl-m path{fill:#ff2bd6}
.stk-glitch .gl-c,.stk-glitch .gl-m{opacity:0}
.stk-glitch .gl-c{animation:gl-c 4s steps(1,end) infinite}
.stk-glitch .gl-m{animation:gl-m 4s steps(1,end) infinite}
.stk-glitch .gl-b{animation:gl-b 4s steps(1,end) infinite}
@keyframes gl-c{0%,55%,78%,100%{opacity:0;transform:none}57%{opacity:.9;transform:translate(-7px,1px)}61%{opacity:.9;transform:translate(5px,-2px)}66%{opacity:.9;transform:translate(-3px,0)}71%{opacity:.8;transform:translate(8px,1px)}75%{opacity:.6;transform:translate(-2px,0)}}
@keyframes gl-m{0%,55%,78%,100%{opacity:0;transform:none}57%{opacity:.9;transform:translate(7px,-1px)}61%{opacity:.9;transform:translate(-5px,2px)}66%{opacity:.9;transform:translate(4px,0)}71%{opacity:.8;transform:translate(-8px,-1px)}75%{opacity:.6;transform:translate(2px,0)}}
@keyframes gl-b{0%,55%,78%,100%{transform:none;clip-path:none}58%{transform:translate(3px,0);clip-path:inset(0 0 55% 0)}62%{transform:translate(-4px,0);clip-path:inset(30% 0 20% 0)}67%{transform:translate(2px,0) skewX(-6deg);clip-path:inset(60% 0 0 0)}72%{transform:translate(-2px,0);clip-path:inset(10% 0 45% 0)}76%{transform:none;clip-path:none}}

/* Velocidad: el logo entra limpio y después aparecen las líneas */
.stk-velocidad .vl{fill:#031c86}
.stk-velocidad .vlogo{animation:vl-entra 5s cubic-bezier(.16,1,.3,1) infinite}
.stk-velocidad .vls{transform-origin:right center;animation:vl-lineas 5s ease-out infinite}
@keyframes vl-entra{0%{transform:translateX(-140px) skewX(-14deg);opacity:0}14%{transform:translateX(10px) skewX(4deg);opacity:1}22%,80%{transform:translateX(0) skewX(-6deg);opacity:1}92%,100%{transform:translateX(0) skewX(-6deg);opacity:0}}
@keyframes vl-lineas{0%,18%{transform:scaleX(0);opacity:0}28%{transform:scaleX(1);opacity:1}44%{transform:scaleX(.55) translateX(-20px);opacity:.85}60%,100%{transform:scaleX(0);opacity:0}}

/* Corona: se dibuja como un grafiti y cae una gota del punto de la d; a veces un leve movimiento */
.stk-corona .corona{animation:cr-dibuja 7s steps(9,end) infinite}
.stk-corona .gota{fill:#031c86;transform-origin:50% 0;animation:cr-gota 7s ease-in infinite}
.stk-corona svg{transform-origin:50% 100%;animation:cr-mueve 7s ease-in-out infinite}
@keyframes cr-dibuja{0%,4%{clip-path:inset(0 100% 0 0)}22%,88%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes cr-gota{0%,30%{transform:scaleY(0);opacity:1}40%{transform:scaleY(1.2)}48%{transform:translateY(0) scaleY(1);opacity:1}62%{transform:translateY(260px) scaleY(1.3);opacity:0}100%{transform:translateY(260px);opacity:0}}
@keyframes cr-mueve{0%,70%,100%{transform:none}74%{transform:rotate(-4deg)}78%{transform:rotate(2deg)}82%{transform:none}}

@media (max-width:860px){
  .stk-glitch{width:150px;right:-6px;top:-44px}
  .stk-gato{width:150px;right:4%;top:-74px}
  .stk-corona{width:52px;left:6%}
  .stk-camaleon,.stk-velocidad,.stk-perro{display:none}
}
@media (prefers-reduced-motion:reduce){.stk *{animation:none!important}}
/* Stickers originales (con su borde blanco, sin sombra) mientras se terminan las animaciones */
.stk img{display:block;width:100%;height:auto}
.stk-corona{width:clamp(70px,6vw,96px)}
/* Stickers animados en After Effects (WebP con transparencia): tamaños según cada composición */
.stk-glitch{width:clamp(200px,20vw,290px)!important;right:-46px!important;top:-74px!important}
.stk-gato{width:clamp(190px,18vw,260px)!important}
.stk-perro{width:clamp(170px,16vw,230px)!important}
.stk-camaleon{width:clamp(200px,19vw,270px)!important}
.stk-velocidad{width:clamp(200px,20vw,290px)!important}
.stk-corona{width:clamp(110px,10vw,150px)!important}
@media (max-width:860px){.stk-glitch{width:170px!important;right:-10px!important;top:-56px!important}.stk-gato{width:170px!important}.stk-corona{width:96px!important}}
.stk-perro{left:auto!important;right:6%!important;top:-30px!important}
.stk-corona{width:clamp(130px,12vw,170px)!important;left:7%!important;top:-150px!important}
@media (max-width:860px){.stk-corona{width:100px!important;top:-90px!important;left:4%!important}}
@media (max-width:860px){.stk-gato,.stk-corona{display:none!important}.stk-glitch{width:130px!important;right:-6px!important;top:-26px!important}}
/* glitch: 25% más chico, inclinado, asomando por detrás del reel */
.ag-reel .sr-play{position:relative;z-index:2}
.stk-glitch{z-index:1!important;width:clamp(150px,15vw,218px)!important;right:-18px!important;top:-112px!important}
.stk-glitch img{transform:rotate(-10deg);transform-origin:50% 60%}
@media (max-width:860px){.stk-glitch{width:128px!important;right:-4px!important;top:-74px!important}}
@media (max-width:560px){.stk-glitch{width:98px!important;right:0!important;top:-68px!important}}
/* servicios en celular: aire entre la barra y el texto */
@media (max-width:860px){.sv-pin{padding-left:22px!important;padding-right:22px!important}.sv-item{padding:4px 0 4px 16px!important}}
/* Agencias: título → cuadros del servicio → video → botones */
.ag-grid+.ag-reel{margin-top:clamp(28px,4vw,44px)!important}
.ag-reel+.ag-cta{margin-top:clamp(18px,3vw,28px)}

/* Idioma ES / EN: dos pastillas chicas en la barra, la activa resaltada (misma estética que el portal). */
.lang-switch{appearance:none;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;height:30px;padding:3px;margin-left:auto;border:0;border-radius:999px;background:rgba(244,246,252,.6);box-shadow:inset 0 0 0 1px rgba(3,28,134,.12);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lang-switch+.btn-nav{margin-left:0}
/* La píldora blanca se desliza al idioma elegido, con la misma forma que el botón «Entrar» */
.lang-switch::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#fff;box-shadow:0 1px 4px -1px rgba(3,28,134,.2);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lang-switch.en::before{transform:translateX(100%)}
.lang-switch span{position:relative;z-index:1;min-width:26px;padding:0 3px;text-align:center;color:#475785;font:600 10.5px/24px DingoMontserrat,sans-serif;letter-spacing:.04em;transition:color .25s}
.lang-switch span[data-on=true]{color:#031c86}
.lang-switch:focus-visible{outline:2px solid #1180d0;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.lang-switch:hover{box-shadow:inset 0 0 0 1px #1180d0}}
.nav-inner:has(.lang-switch){gap:12px}
@media (prefers-reduced-motion:reduce){.lang-switch::before{transition:none}}
/* Mientras se aplica el inglés no se ve el español (con respaldo: aparece igual al rato). */
html.i18n-wait body{visibility:hidden;animation:i18n-ver 0s 1.2s forwards}
@keyframes i18n-ver{to{visibility:visible}}
html[lang=en] .rv-btn::after{content:"Approved ✓"}
html[lang=en] .md-pal::after{content:"Palette & type"}
html[lang=en] .promo-code[data-ok]::after{content:' ✓ copied'}
/* Inglés: montos con prefijo "ARS $" sin cortarse. */
html[lang=en] .price .cur{white-space:nowrap;margin-right:.12em}
html[lang=en] .fb-ticket b{white-space:nowrap;font-size:28px;letter-spacing:-.02em}
html[lang=en] .price{flex-wrap:wrap;row-gap:4px;font-size:clamp(30px,3vw,38px)}
html[lang=en] .od-prices{flex-wrap:wrap;row-gap:12px}
html[lang=en] .od-prices b{white-space:nowrap}