/* Érica Karoline · psicóloga · Boa Vista/RR
   Base clara e quente, como os sites de psicologia que a gente olhou (Everbe, Gayane Aramyan):
   nada de branco clínico nem azul corporativo. Um acento só, terracota, guardado pros botões. */

:root{
  --papel:#FBF7F1;      /* creme quente, o fundo */
  --papel-2:#F4EDE3;    /* creme um tom abaixo, pra alternar seção */
  --nata:#FFFDFA;       /* cartão */
  --tinta:#2E241E;      /* marrom quase preto, o texto */
  --tinta-2:#6B5B50;    /* texto secundário */
  --linha:#E3D8C9;
  --barro:#B4674A;      /* O ACENTO. só CTA, kicker e detalhe. */
  --barro-fundo:#F0DDD3;
  --sálvia:#8A9A7B;     /* apoio, nunca compete com o barro */
  --sálvia-fundo:#E7EBE1;

  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --corpo:'Karla', -apple-system, 'Segoe UI', system-ui, sans-serif;

  --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:96px; --e7:136px;
  --raio:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--corpo); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}

.env{width:min(1180px, calc(100% - 48px)); margin-inline:auto}
.env.estreito{width:min(760px, calc(100% - 48px))}

.pular{
  position:absolute; left:-9999px; background:var(--barro); color:#fff;
  padding:12px 18px; border-radius:0 0 10px 0; z-index:200;
}
.pular:focus{left:0; top:0}
:focus-visible{outline:3px solid var(--barro); outline-offset:3px; border-radius:4px}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(38px, 6.4vw, 68px); text-wrap:balance}
h1 em{font-style:italic; color:var(--barro)}
.titulo{font-size:clamp(29px, 4.2vw, 46px); text-wrap:balance; margin-bottom:var(--e3)}
h3{font-size:21px; letter-spacing:-.01em}
p{margin:0 0 var(--e2); max-width:64ch}
.lead{font-size:20px; color:var(--tinta-2)}
.kicker{
  font-family:var(--corpo); font-size:12.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--barro); margin-bottom:var(--e2);
}

/* ---------- botões ---------- */
.bt{
  display:inline-block; background:var(--barro); color:var(--papel);
  padding:14px 28px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:16px; border:1.5px solid var(--barro);
  transition:background .18s ease, transform .18s ease;
}
.bt:hover{background:#9C583E; transform:translateY(-1px)}
.bt-grande{padding:17px 36px; font-size:17.5px}
.bt-vazio{
  display:inline-block; padding:14px 26px; border-radius:999px; text-decoration:none;
  border:1.5px solid var(--linha); color:var(--tinta); font-weight:600; font-size:16px;
  transition:border-color .18s ease;
}
.bt-vazio:hover{border-color:var(--barro)}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:100; background:rgba(251,247,241,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linha);
}
.topo-in{display:flex; align-items:center; gap:var(--e3); min-height:76px}
.marca{text-decoration:none; display:flex; flex-direction:column; margin-right:auto}
.marca-nome{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em}
.marca-crp{font-size:11.5px; color:var(--tinta-2); letter-spacing:.06em}
.menu{display:flex; align-items:center; gap:var(--e3)}
.menu a{text-decoration:none; font-size:15.5px; font-weight:500; color:var(--tinta-2)}
.menu a:hover{color:var(--barro)}
.menu a.bt-menu{color:var(--papel); font-size:14.5px; padding:11px 20px}
.menu a.bt-menu:hover{color:var(--papel)}
.menu-bt{display:none; background:none; border:0; padding:10px; cursor:pointer}
.menu-bt span{display:block; width:24px; height:2px; background:var(--tinta); margin:5px 0; border-radius:2px}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:center; gap:clamp(28px, 5vw, 72px);
  width:min(1180px, calc(100% - 48px)); margin:var(--e6) auto var(--e5);
}
.hero-foto{position:relative}
.hero-foto img{
  border-radius:var(--raio); aspect-ratio:4/5; object-fit:cover; width:100%;
  box-shadow:0 24px 60px -28px rgba(46,36,30,.4);
}
.hero-foto::after{
  content:""; position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border:1.5px solid var(--barro); border-radius:var(--raio); opacity:.35;
}
.hero-texto .lead{margin-top:var(--e3)}
.hero-acoes{display:flex; gap:var(--e2); flex-wrap:wrap; margin-top:var(--e4)}

/* ---------- faixa ---------- */
.faixa{background:var(--barro-fundo); overflow:hidden; padding:14px 0; border-block:1px solid var(--linha)}
.faixa-rolo{
  display:flex; gap:var(--e3); white-space:nowrap; width:max-content;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A4E37;
  animation:rolar 34s linear infinite;
}
@keyframes rolar{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .faixa-rolo{animation:none} }

/* ---------- seções ---------- */
.secao{padding:var(--e7) 0}
.secao-clara{background:var(--papel-2)}

.colunas{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:start}
.col-texto p{font-size:19px}
.lista-sentir{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.lista-sentir li{
  background:var(--nata); border:1px solid var(--linha); border-left:3px solid var(--sálvia);
  border-radius:10px; padding:14px 18px; font-size:16.5px;
}

.sobre-grade{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:center}
.sobre-img img{border-radius:var(--raio); aspect-ratio:4/5; object-fit:cover; width:100%}
.selo-crp{
  display:inline-block; background:var(--sálvia-fundo); color:#4F5C43;
  border-radius:999px; padding:6px 16px; font-size:14px; font-weight:600;
  margin-bottom:var(--e3);
}
.nota-etica{font-size:15px; color:var(--tinta-2); border-top:1px solid var(--linha); padding-top:var(--e2)}

.passos{list-style:none; margin:0 0 var(--e5); padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3)}
.passos li{background:var(--nata); border:1px solid var(--linha); border-radius:var(--raio); padding:var(--e3)}
.passo-n{
  font-family:var(--display); font-size:34px; font-weight:600; color:var(--barro);
  display:block; margin-bottom:10px; line-height:1;
}
.passos h3{margin-bottom:8px}
.passos p{font-size:16px; color:var(--tinta-2); margin:0}

.dois-modos{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e3)}
.dois-modos article{border:1.5px solid var(--linha); border-radius:var(--raio); padding:var(--e3) var(--e4)}
.dois-modos h3{margin-bottom:8px; color:var(--barro)}
.dois-modos p{font-size:16.5px; color:var(--tinta-2); margin:0}

details{border-bottom:1px solid var(--linha); padding:var(--e2) 0}
summary{
  font-family:var(--display); font-size:20px; font-weight:600; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:var(--e2); align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--barro); font-size:26px; line-height:1; font-family:var(--corpo)}
details[open] summary::after{content:"–"}
details p{margin:var(--e2) 0 6px; color:var(--tinta-2); font-size:16.5px}

.contato-grade{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center}
.contato-img img{border-radius:var(--raio); aspect-ratio:1/1; object-fit:cover; width:100%}
.contato-dados{display:grid; grid-template-columns:auto 1fr; gap:8px var(--e3); margin:var(--e4) 0 0; font-size:16px}
.contato-dados dt{font-weight:600; color:var(--tinta-2)}
.contato-dados dd{margin:0}
.contato .bt-grande{margin-top:var(--e2)}

/* ---------- rodapé ---------- */
.rodape{background:var(--tinta); color:#EFE6DC; padding:var(--e5) 0 var(--e4)}
.rodape-in{display:grid; grid-template-columns:1fr auto; gap:var(--e4)}
.rodape p{margin:0 0 6px; font-size:15px; color:#C9BCB0; max-width:none}
.rodape a{color:#EFE6DC}
.rodape-nome{font-family:var(--display); font-size:21px; color:#FBF7F1 !important}
.rodape-crp{color:#E0B9A6 !important; font-weight:600}
.rodape-aviso{
  grid-column:1/-1; border-top:1px solid rgba(255,255,255,.14); padding-top:var(--e3);
  margin-top:var(--e3); font-size:13.5px !important; line-height:1.6;
}

/* ---------- WhatsApp + LGPD ---------- */
.zap{
  position:fixed; right:20px; bottom:20px; z-index:121;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45); transition:transform .18s ease;
}
.zap:hover{transform:scale(1.06)}
/* Barra rente ao pé da tela, largura inteira. Antes era uma caixa no canto de baixo à
   esquerda, e ela caía EM CIMA da foto do hero: a primeira coisa que o cliente via era
   um aviso de cookie tapando o rosto da profissional. */
.lgpd{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--nata); border-top:1px solid var(--linha);
  box-shadow:0 -8px 30px -14px rgba(46,36,30,.28);
  padding:12px clamp(16px, 4vw, 28px);
  display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
}
.lgpd p{font-size:14px; margin:0; flex:1 1 320px; color:var(--tinta-2)}
.lgpd .bt{padding:9px 22px; font-size:14.5px; flex:0 0 auto}

/* ---------- revelação (só com JS; sem JS aparece tudo) ---------- */
.js .rev{opacity:0; transform:translateY(18px)}
.js .rev.vem{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}
@media (prefers-reduced-motion: reduce){
  .js .rev{opacity:1 !important; transform:none !important}
}

/* ---------- responsivo ---------- */
@media (max-width: 900px){
  body{font-size:17px}
  .secao{padding:var(--e6) 0}
  .hero{grid-template-columns:1fr; margin-top:var(--e4); gap:var(--e4)}
  .hero-foto{order:-1}
  .hero-foto img{aspect-ratio:5/4}
  .hero-foto::after{display:none}
  .colunas, .sobre-grade, .contato-grade{grid-template-columns:1fr}
  .sobre-img{order:-1}
  .passos, .dois-modos{grid-template-columns:1fr}
  .rodape-in{grid-template-columns:1fr}

  .menu{
    position:fixed; inset:76px 0 auto 0; background:var(--papel);
    border-bottom:1px solid var(--linha); flex-direction:column; align-items:flex-start;
    gap:0; padding:var(--e2) 24px var(--e3); display:none;
  }
  .menu.aberto{display:flex}
  .menu a{padding:13px 0; width:100%; font-size:17px}
  .menu a.bt-menu{margin-top:var(--e2); text-align:center}
  .menu-bt{display:block}
  .lgpd{padding:12px 16px}
  .lgpd .bt{width:100%; text-align:center}
}

/* a foto da formatura entra pequena, como um detalhe humano, não como um bloco */
.mini-formatura{margin:0 0 var(--e3); display:flex; align-items:center; gap:var(--e2)}
.mini-formatura img{
  width:104px; height:132px; object-fit:cover; object-position:center 22%;
  border-radius:10px; border:3px solid var(--nata); box-shadow:0 8px 20px -10px rgba(46,36,30,.45);
}
@media (max-width:900px){ .mini-formatura img{width:88px; height:112px} }

/* ---------- contato: formulário, dados e mapa ---------- */
.contato-grade{align-items:start}
.form{background:var(--nata); border:1px solid var(--linha); border-radius:var(--raio); padding:var(--e4)}
.form h3{margin-bottom:var(--e3)}
.form .campo{margin-bottom:var(--e2)}
.form label{display:block; font-size:14.5px; font-weight:600; color:var(--tinta-2); margin-bottom:6px}
.form label span{color:var(--barro)}
.form input, .form textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--linha); border-radius:10px;
  background:var(--papel); color:var(--tinta); font:inherit; font-size:16px; outline:none;
  transition:border-color .18s ease;
}
.form input:focus, .form textarea:focus{border-color:var(--barro)}
.form textarea{resize:vertical; min-height:110px}
.form-bts{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--e3)}
.form-bts .bt, .form-bts .bt-vazio{border:none; cursor:pointer; font-family:inherit}
.form-bts .bt-vazio{border:1.5px solid var(--linha)}
.form-erro{
  background:var(--barro-fundo); color:#8A4E37; border-radius:9px;
  padding:11px 14px; font-size:14.5px; margin:0;
}
.form-nota{font-size:13.5px; color:var(--tinta-2); margin:var(--e2) 0 0}

.contato-lado{display:grid; gap:var(--e3)}
.contato-foto{border-radius:var(--raio); aspect-ratio:4/5; object-fit:cover; width:100%}

.mapa-bloco{margin-top:var(--e5)}
.mapa-bloco h3{margin-bottom:8px}
.mapa-nota{color:var(--tinta-2); font-size:16.5px}
.mapa{
  margin-top:var(--e3); border-radius:var(--raio); overflow:hidden;
  border:1px solid var(--linha); background:var(--papel-2); line-height:0;
}
.mapa iframe{width:100%; height:clamp(280px, 38vw, 420px); display:block; filter:saturate(.85)}

/* ---------- os consultórios (mais de um endereço) ---------- */
.locais{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e3); margin-top:var(--e3)}
.local{
  background:var(--nata); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e3); display:flex; flex-direction:column;
}
.local h4{
  font-family:var(--display); font-size:19px; font-weight:600; margin:0 0 6px;
  letter-spacing:-.01em; color:var(--tinta);
}
.local address{font-style:normal; font-size:15.5px; line-height:1.55; color:var(--tinta-2); margin-bottom:var(--e2)}
.local .mapa{margin-top:auto}
.local .mapa iframe{height:230px}
.local-link{
  display:inline-block; margin-top:12px; font-size:14.5px; font-weight:600;
  color:var(--acento, #B4674A); text-decoration:none; border-bottom:1.5px solid currentColor;
  align-self:flex-start; padding-bottom:1px;
}
.local-link{color:var(--barro)}
@media (max-width:900px){ .locais{grid-template-columns:1fr} }