/*
  Neuro Ninho - site novo (direção B, "Caderneta editorial"), DESIGN.md 2.1.0 (v5).
  Tokens travados: não sobrescrever aqui. Usado por todas as páginas; o questionário soma calc.css.

  ESPAÇAMENTO (DESIGN.md 2.1, regra 4): UMA escala, sem exceção: 4, 8, 16, 24, 32, 48, 64, 96, 128.
    - entre seções: 96 (celular) / 128 (desktop), repartido meio a meio entre as duas seções (--h);
    - título de seção ao conteúdo: 48 (celular) / 64 (desktop) (--cab), que é também o vão entre blocos de uma seção;
    - foto: nunca na borda da tela, 32/64 de qualquer texto, 24/48 de outra foto, altura até 60vh/70vh.
  Conferido por tools/check_espacamento.py (medido no navegador, em 375, 768, 1280 e 1440).

  FONTES (self-hosted, subset latin, font-display: swap). Nenhuma requisição a CDN em produção.
  Origem dos arquivos WOFF2 (baixados uma vez, versão exata, licença SIL OFL 1.1):
    - npm @fontsource/dm-serif-display@5.3.0  files/dm-serif-display-latin-400-normal.woff2 e -400-italic.woff2
    - npm @fontsource-variable/dm-sans@5.3.0  files/dm-sans-latin-wght-normal.woff2 (eixo wght 100-1000)
  Obtidos via https://cdn.jsdelivr.net/npm/<pacote>@<versão>/files/<arquivo>.
*/

@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }

:root {
  --color-bg: #FAF7F1;
  --color-surface: #F3EFEA;
  --color-field: #FFFCF8;
  --color-text: #423C39;
  --color-text-muted: #6F665D;
  --color-border: #D3CECA;
  --color-accent: #915A4A;
  --color-on-accent: #FFFFFF;
  --color-ink-block: #3D3A36;
  --color-error: #8A3A2A;
  --color-pattern: #E9E5E0;

  /* Argolas do kit, medidas em logo-03.png (DESIGN.md 2.0.0). Só como TRAÇO, nunca texto, fundo, botão ou foco. */
  --argola-1: #EA5164;
  --argola-2: #F07E2A;
  --argola-3: #FFD144;
  --argola-4: #81B374;
  --argola-5: #8ABEE8;
  --argola-6: #9868A9;

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Escala em dois regimes: celular < 640, desktop >= 1024, clamp() entre os dois */
  --t-manifesto: clamp(2.625rem, 1.2rem + 4vw, 4.75rem);
  --t-h1: clamp(2.25rem, 1rem + 3vw, 4rem);
  --t-h1-quest: clamp(3rem, 5.1vw, 5.3rem);
  --t-h2: clamp(1.875rem, 1.1rem + 2vw, 3.25rem);
  --t-h3: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem);
  --t-quote: clamp(2rem, 0.9rem + 4.2vw, 5rem);
  --t-num: clamp(1.75rem, 1rem + 2.3vw, 3.25rem);
  --t-registro: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);
  --t-corpo: clamp(1rem, 0.95rem + 0.1vw, 1.0625rem);

  /* Escala de espaçamento: 4 8 16 24 32 48 64 96 128 */
  --h: 48px;      /* metade do vão entre seções (96 no celular) */
  --pad-b: 64px;  /* por dentro de uma faixa de fundo, junto a uma seção sem fundo */
  --pad-c: 32px;  /* por dentro da seção sem fundo, junto a uma faixa de fundo (soma 96 / 128) */
  --cab: 48px;    /* título de seção -> conteúdo, e vão entre blocos de uma seção */
  --foto-vh: 60vh;
  --foto-vh: 60svh;
  --g: 0px;
}
@media (min-width: 1024px) {
  :root { --h: 64px; --pad-b: 96px; --cab: 64px; --foto-vh: 70vh; --foto-vh: 70svh; }
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--t-corpo)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset, dl, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* ---------- Tipografia ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.02em; }
h1 em { display: block; font-style: italic; color: var(--color-accent); }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
h4 { font: 500 1rem/1.4 var(--font-body); }

.sec p, .sec li { text-wrap: pretty; }
.sec p, .sec li { max-width: 36rem; }
.sec .lead { max-width: 32rem; font-size: var(--t-lead); line-height: 1.5; }
.sec .sem-medida, .sec p.folio, .sec p.dado__rotulo, .sec p.dado__valor { max-width: none; }
.pequeno { font-size: 0.875rem; line-height: 1.5; }
.suave { color: var(--color-text-muted); }
.sem-quebra { white-space: nowrap; }

a { color: var(--color-accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pular {
  position: absolute; left: 8px; top: -80px; z-index: 50;
  padding: 16px; background: var(--color-bg); border: 2px solid var(--color-accent);
  border-radius: var(--radius-md); color: var(--color-accent); font-weight: 600;
}
.pular:focus { top: 8px; }

/* ---------- Grade ----------
   Celular: 1 coluna, margem 24. Tablet 640-1023: 6 colunas, gutter 24, margem 32.
   Desktop >= 1024: 12 colunas, gutter 24, margem max(48px, (100% - 1280px) / 2).
   Cada seção é uma faixa de largura total (pode ter fundo próprio) e é ela mesma a grade.
   Linha 1 = full-start; coluna Cn começa na linha n+1; a última linha (-1) = full-end.
   NENHUMA foto usa a trilha de sangria: toda foto fica dentro de content-start / content-end. */

.sec {
  display: grid;
  grid-template-columns: [full-start] 24px [content-start] minmax(0, 1fr) [content-end] 24px [full-end];
  column-gap: 0;
  --g: 0px;
  --mx: 24px;
}
.sec > * { grid-column: content-start / content-end; min-width: 0; }

@media (min-width: 640px) {
  .sec {
    grid-template-columns: [full-start] 8px [content-start] repeat(6, minmax(0, 1fr)) [content-end] 8px [full-end];
    column-gap: 24px;
    --g: 24px;
    --mx: 32px;
  }
}
@media (min-width: 1024px) {
  .sec {
    grid-template-columns:
      [full-start] minmax(24px, calc((100% - 1280px) / 2 - 24px))
      [content-start] repeat(12, minmax(0, 1fr)) [content-end]
      minmax(24px, calc((100% - 1280px) / 2 - 24px)) [full-end];
    column-gap: 24px;
    --g: 24px;
  }
  .sec > .col { grid-column: calc(var(--a) + 1) / calc(var(--b) + 2); }
  .sec > .row { grid-row: var(--r); }
}

/* Seções do conteúdo: o vão entre duas seções é 2 x --h (96 / 128), com a borda da faixa de fundo no meio.
   Entre seção sem fundo e faixa de fundo: 32 por dentro da seção + 64 (96 no desktop) por dentro da faixa. */
main > .sec, .view > .sec { padding-block: var(--h); row-gap: var(--cab); }
main > .sec--banda, main > .sec--tinta, .view > .sec--banda, .view > .sec--tinta { padding-block: var(--pad-b); }
main > .sec:has(+ .sec--banda), main > .sec:has(+ .sec--tinta),
.view > .sec:has(+ .sec--banda), .view > .sec:has(+ .sec--tinta) { padding-bottom: var(--pad-c); }
main > .sec--banda + .sec, main > .sec--tinta + .sec,
.view > .sec--banda + .sec, .view > .sec--tinta + .sec { padding-top: var(--pad-c); }
main > .sec--banda:has(+ .sec--banda), main > .sec--banda:has(+ .sec--tinta),
.view > .sec--banda:has(+ .sec--banda), .view > .sec--banda:has(+ .sec--tinta) { padding-bottom: var(--h); }
main > .sec--banda + .sec--banda, main > .sec--banda + .sec--tinta,
.view > .sec--banda + .sec--banda, .view > .sec--banda + .sec--tinta { padding-top: var(--h); }

.sec--banda { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.sec--tinta { background: var(--color-ink-block); color: #FAF7F1; }

/* ---------- Cabeçalho ---------- */

.topo { padding-top: 8px; row-gap: 0; }
.topo__logo { grid-row: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 48px; }
.topo__logo img { height: 36px; width: auto; }
.topo__nav { grid-row: 2; display: flex; justify-content: space-between; margin-inline: -8px; }
.topo__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--color-text); font: 500 0.9375rem/1.2 var(--font-body); white-space: nowrap;
  text-decoration: none; touch-action: manipulation;
}
.topo__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.topo__regua { grid-row: 3; height: 1px; background: var(--color-border); }
@media (hover: hover) { .topo__nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.4em; } }
@media (min-width: 480px) {
  .topo__nav { grid-row: 1; justify-self: end; justify-content: flex-end; gap: 4px; }
}
@media (min-width: 1024px) {
  .topo { padding-top: 16px; }
  .topo__nav a { font-size: 1rem; padding: 0 16px; }
  .topo__nav { gap: 8px; margin-right: -16px; }
}

/* ---------- Cabeça de seção: fólio numerado sob régua, com o título logo abaixo ---------- */

.cab { display: grid; gap: 24px; align-content: start; }
.folio {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  font: 500 1rem/1.3 var(--font-body); color: var(--color-text-muted);
}
.cab .folio { margin-bottom: 0; }
.folio__n { font: 400 var(--t-num)/1 var(--font-display); font-variant-numeric: lining-nums; }
.folio--solto { margin-bottom: 24px; }

.dado { border-top: 2px solid var(--color-text); padding-top: 16px; }
.dado__rotulo { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.4; }
.dado__valor { font: 500 var(--t-registro)/1.2 var(--font-body); font-variant-numeric: tabular-nums; margin-top: 8px; }
.dado__nota { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 8px; line-height: 1.45; }

/* ---------- Botões: sempre com a largura do conteúdo (a barra fixa do celular é a exceção) ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 240px; min-height: 48px; padding: 8px 32px;
  border: 2px solid var(--color-accent); border-radius: var(--radius-md);
  background: var(--color-accent); color: var(--color-on-accent);
  font: 600 1rem/1.2 var(--font-body); text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgb(145 90 74 / 0.2);
  transition: transform 150ms var(--ease);
}
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.6; cursor: progress; }
.botao--contorno { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.botao--claro { background: #FAF7F1; border-color: #FAF7F1; color: var(--color-ink-block); }
.link-acao {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 1rem/1.2 var(--font-body); color: var(--color-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; touch-action: manipulation;
}
button.link-acao { background: none; border: 0; padding: 0; cursor: pointer; }
.link-acao--claro { color: #FAF7F1; }
@media (hover: hover) {
  .botao:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-on-accent); text-decoration: none; }
  .botao--contorno:hover { background: transparent; color: var(--color-text); }
  .botao--claro:hover { background: #FAF7F1; border-color: #FAF7F1; color: var(--color-ink-block); text-decoration: underline; }
  .link-acao:hover { color: var(--color-text); text-decoration-thickness: 2px; }
  .link-acao--claro:hover { color: #FAF7F1; }
}
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }

/* ---------- Fotos ----------
   Dentro das margens da página, nunca na borda da janela. Altura máxima 60vh (celular) / 70vh (desktop).
   Formato 1:1 no celular e 4:5 no desktop (o arquivo já vem recortado em 4:5); --pos escolhe o recorte
   de cada foto quando a altura máxima ou o formato 1:1 cortam. Sem placa deslocada, sem legenda colada. */

.foto { position: relative; margin: 0; width: 100%; max-width: 36rem; aspect-ratio: 1 / 1; max-height: var(--foto-vh); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); border-radius: 0; }
@media (min-width: 1024px) { .foto { max-width: none; aspect-ratio: 4 / 5; } }

/* ---------- Banda da frase ---------- */

.quote { font: italic 400 var(--t-quote)/1.05 var(--font-display); letter-spacing: -0.01em; color: var(--color-accent); text-wrap: balance; }
.sec p.quote { max-width: none; }
.banda { align-items: center; }
.banda__texto { display: grid; gap: 24px; align-content: center; }

/* ---------- Carimbo e rodapé ---------- */

.carimbo {
  display: grid; gap: 8px; padding: 0; border: 0;
  font: 400 0.875rem/1.5 var(--font-body); color: var(--color-text-muted);
}
.carimbo p { margin: 0; max-width: none; }
.carimbo strong { font-weight: 500; }

.guarda {
  height: 96px; background-color: var(--color-surface);
  background-image: url("../img/guarda-pattern.webp"); background-size: 336px 336px; background-position: center;
  border-top: 1px solid var(--color-border);
}
.rodape { padding-block: 48px; row-gap: 24px; background: var(--color-bg); }
.rodape__marca img { height: 96px; width: auto; }
.rodape__texto { display: grid; gap: 8px; color: var(--color-text-muted); font-size: 0.875rem; align-content: start; }
.rodape__texto p { max-width: 36rem; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .rodape { row-gap: 0; padding-block: 64px; } .guarda { height: 128px; } }

/* ---------- Home: abertura (rótulo, manifesto, o que é, botão, foto) ---------- */

.hero { justify-items: center; text-align: center; }
.hero__topo { display: grid; gap: 32px; justify-items: center; }
.hero__titulo { display: grid; gap: 16px; justify-items: center; }
.sec p.hero__rotulo { max-width: none; color: var(--color-text-muted); font: 500 1rem/1.4 var(--font-body); }
.hero h1 { font-size: var(--t-manifesto); line-height: 1.06; max-width: 18ch; margin-inline: auto; }
@media (min-width: 640px) { .hero h1 { max-width: 22ch; } }
.hero .lead { max-width: 36rem; }
.foto--larga { justify-self: center; max-width: none; width: min(100%, calc(var(--foto-vh) * 1.5)); aspect-ratio: 3 / 2; }
.sec--centro { justify-items: center; }
.foto--retrato { justify-self: center; }
@media (min-width: 1024px) { .foto--retrato { width: calc((100% - 11 * 24px) / 12 * 4 + 3 * 24px); } }

/* ---------- Home: como funciona (3 passos) ---------- */

.passos { display: grid; gap: 32px; }
.passo { display: grid; gap: 16px; align-content: start; border-top: 1px solid var(--color-text); padding-top: 24px; }
@media (min-width: 1024px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }

/* ---------- Home: o que observar (foto + texto lado a lado, régua embaixo) ---------- */

.observar__texto { display: grid; gap: 24px; align-content: start; align-self: center; }
.observar__texto h2 { font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.5rem); }
@media (min-width: 1024px) { .foto--lado { aspect-ratio: 3 / 2; } }
.regua-bloco { display: grid; gap: 16px; align-content: start; }
.regua__dica { font-size: 0.875rem; color: var(--color-text-muted); }
.regua__nota { font-size: 0.875rem; color: var(--color-text-muted); }
.regua-rodape { display: grid; gap: 8px; justify-items: start; }
.regua { display: grid; gap: 32px; }
.faixa { display: flex; flex-direction: column; position: relative; }
.faixa__marca { display: none; }
.faixa__trilho { position: relative; height: 1px; border-top: 1px solid var(--color-text); }
.faixa__trilho .traco { position: absolute; left: 0; right: 0; top: -4px; width: auto; height: 8px; transform-origin: left; }
.faixa__nome { padding-block: 24px 16px; }
.faixa__nome h3 { font-size: 1.625rem; }
.faixa__marcos li { font-size: 1rem; line-height: 1.5; padding-block: 8px; border-top: 1px solid var(--color-border); max-width: none; }
.faixa__mais summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--color-accent); font: 600 0.875rem/1.3 var(--font-body); }
@media (min-width: 1024px) {
  .regua { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; }
  .faixa__marca { display: flex; justify-content: space-between; padding-bottom: 8px; font: 500 0.875rem/1.4 var(--font-body); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .faixa__mais summary { display: none; }
  .faixa__trilho { margin-right: calc(var(--g) * -1); }
  .faixa:last-child .faixa__trilho { margin-right: 0; }
  .faixa__trilho .traco { right: var(--g); }
  .faixa:last-child .faixa__trilho .traco { right: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .regua { view-timeline-name: --regua; view-timeline-axis: block; }
    .faixa__trilho .traco {
      animation: encher-x linear both;
      animation-timeline: --regua;
      animation-range: cover calc(6% + var(--k) * 7%) cover calc(24% + var(--k) * 7%);
    }
  }
}
@keyframes encher-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Home: para começar (3 portas, sem caixa: a prévia é papel creme sobre a faixa) ---------- */

.portas { --prev-h: 296px; display: grid; gap: 0; align-content: start; }
.portas__lista { display: grid; gap: 48px; }
.porta { display: grid; gap: 16px; align-content: start; }
.porta__previa { background: var(--color-bg); padding: 24px; display: grid; gap: 8px; align-content: start; overflow: hidden; }
.porta__acao { min-height: 48px; display: flex; align-items: center; }
.porta p { color: var(--color-text); }
.previa__rotulo { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.4; }
.previa__titulo { font: 400 1.375rem/1.2 var(--font-display); display: flex; align-items: center; gap: 16px; }
.previa__conta { font: 500 1.0625rem/1.3 var(--font-body); font-variant-numeric: tabular-nums; }
.previa__linhas { display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.previa__linhas li { max-width: none; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--color-border); padding-top: 4px; }
.previa__linhas li span:last-child { white-space: nowrap; }
.previa__itens, .previa__marcos { display: grid; gap: 8px; font-size: 0.9375rem; line-height: 1.4; }
.previa__itens li { position: relative; max-width: none; padding-left: 24px; }
.previa__itens li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 16px; height: 1px; background: var(--color-text); }
.faixa-rotulo { display: flex; align-items: center; gap: 16px; font: 500 1rem/1.3 var(--font-body); }
.traco { display: inline-block; flex: none; width: 40px; height: 6px; border-radius: 999px; background: var(--cor, var(--argola-1)); }
@media (min-width: 1024px) {
  .portas { --prev-h: 312px; }
  .porta__previa { height: var(--prev-h); }
  .portas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .traco { height: 8px; }
}

/* ---------- Home: Quem somos ---------- */

.ficha__pessoas { display: grid; gap: 48px; align-content: start; }
.pessoa { display: grid; gap: 16px; align-content: start; }
.pessoa h3 { font-size: var(--t-h3); }
.pessoa__registro { border-top: 2px solid var(--color-text); padding-top: 16px; font: 500 var(--t-registro)/1.25 var(--font-body); font-variant-numeric: tabular-nums; max-width: 100% !important; }
@media (min-width: 640px) { .pessoa__registro { width: fit-content; } }
.pessoa details summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--color-accent); font-weight: 600; }
.pessoa details p { padding-bottom: 8px; }
.fala { font: 400 clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem)/1.3 var(--font-display); text-indent: -0.4em; }
.sec p.fala { max-width: 32ch; }
@media (min-width: 1024px) { .ficha .foto { position: sticky; top: 24px; } }

/* ---------- Home: perguntas e fechamento ---------- */

.faq__titulo { align-self: start; display: grid; gap: 16px; align-content: start; }
.faq__titulo .folio { margin-bottom: 8px; }
@media (min-width: 1024px) { .faq__titulo { position: sticky; top: 24px; } }
.faq details { border-top: 1px solid var(--color-border); }
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.faq summary { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px 0; font: 500 1.125rem/1.35 var(--font-body); cursor: pointer; list-style: none; touch-action: manipulation; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; flex: none; font-size: 1.75rem; font-weight: 400; color: var(--color-text-muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 24px; }
.faq details > div p { max-width: 36rem; }
.sem-quebra-n { white-space: nowrap; }

.fecho { display: grid; gap: 24px; align-content: center; justify-items: start; }
.fecho h2 { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.5rem); color: #FAF7F1; }
.fecho p { color: #FAF7F1; }
.fecho .acoes { gap: 8px 32px; }

/* ---------- Barra fixa (celular) ---------- */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 16px max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: var(--color-bg); box-shadow: 0 -1px 0 #D3CECA;
}
.barra .botao { min-height: 52px; width: 100%; }
.com-barra { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.barra--surge { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .barra--surge { display: block; animation: barra-entra linear both; animation-timeline: scroll(root); animation-range: var(--ini, 520px) calc(var(--ini, 520px) + 140px); }
  }
}
@keyframes barra-entra { from { opacity: 0; visibility: hidden; transform: translateY(8px); } to { opacity: 1; visibility: visible; transform: none; } }
@media (prefers-reduced-motion: reduce) { .com-barra { padding-bottom: 0; } }
@media (min-width: 640px) { .barra { position: static; padding: 0; box-shadow: none; background: transparent; } .barra--surge { display: none !important; } .com-barra { padding-bottom: 0; } }

/* ---------- Formulários (sem caixa: papel de superfície sobre o creme, sem borda e sem placa) ---------- */

.folha { position: relative; background: var(--color-surface); border: 0; padding: 32px 24px; display: grid; gap: 24px; align-content: start; }
.folha h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.folha > p { font-size: 0.9375rem; color: var(--color-text); }
.folha form { display: grid; gap: 24px; }
.campo { display: grid; gap: 8px; }
.campo label, .campo .rotulo { font-weight: 500; }
.campo .ajuda { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.45; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="date"], .campo select {
  width: 100%; min-height: 48px; padding: 8px 16px; border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
  background-color: var(--color-field); color: var(--color-text); font: 400 1rem/1.3 var(--font-body);
}
.campo input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.erro { margin-top: 4px; padding-left: 16px; border-left: 2px solid var(--color-error); color: var(--color-error); font-size: 0.875rem; line-height: 1.45; }
.campo label.confere { display: flex; align-items: flex-start; gap: 16px; min-height: 48px; padding-block: 8px; cursor: pointer; font-weight: 400; }
.confere input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent); }
.confere span { font-size: 0.9375rem; line-height: 1.45; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.retorno { padding-left: 16px; border-left: 2px solid var(--color-text); display: grid; gap: 16px; }
.sec .retorno p { max-width: none; }
@media (min-width: 1024px) {
  .folha--sticky { position: static; align-self: start; }
}
@media (min-width: 1024px) and (min-height: 760px) {
  .folha--sticky { position: sticky; top: 24px; }
}

/* ---------- Páginas internas ---------- */

.grupo { display: grid; gap: 24px; align-content: start; }
.bloco { display: grid; gap: var(--cab); align-content: start; }
.abertura__texto { display: grid; gap: 24px; align-content: start; }
.abertura__texto .folio { margin-bottom: 0; }
.data-nota { color: var(--color-text-muted); font-size: 1rem; }

.itens { display: grid; }
.item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; padding-block: 16px; border-top: 1px solid var(--color-border); align-items: baseline; }
.item:last-child { border-bottom: 1px solid var(--color-border); }
.item__n, .publico__n { font: 500 1rem/1.5 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }

.publico { display: grid; gap: 0; }
.publico__item { display: grid; gap: 16px; padding-block: 24px; border-top: 1px solid var(--color-border); align-content: start; }

.previa-folha { background: var(--color-surface); padding: 24px; display: grid; gap: 16px; align-content: start; }
.previa-folha--creme { background: var(--color-bg); }

.toc { display: grid; gap: 0; }
.toc a { display: flex; align-items: baseline; gap: 16px; min-height: 48px; padding-block: 16px; border-top: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); font: 500 1rem/1.3 var(--font-body); }
.toc a:last-child { border-bottom: 1px solid var(--color-border); }
.toc .toc__n { font: 500 1rem/1.3 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.toc-mobile summary { min-height: 48px; display: flex; align-items: center; font-weight: 500; cursor: pointer; }
.toc-desk { display: none; }
@media (min-width: 1024px) { .toc-mobile { display: none; } .toc-desk { display: grid; position: sticky; top: 24px; align-self: start; } }
.texto-longo { display: grid; gap: 48px; }
.texto-longo section { display: grid; gap: 16px; align-content: start; scroll-margin-top: 24px; }
.texto-longo h2 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: 0; padding-top: 16px; border-top: 1px solid var(--color-border); }
.texto-longo ul { display: grid; gap: 8px; padding-left: 24px; list-style: disc; }
.texto-longo li::marker { color: var(--color-text-muted); }

.lista-itens { display: grid; gap: 16px; }
.lista-itens li { position: relative; padding-left: 24px; }
.lista-itens li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 16px; height: 1px; background: var(--color-text); }
.enquanto { display: grid; gap: 32px; }
.enquanto__item { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-text); align-content: start; justify-items: start; }
@media (min-width: 1024px) { .enquanto { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
.sec li.item { max-width: none; }
.cartao-ficha { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1024px) {
  .foto--quadrada { aspect-ratio: 1 / 1; }
  .publico { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .publico__item { border-top: 1px solid var(--color-text); }
}

@media print { .topo, .barra, .pular, .guarda { display: none !important; } body { background: none; padding: 0 !important; } }
@media (min-width: 1200px) { .ficha__pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
.pessoa { min-width: 0; }