/* =========================================================================
   Lívia Rennó · reumatologia · folha única, gerada por gerar.py
   1 tokens · 2 reset · 3 base · 4 layout · 5 componentes · 6 utilitários
   7 media queries
   ========================================================================= */

/* 1 · TOKENS =========================================================== */
:root {
  /* cor · paleta trocada em 30/07/2026, a pedido da Ana, a partir de
     elderhaven-wcopilot.webflow.io. Extraída da página ao vivo por área
     ocupada na tela, não do CSS: creme frio 61,7% do fundo, marrom quente
     46,4% do texto, laranja queimado como acento.
     O taupe e o laranja crus reprovavam contraste (3,92:1 e 4,00:1 contra
     piso de 4,5). Foram escurecidos 12% e 11% de luminosidade em HLS, que
     preserva matiz e croma: laranja continua laranja. Os nove pares passam. */
  --papel: #F4F1EB;          /* creme frio */
  --papel-2: #F6E7DC;        /* pêssego das ondas orgânicas da referência */
  --papel-suave: #EFE0D3;
  --tinta: #260A00;          /* marrom quase preto, muito quente */
  --tinta-suave: #70685B;    /* taupe escurecido para passar 4,55:1 */
  --marca: #B34800;          /* laranja queimado escurecido para 4,52:1 */
  --marca-profunda: #3A1206; /* escuro quente das faixas sangradas */
  --borda: color-mix(in oklab, var(--tinta) 14%, var(--papel));
  --borda-clara: color-mix(in oklab, var(--papel) 24%, var(--marca-profunda));
  --realce: color-mix(in oklab, var(--papel-2) 62%, var(--papel));
  --sombra: 0 1px 2px oklch(0.24 0.05 45 / 0.16),
            0 14px 32px -14px oklch(0.24 0.05 45 / 0.16);

  /* tipografia */
  --fonte-display: "Piazzolla", serif;
  --fonte-corpo: "Commissioner", sans-serif;
  --fs-h1: clamp(2.4rem, 6.2vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 3.6vw, 2.7rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.55rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-corpo: 1.0625rem;
  --fs-menu: 0.9375rem;
  --fs-legenda: 0.875rem;
  --fs-num: 0.8125rem;
  --medida: 68ch;

  /* espaço · escala 4pt */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-9: 96px;
  --espaco-10: 128px;
  --pad-lateral: clamp(20px, 5vw, 64px);
  --largura: 1200px;
  --altura-cabecalho: 68px;
  --secao-y: clamp(48px, 6.5vw, 96px);

  /* a célula, única pontuação do site.
     --celula é TETO, não tamanho fixo: as colunas da malha são minmax(0, teto)
     e encolhem com o contêiner, então a mesma marcação serve à assinatura do
     hero (teto 46px), à figura de instrução da consulta (14px) e às
     mini-malhas de padrão das condições (26px). */
  --celula: 14px;
  --celula-vao: 5px;
  --celula-ponto: 6px;

  /* movimento */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --dur-sai: 150ms;
  --dur-entra: 210ms;
  --dur-move: 400ms;
  --dur-reveal: 640ms;

  /* preenchimento do diário · o atraso de cada célula é o número do dia vezes
     --passo-dia, então o padrão do quadro vira ritmo no tempo, e não só desenho
     no espaço. --atraso-malha é o silêncio antes do primeiro dia, para a malha
     não preencher em cima da entrada do bloco que a carrega. */
  --passo-dia: 12ms;
  --atraso-malha: 100ms;
  --dur-celula: 320ms;
}

/* 2 · RESET ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + var(--espaco-5));
  /* declarada também na raiz: durante a transição entre páginas o retrato novo
     entra deslocado, e o que aparece atrás dele por um instante precisa ser
     papel, não o branco padrão da tela do navegador. */
  background-color: var(--papel);
}
body {
  min-height: 100dvh;
  overflow-x: clip;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: 1.72;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

/* grão · material estático, fixo, sem captura de ponteiro */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .035;
  background-image: url("assets/grao.svg?v=20260730");
  background-size: 180px 180px;
}

/* 3 · BASE ============================================================= */
h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; }
.linha-h1 { display: block; }
/* palavra do H1 do hero · inline-block com nowrap, senão ela se parte no meio
   da linha quando ganha transform. Nasce visível: a animação só existe sob o
   guard .js, mais abaixo. */
.palavra { display: inline-block; white-space: nowrap; }
p { text-wrap: pretty; }
.acao { display: grid; gap: var(--espaco-3); justify-items: start; }
.lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 60ch; }
.lead--claro { color: var(--papel); }
.apoio {
  font-size: var(--fs-legenda);
  color: var(--tinta-suave);
  max-width: 52ch;
}
.apoio--claro { color: var(--papel-suave); }
.legenda {
  font-size: var(--fs-legenda);
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 46ch;
}
.nota {
  font-size: var(--fs-legenda);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 60ch;
}
.nota--clara { color: var(--papel-suave); }
.rotulo { color: var(--marca); font-weight: 600; }
.icone { flex: none; }

/* 4 · LAYOUT =========================================================== */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}
.secao { padding-block: var(--secao-y); }
.secao--topo { padding-top: calc(var(--altura-cabecalho) + var(--secao-y)); }
.secao--painel { background-color: var(--papel-2); }
.secao--painel .celula--vazia { background-color: var(--borda); }
.bloco-estreito { max-width: 46rem; display: grid; gap: var(--espaco-5); }
.bloco-figura { display: grid; }

/* hero */
.hero {
  padding-top: calc(var(--altura-cabecalho) + var(--espaco-6));
  padding-bottom: var(--secao-y);
}
.hero-grade { display: grid; gap: var(--espaco-6); }
.hero-texto { display: grid; gap: var(--espaco-5); justify-items: start; }

/* faixas sangradas em cor sólida */
.faixa {
  padding-block: clamp(48px, 7vw, 96px);
  background-color: var(--marca-profunda);
  color: var(--papel);
}
.faixa-corpo { display: grid; gap: var(--espaco-5); justify-items: start; }
.faixa-corpo h2 { max-width: 26ch; }
.faixa--tese .lead { max-width: 62ch; }

/* dois blocos lado a lado a partir de 900px */
.duo { display: grid; gap: var(--espaco-7); }
.duo-texto { display: grid; gap: var(--espaco-4); align-content: start; }
.duo-texto p { max-width: var(--medida); }
.duo-texto h2, .duo-texto h1 { margin-bottom: var(--espaco-4); }

/* quebras de margem · as duas crises do ritmo */
.quebra-bloco {
  display: grid;
  gap: var(--espaco-4);
  padding: var(--espaco-6) var(--espaco-5);
  background-color: var(--papel-2);
  box-shadow: var(--sombra);
}
.quebra-bloco h2 { max-width: 24ch; margin-bottom: var(--espaco-2); }
.quebra-bloco p { max-width: var(--medida); }

/* 5 · COMPONENTES ====================================================== */

/* pular para o conteúdo */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
}
.pular:focus {
  position: fixed;
  left: var(--espaco-4);
  top: var(--espaco-4);
  z-index: 1100;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espaco-3) var(--espaco-4);
  background-color: var(--marca);
  color: var(--papel);
  font-weight: 500;
}

/* cabeçalho · fundo sólido quase opaco ao rolar, sem filtro e sem transform */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-entra) var(--ease-out-cubic),
              border-color var(--dur-entra) var(--ease-out-cubic);
}
.cabecalho[data-scrolled="true"] {
  background-color: color-mix(in oklab, var(--papel) 96%, transparent);
  border-bottom-color: var(--borda);
}
.cabecalho-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: var(--altura-cabecalho);
}
.marca-site {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-principal { display: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  position: relative;
  min-height: 44px;
  padding-inline: 2px;
  font-size: var(--fs-menu);
  font-weight: 500;
  white-space: nowrap;
}
.nav-link[aria-current="page"] { font-weight: 600; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background-color: var(--marca);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-entra) var(--ease-out-cubic);
}
.nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:focus-visible .celula { background-color: var(--marca); }
.cabecalho-acoes { display: flex; align-items: center; gap: var(--espaco-3); }
.menu-abre,
.menu-fecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

/* a célula de 6px · única pontuação do site */
.celula {
  width: var(--celula-ponto);
  height: var(--celula-ponto);
  flex: none;
  border-radius: 1px;
  background-color: var(--marca);
  transition: background-color var(--dur-sai) var(--ease-out-cubic);
}
.celula--vazia { background-color: var(--papel-2); }

/* menu mobile fullscreen · fora do header no DOM */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-7);
  padding: var(--espaco-4) var(--pad-lateral) var(--espaco-8);
  overflow-y: auto;
  background-color: var(--marca-profunda);
  color: var(--papel);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-sai) var(--ease-out-cubic),
              visibility 0s linear var(--dur-sai);
}
.menu-mobile[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms var(--ease-out-quint), visibility 0s linear 0s;
}
.menu-mobile-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: var(--altura-cabecalho);
}
.menu-mobile-marca {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 1.25rem;
}
.menu-mobile-nav ul {
  display: grid;
  gap: var(--espaco-2);
  border-top: 1px solid var(--borda-clara);
}
/* itens do menu em cascata curta. Abrir e fechar o menu é ação repetida na
   mesma visita, então o passo é de 32ms e a saída é quase instantânea: o
   pedágio se paga toda vez, e menu lento lê como site travado.
   A ocultação depende do atributo do painel, não do script: sem JavaScript o
   painel inteiro sai de cena por display: none, e nada disso se aplica. */
.menu-mobile-item {
  border-bottom: 1px solid var(--borda-clara);
  transition: opacity 140ms var(--ease-out-cubic),
              transform 140ms var(--ease-out-cubic);
}
.menu-mobile[data-open="false"] .menu-mobile-item {
  opacity: 0;
  transform: translateY(10px);
}
.menu-mobile[data-open="true"] .menu-mobile-item {
  opacity: 1;
  transform: none;
  transition-duration: 240ms;
  transition-delay: calc(var(--i, 0) * 32ms);
}
.menu-mobile-acao {
  display: grid;
  gap: var(--espaco-3);
  justify-items: start;
  border: 0;
}
.menu-mobile-link {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: 56px;
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  line-height: 1.2;
}
.menu-mobile-link .celula--vazia {
  background-color: color-mix(in oklab, var(--papel) 34%, var(--marca-profunda));
}
.menu-mobile-link[aria-current="page"] .celula { background-color: var(--papel); }
.menu-mobile-link:focus-visible { outline-color: var(--papel); }
.menu-fecha:focus-visible { outline-color: var(--papel); }

/* botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 48px;
  padding: var(--espaco-3) var(--espaco-5);
  border-radius: 2px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
  touch-action: manipulation;
  transition: background-color var(--dur-sai) var(--ease-out-cubic),
              color var(--dur-sai) var(--ease-out-cubic),
              transform 120ms var(--ease-out-cubic);
}
.botao--primario { background-color: var(--marca); color: var(--papel); }
.botao--claro { background-color: var(--papel); color: var(--tinta); }
.botao--compacto {
  min-height: 44px;
  padding: var(--espaco-2) var(--espaco-4);
  font-size: var(--fs-menu);
}
.botao:active { transform: scale(0.98); }
.botao--claro:focus-visible { outline-color: var(--papel); }
/* depois de .botao, senão o display do botão vence e o CTA aparece no mobile */
.botao--cabecalho { display: none; }

/* links editoriais de texto */
.link-editorial {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  margin-top: var(--espaco-2);
  color: var(--marca);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--borda);
  transition: text-decoration-color var(--dur-sai) var(--ease-out-cubic),
              color var(--dur-sai) var(--ease-out-cubic);
}

/* malha dos 56 dias · fluida: cresce até o teto --celula e encolhe com a coluna */
.diario { display: grid; gap: var(--espaco-4); max-width: 100%; min-width: 0; }
.diario .legenda { max-width: 26rem; }
.diario-corpo { display: flex; gap: var(--espaco-3); min-width: 0; }
.diario-malha {
  display: grid;
  /* minmax(0, teto): a coluna nunca passa do teto e pode encolher até caber,
     então a malha não estoura a tela nem em 320px. A altura vem do
     aspect-ratio da célula, senão a linha ficaria presa ao teto. */
  grid-template-columns: repeat(7, minmax(0, var(--celula)));
  gap: var(--celula-vao);
  flex: 0 1 auto;
  min-width: 0;
}
.diario-celula {
  aspect-ratio: 1;
  border-radius: 1px;
  background-color: var(--papel-2);
}
.diario-celula--marcada { background-color: var(--marca); }
.diario-semanas {
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: var(--celula-vao);
  flex: none;
  font-size: var(--fs-num);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  color: var(--tinta-suave);
}
.diario-cartao {
  justify-self: start;
  padding: var(--espaco-5);
  background-color: var(--papel);
  box-shadow: var(--sombra);
}
/* assinatura: no hero a malha é o maior elemento da página, não um selo.
   Em 390 o teto de 46px é maior que a coluna, então ela vira bloco de
   largura total; a partir de 900 ela ocupa a coluna de 4fr até o teto. */
/* o hero preenche devagar, dia a dia: 56 dias a 22ms dão pouco mais de um
   segundo e meio de diário sendo marcado. É o único lugar do site que se dá
   esse tempo, e nenhum texto espera por ele. */
.diario--hero {
  --celula: 46px;
  --passo-dia: 22ms;
  --atraso-malha: 320ms;
  --dur-celula: 420ms;
}
.diario--hero .legenda { max-width: 24rem; }
/* figura de instrução da consulta: --celula segue em 14px, o teto do :root */

/* mini-malha de padrão, uma por condição: informa a diferença entre os
   quadros, e por isso repete a gramática do hero em escala menor.
   O atraso base espera a figura terminar de entrar antes do primeiro dia. */
.diario--mini {
  --celula: 26px;
  --passo-dia: 16ms;
  --atraso-malha: 240ms;
  --dur-celula: 360ms;
  gap: var(--espaco-3);
}
.diario--mini .legenda { max-width: 24rem; }
.diario-bloco { display: grid; gap: var(--espaco-6); margin-top: var(--espaco-6); }
/* filho de grid com mídia dentro sempre com min-width: 0, senão o min-content estoura */
.diario-bloco > *, .duo > *, .hero-grade > *, .condicao-grade > *,
.atendimento > * { min-width: 0; }
.diario-texto { display: grid; gap: var(--espaco-4); }
.diario-texto p { max-width: var(--medida); }

/* lista editorial · substitui a grade de cards */
.lista-editorial { margin-top: var(--espaco-6); border-top: 1px solid var(--borda); }
.lista-editorial > li { border-bottom: 1px solid var(--borda); }
.linha-editorial {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-5) var(--espaco-2);
  min-height: 44px;
  transition: background-color var(--dur-sai) var(--ease-out-cubic);
}
.linha-num {
  font-size: var(--fs-legenda);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}
.linha-corpo { grid-column: 1 / -1; display: grid; gap: var(--espaco-1); }
.linha-nome {
  position: relative;
  display: inline-block;
  font-family: var(--fonte-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
.linha-nome::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: var(--marca);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-entra) var(--ease-out-cubic);
}
.linha-situacao { font-size: var(--fs-legenda); color: var(--tinta-suave); }
.linha-ver {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  grid-column: 1 / -1;
  font-size: var(--fs-legenda);
  font-weight: 500;
  color: var(--marca);
}
.linha-editorial:focus-visible .celula { background-color: var(--marca); }
.linha-editorial:focus-visible .linha-nome::after { transform: scaleX(1); }

/* lista com a célula no lugar do bullet */
.lista-marcada { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-6); }
.lista-marcada li {
  display: grid;
  grid-template-columns: var(--celula-ponto) 1fr;
  align-items: baseline;
  gap: var(--espaco-4);
  padding-bottom: var(--espaco-3);
  border-bottom: 1px solid var(--borda);
  max-width: var(--medida);
}
.lista-marcada .celula { transform: translateY(0.55em); }
.lista-marcada + .nota { margin-top: var(--espaco-6); }

/* fotos */
.faixa-modelo {
  margin: 0;
  padding: 10px var(--pad-lateral);
  background-color: var(--marca-profunda);
  color: var(--papel);
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
  position: relative;
  z-index: 1100;   /* acima do cabecalho sticky, senao some ao rolar */
}
.figura { display: grid; gap: var(--espaco-3); }
/* Figura que respira largura própria, mais larga que a coluna de leitura.
   Entrou em 30/07/2026 para tirar Condições e Contato do zero imagem, achado
   do portão de crítica. Fica abaixo da coluna de texto, nunca ao lado. */
.figura-larga { margin-top: var(--espaco-7); }
.figura-larga .figura { max-width: 62rem; }
.moldura {
  position: relative;
  overflow: hidden;
  background-color: var(--papel-2);
  box-shadow: var(--sombra);
}
.moldura--43 { aspect-ratio: 4 / 3; }
.moldura--45 { aspect-ratio: 4 / 5; }
.moldura--32 { aspect-ratio: 3 / 2; }
.moldura img { width: 100%; height: 100%; object-fit: cover; }

/* passos numerados */
.passos { display: grid; gap: var(--espaco-8); }
.passo { display: grid; gap: var(--espaco-3); }
.passo-num {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--marca);
}
.passo-corpo { display: grid; gap: var(--espaco-4); }
.passo-corpo h2 { max-width: 26ch; }
.passo-corpo p { max-width: var(--medida); }

/* condições · zigue-zague com a mini-malha do padrão no lugar da placa */
.condicao { padding-block: var(--secao-y); border-top: 1px solid var(--borda); }
.condicao-grade { display: grid; gap: var(--espaco-6); }
.condicao-figura {
  display: grid;
  gap: var(--espaco-4);
  align-content: start;
  justify-items: start;
}
.condicao-num {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--marca);
}
.condicao-texto { display: grid; gap: var(--espaco-4); }
.condicao-texto h2 { margin-bottom: var(--espaco-2); max-width: 26ch; }
.condicao-texto p { max-width: var(--medida); }
.condicao-texto .botao { justify-self: start; margin-top: var(--espaco-3); }

/* FAQ · details nativo, funciona sem JavaScript */
.faq { margin-top: var(--espaco-6); border-top: 1px solid var(--borda); }
.faq-item { border-bottom: 1px solid var(--borda); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: 56px;
  padding-block: var(--espaco-4);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-pergunta { flex: 1; font-size: var(--fs-h3); }
.faq-sinal {
  display: inline-flex;
  color: var(--tinta-suave);
  transition: transform var(--dur-entra) var(--ease-out-cubic);
}
.faq-item[open] .faq-sinal { transform: rotate(180deg); }
.faq-item[open] summary .celula { background-color: var(--marca); }
.faq-resposta { padding-bottom: var(--espaco-5); max-width: var(--medida); }

/* painel de contato */
.atendimento { display: grid; gap: var(--espaco-7); }
.atendimento-lado { display: grid; gap: var(--espaco-6); align-content: start; }
.atendimento-aviso {
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--borda);
}
.painel-contato {
  display: grid;
  gap: var(--espaco-4);
  justify-items: start;
  padding: clamp(28px, 5vw, 56px);
  background-color: var(--marca-profunda);
  color: var(--papel);
}
.painel-numero {
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}
.atendimento-dados { display: grid; gap: var(--espaco-3); align-content: start; }
.atendimento-dados h3 { margin-top: var(--espaco-3); }

/* rodapé · claro de propósito: a escuridão é racionada, e a faixa CTA é o
   único bloco escuro do fim da página. Rodapé escuro colado na faixa fazia
   um terço da altura da página virar um bloco contínuo só. */
.rodape {
  padding-block: var(--espaco-8) var(--espaco-7);
  background-color: var(--papel-2);
  color: var(--tinta);
  border-top: 1px solid var(--borda);
}
.rodape-grade { display: grid; gap: var(--espaco-7); }
.rodape-nome {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: 1.25rem;
  margin-bottom: var(--espaco-3);
}
.rodape-nome .celula { background-color: var(--marca); }
.rodape-dados { font-size: var(--fs-legenda); line-height: 1.8; color: var(--tinta-suave); }
.rodape-navegacao ul { display: grid; gap: var(--espaco-1); }
.rodape-navegacao a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-menu);
  font-weight: 500;
}
.rodape-base {
  display: grid;
  gap: var(--espaco-4);
  margin-top: var(--espaco-7);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--borda);
}
.rodape-aviso {
  font-size: var(--fs-legenda);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 62ch;
}
.rodape-credito { font-size: var(--fs-legenda); color: var(--tinta); }

/* 6 · UTILITÁRIOS ====================================================== */
.sr-so {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* guard de JS: um seletor de classe só, sem o prefixo do elemento raiz, que
   subiria a especificidade e venceria a regra que revela.
   Sem JavaScript nada disso se aplica e a página nasce inteira. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out-quint),
              transform var(--dur-reveal) var(--ease-out-quint);
}
.reveal.visivel { opacity: 1; transform: none; }

/* preenchimento do diário · efeito assinatura.
   O atraso é o número do dia (--dia, escrito no HTML) vezes --passo-dia, e não
   a posição da marca na fila. Consequência, que é o motivo de existir: o tempo
   vazio entre duas crises vira pausa de verdade, então a artrite preenche numa
   corrida contínua e a artrose preenche aos tropeços. O padrão no tempo é o
   exame, e aqui ele é literalmente tempo. */
.js .diario-celula--marcada {
  opacity: 0;
  transform: scale(0.62);
  transition: opacity var(--dur-celula) var(--ease-out-cubic),
              transform var(--dur-celula) var(--ease-out-quint);
  transition-delay: calc(var(--atraso-malha) + var(--dia, 0) * var(--passo-dia));
}
.diario-celula--marcada.marcou { opacity: 1; transform: none; }

/* entrada do hero da Início · sequência predeterminada no load, por isso
   @keyframes e não transition: não responde a gesto nenhum. Acontece uma vez
   por visita, na primeira tela, que é o caso em que a regra de frequência
   autoriza o momento de encanto. */
.js .hero-titulo .palavra {
  opacity: 0;
  transform: translateY(0.36em);
  animation: entraPalavra 520ms var(--ease-out-quint) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.js .hero-texto > .lead,
.js .hero-texto > .acao {
  opacity: 0;
  animation: entraBloco 560ms var(--ease-out-quint) forwards;
}
.js .hero-texto > .lead { animation-delay: 300ms; }
.js .hero-texto > .acao { animation-delay: 400ms; }
@keyframes entraPalavra { to { opacity: 1; transform: none; } }
@keyframes entraBloco {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes apareceSuave { to { opacity: 1; transform: none; } }

/* profundidade no scroll · a malha do hero fica para trás da página. O script
   escreve --py; sem script, sem movimento reduzido e no celular o valor não
   existe e a malha simplesmente não anda. */
.diario--hero.tem-profundidade .diario-corpo {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* sem JavaScript o menu fullscreen sai de cena e o menu do topo se abre */
html:not(.js) .menu-mobile { display: none; }
html:not(.js) .menu-abre { display: none; }
html:not(.js) .cabecalho { position: static; }
html:not(.js) .nav-principal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  padding-bottom: var(--espaco-3);
}
html:not(.js) .cabecalho-linha { flex-wrap: wrap; }
html:not(.js) .secao--topo { padding-top: var(--secao-y); }

/* 7 · MEDIA QUERIES ==================================================== */
@media (min-width: 768px) {
  .linha-editorial {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: var(--espaco-5);
    padding-block: var(--espaco-6);
  }
  .linha-corpo { grid-column: auto; }
  .linha-ver { grid-column: auto; justify-content: flex-end; }
  .passo { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--espaco-5); }
  .passos--tres { gap: var(--espaco-7); }
  .rodape-grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .rodape-navegacao ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tablet: a malha do hero já bateu o teto de célula e sobra largura, então a
   legenda vai para o lado dela em vez de ficar num bloco solto embaixo */
@media (min-width: 620px) and (max-width: 899.98px) {
  .diario--hero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: var(--espaco-5);
  }
}

@media (min-width: 900px) {
  /* hero: 7fr / 4fr, malha à direita, subindo acima da linha do H1.
     A grade do hero larga o max-width do container e recompõe o alinhamento
     da esquerda com padding: assim a coluna de texto continua na mesma
     vertical do resto do site e a malha chega até a borda da tela. O padding
     da direita só volta a existir em tela muito larga, para a sangria não
     jogar a malha longe demais do texto. */
  .hero { padding-top: calc(var(--altura-cabecalho) + var(--espaco-8)); }
  .hero-grade {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--espaco-8);
    align-items: start;
    max-width: none;
    padding-left: max(var(--pad-lateral),
                      calc((100% - var(--largura)) / 2 + var(--pad-lateral)));
    padding-right: max(0px, calc((100% - var(--largura)) / 2 - 160px));
  }
  .hero-texto { grid-column: 1; grid-row: 1; }
  .diario--hero {
    grid-column: 2;
    grid-row: 1;
    margin-top: calc(-1 * var(--espaco-6));
  }
  .diario--hero .diario-corpo { justify-content: flex-end; }
  .diario--hero .legenda { margin-left: auto; margin-right: var(--pad-lateral); }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .duo--retrato { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .duo--retrato .duo-figura { position: sticky; top: calc(var(--altura-cabecalho) + var(--espaco-5)); }
  .condicao-grade {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: var(--espaco-8);
    align-items: start;
  }
  .condicao--par .condicao-grade {
    grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  }
  .condicao--par .condicao-figura { grid-column: 2; grid-row: 1; }
  .condicao--par .condicao-texto { grid-column: 1; grid-row: 1; }
  .diario-bloco {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--espaco-8);
  }
  .diario-foto { grid-column: 1 / -1; max-width: 34rem; }
  /* contato: os três passos à esquerda e o painel grudado à direita, no topo,
     alinhado ao passo 01. O painel é a ação que os passos descrevem, então
     fica na tela enquanto se lê, em vez de esperar 600px de rolagem abaixo. */
  .atendimento {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    column-gap: var(--espaco-8);
  }
  .atendimento-lado {
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--espaco-5));
  }
  .atendimento-aviso { grid-column: 1 / -1; max-width: 68ch; }
  .bloco-figura .figura { max-width: 44rem; }

  /* as duas quebras de margem: só existem daqui para cima */
  .quebra--esquerda .quebra-bloco {
    max-width: 56rem;
    margin-left: calc(-1 * var(--pad-lateral));
    padding-left: var(--pad-lateral);
  }
  .quebra--direita .quebra-bloco {
    max-width: 56rem;
    margin-left: auto;
    margin-right: calc(-1 * var(--pad-lateral));
    padding-right: var(--pad-lateral);
  }
}

@media (min-width: 1100px) {
  .nav-principal { display: flex; align-items: center; gap: var(--espaco-5); }
  .menu-abre { display: none; }
  .botao--cabecalho { display: inline-flex; }
}

/* hover só onde existe mouse */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-link:hover .celula { background-color: var(--marca); }
  .marca-site:hover .celula { background-color: var(--marca-profunda); }
  .botao--primario:hover { background-color: var(--marca-profunda); }
  .botao--claro:hover { background-color: var(--papel-2); }
  .link-editorial:hover { color: var(--marca-profunda); text-decoration-color: currentColor; }
  .linha-editorial:hover { background-color: var(--realce); }
  .linha-editorial:hover .celula { background-color: var(--marca); }
  .linha-editorial:hover .linha-nome::after { transform: scaleX(1); }
  .menu-mobile-link:hover .celula { background-color: var(--papel); }
  .faq-item summary:hover .celula { background-color: var(--marca); }
  .rodape-navegacao a:hover { color: var(--marca); }
}

/* movimento reduzido: mantém opacidade e cor, descarta todo deslocamento e
   toda escala. Zerar tudo tiraria também a compreensão do que mudou na tela,
   então o que sobra é fade curto e simultâneo, sem cascata. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity var(--dur-entra) linear; }
  .js .diario-celula--marcada { opacity: 1; transform: none; transition: none; }
  .js .hero-titulo .palavra {
    transform: none;
    animation: apareceSuave var(--dur-entra) linear forwards;
    animation-delay: 0s;
  }
  .js .hero-texto > .lead,
  .js .hero-texto > .acao {
    animation: apareceSuave var(--dur-entra) linear forwards;
    animation-delay: 0s;
  }
  .diario--hero.tem-profundidade .diario-corpo { transform: none; }
  .menu-mobile[data-open="false"] .menu-mobile-item { transform: none; }
  .menu-mobile[data-open="true"] .menu-mobile-item {
    transition-delay: 0s;
    transition-duration: var(--dur-entra);
  }
  .nav-link::after, .linha-nome::after { transition: none; }
  .faq-sinal { transition: none; }
  .botao:active { transform: none; }
}

/* transição entre páginas · melhoria progressiva, zero JavaScript.
   A saída é só opacidade, para não abrir fresta na borda enquanto o retrato
   antigo some. A entrada sobe 16px com a desaceleração exponencial da casa, e
   é ela que dá o sentido de folha nova sendo virada. Saída em 180ms, entrada
   em 300ms: sai mais rápido do que entra, como manda a regra. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-in both vt-sai; }
::view-transition-new(root) {
  animation: 300ms cubic-bezier(.23, 1, .32, 1) both vt-entra;
}
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(16px); } }
.cabecalho { view-transition-name: cabecalho; }
::view-transition-group(cabecalho) { animation: none; z-index: 100; }
::view-transition-old(cabecalho),
::view-transition-new(cabecalho) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}