/* base.css — Centro Terapêutico Michelle Vieira · sistema do hero B (ver 02-conceito/sistema.md) */

:root {
  /* cores (tiradas da fachada, do logo e do retrato) */
  --branco: #FFFFFF;
  --gelo: #F7F4EE;
  --creme: #F3EADB;
  --marmore: #EEE8DE;
  --ouro: #C9A75A;
  --ouro-claro: #E3CC8F;
  --ouro-luz: #F1E3BC;
  --ouro-traco: #B48C3C;
  --latao: #8E6C2E;
  --latao-escuro: #6E531F;
  --cobre: #B07A4A;
  --pessego: #F1E2D3;
  --tinta: #1E1A16;
  --tinta-suave: #4D433A;

  /* marcador das legendas */
  --marcador: linear-gradient(in oklab 168deg, #EEDCA8 0%, #E3CC8F 38%, #C9A75A 100%);
  --grifo: linear-gradient(in oklab 172deg, #F2E3B9, #E6D29A);

  /* tipografia */
  --f-titulo: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Reddit Sans", "Segoe UI", system-ui, sans-serif;
  --f-marca: "Gelasio", Georgia, "Times New Roman", serif;
  --t-titulo: clamp(2.55rem, 5.6vw, 5.5rem);
  --t-apoio: clamp(1.0625rem, .55rem + .95vw, 1.25rem);
  --t-rotulo: .75rem;

  /* espaço */
  --marg: clamp(20px, 4.6vw, 76px);
  --topo-h: 88px;
  --alt: max(100svh, 680px);
  --fig-w: min(calc(var(--alt) * .64), 44vw);

  /* tempo */
  --ease: cubic-bezier(.3, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--gelo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* granulado único, fixo, por cima de tudo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .16  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 220px 220px;
}
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; border-radius: 6px; }


/* ---------- acréscimos do site (fora do hero) ---------- */
:root {
  --noite: #17130F;
  --noite-2: #221C16;
  --noite-3: #2E261E;
  --papel: #F5EEE2;
  --papel-suave: #CDBFAA;

  --t-h2: clamp(2.1rem, 1.2rem + 3.2vw, 4rem);
  --t-h3: clamp(1.35rem, 1rem + 1vw, 1.75rem);
  --t-corpo: 1.125rem;
  --t-mini: .875rem;

  --larg: 1320px;
  --secao: clamp(88px, 12vh + 4vw, 168px);
  --raio: 10px;
  --sombra: 0 18px 40px -22px rgba(110, 83, 31, .45), 0 0 0 1px rgba(201, 167, 90, .28);
}
html { scroll-padding-top: 24px; }
main { display: block; }

/* peças comuns às seções (prefixo s-) */
.s-secao { position: relative; padding: var(--secao) var(--marg); isolation: isolate; overflow: clip; }
.s-dentro { width: min(100%, var(--larg)); margin: 0 auto; }
.s-noite { background: var(--noite); color: var(--papel); }
.s-fala { /* a "fala-chamada" do hero: pontinho dourado + frase curta */
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--f-titulo); font-weight: 500; font-size: clamp(.95rem, .8rem + .3vw, 1.08rem);
  color: var(--latao-escuro); letter-spacing: .01em;
}
.s-fala::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ouro);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ouro) 22%, transparent); flex: none; }
.s-noite .s-fala { color: var(--ouro-claro); }
.s-h2 { margin: 0; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.s-h3 { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; }
.s-texto { font-size: var(--t-corpo); line-height: 1.62; color: var(--tinta-suave); max-width: 62ch; }
.s-noite .s-texto { color: var(--papel-suave); }
.s-marca { /* a caixa dourada da legenda, para uma palavra dentro de um título */
  position: relative; display: inline-block; padding: 0 .08em; border-radius: .11em;
  background: var(--marcador); color: var(--tinta);
  box-shadow: inset 0 -.035em 0 color-mix(in oklab, var(--latao) 35%, transparent);
}
.s-grifo { background: var(--grifo); color: inherit; padding: 0 .12em; border-radius: 3px; }
.s-rotulo { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-mini); letter-spacing: .1em; text-transform: uppercase; color: var(--latao-escuro); }
@media (min-width: 900px) { .s-rotulo { font-size: .75rem; } }
.s-noite .s-rotulo { color: var(--ouro-claro); }

/* botão do WhatsApp (mesmo do hero) para usar nas seções */
.s-botao {
  display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px;
  border-radius: 999px; text-decoration: none; font-family: var(--f-titulo); font-weight: 600; font-size: 1.02rem;
  color: var(--tinta); background: var(--marcador);
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--latao) 35%, transparent), 0 14px 30px -16px rgba(110, 83, 31, .65);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.s-botao svg { width: 22px; height: 22px; }
.s-botao:hover { transform: translateY(-2px); }

/* revelação de rolagem: só com JS; uma vez só */
.js [data-rev] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform 1s var(--ease); transition-delay: var(--rev-d, 0s); }
.js [data-rev].rev-in { opacity: 1; transform: none; }

/* botão fixo de WhatsApp no celular (aparece depois do hero) */
.s-fixo {
  position: fixed; z-index: 40; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--tinta); color: var(--branco); text-decoration: none;
  font-family: var(--f-titulo); font-weight: 600; font-size: .98rem;
  box-shadow: 0 16px 34px -14px rgba(30, 26, 22, .6);
  transform: translateY(140%); transition: transform .45s var(--ease);
}
.s-fixo svg { width: 22px; height: 22px; color: var(--ouro-claro); }
.s-fixo.s-mostra { transform: none; }
@media (max-width: 899px) { .s-fixo { display: inline-flex; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }