/* v5 (19/10/2026): escassez (cronômetro + lote), trailer, botões destacados e animações.
   Carregado depois de styles.css; tudo aqui sobrepõe o visual original. */
:root{--hot:#ff4d5e;--hot2:#ff8a3d;--gold:#ffc94a;--neon:#ff4fd8;--cyan:#3fe3ff}

/* Escassez só aparece com o cronômetro válido (o app.js liga .oferta-on). Sem JS ou depois do prazo, some. */
html:not(.oferta-on) [data-scarcity]{display:none!important}

/* ---------- Botões ---------- */
.button:not(.button-outline){position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#2fe0a6 0%,#8cee5a 100%);box-shadow:0 10px 30px -10px #2bd0a0b3,inset 0 0 0 1px #c8ff9a40}
.button:not(.button-outline):hover{background:linear-gradient(135deg,#46f0b8 0%,#a6f56f 100%);box-shadow:0 16px 40px -10px #2bd0a0e6,inset 0 0 0 1px #d8ffb060}
.button:not(.button-outline):after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffffa0,transparent);transform:skewX(-20deg);animation:v5-shine 3.8s ease-in-out infinite}
@keyframes v5-shine{0%,55%{left:-60%}100%{left:130%}}
.button-outline{background:#0d1a12b3;border-color:#3a5a45}
.button-outline:hover{border-color:#5f9a72;background:#132a1c}
.button .icon-fill,.icon-fill{fill:currentColor;stroke:none}
.button.cta{min-height:60px;padding:16px 30px;font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:14px;gap:14px}
.button.cta .icon{width:20px;height:20px;transition:transform .2s}
.button.cta:hover .icon{transform:translateX(4px)}
.cta-pulse{animation:v5-pulse 2.4s ease-out infinite}
@keyframes v5-pulse{0%{box-shadow:0 10px 30px -10px #2bd0a0b3,0 0 0 0 #45e6a788}70%{box-shadow:0 10px 30px -10px #2bd0a0b3,0 0 0 16px #45e6a700}100%{box-shadow:0 10px 30px -10px #2bd0a0b3,0 0 0 0 #45e6a700}}
.hero-actions .button-outline{gap:10px}
.hero-actions .button-outline .icon{width:15px;height:15px;color:var(--neon)}

/* ---------- Faixa de urgência no topo ---------- */
.urgency-bar{position:relative;z-index:21;background:linear-gradient(90deg,#2c0a10,#5b1422 50%,#2c0a10);border-bottom:1px solid #ff4d5e4d;font-size:13px;color:#ffe3e6}
.urgency-bar .wrap{display:flex;align-items:center;justify-content:center;gap:8px 16px;min-height:42px;flex-wrap:wrap;padding-block:6px;text-align:center}
.urgency-live{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:10px;color:#fff;background:var(--hot);padding:3px 10px;border-radius:99px;box-shadow:0 0 18px #ff4d5e80}
.urgency-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:v5-blink 1.2s infinite}
@keyframes v5-blink{50%{opacity:.2}}
.urgency-text b{white-space:nowrap;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em}
.urgency-bar a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;border-bottom:1px solid #ffffff66}
.urgency-bar a:hover{border-color:#fff}
.urgency-bar a .icon{width:14px;height:14px}

/* ---------- Hero ---------- */
.hero-shell{overflow:hidden}
.hero-shell:after{content:"";position:absolute;z-index:-1;right:4%;top:6%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#2bd0a026,#a6e94210 40%,transparent 68%);animation:v5-breathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes v5-breathe{from{transform:scale(.88);opacity:.7}to{transform:scale(1.08);opacity:1}}
.gradient-text{background-image:linear-gradient(100deg,#70e5b5,#a4e846,#70e5b5);background-size:200% 100%;animation:v5-flow 7s linear infinite}
@keyframes v5-flow{to{background-position:200% 0}}
.book-3d{animation:v5-float 6s ease-in-out infinite}
@keyframes v5-float{0%,100%{transform:rotateY(-19deg) rotateZ(-5deg) translateY(0)}50%{transform:rotateY(-19deg) rotateZ(-5deg) translateY(-12px)}}
.orbit-two{animation:v5-spin 60s linear infinite}
@keyframes v5-spin{to{transform:rotate(360deg)}}
.status-dot{animation:v5-dot 2s ease-out infinite}
@keyframes v5-dot{0%{box-shadow:0 0 0 0 #2bd0a088}70%{box-shadow:0 0 0 7px #2bd0a000}100%{box-shadow:0 0 0 0 #2bd0a000}}
.hero-scarcity{display:flex;flex-wrap:wrap;gap:10px;margin:-4px 0 22px}
.hero-scarcity>span{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;padding:8px 13px;border-radius:10px;border:1px solid}
.hero-scarcity .icon{width:16px;height:16px}
.hs-timer{color:#ffe7a6;border-color:#6b5520;background:#2a210b99}
.hs-timer b{color:var(--gold);font-variant-numeric:tabular-nums}
.hs-timer .icon{color:var(--gold)}
.hs-lote{color:#ffd0d5;border-color:#7a2a33;background:#3a111799}
.hs-lote b{color:#fff}
.hs-lote .icon{color:var(--hot)}

/* ---------- Trailer ---------- */
.video-section{position:relative;padding-top:56px;background:radial-gradient(ellipse at 18% 35%,#ff4fd814,transparent 55%),radial-gradient(ellipse at 82% 70%,#3fe3ff12,transparent 55%)}
.video-section .eyebrow{color:#ff9ce9}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hot);margin-right:6px;vertical-align:0;animation:v5-rec 1.6s infinite}
@keyframes v5-rec{0%{box-shadow:0 0 0 0 #ff4d5e99}70%{box-shadow:0 0 0 8px #ff4d5e00}100%{box-shadow:0 0 0 0 #ff4d5e00}}
.gradient-neon{background:linear-gradient(100deg,#ff6be0,#7ce8ff,#a6e942,#ff6be0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:v5-flow 6s linear infinite}
.video-frame{position:relative;max-width:960px;margin:0 auto}
.video-glow{position:absolute;inset:-3px;border-radius:24px;background:linear-gradient(120deg,#ff4fd8,#3fe3ff,#2bd0a0,#ff4fd8);background-size:300% 300%;filter:blur(20px);opacity:.5;animation:v5-glow 8s ease infinite;z-index:0;pointer-events:none}
@keyframes v5-glow{50%{background-position:100% 50%}}
.video-box{position:relative;z-index:1;border-radius:20px;overflow:hidden;border:1px solid #ffffff26;background:#000;aspect-ratio:16/9;box-shadow:0 30px 80px -20px #000c}
.video-box video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.video-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:0 20px 7%;border:0;background:linear-gradient(180deg,#0000 45%,#000b);color:#fff;cursor:pointer;text-align:left}
html:not(.js) .video-play{display:none}
.video-box.playing .video-play{display:none}
.play-ring{position:relative;display:grid;place-items:center;flex:0 0 auto;width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#ff4fd8,#7b5cff);box-shadow:0 0 0 8px #ff4fd833,0 0 50px #ff4fd899;transition:transform .25s}
.play-ring:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid #ff9cecaa;animation:v5-ring 2s ease-out infinite}
@keyframes v5-ring{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.45);opacity:0}}
.play-ring .icon{width:34px;height:34px;margin-left:5px}
.video-play:hover .play-ring{transform:scale(1.08)}
.play-label{font-family:var(--heading);font-weight:700;font-size:20px;line-height:1.25;text-shadow:0 2px 14px #000;display:flex;flex-direction:column;gap:3px;padding-bottom:6px}
.play-label small{font-family:Inter,sans-serif;font-weight:600;font-size:11px;color:#ffd9f6;letter-spacing:.1em;text-transform:uppercase}
.video-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:20px;background:#05080be0;backdrop-filter:blur(6px)}
.video-end[hidden]{display:none}
.video-end .eyebrow{margin:0;color:#ff9ce9}
.video-end h3{font-size:26px;margin-bottom:14px}
.video-end-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.video-end .button-outline{gap:10px}
.video-end .button-outline .icon{width:16px;height:16px}
.video-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px}
.video-cta-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#ffe7a6}
.video-cta-note b{color:var(--gold);font-variant-numeric:tabular-nums}
.video-cta-note .icon{width:16px;height:16px;color:var(--gold)}

/* ---------- Card da oferta ---------- */
.offer-card{position:relative;border-color:#3f8a57;box-shadow:0 20px 70px #0006,0 0 90px -20px #2bd0a04d}
.offer-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#6ff0bf,transparent 35%,transparent 65%,#a6e942);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hot-pill{white-space:nowrap;display:flex;width:max-content;max-width:100%;margin:0 auto 24px;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;background:linear-gradient(90deg,#e8293f,#ff5a3d);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 24px -6px #ff3b4fcc;animation:v5-hot 2.2s ease-in-out infinite}
@keyframes v5-hot{50%{box-shadow:0 6px 30px -2px #ff3b4fee}}
.hot-pill .icon{width:15px;height:15px}
.price-block{margin-bottom:22px}
.offer-price{color:#5ff0a0;text-shadow:0 0 40px #2bd0a055}
.countdown{margin:0 0 16px}
.countdown-title{font-size:12px;text-align:center;margin-bottom:10px;color:#cfd9d3}
.countdown-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.countdown-boxes>div{display:flex;flex-direction:column;align-items:center;padding:11px 4px 9px;border:1px solid #6b5520;border-radius:12px;background:linear-gradient(180deg,#221c0c,#120f07);box-shadow:inset 0 1px 0 #ffffff12}
.countdown-boxes b{font-family:var(--heading);font-size:30px;font-weight:700;line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 0 18px #ffc94a59}
.countdown-boxes span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#b9a774;margin-top:5px}
.lote{margin:0 0 22px;padding:14px 16px;border:1px solid #5a2229;border-radius:12px;background:#22090d99}
.lote-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#ffd0d5;margin-bottom:10px}
.lote-top>span:first-child{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.lote-top .icon{width:15px;height:15px;color:var(--hot)}
.lote-top b{color:#fff}
.lote-bar{height:10px;border-radius:99px;background:#3a1a1f;overflow:hidden}
.lote-bar i{display:block;width:0;height:100%;border-radius:inherit;background-image:repeating-linear-gradient(45deg,#ffffff2e 0 8px,transparent 8px 16px),linear-gradient(90deg,var(--hot2),var(--hot));background-size:22.63px 22.63px,100% 100%;animation:v5-stripes 1s linear infinite;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
@keyframes v5-stripes{to{background-position:22.63px 0,0 0}}
.lote>p{font-size:12px;margin-top:9px;color:#ffc2c9}
.lote>p b{color:#fff}
.offer-card .button.cta{min-height:62px;font-size:15px}

/* ---------- Cards e fechamento ---------- */
.problem-card:hover,.benefit-card:hover{box-shadow:0 18px 40px -22px #2bd0a066}
.closing{position:relative;overflow:hidden;border-color:#356b47;background:radial-gradient(ellipse at 85% 20%,#1f4a2d99,transparent 70%),radial-gradient(ellipse at 10% 100%,#ff4fd812,transparent 60%),#101a13}

/* Barra fixa do celular */
.sticky-offer>div>span{font-size:11px}
.sticky-timer{display:block;font-style:normal;color:#ffe7a6;white-space:nowrap}
.sticky-timer b{color:var(--gold);font-variant-numeric:tabular-nums;font-weight:700}

/* Entrada ao rolar (o app.js põe .reveal só quando o navegador anima) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:960px){
.offer-card .button.cta{font-size:13px;padding-inline:16px}
.countdown-boxes b{font-size:24px}
.countdown-boxes{gap:7px}
}

@media(max-width:720px){
.urgency-bar{font-size:12px}
.urgency-bar .wrap{gap:4px 10px;padding-block:8px;min-height:0}
.urgency-bar a{display:none}
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .button{flex:none}
.button.cta{min-height:58px;font-size:14px;padding:14px 18px;width:100%}
.hero-scarcity{margin:-2px 0 20px;gap:8px}
.hero-scarcity>span{font-size:12px;padding:7px 11px}
.video-section{padding-top:36px}
.video-box{border-radius:14px}
.video-glow{border-radius:18px;filter:blur(14px)}
.video-play{gap:10px;padding-bottom:3.5%}
.play-ring{width:50px;height:50px;box-shadow:0 0 0 5px #ff4fd833,0 0 30px #ff4fd899}
.play-ring:before{inset:-5px}
.play-ring .icon{width:21px;height:21px;margin-left:3px}
.play-label{font-size:15px;padding-bottom:2px}
.play-label small{font-size:9px}
.video-end{padding:12px;gap:4px}
.video-end .eyebrow{display:none}
.video-end h3{font-size:16px;margin-bottom:8px}
.video-end-actions{gap:8px}
.video-end .button{min-height:40px;padding:9px 14px;font-size:11px;width:auto}
.video-end .button-outline{padding-inline:12px}
.video-cta{margin-top:30px}
.video-cta .button{width:100%}
.offer-card .button.cta{font-size:14px}
.countdown-boxes b{font-size:26px}
.closing .button.cta{font-size:13px}
}

@media(max-width:360px){
.button.cta{font-size:12px;padding-inline:12px}
.countdown-boxes b{font-size:21px}
.countdown-boxes span{font-size:8px}
.hot-pill{font-size:9px;padding-inline:12px}
.offer-card .button.cta{font-size:12px}
}
