/* ============================================================
   Vem Sorrir Odontologia — Clareamento Dental (Anchieta, RJ)
   Paleta: verde marca #2D7B63 / verde escuro #1E4F40
           fundo quente #FDFCF9 / âmbar brilho #D9A441
   Tipos:  Sora (títulos) + Inter (texto)
   ============================================================ */

:root{
  --verde:#2D7B63;
  --verde-escuro:#1E4F40;
  --fundo:#FDFCF9;
  --suave:#EEF5F1;
  --texto:#2A2E2C;
  --ambar:#D9A441;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',system-ui,Arial,sans-serif;
  color:var(--texto);
  background:var(--fundo);
  line-height:1.75;
  font-size:1.05rem;
}
h1,h2,h3{font-family:'Sora',sans-serif;color:var(--verde-escuro);line-height:1.25}
h1{font-size:clamp(1.9rem,4.5vw,2.7rem);margin:.4em 0}
h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:0}
h3{font-size:1.15rem}
a{color:var(--verde)}
img{max-width:100%;height:auto;border-radius:14px;display:block}

/* ---------- Header ---------- */
.topo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 24px;background:#fff;
  border-bottom:1px solid #E5EBE7;
}
.logo{max-width:160px;border-radius:0}
.topo nav a{margin-left:18px;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--verde-escuro)}
.topo nav a:hover{color:var(--verde)}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;
  max-width:1120px;margin:auto;padding:64px 24px 56px;
}
.eyebrow{
  font-family:'Sora',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--verde);margin:0;
}
.lead{font-size:1.15rem}
.micro{font-size:.85rem;color:#5C6661;margin-top:14px}

/* Assinatura: escala de cor do dente */
.escala{
  display:flex;align-items:center;gap:6px;margin:22px 0 26px;flex-wrap:wrap;
}
.tom{width:34px;height:44px;border-radius:8px 8px 14px 14px;border:1px solid rgba(0,0,0,.06)}
.t1{background:#E8D3A0}
.t2{background:#EFE0B8}
.t3{background:#F5EBD2}
.t4{background:#FAF5E9}
.t5{background:#FFFFFF;box-shadow:0 0 0 2px var(--ambar)}
.escala-label{font-size:.8rem;color:#5C6661;margin-left:8px;font-style:italic}

/* ---------- Botões ---------- */
.btn{
  display:inline-block;background:var(--verde);color:#fff;
  padding:16px 26px;border-radius:12px;text-decoration:none;
  font-weight:600;font-family:'Sora',sans-serif;font-size:1rem;
  transition:background .2s ease,transform .15s ease;
}
.btn:hover{background:var(--verde-escuro);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.btn-claro{background:#fff;color:var(--verde-escuro)}
.btn-claro:hover{background:var(--suave)}

/* ---------- Seções ---------- */
main section{max-width:1120px;margin:auto;padding:56px 24px}
.alt{
  max-width:none;background:var(--suave);
}
.alt > *{max-width:1072px;margin-left:auto;margin-right:auto}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
.cards article,.cards blockquote{
  background:#fff;border:1px solid #E5EBE7;border-radius:16px;
  padding:26px;margin:0;
}
.cards article h3{margin-top:0}
.depoimentos blockquote p{font-style:italic;margin-top:0}
.depoimentos footer{font-size:.88rem;font-weight:600;color:var(--verde)}

/* ---------- Passo a passo ---------- */
.passos{padding-left:0;counter-reset:passo;list-style:none;max-width:780px}
.passos li{
  counter-increment:passo;position:relative;
  padding:0 0 26px 58px;margin:0;
}
.passos li::before{
  content:counter(passo);
  position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;
  background:var(--verde);color:#fff;
  font-family:'Sora',sans-serif;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Listas com check ---------- */
.lista-check{list-style:none;padding-left:0}
.lista-check li{
  padding:6px 0 6px 32px;position:relative;
}
.lista-check li::before{
  content:"✓";position:absolute;left:0;top:6px;
  color:var(--verde);font-weight:700;
}

/* ---------- Mitos ---------- */
.mitos{max-width:780px}
.mitos dt{font-family:'Sora',sans-serif;font-weight:600;color:var(--verde-escuro);margin-top:20px}
.mitos dd{margin:6px 0 0}

/* ---------- Duas colunas ---------- */
.duas-colunas{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center;margin-bottom:18px}

/* ---------- Dra ---------- */
.dra-bloco{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:center}
.dra{border-radius:50%;aspect-ratio:1/1;object-fit:cover}

/* ---------- FAQ ---------- */
details{
  background:#fff;border:1px solid #E5EBE7;border-radius:12px;
  margin-bottom:12px;padding:0 22px;
}
details summary{
  cursor:pointer;font-family:'Sora',sans-serif;font-weight:600;
  color:var(--verde-escuro);padding:18px 0;list-style-position:inside;
}
details summary:hover{color:var(--verde)}
details[open]{border-color:var(--verde)}
details p{margin-top:0;padding-bottom:18px}

/* ---------- CTA final ---------- */
.cta-final{
  max-width:none;background:var(--verde-escuro);color:#fff;
  text-align:center;padding:72px 24px;
}
.cta-final h2{color:#fff}
.cta-final p{max-width:640px;margin:0 auto 28px}

/* ---------- Rodapé ---------- */
.rodape{
  text-align:center;padding:36px 24px;background:#fff;
  border-top:1px solid #E5EBE7;font-size:.9rem;color:#5C6661;
}
.rodape p{margin:6px 0}

/* ---------- Responsivo ---------- */
@media(max-width:860px){
  .hero,.duas-colunas,.dra-bloco{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .hero-img{order:-1}
  .dra{max-width:220px;margin:auto}
}

/* ---------- Acessibilidade ---------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}