/* ==========================================================================
   SEÇÕES — blocos da página inicial
   Na mesma ordem em que aparecem no index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Topo (hero) com retrato
   -------------------------------------------------------------------------- */
.hero{padding-top:calc(82px + clamp(44px,7vw,88px)); padding-bottom:0; position:relative; overflow:hidden}
.hero::after{
  content:''; position:absolute; inset:auto 0 0 0; height:46%; background:var(--areia); z-index:0;
}
.hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,72px); align-items:end}
.hero__texto{padding-bottom:clamp(56px,7vw,104px)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.15rem); line-height:1.06; margin-bottom:26px}
.hero h1 em{font-style:italic; color:var(--taupe)}
.hero__lead{max-width:44ch; color:var(--tinta-60); font-size:clamp(1.02rem,1.5vw,1.15rem)}
.hero__acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

.retrato{position:relative}
.retrato__moldura{
  border-radius:var(--arco); overflow:hidden; position:relative;
  box-shadow:0 32px 70px -34px rgba(38,35,32,.5);
}
.retrato__moldura img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 22%}
.retrato::before{
  content:''; position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--taupe-claro);
  border-radius:var(--arco); opacity:.55; z-index:-1;
}

/* faixa de credenciais */
.faixa{background:var(--areia); border-top:1px solid rgba(38,35,32,.08)}
.faixa__in{display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding-block:0}
.faixa__item{padding:30px 26px; text-align:center; border-left:1px solid rgba(38,35,32,.1)}
.faixa__item:first-child{border-left:0}
.faixa__item strong{display:block; font-family:var(--display); font-size:1.28rem; font-weight:400; margin-bottom:2px}
.faixa__item span{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-60)}

/* --------------------------------------------------------------------------
   2. Identificação — "talvez você se reconheça aqui"
   -------------------------------------------------------------------------- */
.reconhecer{background:var(--verde); color:var(--areia); position:relative; overflow:hidden}
.reconhecer::before{
  content:'”'; position:absolute; top:-.28em; left:-.06em; font-family:var(--display);
  font-size:34rem; line-height:1; color:rgba(243,238,231,.045); pointer-events:none;
}
.reconhecer__cab{max-width:56ch; position:relative; margin-bottom:clamp(38px,5vw,60px)}
.reconhecer h2{color:var(--areia)}
.reconhecer__lead{color:rgba(243,238,231,.7); margin-top:20px; font-size:1.05rem}
.frases{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1px; background:var(--linha-clara); border:1px solid var(--linha-clara); position:relative}
.frase{background:var(--verde); padding:34px 30px; font-family:var(--display); font-style:italic;
  font-size:1.32rem; line-height:1.42; color:rgba(243,238,231,.94); transition:background .4s}
.frase:hover{background:var(--verde-2)}
.reconhecer__nota{margin-top:38px; color:rgba(243,238,231,.62); font-size:.97rem; max-width:56ch}
.reconhecer__nota strong{color:var(--areia); font-weight:400}

/* --------------------------------------------------------------------------
   3. Sobre a psicóloga
   -------------------------------------------------------------------------- */
.sobre__in{display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(36px,6vw,84px); align-items:center}
.sobre__foto{border-radius:var(--arco); overflow:hidden; box-shadow:0 28px 60px -34px rgba(38,35,32,.45)}
.sobre__foto img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 24%}
.sobre h2{margin-bottom:26px}
.assinatura{
  margin-top:32px; padding-top:26px; border-top:1px solid var(--linha);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.assinatura b{font-family:var(--display); font-weight:400; font-size:1.4rem}
.assinatura span{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe)}
.credenciais{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px}
.credenciais li{position:relative; padding-left:24px; color:var(--tinta-60); font-size:.98rem}
.credenciais li::before{content:''; position:absolute; left:0; top:.72em; width:11px; height:1px; background:var(--taupe)}

/* --------------------------------------------------------------------------
   4. Temas atendidos
   -------------------------------------------------------------------------- */
.temas{background:var(--areia)}
.temas__cab{max-width:60ch; margin-bottom:clamp(38px,5vw,58px)}
.grade-temas{display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:14px}
.tema{
  background:var(--papel); border:1px solid rgba(38,35,32,.08); border-radius:4px 4px 4px 4px;
  padding:30px 28px 32px; transition:.4s ease;
}
.tema:hover{transform:translateY(-4px); border-color:var(--taupe-claro); box-shadow:0 20px 40px -28px rgba(38,35,32,.45)}
.tema h3{font-size:1.42rem; margin-bottom:10px}
.tema p{font-size:.95rem; color:var(--tinta-60); line-height:1.66; margin:0}
.temas__rodape{margin-top:34px; font-size:.97rem; color:var(--tinta-60)}

/* --------------------------------------------------------------------------
   5. Como funciona, passo a passo
   -------------------------------------------------------------------------- */
.etapas__in{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,78px)}
.etapas__lista{list-style:none; margin:0; padding:0; counter-reset:et}
.etapa{display:grid; grid-template-columns:auto 1fr; gap:26px; padding:28px 0; border-top:1px solid var(--linha)}
.etapa:last-child{border-bottom:1px solid var(--linha)}
.etapa__n{
  counter-increment:et; font-family:var(--display); font-size:1.1rem; color:var(--taupe);
  padding-top:.25em; min-width:26px;
}
.etapa__n::before{content:'0' counter(et)}
.etapa h3{font-size:1.5rem; margin-bottom:8px}
.etapa p{font-size:.97rem; color:var(--tinta-60); margin:0}
.etapas__nota{
  margin-top:30px; padding:24px 26px; background:var(--areia); border-radius:4px;
  font-size:.94rem; color:var(--tinta-60);
}

/* --------------------------------------------------------------------------
   6. Terapia online
   -------------------------------------------------------------------------- */
.online{background:var(--verde-2); color:var(--areia)}
.online__in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center}
.online h2{color:var(--areia)}
.online p{color:rgba(243,238,231,.72)}
.online__cab p{margin-top:20px; font-size:1.05rem}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.check{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:20px 0; border-bottom:1px solid var(--linha-clara)}
.check:first-child{border-top:1px solid var(--linha-clara)}
.check svg{width:17px; height:17px; margin-top:.32em; color:var(--verde-claro); flex:none}
.check b{display:block; font-weight:400; font-family:var(--display); font-size:1.26rem; margin-bottom:2px; color:var(--areia)}
.check span{font-size:.94rem; color:rgba(243,238,231,.66); line-height:1.6}
.online .btn{margin-top:34px}

/* --------------------------------------------------------------------------
   7. Agendamento e contato
   -------------------------------------------------------------------------- */
.agendar{background:var(--areia)}
.agendar__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,78px); align-items:start}
.agendar h2{margin-bottom:24px}
.agendar__acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.contato{list-style:none; margin:0; padding:0; background:var(--papel); border:1px solid rgba(38,35,32,.09); border-radius:4px}
.contato li{padding:24px 28px; border-bottom:1px solid rgba(38,35,32,.09)}
.contato li:last-child{border-bottom:0}
.contato h4{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe); font-family:var(--corpo); font-weight:400; margin:0 0 8px}
.contato p{margin:0; font-size:1rem; line-height:1.6}
.contato a:hover{color:var(--taupe)}

/* --------------------------------------------------------------------------
   8. Rodapé
   -------------------------------------------------------------------------- */
.rodape{background:var(--verde); color:rgba(243,238,231,.66); padding-block:clamp(56px,7vw,84px) 34px; font-size:.93rem}
.rodape__in{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--linha-clara)}
.rodape h5{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--verde-claro); font-family:var(--corpo); font-weight:400; margin:0 0 18px}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.rodape a:hover{color:var(--areia)}
.rodape__marca p{margin-top:22px; max-width:34ch; font-size:.93rem}
.rodape__fim{padding-top:26px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:.82rem; color:rgba(243,238,231,.5)}
.aviso{margin-top:22px; font-size:.82rem; color:rgba(243,238,231,.5); max-width:74ch; line-height:1.7}