/* =========================================================================
   Dr. Moysés Chaves — Médico Psiquiatra
   Folha compartilhada por todas as páginas (home e blog).
   Ordem dos blocos: 1 tokens · 2 reset · 3 tipografia · 4 layout · 5 botões ·
   6 selo · 7 cards · 8 aviso · 9 header · 10 hero · 11 faixa · 12 serviços ·
   13 consulta · 14 accordions · 15 sobre · 16 contato · 17 footer ·
   18 flutuante e modal · 19 reveal · 20 responsivo
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  /* --- mundo visual: placa de latão gravada. O emblema já era dourado
         sobre fundo escuro — esta paleta parte dele, não do teal residual
         do template Be|medic, que foi descartado. --- */

  /* --- superfícies claras: pergaminho, não o mint frio de antes --- */
  --branco: #ffffff;
  --papel: #f2ede1;         /* pergaminho — fundo claro dominante */
  --tint: #fbf9f4;          /* marfim — cartão elevado sobre pergaminho */
  --tint-forte: #e9e2d1;    /* pergaminho mais escuro, para divisor sutil */

  /* --- superfícies escuras: bronze oxidado, não verde-clínico --- */
  --escuro: #14211c;
  --escuro-fundo: #0b1512;

  /* --- ação: a própria placa. Sem teal — o botão é ele mesmo um pequeno
         selo gravado, fundo escuro e texto claro, nunca dourado. --- */
  --acao: #14211c;
  --acao-forte: #0b1512;
  --acao-vivo: #2f4238;     /* apenas grafismo sobre claro */
  --acao-claro: #3c5347;    /* apenas grafismo */

  /* --- latão: acento gráfico, extraído do degradê real do emblema
         (#B27A20 → #F2C45C → #C38A27 → #8E5E14). Nunca cor de botão —
         regra do projeto original, restaurada depois do desvio Be|medic.
         Afinado por superfície para AA nos dois casos. --- */
  --ipe: #84631a;          /* latão sobre pergaminho — 4.75:1 */
  --ipe-claro: #e8c77a;    /* latão claro sobre bronze — 10.19:1 */

  /* --- texto: tinta ferrogálica, não preto puro --- */
  --tinta: #1c1712;
  --tinta-suave: #5b5347;
  --claro: #fbf9f4;
  --claro-suave: #b8ab93;

  /* --- linhas --- */
  --linha: rgba(28, 23, 18, 0.14);
  --linha-forte: rgba(28, 23, 18, 0.22);
  --linha-escura: rgba(232, 199, 122, 0.18);
  --linha-escura-forte: rgba(232, 199, 122, 0.32);

  /* --- tipografia: três papéis deliberados.
         Prata (serifada de gravação) carrega títulos — é a letra de placa
         e diploma, usada com moderação. Montserrat continua no corpo e na
         interface. IBM Plex Mono volta para dado de registro (CRM, RQE,
         CNPJ, datas): a Montserrat não é monoespaçada, e o hack de
         tabular-nums não resolvia alinhamento de coluna de verdade. --- */
  --display: "Prata", Georgia, "Times New Roman", serif;
  --corpo: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dados: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-100: 0.7rem;
  --fs-200: 0.8rem;
  --fs-300: 0.92rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.15rem;
  --fs-600: clamp(1.3rem, 1.6vw, 1.5rem);
  --fs-700: clamp(1.85rem, 3.4vw, 2.6rem);
  --fs-800: clamp(2.3rem, 5.2vw, 3.6rem);

  /* --- espaçamento --- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;
  --s16: 128px;

  --container: 1200px;
  /* metal gravado não tem canto arredondado */
  --raio: 0px;
  --raio-g: 0px;
  --transicao: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-reveal: 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  --altura-header: 84px;
  --medida: 65ch;
}

/* =========================================================================
   2. RESET
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + var(--s3));
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: var(--fs-400);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 4px;
  border-radius: 2px;
}

.escuro :focus-visible,
.rodape :focus-visible,
.hero :focus-visible {
  outline-color: var(--ipe-claro);
}

/* pula para o conteúdo — visível apenas no foco por teclado */
.pular {
  position: absolute;
  left: var(--s2);
  top: -100px;
  z-index: 200;
  padding: var(--s2) var(--s3);
  background: var(--acao);
  color: var(--claro);
  font-size: var(--fs-300);
  border-radius: var(--raio);
  transition: top var(--transicao);
}

.pular:focus-visible {
  top: var(--s2);
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   3. TIPOGRAFIA
   ========================================================================= */

/* Prata é a letra de gravação: peso único (400), traço fino e preciso, à
   la placa de latão. Negrito sintético quebraria essa precisão, então a
   hierarquia vem de tamanho e entrelinha, não de peso — o oposto de como a
   Montserrat pedia para ser tratada. */
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-800);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-700);
  line-height: 1.18;
  letter-spacing: -0.008em;
}

h3 {
  font-size: var(--fs-600);
  line-height: 1.32;
  letter-spacing: -0.004em;
}

/* tudo que carrega dado: numerais em largura fixa para alinhar em coluna */
.dados,
.micro,
.eyebrow,
.selo-linha,
.selo-topo,
.selo-pe,
.faixa li,
.contato-dl dt,
.rodape-legal,
.rodape-credito,
.artigo-meta,
.credenciais {
  font-variant-numeric: tabular-nums;
}

p {
  max-width: var(--medida);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-500);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.mono {
  font-family: var(--dados);
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* microlabel: usado só em credencial, dado e numeração */
.micro {
  font-family: var(--dados);
  font-size: var(--fs-100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tinta-suave);
}

/* =========================================================================
   4. LAYOUT
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* Ritmo vertical: as seções não têm todas o mesmo respiro. Um bloco denso
   ganha ar em volta; um bloco longo e uniforme (as dúvidas) se fecha, para
   não virar um corredor de 1.200px sem pausa. */
.secao {
  padding-block: var(--respiro, var(--s12));
}

.secao-ampla {
  --respiro: var(--s16);
}

.secao-compacta {
  --respiro: var(--s8);
}

.secao-tint {
  background: var(--tint);
}

.secao-papel {
  background: var(--papel);
}

.escuro {
  background: var(--escuro);
  color: var(--claro);
}

.escuro h2,
.escuro h3 {
  color: var(--claro);
}

.escuro .lead {
  color: var(--claro-suave);
}

/* eyebrow — filete + rótulo mono no início de cada seção */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-family: var(--dados);
  font-size: var(--fs-100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ipe);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--ipe);
}

.escuro .eyebrow {
  color: var(--ipe-claro);
}

.escuro .eyebrow::before {
  background: var(--ipe-claro);
}

.cabecalho-secao {
  max-width: 62ch;
  margin-bottom: var(--s8);
}

.cabecalho-secao .lead {
  margin-top: var(--s3);
}

/* =========================================================================
   5. BOTÕES
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 0 var(--s4);
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--corpo);
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao);
}

.btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.btn-primario {
  background: var(--acao);
  color: var(--claro);
}

.btn-primario:hover {
  background: var(--acao-forte);
}

/* Dentro da hero o botão está sobre fundo escuro (--acao e --escuro são a
   mesma cor bronze) — sem isto ele desaparece no próprio fundo. Inverte:
   preenchimento marfim, texto escuro, como metal claro contra a parede
   escura, em vez de reeditar --acao só para este caso. */
.hero .btn-primario {
  background: var(--claro);
  color: var(--acao-forte);
}

.hero .btn-primario:hover {
  background: var(--tint);
}

.btn-linha {
  border-color: var(--linha-forte);
  background: var(--branco);
  color: var(--tinta);
}

.btn-linha:hover {
  border-color: var(--acao);
  color: var(--acao-forte);
}


.btn-linha-clara {
  border-color: var(--linha-escura-forte);
  color: var(--claro);
}

.btn-linha-clara:hover {
  border-color: var(--ipe-claro);
  background: rgba(255, 255, 255, 0.06);
}

.grupo-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* link discreto de WhatsApp dentro de cards e painéis */
/* --acao agora é a própria placa (fundo escuro de botão), não serve mais
   como cor de texto de link — nesse papel quem sinaliza "isto é
   interativo" é o latão, o mesmo acento do eyebrow e do rótulo da faixa. */
.link-zap {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  font-family: var(--dados);
  font-size: var(--fs-200);
  color: var(--ipe);
  text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
  transition: border-color var(--transicao), color var(--transicao);
}

.link-zap .seta {
  display: inline-block;
  transition: transform var(--transicao);
}

.link-zap:hover {
  color: var(--tinta);
  border-bottom-color: var(--ipe);
}

.link-zap:hover .seta {
  transform: translateX(3px);
}

.escuro .link-zap {
  color: var(--ipe-claro);
  border-bottom-color: var(--linha-escura-forte);
}

.escuro .link-zap:hover {
  color: var(--claro);
  border-bottom-color: var(--ipe-claro);
}

/* =========================================================================
   6. CREDENCIAIS
   Substitui o antigo "selo": a caixa com barra escura, separadores tracejados
   e rodapé tintado pesava demais para o que é, essencialmente, uma lista de
   dois campos. Aqui a credencial é tipografia sobre fundo escuro, alinhada em
   colunas, sem moldura.
   ========================================================================= */

.credenciais {
  padding-bottom: var(--s8);
  margin-bottom: var(--s8);
  border-bottom: 1px solid var(--linha-escura);
}

.credenciais-grade {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s10);
  align-items: start;
}

.credenciais h2 {
  margin-bottom: var(--s3);
  font-family: var(--dados);
  font-size: var(--fs-100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ipe-claro);
}

.credenciais-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s2);
  border-top: 1px solid var(--linha-escura);
}

.credenciais-linha:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.credenciais-linha dt {
  font-size: var(--fs-300);
  color: var(--claro-suave);
}

.credenciais-linha dd {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--claro);
  text-align: right;
}

.credenciais-nota {
  max-width: none;
  margin-top: var(--s3);
  font-size: var(--fs-200);
  color: var(--claro-suave);
}

/* Registro profissional no rodapé recebe o mesmo tratamento de placa da
   hero — é a mesma credencial, e a assinatura do site só faz sentido se
   for o mesmo objeto reaparecendo, não uma variação a cada lugar. */
.credenciais-registro {
  background: var(--escuro-fundo);
  border: 1px solid var(--ipe);
  padding: var(--s3) var(--s4);
  margin: 0;
}

.credenciais-registro .credenciais-linha {
  grid-template-columns: 10ch 13ch 10ch;
  gap: var(--s2);
  border-top-color: var(--linha-escura);
}

.credenciais-registro dd {
  text-align: left;
}

/* linha de credencial compacta, usada no box do autor dos artigos.
   Mostra CRM/RQE — mesmo papel de dado de registro do resto do sistema,
   então usa a mesma fonte de dados, não herda a Montserrat do corpo. */
.credencial-linha {
  margin-top: var(--s2);
  font-family: var(--dados);
  font-size: var(--fs-200);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--tinta);
}

.credencial-linha span {
  color: var(--tinta-suave);
  font-weight: 400;
}

/* =========================================================================
   7. CARDS
   ========================================================================= */

.grade {
  display: grid;
  gap: var(--s4);
}

.grade-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grade-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  transition: border-color var(--transicao), transform var(--transicao);
}

.card:hover {
  border-color: var(--acao);
}

.card h3 + p {
  margin-top: calc(var(--s2) * -1 + var(--s1));
}

.card p {
  color: var(--tinta-suave);
  font-size: var(--fs-300);
}

/* lista com marcador de filete */
.lista-filete li {
  position: relative;
  padding-left: var(--s3);
  font-size: var(--fs-300);
  color: var(--tinta-suave);
}

.lista-filete li + li {
  margin-top: var(--s1);
}

.lista-filete li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 12px;
  height: 1px;
  background: var(--ipe);
}

.escuro .lista-filete li {
  color: var(--claro-suave);
}

.escuro .lista-filete li::before {
  background: var(--ipe-claro);
}

.card-pe {
  margin-top: auto;
  padding-top: var(--s1);
}

/* chips de diagnóstico */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.chips li {
  padding: 6px var(--s2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--tint);
  font-family: var(--dados);
  font-size: var(--fs-200);
  color: var(--tinta-suave);
}

/* =========================================================================
   8. AVISO DE URGÊNCIA
   ========================================================================= */

/* A moldura de 2px em volta de tudo dava peso de alerta de sistema. O destaque
   agora vem de um filete superior e de um fundo tintado — continua sendo o
   elemento mais marcado da seção, sem parecer uma caixa de erro. */
.aviso {
  padding: var(--s4) var(--s5);
  border-top: 3px solid var(--ipe);
  background: var(--tint);
}

.aviso-rotulo {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--dados);
  font-size: var(--fs-100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ipe);
}

.aviso p {
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--tinta);
}

.aviso p + p {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--linha-forte);
}

.aviso b {
  font-weight: 700;
}

.escuro .aviso {
  border-top-color: var(--ipe-claro);
  background: rgba(255, 255, 255, 0.05);
}

.escuro .aviso-rotulo {
  color: var(--ipe-claro);
}

.escuro .aviso p {
  color: var(--claro);
}

.escuro .aviso p + p {
  border-top-color: var(--linha-escura);
}

/* =========================================================================
   9. HEADER
   ========================================================================= */

.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--altura-header);
}

/* A marca nunca encolhe nem quebra linha. Espremer o nome do médico para caber
   o menu é o pior negócio possível no topo da página. */
.marca {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  text-decoration: none;
  margin-right: auto;
}

/* símbolo da marca — dourado sobre qualquer superfície, sem recorte de fundo.
   A arte tem muito ar interno (o arco da cabeça), então o tamanho ótico é
   menor que a caixa: 66px equilibra com o nome em 1.3rem. */
.marca-simbolo {
  flex: none;
  width: auto;
  height: 54px;
  object-fit: contain;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.marca-nome,
.marca-credencial {
  white-space: nowrap;
}

.marca-nome {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--tinta);
  letter-spacing: -0.01em;
}

.marca-credencial {
  font-family: var(--dados);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-suave);
}

.marca-credencial b {
  font-weight: 500;
  color: var(--ipe);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s1);
  font-size: var(--fs-300);
  line-height: 1;
  white-space: nowrap; /* nenhum item do menu quebra em duas linhas */
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}

.nav a:hover {
  color: var(--tinta);
  border-bottom-color: var(--ipe);
}

.nav a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--ipe);
}

.hamburguer {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--tinta);
}

/* =========================================================================
   10. HERO
   ========================================================================= */

/* A hero é a primeira coisa que a página mostra, e agora abre no registro
   escuro — a parede onde a placa fica montada, não um gradiente claro. */
.hero {
  padding-block: var(--s10) var(--s10);
  background: linear-gradient(180deg, var(--escuro) 0%, var(--escuro-fundo) 100%);
  color: var(--claro);
}

/* o retrato acompanha a altura da coluna de texto, em vez de flutuar menor
   ao lado dela — é o que equilibra o peso dos dois lados */
/* A figura é de corpo inteiro e naturalmente alta; o texto é curto. Esticar as
   duas colunas à mesma altura abria ~360px de vazio na coluna de texto. Agora
   a figura define a altura, o texto se centra nela, e a figura foi contida
   para que a sobra fique proporcional em vez de escancarada. */
.hero-grade {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--s8);
  align-items: center;
}

.hero-conteudo {
  display: flex;
  flex-direction: column;
}

.hero h1 {
  margin-bottom: var(--s3);
  color: var(--claro);
  text-wrap: pretty;
}

.hero-sub {
  display: inline-block;
  margin-bottom: var(--s4);
  font-family: var(--dados);
  font-size: var(--fs-300);
  color: var(--claro-suave);
}

.hero-sub b {
  font-weight: 500;
  color: var(--ipe-claro);
}

.hero .lead {
  margin-bottom: var(--s6);
  color: var(--claro-suave);
}

.hero .grupo-btn {
  margin-bottom: 0;
}

.hero-figura {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  min-height: 600px;
}

/* Retrato sentado, de frente: orientação natural, sem espelhar. Altura própria
   (não 100%), para a foto não ser ampliada além do tamanho real quando a coluna
   de texto fica mais alta — era o que a deixava grande e mal enquadrada. */
.hero-retrato {
  position: relative;
  width: auto;
  height: auto;
  max-height: 480px;
  max-width: 100%;
  object-fit: contain;
}

/* =========================================================================
   11. FAIXA DE CREDENCIAIS
   ========================================================================= */

/* Esta faixa carrega USP, UFG e 20 anos de prática — a prova mais forte que o
   site tem, e a única permitida pela CFM. Ela roda em pergaminho, não em
   escuro: é o degrau claro logo abaixo da hero, a transição do registro
   escuro para o claro do restante da página. */
.faixa {
  padding-block: var(--s8);
  background: var(--papel);
}

.faixa ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.faixa li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: var(--s3);
  border-left: 1px solid var(--linha-forte);
  line-height: 1.25;
}

.faixa li b {
  display: block;
  order: -1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.faixa li span {
  font-size: var(--fs-200);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipe);
}

/* =========================================================================
   12. SERVIÇOS
   Livro de registro, não cards com ícone — dois modos de atendimento lado
   a lado, separados por uma regra, cada um com um rótulo em latão em vez
   de um ícone genérico de clínica.
   ========================================================================= */

.registro-servicos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--tint);
  border: 1px solid var(--linha-forte);
}

.registro-item {
  padding: var(--s6);
}

.registro-item + .registro-item {
  border-left: 1px solid var(--linha-forte);
}

.registro-item .micro {
  color: var(--ipe);
  margin-bottom: var(--s2);
}

.registro-item h3 {
  margin-bottom: 4px;
}

.registro-onde {
  max-width: none;
  font-size: var(--fs-300);
  color: var(--tinta-suave);
  margin-bottom: var(--s4);
}

.registro-item .lista-filete {
  margin-bottom: var(--s5);
}

.registro-item .card-pe {
  margin: 0;
}

/* =========================================================================
   13. COMO É A CONSULTA
   ========================================================================= */

.consulta-grade {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--s10);
  align-items: start;
}

.consulta-titulo {
  position: sticky;
  top: calc(var(--altura-header) + var(--s5));
}

.passos {
  border-left: 1px solid var(--linha-escura-forte);
}

.passo {
  position: relative;
  padding-left: var(--s5);
  padding-bottom: var(--s8);
}

.passo:last-child {
  padding-bottom: 0;
}

.passo::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ipe-claro);
}

.passo-num {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--dados);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  color: var(--ipe-claro);
}

.passo h3 {
  margin-bottom: var(--s1);
}

.passo p {
  color: var(--claro-suave);
  font-size: var(--fs-300);
}

/* =========================================================================
   14. ACCORDIONS
   ========================================================================= */

.accordion {
  border-top: 1px solid var(--linha);
}

.accordion-item {
  border-bottom: 1px solid var(--linha);
}

.accordion-gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: 64px;
  padding-block: var(--s3);
  text-align: left;
  font-family: var(--display);
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: 1.3;
  color: var(--tinta);
  transition: color var(--transicao);
}

.accordion-gatilho:hover {
  color: var(--acao-forte);
}

.accordion-sinal {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.accordion-sinal::before,
.accordion-sinal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ipe);
  transform: translate(-50%, -50%);
  transition: opacity var(--transicao), transform var(--transicao);
}

.accordion-sinal::before {
  width: 16px;
  height: 2px;
}

.accordion-sinal::after {
  width: 2px;
  height: 16px;
}

.accordion-gatilho[aria-expanded="true"] .accordion-sinal::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-painel {
  display: none;
  padding-bottom: var(--s5);
}

.accordion-painel.aberto {
  display: block;
}

.accordion-painel > * + * {
  margin-top: var(--s3);
}

.accordion-painel p {
  color: var(--tinta-suave);
  font-size: var(--fs-300);
}

/* bloco "Também faço" */
.tambem {
  margin-top: var(--s8);
  padding-left: var(--s3);
  border-left: 1px solid var(--linha-forte);
}

.tambem h3 {
  font-size: var(--fs-300);
  font-family: var(--corpo);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.tambem ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
}

.tambem li {
  font-size: var(--fs-300);
  color: var(--tinta-suave);
}

/* =========================================================================
   15. SOBRE
   ========================================================================= */

.sobre-grade {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: var(--s10);
  align-items: start;
}

.sobre-figura {
  margin: 0;
}

.sobre-figura img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio-g);
}

.sobre-texto > p + p {
  margin-top: var(--s3);
}

.sobre-texto .selo {
  margin-top: var(--s6);
}

/* =========================================================================
   16. CONTATO
   ========================================================================= */

.contato-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s10);
  align-items: start;
}

.contato-dl {
  margin-bottom: var(--s6);
}

.contato-dl > div + div {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--linha-escura);
}

.contato-dl dt {
  margin-bottom: var(--s1);
  font-family: var(--dados);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ipe-claro);
}

.contato-dl dd {
  font-size: var(--fs-500);
  color: var(--claro);
}

/* alvo de toque de 44px sem descolar o sublinhado do texto:
   text-decoration acompanha a linha, a caixa cresce por baixo */
.contato-dl dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--linha-escura-forte);
  transition: text-decoration-color var(--transicao);
}

.contato-dl dd a:hover {
  text-decoration-color: var(--ipe-claro);
}

.contato-dl .nota {
  margin-top: var(--s1);
  font-size: var(--fs-300);
  color: var(--claro-suave);
}

/* =========================================================================
   17. FOOTER
   ========================================================================= */

.rodape {
  padding-block: var(--s10) var(--s6);
  background: var(--escuro-fundo);
  color: var(--claro-suave);
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s8);
  padding-bottom: var(--s8);
}

/* a marca no rodapé fica sobre fundo escuro, que é o contexto nativo dela */
.rodape-marca {
  width: auto;
  height: 152px;
  margin-bottom: var(--s2);
  object-fit: contain;
}

.rodape h2,
.rodape h3 {
  margin-bottom: var(--s3);
  font-family: var(--corpo);
  font-size: var(--fs-100);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--claro);
}

.rodape-nav li + li {
  margin-top: var(--s1);
}

.rodape a {
  color: var(--claro-suave);
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape a:hover {
  color: var(--claro);
}

.rodape-nav a,
.rodape-inst a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-300);
}

.rodape-inst .btn {
  margin-top: var(--s2);
}

.rodape-legal {
  padding-top: var(--s6);
  border-top: 1px solid var(--linha-escura);
  font-family: var(--dados);
  font-size: var(--fs-100);
  line-height: 1.8;
  color: var(--claro-suave);
}

.rodape-legal p {
  max-width: none;
}

.rodape-credito {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--linha-escura);
  font-family: var(--dados);
  font-size: var(--fs-100);
  line-height: 1.8;
  color: var(--claro-suave);
}

.rodape-credito a {
  border-bottom: 1px solid var(--linha-escura-forte);
}

/* =========================================================================
   18. BOTÃO FLUTUANTE E MODAL
   ========================================================================= */

.flutuante {
  display: none;
  position: fixed;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  z-index: 90;
  min-height: 52px;
  box-shadow: 0 6px 20px rgba(15, 46, 42, 0.22);
}

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--s3);
}

.modal-fundo {
  position: absolute;
  inset: 0;
  background: rgba(10, 33, 30, 0.6);
}

.modal-caixa {
  position: relative;
  width: min(680px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--s6);
  background: var(--branco);
  border-radius: var(--raio-g);
}

.modal-caixa h2 {
  font-size: var(--fs-600);
  margin-bottom: var(--s3);
  padding-right: var(--s6);
}

.modal-caixa h3 {
  margin-top: var(--s4);
  margin-bottom: var(--s1);
  font-family: var(--corpo);
  font-size: var(--fs-300);
  font-weight: 600;
}

.modal-caixa p {
  font-size: var(--fs-300);
  color: var(--tinta-suave);
}

.modal-caixa p + p {
  margin-top: var(--s2);
}

.modal-fechar {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--tinta);
  transition: border-color var(--transicao);
}

.modal-fechar:hover {
  border-color: var(--acao);
}

/* =========================================================================
   19. REVEAL
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transicao-reveal), transform var(--transicao-reveal);
  transition-delay: var(--atraso, 0ms);
}

.reveal.visivel {
  opacity: 1;
  transform: none;
}

/* sem JS, nada fica escondido */
.sem-js .reveal {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   20. RESPONSIVO
   ========================================================================= */

@media (max-width: 1200px) {
  .faixa ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Com Montserrat o menu ocupa ~585px e a marca ~275px; somados ao CTA e às
   folgas, o header cabe inteiro a partir de ~940px — o botão de agendamento
   saiu do topo e liberou o espaço que forçava o painel a entrar antes. */
@media (max-width: 940px) {
  .hamburguer {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: var(--altura-header) 0 auto 0;
    display: none;
    padding: var(--s3) var(--s3) var(--s5);
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
    max-height: calc(100vh - var(--altura-header));
    overflow-y: auto;
  }

  .nav.aberto {
    display: block;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav li + li {
    border-top: 1px solid var(--linha);
  }

  .nav a {
    min-height: 52px;
    width: 100%;
    border-bottom: 0;
    border-left: 2px solid transparent;
    padding-left: var(--s2);
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    border-bottom-color: transparent;
    border-left-color: var(--ipe);
  }
}

@media (max-width: 900px) {
  :root {
    --altura-header: 72px;
  }

  .secao {
    padding-block: var(--s10);
  }

  .hero {
    padding-block: var(--s8) var(--s10);
  }

  .hero-grade,
  .consulta-grade,
  .sobre-grade,
  .contato-grade {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .hero-figura {
    order: -1;
    width: 100%;
    max-width: 340px;
    min-height: 0;
    margin-inline: auto;
  }

  .hero-retrato {
    height: auto;
    max-height: 520px;
  }

  .sobre-figura {
    max-width: 320px;
  }

  .consulta-titulo {
    position: static;
  }

  .grade-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape-grade {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }

  .rodape-marca {
    height: 124px;
  }

  .credenciais-grade {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .flutuante {
    display: inline-flex;
  }

  body {
    padding-bottom: calc(52px + var(--s6));
  }
}

@media (max-width: 640px) {
  :root {
    --fs-400: 1rem;
  }

  /* a quebra fixa do título só vale no desktop; no estreito ele quebra sozinho */
  .hero h1 br {
    display: none;
  }

  /* as colunas fixas em em (CRM/RQE) não cabem mais com o padding da placa
     do rodapé abaixo de 640px — empilha em vez de estourar a largura */
  .credenciais-registro .credenciais-linha {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .credenciais-registro dd {
    text-align: left;
  }

  .marca-simbolo {
    width: auto;
    height: 42px;
  }

  .marca-nome {
    font-size: 1.12rem;
  }

  .secao {
    padding-block: var(--s8);
  }

  .container {
    padding-inline: var(--s2);
  }

  .grade-2,
  .grade-3 {
    grid-template-columns: 1fr;
  }

  .registro-servicos {
    grid-template-columns: 1fr;
  }

  .registro-item + .registro-item {
    border-left: 0;
    border-top: 1px solid var(--linha-forte);
  }

  .faixa ul {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .card {
    padding: var(--s4);
  }

  .selo,
  .selo-mini {
    max-width: 100%;
  }

  .rodape-grade {
    grid-template-columns: 1fr;
  }

  .rodape-marca {
    height: 108px;
  }

  .modal-caixa {
    padding: var(--s4);
  }

  .cabecalho-secao {
    margin-bottom: var(--s6);
  }
}

/* =========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}