@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --petroleo:#12302C;
  --petroleo-med:#2E5951;
  --areia:#F6F3EC;
  --areia-escura:#EAE4D4;
  --ocre:#B9833A;
  --ocre-escuro:#8F632A;
  --tinta:#1B1A17;
  --tinta-suave:#4B5450;
  --linha:#D8D2C2;
  --max:760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.01em;
  line-height:1.05;
  margin:0;
  color:var(--petroleo);
}
a{color:var(--petroleo-med)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1040px;margin:0 auto;padding:0 24px}

/* header */
header{
  padding:22px 0;
  border-bottom:1px solid var(--linha);
}
.header-row{
  max-width:1040px;margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.marca{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  color:var(--petroleo);
  text-decoration:none;
}
nav{display:flex;gap:20px;font-size:0.92rem}
nav a{text-decoration:none;color:var(--tinta-suave)}
nav a:hover{color:var(--petroleo)}

/* hero */
.hero{padding:72px 0 56px}
.hero h1{font-size:3.4rem;max-width:620px}
.hero .sub{
  margin-top:20px;
  font-size:1.12rem;
  color:var(--tinta-suave);
  max-width:520px;
}
.hero-ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:3px;
  text-decoration:none;
  font-weight:600;
  font-size:0.96rem;
  border:1.5px solid var(--petroleo);
}
.btn-primario{background:var(--petroleo);color:var(--areia)}
.btn-primario:hover{background:var(--petroleo-med)}
.btn-fora{background:transparent;color:var(--petroleo)}
.btn-fora:hover{background:var(--petroleo);color:var(--areia)}
.btn-ocre{background:var(--ocre);border-color:var(--ocre);color:#fff}
.btn-ocre:hover{background:var(--ocre-escuro);border-color:var(--ocre-escuro)}

/* indice de dores */
.indice{
  border-top:1px solid var(--linha);
}
.indice-head{padding:48px 0 8px}
.indice-head h2{font-size:1.9rem}
.indice-head p{color:var(--tinta-suave);margin-top:10px;max-width:560px}
.indice-lista{padding-bottom:40px}
.indice-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--linha);
  text-decoration:none;
  color:var(--tinta);
}
.indice-item:first-child{border-top:1px solid var(--linha)}
.indice-item .nome{font-size:1.22rem;font-weight:600}
.indice-item .desc{color:var(--tinta-suave);font-size:0.92rem;flex:1;text-align:right;max-width:340px}
.indice-item:hover .nome{color:var(--ocre-escuro)}

/* como funciona */
.passos{background:var(--petroleo);color:var(--areia);padding:56px 0}
.passos h2{color:var(--areia);font-size:1.9rem;margin-bottom:34px}
.passos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.passo{border-top:2px solid var(--ocre);padding-top:16px}
.passo .n{font-family:'Bebas Neue',sans-serif;font-size:2.1rem;color:var(--ocre)}
.passo h3{color:var(--areia);font-size:1.15rem;margin:6px 0 8px;font-family:'IBM Plex Sans',sans-serif;font-weight:700}
.passo p{color:#CFE0DB;font-size:0.93rem;margin:0}

/* sobre */
.sobre{padding:60px 0}
.sobre .wrap{max-width:640px}
.sobre h2{font-size:1.9rem;margin-bottom:16px}
.sobre p{color:var(--tinta-suave)}

/* cta final */
.cta-final{
  background:var(--areia-escura);
  padding:52px 0;
  text-align:left;
  border-top:1px solid var(--linha);
}
.cta-final h2{font-size:2rem;max-width:480px}
.cta-final p{color:var(--tinta-suave);max-width:460px;margin-top:12px}
.cta-final .hero-ctas{margin-top:24px}

footer{padding:30px 0 50px;font-size:0.85rem;color:var(--tinta-suave)}
footer a{color:var(--tinta-suave)}

/* paginas de conteudo */
.artigo{padding:56px 0 20px}
.artigo .eyebrow-livre{font-size:0.9rem;color:var(--ocre-escuro);font-weight:600;margin-bottom:10px}
.artigo h1{font-size:2.6rem;max-width:640px}
.artigo .intro{font-size:1.08rem;color:var(--tinta-suave);margin-top:18px;max-width:600px}
.artigo-corpo{padding:10px 0 40px;max-width:640px}
.artigo-corpo h2{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:1.25rem;color:var(--petroleo);margin:32px 0 12px}
.artigo-corpo p{color:var(--tinta)}
.artigo-corpo ul{padding-left:20px;color:var(--tinta)}
.artigo-corpo li{margin-bottom:8px}

.caixa-cta{
  background:var(--petroleo);
  color:var(--areia);
  border-radius:4px;
  padding:28px 30px;
  margin:36px 0;
}
.caixa-cta.ocre{background:var(--ocre)}
.caixa-cta h3{color:var(--areia);font-family:'IBM Plex Sans',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:8px}
.caixa-cta p{color:#CFE0DB;font-size:0.93rem;margin-bottom:16px}
.caixa-cta.ocre p{color:#FBEEE0}
.caixa-cta .btn{margin-right:10px;margin-top:4px}

.aviso-medico{
  font-size:0.84rem;
  color:var(--tinta-suave);
  border-left:3px solid var(--linha);
  padding-left:14px;
  margin:28px 0;
}

@media (max-width:720px){
  .hero h1{font-size:2.5rem}
  .passos-grid{grid-template-columns:1fr;gap:30px}
  .indice-item{flex-direction:column;align-items:flex-start;gap:4px}
  .indice-item .desc{text-align:left;max-width:none}
  .artigo h1{font-size:2rem}
  .header-row{flex-direction:column;align-items:flex-start;gap:10px}
}