/* ═══════════════════════════════════════════════════════════════════════════
   Instituto Honorato de Saúde Integrativa — css/site.css
   Ordem: fontes → tokens → base → cabeçalho e menu → hero (o díptico) →
   seções → o instituto → áreas de atendimento → diferenciais → equipe →
   depoimentos → perguntas → contato e formulário → rodapé → responsivo →
   movimento reduzido.

   Princípio: uma sala à meia-luz, e duas pessoas nela.
   As únicas luzes da página são as duas pessoas e um abajur.
   Cores do cliente: azul petróleo (a sala), dourado suave (o abajur), off white (o texto).
   Redondo = o individual, o que é dito. Itálico = a dois, o que acontece entre.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-500i.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ── tokens ───────────────────────────────────────────────────────────────── */
:root {
  --sala: #0F2E37;                      /* fundo: azul petróleo à noite, a sala à meia-luz */
  --veludo: #153B46;                    /* superfície elevada: menu, moldura, FAQ aberto, campos */
  --fio: rgba(245, 241, 234, .13);      /* hairlines */
  --marfim: #F5F1EA;                    /* texto principal, off white — ≈12,6:1 sobre a sala */
  --po: #A7B9BE;                        /* texto secundário — ≈7:1 */
  --abajur: #E8C27C;                    /* a luz, dourado suave: costura, botão, link, foco — ≈8,5:1 */
  --abajur-rgb: 232, 194, 124;
  --abajur-quente: #DEB262;             /* hover do botão */

  --margem: clamp(20px, 5vw, 72px);
  --largura: 1200px;
  --altura-topo: 72px;
  --faq-folga: clamp(12px, 1.6vw, 20px);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --serifa: "Spectral", Georgia, "Times New Roman", serif;

  interpolate-size: allow-keywords;     /* deixa o <details> animar até height:auto */
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--sala);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sala);
  color: var(--marfim);
  font: 400 1.0625rem/1.65 var(--serifa);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* grão: tira o ar chapado do petróleo. Custa zero requisição. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

h1, h2, h3, p, figure, blockquote, figcaption { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }          /* o único !important do arquivo */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--abajur); color: var(--sala); }
:focus-visible { outline: 2px solid var(--abajur); outline-offset: 3px; }
section[id] { scroll-margin-top: calc(var(--altura-topo) + 8px); }

.pular {
  position: absolute;
  left: var(--margem);
  top: -100px;
  z-index: 70;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--abajur);
  color: var(--sala);
  font-weight: 500;
}
.pular:focus { top: 12px; }

.envelope {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao { padding-block: clamp(72px, 9.5vw, 130px); }

.grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lead {
  margin-top: 1.1rem;
  max-width: 34ch;
  color: var(--po);
  font-size: 1.2rem;
  line-height: 1.55;
}

.link {
  color: var(--abajur);
  border-bottom: 1px solid rgba(var(--abajur-rgb), .35);
  transition: border-color .2s ease;
}
.link:hover { border-bottom-color: var(--abajur); }

/* a dois: tudo o que acontece entre duas pessoas é itálico */
.dupla { font-style: italic; }

.ponto {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--abajur);
  vertical-align: .09em;
}

/* ── botões ───────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.botao-primario { background: var(--abajur); color: var(--sala); }
.botao-primario:hover { background: var(--abajur-quente); }
.botao-secundario { border-color: var(--fio); color: var(--marfim); }
.botao-secundario:hover { border-color: var(--abajur); }

/* ── cabeçalho ────────────────────────────────────────────────────────────── */
/* o cabeçalho fica ACIMA da folha do menu: é o mesmo botão que abre e fecha */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.rolou {
  background: rgba(15, 46, 55, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--fio);
}
.topo-envelope {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 34px);
  min-height: var(--altura-topo);
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.marca {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
/* o monograma da logo (as duas pessoas que formam o H), na cor do abajur:
   a silhueta exata da arte do cliente, como máscara, para viver em fundo escuro */
.marca-simbolo,
.rodape-simbolo {
  display: inline-block;
  flex: 0 0 auto;
  background: var(--abajur);
  -webkit-mask: url("../fotos/logo-h.png") center / contain no-repeat;
  mask: url("../fotos/logo-h.png") center / contain no-repeat;
}
.marca-simbolo { width: 26px; height: 31px; }
.rodape-simbolo { width: 40px; height: 48px; margin-bottom: .5rem; }
.marca-sub {
  flex: 0 0 auto;
  margin-left: -.55rem;
  color: var(--po);
  font-size: .9375rem;
}
.nav {
  margin-left: auto;
  display: flex;
  gap: clamp(12px, 1.8vw, 30px);
}
.nav-link {
  padding-block: 8px;
  border-bottom: 1px solid transparent;
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.nav-link:hover { color: var(--abajur); }
.nav-link[aria-current] { border-bottom-color: var(--abajur); }
.topo-cta { flex: 0 0 auto; padding: .6rem 1.15rem; }

.menu-botao {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.menu-traco {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--marfim);
  transition: transform .3s var(--suave);
}
.menu-botao[aria-expanded="true"] .menu-traco-a { transform: translateY(4px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-traco-b { transform: translateY(-4px) rotate(-45deg); }

/* ── menu do celular: folha inteira ───────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3.4vw, 28px);
  padding: calc(var(--altura-topo) + 28px) var(--margem) 44px;
  background: var(--veludo);
  overflow-y: auto;
}
.menu-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 16px);
}
.menu-link {
  font-weight: 500;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .55s var(--suave);
  transition-delay: calc(var(--i) * 60ms);
}
.menu-cta {
  align-self: flex-start;
  margin-top: .6rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .55s var(--suave), background-color .25s ease;
  transition-delay: calc(var(--i) * 60ms);
}
.menu-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  color: var(--abajur);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .55s var(--suave);
  transition-delay: calc(var(--i) * 60ms);
}
.aberto .menu-link { opacity: 1; transform: none; }
.aberto .menu-cta { opacity: 1; transform: none; }
.aberto .menu-atalhos { opacity: 1; transform: none; }

/* ── hero: o díptico ──────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.diptico {
  position: relative;
  flex: 0 0 auto;
  height: clamp(320px, 60svh, 640px);
  overflow: hidden;
}
.hero-titulo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  font-size: clamp(2.1rem, 4.7vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.metade {
  position: relative;
  display: flex;
  align-items: center;
  padding-block-start: var(--altura-topo);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.metade-esq {
  justify-content: flex-end;
  text-align: right;
  padding-inline: var(--margem) clamp(14px, 2.4vw, 40px);
}
.metade-dir {
  justify-content: flex-start;
  text-align: left;
  font-style: italic;
  padding-inline: clamp(14px, 2.4vw, 40px) var(--margem);
}
.metade-frase {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 17ch;      /* "e fortaleça seus / relacionamentos." em duas linhas */
}
/* com foto, a frase desce para a base da metade: os rostos ficam em cima, onde o
   véu é mais leve; o texto fica embaixo, onde o véu é quase a sala */
.com-foto .metade {
  align-items: flex-end;
  padding-block-end: clamp(28px, 4vw, 48px);
}
/* a foto do casal, partida ao meio: cada metade mostra o seu lado da mesma imagem.
   --foto-y sobe ou desce a faixa visível (0% = topo da foto). */
.diptico { --foto-y: 30%; }
.com-foto-casal .metade-esq {
  background-size: auto, 200% auto;
  background-position: 0 0, 0% var(--foto-y);
}
.com-foto-casal .metade-dir {
  background-size: auto, 200% auto;
  background-position: 0 0, 100% var(--foto-y);
}
/* o abajur nasce na costura, no alto */
.metade-esq::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(64% 78% at 100% 0%, rgba(var(--abajur-rgb), .14), transparent 70%);
}
.metade-dir::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(64% 78% at 0% 0%, rgba(var(--abajur-rgb), .14), transparent 70%);
}
.costura {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--abajur);
  box-shadow: 0 0 24px 2px rgba(var(--abajur-rgb), .35);
  transform: translateX(-50%);
  transform-origin: top;
}
.hero-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 2.4vw, 2rem);
  max-width: calc(44rem + 2 * var(--margem));
  margin-inline: auto;
  padding: clamp(24px, 3.2vw, 34px) var(--margem) clamp(36px, 4.4vw, 52px);
  text-align: center;
}
.hero-sub { max-width: 44rem; font-size: 1.2rem; line-height: 1.55; text-wrap: balance; }
.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}
.hero-nomes { text-wrap: balance; }
.hero-assinatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: var(--po);
  font-size: .9375rem;
}

/* coreografia de abertura: só existe com .anima (JS e sem movimento reduzido) */
.anima .metade-esq { opacity: 0; transform: translateX(-7%); }
.anima .metade-dir { opacity: 0; transform: translateX(7%); }
.anima .costura { transform: translateX(-50%) scaleY(0); }
.anima .sobe { opacity: 0; transform: translateY(16px); }

.pronto .metade-esq {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--suave) .15s, transform 1.1s var(--suave) .15s;
}
.pronto .metade-dir {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--suave) .15s, transform 1.1s var(--suave) .15s;
}
.pronto .costura {
  transform: translateX(-50%) scaleY(1);
  transition: transform .8s var(--suave) .55s;
  animation: respirar 9s ease-in-out 1.45s infinite;
}
.pronto .sobe {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease calc(.9s + var(--i) * .1s), transform .8s var(--suave) calc(.9s + var(--i) * .1s);
}

/* a costura respira. Paradas fora do compasso: pulso regular denuncia CSS. */
@keyframes respirar {
  0% { opacity: .75; }
  37% { opacity: 1; }
  61% { opacity: .8; }
  78% { opacity: 1; }
  100% { opacity: .75; }
}

/* ── o instituto ──────────────────────────────────────────────────────────── */
/* a logo do cliente é um quadro na parede: fundo creme da arte, moldura discreta, sombra de objeto */
.quadro {
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 440px;
  border-radius: 6px;
  overflow: hidden;
  background: #E8E1D9;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .6);
}
.quadro img { width: 100%; height: auto; }
.prosa { display: flex; flex-direction: column; gap: 1em; max-width: 62ch; }
.valores-titulo { margin-top: clamp(30px, 4vw, 44px); font-size: 1.25rem; font-weight: 500; }
.valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7em clamp(24px, 3vw, 40px);
  margin-top: 1rem;
  max-width: 62ch;
}
.valor { position: relative; padding-left: 1.1rem; }
/* o ponto do abajur marca cada valor — é lista, não sequência */
.valor::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--abajur);
}
.visao {
  margin-top: clamp(26px, 3.4vw, 38px);
  max-width: 62ch;
  color: var(--po);
}

/* ── áreas de atendimento: três públicos, três colunas ────────────────────── */
.areas-cabeca { max-width: 62ch; }
.lead-largo { max-width: 56ch; }
.areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--fio);
}
.area-titulo { font-size: 1.25rem; font-weight: 500; }
.area-rotulo { margin-top: .2rem; color: var(--po); font-size: .9375rem; }
.area-lista {
  display: flex;
  flex-direction: column;
  gap: .7em;
  margin-top: 1.4rem;
}
.area-item { max-width: 30ch; }
.areas-fecho {
  margin-top: clamp(30px, 4vw, 48px);
  max-width: 62ch;
  color: var(--po);
}

/* ── diferenciais ─────────────────────────────────────────────────────────── */
.difs { display: flex; flex-direction: column; }
.dif {
  padding-block: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--fio);
}
.dif-inicio { padding-block-start: 0; border-top-color: transparent; }
.dif-titulo { font-size: 1.25rem; font-weight: 500; }
.dif-texto { margin-top: .6rem; max-width: 62ch; }

/* ── a equipe ─────────────────────────────────────────────────────────────── */
.quem-titulo {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: clamp(38px, 5vw, 66px);
  text-align: center;
}
/* o par centrado sob o título: sem foto, moldura larga demais pesa a página */
.pessoas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 480px));
  justify-content: center;
  gap: clamp(36px, 5vw, 84px);
}
.moldura {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background: var(--veludo);
  overflow: hidden;
}
.moldura::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(64% 58% at 50% 0%, rgba(var(--abajur-rgb), .12), transparent 72%);
}
.moldura-nome {
  position: relative;
  padding: 1rem;
  color: var(--po);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  text-align: center;
}
.moldura-foto { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pessoa-nome { margin-top: 1.5rem; font-size: 1.75rem; font-weight: 500; line-height: 1.15; }
.pessoa-papel { margin-top: .25rem; color: var(--po); }
.pessoa-texto { margin-top: 1rem; max-width: 46ch; }
.pessoa-formacao { margin-top: 1rem; color: var(--po); font-size: .9375rem; }
.pessoa-insta {
  display: inline-block;
  margin-top: .6rem;
  color: var(--abajur);
  font-size: .9375rem;
}
.casados {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: clamp(44px, 6vw, 78px);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
/* a fé: declarada numa linha, em voz baixa, logo abaixo — redondo, porque é identidade, não "a dois" */
.fe {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: 1.1rem;
  color: var(--po);
  text-align: center;
  text-wrap: balance;
}

/* ── depoimentos (só quando houver) ───────────────────────────────────────── */
.depoimentos { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 40px); }
.depoimento { max-width: 62ch; }
.depoimento-texto { font-style: italic; }
.depoimento-autor { margin-top: .5rem; color: var(--po); font-size: .9375rem; }

/* ── perguntas ────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; }
/* a folga negativa deixa o fundo do item aberto vazar para fora da coluna;
   a hairline é desenhada pelo ::before, alinhada com a coluna de texto */
.faq-item {
  position: relative;
  border-radius: 6px;
  padding-inline: var(--faq-folga);
  margin-inline: calc(-1 * var(--faq-folga));
  transition: background-color .3s ease;
}
.faq-item::before {
  content: "";
  position: absolute;
  left: var(--faq-folga);
  right: var(--faq-folga);
  top: 0;
  height: 1px;
  background: var(--fio);
}
.faq-item-inicio::before { display: none; }
.faq-item[open] { background: var(--veludo); }
.faq-pergunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding-block: 1.15rem;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta:hover { color: var(--abajur); }
.faq-mais {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: .38em;
  transition: transform .3s var(--suave);
}
.faq-mais::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--abajur);
}
.faq-mais::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 1px;
  background: var(--abajur);
}
.faq-item[open] .faq-mais { transform: rotate(45deg); }
.faq-resposta {
  max-width: 62ch;
  padding-bottom: 1.3rem;
  color: var(--po);
}
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s var(--suave), content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

/* ── contato ──────────────────────────────────────────────────────────────── */
.contato-envelope {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.contato-luz {
  display: block;
  width: 1px;
  height: 48px;
  margin: 0 auto clamp(30px, 4vw, 44px);
  background: var(--abajur);
  box-shadow: 0 0 24px 2px rgba(var(--abajur-rgb), .35);
}
.contato-texto { margin-top: 1.2rem; font-size: 1.2rem; line-height: 1.55; }

/* ── o formulário: campos em veludo, foco em abajur, tudo alinhado à esquerda ─ */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: clamp(30px, 4vw, 42px);
  text-align: left;
}
.form-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo-rotulo { color: var(--po); font-size: .9375rem; }
.campo-entrada {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--fio);
  border-radius: 6px;
  background: var(--veludo);
  color: var(--marfim);
  font: inherit;
  transition: border-color .2s ease;
}
.campo-entrada::placeholder { color: rgba(167, 185, 190, .55); }
.campo-entrada:hover { border-color: rgba(var(--abajur-rgb), .45); }
.campo-entrada:focus { outline: none; border-color: var(--abajur); }
.campo-entrada:focus-visible { outline: 2px solid var(--abajur); outline-offset: 2px; }
.campo-entrada:user-invalid { border-color: #E39A8C; }
textarea.campo-entrada { resize: vertical; min-height: 120px; line-height: 1.5; }
select.campo-entrada {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E8C27C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  cursor: pointer;
}
select.campo-entrada option { background: var(--veludo); color: var(--marfim); }
.form-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: .4rem;
}
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.botao[disabled]:hover { background: var(--abajur); }
.form-nota { color: var(--po); font-size: .9375rem; max-width: 62ch; }

.contato-nota { margin-top: clamp(26px, 3.2vw, 34px); color: var(--po); font-size: .9375rem; }
.contato-agenda { margin-top: .5rem; color: var(--po); font-size: .9375rem; }

/* ── rodapé ───────────────────────────────────────────────────────────────── */
.rodape { border-top: 1px solid var(--fio); }
/* auto-fit: quando uma coluna some (tudo vazio em dados.js), as que restam ocupam a linha */
.rodape-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 76px);
}
.rodape-coluna { display: flex; flex-direction: column; gap: .35rem; }
.rodape-marca { font-weight: 500; font-size: 1.125rem; }
.rodape-linha { color: var(--po); font-size: .9375rem; }
.rodape-insta { color: var(--abajur); font-size: .9375rem; }
.rodape-fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem 2rem;
  border-top: 1px solid var(--fio);
  color: var(--po);
  font-size: .9375rem;
}

/* ── responsivo: 1024 (o cabeçalho fica apertado antes do hambúrguer) ─────── */
/* Entre 820 e 1024 o wordmark + 4 links + botão não cabem na mesma linha:
   "Psicanálise clínica" sai daqui e volta acima de 1024. */
@media (max-width: 1024px) {
  .marca-sub { display: none; }
}

/* ── responsivo: 820 (grade → 1 coluna, hero empilha) ─────────────────────── */
@media (max-width: 820px) {
  .nav { display: none; }
  .topo-cta { display: none; }
  .menu-botao { display: flex; }

  .grade { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
  .areas { grid-template-columns: 1fr; gap: clamp(30px, 8vw, 44px); }
  .pessoas { grid-template-columns: 1fr; gap: clamp(44px, 9vw, 64px); }
  .rodape-grade { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 36px); }

  .diptico { height: auto; }
  .hero-titulo { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; }
  .metade {
    min-height: 34svh;
    justify-content: center;
    text-align: center;
    padding-block: clamp(34px, 7vw, 56px);
    padding-inline: var(--margem);
  }
  .metade-esq { padding-block-start: calc(var(--altura-topo) + 24px); }
  .metade-esq::before { background: radial-gradient(76% 60% at 50% 100%, rgba(var(--abajur-rgb), .14), transparent 72%); }
  .metade-dir::before { background: radial-gradient(76% 60% at 50% 0%, rgba(var(--abajur-rgb), .14), transparent 72%); }

  .costura {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
    transform-origin: left center;
  }
  /* as regras .pronto precisam vir DEPOIS das .anima também aqui dentro:
     mesma especificidade, quem vem por último vence */
  .anima .metade-esq { transform: translateY(-5%); }
  .anima .metade-dir { transform: translateY(5%); }
  .anima .costura { transform: translateY(-50%) scaleX(0); }
  .pronto .metade-esq { transform: none; }
  .pronto .metade-dir { transform: none; }
  .pronto .costura { transform: translateY(-50%) scaleX(1); }

  .hero-texto { justify-content: flex-start; }
}

/* ── responsivo: 560 (sublistas empilham) ─────────────────────────────────── */
@media (max-width: 560px) {
  .valores { grid-template-columns: 1fr; }
  .form-linha { grid-template-columns: 1fr; }
  .hero-acoes { width: 100%; flex-direction: column; align-items: stretch; }
  .form-acoes { flex-direction: column; align-items: stretch; text-align: center; }
  .form-acoes .link { align-self: center; }
}

/* ── movimento reduzido ───────────────────────────────────────────────────── */
/* Com movimento reduzido o JS nunca acrescenta `.anima`: a página já nasce no
   estado final. Isto aqui desliga o que restaria respirando ou transicionando. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pronto .costura { animation: none; transition: none; }
  .pronto .metade-esq { transition: none; }
  .pronto .metade-dir { transition: none; }
  .pronto .sobe { transition: none; }
  .botao { transition: none; }
  .nav-link { transition: none; }
  .topo { transition: none; }
  .menu-link { transition: none; }
  .menu-cta { transition: none; }
  .menu-atalhos { transition: none; }
  .menu-traco { transition: none; }
  .faq-item { transition: none; }
  .faq-mais { transition: none; }
  .faq-item::details-content { transition: none; }
}

/* `?reduzir` na URL faz o mesmo, para testar sem mexer no sistema */
.reduzir .costura { animation: none; transition: none; }