/* Paula Costa Psicóloga — identidade conforme manual da marca
   Cores: #213346 (marinho) #416784 (azul) #bca791 (areia) #f5ede2 (creme)
   Tipos:  Cormorant Garamond (títulos, eco do logotipo) + Inter (texto)     */

:root{
  --marinho:#213346;
  --azul:#416784;
  --areia:#bca791;
  --creme:#f5ede2;
  --creme-claro:#faf6ef;
  --tinta:#2a3a4d;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--tinta);
  background:var(--creme-claro);
}

.wrap{ max-width:68rem; margin-inline:auto; padding-inline:1.25rem; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--marinho); margin:0 0 .5em; }
h2{ font-size:clamp(1.9rem, 3.5vw, 2.6rem); line-height:1.15; }
h3{ font-size:1.35rem; }
p{ margin:0 0 1em; }
a{ color:var(--azul); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--azul); outline-offset:2px;
}
img{ max-width:100%; height:auto; }

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--creme-claro) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid color-mix(in srgb, var(--areia) 45%, transparent);
}
.topo-linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.logo-link img{ width:clamp(150px, 18vw, 200px); height:auto; display:block; }
.menu{ display:flex; gap:1.6rem; align-items:center; }
.menu a{ color:var(--marinho); text-decoration:none; font-size:.95rem; }
.menu a:hover{ text-decoration:underline; }
.menu-cta{
  border:1px solid var(--marinho); border-radius:999px;
  padding:.45rem 1.1rem;
}
.menu-cta:hover{ background:var(--marinho); color:var(--creme) !important; text-decoration:none !important; }
.menu-botao{ display:none; }
.menu-mobile{ display:none; }

/* ícones sociais (topo e rodapé) */
.icones-sociais{ display:flex; gap:.6rem; align-items:center; }
.icone-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--marinho) 35%, transparent);
  color:var(--marinho);
  transition:background .2s ease, color .2s ease;
}
.icone-social svg{ width:19px; height:19px; }
.icone-social:hover{ background:var(--marinho); color:var(--creme); }
.rodape-icones .icone-social{
  border-color:color-mix(in srgb, var(--areia) 60%, transparent);
  color:var(--areia);
}
.rodape-icones .icone-social:hover{ background:var(--areia); color:var(--marinho); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--marinho);
  color:var(--creme);
  overflow:hidden;
}
.trigo{
  position:absolute; right:-3rem; top:50%;
  width:min(46vw, 430px); height:auto;
  transform:translateY(-50%) rotate(8deg);
  fill:var(--azul); opacity:.35;
}
.hero-conteudo{
  position:relative;
  padding-block:clamp(4.5rem, 11vw, 8.5rem);
  max-width:46rem;
}
.hero-saudacao{
  color:var(--areia);
  font-size:.95rem;
  letter-spacing:.02em;
  margin-bottom:1.2rem;
}
.hero h1{
  color:var(--creme);
  font-size:clamp(2.4rem, 5.4vw, 4rem);
  font-weight:500;
  line-height:1.12;
  max-width:16ch;
}
.hero-texto{
  max-width:34rem;
  font-size:1.1rem;
  color:color-mix(in srgb, var(--creme) 88%, var(--azul));
  margin-block:1.3rem 2.2rem;
}
.hero-acoes{ display:flex; gap:.9rem; flex-wrap:wrap; }

.botao{
  display:inline-block;
  font-family:var(--sans); font-weight:500; font-size:1rem;
  text-decoration:none; border-radius:999px;
  padding:.8rem 1.7rem;
  transition:background .2s ease, color .2s ease;
}
.botao-claro{ background:var(--creme); color:var(--marinho); }
.botao-claro:hover{ background:var(--areia); }
.botao-vazado{ border:1px solid var(--areia); color:var(--creme); }
.botao-vazado:hover{ background:color-mix(in srgb, var(--azul) 40%, transparent); }
.botao-escuro{ background:var(--marinho); color:var(--creme); border:none; cursor:pointer; }
.botao-escuro:hover{ background:var(--azul); }

/* ---------- sobre ---------- */
.sobre{ padding-block:clamp(3.5rem, 8vw, 6rem); }
.sobre-grade{
  display:grid; grid-template-columns:minmax(240px, 340px) 1fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
.sobre-foto{ margin:0; position:relative; }
.sobre-foto img:first-child{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:160px 160px 14px 14px;   /* arco: eco da folha de trigo */
  box-shadow:0 14px 40px color-mix(in srgb, var(--marinho) 18%, transparent);
}
.foto-reserva{ display:none; }
.sobre-foto.sem-foto .foto-reserva{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:4/5;
  border-radius:160px 160px 14px 14px;
  background:linear-gradient(170deg, var(--creme) 0%, color-mix(in srgb, var(--areia) 55%, var(--creme)) 100%);
}
.sobre-foto.sem-foto .foto-reserva img{ width:46%; opacity:.9; }
.sobre-credencial{
  font-size:.95rem; color:var(--azul); font-weight:400;
  border-bottom:1px solid color-mix(in srgb, var(--areia) 60%, transparent);
  padding-bottom:1rem; margin-bottom:1.2rem;
}

/* ---------- como posso ajudar ---------- */
.ajuda{
  background:var(--creme);
  padding-block:clamp(3.5rem, 8vw, 6rem);
}
.secao-abertura{ max-width:38rem; margin-bottom:2.2rem; }
.temas{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:2rem 2.5rem;
}
.temas li{ border-top:2px solid var(--areia); padding-top:1rem; }
.temas h3{ margin-bottom:.3em; }
.temas p{ margin:0; font-size:.98rem; }

/* ---------- processo / abordagens ---------- */
.processo{ padding-block:clamp(3.5rem, 8vw, 6rem); }
.processo-grade{ display:grid; gap:2.5rem; }
.processo-intro p{ max-width:38rem; }
.abordagens{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.abordagens article{
  background:var(--marinho); color:var(--creme);
  border-radius:16px; padding:1.8rem 1.9rem;
}
.abordagens h3{ color:var(--creme); display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.abordagens h3 span{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  color:var(--marinho); background:var(--areia);
  padding:.15rem .6rem; border-radius:999px;
}
.abordagens p{ margin:0; color:color-mix(in srgb, var(--creme) 90%, var(--azul)); font-size:.98rem; }
.praticos{
  margin:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem;
  border-top:1px solid color-mix(in srgb, var(--areia) 60%, transparent);
  padding-top:1.8rem;
}
.praticos dt{ font-weight:500; color:var(--marinho); margin-bottom:.25rem; }
.praticos dd{ margin:0; font-size:.95rem; }

/* ---------- dúvidas ---------- */
.duvidas{ background:var(--creme); padding-block:clamp(3.5rem, 8vw, 6rem); }
.duvidas-wrap{ max-width:46rem; }
.duvidas details{
  border-bottom:1px solid color-mix(in srgb, var(--areia) 70%, transparent);
}
.duvidas summary{
  cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:1.25rem; color:var(--marinho);
  padding-block:1rem; position:relative; padding-right:2rem;
}
.duvidas summary::-webkit-details-marker{ display:none; }
.duvidas summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--sans); font-weight:300; font-size:1.4rem; color:var(--azul);
}
.duvidas details[open] summary::after{ content:"–"; }
.duvidas details p{ margin:0 0 1.2rem; max-width:40rem; }

/* ---------- contato ---------- */
.contato{ padding-block:clamp(3.5rem, 8vw, 6rem); }
.contato-grade{
  display:grid; grid-template-columns:minmax(16rem, 24rem) 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
}
.contato-canais{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:1rem; }
.contato-canais li{ border-left:2px solid var(--areia); padding-left:1rem; }
.formulario{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.3rem; align-content:start; }
.formulario label{ display:grid; gap:.35rem; font-size:.92rem; font-weight:400; color:var(--marinho); }
.formulario .campo-mensagem{ grid-column:1 / -1; }
.formulario input, .formulario select, .formulario textarea{
  font:inherit; color:var(--tinta);
  background:#fff;
  border:1px solid color-mix(in srgb, var(--areia) 80%, transparent);
  border-radius:10px; padding:.7rem .85rem;
}
.formulario textarea{ resize:vertical; }
.formulario button{ grid-column:1 / -1; justify-self:start; }
.formulario-nota{ grid-column:1 / -1; font-size:.85rem; color:color-mix(in srgb, var(--tinta) 75%, transparent); margin:0; }
.nao-preencher{ position:absolute; left:-9999px; }

/* ---------- rodapé ---------- */
.rodape{ background:var(--marinho); color:color-mix(in srgb, var(--creme) 85%, var(--azul)); }
.rodape-linha{ padding-block:2.8rem; display:grid; gap:1rem; justify-items:start; }
.rodape p{ margin:0; font-size:.92rem; }
.rodape a{ color:var(--areia); }
.rodape-aviso{ max-width:34rem; }
.rodape-direitos{ opacity:.75; }

/* ---------- responsivo ---------- */
@media (max-width: 880px){
  .temas{ grid-template-columns:1fr 1fr; }
  .praticos{ grid-template-columns:1fr 1fr; }
  .abordagens{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .menu{ display:none; }
  .topo .icones-sociais{ margin-left:auto; margin-right:.6rem; }
  .icone-social{ width:34px; height:34px; }
  .menu-botao{
    display:block; font:inherit; font-size:.95rem;
    background:none; border:1px solid var(--marinho);
    border-radius:999px; padding:.4rem 1rem; color:var(--marinho); cursor:pointer;
  }
  .menu-mobile.aberto{
    display:grid; gap:.2rem; padding:0 1.25rem 1rem;
  }
  .menu-mobile a{
    color:var(--marinho); text-decoration:none; padding:.55rem 0;
    border-bottom:1px solid color-mix(in srgb, var(--areia) 40%, transparent);
  }
  .trigo{ right:-6rem; opacity:.22; }
  .sobre-grade, .contato-grade{ grid-template-columns:1fr; }
  .sobre-foto{ max-width:300px; }
  .formulario{ grid-template-columns:1fr; }
  .temas{ grid-template-columns:1fr; }
  .praticos{ grid-template-columns:1fr; }
}