/* =========================================================
   SEÇÕES — na mesma ordem em que aparecem no index.html.
   ========================================================= */

/* ---------------------------------------------------------
   1. HERO
   --------------------------------------------------------- */
.hero{
  background:var(--branco);
  padding-top:40px;
  text-align:center;
}
.hero__conteudo{animation:fadeInUp 1s ease}

/* Pílula "DESCONTO SÓ HOJE + data" */
.urgencia{
  display:inline-flex;align-items:center;gap:8px;
  width:fit-content;max-width:95%;
  margin:0 auto 40px;
  padding:8px 25px;
  border-radius:var(--raio-pill);
  background:var(--verde);color:var(--branco);
  box-shadow:0 4px 15px rgba(20,174,92,.35);
  font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;
}

.hero__titulo{
  max-width:900px;margin:0 auto 36px;
  font-size:clamp(1.9rem,5vw,3.4rem);
  font-weight:700;line-height:1.2;
  color:#333;
  text-wrap:balance;
}
.hero__titulo .destaque{
  color:var(--verde);font-weight:800;
}
.hero__titulo .bonus{color:var(--verde);font-weight:800}

/* A capa do e-book, solta sobre o branco — sem moldura competindo com ela. */
.hero__produto{
  max-width:330px;
  margin:0 auto 36px;
}
.hero__produto img{
  width:100%;
  border-radius:12px;
  box-shadow:0 24px 50px -14px rgba(0,0,0,.3);
}

.hero__sub{
  max-width:620px;margin:0 auto 36px;
  font-size:clamp(1rem,2vw,1.25rem);
  color:#555;
}
.hero__sub strong{color:var(--verde)}


/* Selos de confiança abaixo do CTA */
.hero__selos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;
  margin-top:24px;
  font-size:.85rem;font-weight:500;color:var(--cinza-texto);
}
.hero__selos li{display:flex;align-items:center;gap:7px}
.hero__selos i{color:var(--verde)}

/* ---------------------------------------------------------
   2 e 3. GRADES DE CARDS
   --------------------------------------------------------- */
.grade{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px;
  max-width:1100px;margin-inline:auto;
}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ---------------------------------------------------------
   4. BÔNUS
   --------------------------------------------------------- */
.bonus{background:linear-gradient(135deg,#F8FAFC,#ECF9F2)}

.bonus__grade{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin-bottom:40px;
}
.bonus__card{
  padding:36px 28px;
  border:2px solid #A1DFBE;
  border-radius:var(--raio-card);
  background:linear-gradient(180deg,var(--verde-fundo) 0%,var(--branco) 100%);
  box-shadow:0 4px 15px rgba(20,174,92,.15);
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.bonus__card:hover{
  transform:translateY(-8px);
  border-color:var(--verde);
  box-shadow:0 12px 35px rgba(20,174,92,.25);
}

/* Capa real de cada bônus. */
.bonus__img{
  width:190px;
  margin:0 auto 22px;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition:transform .3s ease;
}
.bonus__card:hover .bonus__img{transform:scale(1.04)}

.bonus__card h3{
  margin:0 0 6px;
  font-family:var(--fonte-titulo);
  font-size:1.2rem;font-weight:700;color:var(--tinta);
}
.bonus__valor{
  display:block;margin:8px 0 12px;
  font-size:1.15rem;font-weight:700;
  color:#EF4444;text-decoration:line-through;
}
.bonus__card p{font-size:.92rem;line-height:1.65}

/* Barra verde da soma dos bônus */
.bonus__total{
  max-width:520px;margin-inline:auto;
  padding:18px 25px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--verde) 0%,var(--verde-forte) 100%);
  box-shadow:0 4px 15px rgba(20,174,92,.4);
  text-align:center;
}
.bonus__total h3{
  font-size:1rem;font-weight:600;line-height:1.5;color:var(--branco);
}
.bonus__total s{opacity:.8}
.bonus__total .gratis{
  margin-left:8px;
  font-size:1.2rem;font-weight:700;
  color:#FDE047;
  text-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------
   5. OFERTA (um plano só)
   --------------------------------------------------------- */
.oferta{background:var(--cinza-fundo)}

.plano{
  position:relative;
  max-width:520px;margin-inline:auto;
  padding:40px 32px 32px;
  border:3px solid var(--verde);
  border-radius:var(--raio-card);
  background:linear-gradient(180deg,var(--verde-fundo) 0%,var(--branco) 100%);
  box-shadow:0 10px 40px rgba(20,174,92,.18);
}
.plano__flag{
  position:absolute;top:-16px;left:50%;
  transform:translateX(-50%);
  padding:8px 22px;
  border-radius:25px;
  background:var(--grad-icone);color:var(--branco);
  font-family:var(--fonte-titulo);
  font-size:.85rem;font-weight:600;
  text-transform:uppercase;white-space:nowrap;
  box-shadow:0 4px 15px rgba(20,174,92,.4);
}
.plano__nome{
  margin-bottom:20px;
  font-size:1.7rem;font-weight:700;
  text-align:center;color:var(--tinta);
}

.plano__preco{text-align:center;margin-bottom:6px}
.preco-de{
  display:block;
  font-size:1.2rem;color:#9CA3AF;text-decoration:line-through;
}
.preco-por{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:clamp(2.75rem,9vw,3.4rem);font-weight:800;line-height:1.1;
  color:var(--verde);
}
.preco-obs{font-size:.9rem;color:#666}
.plano__economia{
  margin-bottom:22px;
  text-align:center;
  font-size:.95rem;font-weight:600;color:var(--verde);
}

.plano__itens{margin-bottom:28px}
.plano__itens li{
  display:flex;align-items:flex-start;gap:11px;
  padding:9px 0;
  font-size:1rem;color:#333;
}
.plano__itens i{
  margin-top:.28rem;
  color:var(--verde);font-size:1rem;flex:none;
}
.plano__itens .item-bonus{color:var(--verde);font-weight:600}
.plano__itens .item-bonus i{color:var(--verde)}

.plano .cta-button{width:100%}
.plano .cta-nota{text-align:center}

/* ---------------------------------------------------------
   6. GARANTIA
   --------------------------------------------------------- */
.garantia{background:var(--branco);text-align:center}
.garantia__card{
  max-width:580px;margin-inline:auto;
  padding:32px 28px;
  border:3px solid var(--verde);
  border-radius:var(--raio-card);
  background:linear-gradient(180deg,var(--verde-fundo) 0%,var(--branco) 100%);
  box-shadow:0 10px 40px rgba(20,174,92,.16);
}
.garantia__card h2{
  margin-bottom:14px;
  font-size:clamp(1.6rem,4vw,2rem);font-weight:700;
}
.garantia__card p{
  margin-bottom:26px;
  font-size:1.05rem;line-height:1.65;color:#555;
}

/* ---------------------------------------------------------
   7. RODAPÉ
   --------------------------------------------------------- */
.footer{
  padding-block:44px;
  background:var(--escuro);color:var(--branco);
}
.footer__legal{
  max-width:820px;margin-inline:auto;
  font-size:.78rem;line-height:1.75;
  color:rgba(255,255,255,.6);
}
.footer__legal strong{color:rgba(255,255,255,.85)}
.footer__fim{
  max-width:820px;margin:24px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
  font-size:.8rem;color:rgba(255,255,255,.5);
}

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
@media (max-width:768px){
  .urgencia{font-size:.68rem;padding:8px 18px;margin-bottom:32px}
  .hero__produto{max-width:280px}
  .grade,.bonus__grade{grid-template-columns:1fr;gap:22px}
  .card{padding:34px 24px}
  /* Com 4 blocos (dias/horas/min/seg) eles precisam dividir a largura
     em vez de ter mínimo fixo, senão estouram a tela em 320px. */
  .timer{padding:18px 12px}
  .timer__relogio{gap:8px}
  .timer__unidade{flex:1;min-width:0;padding:10px 4px}
  .timer__num{font-size:1.4rem}
  .timer__cap{font-size:.6rem;letter-spacing:.02em}
  .cta-button{padding:16px 28px;font-size:1rem}
  .plano{padding:36px 22px 28px}
  .faq-item summary{padding:18px 20px}
  .faq-item summary h3{font-size:1rem}
  .faq-item__corpo{padding:18px 20px}
}