/* ============================================================
   Cláudia Ribeiro — Psicóloga
   Base visual: neutros quentes, muito respiro, tipografia calma.
   ============================================================ */

:root{
  /* cor */
  --creme:#FAF7F2;
  --creme-2:#F3ECE3;
  --areia:#E8DDD0;
  --linha:#E2D6C6;
  --tinta:#2E2823;
  --tinta-suave:#6E6259;
  --terracota:#B25738;
  --terracota-escuro:#8F4229;
  --sage:#8B9B84;
  --branco:#FFFFFF;

  /* tipografia */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --corpo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* medida */
  --largura:1120px;
  --largura-texto:60ch;
  --raio:14px;
  --raio-g:24px;
  --seccao:clamp(3.75rem,7.5vw,6.25rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .6em;
  font-variation-settings:'SOFT' 20,'WONK' 0;
}
h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.1rem)}
h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);letter-spacing:0}
p{margin:0 0 1.1em;max-width:var(--largura-texto)}
p:last-child{margin-bottom:0}

.envolucro{width:min(100% - 2.5rem,var(--largura));margin-inline:auto}
.seccao{padding-block:var(--seccao)}
.seccao--creme{background:var(--creme-2)}

.olho{
  font-family:var(--corpo);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--terracota);
  margin:0 0 1.4rem;
}
.conduz{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);color:var(--tinta-suave);line-height:1.65}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.75rem;border-radius:999px;border:1px solid transparent;
  font-family:var(--corpo);font-size:.94rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.botao--cheio{background:var(--terracota);color:#fff}
.botao--cheio:hover{background:var(--terracota-escuro)}
.botao--vazio{border-color:var(--linha);color:var(--tinta);background:transparent}
.botao--vazio:hover{border-color:var(--tinta);background:rgba(46,40,35,.04)}
.botao:active{transform:translateY(1px)}
.botao:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--terracota);outline-offset:3px
}

/* ---------- cabeçalho ---------- */
.cabecalho{
  position:sticky;top:0;z-index:60;
  background:rgba(250,247,242,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.cabecalho.rolado{border-bottom-color:var(--linha)}
.cabecalho__interno{display:flex;align-items:center;gap:2rem;min-height:4.6rem}
.marca{display:flex;flex-direction:column;text-decoration:none;line-height:1.1;margin-right:auto}
.marca__nome{font-family:var(--display);font-size:1.16rem;letter-spacing:-.01em}
.marca__papel{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.25rem}
.menu{display:flex;align-items:center;gap:1.9rem}
.menu a{font-size:.9rem;text-decoration:none;color:var(--tinta-suave);transition:color .2s}
.menu a:hover{color:var(--tinta)}
.menu a.botao--cheio{color:#fff}
.menu a.botao--cheio:hover{color:#fff}
.menu a.botao--vazio{color:var(--tinta)}
.cabecalho .botao{padding:.68rem 1.35rem;font-size:.88rem}
.menu-abre{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--tinta)}

@media (max-width:860px){
  .menu{
    position:fixed;inset:4.6rem 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--creme);border-bottom:1px solid var(--linha);
    padding:.5rem 1.25rem 1.5rem;
    display:none;
  }
  .menu.aberto{display:flex}
  .menu a{padding:.95rem .25rem;border-bottom:1px solid var(--linha);font-size:1rem}
  .menu .botao{margin-top:1.1rem;border-bottom:0}
  .menu-abre{display:block}
}

/* ---------- capa ---------- */
.capa{position:relative;overflow:hidden;background:var(--creme)}
.capa__grade{
  display:grid;grid-template-columns:1fr .82fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(3.5rem,7vw,6.5rem)
}
.capa__texto h1{margin-bottom:.45em}
.capa__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.3rem}
.capa__figura{position:relative}
.capa__figura img{
  width:100%;height:clamp(24rem,42vw,33rem);object-fit:cover;object-position:50% 16%;
  border-radius:var(--raio-g) var(--raio-g) 120px var(--raio-g);
}
.capa__selo{
  position:absolute;left:-1.5rem;bottom:2.2rem;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:.85rem 1.15rem;box-shadow:0 12px 34px rgba(46,40,35,.09);
  font-size:.82rem;line-height:1.45;max-width:15rem
}
.capa__selo strong{display:block;font-family:var(--display);font-size:1rem;font-weight:400}
@media (max-width:860px){
  .capa__grade{grid-template-columns:1fr;gap:2.5rem}
  .capa__figura{order:-1}
  .capa__figura img{height:clamp(20rem,74vw,26rem);object-position:50% 14%;border-radius:var(--raio-g)}
  .capa__selo{position:static;max-width:none;margin-top:1rem;box-shadow:none}
}

/* ---------- faixa de frase ---------- */
.frase{background:var(--areia);padding-block:clamp(3rem,6vw,4.5rem);text-align:center}
.frase blockquote{
  margin:0 auto;max-width:34ch;
  font-family:var(--display);font-size:clamp(1.4rem,1.05rem + 1.5vw,2.1rem);
  line-height:1.35;letter-spacing:-.01em
}

/* ---------- duas colunas ---------- */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.duo--espelho{grid-template-columns:1.1fr .9fr}
.duo img{width:100%;height:clamp(22rem,40vw,31rem);object-fit:cover;object-position:50% 18%;border-radius:var(--raio-g)}
@media (max-width:860px){
  .duo,.duo--espelho{grid-template-columns:1fr;gap:2.2rem}
  .duo img{height:clamp(17rem,62vw,23rem)}
  .duo--espelho .duo__figura{order:-1}
}

/* ---------- passos ---------- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;margin-top:3.2rem}
.passo{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);padding:2rem 1.75rem}
.passo__n{
  font-family:var(--display);font-size:1.05rem;color:var(--terracota);
  width:2.35rem;height:2.35rem;border-radius:50%;border:1px solid var(--terracota);
  display:grid;place-items:center;margin-bottom:1.2rem
}
.passo h3{margin-bottom:.5rem}
.passo p{font-size:.95rem;color:var(--tinta-suave)}

/* ---------- fatos / detalhes ---------- */
.fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.5rem;margin-top:2.8rem}
.fato{border-top:1px solid var(--linha);padding-top:1.2rem}
.fato dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.5rem}
.fato dd{margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.3}

/* ---------- perguntas ---------- */
.perguntas{margin-top:2.8rem;max-width:52rem}
.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{
  cursor:pointer;list-style:none;padding:1.4rem 2.5rem 1.4rem 0;position:relative;
  font-family:var(--display);font-size:1.12rem;line-height:1.4
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{
  content:'';position:absolute;right:.35rem;top:1.85rem;width:.7rem;height:.7rem;
  border-right:1.5px solid var(--tinta-suave);border-bottom:1.5px solid var(--tinta-suave);
  transform:rotate(45deg);transition:transform .25s ease
}
.pergunta[open] summary::after{transform:rotate(-135deg)}
.pergunta p{padding-bottom:1.5rem;color:var(--tinta-suave);font-size:.97rem}

/* ---------- chamada final ---------- */
.chamada{background:var(--tinta);color:#F6F1EA;border-radius:var(--raio-g);padding:clamp(2.5rem,6vw,4.5rem);text-align:center}
.chamada h2{color:#fff}
.chamada p{margin-inline:auto;color:#D8CEC3}
.chamada .botao--cheio{margin-top:2rem}

/* ---------- rodapé ---------- */
.rodape{background:var(--creme-2);border-top:1px solid var(--linha);padding-block:3.5rem 2.5rem;font-size:.9rem}
.rodape__grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.rodape h4{font-family:var(--display);font-weight:400;font-size:1.05rem;margin:0 0 .9rem}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.rodape a{text-decoration:none;color:var(--tinta-suave)}
.rodape a:hover{color:var(--tinta)}
.rodape__fim{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:var(--tinta-suave);font-size:.8rem
}
@media (max-width:760px){.rodape__grade{grid-template-columns:1fr;gap:2rem}}

/* ---------- marcador de conteúdo a confirmar ---------- */
.pend{
  background:linear-gradient(transparent 62%,rgba(178,87,56,.18) 0);
  border-bottom:1px dashed rgba(178,87,56,.55);
}

/* ---------- utilidades ---------- */
.só-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pula{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:.75rem 1.25rem;z-index:200;border-radius:0 0 8px 0}
.pula:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* revelação suave ao rolar */
.revela{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revela{opacity:1;transform:none}}

/* ---------- botão flutuante do WhatsApp ---------- */
.zap{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;
  height:3.5rem;padding:0 1.05rem;
  background:#25D366;color:#fff;text-decoration:none;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(20,90,50,.28);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  /* respeita a barra de gestos do iPhone */
  margin-bottom:env(safe-area-inset-bottom,0);
}
.zap:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,90,50,.34)}
.zap:active{transform:translateY(0)}
.zap svg{width:1.65rem;height:1.65rem;flex:none;fill:currentColor}
.zap__texto{
  font-family:var(--corpo);font-size:.92rem;font-weight:500;white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .3s ease,opacity .25s ease;
}
.zap:hover .zap__texto,.zap:focus-visible .zap__texto{max-width:11rem;opacity:1}
.zap:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

/* no celular o rótulo fica sempre escondido — só o círculo */
@media (max-width:640px){
  .zap{padding:0;width:3.35rem;height:3.35rem;justify-content:center;right:.95rem;bottom:.95rem}
  .zap__texto{display:none}
}
@media (prefers-reduced-motion:reduce){
  .zap,.zap__texto{transition:none}
}
@media print{.zap{display:none}}

/* variante NÃO flutuante — usada na tela de agendamento, para o botão
   não cobrir nenhuma célula do calendário no celular */
.zap--estatico{
  position:static;margin:0 auto;height:3.1rem;
  box-shadow:0 6px 18px rgba(20,90,50,.22);
}
.zap--estatico .zap__texto{max-width:none;opacity:1;display:inline}
@media (max-width:640px){
  .zap--estatico{width:auto;padding:0 1.25rem;justify-content:center}
  .zap--estatico .zap__texto{display:inline}
}

/* cabeçalho das páginas internas em telas estreitas */
.cabecalho__interno .menu--simples{white-space:nowrap}
@media (max-width:520px){
  .marca__nome{font-size:1rem}
  .marca__papel{font-size:.56rem;letter-spacing:.16em}
  .cabecalho__interno .menu--simples a{font-size:.84rem}
}