/* =========================================================
   COMPONENTES — peças reutilizadas em mais de uma seção.
   ========================================================= */

/* ---------------------------------------------------------
   CTA — o botão verde em gradiente, arredondado e pulsante.
   Repetido ao longo da página inteira.
   --------------------------------------------------------- */
.cta-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-titulo);
  font-size:1.2rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;
  padding:18px 40px;
  border-radius:var(--raio-pill);
  background:var(--grad-cta);color:var(--branco);
  box-shadow:var(--sombra-cta);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
  animation:pulseSoft 2s ease-in-out infinite;
}
.cta-button:hover{
  background:var(--grad-cta-h);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(20,174,92,.55);
  animation:none;
}

/* Linha de apoio logo abaixo de um CTA. */
.cta-nota{
  margin-top:14px;
  font-size:.9rem;color:var(--cinza-texto);
}
.cta-nota i{color:var(--verde)}

/* ---------------------------------------------------------
   Card genérico com ícone circular em gradiente no topo.
   É o padrão visual das seções "O que você vai receber"
   e "O que tem dentro".
   --------------------------------------------------------- */
.card{
  position:relative;
  padding:40px 30px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--raio-card);
  background:var(--branco);
  box-shadow:var(--sombra-card);
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sombra-hover)}

.card__icone{
  display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;
  margin:0 auto 25px;
  border-radius:50%;
  background:var(--grad-icone);
  color:var(--branco);
  font-size:2.2rem;line-height:1;
  box-shadow:var(--sombra-icone);
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover .card__icone{transform:translateY(-3px) scale(1.08)}

/* Variante verde do ícone, para diferenciar uma seção da outra. */
.card__icone--verde{
  background:var(--grad-cta);
  box-shadow:0 6px 20px rgba(20,174,92,.4);
}

.card h3{
  margin-bottom:12px;
  font-size:1.25rem;font-weight:700;letter-spacing:-.5px;
  transition:color .3s ease;
}
.card:hover h3{color:var(--verde)}
.card p{font-size:.95rem;line-height:1.7}

/* ---------------------------------------------------------
   Selo de garantia — escudo com "7 DIAS" por cima.
   --------------------------------------------------------- */
.selo{
  position:relative;
  display:inline-block;
  width:120px;height:120px;
  margin-bottom:20px;
}
.selo > i{
  position:absolute;inset:0;
  width:100%;height:100%;
  font-size:120px;line-height:120px;
  color:var(--verde);
  filter:drop-shadow(0 4px 15px rgba(20,174,92,.35));
}
.selo__texto{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-55%);
  z-index:2;text-align:center;
}
.selo__num{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:2.2rem;font-weight:800;line-height:1;
  color:var(--branco);
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}
.selo__label{
  display:block;margin-top:4px;
  font-size:.8rem;font-weight:700;letter-spacing:1px;
  color:var(--branco);
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------
   Contador regressivo — a única caixa laranja da página.
   Some por completo se CONTADOR_ATIVO = false no config.js.
   --------------------------------------------------------- */
.timer[hidden]{display:none}
.timer{
  max-width:480px;margin:0 auto 40px;
  padding:20px 25px;
  border-radius:16px;
  background:var(--grad-timer);
  box-shadow:0 6px 25px rgba(234,88,12,.45);
  text-align:center;
}
.timer__label{
  margin-bottom:15px;
  font-size:.95rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--branco);
}
.timer__relogio{display:flex;justify-content:center;gap:15px}
.timer__unidade{
  min-width:75px;padding:15px 12px;
  border-radius:12px;
  background:var(--branco);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.timer__num{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:2rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--laranja-forte);
}
.timer__cap{
  display:block;margin-top:5px;
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  color:#666;
}

/* ---------------------------------------------------------
   FAQ (acordeão)
   --------------------------------------------------------- */
.faq-lista{max-width:800px;margin-inline:auto;display:grid;gap:16px}
.faq-item{
  border-radius:var(--raio);
  background:var(--branco);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  overflow:hidden;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 28px;
  list-style:none;cursor:pointer;
  transition:background .3s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--cinza-fundo)}
.faq-item summary h3{font-size:1.15rem;font-weight:600;color:var(--tinta)}
.faq-item summary i{color:var(--verde);transition:transform .3s ease;flex:none}
.faq-item[open] summary i{transform:rotate(180deg)}
.faq-item[open] summary{background:var(--verde-fundo)}
.faq-item__corpo{padding:22px 28px}
.faq-item__corpo p{line-height:1.7}