/* =========================================================================
   PW Psicologia · site institucional
   Paleta e fontes do app Espaço PW (ver .claude/agents/ui-ux.md, "Sistema visual").
   Celular primeiro; o computador é adaptação. Movimento só em
   prefers-reduced-motion: no-preference. Cor só por token.
   ========================================================================= */

/* ---------- Fontes ---------- */
@font-face { font-family: "EB Garamond"; src: url("../fontes/EBGaramond-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fontes/EBGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fontes/EBGaramond-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fontes/EBGaramond-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Cores do app */
  --bg: #E5ECEB;
  --panel: #FFFFFF;
  --field: #F5F8F8;
  --ink: #1C2729;
  --muted: #586A6C;
  --line: #CAD7D5;
  --accent: #2E5A5C;
  --accent-soft: #DCE9E7;
  --on-accent: #FFFFFF;
  --ok: #2B6A4C;
  --warn: #A23A2C;
  /* Acréscimos do site */
  --paper: #F8FAF9;          /* fundo principal, um pouco mais claro que --bg */
  --sage: #A9C2BC;           /* linhas decorativas finas ao redor das fotos */
  --borda-campo: #788B8C;    /* borda de campos e pílulas: 3:1 sobre --field e --panel */
  --moldura: #1C2729;        /* moldura do celular */
  --rascunho-fundo: #F6E7C8; /* marcas do modo rascunho */
  --rascunho-tinta: #6B4A00;
  --foto-filtro: none;

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cab-h: 68px;             /* altura do cabeçalho; o JS mede e atualiza */
  --gutter: clamp(18px, 5vw, 48px);
  --largura: 1160px;
  --raio: 14px;
  --raio-medio: 22px;
  --raio-grande: 30px;
  --raio-controle: 12px;
  --secao-y: clamp(72px, 12vh, 140px);
  --curva: cubic-bezier(.2, .7, .2, 1); /* curva padrão do movimento (docs/MOVIMENTO.md) */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101718; --panel: #182224; --field: #121B1C; --ink: #E1E9E8; --muted: #9AADAE;
    --line: #2C3B3D; --accent: #8DC3BF; --accent-soft: #1F3133; --on-accent: #0C1415;
    --ok: #86C9A5; --warn: #EE9C8D;
    --paper: #162022; --sage: #3F5A56; --borda-campo: #5F7476; --moldura: #2C3B3D;
    --rascunho-fundo: #3A2F1A; --rascunho-tinta: #F0D49A;
    --foto-filtro: brightness(.9) saturate(.95);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101718; --panel: #182224; --field: #121B1C; --ink: #E1E9E8; --muted: #9AADAE;
  --line: #2C3B3D; --accent: #8DC3BF; --accent-soft: #1F3133; --on-accent: #0C1415;
  --ok: #86C9A5; --warn: #EE9C8D;
  --paper: #162022; --sage: #3F5A56; --borda-campo: #5F7476; --moldura: #2C3B3D;
  --rascunho-fundo: #3A2F1A; --rascunho-tinta: #F0D49A;
  --foto-filtro: brightness(.9) saturate(.95);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--cab-h) + 20px); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular {
  position: absolute; left: 12px; top: -200px; z-index: 50;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.envoltorio { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-grande { width: 30px; height: 30px; color: var(--accent); }

/* ---------- Tipografia ---------- */
.sobretitulo {
  font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.titulo-grande { font: 500 clamp(3.1rem, 6.4vw + 1.2rem, 6.6rem)/1.02 var(--serif); letter-spacing: -.015em; }
.titulo { font: 500 clamp(2.2rem, 3.6vw + 1rem, 3.6rem)/1.08 var(--serif); letter-spacing: -.01em; margin-bottom: 22px; }
.lide { font-size: clamp(1.15rem, .9vw + .95rem, 1.45rem); line-height: 1.55; color: var(--muted); max-width: 32ch; margin: 26px 0 0; }
.texto-grande { font-size: clamp(1.08rem, .5vw + 1rem, 1.28rem); line-height: 1.65; max-width: 36rem; }

/* ---------- Botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
}
.btn:hover { background: color-mix(in oklab, var(--accent) 86%, var(--ink)); }
.btn-contorno { background: transparent; color: var(--accent); }
.btn-contorno:hover { background: var(--accent-soft); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn-largo { width: 100%; }
@media (min-width: 600px) { .btn-largo { width: auto; } }

/* Botão inativo de verdade: não é link, não reage, não tem cursor de clique. */
.btn-inativo {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: transparent; color: var(--muted); border: 1px dashed var(--borda-campo);
  font: 500 .95rem/1.2 var(--sans); cursor: default;
}
.btn-inativo-grande { min-height: 52px; padding: 0 22px; font-size: 1rem; }
.selo {
  font: 600 .66rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent);
}

.link-seta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; text-decoration: underline;
}
.link-seta .ico { width: 18px; height: 18px; }

/* ---------- Cabeçalho ---------- */
.cab {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.cab-progresso { display: none; }
/* Com JavaScript, a linha divisória só aparece depois que a página rola. */
.cab.no-alto { border-bottom-color: transparent; }
.cab-in {
  max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto;
  padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) 10px max(var(--gutter), env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 8px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; margin-right: auto; }
.marca-mono { width: 38px; height: 38px; color: var(--accent); flex: none; }
.marca-mono circle { fill: none; stroke: currentColor; stroke-width: 1.1; }
.marca-mono text { fill: currentColor; font: italic 400 15.5px var(--serif); text-anchor: middle; letter-spacing: -.02em; }
.marca-nome { font: 500 1.22rem/1 var(--serif); white-space: nowrap; }
@media (max-width: 389px) { .marca-nome { font-size: 1.08rem; } .marca { gap: 8px; } .marca-mono { width: 34px; height: 34px; } }

.cab-nav ul { display: flex; gap: 4px; }
.cab-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; border-radius: 999px;
}
.cab-nav a:hover { color: var(--accent); background: var(--accent-soft); }
.cab-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Menu recolhido (celular e tablet). <details> funciona sem JavaScript. */
.menu summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--borda-campo); color: var(--ink); font-weight: 500; font-size: .95rem;
  cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.menu-painel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px));
  max-height: calc(100dvh - var(--cab-h)); overflow-y: auto;
}
.menu-painel ul { display: grid; margin-bottom: 18px; }
.menu-painel a {
  display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line);
  font: 500 1.5rem/1.2 var(--serif); color: var(--ink); text-decoration: none;
}
@media (max-width: 419px) { .menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .menu summary { padding: 0; } }

.cab-nav, .cab-paciente { display: none; }
@media (min-width: 1040px) {
  .cab-nav, .cab-paciente { display: flex; }
  .cab-nav { margin-right: auto; }
  .marca { margin-right: 18px; }
  .menu { display: none; }
}

/* ---------- Faixa do rascunho ---------- */
.faixa-rascunho {
  margin: 0; padding: 10px var(--gutter); text-align: center;
  background: var(--rascunho-fundo); color: var(--rascunho-tinta); font-size: .9rem; line-height: 1.45;
}

.faixa-rascunho-caixa { border-radius: var(--raio); margin-bottom: 28px; }

/* ---------- Topo ---------- */
.topo { padding-block: clamp(36px, 7vh, 72px) clamp(56px, 9vh, 104px); }
.topo-in { display: grid; gap: 48px; }
/* Cada linha do título é um bloco: a quebra fica fixa e cada linha pode subir de trás da sua máscara. */
.titulo-grande .linha, .titulo-grande .linha > span { display: block; }
.crp { margin: 26px 0 0; font-size: .9rem; letter-spacing: .06em; color: var(--muted); }

.arco { border-radius: 999px 999px var(--raio-grande) var(--raio-grande); }
.topo-foto {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--accent-soft);
  outline: 1px solid var(--sage); outline-offset: 12px;
  margin: 12px 0 0;
}
/* Respiração: círculo cheio atrás do arco, como um halo em volta da cabeça da moldura.
   Ocupa a mesma célula da grade que a foto; a margem negativa o faz aparecer acima do arco. */
.respiro {
  grid-row: 2; grid-column: 1; justify-self: center; align-self: start;
  width: 108%; aspect-ratio: 1; margin-top: calc(12px - 9%);
  border-radius: 50%; background: var(--accent-soft); pointer-events: none;
}
.topo-foto { grid-row: 2; grid-column: 1; z-index: 1; }
.topo-foto img, .sobre-foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro); }
.topo-foto img { object-position: 50% 24%; }

@media (min-width: 900px) {
  .topo { padding-block: clamp(32px, 5vh, 64px); }
  .topo-in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center; gap: clamp(40px, 6vw, 96px);
    min-height: calc(100svh - var(--cab-h) - 2 * clamp(32px, 5vh, 64px));
  }
  /* Halo 15% mais largo que a foto, com o topo uns 13% da largura acima do arco. */
  .respiro {
    --w: min(100%, 34rem);
    grid-row: 1; grid-column: 2; justify-self: end; align-self: center;
    width: calc(var(--w) * 1.15);
    margin: calc(var(--w) * .89 - min(80svh, 48rem)) calc(16px - var(--w) * .075) 0 0;
  }
  .topo-foto {
    grid-row: 1; grid-column: 2;
    justify-self: end; margin: 16px 16px 16px 0;
    width: min(100%, 34rem); height: min(80svh, 48rem); aspect-ratio: auto;
    outline-offset: 16px;
  }
  .topo-foto img { object-position: 50% 30%; }
}

/* ---------- Cena das frases ---------- */
/* Base (sem JS ou com movimento reduzido): uma seção comum, texto inteiro e parado. */
.cena { position: relative; padding-block: var(--secao-y) 0; }
.cena-texto { text-align: center; }
.cena-frase {
  font: 400 clamp(2rem, 2.7vw + 1.15rem, 4.1rem)/1.16 var(--serif); letter-spacing: -.01em;
  max-width: 16em; margin: 0 auto .6em; text-wrap: balance;
}
.cena-frase:last-child { margin-bottom: 0; }
.cena em { font-style: italic; color: var(--accent); }

/* ---------- Trilha "Como funciona" ---------- */
.trilha-secao { padding-block: var(--secao-y) clamp(40px, 8vh, 96px); }
.trilha-abertura { text-align: center; max-width: 40rem; margin-inline: auto; }
.trilha-abertura .sobretitulo { margin-bottom: 20px; }
.frase { font: 400 clamp(1.9rem, 2.6vw + 1.1rem, 3.1rem)/1.15 var(--serif); text-wrap: balance; margin: 0; }

.trilha { --linha-x: 22px; position: relative; margin-top: clamp(40px, 8vh, 88px); }
/* Linha reta de reserva: aparece sem JavaScript; some quando a curva em SVG é desenhada. */
.trilha::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--linha-x);
  width: 2px; transform: translateX(-50%); background: var(--accent); opacity: .55; border-radius: 2px;
}
.trilha.viva::before { display: none; }
.trilha-linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trilha-base { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; }
.trilha-tinta { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }

.estacao {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px; padding-block: 36px;
}
.ponto {
  grid-column: 1; grid-row: 1; justify-self: center; align-self: start; margin-top: 2px;
  width: 22px; height: 22px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--accent); border: 3px solid var(--accent);
  box-shadow: 0 0 0 7px var(--accent-soft);
}
.trilha.viva .ponto:not(.aceso) { background: var(--paper); box-shadow: 0 0 0 7px transparent; }
.estacao-texto { grid-column: 2; grid-row: 1; max-width: 31rem; }
.estacao-nome {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
  font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.estacao-num { font: italic 400 1.15rem/1 var(--serif); letter-spacing: 0; text-transform: none; }
.estacao h3 .sobe { display: block; }
.estacao h3 { font: 500 clamp(1.85rem, 2.4vw + 1.1rem, 2.9rem)/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 16px; }
.estacao-texto p { color: var(--muted); }
.estacao-texto .estacao-nome { color: var(--accent); }
.estacao-texto .botoes { margin-top: 22px; }

.estacao-arte { display: none; }
.arte-circulo {
  width: clamp(132px, 14vw, 188px); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent-soft); display: grid; place-items: center; overflow: hidden;
}
.arte-circulo svg { width: 44%; height: 44%; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arte-foto picture, .arte-foto img { width: 100%; height: 100%; }
.arte-foto img { object-fit: cover; object-position: 50% 24%; transform: scale(1.5); transform-origin: 50% 26%; filter: var(--foto-filtro); }

/* No celular, só a arte do app aparece, abaixo do texto. */
.estacao-arte-celular { display: block; grid-column: 2; grid-row: 2; margin-top: 30px; }

.celular {
  position: relative; width: min(240px, 72vw);
  padding: 24px 0 10px; border-radius: 40px; overflow: hidden;
  background: var(--bg); border: 9px solid var(--moldura);
}
.celular::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 13px; border-radius: 999px; background: var(--moldura);
}
.celular img { width: 100%; }

@media (min-width: 820px) {
  .trilha { --linha-x: 50%; }
  .estacao {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    column-gap: 0; align-items: center; min-height: 64vh; padding-block: 40px;
  }
  .ponto { grid-column: 2; align-self: center; margin-top: 0; }
  .estacao-texto { grid-column: 1; justify-self: end; text-align: right; }
  .estacao-texto p:not(.estacao-nome) { margin-left: auto; }
  .estacao-nome { justify-content: flex-end; }
  .estacao-texto .botoes { justify-content: flex-end; }
  .estacao-arte, .estacao-arte-celular { display: block; grid-column: 3; grid-row: 1; justify-self: start; margin-top: 0; }

  .estacao:nth-child(even) .estacao-texto { grid-column: 3; justify-self: start; text-align: left; }
  .estacao:nth-child(even) .estacao-texto p:not(.estacao-nome) { margin-left: 0; }
  .estacao:nth-child(even) .estacao-nome { justify-content: flex-start; }
  .estacao:nth-child(even) .estacao-texto .botoes { justify-content: flex-start; }
  .estacao:nth-child(even) .estacao-arte { grid-column: 1; justify-self: end; }
  .celular { width: 250px; }
}

/* ---------- Seções ---------- */
.secao { padding-block: var(--secao-y); }
.secao-bruma { background: var(--bg); }
.cabeca-secao { max-width: 40rem; margin-bottom: clamp(32px, 5vh, 56px); }
.cabeca-secao .titulo:last-child { margin-bottom: 0; }

/* ---------- Sobre ---------- */
.sobre-in { display: grid; gap: 52px; align-items: center; }
.sobre-foto {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--raio-grande); background: var(--accent-soft);
  outline: 1px solid var(--sage); outline-offset: 12px; margin: 12px;
}
.sobre-foto picture { display: block; width: 100%; height: 100%; }
.sobre-foto img { object-position: 50% 30%; transform: scale(1.22); transform-origin: 48% 30%; }
.sobre-texto .titulo { margin-bottom: 26px; }
.assinatura {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .95rem;
}
.assinatura-nome { display: block; font: italic 400 1.75rem/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }
.pendencia { margin-top: 20px; padding: 12px 16px; border: 1px dashed var(--rascunho-tinta); border-radius: var(--raio); color: var(--rascunho-tinta); font-size: .95rem; }

@media (min-width: 900px) {
  .sobre-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); }
  .sobre-foto { max-height: 82svh; margin: 16px; }
}

/* ---------- Atendimento ---------- */
.publicos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cartao {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-medio);
  padding: clamp(22px, 3vw, 34px);
}
.cartao h3 { font: 500 1.75rem/1.15 var(--serif); margin: 18px 0 10px; }
.cartao p { color: var(--muted); }

.atend-rodape { display: grid; gap: 36px; margin-top: clamp(40px, 6vh, 64px); }
.modalidades { display: grid; gap: 14px; align-content: start; }
.modalidades li { display: flex; gap: 14px; align-items: center; font-size: 1.1rem; }
.modalidades .ico { width: 26px; height: 26px; color: var(--accent); }
.modalidades strong { font-weight: 600; }
.pilulas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pilulas li {
  padding: 10px 20px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  font-weight: 500;
}
.temas p { color: var(--muted); max-width: 34rem; }
@media (min-width: 900px) { .atend-rodape { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }

/* ---------- Formulário do melhor horário ---------- */
.agendar-in { display: grid; gap: 8px; }
.agendar-folha {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-grande);
  padding: clamp(22px, 4vw, 48px);
}
@media (max-width: 419px) { .agendar-folha { padding: 22px 18px; } }
@media (min-width: 960px) {
  .agendar-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .agendar-in .cabeca-secao { position: sticky; top: calc(var(--cab-h) + 48px); }
}

.campo { margin-bottom: 30px; }
.campo label, .grupo legend { display: block; font-weight: 600; font-size: 1.02rem; margin-bottom: 10px; padding: 0; }
.legenda-apoio { font-weight: 400; color: var(--muted); font-size: .92rem; margin-left: 4px; }
.campo input, .campo textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px;
  font: 400 1.0625rem/1.5 var(--sans); color: var(--ink);
  background: var(--field); border: 1px solid var(--borda-campo); border-radius: var(--raio-controle);
}
.campo textarea { min-height: 112px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--raio-controle); border-color: var(--accent); }
.campo input[aria-invalid="true"] { border: 2px solid var(--warn); }
.campo-erro { margin: 10px 0 0; color: var(--warn); font-weight: 600; font-size: .95rem; }
.campo-ajuda { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }

.grupo { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.pilulas-escolha { display: flex; flex-wrap: wrap; gap: 10px; }
/* Rádio e caixa de seleção de verdade, por cima da pílula, invisíveis mas focáveis. */
.escolha { position: relative; display: inline-flex; }
.escolha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.escolha span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--borda-campo); background: var(--field);
  font-weight: 500; color: var(--ink); pointer-events: none;
}
.escolha input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Marca de seleção desenhada: o estado não depende só da cor. */
.escolha input:checked + span::before {
  content: ""; width: 11px; height: 6px; margin-top: -3px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.escolha input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .escolha:hover input:not(:checked) + span { border-color: var(--accent); background: var(--accent-soft); } }

.agendar-enviar { margin-top: 8px; }
.agendar-estado:empty { display: none; }
.agendar-estado { margin: 16px 0 0; color: var(--ink); }
.nota-privacidade {
  display: flex; gap: 12px; align-items: flex-start; margin: 28px 0 0; padding-top: 22px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem;
}
.nota-privacidade .ico { color: var(--accent); margin-top: 2px; }
.agendar-oi { margin: 10px 0 0; }
.agendar-oi a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.agendar-semjs .btn { margin-top: 18px; }

/* ---------- Perguntas frequentes ---------- */
.perguntas-in { display: grid; }
@media (min-width: 900px) { .perguntas-in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.perguntas { border-top: 1px solid var(--line); }
.perguntas details { border-bottom: 1px solid var(--line); }
.perguntas summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 22px 48px 22px 0; min-height: 44px;
  font: 500 clamp(1.3rem, .6vw + 1.15rem, 1.55rem)/1.25 var(--serif);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
}
.perguntas details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.perguntas summary:hover { color: var(--accent); }
.perguntas details p { padding: 0 0 24px; color: var(--muted); max-width: 40rem; }

/* ---------- Faixa de foto do consultório ---------- */
.faixa-foto { position: relative; }
.faixa-foto img, .faixa-reservada { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.faixa-reservada {
  display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--accent-soft); color: var(--muted);
  border-block: 1px dashed var(--borda-campo); font-weight: 500;
}
@media (min-width: 700px) { .faixa-foto img, .faixa-reservada { aspect-ratio: 21 / 8; } }

/* ---------- Contato e mapa ---------- */
.contato-in { display: grid; gap: 44px; }
.contato-dados dl { margin: 0; display: grid; gap: 22px; }
.contato-dados dt { font: 600 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contato-dados dd { margin: 6px 0 0; font-size: 1.12rem; }
.contato-dados dd a { display: inline-flex; align-items: center; min-height: 44px; }
.mapa {
  position: relative; aspect-ratio: 4 / 3.4; overflow: hidden;
  border-radius: var(--raio-grande); border: 1px solid var(--line); background: var(--bg);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  .contato-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); align-items: start; }
  .mapa { aspect-ratio: 16 / 11; }
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--bg); border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem;
  padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px));
}
.rodape-in { display: grid; gap: 18px; }
.rodape-quem { margin: 0; }
.rodape-quem strong { color: var(--ink); font-weight: 600; }
.aviso-crise {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  padding: 16px 18px; border-radius: var(--raio); background: var(--panel); border: 1px solid var(--line); color: var(--ink);
}
.aviso-crise .ico { color: var(--accent); margin-top: 2px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape-copia { margin: 0; font-size: .88rem; }

/* ---------- Páginas pequenas (privacidade, 404) ---------- */
.pagina { padding-block: clamp(48px, 10vh, 112px) var(--secao-y); }
.pagina .titulo { font-size: clamp(2.2rem, 3vw + 1.2rem, 3.4rem); }
.pagina h2 { font: 500 1.6rem/1.2 var(--serif); margin: 40px 0 12px; }
.pagina .texto { max-width: 40rem; }
.pagina ul.lista { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.pagina ul.lista li { margin-bottom: .4em; }

/* ---------- Modo rascunho ---------- */
html:not(.rascunho) .so-rascunho { display: none !important; }
.rascunho [data-pendente]::after {
  content: "a confirmar"; display: inline-block; margin-left: .5em; vertical-align: .18em;
  padding: 4px 7px; border-radius: 6px; white-space: nowrap;
  font: 600 .62rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  background: var(--rascunho-fundo); color: var(--rascunho-tinta);
}
.rascunho figure[data-pendente]::after { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; z-index: 1; }
.rascunho .faixa-foto[data-pendente]::after { content: none; } /* o próprio espaço reservado já diz "a enviar" */

/* ---------- Movimento (só para quem não pediu movimento reduzido) ----------
   Roteiro em docs/MOVIMENTO.md. Só transform, translate, scale, opacity e clip-path:
   nada aqui muda o layout. O estado de repouso é sempre o visível; o que nasce
   escondido depende de uma classe que o JS põe (.espera, .aguarda) e só abaixo da dobra. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .btn-contorno, .cab-nav a, .escolha span, .menu summary, .perguntas summary { transition: background-color .15s, border-color .15s, color .15s; }
  .ponto { transition: background-color .4s ease, box-shadow .5s ease; }
  /* O JS só põe .espera em blocos ainda abaixo da dobra; sem JS nada fica escondido. */
  .reveal { transition: opacity .9s var(--curva), transform .9s var(--curva); }
  .reveal.espera { opacity: 0; transform: translateY(28px); }

  /* ----- Cabeçalho: linha de progresso e divisória que aparece ao rolar ----- */
  .cab { transition: border-color .5s ease; }
  .js .cab-progresso {
    display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  }

  /* ----- Momento 1: abertura do topo (CSS puro; "backwards" deixa o repouso visível) ----- */
  .topo-foto { animation: foto-abre 1.6s var(--curva) .1s backwards; }
  .topo-foto img { animation: foto-assenta 2s var(--curva) .1s backwards; }
  /* A máscara sobe de baixo para cima; as margens negativas incluem o contorno fino da moldura. */
  @keyframes foto-abre { from { clip-path: inset(calc(100% + 24px) -24px -24px -24px); } to { clip-path: inset(-24px); } }
  @keyframes foto-assenta { from { transform: scale(1.08); } }

  /* Linhas do título: cada uma sobe de trás da sua máscara. O padding com margem
     negativa abre espaço para ascendentes e descendentes sem mudar o layout. */
  .titulo-grande .linha { overflow: clip; padding-block: .1em .16em; margin-block: -.1em -.16em; }
  .titulo-grande .linha > span { animation: linha-sobe 1.1s var(--curva) .25s backwards; }
  .titulo-grande .linha + .linha > span { animation-delay: .37s; }
  @keyframes linha-sobe { from { transform: translateY(110%); } }

  .topo-texto .sobretitulo, .topo-texto .lide, .topo-texto .botoes, .topo-texto .crp { animation: sobe-leve .9s var(--curva) backwards; }
  .topo-texto .sobretitulo { animation-delay: .62s; }
  .topo-texto .lide { animation-delay: .74s; }
  .topo-texto .botoes { animation-delay: .86s; }
  .topo-texto .crp { animation-delay: .98s; }
  @keyframes sobe-leve { from { opacity: 0; transform: translateY(16px); } }

  /* Respiração: 1 → 1,05 num ciclo de 9 s (inspira 4,5 s, solta 4,5 s). Pausa fora da tela (.fora, pelo JS). */
  .respiro { animation: respiro-entra 1.8s var(--curva) .3s backwards, respirar 9s cubic-bezier(.37, 0, .63, 1) 2.1s infinite; }
  .topo.fora .respiro { animation-play-state: paused; }
  @keyframes respiro-entra { from { opacity: 0; scale: .94; } }
  @keyframes respirar { 50% { scale: 1.05; } }

  /* ----- Momento 2: cena das frases (só com JS: a classe "js" vem de um script curto no <head>) ----- */
  .js .cena { height: 200svh; padding: 0; } /* celular */
  @media (min-width: 820px) { .js .cena { height: 240svh; } }
  .js .cena-palco {
    position: sticky; top: var(--cab-h); height: calc(100svh - var(--cab-h));
    display: grid; place-items: center; isolation: isolate;
  }
  .cena-fundo { position: absolute; inset: 0; z-index: -1; background: var(--accent-soft); opacity: 0; pointer-events: none; }

  /* ----- Momento 3: a trilha viva ----- */
  .trilha-caminhante { fill: var(--accent); stroke: var(--paper); stroke-width: 3; opacity: 0; transition: opacity .4s ease; }

  /* Anel que o ponto solta ao ser alcançado pela linha (uma vez só). */
  .ponto::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--accent); opacity: 0; pointer-events: none;
  }
  .estacao.chegou .ponto::after { animation: anel 1.4s var(--curva) both; }
  @keyframes anel { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.7); } }

  /* Título da estação: sobe de trás da máscara (mesmo truque do topo). */
  .estacao h3 { overflow: clip; padding-block: .06em .14em; margin-block: -.06em calc(16px - .14em); }

  .estacao-nome { transition: opacity .8s var(--curva) .05s, transform .8s var(--curva) .05s; }
  .estacao h3 .sobe { transition: transform 1s var(--curva) .15s; }
  .estacao-texto > :not(.estacao-nome):not(h3) { transition: opacity .9s var(--curva) .32s, transform .9s var(--curva) .32s; }
  .arte-circulo { transition: opacity .9s var(--curva) .1s, transform 1.1s var(--curva) .1s; }
  .arte-circulo svg > * { stroke-dasharray: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.45, .05, .35, 1) .4s; }

  /* Estado de espera: só em estações abaixo da dobra na carga (o JS põe .aguarda). */
  .estacao.aguarda .estacao-nome { opacity: 0; transform: translateY(12px); }
  .estacao.aguarda h3 .sobe { transform: translateY(105%); }
  .estacao.aguarda .estacao-texto > :not(.estacao-nome):not(h3) { opacity: 0; transform: translateX(24px); }
  .estacao.aguarda .arte-circulo { opacity: 0; transform: scale(.85); }
  .estacao.aguarda .arte-circulo svg > * { stroke-dashoffset: 1; }
  /* No computador, o texto das estações ímpares fica à esquerda da linha: vem da esquerda. */
  @media (min-width: 820px) {
    .estacao.aguarda:nth-child(odd) .estacao-texto > :not(.estacao-nome):not(h3) { transform: translateX(-24px); }
  }

  /* ----- Momento 4: Sobre ----- */
  /* A foto se revela por uma máscara que se abre; a imagem assenta de 1,08 para 1.
     O repouso inclui o contorno fino (12–16 px para fora), por isso o recorte vai a -24 px. */
  .sobre-foto.reveal { transition: clip-path 1.5s var(--curva); clip-path: inset(-24px round var(--raio-grande)); }
  .sobre-foto.reveal.espera { opacity: 1; transform: none; clip-path: inset(14% 16% round var(--raio-grande)); }
  .sobre-foto picture { transition: scale 1.8s var(--curva); }
  .sobre-foto.espera picture { scale: 1.08; }

  /* Assinatura escrita da esquerda para a direita. As margens negativas não cortam o itálico. */
  .assinatura.reveal.espera { opacity: 1; transform: none; }
  .assinatura-nome { clip-path: inset(-.3em -.5em -.4em -.2em); transition: clip-path 1.2s cubic-bezier(.45, .05, .35, 1) .2s; }
  .assinatura.espera .assinatura-nome { clip-path: inset(-.3em 100% -.4em -.2em); }

  /* ----- Detalhes ----- */
  /* Cartões de Atendimento: um depois do outro. A elevação do mouse usa "translate", à parte. */
  .publicos .cartao:nth-child(2) { --atraso: .08s; }
  .publicos .cartao:nth-child(3) { --atraso: .16s; }
  .cartao.reveal { transition: opacity .9s var(--curva) var(--atraso, 0s), transform .9s var(--curva) var(--atraso, 0s), translate .45s var(--curva); }
  .cartao .ico-grande { transition: translate .45s var(--curva), scale .45s var(--curva); }

  /* Pílulas de temas: entram em sequência, de 0,9 para 1. */
  .pilulas li { transition: opacity .6s var(--curva), scale .7s var(--curva); }
  .pilulas li:nth-child(1) { transition-delay: .3s; }
  .pilulas li:nth-child(2) { transition-delay: .38s; }
  .pilulas li:nth-child(3) { transition-delay: .46s; }
  .atend-rodape.espera .pilulas li { opacity: 0; scale: .9; }

  /* Contato: as linhas dos dados entram em sequência; o mapa se revela pela máscara. */
  .contato-dados dl > div { transition: opacity .8s var(--curva), translate .8s var(--curva); }
  .contato-dados dl > div:nth-child(2) { transition-delay: .08s; }
  .contato-dados dl > div:nth-child(3) { transition-delay: .16s; }
  .contato-dados dl > div:nth-child(4) { transition-delay: .24s; }
  .contato-dados dl > div:nth-child(5) { transition-delay: .32s; }
  .contato-dados.espera dl > div { opacity: 0; translate: 0 12px; }
  .mapa.reveal { transition: clip-path 1.4s var(--curva), opacity .8s ease; clip-path: inset(0 round var(--raio-grande)); }
  .mapa.reveal.espera { opacity: 0; transform: none; clip-path: inset(10% 8% round var(--raio-grande)); }

  /* Botões: ao pressionar, encolhem de leve. */
  .btn { transition: background-color .15s, border-color .15s, color .15s, transform .2s var(--curva); }
  .btn:active { transform: scale(.98); }

  /* Perguntas: a seta gira; a resposta abre com altura animada onde o navegador permitir. */
  .perguntas summary::after { transition: transform .45s var(--curva); }
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .perguntas { interpolate-size: allow-keywords; }
    .perguntas details::details-content {
      block-size: 0; overflow-y: clip;
      transition: block-size .5s var(--curva), content-visibility .5s allow-discrete;
    }
    .perguntas details[open]::details-content { block-size: auto; }
  }

  /* Só onde há mouse de verdade. */
  @media (hover: hover) {
    .cartao:hover { translate: 0 -4px; }
    .cartao:hover .ico-grande { translate: 0 -2px; scale: 1.06; }
    .btn .ico, .link-seta .ico { transition: translate .35s var(--curva); }
    .btn:hover .ico, .link-seta:hover .ico { translate: 3px 0; }
  }
}