/* ===== Anuncio animado de pantalla (renderAd) — 4 estilos, todo en cqw ===== */
.ad{position:relative;width:100%;height:100%;overflow:hidden;container-type:inline-size;--d:6s;--ac:#FF7A3E;isolation:isolate;font-family:var(--display)}
.ad *{animation-play-state:paused}.ad.on *,.ad.on{animation-play-state:running}
.ad.run{animation:adFade var(--d) linear both}
@keyframes adFade{0%{opacity:0}3%{opacity:1}91%{opacity:1}100%{opacity:0}}
.ad-bg,.ad-bg i{position:absolute;display:block}.ad-bg{inset:0}
.ad-line{position:absolute;left:7cqw;right:30cqw;top:50%;transform:translateY(-50%);font-weight:800;line-height:.9;letter-spacing:-.045em;font-size:calc(var(--fs,12)*1cqw);z-index:3}
.ad.v .ad-line{right:8cqw;left:8cqw;top:48%}
.ad-line .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .12em;margin:-.04em 0 -.12em}
.ad-line .c{display:inline-block;transform:translateY(118%) rotate(7deg)}
.ad.run .ad-line .c{animation:adCh .75s var(--ease) both;animation-delay:calc(.25s + var(--i)*34ms)}
@keyframes adCh{to{transform:none}}
.ad-name{position:absolute;left:7cqw;bottom:5.2cqw;font:500 2cqw/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;z-index:3;opacity:0}
.ad.run .ad-name{animation:adUp .7s 1.1s var(--ease) both}
.ad-cta{position:absolute;right:7cqw;bottom:5.2cqw;font:700 2.5cqw/1 var(--display);z-index:3;opacity:0}
.ad.run .ad-cta{animation:adUp .7s 1.7s var(--ease) both}
.ad-offer{position:absolute;right:6cqw;top:6.5cqw;width:19cqw;height:19cqw;z-index:4;display:grid;place-items:center;text-align:center;opacity:0}
.ad-offer span{font:800 2.5cqw/1.05 var(--display);letter-spacing:-.02em;padding:0 1.2cqw;position:relative;z-index:2}
.ad.run .ad-offer{animation:adStamp .8s 1.35s var(--ease) both}
.ad.v .ad-offer{width:30cqw;height:30cqw;top:7cqw;right:7cqw}.ad.v .ad-offer span{font-size:4.4cqw}
.ad.v .ad-name{font-size:3.4cqw;left:8cqw;bottom:8cqw}.ad.v .ad-cta{font-size:4.2cqw;right:8cqw;bottom:8cqw}
@keyframes adUp{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
@keyframes adStamp{0%{opacity:0;transform:scale(2.6) rotate(-30deg)}60%{opacity:1;transform:scale(.92) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
@keyframes adPop{0%{transform:scale(0)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes adBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4cqw)}}
@keyframes adGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* SOL — cálido */
.ad-sol{background:linear-gradient(135deg,#FF7A3E,#ff4d5a);color:#121110}
.ad-sol .ad-bg i:nth-child(1){width:64cqw;height:64cqw;border-radius:50%;background:#F6EBDD;right:-16cqw;top:-10cqw;transform:scale(0)}
.ad-sol.run .ad-bg i:nth-child(1){animation:adPop 1s .05s var(--ease) both}
.ad-sol .ad-bg i:nth-child(2){width:96cqw;height:96cqw;border-radius:50%;border:1cqw solid rgba(18,17,16,.16);right:-34cqw;bottom:-52cqw;transform:scale(0)}
.ad-sol.run .ad-bg i:nth-child(2){animation:adPop 1.2s .25s var(--ease) both}
.ad-sol .ad-bg i:nth-child(3){width:8cqw;height:8cqw;border-radius:50%;background:#FFC400;left:46cqw;top:7cqw;transform:scale(0)}
.ad-sol.run .ad-bg i:nth-child(3){animation:adPop .7s .8s var(--ease) both,adBob 2.4s 1.6s ease-in-out infinite}
.ad-sol .ad-bg i:nth-child(4){left:0;right:0;bottom:0;height:3.2cqw;background:#121110;transform-origin:0 50%;transform:scaleX(0)}
.ad-sol.run .ad-bg i:nth-child(4){animation:adGrow 1s .5s var(--ease) both}
.ad-sol .ad-name{background:#121110;color:#F6EBDD;padding:1.1cqw 2cqw;border-radius:99px;bottom:7.4cqw}
.ad-sol .ad-offer{background:#FFC400;border-radius:50%;color:#121110;box-shadow:0 1cqw 0 rgba(18,17,16,.9)}
.ad-sol .ad-cta{bottom:7.4cqw;color:#121110}

/* NEON */
.ad-neon{background:#0a0a14;color:#fff;--ac:#7CC242}
.ad-neon .ad-bg i:nth-child(1){inset:0;background-image:linear-gradient(rgba(124,194,66,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(124,194,66,.2) 1px,transparent 1px);background-size:6cqw 6cqw;animation:adGridMove 6s linear infinite;transform:perspective(60cqw) rotateX(52deg) translateY(10cqw) scale(2);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent 5%,#000 60%);mask-image:linear-gradient(transparent 5%,#000 60%)}
@keyframes adGridMove{to{background-position:0 6cqw}}
.ad-neon .ad-bg i:nth-child(2){left:-5cqw;right:-5cqw;height:16cqw;background:linear-gradient(transparent,rgba(124,194,66,.22),transparent);top:-16cqw;animation:adScan 3.2s linear infinite}
@keyframes adScan{to{top:62cqw}}
.ad-neon .ad-bg i:nth-child(3){width:54cqw;height:54cqw;border-radius:50%;border:.8cqw solid #ff2d95;box-shadow:0 0 3cqw #ff2d95,inset 0 0 3cqw #ff2d95;right:-12cqw;top:2cqw;transform:scale(0)}
.ad-neon.run .ad-bg i:nth-child(3){animation:adPop 1s .2s var(--ease) both}
.ad-neon .ad-line{text-shadow:0 0 1cqw rgba(124,194,66,.9),0 0 3.2cqw rgba(124,194,66,.8)}
.ad-neon.run .ad-line .c{animation:adCh .75s var(--ease) both,adFlick 5s 1.4s linear infinite;animation-delay:calc(.25s + var(--i)*34ms),calc(1.4s + var(--i)*40ms)}
@keyframes adFlick{0%,92%,100%{opacity:1}94%{opacity:.35}96%{opacity:1}98%{opacity:.6}}
.ad-neon .ad-name{color:#7CC242;border:1px solid #7CC242;padding:1cqw 2cqw;border-radius:6px;text-shadow:0 0 1cqw #7CC242;box-shadow:0 0 1.6cqw rgba(124,194,66,.5)}
.ad-neon .ad-offer{border:.6cqw solid #ff2d95;border-radius:50%;color:#ff8ac6;text-shadow:0 0 1cqw #ff2d95;box-shadow:0 0 2.4cqw #ff2d95,inset 0 0 2cqw rgba(255,45,149,.6)}
.ad-neon .ad-cta{color:#7CC242;text-shadow:0 0 1cqw #7CC242}

/* RETRO */
.ad-retro{background:#F6EBDD;color:#121110}
.ad-retro .ad-bg i:nth-child(1){inset:-80%;background:repeating-conic-gradient(from 0deg at 76% 40%,#FF7A3E 0 7deg,#F6EBDD 7deg 14deg);animation:adSpin 40s linear infinite;opacity:.95}
@keyframes adSpin{to{transform:rotate(360deg)}}
.ad-retro .ad-bg i:nth-child(2){left:0;right:0;bottom:0;height:9cqw;background:#121110;transform-origin:0 50%;transform:scaleX(0)}
.ad-retro.run .ad-bg i:nth-child(2){animation:adGrow .8s .3s var(--ease) both}
.ad-retro .ad-bg i:nth-child(3){width:13cqw;height:13cqw;background:#FFC400;border:.6cqw solid #121110;left:56cqw;bottom:14cqw;border-radius:2cqw;transform:rotate(12deg) scale(0)}
.ad-retro.run .ad-bg i:nth-child(3){animation:adPopR .7s .9s var(--ease) both}
@keyframes adPopR{to{transform:rotate(12deg) scale(1)}}
.ad-retro .ad-line{text-shadow:.7cqw .7cqw 0 #F6EBDD,1.4cqw 1.4cqw 0 #121110;color:#FF4D2E;-webkit-text-stroke:.5cqw #121110;font-weight:800}
.ad-retro .ad-line .c{transform:translateX(-60%) translateY(118%) rotate(-10deg)}
.ad-retro .ad-name{color:#F6EBDD;bottom:2.6cqw;font-size:2.4cqw}
.ad-retro .ad-cta{color:#FFC400;bottom:2.4cqw}
.ad-retro .ad-offer::before,.ad-retro .ad-offer::after{content:"";position:absolute;inset:0;background:#FFC400;border:.6cqw solid #121110}
.ad-retro .ad-offer::after{transform:rotate(45deg)}
.ad-retro .ad-offer::before{transform:rotate(0)}

/* MINIMAL */
.ad-minimal{background:#f3f0ea;color:#121110}
.ad-minimal .ad-bg i:nth-child(1){width:3cqw;height:3cqw;border-radius:50%;background:var(--ac);left:7cqw;top:7cqw;transform:scale(0)}
.ad-minimal.run .ad-bg i:nth-child(1){animation:adPop .6s .2s var(--ease) both}
.ad-minimal .ad-bg i:nth-child(2){width:.25cqw;top:0;bottom:0;right:26cqw;background:rgba(18,17,16,.14);transform-origin:50% 0;transform:scaleY(0)}
.ad-minimal.run .ad-bg i:nth-child(2){animation:adGrowY 1.1s .3s var(--ease) both}
@keyframes adGrowY{to{transform:scaleY(1)}}
.ad-minimal .ad-bg i:nth-child(3){width:30cqw;height:30cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--ac));right:-6cqw;bottom:-8cqw;opacity:.9;transform:scale(0)}
.ad-minimal.run .ad-bg i:nth-child(3){animation:adPop 1.2s .5s var(--ease) both}
.ad-minimal .ad-line{font-weight:600;letter-spacing:-.05em}
.ad-minimal .ad-line::after{content:"";display:block;height:.7cqw;width:0;background:var(--ac);margin-top:1.8cqw}
.ad-minimal.run .ad-line::after{animation:adW 1s .9s var(--ease) both}
@keyframes adW{to{width:22cqw}}
.ad-minimal .ad-name{left:12cqw;top:6.4cqw;bottom:auto}
.ad-minimal .ad-offer{width:auto;height:auto;right:30cqw;top:auto;bottom:5cqw;display:block}
.ad-minimal .ad-offer span{font:500 2.2cqw/1.2 var(--mono);letter-spacing:.06em;padding:0;text-transform:uppercase}
.ad-minimal .ad-cta{display:none}
.ad-minimal.v .ad-name{top:8cqw;left:14cqw}.ad-minimal.v .ad-offer{right:auto;left:8cqw;bottom:8cqw}

/* ===== «Salto de pantalla» sobre foto real ===== */
.bo-stage{position:relative;width:100%;aspect-ratio:var(--ar,1.758);overflow:hidden;border-radius:clamp(14px,2vw,28px);background:#000;container-type:inline-size;isolation:isolate;--d:9s}
.bo-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bo-tv{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#000;z-index:1;box-shadow:0 0 0 2px #000}
.bo-tv .ad{--d:9s}
.bo-stage .bo-cv{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.bo-stage.before .bo-ov,.bo-stage.before .bo-tv,.bo-stage.before .bo-cv{display:none}
.bo-ov{position:absolute;inset:0;pointer-events:none;z-index:5}
.bo-ov>*{position:absolute;opacity:0}
.bo-glow{left:var(--tx);top:var(--ty);width:110%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,var(--glow,rgba(255,150,80,.6)),transparent 70%);mix-blend-mode:screen;z-index:2}
.bo-stage.run .bo-glow{animation:boGlow var(--d) ease-out both}
@keyframes boGlow{0%,20%{opacity:0}28%{opacity:1}40%{opacity:.45}75%{opacity:.4}100%{opacity:0}}
.bo-ring{left:var(--tx);top:var(--ty);width:9cqw;height:9cqw;border:.5cqw solid var(--ring,#FFC400);border-radius:50%;translate:-50% -50%;z-index:4}
.bo-stage.run .bo-ring{animation:boRing 1.4s calc(var(--d)*.235) ease-out both}
@keyframes boRing{0%{opacity:.95;scale:0}100%{opacity:0;scale:9}}
.bo-ring.r2{border-width:.25cqw}.bo-stage.run .bo-ring.r2{animation-delay:calc(var(--d)*.235 + .18s)}
.bo-obj{left:var(--tx);top:var(--ty);width:var(--ow,16cqw);z-index:8}
.bo-stage.run .bo-obj{animation:boObj var(--d) both}
.bo-obj svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 1.6cqw 1.4cqw rgba(0,0,0,.55));animation:boBob 3.2s ease-in-out infinite}
@keyframes boBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-1.1cqw) rotate(1.5deg)}}
@keyframes boObj{
 0%,21%{left:var(--tx);top:var(--ty);transform:translate(-50%,-50%) scale(.1) rotate(-24deg);opacity:0}
 24%{opacity:1}
 34%{left:var(--ox);top:var(--oy);transform:translate(-50%,-50%) scale(1.16) rotate(9deg);opacity:1}
 40%{transform:translate(-50%,-50%) scale(.95) rotate(-3deg)}
 46%,89%{left:var(--ox);top:var(--oy);transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
 100%{left:var(--ox);top:var(--oy);transform:translate(-50%,-50%) scale(1) rotate(0);opacity:0}}
.bo-sh{left:var(--ox);top:calc(var(--oy) + var(--sh,12cqw));width:15cqw;height:2.6cqw;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);z-index:3}
.bo-stage.run .bo-sh{animation:boSh var(--d) both}
@keyframes boSh{0%,30%{opacity:0;transform:translate(-50%,-50%) scale(.2)}38%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.bo-word{left:var(--wx);top:var(--wy);font-weight:800;font-size:var(--wf,9.4cqw);line-height:.85;letter-spacing:-.05em;color:var(--wc,#F6EBDD);white-space:nowrap;z-index:9;text-shadow:0 .45cqw 0 var(--w1),0 .9cqw 0 var(--w2),0 1.35cqw 0 var(--w3),0 3cqw 3.4cqw rgba(0,0,0,.6);transform-origin:50% 100%}
.bo-stage.run .bo-word{animation:boWord var(--d) both}
@keyframes boWord{
 0%,30%{opacity:0;transform:translate(0,0) perspective(60cqw) rotateX(60deg) rotateZ(-6deg) scale(.3);filter:blur(1cqw)}
 38%{opacity:1;transform:translate(0,0) perspective(60cqw) rotateX(-8deg) rotateZ(-6deg) scale(1.12);filter:none}
 44%,88%{opacity:1;transform:translate(0,0) perspective(60cqw) rotateX(0) rotateZ(-6deg) scale(1);filter:none}
 100%{opacity:0;transform:translate(0,-2cqw) perspective(60cqw) rotateZ(-6deg) scale(1)}}
.bo-cap{position:absolute;left:14px;bottom:14px;z-index:12;display:flex;gap:8px;flex-wrap:wrap}
.bo-ctl{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.seg{display:inline-flex;border:1px solid rgba(246,235,221,.3);border-radius:99px;padding:4px;gap:2px}
.crema .seg{border-color:rgba(18,17,16,.3)}
.seg button{padding:.6em 1.2em;border-radius:99px;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .3s,color .3s}
.seg button.on{background:var(--naranja);color:var(--tinta)}

/* móvil */
.phone{position:relative;width:min(300px,100%);aspect-ratio:9/18.6;border-radius:44px;background:#1c1a18;padding:9px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 2px #3a3733;margin-inline:auto}
.phone::before{content:"";position:absolute;top:16px;left:50%;translate:-50% 0;width:28%;height:20px;border-radius:99px;background:#000;z-index:20}
.phone .scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#000;container-type:inline-size}
.phone .bo-stage{position:absolute;aspect-ratio:var(--ar);border-radius:0;height:100%;width:auto;left:var(--px,-50%);top:0}

/* estado final fijo (sin animar) */
.ad.st *{animation:none!important}.ad.st .c{transform:none}.ad.st .ad-name,.ad.st .ad-cta{opacity:1}.ad.st .ad-offer{opacity:1;transform:rotate(-10deg)}
.ad.st .ad-bg i{transform:none}.ad.st.ad-minimal .ad-line::after{width:22cqw}.ad.st.ad-retro .ad-bg i:nth-child(3){transform:rotate(12deg)}