/* ============================================================================
   DELÍRIO DE AMOR — style.css
   Paleta: noite + neon quente. Mobile-first. Contraste AA.
   ========================================================================== */

:root{
  /* --- fundo: noite de festa, roxo profundo --- */
  --noite:#120A1E;
  --noite-2:#190E28;
  --superficie:#211434;
  --superficie-2:#2C1B44;
  --borda:#3E2A5C;
  --texto:#F8F1FF;
  --texto-2:#CFBEE6;
  --texto-3:#A995C4;

  /* --- cores de balão e confete --- */
  --rosa:#FF3D8A;
  --rosa-claro:#FF87B5;
  --rosa-escuro:#D9166B;
  --btn-a:#E0186C;        /* degradê do botão: branco passa AA nos dois extremos */
  --btn-b:#C9125F;
  --ambar:#FFD028;        /* amarelo do LED */
  --turquesa:#22D3EE;
  --lilas:#A78BFA;
  --lima:#7DE87A;
  --laranja:#FF8A2B;

  --zap:#25D366;
  --zap-escuro:#1BA851;
  --raio:14px;
  --max:1080px;
  --f-titulo: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-corpo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--noite);
  color:var(--texto);
  font-family:var(--f-corpo);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
body.travado{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rosa-claro)}
h1,h2,h3{font-family:var(--f-titulo);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(27px,6.9vw,50px);line-height:1.12}
h2{font-size:clamp(24px,5.6vw,38px)}
h3{font-size:19px}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sec{padding:56px 0;position:relative}
.sec+.sec{border-top:1px solid var(--borda)}
.sec-escura{background:var(--noite-2)}
.olho{
  display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ambar);font-weight:700;margin:0 0 12px;
}
.olho::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--rosa);margin-right:9px;vertical-align:1px;
  box-shadow:0 0 0 0 rgba(255,61,104,.7);animation:sirene 2.4s infinite;
}
@keyframes sirene{
  0%{box-shadow:0 0 0 0 rgba(255,61,104,.65)}
  70%{box-shadow:0 0 0 10px rgba(255,61,104,0)}
  100%{box-shadow:0 0 0 0 rgba(255,61,104,0)}
}
.lead{font-size:19px;color:var(--texto-2)}
.pequeno{font-size:14px;color:var(--texto-3)}

/* ---------- Topo ---------- */
.topo{
  position:sticky;top:0;z-index:40;background:rgba(18,10,30,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--borda);
}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px}
.marca{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;line-height:0;border-radius:8px}
.marca img{height:40px;width:auto;display:block}
@media (min-width:720px){ .topo-in{height:64px} .marca img{height:48px} }
.marca span{color:var(--rosa)}
.nav{display:flex;gap:16px;min-width:0}
.nav a{color:var(--texto-2);text-decoration:none;font-size:14.5px;white-space:nowrap}
.nav a:hover{color:var(--texto)}
@media (max-width:600px){ .nav a:nth-child(n+2){display:none} .nav a:first-child{color:var(--texto)} }

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:38px 0 44px;overflow:hidden;
  background:
    radial-gradient(115% 75% at 82% -12%, rgba(255,61,138,.30), transparent 60%),
    radial-gradient(62% 42% at 2% 6%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(85% 55% at 46% 112%, rgba(167,139,250,.26), transparent 64%),
    radial-gradient(55% 40% at 96% 66%, rgba(255,208,40,.12), transparent 62%),
    var(--noite);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rosa),transparent);opacity:.55;
}
.hero h1{margin-bottom:16px}
.hero .lead{max-width:44ch}
.selo{
  display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;
}
.selo li{
  font-size:13px;color:var(--texto-2);background:var(--superficie);
  border:1px solid var(--borda);border-radius:999px;padding:7px 13px;
}
.selo b{color:var(--texto)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 26px;border-radius:999px;border:0;
  font-family:var(--f-corpo);font-size:17px;font-weight:700;line-height:1.2;
  color:#fff;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));
  text-decoration:none;cursor:pointer;width:auto;
  box-shadow:0 10px 30px -12px rgba(255,61,138,.9);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,61,138,1)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-grande{width:100%;font-size:18px;min-height:58px}
.btn-zap{background:linear-gradient(135deg,var(--zap),var(--zap-escuro));color:#05230F;box-shadow:0 10px 30px -12px rgba(37,211,102,.9)}
.btn-linha{background:transparent;border:1.5px solid var(--borda);color:var(--texto);box-shadow:none;font-weight:600}
.btn-linha:hover{border-color:var(--rosa);box-shadow:none}
.cta-nota{font-size:13.5px;color:var(--texto-3);margin:12px 0 0}
.cta-bloco{margin-top:24px}
@media (min-width:600px){ .cta-bloco .btn{width:auto;min-width:320px} }

/* ---------- Grades e cards ---------- */
.grade{display:grid;gap:14px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media (min-width:720px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px;position:relative;
}
.card h3{margin-bottom:6px;color:var(--texto)}
.card p{margin:0;color:var(--texto-2);font-size:15.5px}
a.card,button.card{text-decoration:none;display:block;width:100%;text-align:left;font-family:var(--f-corpo);cursor:pointer;transition:border-color .18s ease, transform .18s ease}
a.card:hover,button.card:hover{border-color:var(--rosa);transform:translateY(-2px)}
a.card h3::after,button.card h3::after{content:" →";color:var(--rosa);font-weight:700}

/* Passos numerados */
.passos{list-style:none;margin:0;padding:0;counter-reset:p}
.passos li{
  position:relative;padding:0 0 26px 54px;counter-increment:p;
}
.passos li::before{
  content:counter(p);position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--superficie-2);border:1.5px solid var(--rosa);color:var(--rosa);
  font-weight:800;font-family:var(--f-titulo);
}
.passos li::after{
  content:"";position:absolute;left:19px;top:40px;bottom:6px;width:1.5px;
  background:linear-gradient(180deg,var(--rosa),transparent);
}
.passos li:last-child{padding-bottom:0}
.passos li:last-child::after{display:none}
.passos h3{margin-bottom:3px}
.passos p{margin:0;color:var(--texto-2);font-size:15.5px}

/* A cena "o que acontece na porta" */
.cena{border-left:2px solid var(--borda);padding-left:20px;margin:0}
.cena p{position:relative}
.cena p::before{
  content:"";position:absolute;left:-27px;top:11px;width:11px;height:11px;border-radius:50%;
  background:var(--noite);border:2px solid var(--ambar);
}
.cena strong{color:var(--texto)}

/* Mídia / placeholders */
.midia{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:720px){ .midia{grid-template-columns:repeat(3,1fr)} }
.slot{
  position:relative;border:1.5px dashed var(--borda);border-radius:var(--raio);
  background:var(--superficie);aspect-ratio:9/16;display:grid;place-items:center;
  padding:16px;text-align:center;overflow:hidden;
}
.midia .slot:first-child{grid-column:span 2}
@media (min-width:720px){ .midia .slot:first-child{grid-column:span 1} }
.slot span{font-size:12.5px;color:var(--texto-3);line-height:1.45}
.slot b{display:block;color:var(--ambar);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}

/* Depoimentos */
.dep{background:var(--superficie);border:1px solid var(--borda);border-left:3px solid var(--rosa);border-radius:var(--raio);padding:20px}
.dep blockquote{margin:0 0 12px;font-size:17.5px;line-height:1.5;color:var(--texto)}
.dep cite{font-style:normal;font-size:14px;color:var(--texto-3)}
.dep cite b{color:var(--texto-2)}

/* Números */
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;text-align:center}
.numeros div{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:16px 8px}
.numeros b{display:block;font-family:var(--f-titulo);font-size:30px;color:var(--ambar);line-height:1}
.numeros span{font-size:12.5px;color:var(--texto-3)}

/* Cobertura */
.regiao-bloco{margin-bottom:20px}
.regiao-bloco h3{margin-bottom:4px}
.regiao-bloco h3 a{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--rosa)}
.regiao-bloco p{color:var(--texto-2);font-size:15.5px;margin:0}

/* Preço */
.preco-box{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:22px}
.preco-lista{list-style:none;margin:0 0 18px;padding:0;counter-reset:f}
.preco-lista li{counter-increment:f;padding:12px 0 12px 40px;position:relative;border-bottom:1px solid var(--borda);font-size:16px;color:var(--texto-2)}
.preco-lista li:last-child{border-bottom:0}
.preco-lista li::before{
  content:counter(f);position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,176,32,.14);color:var(--ambar);display:grid;place-items:center;font-size:14px;font-weight:800;
}
.preco-lista b{color:var(--texto)}

/* Garantia */
.garantia{display:grid;gap:12px}
.garantia div{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:16px 18px}
.garantia b{display:block;color:var(--ambar);font-size:14px;margin-bottom:4px}
.garantia p{margin:0;font-size:15.5px;color:var(--texto-2)}
@media (min-width:720px){ .garantia{grid-template-columns:1fr 1fr} }

/* FAQ */
.faq details{border-bottom:1px solid var(--borda)}
.faq summary{
  cursor:pointer;padding:17px 34px 17px 0;position:relative;font-weight:700;font-size:16.5px;
  list-style:none;min-height:48px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--rosa);font-size:24px;font-weight:400;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq div{padding:0 0 18px;color:var(--texto-2);font-size:16px}
.faq div p:last-child{margin-bottom:0}

/* CTA final */
.final{
  background:
    radial-gradient(110% 90% at 50% 120%, rgba(255,61,104,.28), transparent 60%),
    var(--noite-2);
  text-align:center;
}
.final .lead{margin-left:auto;margin-right:auto;max-width:40ch}

/* Rodapé */
.rodape{background:var(--noite);border-top:1px solid var(--borda);padding:30px 0 110px;font-size:14px;color:var(--texto-3)}
.rodape a{color:var(--texto-2);text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape-links{display:flex;flex-wrap:wrap;gap:10px 16px;margin:14px 0}
.rodape-logo{width:min(76vw,340px);height:auto;margin:0 0 14px;opacity:.96}
@media (min-width:720px){ .rodape-logo{width:420px} }

/* Botão flutuante */
.flutua{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:35;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--f-corpo);font-size:17px;font-weight:800;color:#05230F;
  background:linear-gradient(135deg,var(--zap),var(--zap-escuro));
  box-shadow:0 12px 34px -8px rgba(0,0,0,.75);
}
@media (min-width:720px){
  .flutua{left:auto;right:24px;bottom:24px;padding:0 26px}
}

/* ---------- O PAINEL ---------- */
.painel{position:fixed;inset:0;z-index:100}
.painel[hidden]{display:none}
.painel-fundo{position:absolute;inset:0;background:rgba(6,3,4,.78);backdrop-filter:blur(3px);animation:fade .18s ease}
.painel-caixa{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--noite-2);border-top:1px solid var(--borda);
  border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;animation:sobe .24s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.9);
}
@media (min-width:720px){
  .painel-caixa{
    left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(460px,92vw);border-radius:20px;border:1px solid var(--borda);
    animation:aparece .2s ease;
  }
}
@keyframes sobe{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes aparece{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.painel-x{
  position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;
  background:transparent;border:0;color:var(--texto-3);font-size:28px;line-height:1;cursor:pointer;
}
.painel-x:hover{color:var(--texto)}
.painel-barra{height:3px;background:var(--borda);border-radius:2px;overflow:hidden;margin:6px 44px 14px 0}
.painel-barra i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--ambar),var(--rosa));transition:width .25s ease}
.painel-contador{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.painel-titulo{font-size:clamp(23px,5.6vw,29px);margin:0 0 6px}
.painel-sub{color:var(--texto-2);font-size:15.5px;margin:0 0 16px}
.painel-input{
  width:100%;font-size:18px;font-family:var(--f-corpo);color:var(--texto);
  background:var(--superficie);border:1.5px solid var(--borda);border-radius:12px;
  padding:16px;margin:0 0 14px;min-height:56px;
}
.painel-input::placeholder{color:var(--texto-3)}
.painel-input:focus{border-color:var(--rosa);outline:none;box-shadow:0 0 0 3px rgba(255,61,104,.22)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 6px}
.chip{
  min-height:48px;padding:12px 16px;border-radius:999px;cursor:pointer;
  background:var(--superficie);border:1.5px solid var(--borda);color:var(--texto);
  font-family:var(--f-corpo);font-size:15.5px;font-weight:600;
  transition:border-color .15s ease,background .15s ease;
}
.chip:hover,.chip:focus-visible{border-color:var(--rosa);background:var(--superficie-2)}
.chip-outra{border-style:dashed;color:var(--texto-2)}
.painel-link{
  display:block;width:100%;margin-top:14px;background:none;border:0;cursor:pointer;
  color:var(--texto-3);font-size:14px;text-decoration:underline;font-family:var(--f-corpo);min-height:44px;
}
.painel-nota{margin:16px 0 0;font-size:12.5px;color:var(--texto-3);line-height:1.5}

/* ---------- Revelação ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================================
   CAMADA TECNOLÓGICA — LED, sirene, grid, fogos e movimento
   Tudo em CSS puro. `prefers-reduced-motion` no fim do arquivo desliga tudo.
   ========================================================================== */

/* ---------- Barra de progresso de leitura ---------- */
.progresso{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--ambar),var(--rosa));
  box-shadow:0 0 14px rgba(255,61,104,.85);
}

/* ---------- Efeitos de fundo do hero ---------- */
.hero .wrap{position:relative;z-index:3}
.hero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

/* grid técnico rolando */
.hero-fx .grid{
  position:absolute;inset:-40px;
  background-image:
    linear-gradient(rgba(255,122,151,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,122,151,.075) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 10%,transparent 72%);
          mask-image:radial-gradient(120% 78% at 50% 0%,#000 10%,transparent 72%);
  animation:gridRola 22s linear infinite;
}
@keyframes gridRola{to{background-position:0 42px,42px 0}}

/* varredura da sirene: um giro vermelho e um azul, defasados */
.hero-fx .sirene{
  position:absolute;top:-25%;left:0;width:55%;height:150%;filter:blur(18px);
  background:linear-gradient(100deg,transparent,rgba(255,61,104,.20),transparent);
  animation:varre 7s ease-in-out infinite;
}
.hero-fx .sirene.fria{
  background:linear-gradient(100deg,transparent,rgba(72,142,255,.11),transparent);
  animation-delay:3.5s;
}
@keyframes varre{
  0%{transform:translateX(-60%)}
  50%{transform:translateX(240%)}
  100%{transform:translateX(-60%)}
}

/* linhas de varredura, bem sutis */
.hero-fx .scan{
  position:absolute;inset:0;opacity:.6;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}

/* fogos */
.hero-fx .fogo{position:absolute;width:5px;height:5px;border-radius:50%;animation:fogo 7s ease-out infinite}
.hero-fx .fogo.f1{top:22%;right:14%}
.hero-fx .fogo.f2{top:12%;right:34%;animation-delay:2.4s}
.hero-fx .fogo.f3{top:34%;right:6%;animation-delay:4.6s}
@keyframes fogo{
  0%{opacity:0;box-shadow:0 0 0 0 var(--ambar),0 0 0 0 var(--rosa),0 0 0 0 var(--rosa-claro),0 0 0 0 var(--ambar),0 0 0 0 var(--rosa),0 0 0 0 var(--rosa-claro)}
  6%{opacity:1}
  40%{opacity:.95;box-shadow:
      36px -28px 0 -1px var(--ambar), -32px -20px 0 -1px var(--rosa),
      10px -50px 0 -1px var(--rosa-claro), -48px 8px 0 -1px var(--ambar),
      28px 24px 0 -1px var(--rosa), -14px 44px 0 -1px var(--rosa-claro)}
  62%{opacity:0;box-shadow:
      52px -40px 0 -2px var(--ambar), -46px -28px 0 -2px var(--rosa),
      14px -70px 0 -2px var(--rosa-claro), -68px 12px 0 -2px var(--ambar),
      40px 34px 0 -2px var(--rosa), -20px 62px 0 -2px var(--rosa-claro)}
  100%{opacity:0}
}

/* ---------- Faixa de LED (dot matrix rolando) ---------- */
.led-strip{
  position:relative;overflow:hidden;border-radius:10px;margin:0 0 18px;
  background:#0B0616;border:1px solid var(--borda);padding:10px 0;
  box-shadow:inset 0 0 26px rgba(255,61,104,.22), 0 6px 20px -14px #000;
}
.led-strip::before,.led-strip::after{content:"";position:absolute;top:0;bottom:0;width:44px;z-index:3;pointer-events:none}
.led-strip::before{left:0;background:linear-gradient(90deg,#0B0616,transparent)}
.led-strip::after{right:0;background:linear-gradient(270deg,#0B0616,transparent)}
.led-strip .malha{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,.55) 1px,transparent 1.2px);
  background-size:3px 3px;
}
.led-track{display:flex;width:max-content;animation:corre 26s linear infinite}
.led-track span{
  font-family:var(--f-titulo);font-weight:800;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ambar);white-space:nowrap;padding:0 16px;
  text-shadow:0 0 10px rgba(255,176,32,.75);
}
.led-track span i{color:var(--rosa);font-style:normal;text-shadow:0 0 10px rgba(255,61,104,.85)}
@keyframes corre{to{transform:translateX(-50%)}}

/* faixa de LED grande, dentro de uma seção */
.led-strip.largo{margin:22px 0 26px}
.led-strip.largo .led-track{animation-duration:34s}
.led-strip.largo .led-track span{font-size:13.5px;padding:0 14px}

/* ---------- Painel digital com o nome ---------- */
.led-nome{
  position:relative;overflow:hidden;margin:22px 0 0;padding:20px 16px 16px;
  background:#0B0616;border:1px solid var(--borda);border-radius:14px;text-align:center;
  box-shadow:inset 0 0 40px rgba(255,61,104,.18), 0 12px 34px -20px #000;
}
.led-nome .malha{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,.5) 1px,transparent 1.2px);
  background-size:3px 3px;
}
.led-nome b{
  display:block;position:relative;font-family:var(--f-titulo);font-weight:800;
  font-size:clamp(26px,8.4vw,44px);letter-spacing:.1em;line-height:1.25;min-height:1.25em;
  color:var(--ambar);text-shadow:0 0 16px rgba(255,176,32,.9),0 0 46px rgba(255,61,104,.4);
}
.led-nome small{
  display:block;position:relative;margin-top:10px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texto-3);
}
.led-cursor{display:inline-block;width:.46em;height:.86em;vertical-align:-.06em;margin-left:.06em;
  background:var(--ambar);box-shadow:0 0 12px rgba(255,176,32,.9);animation:pisca 1.05s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}

/* ---------- Barras de som ---------- */
.eq{display:flex;align-items:flex-end;gap:4px;height:32px;margin:0 0 16px}
.eq i{width:5px;border-radius:3px;background:linear-gradient(180deg,var(--rosa),var(--ambar));
  box-shadow:0 0 10px rgba(255,61,104,.5);animation:eq 1.15s ease-in-out infinite}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:80%;animation-delay:.12s}
.eq i:nth-child(3){height:55%;animation-delay:.26s}
.eq i:nth-child(4){height:100%;animation-delay:.05s}
.eq i:nth-child(5){height:35%;animation-delay:.34s}
.eq i:nth-child(6){height:70%;animation-delay:.18s}
.eq i:nth-child(7){height:48%;animation-delay:.42s}
.eq i:nth-child(8){height:90%;animation-delay:.09s}
.eq i:nth-child(9){height:30%;animation-delay:.3s}
.eq i:nth-child(10){height:62%;animation-delay:.22s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.eq i{transform-origin:bottom}

/* ---------- Brilho percorrendo os botões ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-180%) skewX(-18deg);animation:brilho 4.2s ease-in-out infinite;
}
@keyframes brilho{0%,72%{transform:translateX(-180%) skewX(-18deg)}100%{transform:translateX(300%) skewX(-18deg)}}
.flutua{position:fixed;overflow:hidden;isolation:isolate}
.flutua::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-180%) skewX(-18deg);animation:brilho 3.4s ease-in-out infinite;
}

/* ---------- Cards com reflexo passando ---------- */
a.card,button.card{overflow:hidden}
a.card::after,button.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 42%,rgba(255,61,104,.16) 50%,transparent 58%);
  background-size:260% 100%;animation:reflexo 6s linear infinite;
}
a.card:nth-child(2n)::after,button.card:nth-child(2n)::after{animation-delay:1.5s}
a.card:nth-child(3n)::after,button.card:nth-child(3n)::after{animation-delay:3s}
@keyframes reflexo{0%{background-position:160% 0}100%{background-position:-60% 0}}

/* ---------- Números com cara de display ---------- */
.numeros b{font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,176,32,.55)}
.numeros div{position:relative;overflow:hidden}
.numeros div::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ambar),transparent);opacity:.7;
  animation:varreLinha 4.5s ease-in-out infinite;
}
.numeros div:nth-child(2)::after{animation-delay:1.2s}
.numeros div:nth-child(3)::after{animation-delay:2.4s}
@keyframes varreLinha{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

/* ---------- Linha viva embaixo do topo ---------- */
.topo::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--rosa),var(--ambar),transparent);
  background-size:220% 100%;animation:linhaTopo 6s linear infinite;opacity:.75;
}
.topo{position:sticky;overflow:visible}
@keyframes linhaTopo{0%{background-position:0 0}100%{background-position:220% 0}}

/* ---------- Passos: trilha que acende ---------- */
.passos li::before{box-shadow:0 0 0 0 rgba(255,61,104,.45);animation:pulsoPasso 3.6s ease-out infinite}
.passos li:nth-child(2)::before{animation-delay:1.2s}
.passos li:nth-child(3)::before{animation-delay:2.4s}
.passos li:nth-child(4)::before{animation-delay:3.6s}
@keyframes pulsoPasso{
  0%{box-shadow:0 0 0 0 rgba(255,61,104,.5)}
  55%{box-shadow:0 0 0 12px rgba(255,61,104,0)}
  100%{box-shadow:0 0 0 0 rgba(255,61,104,0)}
}

/* ---------- Cena: o ponto do momento acende ---------- */
.cena p::before{animation:pontoCena 4s ease-in-out infinite}
.cena p:nth-child(2)::before{animation-delay:.5s}
.cena p:nth-child(3)::before{animation-delay:1s}
.cena p:nth-child(4)::before{animation-delay:1.5s}
.cena p:nth-child(5)::before{animation-delay:2s}
.cena p:nth-child(6)::before{animation-delay:2.5s}
.cena p:nth-child(7)::before{animation-delay:3s}
.cena p:nth-child(8)::before{animation-delay:3.5s}
@keyframes pontoCena{
  0%,100%{box-shadow:none;border-color:var(--borda)}
  50%{box-shadow:0 0 14px rgba(255,176,32,.9);border-color:var(--ambar)}
}

/* ---------- Revelação com escalonamento ---------- */
.reveal{
  opacity:0;transform:translateY(24px) scale(.992);filter:blur(5px);
  transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .75s cubic-bezier(.2,.75,.2,1),filter .6s ease;
}
.reveal.visivel{opacity:1;transform:none;filter:none}
.reveal .grade > *,.reveal .midia > *,.reveal .garantia > *,.reveal .numeros > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease var(--atraso,0s),transform .6s cubic-bezier(.2,.75,.2,1) var(--atraso,0s);
}
.reveal.visivel .grade > *,.reveal.visivel .midia > *,.reveal.visivel .garantia > *,.reveal.visivel .numeros > *{
  opacity:1;transform:none;
}

/* ---------- Painel: entrada dos passos ---------- */
.passo{animation:entraPasso .3s cubic-bezier(.2,.8,.3,1)}
@keyframes entraPasso{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.painel-caixa{position:absolute;overflow-x:hidden}
.painel-caixa::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(80% 40% at 50% 0%,rgba(255,61,104,.14),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
}
.painel-caixa > *{position:relative}
.chip{position:relative;overflow:hidden}
.chip::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 44%,rgba(255,61,104,.2) 50%,transparent 56%);
  background-size:280% 100%;animation:reflexo 7s linear infinite;
}
.chip:nth-child(3n)::after{animation-delay:2s}
.chip:nth-child(3n+1)::after{animation-delay:4s}
.painel-barra i{box-shadow:0 0 12px rgba(255,61,104,.85)}

/* ---------- CTA final: pulso de fundo ---------- */
.final{overflow:hidden;position:relative}
.final::before{
  content:"";position:absolute;left:50%;bottom:-40%;width:120vw;height:80vh;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(255,61,104,.22),transparent 70%);
  animation:respira 6s ease-in-out infinite;pointer-events:none;
}
@keyframes respira{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}
.final .wrap{position:relative;z-index:2}

@media (prefers-reduced-motion: reduce){
  .reveal .grade > *,.reveal .midia > *,.reveal .garantia > *,.reveal .numeros > *{opacity:1!important;transform:none!important}
  .hero-fx,.eq,.led-cursor{display:none}
  .led-track{transform:none}
  .btn::after,.flutua::after,a.card::after,button.card::after,.chip::after,.numeros div::after,.final::before{display:none}
}

/* ============================================================================
   FESTA — cores de balão distribuídas pelos elementos repetidos
   Cada item de uma lista recebe uma cor diferente via --acento.
   ========================================================================== */

/* Cards de ocasião: cada um com a sua cor */
.grade > .card:nth-child(6n+1){--acento:var(--rosa)}
.grade > .card:nth-child(6n+2){--acento:var(--turquesa)}
.grade > .card:nth-child(6n+3){--acento:var(--ambar)}
.grade > .card:nth-child(6n+4){--acento:var(--lilas)}
.grade > .card:nth-child(6n+5){--acento:var(--lima)}
.grade > .card:nth-child(6n+6){--acento:var(--laranja)}
.card{--acento:var(--rosa)}
.card::before{
  content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;
  background:var(--acento);box-shadow:0 0 16px var(--acento);opacity:.9;
}
a.card:hover,button.card:hover{border-color:var(--acento)}
a.card h3::after,button.card h3::after{color:var(--acento)}
a.card::after,button.card::after{
  background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--acento) 22%,transparent) 50%,transparent 58%);
  background-size:260% 100%;
}

/* Passos: 1 rosa, 2 turquesa, 3 amarelo, 4 lilás… */
.passos li:nth-child(6n+1){--acento:var(--rosa)}
.passos li:nth-child(6n+2){--acento:var(--turquesa)}
.passos li:nth-child(6n+3){--acento:var(--ambar)}
.passos li:nth-child(6n+4){--acento:var(--lilas)}
.passos li:nth-child(6n+5){--acento:var(--lima)}
.passos li:nth-child(6n+6){--acento:var(--laranja)}
.passos li::before{border-color:var(--acento);color:var(--acento)}
.passos li::after{background:linear-gradient(180deg,var(--acento),transparent)}
.passos li::before{animation:pulsoCor 3.6s ease-out infinite}
@keyframes pulsoCor{
  0%{box-shadow:0 0 0 0 currentColor}
  55%{box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Cena: os pontos do minuto a minuto trocam de cor */
.cena p:nth-child(6n+1)::before{border-color:var(--rosa)}
.cena p:nth-child(6n+2)::before{border-color:var(--turquesa)}
.cena p:nth-child(6n+3)::before{border-color:var(--ambar)}
.cena p:nth-child(6n+4)::before{border-color:var(--lilas)}
.cena p:nth-child(6n+5)::before{border-color:var(--lima)}
.cena p:nth-child(6n+6)::before{border-color:var(--laranja)}
@keyframes pontoCena{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 16px currentColor}
}
.cena{border-image:linear-gradient(180deg,var(--rosa),var(--turquesa),var(--ambar),var(--lilas),var(--lima)) 1}

/* Barras de som em arco-íris */
.eq i:nth-child(5n+1){background:linear-gradient(180deg,var(--rosa),var(--laranja))}
.eq i:nth-child(5n+2){background:linear-gradient(180deg,var(--turquesa),var(--lilas))}
.eq i:nth-child(5n+3){background:linear-gradient(180deg,var(--ambar),var(--laranja))}
.eq i:nth-child(5n+4){background:linear-gradient(180deg,var(--lima),var(--turquesa))}
.eq i:nth-child(5n+5){background:linear-gradient(180deg,var(--lilas),var(--rosa))}

/* Chips do painel: cor por posição */
.chip:nth-child(6n+1){--acento:var(--rosa)}
.chip:nth-child(6n+2){--acento:var(--turquesa)}
.chip:nth-child(6n+3){--acento:var(--ambar)}
.chip:nth-child(6n+4){--acento:var(--lilas)}
.chip:nth-child(6n+5){--acento:var(--lima)}
.chip:nth-child(6n+6){--acento:var(--laranja)}
.chip{--acento:var(--rosa);border-color:color-mix(in srgb,var(--acento) 45%,var(--borda))}
.chip:hover,.chip:focus-visible{border-color:var(--acento);background:var(--superficie-2)}
.chip::after{background:linear-gradient(115deg,transparent 44%,color-mix(in srgb,var(--acento) 26%,transparent) 50%,transparent 56%);background-size:280% 100%}

/* Números: um em cada cor */
.numeros div:nth-child(1){--acento:var(--ambar)}
.numeros div:nth-child(2){--acento:var(--turquesa)}
.numeros div:nth-child(3){--acento:var(--lima)}
.numeros b{color:var(--acento);text-shadow:0 0 18px color-mix(in srgb,var(--acento) 55%,transparent)}
.numeros div::after{background:linear-gradient(90deg,transparent,var(--acento),transparent)}

/* Garantia: cada compromisso com a sua cor */
.garantia div:nth-child(4n+1){--acento:var(--lima)}
.garantia div:nth-child(4n+2){--acento:var(--turquesa)}
.garantia div:nth-child(4n+3){--acento:var(--ambar)}
.garantia div:nth-child(4n+4){--acento:var(--lilas)}
.garantia div{--acento:var(--lima);border-left:3px solid var(--acento)}
.garantia b{color:var(--acento)}

/* Lista de preço: números coloridos */
.preco-lista li:nth-child(4n+1){--acento:var(--rosa)}
.preco-lista li:nth-child(4n+2){--acento:var(--turquesa)}
.preco-lista li:nth-child(4n+3){--acento:var(--ambar)}
.preco-lista li:nth-child(4n+4){--acento:var(--lilas)}
.preco-lista li::before{
  background:color-mix(in srgb,var(--acento) 18%,transparent);color:var(--acento);
}

/* Depoimentos alternando cor da borda */
.grade > .dep:nth-child(3n+1){border-left-color:var(--rosa)}
.grade > .dep:nth-child(3n+2){border-left-color:var(--turquesa)}
.grade > .dep:nth-child(3n+3){border-left-color:var(--lima)}

/* Barra de progresso e linha do topo: arco-íris */
.progresso{background:linear-gradient(90deg,var(--rosa),var(--laranja),var(--ambar),var(--lima),var(--turquesa),var(--lilas))}
.topo::after{background:linear-gradient(90deg,transparent,var(--rosa),var(--ambar),var(--lima),var(--turquesa),var(--lilas),transparent);background-size:220% 100%}
.painel-barra i{background:linear-gradient(90deg,var(--ambar),var(--lima),var(--turquesa),var(--rosa))}
.hero::after{background:linear-gradient(90deg,transparent,var(--rosa),var(--ambar),var(--turquesa),var(--lilas),transparent);opacity:.7}

/* Sirene: rosa e turquesa */
.hero-fx .sirene{background:linear-gradient(100deg,transparent,rgba(255,61,138,.24),transparent)}
.hero-fx .sirene.fria{background:linear-gradient(100deg,transparent,rgba(34,211,238,.20),transparent)}
.hero-fx .grid{
  background-image:
    linear-gradient(rgba(167,139,250,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,139,250,.10) 1px,transparent 1px);
}

/* Fogos multicoloridos */
@keyframes fogo{
  0%{opacity:0;box-shadow:0 0 0 0 var(--ambar),0 0 0 0 var(--rosa),0 0 0 0 var(--turquesa),0 0 0 0 var(--lima),0 0 0 0 var(--lilas),0 0 0 0 var(--laranja)}
  6%{opacity:1}
  40%{opacity:.95;box-shadow:
      36px -28px 0 0 var(--ambar), -32px -20px 0 0 var(--rosa),
      10px -50px 0 0 var(--turquesa), -48px 8px 0 0 var(--lima),
      28px 24px 0 0 var(--lilas), -14px 44px 0 0 var(--laranja)}
  62%{opacity:0;box-shadow:
      52px -40px 0 -1px var(--ambar), -46px -28px 0 -1px var(--rosa),
      14px -70px 0 -1px var(--turquesa), -68px 12px 0 -1px var(--lima),
      40px 34px 0 -1px var(--lilas), -20px 62px 0 -1px var(--laranja)}
  100%{opacity:0}
}

/* Confete caindo no hero */
.hero-fx .confete{position:absolute;top:-8%;width:8px;height:13px;border-radius:2px;opacity:.85;
  animation:cai 9s linear infinite}
.hero-fx .confete:nth-child(8n+1){left:8%;background:var(--rosa);animation-duration:8s}
.hero-fx .confete:nth-child(8n+2){left:22%;background:var(--turquesa);animation-duration:11s;animation-delay:1.4s}
.hero-fx .confete:nth-child(8n+3){left:37%;background:var(--ambar);animation-duration:9.5s;animation-delay:.6s}
.hero-fx .confete:nth-child(8n+4){left:53%;background:var(--lima);animation-duration:12s;animation-delay:2.2s}
.hero-fx .confete:nth-child(8n+5){left:68%;background:var(--lilas);animation-duration:8.6s;animation-delay:3.1s}
.hero-fx .confete:nth-child(8n+6){left:81%;background:var(--laranja);animation-duration:10.5s;animation-delay:1.1s}
.hero-fx .confete:nth-child(8n+7){left:92%;background:var(--rosa);animation-duration:9.2s;animation-delay:4s}
.hero-fx .confete:nth-child(8n+8){left:15%;background:var(--turquesa);animation-duration:13s;animation-delay:5.2s}
@keyframes cai{
  0%{transform:translateY(-30px) rotate(0deg);opacity:0}
  10%{opacity:.8}
  85%{opacity:.55}
  100%{transform:translateY(130%) rotate(540deg);opacity:0}
}

/* LED e faixas: amarelo com pontos coloridos */
.led-track span i:nth-of-type(2n){color:var(--turquesa);text-shadow:0 0 10px var(--turquesa)}
.led-track span i:nth-of-type(3n){color:var(--lima);text-shadow:0 0 10px var(--lima)}

/* Ocasião no olho e no FAQ */
.faq summary::after{color:var(--turquesa)}
.faq details:nth-child(2n) summary::after{color:var(--ambar)}
.faq details:nth-child(3n) summary::after{color:var(--lima)}

/* CTA final: três luzes respirando */
.final{
  background:
    radial-gradient(80% 60% at 18% 110%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(80% 60% at 82% 110%, rgba(255,208,40,.18), transparent 60%),
    var(--noite-2);
}
.final::before{background:radial-gradient(closest-side,rgba(255,61,138,.26),transparent 70%)}

/* Selos do hero com pontinho colorido */
.selo li::before{content:"";display:inline-block;vertical-align:middle;
  width:7px;height:7px;margin:-2px 9px 0 0;border-radius:50%;
  background:var(--acento,var(--rosa));box-shadow:0 0 10px var(--acento,var(--rosa))}
.selo li:nth-child(3n+1){--acento:var(--ambar)}
.selo li:nth-child(3n+2){--acento:var(--turquesa)}
.selo li:nth-child(3n+3){--acento:var(--lima)}

@media (prefers-reduced-motion: reduce){
  .hero-fx .confete{display:none}
}

/* ============================================================================
   MÍDIA REAL — fotos 4:3, retratos 3:4 e o vídeo de reação
   ========================================================================== */
.foto{
  position:relative;margin:0;border-radius:var(--raio);overflow:hidden;
  border:1px solid var(--borda);background:var(--superficie);
}
.foto img{
  width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.foto.retrato img{aspect-ratio:3/4}
.foto:hover img{transform:scale(1.045)}
.foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:12.5px;line-height:1.35;color:#fff;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(9,4,16,.9));
}
.foto figcaption b{color:var(--ambar);font-weight:700}
.foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.midia .foto.destaque{grid-column:span 2}
@media (min-width:720px){ .midia .foto.destaque{grid-column:span 1} }

/* vídeo de reação */
.video{
  position:relative;margin:0 0 16px;border-radius:var(--raio);overflow:hidden;
  border:1px solid var(--borda);background:#000;
  box-shadow:0 18px 46px -26px rgba(0,0,0,.95);
}
.video video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}
.video-legenda{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;font-size:13.5px;color:var(--texto-3);
}
.video-legenda b{color:var(--ambar)}
.video-legenda .marca-vivo{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rosa);
}
.video-legenda .marca-vivo::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--rosa);
  animation:sirene 2.4s infinite;
}
/* retratos cortados em 4:3 mantêm o rosto no enquadramento */
.foto img.alto{object-position:center 16%}

/* Trio de números: cabe em 3 colunas no celular sem quebrar */
.numeros{gap:10px}
.numeros div{padding:16px 6px}
.numeros b{
  font-size:clamp(21px,6.2vw,32px);letter-spacing:-.02em;white-space:nowrap;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
}
.numeros b i{font-style:normal;font-size:.62em;font-weight:800}
.numeros > div > span{display:block;font-size:12px;line-height:1.3;margin-top:6px;text-wrap:balance}
.numeros b span{font-size:inherit;line-height:inherit;color:inherit;margin:0;display:inline}

/* O 60.000 é o ativo mais forte: ganha a linha inteira */
.numeros{grid-template-columns:1fr 1fr}
.numeros .destaque{grid-column:1 / -1;padding:22px 14px}
.numeros .destaque b{
  font-size:clamp(40px,13vw,68px);line-height:1;
  text-shadow:0 0 26px color-mix(in srgb,var(--acento) 60%,transparent);
}
.numeros .destaque b i{font-size:.5em}
.numeros .destaque > span{font-size:14px;margin-top:10px;color:var(--texto-2)}

/* ============================================================================
   PACOTES — cards e tabela comparativa
   ========================================================================== */
.pacotes{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){ .pacotes{grid-template-columns:1fr 1fr} }

.pacote{
  position:relative;display:flex;flex-direction:column;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);
  padding:22px 20px;overflow:hidden;--acento:var(--rosa);
}
.pacotes .pacote:nth-child(4n+1){--acento:var(--rosa)}
.pacotes .pacote:nth-child(4n+2){--acento:var(--ambar)}
.pacotes .pacote:nth-child(4n+3){--acento:var(--turquesa)}
.pacotes .pacote:nth-child(4n+4){--acento:var(--lima)}
.pacote::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--acento);box-shadow:0 0 18px var(--acento);
}
.pacote h3{
  font-size:clamp(22px,5.4vw,28px);color:var(--acento);margin:0 0 2px;
  text-shadow:0 0 22px color-mix(in srgb,var(--acento) 45%,transparent);
}
.pacote .para{font-size:14px;color:var(--texto-3);margin:0 0 16px}
.pacote ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.pacote li{
  position:relative;padding:8px 0 8px 28px;font-size:15.5px;color:var(--texto-2);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.pacote li:last-child{border-bottom:0}
.pacote li::before{
  content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;
  border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(-45deg);
}
.pacote li b{color:var(--texto)}
.pacote .btn{width:100%}

/* Tabela comparativa */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--raio);border:1px solid var(--borda)}
table.comp{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;background:var(--superficie)}
table.comp th,table.comp td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--borda)}
table.comp thead th{
  position:sticky;top:0;background:var(--superficie-2);color:var(--texto);
  font-family:var(--f-titulo);font-size:14px;letter-spacing:.01em;white-space:nowrap;
}
table.comp thead th:nth-child(2){color:var(--rosa)}
table.comp thead th:nth-child(3){color:var(--ambar)}
table.comp thead th:nth-child(4){color:var(--turquesa)}
table.comp thead th:nth-child(5){color:var(--lima)}
table.comp tbody th{
  text-align:left;font-weight:600;color:var(--texto-2);white-space:nowrap;
  position:sticky;left:0;background:var(--superficie);z-index:1;
}
table.comp td.sim{color:var(--lima);font-weight:800}
table.comp td.nao{color:var(--texto-3);opacity:.6}
table.comp tbody tr:last-child th,table.comp tbody tr:last-child td{border-bottom:0}
.tabela-nota{font-size:13px;color:var(--texto-3);margin:10px 0 0}
@media (max-width:600px){
  table.comp{min-width:600px;font-size:13.5px}
  table.comp th,table.comp td{padding:10px 8px}
  table.comp tbody th{white-space:normal;max-width:148px;line-height:1.25}
  table.comp thead th{font-size:13px}
}

/* ============================================================================
   VÍDEOS DO YOUTUBE — capa leve, player só carrega no toque
   ========================================================================== */
.videos{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){ .videos{grid-template-columns:1fr 1fr} }
.videos .video-item{margin:0}

.yt{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  padding:0;background:#000;cursor:pointer;
}
.yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s ease}
.yt:hover img{transform:scale(1.04);opacity:.85}
.yt::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(9,4,16,.85));
}
.yt .play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--btn-a),var(--btn-b));
  box-shadow:0 10px 30px -8px rgba(0,0,0,.9), 0 0 0 0 rgba(255,61,138,.6);
  animation:pulsoPlay 2.6s ease-out infinite;
}
.yt .play::before{
  content:"";width:0;height:0;margin-left:5px;
  border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;
}
@keyframes pulsoPlay{
  0%{box-shadow:0 10px 30px -8px rgba(0,0,0,.9), 0 0 0 0 rgba(255,61,138,.55)}
  70%{box-shadow:0 10px 30px -8px rgba(0,0,0,.9), 0 0 0 18px rgba(255,61,138,0)}
  100%{box-shadow:0 10px 30px -8px rgba(0,0,0,.9), 0 0 0 0 rgba(255,61,138,0)}
}
.yt .titulo{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 14px 12px;
  font-family:var(--f-corpo);font-size:14.5px;line-height:1.3;font-weight:600;
  color:#fff;text-align:left;
}
.yt .selo-yt{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--ambar);background:rgba(9,4,16,.7);border:1px solid var(--borda);
  border-radius:999px;padding:4px 10px;
}
.yt-frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--raio);
  overflow:hidden;border:1px solid var(--borda);background:#000;
}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videos figcaption{margin-top:8px;font-size:13.5px;color:var(--texto-3)}

/* Short vertical e vídeo em destaque */
.yt.vertical{aspect-ratio:9/16}
.video-destaque{display:grid;gap:16px;align-items:center;grid-template-columns:1fr}
@media (min-width:760px){ .video-destaque{grid-template-columns:minmax(0,300px) 1fr} }
.video-destaque .texto h3{margin-bottom:8px}
.video-destaque .texto p{color:var(--texto-2);font-size:16px;margin:0 0 14px}
.videos.tres{grid-template-columns:1fr}
@media (min-width:720px){ .videos.tres{grid-template-columns:repeat(3,1fr)} }

/* ============================================================================
   PASSE DE OTIMIZAÇÃO — desktop e celular
   ========================================================================== */

/* Respiro que cresce com a tela, em vez de padding fixo */
.sec{padding:clamp(44px,5.4vw,84px) 0}
.wrap{padding-inline:clamp(18px,4vw,32px)}
@media (min-width:1120px){ :root{--max:1140px} }

/* Celular: hero mais curto, CTA sobe */
@media (max-width:600px){
  .hero{padding:26px 0 36px}
  .hero .lead{font-size:17.5px}
  .led-strip{margin-bottom:14px}
  .selo{gap:6px;margin-top:18px}
  .selo li{font-size:12.5px;padding:6px 12px}
  .selo li::before{margin-right:8px}
  .cta-bloco{margin-top:20px}
  h2{margin-bottom:.45em}
  /* dois itens de menu cabem em telas de 380px pra cima */
  .nav{gap:14px}
  .nav a:nth-child(-n+2){display:inline}
  .nav a:nth-child(n+3){display:none}
}
@media (max-width:379px){
  .nav a:nth-child(n+2){display:none}
}

/* Desktop: linha de leitura confortável e vídeos maiores */
@media (min-width:1000px){
  .hero{padding:52px 0 60px}
  .hero h1{max-width:19ch}
  .hero .lead{font-size:20px;max-width:52ch}
  .sec > .wrap > .lead{max-width:62ch}
  .cena{padding-left:26px}
  .cena p{font-size:17.5px}
  .videos{gap:20px}
  .videos.tres{grid-template-columns:repeat(3,1fr);gap:18px}
  .midia{gap:16px}
  .garantia{gap:16px}
  .faq summary{font-size:17.5px;padding-block:19px}
}

/* Telas muito largas: a galeria de fotos usa 4 colunas */
@media (min-width:1220px){
  .midia{grid-template-columns:repeat(4,1fr)}
  .midia .foto.destaque{grid-column:span 2}
}

/* O vídeo próprio não estica além do confortável no desktop */
@media (min-width:1000px){
  .video{max-width:860px}
  .video-legenda{max-width:860px}
}

/* ============================================================================
   PACOTES — versão desktop de verdade
   ========================================================================== */

/* Barra de escolha rápida */
.atalhos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.atalhos a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;
  border-radius:999px;text-decoration:none;font-size:14.5px;font-weight:600;
  color:var(--texto);background:var(--superficie);border:1.5px solid var(--borda);
  transition:border-color .15s ease,background .15s ease;
}
.atalhos a:hover{border-color:var(--acento,var(--rosa));background:var(--superficie-2)}
.atalhos a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acento,var(--rosa));box-shadow:0 0 10px var(--acento,var(--rosa))}
.atalhos li:nth-child(4n+1) a{--acento:var(--rosa)}
.atalhos li:nth-child(4n+2) a{--acento:var(--ambar)}
.atalhos li:nth-child(4n+3) a{--acento:var(--turquesa)}
.atalhos li:nth-child(4n+4) a{--acento:var(--lima)}

/* Grade: 1 → 2 → 4 colunas */
@media (min-width:1120px){ .pacotes{grid-template-columns:repeat(4,1fr);gap:14px} }
.pacote{scroll-margin-top:80px}

/* Selo do diferencial, no alto do card */
.pacote .marca-pacote{
  position:absolute;top:14px;right:14px;z-index:2;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--noite);background:var(--acento);border-radius:999px;padding:5px 11px;
  box-shadow:0 0 18px color-mix(in srgb,var(--acento) 45%,transparent);
}
.pacote h3{padding-right:96px}
@media (min-width:1120px){
  .pacote{padding:20px 16px}
  .pacote h3{font-size:23px;padding-right:0}
  .pacote .marca-pacote{position:static;display:inline-block;margin:0 0 10px}
  .pacote li{font-size:14.5px;padding:7px 0 7px 26px}
  .pacote li::before{top:13px}
  .pacote .para{font-size:13px;min-height:2.6em}
}

/* Linha-resumo: o que este pacote tem que os outros não têm */
.pacote .diferencial{
  margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.4;
  color:var(--texto);background:color-mix(in srgb,var(--acento) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acento) 32%,transparent);
}
.pacote .diferencial b{color:var(--acento)}

/* Tabela: zebra, coluna sob o dedo e cabeçalho grudado */
table.comp tbody tr:nth-child(odd){background:color-mix(in srgb,var(--superficie-2) 55%,transparent)}
table.comp tbody tr:nth-child(odd) th{background:color-mix(in srgb,var(--superficie-2) 55%,var(--superficie))}
table.comp tbody tr:hover{background:var(--superficie-2)}
table.comp tbody tr:hover th{background:var(--superficie-2)}
table.comp td.sim{font-size:17px}
@media (min-width:1000px){
  table.comp{font-size:15.5px}
  table.comp th,table.comp td{padding:14px 12px}
  table.comp thead th{font-size:15px}
}
/* grade de 4 (teaser de pacotes na home) */
.g4{grid-template-columns:1fr}
@media (min-width:640px){ .g4{grid-template-columns:1fr 1fr} }
@media (min-width:1060px){ .g4{grid-template-columns:repeat(4,1fr)} }
/* No desktop o botão flutuante vai para a esquerda: no canto direito ele cobria
   o CTA do último pacote. */
@media (min-width:1000px){
  .flutua{left:24px;right:auto;bottom:24px;min-height:52px;font-size:16px}
}
/* o flutuante recolhe quando já há um CTA visível */
.flutua{transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.3,1)}
.flutua.escondido{opacity:0;transform:translateY(150%);pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .flutua.escondido{transform:none;display:none}
}

/* ==========================================================================
   PASSE DE OTIMIZAÇÃO 2 — toque, render e leitura (desktop + celular)
   ========================================================================== */

/* --- 1. Área de toque de 44px sem mexer no visual ------------------------
   O dedo médio tem ~9mm. Links de 22px são acertáveis no mouse e frustrantes
   no celular. Aqui a área cresce por pseudo-elemento, então o desenho da
   página não muda um pixel. */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;inset:-11px -8px}

.rodape-links{gap:0 20px;margin:10px 0}
.rodape-links a{display:inline-flex;align-items:center;min-height:44px}

.marca{min-height:44px}

/* links soltos em parágrafo (os "ver mais" secundários) */
p:has(> a:only-child) > a{display:inline-block;position:relative}
p:has(> a:only-child) > a::after{content:"";position:absolute;inset:-13px -6px}

/* --- 2. Custo de renderização -------------------------------------------
   content-visibility:auto foi testado aqui: economizava ~60 ms de carga num
   celular fraco, mas a altura da página variava até 20% durante a rolagem
   (a barra de rolagem encolhia embaixo do dedo). Não compensa numa página
   cujo trabalho é levar a pessoa até o botão. Ficou de fora de propósito.

   O que rende sem efeito colateral: a camada de efeitos do hero (confete,
   sirene, varredura, fogos) para de animar quando sai da tela. */
.hero-fx{contain:layout paint style}
.hero.fora .hero-fx *{animation-play-state:paused!important}

/* --- 3. Imagens: fundo enquanto carrega, sem clarão branco --------------- */
.foto img,.yt img{background:var(--superficie)}

/* --- 4. Desktop grande: a linha de leitura para de esticar --------------- */
@media (min-width:1280px){
  .sec > .wrap > p.lead{max-width:62ch}
  .passos p,.pacote li{max-width:64ch}
}

/* --- 5. Celular baixo (iPhone SE e afins): menos altura desperdiçada ----- */
@media (max-width:600px) and (max-height:700px){
  .hero{padding:18px 0 28px}
  .led-strip{margin-bottom:10px}
  .selo{margin-top:14px}
}

/* --- 6. Rolagem suave só para quem não pediu movimento reduzido ---------- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ==========================================================================
   PASSE 3 — TELAS GRANDES
   Num monitor de 2560px o site ocupava 45% da largura e o corpo continuava
   em 17px: a página parecia uma tira no meio da tela. Aqui a coluna e a
   tipografia crescem juntas, em degraus, para a proporção não se perder.
   ========================================================================== */
@media (min-width:1500px){
  :root{--max:1260px}
  body{font-size:18px}
  h1{font-size:clamp(27px,6.9vw,56px)}
  h2{font-size:clamp(24px,5.6vw,42px)}
  h3{font-size:20px}
  .topo-in{height:70px}
  .marca img{height:52px}
  .nav{gap:20px}
  .nav a{font-size:15.5px}
  .hero{padding:60px 0 68px}
  .hero h1{max-width:21ch}
  .hero .lead{font-size:21px;max-width:52ch}
  .selo li{font-size:14px;padding:8px 15px}
  .sec > .wrap > p.lead{max-width:64ch}
}

@media (min-width:1900px){
  :root{--max:1360px}
  body{font-size:19px}
  h1{font-size:clamp(27px,6.9vw,62px)}
  h2{font-size:clamp(24px,5.6vw,46px)}
  .topo-in{height:78px}
  .marca img{height:58px}
  .nav a{font-size:16.5px}
  .hero{padding:72px 0 80px}
  .hero .lead{font-size:22px}
  .btn{font-size:18px}
}

@media (min-width:2400px){
  :root{--max:1480px}
  body{font-size:20px}
  .hero{padding:84px 0 92px}
}

/* ==========================================================================
   DEPOIMENTO EM FORMATO DE MENSAGEM
   É um card do site desenhado como balão de conversa — de propósito NÃO imita
   uma captura de tela: não tem barra do app, ícone de câmera, "online" nem
   tique azul. Print de conversa forjado é propaganda enganosa; card estilizado
   com frase real e nome real é depoimento normal.
   ========================================================================== */
.dep{
  background:var(--superficie);border:1px solid var(--borda);border-left:1px solid var(--borda);
  border-radius:var(--raio);padding:18px 18px 16px;position:relative;
  display:flex;flex-direction:column;gap:12px;
}
.dep-topo{display:flex;align-items:center;gap:10px}
.dep-foto{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-titulo);font-weight:800;font-size:16px;
  color:#0B0616;background:linear-gradient(135deg,var(--acento,var(--rosa)),var(--ambar));
}
.dep-nome{font-size:15px;font-weight:700;color:var(--texto);line-height:1.25}
.dep-nome i{display:block;font-style:normal;font-size:12.5px;font-weight:400;color:var(--texto-3)}
.dep blockquote{
  margin:0;position:relative;align-self:flex-start;
  background:var(--superficie-2,#2A1A42);border:1px solid var(--borda);
  border-radius:4px 14px 14px 14px;padding:13px 15px 11px;margin-left:7px;
  font-size:16px;line-height:1.5;color:var(--texto);
}
.dep blockquote::before{
  content:"";position:absolute;left:-7px;top:16px;width:0;height:0;
  border:7px solid transparent;border-right-color:var(--borda);border-left:0;
}
.dep blockquote::after{
  content:"";position:absolute;left:-5px;top:17px;width:0;height:0;
  border:6px solid transparent;border-right-color:var(--superficie-2);border-left:0;
}
.dep cite{font-style:normal;font-size:13px;color:var(--texto-3);margin-top:-2px}
.dep cite b{color:var(--texto-2)}
.dep:nth-child(3n+1){--acento:var(--rosa)}
.dep:nth-child(3n+2){--acento:var(--turquesa)}
.dep:nth-child(3n+3){--acento:var(--lima)}

/* Placeholder visível: impossível subir sem querer achando que é real */
.dep.exemplo{border:1px dashed var(--ambar);background:rgba(255,208,40,.05)}
.dep.exemplo blockquote{color:var(--texto-2);border-style:dashed}
.dep.exemplo::after{
  content:"EXEMPLO — trocar pela frase real";
  position:absolute;top:-9px;right:12px;
  background:var(--ambar);color:#2A1A00;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;padding:3px 9px;border-radius:999px;
}
@media (min-width:1500px){ .dep blockquote{font-size:17px} .dep-nome{font-size:16px} }