/* ============================================================
   Site Psicóloga Sandra Menezes — Folha de estilo
   Paleta: verde-sálvia, creme, bege, marrom-claro
   ============================================================ */

/* ---------- 1. FONTES (carregadas do próprio site, sem rastreio) ---------- */
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-400i-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fontes/cormorant-400i-latin-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';src:url('../fontes/karla-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';src:url('../fontes/karla-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';src:url('../fontes/karla-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';src:url('../fontes/karla-500-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';src:url('../fontes/karla-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';src:url('../fontes/karla-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2. CORES E MEDIDAS ---------- */
:root{
  --verde:#6B8F71;
  --verde-escuro:#4F6E55;
  --verde-claro:#A9C2AD;
  --verde-vago:#EDF2EC;
  --creme:#FBF7F1;
  --bege:#F0E7DA;
  --bege-escuro:#E2D4C1;
  --marrom:#756045;
  --marrom-claro:#AF9880;
  --texto:#44403A;
  --texto-suave:#6E675E;
  --titulo:#32302B;
  --branco:#FFFDFA;
  --sombra:0 1px 3px rgba(68,64,58,.06), 0 8px 28px rgba(68,64,58,.06);
  --raio:14px;
  --larg:1120px;
  --nav-h:74px;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;background:var(--branco);color:var(--texto);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-escuro);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:'Cormorant',Georgia,serif;color:var(--titulo);font-weight:600;line-height:1.22;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,3.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4.2vw,2.7rem)}
h3{font-size:1.28rem;font-family:'Karla',sans-serif;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1.1em}
.container{max-width:var(--larg);margin:0 auto;padding:0 24px}
.estreito{max-width:760px}
section{padding:92px 0}
.fundo-creme{background:var(--creme)}
.fundo-verde{background:var(--verde-vago)}

/* rótulo acima dos títulos */
.rotulo{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde-escuro);font-weight:600;margin:0 0 14px;display:block;
}
.subtitulo{font-size:1.1rem;color:var(--texto-suave);max-width:60ch}

/* ---------- 4. ACESSIBILIDADE ---------- */
.pular{
  position:absolute;left:-9999px;top:0;background:var(--verde-escuro);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 8px 0;
}
.pular:focus{left:0}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:4px}

/* ---------- 5. CABEÇALHO ---------- */
.topo{
  position:sticky;top:0;z-index:100;background:rgba(255,253,250,.97);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(138,114,89,.12);
}
.topo-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px}
.marca{display:flex;align-items:center;flex-shrink:0}
.marca img{height:46px;width:auto}
.menu{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{
  color:var(--texto);text-decoration:none;font-size:.95rem;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.menu a:hover,.menu a.ativo{color:var(--verde-escuro);border-bottom-color:var(--verde)}
.btn-menu{display:none;background:none;border:0;cursor:pointer;padding:10px;color:var(--titulo)}
.btn-menu svg{display:block}

/* ---------- 6. BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-weight:600;font-size:1rem;
  text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s;
  border:1.5px solid transparent;cursor:pointer;
}
.btn-principal{background:var(--verde-escuro);color:#fff;box-shadow:0 4px 16px rgba(79,110,85,.3)}
.btn-principal:hover{background:#405A45;transform:translateY(-2px);box-shadow:0 8px 22px rgba(107,143,113,.34)}
.btn-vazado{border-color:var(--marrom-claro);color:var(--marrom);background:transparent}
.btn-vazado:hover{background:var(--bege);border-color:var(--marrom)}
.btn svg{flex-shrink:0}

/* ---------- 7. HERO ---------- */
.hero{padding:76px 0 86px;background:linear-gradient(170deg,var(--creme) 0%,var(--branco) 62%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center}
.hero h1{margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--verde-escuro)}
/* citação de abertura */
.hero-citacao{
  font-style:italic;font-size:clamp(1.65rem,3.9vw,2.55rem);
  line-height:1.3;margin-bottom:14px;
}
.hero-autor{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);margin:0 0 26px;
}
.hero-autor::before{
  content:'';display:inline-block;width:26px;height:1px;
  background:var(--verde-claro);vertical-align:middle;margin-right:12px;
}
.hero-texto p{font-size:1.14rem;color:var(--texto-suave);max-width:50ch}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-foto{position:relative}
.hero-foto img{
  border-radius:200px 200px var(--raio) var(--raio);
  box-shadow:var(--sombra);width:100%;
}
.hero-foto::after{
  content:'';position:absolute;inset:18px -18px -18px 18px;z-index:-1;
  border:1.5px solid var(--verde-claro);border-radius:200px 200px var(--raio) var(--raio);
}
.credencial{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--bege-escuro);
  font-size:.9rem;color:var(--texto-suave);line-height:1.6;
}
.credencial strong{color:var(--titulo);font-weight:600}

/* ---------- 8. SOBRE ---------- */
.sobre-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.sobre-foto img{border-radius:var(--raio);box-shadow:var(--sombra)}
.citacao{
  margin:34px 0 0;padding:24px 28px;background:var(--verde-vago);
  border-left:3px solid var(--verde);border-radius:0 var(--raio) var(--raio) 0;
}
.citacao p{
  font-family:'Cormorant',Georgia,serif;font-size:1.38rem;font-style:italic;
  color:var(--verde-escuro);margin:0 0 8px;line-height:1.5;
}
.citacao cite{font-style:normal;font-size:.85rem;color:var(--texto-suave);letter-spacing:.04em}

/* ---------- 9. CARTÕES DE ATENDIMENTO ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;margin-top:48px}
.cartao{
  background:var(--branco);border:1px solid var(--bege-escuro);border-radius:var(--raio);
  padding:34px 30px;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.cartao:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--verde-claro)}
.cartao-icone{
  width:46px;height:46px;border-radius:12px;background:var(--verde-vago);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--verde-escuro);
}
.cartao h3{margin-bottom:10px}
.cartao p{font-size:.97rem;color:var(--texto-suave);margin:0}

/* lista de demais demandas */
.etiquetas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.etiquetas li{
  background:var(--bege);color:var(--marrom);padding:7px 16px;border-radius:999px;
  font-size:.88rem;font-weight:500;
}

/* ---------- 10. PASSOS ---------- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;margin-top:46px;counter-reset:p}
.passo{position:relative;padding-top:52px}
.passo::before{
  counter-increment:p;content:counter(p);
  position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;
  background:var(--verde-escuro);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:1rem;
}
.passo h3{margin-bottom:8px}
.passo p{font-size:.97rem;color:var(--texto-suave);margin:0}

/* ---------- 11. INFORMAÇÕES PRÁTICAS ---------- */
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:44px}
.info{background:var(--branco);border:1px solid var(--bege-escuro);border-radius:var(--raio);padding:26px}
.info h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verde-escuro);margin-bottom:10px}
.info p{margin:0;font-size:1rem;color:var(--texto)}
.info p + p{margin-top:6px;font-size:.9rem;color:var(--texto-suave)}

/* ---------- 12. CONSULTÓRIO ---------- */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.galeria img{border-radius:var(--raio);box-shadow:var(--sombra);width:100%}

/* ---------- 13. PERGUNTAS (FAQ) ---------- */
.faq{margin-top:44px;max-width:820px}
.faq details{
  border-bottom:1px solid var(--bege-escuro);padding:4px 0;
}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-weight:500;font-size:1.06rem;color:var(--titulo);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--verde-escuro)}
.faq-corpo{padding:0 44px 24px 0;color:var(--texto-suave);font-size:1rem}
.faq-corpo p:last-child{margin-bottom:0}

/* ---------- 14. CONTATO ---------- */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.contato-lista{list-style:none;padding:0;margin:30px 0 0}
.contato-lista li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--bege-escuro)}
.contato-lista li:last-child{border-bottom:0}
.contato-icone{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--verde-vago);
  display:flex;align-items:center;justify-content:center;color:var(--verde-escuro);
}
.contato-lista strong{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-escuro);font-weight:600;margin-bottom:3px}
.contato-lista a{color:var(--texto);text-decoration:none}
.contato-lista a:hover{color:var(--verde-escuro);text-decoration:underline}
.mapa{border-radius:var(--raio);overflow:hidden;border:1px solid var(--bege-escuro);background:var(--creme)}
.mapa-interno{
  padding:34px 30px;text-align:center;
}
.mapa-interno p{font-size:.97rem;color:var(--texto-suave)}

/* aviso de emergência */
.aviso{
  margin-top:40px;background:#FDF6EC;border:1px solid #E8D5B0;border-radius:var(--raio);
  padding:22px 26px;
}
.aviso h3{font-size:1rem;color:#8A6520;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.aviso p{font-size:.94rem;color:#6E5A35;margin:0}
.aviso a{color:#6E5A35;font-weight:600}

/* ---------- 15. RODAPÉ ---------- */
.rodape{background:var(--titulo);color:#CFC9C0;padding:60px 0 28px;font-size:.92rem}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:42px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
.rodape h4{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;font-weight:600;font-family:'Karla',sans-serif}
.rodape p{margin:0 0 8px;line-height:1.7}
.rodape a{color:#CFC9C0;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:9px}
.rodape-marca img{height:58px;width:auto;margin-bottom:18px;opacity:.95}
.rodape-fim{padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem;color:#9A948C}
.rodape-fim a{color:#9A948C}

/* ---------- 16. BOTÃO FLUTUANTE WHATSAPP ---------- */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .2s;
}
.zap:hover{transform:scale(1.08)}
.zap svg{width:30px;height:30px;fill:#fff}

/* ---------- 17. PÁGINAS INTERNAS (texto corrido) ---------- */
.pagina-texto{padding:62px 0 86px}
.pagina-texto h2{margin-top:44px;font-size:1.65rem}
.pagina-texto h3{margin-top:30px}
.pagina-texto ul{padding-left:22px}
.pagina-texto li{margin-bottom:9px}
.voltar{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-size:.94rem;text-decoration:none;color:var(--verde-escuro)}
.voltar:hover{text-decoration:underline}

/* ---------- 18. RESPONSIVO ---------- */
@media (max-width:900px){
  .hero-grid,.sobre-grid,.contato-grid{grid-template-columns:1fr;gap:44px}
  .hero-foto{max-width:420px;margin:0 auto;order:-1}
  .hero-foto::after{display:none}
  .sobre-foto{max-width:400px}
  .galeria{grid-template-columns:1fr}
  .rodape-grid{grid-template-columns:1fr;gap:32px}
  section{padding:68px 0}

  .btn-menu{display:block}
  .menu{
    position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--branco);flex-direction:column;align-items:stretch;gap:0;
    border-bottom:1px solid var(--bege-escuro);box-shadow:var(--sombra);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .menu.aberto{max-height:420px}
  .menu li{border-bottom:1px solid var(--creme)}
  .menu a{display:block;padding:16px 24px;border-bottom:0}
  .menu a:hover,.menu a.ativo{background:var(--verde-vago);border-bottom:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .container{padding:0 18px}
  .hero{padding:48px 0 60px}
  .hero-acoes{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .rodape-fim{flex-direction:column;gap:8px}
}

/* ---------- 19. IMPRESSÃO E MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .topo,.zap,.hero-acoes{display:none}
  body{font-size:12pt}
}

/* ---------- 20. CLASSES AUXILIARES ----------
   Usadas para evitar estilos escritos dentro do HTML.
   Isso permite uma política de segurança (CSP) mais rígida. */
.mt-xs{margin-top:14px}
.mt-sm{margin-top:24px}
.mt-md{margin-top:28px}
.mt-lg{margin-top:56px}
.mb-sm{margin-bottom:12px}
.nota{margin-top:24px;color:var(--texto-suave);font-size:.97rem}
.claro{color:#fff}
.centro{text-align:center}
.titulo-menor{font-size:clamp(2rem,5vw,2.9rem)}
.sem-borda{border-top:0;padding-top:0}
.bloco-centro{min-height:70vh;display:flex;align-items:center}
.simbolo-404{margin:0 auto 28px}
.subtitulo-centro{margin:0 auto 32px}
.nota-rodape{margin-top:40px;font-size:.9rem;color:var(--texto-suave)}