/* =========================================================================
   Helpsi — componentes
   Consultório de Psicologia Socorro Menezes

   A identidade visual NÃO mora aqui. Cor, tipografia, raio, sombra e ritmo
   vêm de marca.css, que carrega antes deste arquivo. Este arquivo só consome
   variáveis: nenhum hex, nenhuma família de fonte e nenhum raio solto.
   O guardião (scripts/guardiao.php) reprova o build se aparecer algum.

   Princípios em uso, e não por enfeite:
   - especificidade baixa com :where(), para o componente sobrescrever sem briga
   - escala fluida com clamp(), em vez de escadinha de media query
   - propriedades lógicas (inline/block), porque o layout responde ao conteúdo
   - consultas de contêiner: o cartão se adapta ao espaço que recebe
   - sombra em camadas, nunca uma difusa só
   - nenhum valor solto: cor, espaço, tamanho e raio saem sempre da escala
   ========================================================================= */

/* -------------------------------------------------------------------- base */
:where(*, *::before, *::after) { box-sizing: border-box; }

:where(html) { scroll-behavior: smooth; scroll-padding-block-start: 5.5rem; }

:where(body) {
  margin: 0;
  background: var(--fundo-base);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: var(--entrelinha-corpo);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  /* Impede que uma palavra longa sem espaço estoure o contêiner. */
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4) {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--entrelinha-titulo);
  text-wrap: balance;
  margin: 0;
  color: var(--marca-escura);
}
:where(h1) { font-size: var(--t-heroi); letter-spacing: -.01em; }
:where(h2) { font-size: var(--t-titulo); }
:where(h3) { font-size: var(--t-sub); }
:where(h4) { font-size: 1.0625rem; font-family: var(--fonte-corpo); font-weight: 600; }

:where(p, li) { text-wrap: pretty; }
:where(p) { margin: 0; max-inline-size: var(--medida); }

:where(a) { color: var(--marca-media); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(a:hover) { color: var(--marca-acao); }

:where(img, picture, svg, video) { max-inline-size: 100%; block-size: auto; }
:where(img) { display: block; }

:where(ul, ol) { margin: 0; padding-inline-start: 1.35rem; }
:where(li) { max-inline-size: var(--medida); }
:where(li + li) { margin-block-start: var(--e-2); }

:where(strong) { font-weight: 600; }

:where(hr) { border: 0; border-block-start: 1px solid var(--borda); margin-block: var(--e-6); }

/* Foco visível e bonito, nunca removido. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--marca-acao);
  outline-offset: 3px;
  border-radius: var(--raio-mini);
}
/* Em fundo escuro o anel muda de cor para continuar visível. */
:where(.rodape, .cabecalho, .heroi, .secao-escura) :is(a, button, summary):focus-visible {
  outline-color: var(--destaque-em-escuro);
}

/* ------------------------------------------------------------- utilitários */
.envolucro { inline-size: min(100% - 2 * var(--e-5), var(--largura)); margin-inline: auto; }
.envolucro-texto { inline-size: min(100% - 2 * var(--e-5), var(--largura-texto)); margin-inline: auto; }

/* Ritmo vertical: o pai controla o espaço, o irmão adjacente recebe. */
.fluxo > * + *          { margin-block-start: var(--e-4); }
.fluxo-apertado > * + * { margin-block-start: var(--e-2); }
.fluxo-largo > * + *    { margin-block-start: var(--e-6); }

.so-leitor {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--e-4);
  z-index: 100; background: var(--branco); color: var(--marca-escura);
  padding: var(--e-3) var(--e-4); border-radius: 0 0 var(--raio-mini) var(--raio-mini);
  font-weight: 600; text-decoration: none;
}
.pular:focus { inset-block-start: 0; }

.suave { color: var(--texto-suave); }
.mini { font-size: var(--t-mini); }

/* ==========================================================================
   RITMO DE SEÇÃO

   O problema que isto resolve: rolando a página, não dava para dizer onde uma
   seção terminava e a outra começava. Três regras, e nenhuma exceção:

   1. Densidade vem da escala (compacta, normal, ampla). Seção não escolhe o
      próprio respiro.
   2. Tom de fundo alterna. Duas seções vizinhas nunca repetem o tom — e
      quando o conteúdo obriga a repetir, entra um filete, que o :has resolve
      sozinho, sem ninguém precisar lembrar de marcar no HTML.
   3. Toda seção começa por um cabeçalho (.secao-topo): olho, título e, quando
      houver, uma linha de entrada. É o marco que o olho procura.
   ========================================================================== */
.secao {
  padding-block: var(--secao-y);
  background: var(--fundo-base);
  color: var(--texto);
}
.secao-compacta { padding-block: var(--secao-y-compacta); }
.secao-ampla    { padding-block: var(--secao-y-ampla); }

.secao-clara  { background: var(--fundo-alto); }
.secao-funda  { background: var(--fundo-fundo); }
.secao-escura { background: var(--marca-escura); color: var(--texto-em-escuro); }
.secao-escura :is(h1, h2, h3) { color: var(--branco); }
.secao-escura .suave { color: var(--texto-em-escuro-suave); }

/* Superfície clara dentro de seção escura recupera as cores de fundo claro.
   Sem isto o H2 do formulário saía branco sobre o cartão branco e sumia, e o
   texto de apoio ficava cinza-claro sobre branco. É o tipo de defeito que só
   aparece renderizado, e foi por isso que o guardião ganhou a medida de
   contraste. */
.secao-escura :is(.formulario, .cartao, .vazio, .urgencia) {
  color: var(--texto);
}
.secao-escura :is(.formulario, .cartao, .vazio) :is(h1, h2, h3) { color: var(--marca-escura); }
.secao-escura :is(.formulario, .cartao, .vazio) .suave { color: var(--texto-suave); }

/* Dois tons iguais encostados: entra um filete. Sem :has o autor teria de
   lembrar de marcar a mão, e é exatamente esse tipo de lembrete que falha. */
.secao + .secao:where(:not(.secao-clara):not(.secao-funda):not(.secao-escura)),
.secao-clara + .secao-clara,
.secao-funda + .secao-funda {
  border-block-start: 1px solid var(--borda);
}
.secao-escura + .secao-escura { border-block-start: 1px solid var(--borda-escura); }

/* Cabeçalho de seção. Um só componente, para todas as seções abrirem igual. */
.secao-topo { margin-block-end: var(--e-6); max-inline-size: 52rem; }
.secao-topo > * + * { margin-block-start: var(--e-3); }
.secao-topo p { color: var(--texto-suave); }
.secao-escura .secao-topo p { color: var(--texto-em-escuro); }

.olho {
  display: block; font-family: var(--fonte-corpo); font-size: var(--t-mini);
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--destaque-em-claro);
  margin-block-end: 0;
}
/* O traço curto antes do olho é o sinal de "começou outra coisa". Barato,
   silencioso, e some sozinho em fundo escuro trocando só a cor. */
.olho::before {
  content: ''; display: inline-block; vertical-align: middle;
  inline-size: 1.75rem; block-size: 2px; margin-inline-end: var(--e-3);
  background: var(--marca-destaque); border-radius: var(--raio-pill);
}
.secao-escura .olho, .heroi .olho { color: var(--destaque-em-escuro); }
.secao-escura .olho::before, .heroi .olho::before { background: var(--destaque-em-escuro); }

/* Rodapé de seção: a ação que fecha o bloco, sempre no mesmo lugar. */
.secao-fim { margin-block-start: var(--e-6); }

/* ---------------------------------------------------------------- botões */
:where(.botao) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-block-size: 48px;
  padding: var(--e-3) var(--e-6);
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  font: inherit; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.botao-principal { background: var(--marca-acao); color: var(--branco); }
.botao-principal:hover { background: var(--marca-acao-alta); color: var(--branco); }

.botao-escuro { background: var(--marca-escura); color: var(--branco); }
.botao-escuro:hover { background: var(--marca-media); color: var(--branco); }

.botao-contorno {
  background: transparent; color: var(--marca-escura); border-color: var(--marca-escura);
}
.botao-contorno:hover { background: var(--marca-clara); color: var(--marca-escura); }

/* Todo contexto escuro na mesma lista. O .cartao-escuro do guia de estilo
   ficou de fora na primeira versão e o botão de contorno saiu verde sobre
   verde: 1,00:1, ou seja, invisível. */
.secao-escura .botao-contorno, .rodape .botao-contorno,
.heroi .botao-contorno, .cartao-escuro .botao-contorno {
  color: var(--branco); border-color: rgb(255 255 255 / .55);
}
.secao-escura .botao-contorno:hover, .rodape .botao-contorno:hover,
.heroi .botao-contorno:hover, .cartao-escuro .botao-contorno:hover {
  background: rgb(255 255 255 / .12); color: var(--branco);
}

.botao svg { inline-size: 20px; block-size: 20px; flex: none; }

/* Linha de ações. Existia como style inline em três lugares; virou classe. */
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); max-inline-size: none; }

/* ---------------------------------------------------------------- cartões */
.cartao {
  container-type: inline-size;
  background: var(--fundo-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e-5);
}
/* O cartão estica até a altura do vizinho mais alto — é grade, e grade
   estica. O que não estica é o conteúdo, e sobrava branco na base dos cartões
   curtos. Agora o cartão é coluna: o resumo cresce e a seta fica ancorada
   embaixo, então a base do cartão sempre tem alguma coisa. */
a.cartao {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
}
a.cartao > p { flex: 1 1 auto; }
.cartao-fim {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-block-start: var(--e-4); padding-block-start: var(--e-3);
  border-block-start: 1px solid var(--borda);
  font-size: var(--t-mini); font-weight: 600; color: var(--marca-acao);
}
.cartao-fim svg { inline-size: 18px; block-size: 18px; transition: transform var(--rapido) var(--curva); }
a.cartao:hover .cartao-fim svg { transform: translateX(3px); }
a.cartao:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
a.cartao h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: text-decoration-color var(--rapido); }
a.cartao:hover h3 { text-decoration-color: var(--marca-destaque); }

.cartao .icone { color: var(--marca-acao); margin-block-end: var(--e-3); }
.cartao .icone svg { inline-size: 28px; block-size: 28px; }

/* Grade intrínseca: o número de colunas vem do espaço, não do ponto de quebra. */
.grade {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grade-2 { display: grid; gap: var(--e-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: center; }
.grade-2-topo { align-items: start; }

/* -------------------------------------------------------------- cabeçalho */
.cabecalho {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--marca-escura);
  color: var(--texto-em-escuro);
  border-block-end: 1px solid var(--borda-escura);
}
.cabecalho-interno {
  display: flex; align-items: center; gap: var(--e-4);
  min-block-size: 4.25rem;
}

/* Slot do logotipo. Enquanto não há arquivo, o lockup em texto é a marca —
   e continua no HTML mesmo depois, porque o art. 20 do Código de Ética exige
   nome e função em texto, nunca dentro de imagem. */
.marca { display: flex; align-items: center; gap: var(--e-3); min-block-size: var(--alvo-toque); text-decoration: none; color: var(--branco); margin-inline-end: auto; }
.marca:hover { color: var(--branco); }
.marca-logo { block-size: var(--logo-altura); inline-size: auto; flex: none; }
.rodape .marca-logo { block-size: var(--logo-altura-rodape); }
.marca-texto { display: flex; flex-direction: column; }
.marca-nome { font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: var(--peso-titulo); line-height: 1.1; }
.marca-funcao { font-size: var(--t-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--texto-em-escuro-suave); }
/* Com logotipo, o lockup em texto sai do olho e fica para o leitor de tela. */
.marca:has(.marca-logo) .marca-texto {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.menu { display: flex; align-items: center; gap: var(--e-2); }
/* O :not(.botao) não é preciosismo. Sem ele, ".menu a" (0,1,1) vencia
   ".botao-principal" (0,1,0) e o botão Agendar do cabeçalho saía com o cinza
   do menu sobre o terracota: 3,81:1, abaixo do mínimo AA de 4,5:1. O defeito
   estava em todas as 34 páginas e só apareceu quando o guardião passou a
   medir contraste no elemento renderizado. */
.menu a:not(.botao) {
  display: inline-flex; align-items: center; min-block-size: var(--alvo-toque);
  padding-inline: var(--e-3);
  color: var(--texto-em-escuro); text-decoration: none; font-size: var(--t-mini); font-weight: 500;
  border-radius: var(--raio-mini);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.menu a:not(.botao):hover, .menu a:not(.botao)[aria-current="page"] { background: rgb(255 255 255 / .1); color: var(--branco); }

.abre-menu {
  display: none;
  align-items: center; gap: var(--e-2);
  min-block-size: var(--alvo-toque); min-inline-size: var(--alvo-toque);
  padding: var(--e-2) var(--e-3);
  background: transparent; border: 1px solid rgb(255 255 255 / .35);
  border-radius: var(--raio-mini); color: var(--branco);
  font: inherit; font-size: var(--t-mini); font-weight: 600; cursor: pointer;
}
.abre-menu svg { inline-size: 22px; block-size: 22px; }

@media (max-width: 63.99em) {
  .abre-menu { display: inline-flex; }
  .menu {
    display: none;
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--marca-escura);
    border-block-end: 1px solid var(--borda-escura);
    padding: var(--e-2) var(--e-4) var(--e-5);
    box-shadow: var(--sombra-alta);
  }
  .menu[data-aberto="sim"] { display: flex; }
  .menu a { min-block-size: 48px; padding-inline: var(--e-3); font-size: 1rem; }
  .menu .botao { margin-block-start: var(--e-3); }
  .cabecalho-interno { position: relative; }
}

/* ==========================================================================
   HERÓI

   A foto fica atrás, o formulário fica em cima. A foto do escritório é a
   única do acervo com resolução de câmera (2000 x 3000), e é por isso que ela
   aguenta fundo de faixa larga sem ampliação — as do ensaio, comprimidas por
   WhatsApp em 852 px, não aguentavam, e é por isso que o herói ficou tanto
   tempo em cor sólida.

   O véu é gradiente e não cor chapada: forte à esquerda, onde mora o texto, e
   quase transparente à direita, onde ela aparece. Assim o rosto dela fica
   visível de verdade em vez de virar textura embaixo de uma camada opaca.
   ========================================================================== */
.heroi {
  position: relative;
  background: var(--marca-escura);
  color: var(--texto-em-escuro);
  isolation: isolate;
  overflow: clip;
}
.heroi-fundo {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 28%;
}
.heroi::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* No celular a coluna é única e o texto passa por cima da foto inteira:
     o véu precisa ser vertical e forte. */
  background: linear-gradient(180deg,
              rgb(30 58 52 / .78) 0%, rgb(30 58 52 / .93) 42%, rgb(30 58 52 / .97) 100%);
}
@media (min-width: 64em) {
  .heroi-fundo { object-position: 62% 40%; }
  /* O véu cai rápido a partir da metade: à esquerda o texto precisa de fundo
     opaco, e do meio para a direita ela precisa aparecer. A primeira versão
     mantinha .72 até 58% e o rosto dela saía esverdeado, como textura embaixo
     de uma camada — que é justamente o que não se queria. */
  .heroi::before {
    background: linear-gradient(96deg,
                rgb(30 58 52 / .97) 0%, rgb(30 58 52 / .93) 34%,
                rgb(30 58 52 / .62) 48%, rgb(30 58 52 / .22) 62%,
                rgb(30 58 52 / .10) 80%, rgb(30 58 52 / .22) 100%);
  }
}
.heroi-interno {
  display: grid; gap: var(--e-6);
  padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 64em) {
  .heroi-interno { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--e-8); align-items: center; }
}
.heroi h1 { color: var(--branco); }
.heroi-sub { font-size: var(--t-sub); color: var(--texto-em-escuro); max-inline-size: 32rem; }
.heroi-credencial { font-size: var(--t-mini); color: var(--texto-em-escuro-suave); }

/* Selo: o rosto dela ao lado do nome. É a marca enquanto não há logotipo, e
   segue valendo depois — em consultório de uma pessoa só, o rosto identifica
   mais rápido que qualquer símbolo. */
.selo-linha { display: flex; align-items: center; gap: var(--e-4); max-inline-size: none; }
.selo {
  inline-size: 4.25rem; block-size: 4.25rem; flex: none;
  border-radius: var(--raio-pill); overflow: hidden;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .28), var(--sombra);
}
.selo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.selo-nome { font-family: var(--fonte-titulo); font-size: 1.15rem; color: var(--branco); line-height: 1.2; }
.selo-funcao { font-size: var(--t-mini); color: var(--texto-em-escuro-suave); }

/* ---------------------------------------------------------------- retrato
   Proporção declarada em --proporcao e dimensões no atributo: o espaço fica
   reservado antes de a imagem chegar, e o retrato nunca empurra o texto.
   A moldura é um filete por dentro, não uma borda por fora: borda por fora
   somaria à caixa e desalinharia o retrato do texto ao lado. */
.retrato {
  display: block; position: relative;
  aspect-ratio: var(--proporcao, 4 / 5);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--marca-clara);
  box-shadow: var(--sombra-alta), var(--filete-interno);
}
.retrato img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 22%; }

.retrato-figura {
  margin: 0; display: grid; gap: var(--e-3);
  inline-size: 100%; max-inline-size: 30rem; margin-inline: 0 auto;
}
.retrato-figura figcaption { max-inline-size: var(--medida); color: var(--texto-suave); }
.secao-escura .retrato, .heroi .retrato { box-shadow: var(--sombra-alta), var(--filete-interno-claro); }
.secao-escura .retrato-figura figcaption { color: var(--texto-em-escuro-suave); }

/* ------------------------------------------------------- abertura de página
   Só as páginas que declaram um retrato usam a grade. As demais seguem em
   coluna única de leitura: o layout responde ao conteúdo. */
.abertura-grade { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 64em) {
  .abertura-grade { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--e-8); }
  /* Na coluna larga o H1 herdaria a largura da grade e passaria da medida de
     leitura. A medida vale para título também. */
  .abertura-grade > .fluxo > :is(h1, p) { max-inline-size: var(--medida); }
  .abertura-grade > .retrato-figura { margin-inline: auto 0; }
}

/* ==========================================================================
   GALERIA E VÍDEO DO CONSULTÓRIO
   ========================================================================== */
.secao h3 + .galeria, .secao h3 + .video-consultorio { margin-block-start: var(--e-4); }
/* Duas colunas já em 375px. Empilhadas, as quatro fotos do consultório
   faziam 1.800px de rolagem no celular para mostrar uma sala só. */
.galeria { display: grid; gap: var(--e-4) var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
/* A seção do consultório não é meio a meio: as três fotos precisam caber lado
   a lado, e o vídeo é vertical e estreito. Meio a meio deixava a terceira
   foto órfã numa segunda fila. */
@media (min-width: 64em) {
  .consultorio-grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 20rem); }
  /* Quatro fotos em 2x2 ao lado do vídeo vertical. Com três em fila a coluna
     da esquerda acabava 418px antes da direita, e sobrava um buraco do
     tamanho de meia tela ao lado do vídeo. */
  .consultorio-grade .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.galeria figure { margin: 0; display: grid; gap: var(--e-2); }
.galeria .quadro {
  display: block; aspect-ratio: var(--proporcao, 4 / 3);
  border-radius: var(--raio); overflow: hidden;
  background: var(--marca-clara); box-shadow: var(--sombra), var(--filete-interno);
}
.galeria .quadro img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.galeria figcaption { font-size: var(--t-mini); color: var(--texto-suave); }
.secao-escura .galeria figcaption { color: var(--texto-em-escuro-suave); }

/* O vídeo carrega com preload="none" e cartaz estático: 1,4 MB no caminho
   crítico derrubaria justamente a métrica que este site precisa defender.
   Quem quiser ver, clica — e aí sim baixa. */
.video-consultorio {
  margin: 0; display: grid; gap: var(--e-3);
  inline-size: 100%; max-inline-size: 22rem;
}
.video-consultorio video {
  inline-size: 100%; aspect-ratio: 9 / 16;
  border-radius: var(--raio); background: var(--marca-escura);
  box-shadow: var(--sombra-alta), var(--filete-interno);
  object-fit: cover;
}
.video-consultorio figcaption { font-size: var(--t-mini); color: var(--texto-suave); }
.secao-escura .video-consultorio figcaption { color: var(--texto-em-escuro-suave); }

/* -------------------------------------------------------------- formulário */
.formulario {
  background: var(--fundo-alto);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: var(--e-5);
  color: var(--texto);
}
@media (min-width: 30em) { .formulario { padding: var(--e-6); } }
.formulario h2 { font-size: var(--t-sub); }

.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo > label, .grupo > legend {
  font-size: var(--t-mini); font-weight: 600; color: var(--marca-escura);
}
.campo :is(input, select, textarea) {
  inline-size: 100%; min-block-size: 48px;
  padding: var(--e-3) var(--e-4);
  font: inherit; color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-mini);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.campo :is(input, select, textarea):hover { border-color: var(--marca-media); }
.campo :is(input, select, textarea):focus {
  border-color: var(--marca-media);
  box-shadow: 0 0 0 3px rgb(47 90 80 / .16);
  outline: none;
}
.campo :is(input, select, textarea):focus-visible { outline: 2px solid var(--marca-acao); outline-offset: 2px; }
.campo select { appearance: none; padding-inline-end: var(--e-7);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e-4) center; background-size: 20px; }

.grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcao {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-block-size: var(--alvo-toque); padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-pill);
  font-size: var(--t-mini); cursor: pointer;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.opcao:hover { border-color: var(--marca-media); }
.opcao:has(input:checked) { border-color: var(--marca-escura); background: var(--marca-clara); font-weight: 600; }
.opcao input { inline-size: 18px; block-size: 18px; accent-color: var(--marca-escura); margin: 0; }

/* A linha inteira é o alvo, não o quadradinho de 20px. Com rótulo de uma
   linha só ela ficava em 26px, abaixo do mínimo. */
.consentimento { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-mini); min-block-size: var(--alvo-toque); padding-block: var(--e-1); }
.consentimento input { inline-size: 20px; block-size: 20px; margin-block-start: .2em; accent-color: var(--marca-escura); flex: none; }
.consentimento label { max-inline-size: 40ch; }

.campo-erro { color: var(--erro); font-size: var(--t-mini); font-weight: 600; }
.campo :is(input, select):user-invalid { border-color: var(--erro); }

.aviso-form { font-size: var(--t-mini); color: var(--texto-suave); }

.recado { padding: var(--e-4); border-radius: var(--raio-mini); font-size: var(--t-mini); font-weight: 500; }
.recado-erro { background: var(--erro-fundo); color: var(--erro-texto); border: 1px solid var(--erro-borda); }
.recado-ok   { background: var(--marca-clara); color: var(--ok-texto); border: 1px solid var(--ok-borda); }

/* Isca de robô: precisa ficar fora da tela sem display:none, que alguns bots leem. */
.isca { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* --------------------------------------------------------------- perguntas */
.perguntas { border-block-start: 1px solid var(--borda); }
.pergunta { border-block-end: 1px solid var(--borda); }
.pergunta > summary {
  display: flex; align-items: flex-start; gap: var(--e-4);
  min-block-size: 56px; padding-block: var(--e-4);
  font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: var(--peso-titulo);
  color: var(--marca-escura); cursor: pointer; list-style: none;
}
.pergunta > summary::-webkit-details-marker { display: none; }
.pergunta > summary::after {
  content: ''; flex: none; inline-size: 20px; block-size: 20px; margin-inline-start: auto;
  background: currentColor;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--medio) var(--curva);
}
.pergunta[open] > summary::after { transform: rotate(180deg); }
.pergunta > summary:hover { color: var(--marca-acao); }
.pergunta-corpo { padding-block-end: var(--e-5); }
.pergunta-corpo > * + * { margin-block-start: var(--e-3); }

/* ---------------------------------------------------------------- trilha */
.trilha { font-size: var(--t-mini); color: var(--texto-suave); padding-block: var(--e-4); background: var(--fundo-base); }
.trilha ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.trilha li { margin: 0; display: flex; align-items: center; gap: var(--e-2); max-inline-size: none; }
/* A trilha é navegação de verdade, e o item dela é alvo de toque como
   qualquer outro. Ficava em 25px porque o <li> é flex e o <a> herdava só a
   altura da linha. */
.trilha a { display: inline-flex; align-items: center; min-block-size: var(--alvo-toque); }
.trilha li + li::before { content: '/'; color: var(--borda); }
.trilha a { color: var(--texto-suave); }
.trilha [aria-current="page"] { color: var(--texto); }

/* ==========================================================================
   PROSA

   O bloco de conteúdo de uma página de serviço tem seis a oito H2 seguidos.
   Sem marco, isso vira uma parede: era esse o "não sei onde uma seção termina"
   das páginas internas. O H2 agora ganha filete acima, respiro maior e o mesmo
   traço curto do olho de seção. Continua um bloco só — quebrar em seções
   alternadas picotaria a leitura, que é o oposto do que a página precisa.
   ========================================================================== */
.prosa > * + * { margin-block-start: var(--e-4); }
.prosa > * + :is(h3) { margin-block-start: var(--e-6); }
.prosa > * + :is(h2) {
  margin-block-start: var(--e-8);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--borda);
}
.prosa > h2::before {
  content: ''; display: block;
  inline-size: 1.75rem; block-size: 2px; margin-block-end: var(--e-3);
  background: var(--marca-destaque); border-radius: var(--raio-pill);
}
.prosa :is(p, li) { max-inline-size: var(--medida); }
.prosa blockquote {
  margin: 0; padding: var(--e-4) var(--e-5);
  border-inline-start: 3px solid var(--marca-destaque);
  background: var(--fundo-base); border-radius: 0 var(--raio-mini) var(--raio-mini) 0;
  font-size: 1.05rem;
}
.prosa figure { margin: 0; }
.prosa figcaption { font-size: var(--t-mini); color: var(--texto-suave); margin-block-start: var(--e-2); }
.prosa img, .prosa-capa { border-radius: var(--raio); }

/* Resposta direta: 40 a 60 palavras, autossuficiente, no topo da página. */
.resposta {
  font-size: clamp(1.125rem, 1.06rem + .3vw, 1.28rem);
  line-height: 1.55;
  color: var(--marca-escura);
  border-inline-start: 3px solid var(--marca-destaque);
  padding-inline-start: var(--e-5);
  max-inline-size: 40rem;
}

/* ------------------------------------------------------------------ tabela
   Rola dentro do próprio contêiner, com sombra na borda indicando que rola. */
.rolagem {
  overflow-x: auto;
  background:
    linear-gradient(90deg, var(--fundo-alto) 30%, rgb(255 255 255 / 0)) left / 40px 100% no-repeat,
    linear-gradient(270deg, var(--fundo-alto) 30%, rgb(255 255 255 / 0)) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(32 33 31 / .14), rgb(32 33 31 / 0)) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(32 33 31 / .14), rgb(32 33 31 / 0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.rolagem table { border-collapse: collapse; inline-size: 100%; min-inline-size: 34rem; }
.rolagem :is(th, td) { padding: var(--e-3) var(--e-4); text-align: start; border-block-end: 1px solid var(--borda); }
.rolagem th { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }

/* ------------------------------------------------------------------ urgência */
.urgencia {
  border: 1px solid var(--borda);
  border-inline-start: 3px solid var(--marca-acao);
  background: var(--fundo-alto);
  border-radius: 0 var(--raio-mini) var(--raio-mini) 0;
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-mini);
  max-inline-size: 46rem;
}
.urgencia strong { color: var(--marca-escura); }
.rodape .urgencia { background: rgb(255 255 255 / .06); border-color: var(--borda-escura); color: var(--texto-em-escuro); }
.rodape .urgencia strong { color: var(--branco); }

/* ------------------------------------------------------------- identificação
   Exigida em toda página pelo art. 20 do Código de Ética e pelo art. 53 da
   Res. CFP 3/2007. Sempre em texto, nunca dentro de imagem. */
.identificacao { font-weight: 600; color: var(--branco); }
.assinatura {
  font-size: var(--t-mini); color: var(--texto-suave);
  border-block-start: 1px solid var(--borda); padding-block-start: var(--e-4);
}

/* ==========================================================================
   RODAPÉ

   Quatro colunas de larguras iguais deixavam a identificação da psicóloga —
   que é obrigação do Código de Ética, não rodapé decorativo — com o mesmo
   peso de uma lista de links. Agora a coluna da marca é mais larga e vem
   primeiro, e as listas dividem o resto.
   ========================================================================== */
.rodape { background: var(--marca-escura); color: var(--texto-em-escuro); padding-block: var(--secao-y) var(--e-6); }
.rodape :is(h2, h3) { color: var(--branco); font-size: var(--t-mini); font-family: var(--fonte-corpo); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.rodape a { color: var(--texto-em-escuro); text-decoration: none; }
.rodape a:hover { color: var(--branco); text-decoration: underline; }
.rodape ul { list-style: none; padding: 0; }
.rodape li { max-inline-size: none; }
.rodape li + li { margin-block-start: var(--e-1); }
.rodape li a { display: inline-flex; align-items: center; min-block-size: var(--alvo-toque); }
.rodape .mini { color: var(--texto-em-escuro-suave); }

/* A marca virou faixa no topo do rodapé, e não coluna ao lado das listas.
   Como coluna ela tinha quatro linhas contra dez das listas, e o buraco
   embaixo dela era a maior área vazia da página. Em faixa, ela ganha a
   largura toda e o rodapé fecha certo. */
.rodape-faixa {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-4) var(--e-6);
  padding-block-end: var(--e-6);
  margin-block-end: var(--e-7);
  border-block-end: 1px solid var(--borda-escura);
}
.rodape-faixa .marca { margin-inline-end: 0; }
.rodape-faixa-texto { flex: 1 1 18rem; }
.rodape-faixa-texto > * + * { margin-block-start: var(--e-1); }
.rodape-faixa .botao { margin-inline-start: auto; }

.rodape-grade { display: grid; gap: var(--e-7) var(--e-6); grid-template-columns: 1fr; }
@media (min-width: 40em) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Três trilhas, porque são três colunas. Com quatro, a quarta ficava vazia e
   abria um vão do tamanho de uma coluna inteira na direita do rodapé. */
@media (min-width: 64em) { .rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rodape-colunas h2 { margin-block-end: var(--e-4); }
.rodape-colunas ul + h2 { margin-block-start: var(--e-6); }

.rodape-fim {
  margin-block-start: var(--e-7); padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--borda-escura);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); align-items: baseline;
  font-size: var(--t-mini); color: var(--texto-em-escuro-suave);
}

/* ------------------------------------------------------- botão de WhatsApp */
.zap-flutuante {
  position: fixed; inset-block-end: var(--e-5); inset-inline-end: var(--e-5); z-index: 40;
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-block-size: 52px; padding-inline: var(--e-5);
  background: var(--marca-escura); color: var(--branco);
  border-radius: var(--raio-pill); box-shadow: var(--sombra-alta);
  text-decoration: none; font-weight: 600; font-size: var(--t-mini);
  transition: background var(--rapido) var(--curva), opacity var(--medio) var(--curva);
}
.zap-flutuante:hover { background: var(--marca-media); color: var(--branco); }
.zap-flutuante[data-escondido="sim"] { opacity: 0; pointer-events: none; }
@media (max-width: 30em) { .zap-flutuante { inset-inline: auto var(--e-4); inset-block-end: var(--e-4); } }

/* ------------------------------------------------------------- garantias
   Três linhas no bloco de agendamento. Entraram por layout — a coluna de
   texto acabava 305px antes do formulário — e ficaram por conteúdo: é
   exatamente o que a pessoa quer saber na hora de decidir se escreve. */
.garantias { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
.garantias li { margin: 0; max-inline-size: none; display: flex; align-items: flex-start; gap: var(--e-3); }
.garantias li > span:last-child { display: grid; gap: var(--e-1); }
.garantias strong { color: var(--marca-escura); }
.secao-escura .garantias strong { color: var(--branco); }
.garantia-icone {
  flex: none; display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--raio-pill);
  background: var(--marca-clara); color: var(--marca-acao);
}
.secao-escura .garantia-icone { background: rgb(255 255 255 / .1); color: var(--destaque-em-escuro); }
.garantia-icone svg { inline-size: 22px; block-size: 22px; }

/* ------------------------------------------------------------------- listas */
.lista-sintomas { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.lista-sintomas li { margin: 0; max-inline-size: none; }
.lista-sintomas a {
  display: flex; align-items: flex-start; gap: var(--e-3);
  min-block-size: var(--alvo-toque); padding: var(--e-4);
  background: var(--fundo-alto); border: 1px solid var(--borda); border-radius: var(--raio);
  color: var(--texto); text-decoration: none;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--medio) var(--curva);
}
.lista-sintomas a:hover { border-color: var(--marca-media); box-shadow: var(--sombra); color: var(--texto); }
.lista-sintomas .seta { margin-inline-start: auto; color: var(--marca-acao); flex: none; }
/* Em coluna larga a lista vira duas colunas: seis itens empilhados criavam
   uma seção de mil pixels sem nenhum marco no meio. */
@media (min-width: 52em) {
  .lista-sintomas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); }
}

.fatos { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.fato .numero { display: block; font-family: var(--fonte-titulo); font-size: 1.75rem; color: var(--marca-escura); line-height: 1.1; }
.fato p { font-size: var(--t-mini); color: var(--texto-suave); margin-block-start: var(--e-2); }
.secao-escura .fato .numero { color: var(--branco); }
.secao-escura .fato p { color: var(--texto-em-escuro-suave); }

.passos { list-style: none; padding: 0; counter-reset: passo; display: grid; gap: var(--e-5); }
.passos li { margin: 0; padding-inline-start: 3.25rem; position: relative; }
.passos li::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  inline-size: 2.25rem; block-size: 2.25rem;
  display: grid; place-items: center;
  background: var(--marca-clara); color: var(--marca-escura);
  border-radius: var(--raio-pill); font-family: var(--fonte-titulo); font-weight: var(--peso-titulo);
}
@media (min-width: 52em) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }

/* Cartão de post do blog: adapta ao contêiner, não à tela. */
.post-cartao { display: flex; flex-direction: column; gap: var(--e-3); }
.post-cartao img { border-radius: var(--raio-mini); aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
.post-cartao .data { font-size: var(--t-micro); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
@container (min-width: 26rem) {
  .post-cartao { flex-direction: row; align-items: flex-start; }
  .post-cartao img { inline-size: 11rem; flex: none; }
}

.paginacao { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: center; }
.paginacao a, .paginacao span {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--alvo-toque); min-block-size: var(--alvo-toque); padding-inline: var(--e-3);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-mini);
  text-decoration: none; font-size: var(--t-mini);
}
.paginacao [aria-current="page"] { background: var(--marca-escura); color: var(--branco); border-color: var(--marca-escura); font-weight: 600; }

.etiqueta {
  display: inline-flex; align-items: center; min-block-size: var(--alvo-toque);
  padding-inline: var(--e-3); border-radius: var(--raio-pill);
  background: var(--marca-clara); color: var(--marca-escura);
  font-size: var(--t-micro); font-weight: 600; text-decoration: none;
  letter-spacing: .04em; text-transform: uppercase;
}
a.etiqueta:hover { background: var(--fundo-fundo); color: var(--marca-escura); }

/* Estado vazio digno: título mais orientação, nunca área em branco. */
.vazio {
  padding: var(--e-7) var(--e-5); text-align: center;
  border: 1px dashed var(--borda); border-radius: var(--raio); background: var(--fundo-alto);
}
.vazio h3 { margin-block-end: var(--e-2); }
.vazio p { margin-inline: auto; }

/* ------------------------------------------------------ amostras do guia
   Só o /style-guide.html usa estas classes. Existem para aquela página não
   precisar de estilo inline: identidade visual em atributo style é peça que a
   troca de marca deixa para trás. A cor da amostra entra por custom property,
   que é dado, e não estilo. */
.amostra-cor { block-size: 3.5rem; border-radius: var(--raio-mini); background: var(--amostra); border: 1px solid var(--borda); }
.amostra-token { font-size: 1rem; }
.amostra-titulo { margin: 0; font-family: var(--fonte-titulo); line-height: var(--entrelinha-titulo); color: var(--marca-escura); }
.amostra-t1 { font-size: var(--t-heroi); }
.amostra-t2 { font-size: var(--t-titulo); }
.amostra-t3 { font-size: var(--t-sub); }
.amostra-nota { margin-block-start: var(--e-4); }
.amostra-grade { display: grid; gap: var(--e-4); }
.cartao-escuro { background: var(--marca-escura); border-color: var(--borda-escura); color: var(--texto-em-escuro); }
.cartao-escuro .olho { color: var(--destaque-em-escuro); }
.cartao-escuro .olho::before { background: var(--destaque-em-escuro); }

/* ------------------------------------------------------------- movimento */
.surge { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: no-preference) {
  .surge { animation: surgir linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; }
}
@keyframes surgir { to { opacity: 1; transform: none; } }
@supports not (animation-timeline: view()) { .surge { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  :where(*, *::before, *::after) {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .surge { opacity: 1; transform: none; }
}

@media print {
  .cabecalho, .rodape, .zap-flutuante, .formulario, .video-consultorio { display: none; }
  body { background: var(--branco); }
}