/* cocina-para-uno-uy-2026 */
/* ============================================================
   FONTE — BLOCK BERTHOLD
   Coloque os arquivos em assets/fonts/ (veja assets/fonts/LEIA-ME.md)
   Enquanto não estiver lá, cai no fallback Archivo (Google Fonts).
   ============================================================ */
@font-face{
  font-family:'Block';
  src:local('Block Berthold'), local('BlockBE-Regular'), local('Block BE Regular'), local('Berthold Block'),
      url('../fonts/BlockBE-Regular.woff2') format('woff2'),
      url('../fonts/BlockBE-Regular.woff') format('woff');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Block';
  src:local('Block Berthold Heavy'), local('BlockBE-Heavy'), local('Block BE Heavy'),
      url('../fonts/BlockBE-Heavy.woff2') format('woff2'),
      url('../fonts/BlockBE-Heavy.woff') format('woff');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --lime:#C5F82E;
  --lime-dark:#A8DC10;
  --green:#2FB865;
  --ink:#0D0E11;
  --ink-card:#191B21;
  --ink-line:#282B33;
  --paper:#FFFFFF;
  --mist:#F5F7FA;
  --text:#101114;
  --soft:#6B7280;
  --line:#E6E8EC;
  --rose:#E23A22;
  --amber:#B37D00;

  --display:'Block','Archivo','Arial Black',system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --dock-h:150px;
}

*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--body);
  color:var(--text);
  background:#2C2F36;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
code{font-family:ui-monospace,monospace;font-size:.85em;}

/* ============================================================
   MOLDURA (só para preview em desktop — no celular ocupa tudo)
   ============================================================ */
.device{
  width:100%;max-width:430px;margin:0 auto;
  background:var(--paper);position:relative;overflow:hidden;
  /* aqui é min-height, então dvh é o certo: o elemento acompanha a
     área visível e nunca sobra fundo embaixo. O vh é só o degrau
     para navegador que não conhece dvh */
  min-height:100vh;
  min-height:100dvh;
}
/* A moldura de aparelho é só para você ver no computador.
   O min-height é obrigatório: sem ele, um celular DEITADO passa
   dos 540px de largura e ganha uma moldura de 880px de altura
   dentro de uma tela de 430px — o rodapé some. */
@media (min-width:540px) and (min-height:700px){
  body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 0;}
  .device{height:880px;min-height:0;border-radius:44px;
    box-shadow:0 0 0 11px #0A0A0C,0 0 0 13px #35383F,0 30px 70px rgba(0,0,0,.55);}
}

/* barra de progresso */
.progress{position:absolute;inset:0 0 auto 0;height:3px;background:rgba(130,130,130,.2);z-index:60;}
.progress-fill{display:block;height:100%;width:9%;background:var(--lime);transition:width .45s cubic-bezier(.4,0,.2,1);}
.progress.hide{display:none;}
/* em tela lime o verde sumiria no fundo */
.device:has(.tone-lime) .progress{background:rgba(13,14,17,.15);}
.device:has(.tone-lime) .progress-fill{background:var(--ink);}

/* ============================================================
   TELAS — cada etapa é uma página, com uma .screen só
   ============================================================ */
.screen{
  display:none;flex-direction:column;position:relative;
  min-height:100vh;
  min-height:100dvh;
  animation:entrar .32s ease;
}
@media (min-width:540px) and (min-height:700px){ .screen{min-height:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;} }
.screen.is-active{display:flex;}
@keyframes entrar{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
/* saída antes de trocar de etapa (parece app, não recarregamento) */
body.saindo .screen{animation:sair .19s ease forwards;}
@keyframes sair{to{opacity:0;transform:translateX(-16px);}}

/* ============================================================
   MOTOR DE ANIMAÇÃO (usado por todas as etapas)
   ============================================================ */
.revelar{
  opacity:0;transform:translateY(var(--rev-y,16px));
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
}
.revelado{opacity:1;transform:none;}

/* toque nos botões */
.btn,.reply,.slider-knob{position:relative;overflow:hidden;}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.18;transform:scale(0);
  animation:onda .6s ease-out forwards;
}
@keyframes onda{to{transform:scale(1);opacity:0;}}

/* pulso de atenção no CTA principal */
.btn-lime.pulsa{animation:pulsar 2.4s ease-in-out infinite;}
@keyframes pulsar{
  0%,100%{box-shadow:0 8px 28px -8px rgba(197,248,46,.85);}
  50%{box-shadow:0 8px 34px -6px rgba(197,248,46,1),0 0 0 6px rgba(197,248,46,.13);}
}

/* brilho que atravessa o botão */
.brilha::before{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:varrer 3.4s ease-in-out infinite;pointer-events:none;
}
@keyframes varrer{0%{left:-60%;}55%,100%{left:130%;}}

/* número que acabou de mudar */
.piscou{animation:piscar .5s ease;}
@keyframes piscar{0%{transform:scale(1);}35%{transform:scale(1.11);}100%{transform:scale(1);}}

/* confete */
.confete-caixa{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden;}
.confete{position:absolute;width:9px;height:9px;display:block;}

@media (prefers-reduced-motion:reduce){
  .screen{animation:none;}
  body.saindo .screen{animation:none;}
  .revelar{opacity:1;transform:none;transition:none;}
  .btn-lime.pulsa,.brilha::before{animation:none;}
  .chart-line,.chart-area,.chart-dot,.chart-pin{animation:none !important;stroke-dashoffset:0 !important;opacity:1 !important;}
}

.tone-light{background:var(--paper);color:var(--text);}
.tone-mist {background:var(--mist); color:var(--text);}
.tone-dark {background:var(--ink);  color:#fff;}
.tone-lime {background:var(--lime); color:var(--ink);}

.pad{padding:30px 22px 8px;flex:1;}
.screen-flush .pad{padding:0;}
.flow-center{display:flex;flex-direction:column;justify-content:center;}
/* svh aqui também: com 100vh no iPhone o botão do rodapé nasceria
   abaixo da dobra, e é o botão que leva para a etapa seguinte */
@media (max-width:539px){
  .flow-center{
    min-height:calc(100vh - var(--dock-h));
    min-height:calc(100svh - var(--dock-h));
    min-height:calc(var(--altura-tela, 100svh) - var(--dock-h));
  }
}

/* tudo centralizado (etapas de abertura) */
.all-center{text-align:center;}
.all-center .pill-social{align-self:center;}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.h-xl,.h-lg,.h-md,.h-sm{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1.12;}
.h-xl{font-size:clamp(26px,7.4vw,31px);}
.h-lg{font-size:clamp(22px,6.2vw,26px);}
.h-md{font-size:clamp(17px,4.7vw,19px);line-height:1.3;}
.h-sm{font-size:16px;line-height:1.3;}
.center{text-align:center;}

.lead{font-size:14.5px;line-height:1.55;color:var(--soft);margin-top:12px;}
.tone-dark .lead{color:#9CA3AF;}
.lead.dark{color:#41500F;}
.hl{color:var(--lime-dark);}
.tone-dark .hl,.tone-lime .hl{color:var(--lime);}
.tone-lime .hl{color:var(--ink);}
b,strong{font-weight:700;color:inherit;}
.tone-light b,.tone-mist b{color:var(--text);}

.fineprint{font-size:10.5px;line-height:1.55;color:#9AA1AC;margin-top:14px;}
.tone-dark .fineprint{color:#5B6270;}

/* ============================================================
   PILL / TAGS
   ============================================================ */
.pill-social{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:#EAFBD7;color:#3F6B00;border:1px solid #CDEF9C;
  padding:7px 14px 7px 11px;border-radius:99px;
  font-size:12.5px;font-weight:600;
}
.pill-social::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(47,184,101,.6);animation:ping 1.8s infinite;}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(47,184,101,0);}100%{box-shadow:0 0 0 0 rgba(47,184,101,0);}}

.tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.7px;
  padding:5px 9px;border-radius:5px;margin-bottom:10px;font-family:var(--body);}
.tag-lime {background:rgba(197,248,46,.14);color:var(--lime);}
.tag-blue {background:#1F3FBF;color:#fff;}
.tag-amber{background:#FFD75E;color:#5A3E00;}
.tag-green{background:#B9F0CE;color:#0B5B2C;}

/* ============================================================
   CALLOUTS
   ============================================================ */
.callout{border-radius:var(--r-md);padding:15px 17px;font-size:13.5px;line-height:1.55;margin-top:18px;}
.callout p{font-size:13.5px;line-height:1.55;margin-top:4px;}
.callout.small{font-size:11.5px;padding:11px 14px;}
.callout-amber{background:#FFF8E6;border:1px solid #F2DFA6;color:#7A5B12;}
.callout-green{background:#EDFBF2;border:1px solid #B7E8C8;color:#1B5C34;}
.callout-rose {background:#FFF1EE;border:1px solid #F6C9BF;color:#9E2F1B;font-weight:600;font-size:12.5px;}

/* ============================================================
   DOCK + BOTÕES
   ============================================================ */
.dock{
  position:sticky;bottom:0;z-index:20;
  padding:16px 22px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 62%,rgba(255,255,255,0));
}
.tone-mist .dock{background:linear-gradient(to top,var(--mist) 62%,rgba(245,247,250,0));}
.tone-dark .dock{background:linear-gradient(to top,var(--ink) 62%,rgba(13,14,17,0));}
.tone-lime .dock{background:linear-gradient(to top,var(--lime) 62%,rgba(197,248,46,0));}

.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:-.01em;
  padding:18px 20px;border:none;border-radius:var(--r-md);cursor:pointer;
  text-decoration:none;transition:transform .12s ease,box-shadow .2s ease,opacity .2s;
}
.btn:active{transform:scale(.975);}
.btn:disabled{opacity:.38;cursor:not-allowed;}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 8px 28px -8px rgba(197,248,46,.85);}
.btn-ink {background:var(--ink);color:#fff;}
.btn-buy {background:var(--green);color:#fff;box-shadow:0 8px 26px -8px rgba(47,184,101,.9);margin-top:6px;}
.btn-ghost{background:transparent;border:1.5px solid var(--ink-line);color:#C9CDD6;font-size:14px;margin-top:14px;}
.btn::after{content:"›";font-size:19px;opacity:.75;}
.btn-ghost::after,.btn-ink::after{content:none;}

/* ---- trilho de deslizar (etapa 1) — ver bloco completo mais abaixo ---- */
.slide-hint{margin-top:14px;text-align:center;font-size:10.5px;letter-spacing:1.6px;color:#A3AAB5;font-weight:600;}
.slide-hint::after{content:" › › ›";letter-spacing:2px;animation:nudge 1.4s infinite;display:inline-block;}
@keyframes nudge{0%,100%{opacity:.35;transform:translateX(0);}50%{opacity:1;transform:translateX(4px);}}

/* ============================================================
   ETAPA 1.1 — VSL
   ============================================================ */
.live-tag{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:10;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(226,58,34,.92);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.4px;padding:5px 12px;border-radius:99px;white-space:nowrap;
}
.live-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:ping 1.6s infinite;}
.vsl{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:62dvh;}
.vsl video{width:100%;height:100%;object-fit:cover;}
.vsl-empty{display:flex;flex-direction:column;align-items:center;gap:16px;color:#5B6270;text-align:center;padding:24px;}
.vsl-play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;padding-left:4px;}
.vsl-empty-txt{font-size:12px;line-height:1.7;}
.vsl-cc{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  background:rgba(0,0,0,.72);color:#fff;font-size:14px;font-weight:600;
  padding:7px 13px;border-radius:6px;white-space:nowrap;
}

/* ============================================================
   ETAPA 2 — QUEBRA DE CRENÇA
   ============================================================ */
.ticker{
  background:var(--ink);border-radius:var(--r-lg);padding:20px 16px 17px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.ticker-label{font-size:9.5px;letter-spacing:1.1px;color:#7E848F;font-weight:700;}
.ticker-value{font-family:var(--display);font-weight:900;font-size:34px;color:var(--lime);letter-spacing:-.02em;line-height:1;}
.ticker-var{font-size:11px;color:#C7F58A;background:rgba(197,248,46,.13);padding:3px 10px;border-radius:99px;}
.ticker-var::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rose);margin-right:6px;vertical-align:middle;}

.icon-row{display:flex;gap:12px;justify-content:center;margin:20px 0 4px;}
.icon-row span{
  width:56px;height:56px;border-radius:15px;background:var(--mist);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;
}
.icon-row img{width:100%;height:100%;object-fit:cover;}

.deny-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:20px;}
.deny-list li{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--rose);
  border-radius:var(--r-sm);padding:13px 14px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:9px;box-shadow:0 2px 8px -4px rgba(16,17,20,.12);
}
.deny-list li::before{content:"✕";color:var(--rose);font-weight:900;font-size:13px;}

/* ============================================================
   ETAPA 3 — COMPARAÇÃO (accordion)
   ============================================================ */
.versus{background:var(--ink);border-radius:var(--r-xl);padding:18px 14px;margin-top:22px;}
.versus-title{display:block;font-size:9.5px;letter-spacing:1.2px;color:#7E848F;font-weight:800;margin-bottom:13px;padding-left:4px;}
.vs-row{
  background:var(--ink-card);border-radius:var(--r-md);margin-bottom:9px;overflow:hidden;
  transition:background .25s ease;
}
.vs-row:last-child{margin-bottom:0;}
.vs-head{display:flex;align-items:center;gap:11px;padding:13px;cursor:pointer;}
.vs-mark{
  width:31px;height:31px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;
  background:#24272E;color:#8A9099;
}
.vs-txt{flex:1;min-width:0;}
.vs-name{display:block;font-family:var(--display);font-weight:900;font-size:15px;color:#fff;letter-spacing:-.01em;}
.vs-sum{display:block;font-size:10.5px;color:#7E848F;margin-top:2px;line-height:1.4;}
.vs-chev{
  width:29px;height:29px;border-radius:8px;flex:none;background:#24272E;color:#A9AFB8;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  transition:transform .28s ease;
}
.vs-body{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1);}
.vs-body p{padding:0 13px 14px;font-size:12.5px;line-height:1.6;color:#8A9099;}
.vs-row.open .vs-body{max-height:180px;}
.vs-row.open .vs-chev{transform:rotate(180deg);}

.vs-row.hero{background:var(--lime);}
.vs-row.hero .vs-name{color:var(--ink);}
.vs-row.hero .vs-sum{color:#4A6206;}
.vs-row.hero .vs-mark{background:var(--ink);color:var(--lime);}
.vs-row.hero .vs-chev{background:var(--ink);color:var(--lime);}
.vs-row.hero .vs-body p{color:#3E5305;}

/* ============================================================
   ETAPA 4 — CHAT
   ============================================================ */
#s-chat{background:var(--paper);}
.chat-top{
  display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:20;flex:none;
}
.chat-pic{
  width:41px;height:41px;border-radius:50%;flex:none;background:#E4E7EC center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:19px;position:relative;
}
.chat-pic::after{content:"";position:absolute;right:1px;bottom:1px;width:10px;height:10px;
  border-radius:50%;background:var(--green);border:2px solid var(--paper);}
.chat-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.chat-name{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:5px;}
.chat-name .ok{color:#1D9BF0;font-size:12px;}
.chat-state{font-size:11.5px;color:var(--green);font-weight:500;}
.chat-state i{font-style:normal;animation:dots 1.2s infinite;}
.chat-state i:nth-child(2){animation-delay:.15s;}
.chat-state i:nth-child(3){animation-delay:.3s;}
@keyframes dots{0%,60%,100%{opacity:.2;}30%{opacity:1;}}
.chat-icons{display:flex;gap:14px;font-size:15px;opacity:.55;}
.chat-icons i{font-style:normal;}

.chat-scroll{flex:1;overflow-y:auto;padding:16px 14px 6px;-webkit-overflow-scrolling:touch;}
.chat-system{
  display:block;width:fit-content;margin:0 auto 16px;
  background:#EEF0F3;color:#7A818C;font-size:9.5px;font-weight:700;letter-spacing:.7px;
  padding:5px 12px;border-radius:6px;
}
.chat-thread{display:flex;flex-direction:column;gap:9px;}

.bubble{
  max-width:88%;align-self:flex-start;position:relative;
  background:var(--paper);border:1px solid var(--line);color:var(--text);
  border-radius:14px;border-bottom-left-radius:4px;
  padding:11px 52px 11px 13px;font-size:13.5px;line-height:1.5;
  box-shadow:0 2px 8px -4px rgba(16,17,20,.16);
  animation:rise .26s ease;
}
.bubble .time{position:absolute;right:11px;bottom:8px;font-size:9.5px;color:#A9AFB8;}
.bubble.me{
  align-self:flex-end;background:#DCF8C6;border-color:#CBEDB1;
  border-bottom-left-radius:14px;border-bottom-right-radius:4px;
}
.bubble.me .time{color:#7C9B63;}
@keyframes rise{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

.typing{
  align-self:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;border-bottom-left-radius:4px;padding:14px 16px;display:flex;gap:4px;
}
.typing span{width:6px;height:6px;border-radius:50%;background:#B4BAC3;animation:dots 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}

.voice{
  align-self:flex-start;max-width:88%;display:flex;align-items:center;gap:11px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px;
  padding:11px 13px;box-shadow:0 2px 8px -4px rgba(16,17,20,.16);animation:rise .26s ease;
}
/* 40px é o mínimo confortável para o dedo; abaixo disso a pessoa erra o toque */
.voice-btn{width:40px;height:40px;border-radius:50%;flex:none;background:var(--green);color:#fff;
  border:none;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;padding-left:2px;}
.voice-mid{flex:1;min-width:0;}
.voice-wave{height:19px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#C6CBD3 0 2px,transparent 2px 5px);}
.voice-time{font-size:10px;color:#9AA1AC;margin-top:4px;display:block;}
.voice-pic{width:29px;height:29px;border-radius:50%;flex:none;background:#E4E7EC center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:14px;}

/* Resposta do lead: entra do lado direito, no formato de uma
   mensagem que ela está prestes a enviar. */
.reply{
  align-self:flex-end;max-width:78%;
  margin:6px 8px 2px 0;position:relative;
  background:var(--paper);border:1.5px solid var(--green);color:#1B7A45;
  font-family:var(--display);font-weight:900;font-size:13.5px;
  padding:12px 20px;cursor:pointer;
  border-radius:16px;border-bottom-right-radius:5px;
  box-shadow:0 5px 16px -6px rgba(47,184,101,.65);
}
.reply::before{
  content:"";position:absolute;right:-8px;bottom:-1.5px;
  width:0;height:0;border-style:solid;
  border-width:0 9px 11px 0;
  border-color:transparent var(--green) transparent transparent;
}
.reply:active{transform:scale(.97);}

.chat-dock{padding:0 14px;flex:none;}
.chat-dock:empty{display:none;}
.chat-dock .btn{margin-bottom:10px;}
.chat-bottom{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:11px 14px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper);
}
.chat-field{flex:1;background:var(--mist);color:#A3AAB5;font-size:13px;padding:11px 16px;border-radius:99px;}
.chat-send{width:37px;height:37px;border-radius:50%;background:#DDF3E4;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;}

/* ============================================================
   ETAPA 5 — GRÁFICO
   ============================================================ */
.stats{display:flex;gap:10px;margin-top:20px;}
.stat{flex:1;background:var(--ink-card);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:14px;}
.stat-label{display:block;font-size:9px;letter-spacing:.9px;color:#7E848F;font-weight:700;}
.stat-value{display:block;font-family:var(--display);font-weight:900;font-size:21px;margin-top:5px;letter-spacing:-.01em;}
.stat-delta{display:block;font-size:10.5px;color:var(--lime);margin-top:3px;}
.stat-delta::before{content:"▲ ";font-size:8px;}

.chart{background:var(--ink-card);border:1px solid var(--ink-line);border-radius:var(--r-xl);padding:18px 16px 14px;margin-top:12px;}
.chart-sub{display:block;font-size:10.5px;color:#6E7480;margin:3px 0 8px;}
.chart-value{display:block;font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.02em;margin-bottom:14px;}
.chart-stage{position:relative;height:118px;}
.chart-svg{width:100%;height:100%;overflow:visible;}
.chart-area{fill:url(#gradLime);opacity:0;}
.chart-line{fill:none;stroke:var(--lime);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:900;stroke-dashoffset:900;}
.is-active .chart-line{animation:draw 1.5s cubic-bezier(.4,0,.2,1) forwards .15s;}
.is-active .chart-area{animation:fade .9s ease forwards .75s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fade{to{opacity:1;}}
.chart-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--lime);
  border:2.5px solid var(--ink-card);opacity:0;transform:translate(-50%,-50%);}
.is-active .chart-dot{animation:fade .3s ease forwards 1.5s;}
.chart-pin{
  position:absolute;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-weight:900;font-size:11px;
  padding:4px 10px;border-radius:99px;transform:translate(-50%,-190%);opacity:0;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.is-active .chart-pin{animation:fade .3s ease forwards 1.6s;}
.chart-months{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;color:#6E7480;}
.chart-months .on{color:#fff;font-weight:700;}

/* ============================================================
   ETAPA 6 — BENEFÍCIOS
   ============================================================ */
.panel{border-radius:var(--r-lg);padding:18px;margin-top:16px;}
.panel-bad {background:#FFF1EE;border:1px solid #F6CDC4;}
.panel-good{background:#EDFBF2;border:1px solid #B7E8C8;}
.panel-title{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:900;font-size:13.5px;letter-spacing:.2px;margin-bottom:13px;}
.panel-title.bad{color:var(--rose);}
.panel-title.good{color:#128046;}
.panel-title.bad::before{content:"❗";}
.panel-title.good::before{content:"✅";}
.ticks{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px;font-weight:500;}
.ticks li{display:flex;align-items:flex-start;gap:9px;line-height:1.4;}
.ticks.bad li{color:#8C3A28;}
.ticks.good li{color:#155F37;}
.ticks li::before{font-size:13px;flex:none;margin-top:1px;}
.ticks.bad li::before {content:"⊗";color:#D9705A;}
.ticks.good li::before{content:"✔";color:var(--green);font-weight:900;}

/* ============================================================
   ETAPA 7 — TESE (mesma página dos benefícios)
   ============================================================ */
.divider{border:none;border-top:1px solid var(--line);margin:30px 0 24px;}
.article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  box-shadow:0 4px 18px -10px rgba(16,17,20,.2);}
.article-img{
  height:172px;border-radius:var(--r-md);margin-top:14px;background:var(--mist) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:46px;border:1px solid var(--line);
}
.article .lead{font-size:13.5px;}

/* ============================================================
   ETAPA 8 — VOUCHER
   ============================================================ */
.vault{position:relative;overflow:hidden;}
.deco{position:absolute;font-style:normal;opacity:.42;pointer-events:none;animation:float 5s ease-in-out infinite;}
.deco-1{top:16%;left:7%;font-size:26px;}
.deco-2{bottom:22%;right:9%;font-size:20px;animation-delay:.7s;}
.deco-3{top:31%;left:4%;font-size:30px;transform:rotate(-18deg);animation-delay:1.1s;}
.deco-4{top:38%;right:5%;font-size:26px;transform:rotate(14deg);animation-delay:1.6s;}
.deco-5{bottom:30%;left:12%;font-size:16px;animation-delay:2s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-9px) rotate(6deg);}}

.coupon{
  position:relative;z-index:2;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:26px 20px 20px;margin-top:26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:9px 9px 0 var(--ink);
}
.coupon.pop{animation:pop .55s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{0%{transform:scale(.9);}55%{transform:scale(1.04);}100%{transform:scale(1);}}
.coupon-face{display:flex;flex-direction:column;align-items:center;gap:9px;}
.coupon-logo{font-size:52px;line-height:1;display:block;}
.coupon-logo img{width:64px;height:64px;object-fit:contain;}
.coupon-logo.small{font-size:34px;}
.coupon-logo.small img{width:42px;height:42px;}
.coupon-logo.spin{animation:spin .55s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.coupon-txt{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1.15;}
.coupon-pct{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.03em;}
.coupon-pct-label{font-family:var(--display);font-weight:900;font-size:19px;margin-top:-6px;}
.coupon-note{font-size:11px;color:var(--soft);line-height:1.5;max-width:230px;margin-top:4px;}
.coupon-code{width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:2px;}
.bars{width:78%;height:42px;
  background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 9px,#111 9px 12px,transparent 12px 14px);}
.bars-num{font-size:11px;letter-spacing:2.5px;color:#3A3F49;font-weight:600;}

/* ============================================================
   ETAPA 8.1 — ENTREGA
   ============================================================ */
.thumb{
  position:relative;height:186px;border-radius:var(--r-lg);overflow:hidden;margin-top:18px;
  background:#2B2E35 center/cover no-repeat;display:flex;align-items:flex-end;
}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),transparent 55%);}
.thumb-cc{
  position:relative;z-index:2;margin:0 auto 14px;
  background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;font-weight:700;
  padding:6px 13px;border-radius:6px;text-decoration:underline;text-underline-offset:2px;
}
.stack{display:flex;flex-direction:column;gap:9px;margin-top:20px;}
.stack div{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--lime-dark);
  border-radius:var(--r-sm);padding:14px;font-size:13.5px;font-weight:600;
  box-shadow:0 2px 8px -4px rgba(16,17,20,.12);
}

/* ============================================================
   ETAPA 9 — OFERTA
   ============================================================ */
.plan{border-radius:var(--r-xl);margin-top:16px;overflow:hidden;}
.plan-anchor{background:var(--paper);border:1px solid #D6DAE0;padding:20px 18px;}
.plan-main  {background:var(--paper);border:2px solid var(--lime);box-shadow:0 14px 40px -18px rgba(197,248,46,.5);}
.plan-body{padding:20px 18px;}
.plan-badge{
  display:block;background:var(--lime);color:var(--ink);text-align:center;
  font-family:var(--display);font-weight:900;font-size:14px;padding:10px;
}
.plan-name{display:block;font-family:var(--display);font-weight:900;font-size:19px;color:var(--text);letter-spacing:-.02em;line-height:1.2;}
.plan-price-old{
  display:block;font-family:var(--display);font-weight:900;font-size:33px;color:#B3B8C0;
  margin-top:10px;text-decoration:line-through;text-decoration-color:var(--rose);text-decoration-thickness:3px;
}
.plan-warn{display:block;font-size:11.5px;color:var(--rose);font-weight:600;margin-top:6px;}
.plan-desc{font-size:12.5px;color:var(--soft);line-height:1.55;margin-top:12px;}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-top:10px;color:var(--text);}
.plan-price .cur{font-family:var(--display);font-weight:900;font-size:19px;}
.plan-price .amount{font-family:var(--display);font-weight:900;font-size:44px;letter-spacing:-.035em;line-height:1;}
.plan-price .suffix{font-size:12px;color:var(--soft);margin-left:3px;}
.plan-parc{display:block;font-size:13px;color:var(--text);font-weight:600;margin-top:5px;}
.plan-validade{font-size:11px;color:var(--soft);line-height:1.5;margin-top:10px;}
.plan-inc-title{display:block;font-family:var(--display);font-weight:900;font-size:14px;color:var(--text);margin:16px 0 10px;}
.plan-inc{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--text);}
.plan-inc li{display:flex;align-items:flex-start;gap:9px;line-height:1.4;}
.plan-inc li::before{content:"✔";color:var(--green);font-weight:900;font-size:12px;flex:none;margin-top:1px;}
.plan-inc.muted li{color:#9AA1AC;}
.plan-inc.muted li::before{content:"⊙";color:#C2C7CE;}

.warranty{
  background:var(--ink-card);border:1px solid var(--ink-line);border-radius:var(--r-lg);
  padding:18px;margin-top:18px;text-align:center;
}
.warranty-seal{font-size:30px;display:block;margin-bottom:8px;}
.warranty-title{display:block;font-family:var(--display);font-weight:900;font-size:15px;color:#fff;}
.warranty-txt{font-size:12.5px;color:#8A9099;line-height:1.55;margin-top:7px;}

.faq-title{margin:28px 0 12px;color:#fff;}
.faq-item{border-bottom:1px solid var(--ink-line);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 2px;cursor:pointer;font-size:13.5px;font-weight:600;color:#E7E9ED;
}
.faq-q span:last-child{color:var(--lime);font-size:17px;transition:transform .28s ease;flex:none;}
.faq-item.open .faq-q span:last-child{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1);}
.faq-a p{font-size:12.5px;line-height:1.6;color:#8A9099;padding:0 2px 15px;}
.faq-item.open .faq-a{max-height:200px;}

/* ════════════════════════════════════════════════════════════
   ANIMAÇÕES POR ETAPA
   ════════════════════════════════════════════════════════════ */

/* ---------- ETAPA 1 · promessa ---------- */
.palavra{
  display:inline-block;opacity:0;transform:translateY(14px);
  animation:subirPalavra .55s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes subirPalavra{to{opacity:1;transform:none;}}

@keyframes cutucar{
  0%,70%,100%{transform:translateX(0);}
  78%{transform:translateX(10px);}
  86%{transform:translateX(2px);}
}

/* ---------- ETAPA 2 · VSL ---------- */
.btn.carregando{
  opacity:1 !important;
  background:linear-gradient(90deg,var(--lime) 0 var(--p,0%),#23262D var(--p,0%) 100%);
  color:#8A9099;box-shadow:none;
}
.btn.carregando::after{opacity:.3;}
.vsl-play{position:relative;}
.vsl-play::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);animation:anel 2.2s ease-out infinite;
}
@keyframes anel{
  0%{transform:scale(.85);opacity:.9;}
  100%{transform:scale(1.35);opacity:0;}
}
.vsl-cc{animation:legenda .4s ease;}
@keyframes legenda{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}

/* ---------- ETAPA 3 · quebra de crença ---------- */
.icon-row span{animation:surgirIcone .5s cubic-bezier(.34,1.56,.64,1) backwards;}
.icon-row span:nth-child(1){animation-delay:.15s;}
.icon-row span:nth-child(2){animation-delay:.27s;}
.icon-row span:nth-child(3){animation-delay:.39s;}
@keyframes surgirIcone{from{opacity:0;transform:scale(.5) rotate(-12deg);}to{opacity:1;transform:none;}}
.ticker{position:relative;overflow:hidden;}
.ticker::after{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(197,248,46,.12),transparent);
  animation:varrer 4.5s ease-in-out infinite;
}

/* ---------- ETAPA 4 · comparação ---------- */
.vs-row{transition:background .25s ease,box-shadow .4s ease,transform .3s ease;}
.vs-row.hero.destacar{animation:brilhoHero 1.4s ease .3s;}
@keyframes brilhoHero{
  0%,100%{box-shadow:0 0 0 0 rgba(197,248,46,0);transform:scale(1);}
  45%{box-shadow:0 0 0 5px rgba(197,248,46,.3);transform:scale(1.022);}
}

/* ---------- ETAPA 5 · chat ---------- */
.bubble.me .visto{margin-left:4px;letter-spacing:-2px;color:#4FA3D1;}
/* display:block é obrigatório: é um <span>, e altura não vale em
   elemento inline — sem isto a onda colapsa para 0px e some */
.voice-wave{display:block;position:relative;overflow:hidden;}
.voice-wave i{
  position:absolute;inset:0;width:0;display:block;
  background:repeating-linear-gradient(90deg,var(--green) 0 2px,transparent 2px 5px);
}
.voice.tocando .voice-wave i{transition:width .2s linear;}
.chat-scroll{scroll-behavior:smooth;}
/* entra pela direita, como quem vai mandar a mensagem */
.reply{animation:surgirResposta .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes surgirResposta{
  from{opacity:0;transform:translateX(22px) scale(.9);}
  to{opacity:1;transform:none;}
}
/* respirinha para deixar claro que espera um toque */
.reply.chamando{animation:surgirResposta .42s cubic-bezier(.34,1.56,.64,1),respiraResposta 2.2s ease-in-out .5s infinite;}
@keyframes respiraResposta{
  0%,100%{box-shadow:0 5px 16px -6px rgba(47,184,101,.65);}
  50%{box-shadow:0 5px 20px -4px rgba(47,184,101,.9),0 0 0 5px rgba(47,184,101,.12);}
}

/* ---------- ETAPA 6 · gráfico ---------- */
.chart-dot{position:absolute;}
.chart-dot::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid var(--lime);animation:anel 2.1s ease-out infinite 1.6s;
}
.chart-months span{transition:color .3s ease,font-weight .3s ease;}
.stat{transition:transform .3s ease;}

/* ---------- ETAPA 7 · benefícios + tese ---------- */
.ticks li{transition:transform .25s ease;}
.panel-good .ticks li::before{animation:marcar .45s cubic-bezier(.34,1.56,.64,1) backwards;}
@keyframes marcar{from{opacity:0;transform:scale(0) rotate(-40deg);}to{opacity:1;transform:none;}}
.article-img{transition:transform .5s ease;}

/* ---------- ETAPA 8 · voucher ---------- */
.coupon{transform-style:preserve-3d;perspective:900px;}
.coupon.virando{animation:virar 1s cubic-bezier(.4,0,.2,1);}
@keyframes virar{
  0%{transform:rotateY(0deg) scale(1);}
  50%{transform:rotateY(90deg) scale(.93);}
  100%{transform:rotateY(0deg) scale(1);}
}
.coupon-pct{animation:crescerPct .6s cubic-bezier(.34,1.56,.64,1) backwards .1s;}
@keyframes crescerPct{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
.deco{will-change:transform;}
.vouchers-num{display:inline-block;}

/* ---------- ETAPA 9 · entrega ---------- */
.stack div{position:relative;transition:transform .25s ease,box-shadow .25s ease;}
.stack div.marcado::after{
  content:"✔";position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(0);
  color:var(--green);font-weight:900;font-size:13px;
  animation:marcar .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
.thumb::before{
  content:"▶";position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;padding-left:3px;
  animation:respirar 2.6s ease-in-out infinite;
}
@keyframes respirar{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.09);}}

/* ---------- ETAPA 10 · oferta ---------- */
.plan-main{transition:box-shadow .4s ease;}
.plan-price .amount{display:inline-block;}
.plan-price-old{position:relative;display:inline-block;}
.plan-price-old::after{
  content:"";position:absolute;left:0;top:52%;height:3px;width:0;
  background:var(--rose);animation:riscar .7s cubic-bezier(.4,0,.2,1) forwards .5s;
}
@keyframes riscar{to{width:100%;}}
.riscado-js{text-decoration:none !important;}

/* Barra de compra flutuante.
   Fica fora do fluxo (não reserva espaço no fim da página) e
   presa na base da tela — no celular via fixed, no preview de
   desktop via absolute, para não escapar da moldura do aparelho. */
.dock-float{
  display:none;z-index:40;padding-top:10px;
  position:fixed;left:50%;bottom:0;width:100%;max-width:430px;
  transform:translate(-50%,120%);opacity:0;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.dock-float.montada{display:block;}
.dock-float.on{transform:translate(-50%,0);opacity:1;}
@media (min-width:540px) and (min-height:700px){ .dock-float{position:absolute;} }

@media (prefers-reduced-motion:reduce){
  .palavra,.icon-row span,.coupon-pct,.panel-good .ticks li::before{animation:none;opacity:1;transform:none;}
  .slider-knob.dica,.ticker::after,.vsl-play::after,.chart-dot::after,.thumb::before,.vs-row.hero.destacar{animation:none;}
  .plan-price-old::after{animation:none;width:100%;}
}

/* ════════════════════════════════════════════════════════════
   AJUSTES INDIVIDUAIS
   ════════════════════════════════════════════════════════════ */

/* ---------- ETAPA 1 · arrastar é obrigatório ---------- */
/* quem só clica leva uma cutucada ensinando o gesto
   (a regra do botão está no bloco do trilho, mais abaixo) */
@keyframes ensinar{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(16px);}
  45%{transform:translateX(4px);}
  70%{transform:translateX(11px);}
}
.slide-hint.chamando{color:var(--lime-dark);font-weight:700;}
.slide-hint.chamando::after{animation-duration:.5s;}

/* ---------- ETAPA 2 · VSL sem pular ---------- */
.vsl video{pointer-events:auto;}
.vsl-som{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:rgba(13,14,17,.72);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:var(--body);font-size:12.5px;font-weight:600;
  padding:18px 22px;border-radius:var(--r-md);cursor:pointer;
  backdrop-filter:blur(6px);animation:respirar 2.4s ease-in-out infinite;
}
.vsl-som-icone{font-size:26px;}
.vsl-barra{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.14);z-index:5;
}
.vsl-barra i{display:block;height:100%;width:0;background:var(--lime);}
/* o botão nasce só quando o vídeo acaba */
#vsl-botao{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1);}
#vsl-botao.nasceu{opacity:1;transform:none;}
#vsl-botao.carregando{opacity:1;}

/* ---------- ETAPA 5 · chat ---------- */
/* espaço extra embaixo para a última mensagem não colar no rodapé */
.chat-thread{padding-bottom:14px;}
.chat-scroll{padding:16px 14px 10px;}

.chat-bottom{min-height:66px;}

/* ícones do topo do chat, desenhados em vez de emoji */
.chat-icons i{
  width:20px;height:20px;display:block;opacity:.4;
  background:currentColor;color:var(--text);
}
.chat-icons .ico-video{
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M23 7l-7 5 7 5V7z'/><rect x='1' y='5' width='15' height='14' rx='2'/></svg>");
}
.chat-icons .ico-fone{
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .4 1.9.7 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4c.9.3 1.8.6 2.8.7a2 2 0 011.7 2z'/></svg>");
}

/* avatares neutros no lugar do emoji de rosto */
.chat-pic.vazio,.voice-pic.vazio{
  background:#DFE3E8;
  -webkit-mask:none;mask:none;
}
.chat-pic.vazio::before,.voice-pic.vazio::before{
  content:"";width:58%;height:58%;display:block;background:#9AA1AC;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.7-9 6v2h18v-2c0-3.3-4-6-9-6z'/></svg>");
}
.chat-pic.vazio,.voice-pic.vazio{display:flex;align-items:center;justify-content:center;}

/* ---------- ETAPA 8 · confete cai do topo ---------- */
.confete-caixa{z-index:9999;}

/* ---------- ETAPA 9 · enquadramento ---------- */
#s-entrega .pad,body[data-etapa="entrega"] .pad{padding:26px 22px 26px;}
body[data-etapa="entrega"] .thumb{height:172px;margin-top:22px;}
body[data-etapa="entrega"] .h-lg{margin-top:22px;font-size:clamp(20px,5.6vw,23px);line-height:1.2;}
body[data-etapa="entrega"] .lead{margin-top:12px;padding:0 6px;font-size:14px;}
body[data-etapa="entrega"] .stack{margin-top:24px;gap:11px;}
body[data-etapa="entrega"] .stack div{padding:15px 44px 15px 15px;line-height:1.35;}
body[data-etapa="entrega"] .callout-rose{margin-top:0;padding:13px 16px;line-height:1.5;}

/* ---------- ETAPA 10 · selo de garantia sem emoji ---------- */
.warranty{display:flex;flex-direction:column;align-items:center;}
.warranty-seal{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:12px;
  border:2px solid var(--lime);color:var(--lime);
  background:rgba(197,248,46,.08);
}
.warranty-seal b{font-family:var(--display);font-weight:900;font-size:24px;line-height:1;}
.warranty-seal i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;margin-top:1px;}

@media (prefers-reduced-motion:reduce){
  .vsl-som,.slider-knob.ensina,.reply.chamando{animation:none;}
  #vsl-botao{opacity:1;transform:none;}
}

/* conversa ancorada embaixo: com poucas mensagens elas ficam
   junto ao rodapé em vez de deixar um vão morto no meio da tela */
.chat-scroll{display:flex;flex-direction:column;}
.chat-system{margin-top:auto;}

/* ════════════════════════════════════════════════════════════
   REVISÃO: TRILHO, PAUSE DA VSL E BOLHAS DO CHAT
   ════════════════════════════════════════════════════════════ */

/* ---------- ETAPA 1 · trilho com botão pequeno ----------
   Trilho escuro para o lime do botão saltar e para a barra que
   enche durante o arrasto ter contraste de verdade. */
.slider{
  position:relative;height:62px;overflow:hidden;border-radius:99px;
  background:var(--ink);border:none;
  user-select:none;touch-action:pan-y;
  box-shadow:0 10px 26px -12px rgba(13,14,17,.6);
}
.slider-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--lime);opacity:1;pointer-events:none;
  transition:width .05s linear;
}
.slider-label{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding-left:38px;                          /* compensa o botão à esquerda */
  font-family:var(--display);font-weight:900;font-size:15.5px;
  color:#fff;letter-spacing:-.01em;
  transition:opacity .2s ease;
}
/* brilho que corre para a direita, sugerindo o gesto */
.slider-label::after{
  content:"";position:absolute;top:0;left:-45%;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(197,248,46,.28),transparent);
  animation:varrer 3.6s ease-in-out infinite;
}
.slider-knob{
  position:absolute;left:6px;top:6px;z-index:3;
  width:50px;height:50px;border:none;border-radius:99px;
  background:#fff;color:var(--ink);cursor:grab;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -3px rgba(0,0,0,.45);
  transition:transform .28s cubic-bezier(.4,0,.2,1),background .2s ease;
}
.slider-knob.dragging{cursor:grabbing;transition:background .2s ease;}
/* passou do ponto de soltar: escurece para avisar que já vale */
.slider-knob.pronto{background:var(--ink);color:var(--lime);box-shadow:0 4px 16px -3px rgba(13,14,17,.6);}
.slider-knob .slider-arrow{font-style:normal;font-size:20px;line-height:1;font-weight:700;}
.slider.quase .slider-label{opacity:0;}
.slider.quase .slider-label::after{animation:none;}

/* cutucada periódica só no botão */
.slider-knob.dica{animation:cutucar 3s ease-in-out infinite;}
.slider-knob.ensina{animation:ensinar .6s cubic-bezier(.36,.07,.19,.97);}

/* ---------- ETAPA 2 · pausar sim, avançar não ---------- */
.vsl video{cursor:pointer;}
.vsl-pause{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,14,17,.35);border:none;cursor:pointer;
}
.vsl-pause::after{
  content:"";width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);
  -webkit-mask:none;
  display:block;
}
.vsl-pause::before{
  content:"";position:absolute;z-index:2;
  width:0;height:0;border-style:solid;
  border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;
  margin-left:5px;
}
.vsl-som-icone{
  width:30px;height:30px;background:#fff;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5L6 9H2v6h4l5 4V5z'/><line x1='23' y1='9' x2='17' y2='15'/><line x1='17' y1='9' x2='23' y2='15'/></svg>");
}

/* ---------- ETAPA 5 · bolhas de conversa ---------- */
/* mais estreitas e com rabinho, para ficar claro quem falou o quê */
.bubble{max-width:76%;border-radius:16px;}
.bubble:not(.me){
  border-bottom-left-radius:5px;margin-left:8px;
}
.bubble:not(.me)::before{
  content:"";position:absolute;left:-7px;bottom:0;
  width:0;height:0;border-style:solid;
  border-width:0 0 11px 9px;
  border-color:transparent transparent var(--paper) transparent;
}
.bubble.me{
  border-bottom-right-radius:5px;margin-right:8px;
  /* a folga da direita guarda a hora + os dois ✓ (38px). Com 52px
     o texto encostava a 3px deles; uma resposta um pouco mais longa
     colidiria. 60px deixa margem para qualquer rótulo. */
  padding:11px 60px 11px 13px;
}
.bubble.me::before{
  content:"";position:absolute;right:-7px;bottom:0;
  width:0;height:0;border-style:solid;
  border-width:0 9px 11px 0;
  border-color:transparent #DCF8C6 transparent transparent;
}
.typing,.voice{max-width:76%;margin-left:8px;}
.typing{border-bottom-left-radius:5px;}
.voice{border-bottom-left-radius:5px;}

@media (prefers-reduced-motion:reduce){
  .slider-knob.dica,.slider-knob.ensina{animation:none;}
}

/* fundo próprio da conversa: sem ele a bolha branca some no branco
   da tela e o rabinho não aparece */
.chat-scroll{background:#EFF1F5;}
.chat-system{background:#E2E6EC;color:#6C7480;}
.bubble:not(.me){border-color:#E3E7ED;}

/* ---------- ETAPA 5 · a tela do chat é fixa, quem rola é a conversa ----------
   Sem isto a página inteira cresce no celular: o cabeçalho e o campo de
   mensagem sobem junto e a conversa nunca desce sozinha.
   O min-height:0 é obrigatório para overflow funcionar dentro de flex. */
/* Escada de alternativas, da mais frágil para a mais firme.
   A última que o navegador entender é a que vale:
     100vh  -> navegador antigo. No iPhone é MAIOR que a área visível,
               então sozinha ela empurra o rodapé para fora
     100svh -> a área com a barra do navegador aberta. Não oscila
     var()  -> a altura medida por JS. É a mais exata, e ganha das outras */
body[data-etapa="chat"] .screen{
  height:100vh;
  height:100svh;
  height:var(--altura-tela, 100svh);
  min-height:0;overflow:hidden;
}
body[data-etapa="chat"] .chat-scroll{min-height:0;flex:1 1 auto;}
body[data-etapa="chat"] .chat-top,
body[data-etapa="chat"] .chat-dock,
body[data-etapa="chat"] .chat-bottom{flex:0 0 auto;}
@media (min-width:540px) and (min-height:700px){
  body[data-etapa="chat"] .screen{height:100%;}
}

/* nota de voz ocupa uma largura de verdade, como no WhatsApp */
.voice{min-width:68%;}

/* ════════════════════════════════════════════════════════════
   PÓS-VENDA
   ════════════════════════════════════════════════════════════ */

/* ---------- UPSELL ---------- */
.relogio{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:#FFF8E6;border:1px solid #F2DFA6;color:#7A5B12;
  border-radius:var(--r-md);padding:11px 16px;margin-bottom:16px;
  font-size:12.5px;font-weight:600;
}
.relogio b{
  font-family:var(--display);font-weight:900;font-size:19px;
  letter-spacing:.5px;color:#7A5B12;
}
.relogio.acabando{background:#FFF1EE;border-color:#F6C9BF;color:#9E2F1B;}
.relogio.acabando b{color:var(--rose);animation:piscar 1s ease infinite;}

.oferta-extra{
  border:2px solid var(--green);border-radius:var(--r-xl);
  padding:20px 18px;margin-top:20px;
  box-shadow:0 14px 40px -18px rgba(47,184,101,.55);
}
.oferta-extra-img{
  height:150px;border-radius:var(--r-md);margin-bottom:16px;
  background:var(--mist) center/cover no-repeat;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:44px;
}
.oferta-extra .plan-desc{margin-top:8px;}
.oferta-extra .plan-inc{margin-top:14px;}
.preco-linha{display:flex;flex-direction:column;gap:2px;margin-top:18px;}
.preco-linha .price-de{font-size:16px;}

.recusar{
  display:block;width:100%;margin-top:12px;padding:12px;
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:500;
  color:var(--soft);text-decoration:underline;text-underline-offset:3px;
}
.recusar:active{opacity:.6;}

/* ---------- OBRIGADO ---------- */
.selo-ok{
  width:74px;height:74px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(47,184,101,.14);border:2px solid var(--green);
  color:var(--green);font-size:34px;font-weight:900;
  animation:selar .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes selar{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}

.passos-titulo{margin:32px 0 14px;color:#fff;text-align:left;}
.passos{list-style:none;counter-reset:passo;text-align:left;
  display:flex;flex-direction:column;gap:11px;}
.passos li{
  counter-increment:passo;position:relative;
  background:var(--ink-card);border:1px solid var(--ink-line);
  border-radius:var(--r-md);padding:15px 15px 15px 52px;
}
.passos li::before{
  content:counter(passo);position:absolute;left:14px;top:15px;
  width:26px;height:26px;border-radius:50%;
  background:var(--lime);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:13px;
}
.passo-t{display:block;font-weight:700;font-size:14px;color:#fff;}
.passo-d{display:block;font-size:12.5px;line-height:1.5;color:#8A9099;margin-top:3px;}

.suporte{
  background:var(--ink-card);border:1px solid var(--ink-line);
  border-radius:var(--r-lg);padding:20px;margin-top:26px;text-align:center;
}
.suporte-titulo{display:block;font-family:var(--display);font-weight:900;font-size:16px;color:#fff;}
.suporte-txt{font-size:13px;line-height:1.55;color:#8A9099;margin:8px 0 14px;}

@media (prefers-reduced-motion:reduce){
  .selo-ok,.relogio.acabando b{animation:none;}
}

/* o risco vermelho do preço cheio do upsell é desenhado, igual ao da oferta */
.preco-linha .price-de{position:relative;display:inline-block;align-self:flex-start;}
.preco-linha .price-de.riscado-js::after{
  content:"";position:absolute;left:0;top:52%;height:3px;width:0;
  background:var(--rose);animation:riscar .7s cubic-bezier(.4,0,.2,1) forwards .5s;
}

/* ════════════════════════════════════════════════════════════
   LINKS DE SAÍDA
   ════════════════════════════════════════════════════════════ */

/* botão cujo link ainda não foi preenchido no config: fica inerte
   em vez de virar um "#" que não leva a lugar nenhum */
.btn.sem-link{
  background:#D9DDE3;color:#8A9099;cursor:not-allowed;
  box-shadow:none;pointer-events:none;
}
.btn.sem-link::after{opacity:.4;}
.btn.sem-link.brilha::before,
.btn.sem-link.pulsa{animation:none;}

/* lembrete do que falta configurar — só aparece quando você
   está testando na sua própria máquina */
.aviso-config{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9998;
  background:#2B1A00;border:1px solid #7A5B12;color:#FFD75E;
  border-radius:12px;padding:11px 14px;
  font-family:var(--body);font-size:11.5px;line-height:1.5;
  cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);
  max-width:406px;margin:0 auto;
}
.aviso-config b{color:#FFF;font-weight:700;}

/* Card âncora sem desconto (comparação de planos, não preço cheio x
   promocional): o preço é uma opção de verdade, então não leva risco
   nem cor de descarte. */
.plan-price-old.simples{
  color:var(--text);text-decoration:none;
}
.plan-price-old.simples::after{content:none;}
.plan-warn.neutro{color:var(--soft);font-weight:500;}