/* =========================================================
   POPPINS HOSPEDADA AQUI
   Bloco identico ao das paginas de venda: cada pagina e' um
   projeto independente, entao a fonte fica na propria pasta.
   Para atualizar: scripts/baixar-fontes.py
   ========================================================= */

@font-face{
  font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fontes/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fontes/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fontes/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fontes/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fontes/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fontes/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fontes/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fontes/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fontes/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fontes/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   PAGINA DE OBRIGADO — mesma paleta creme + verde da P2
   (imersao-conserto-p2-renda). Um unico bloco central, sem
   header/oferta/rodape de venda: quem chega aqui ja' comprou.
   Tokens e pares de contraste copiados do estilo.css da P2 —
   conferidos no WCAG AA la', continuam validos aqui.
   ========================================================= */
:root{
  --verde:#2E7D46;
  --verde-esc:#14432A;
  --verde-tint:#CFE8C4;

  --fundo:#F6F1E6;
  --papel:#FFFFFF;
  --linha:rgba(22,32,26,.14);
  --tinta:#16201A;
  --tinta-soft:#55605A;
  --branco:#FFFFFF;
  --branco-soft:rgba(255,255,255,.82);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--tinta);
  font-size:17px;
  line-height:1.6;
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;display:block}
a{color:inherit}

main{
  flex:1;
  display:flex;
  align-items:center;
  padding:40px 0;
}

.wrap{max-width:520px;margin:0 auto;padding:0 22px;width:100%}

/* Tela unica, tipo "tela de sucesso" de app: um cartao so', sem coluna
   lateral, sem nada competindo com o redirecionamento automatico. A
   pagina existe por poucos segundos — praticidade em vez de vitrine. */
.cartao{
  background:var(--papel);
  border:1px solid var(--linha);
  border-top:5px solid var(--verde-esc);
  border-radius:16px;
  padding:40px 34px 34px;
  text-align:center;
  box-shadow:0 22px 50px rgba(20,67,42,.12);
}

/* Avatar da Carine com o ANEL DE CONTAGEM em volta — o mesmo elemento
   visual que confirma a compra (foto + check) tambem e' o timer do
   redirecionamento automatico. O svg gira -90deg pra o progresso comecar
   no topo, como qualquer indicador circular de app. */
.avatar-anel{position:relative;width:108px;height:108px;margin:0 auto 18px}
.avatar-anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anel-fundo{fill:none;stroke:var(--verde-tint);stroke-width:5}
.anel-progresso{
  fill:none;stroke:var(--verde);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:301.6;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear;
}
.avatar-anel img{
  position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
  border-radius:50%;object-fit:cover;
}
.avatar-check{
  position:absolute;right:2px;bottom:2px;width:28px;height:28px;
  border-radius:50%;background:var(--verde);border:3px solid var(--papel);
  display:flex;align-items:center;justify-content:center;
}
.avatar-check svg{position:static;width:13px;height:13px;transform:none}

.assinatura{
  margin:-18px 0 22px;font-size:15px;font-style:italic;color:var(--tinta-soft);
}

/* selo da pagina bloqueado.html — mesma linguagem do avatar-check, so'
   que sozinho (sem foto) e na cor neutra em vez do verde de confirmacao */
.selo-cadeado{
  width:64px;height:64px;margin:0 auto 20px;
  border-radius:50%;background:var(--tinta-soft);
  display:flex;align-items:center;justify-content:center;
}

.rotulo{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde-esc);margin:0 0 14px;width:100%;
}
.rotulo::before{content:"";width:26px;height:3px;background:var(--verde);border-radius:2px}

h1{
  margin:0 0 14px;font-size:clamp(26px,4vw,34px);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;
}
.lede{
  margin:0 0 26px;font-size:17.5px;color:var(--tinta-soft);line-height:1.65;
}
.lede b{color:var(--tinta);font-weight:600}

/* ---------- contagem: avisa o redirecionamento automatico ---------- */
.contagem{
  font-size:15px;font-weight:600;color:var(--tinta-soft);margin:0 0 16px;
}
.contagem b{
  display:inline-block;min-width:1.4em;color:var(--verde-esc);font-weight:800;
}
.cancelar{
  background:none;border:0;padding:0;margin-left:6px;
  font:inherit;font-weight:600;font-size:14px;color:var(--verde-esc);
  text-decoration:underline;cursor:pointer;
}
.contagem.parado{color:var(--tinta-soft)}

/* ---------- botao — CTA principal da pagina, entrar no grupo ----------
   Fundo continua o verde da marca (ja' conferido em 5,07:1 com branco no
   estilo.css da P2) em vez do verde oficial do WhatsApp: o verde oficial
   (#25D366) da' so' ~2:1 de contraste com texto branco e reprovaria o AA.
   O icone e' quem carrega o reconhecimento de marca do WhatsApp aqui. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--verde);color:var(--branco);
  font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase;
  padding:24px 30px;border-radius:10px;border:0;cursor:pointer;
  transition:transform .12s ease,background .12s ease;
  text-align:center;line-height:1.25;width:100%;
  box-shadow:0 14px 30px rgba(46,125,70,.38);
  animation:pulso 2.4s ease-out infinite;
}
.btn svg{width:24px;height:24px;flex:none}
.btn:hover{background:#26693B;transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--verde-esc);outline-offset:3px}
.btn-sub{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:15px;color:var(--tinta-soft);margin:14px 0 34px;
}
.btn-sub svg{width:15px;height:15px;flex:none;color:var(--verde)}

/* aro que pulsa pra fora do botao, chamando o olho sem gritar. Some no
   reduced-motion (regra la' embaixo), o botao continua so' com a sombra fixa. */
@keyframes pulso{
  0%{box-shadow:0 14px 30px rgba(46,125,70,.38),0 0 0 0 rgba(46,125,70,.45)}
  70%{box-shadow:0 14px 30px rgba(46,125,70,.38),0 0 0 18px rgba(46,125,70,0)}
  100%{box-shadow:0 14px 30px rgba(46,125,70,.38),0 0 0 0 rgba(46,125,70,0)}
}

.quando{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  margin:0 0 32px;font-size:15px;font-weight:700;color:var(--verde-esc);
}
.quando span{
  background:var(--fundo);border:1px solid var(--linha);
  border-radius:8px;padding:8px 13px;
}
.quando .dia{background:var(--verde-esc);color:var(--branco);border-color:var(--verde-esc)}

.passos{
  list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px;text-align:left;
}
.passos li{
  position:relative;padding:14px 16px 14px 50px;
  background:var(--verde-tint);border-radius:8px;
  font-size:16.5px;font-weight:500;line-height:1.5;color:var(--tinta);
}
.passos li b{font-weight:700}
.passos .num{
  position:absolute;left:14px;top:12px;width:24px;height:24px;
  border-radius:50%;background:var(--verde-esc);color:var(--branco);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}

.ajuda{
  margin:0;font-size:15px;line-height:1.6;color:var(--tinta-soft);
  border-top:1px solid var(--linha);padding-top:22px;
}
.ajuda a{color:var(--verde-esc);font-weight:600;text-decoration:underline}

footer{
  padding:30px 0;text-align:center;font-size:14px;
  color:var(--branco-soft);background:var(--verde-esc);
}
footer p{margin:0 0 6px}

@media (max-width:480px){
  .cartao{padding:32px 20px 28px}
  .passos li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none;animation:none}
  .btn:hover{transform:none}
  /* o numero continua contando (e' funcional, nao decoracao) — so' o
     anel gira em vez de "esvaziar" suavemente */
  .anel-progresso{transition:none !important}
}