/* Hallmark · macrostructure: Marquee Hero · tone: monumental glacial · anchor hue: 240 (rampa gelo, sem acento cromático)
 * nav: N9 Edge-aligned minimal · footer: Ft5 Statement · theme: studied-DNA (DESIGN.md, D-098)
 * enrichment: abertura em quadros guiada pela rolagem (vídeo aprovado em D-108)
 * antislop · dial ENERGY 2 / RHYTHM 3 / MOTION 3
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4
 */

/* Escala própria da landing: os estilos do app (DESIGN.md) ampliados para tela grande. Cor e espaço vêm de tokens.css. */
:root {
  --margem: 20px;
  --largura: 1200px;
  --altura-nav: 60px;
  --texto-frase: clamp(52px, 14vw, 88px);
  --texto-frase-largo: clamp(60px, 5.4vw, 104px);
  --texto-titulo: clamp(40px, 6vw, 76px);
  --texto-titulo-grande: clamp(60px, 10vw, 148px);
  --texto-rodape: clamp(48px, 8.4vw, 132px);
  --texto-corpo: clamp(17px, 1.2vw, 19px);
}
@media (min-width: 900px) {
  :root { --margem: 40px; }
}

[hidden] { display: none !important; }

html { overflow-x: clip; scroll-behavior: smooth; }
[data-movimento="reduzido"] { scroll-behavior: auto; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--fundo-base);
  color: var(--texto-primario);
  font: 400 var(--texto-corpo)/1.5 var(--fonte-texto), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
h1, h2, h3 { font-style: normal; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1.25em; height: 1.25em; flex: none; }

.pular-conteudo {
  position: absolute; left: var(--margem); top: -80px; z-index: 40;
  padding: 12px 18px; border-radius: var(--raio-pilula);
  background: var(--acao-primaria-fundo); color: var(--acao-primaria-texto); font-weight: 600; text-decoration: none;
}
.pular-conteudo:focus-visible { top: 12px; outline: 2px solid var(--foco-anel); outline-offset: 3px; }

/* Botões e links: os 8 estados (padrão, passar o mouse, foco, pressionado, desativado, carregando, erro, sucesso). */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; box-sizing: border-box;
  border: none; border-radius: var(--raio-pilula);
  background: var(--acao-primaria-fundo); color: var(--acao-primaria-texto);
  font: 600 17px/1 var(--fonte-texto); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-rapido) var(--curva-troca), background-color var(--dur-rapido) var(--curva-troca);
}
.botao:hover { background: color-mix(in oklab, var(--acao-primaria-fundo) 86%, var(--fundo-base)); }
.botao:active { transform: scale(0.98); }
.botao:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 3px; }
.botao:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.botao[aria-busy="true"] { cursor: progress; opacity: 1; }
.botao-pequeno { min-height: 44px; padding: 0 18px; font-size: 15px; }

.link-forte {
  display: inline; padding: 0; border: none; background: none;
  color: var(--texto-primario); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer;
}
.link-forte:hover { text-decoration-thickness: 2px; }
.link-forte:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 3px; border-radius: 2px; }

.girando {
  display: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar 800ms linear infinite;
}
[aria-busy="true"] .girando { display: inline-block; }
@keyframes girar { to { transform: rotate(1turn); } }

/* Navegação: wordmark num canto, a ação no outro (N9), em duas ilhas de vidro separadas (D-142); o vão entre elas deixa a
   página à vista e tocável. Vidro só aqui, porque passa por cima da imagem da abertura (R-10). O vidro é o mesmo no escuro e
   no modo neve: claro, quase sem cor, só desfoque. O que fica em cima dele traz a própria leitura: o botão do tema e a
   chamada são pílulas sólidas, e o wordmark troca de cor quando a página sai da imagem da abertura. */
.nav {
  position: fixed; z-index: 20; top: 12px; left: var(--margem); right: var(--margem);
  max-width: var(--largura); margin: 0 auto; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.nav-marca, .nav-acoes {
  pointer-events: auto; box-sizing: border-box; min-height: var(--altura-nav);
  border: 1px solid color-mix(in oklab, var(--imagem-texto) 30%, transparent); border-radius: var(--raio-pilula);
  background: color-mix(in oklab, var(--imagem-texto) 10%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--imagem-texto) 22%, transparent), 0 8px 32px color-mix(in oklab, var(--imagem-veu) 14%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
}
.nav-marca {
  display: flex; align-items: center; padding: 0 22px;
  color: var(--imagem-texto); transition: color var(--dur-rapido) var(--curva-troca);
}
.nav-marca .wordmark {
  filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--imagem-veu) 55%, transparent)) drop-shadow(0 0 10px color-mix(in oklab, var(--imagem-veu) 60%, transparent));
}
.nav.sobre-conteudo .nav-marca { color: var(--texto-primario); }
.nav.sobre-conteudo .nav-marca .wordmark { filter: none; }
/* Anel de foco em duas cores, visível sobre qualquer coisa que passe atrás do vidro. */
.nav :focus-visible { outline: 2px solid var(--imagem-veu); outline-offset: 2px; box-shadow: 0 0 0 4px var(--imagem-texto); }
.nav .botao { background: var(--imagem-veu); color: var(--imagem-texto); }
.nav .botao:hover { background: color-mix(in oklab, var(--imagem-veu) 84%, var(--imagem-texto)); }
.wordmark { display: block; height: 18px; width: 66px; }
.nav-acoes { display: flex; align-items: center; gap: 8px; padding: 7px; }
.botao-tema {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: none; border-radius: var(--raio-pilula); background: color-mix(in oklab, var(--imagem-texto) 78%, transparent);
  color: var(--imagem-veu); font: 500 15px/1 var(--fonte-texto); cursor: pointer;
  transition: background-color var(--dur-rapido) var(--curva-troca);
}
.botao-tema:hover { background: color-mix(in oklab, var(--imagem-texto) 92%, transparent); }
.botao-tema[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--imagem-veu) 50%, transparent); }
.botao-tema-texto { display: none; }
@media (min-width: 640px) { .botao-tema-texto { display: inline; } }

/* Abertura: a mesma subida do app (D-108), guiada pela rolagem. Três telas de rolagem para a subida inteira:
   com menos, um gesto só no trackpad passa pela animação toda. */
.subida { position: relative; height: 400vh; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.palco-imagem { position: absolute; inset: 0; margin: 0; background: var(--imagem-veu); }
.palco-poster, .palco-quadros { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.crista-imagem { display: none; }

.palco-texto { position: absolute; inset: 0; pointer-events: none; }
.frases {
  margin: 0; color: var(--imagem-veu);
  font: 800 var(--texto-frase)/1 var(--fonte-display); text-transform: uppercase; letter-spacing: 0.005em;
}
.frase { position: absolute; top: 15%; left: var(--margem); right: var(--margem); display: flex; flex-wrap: wrap; column-gap: 0.22em; }
.frase-embaixo { top: 54%; }
.palavra { display: inline-block; opacity: 0; transform: translateY(12px); }

.chamada {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: auto;
  display: grid; gap: 20px; padding: 16px var(--margem) calc(28px + env(safe-area-inset-bottom));
  background: var(--fundo-base); transform: translateY(calc(100% + 48px));
}
.crista { overflow: visible; }
.crista polygon { fill: var(--fundo-base); }
.crista polyline { fill: none; stroke: var(--borda-forte); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.crista-chamada { position: absolute; left: 0; top: -39px; width: 100%; height: 40px; }
.chamada-texto { margin: 0; color: var(--texto-secundario); max-width: 34ch; }
.chamada-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.chamada-acoes .link-forte { padding: 12px 0; }

/* Pílula clara atrás da dica, como o "Pular" da abertura do app: a neve do pé da imagem tem pedra escura. */
.dica {
  position: absolute; left: 50%; bottom: 24px; margin: 0; width: max-content; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: var(--raio-pilula); background: color-mix(in oklab, var(--imagem-texto) 82%, transparent);
  color: var(--imagem-veu); font-weight: 600; font-size: 15px; pointer-events: none;
}

/* Tela larga: a subida ocupa o hero inteiro, como no celular. Os quadros largos mostram uma faixa do vídeo vertical
   que sobe com a rolagem, das pedras ao cume (preparar_abertura_larga.py). As frases ficam empilhadas à esquerda. */
@media (min-width: 900px) {
  /* Texto sobre imagem do DESIGN.md: claro sobre véu escuro em gradiente, igual nos dois temas, só do lado das frases. */
  .palco-imagem::after {
    content: ""; position: absolute; inset: 0;
    /* Firme até a largura das frases (6,6 vezes o tamanho da letra, ver .frase abaixo) e depois some aos poucos. */
    --fim-das-frases: calc(max(var(--margem), (100% - var(--largura)) / 2 + var(--margem)) + 6.6 * var(--texto-frase-largo));
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--imagem-veu) 80%, transparent),
      color-mix(in oklab, var(--imagem-veu) 68%, transparent) var(--fim-das-frases),
      color-mix(in oklab, var(--imagem-veu) 30%, transparent) calc(var(--fim-das-frases) + 12%),
      transparent calc(var(--fim-das-frases) + 28%));
  }
  .frases {
    position: absolute; top: calc(var(--altura-nav) + 56px); left: 0; right: 0;
    max-width: var(--largura); margin: 0 auto; padding-inline: var(--margem); box-sizing: border-box;
    color: var(--imagem-texto); font-size: var(--texto-frase-largo);
  }
  /* As frases quebram dentro do véu, para o texto claro não passar para o céu claro do lado direito. */
  .frase { position: static; max-width: 6.6em; }
  .frase .palavra { transition: color var(--dur-lento) var(--curva-saida); }
  .frase.passada .palavra { color: var(--imagem-texto-apoio); }
  /* O painel da chamada sobe com a crista como no celular; o conteúdo dele alinha com a página. */
  .chamada {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px;
    padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
  }
  .dica { left: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem))); bottom: 32px; transform: none; }
}

/* Movimento reduzido: a abertura vira o quadro final, parado (DESIGN.md). */
[data-movimento="reduzido"] .subida { height: auto; }
[data-movimento="reduzido"] .palco { position: relative; height: auto; min-height: 100svh; }
[data-movimento="reduzido"] .palco-quadros, [data-movimento="reduzido"] .dica { display: none; }
[data-movimento="reduzido"] .palavra { opacity: 1; transform: none; }
[data-movimento="reduzido"] .chamada { transform: none; opacity: 1; }
@media (max-width: 899px) {
  [data-movimento="reduzido"] .frase:not(.frase-embaixo) { display: none; }
}

/* Seções */
.secao {
  max-width: var(--largura); margin: 0 auto; padding-inline: var(--margem); box-sizing: border-box;
  scroll-margin-top: calc(var(--altura-nav) + 32px);
}
/* Faixas (D-145): uma seção sim, outra não, ganha um fundo próprio de ponta a ponta, para dar para ver onde cada uma
   começa, principalmente no modo neve. A sombra estende o fundo além da coluna de texto e o recorte segura na altura. */
:root, [data-tema="escuro"] { --fundo-faixa: var(--gelo-2); }
[data-tema="claro"] { --fundo-faixa: var(--gelo-11); }
.secao.faixa {
  padding-block: 112px; background: var(--fundo-faixa);
  box-shadow: 0 0 0 100vmax var(--fundo-faixa); clip-path: inset(0 -100vmax);
}
.titulo { margin: 0; font: 800 var(--texto-titulo)/1.02 var(--fonte-display); letter-spacing: 0.005em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.titulo-grande { font-size: var(--texto-titulo-grande); line-height: 1; }
.corpo { margin: 0; max-width: 60ch; text-wrap: pretty; }
.apoio { color: var(--texto-secundario); }
.afirmacao { margin: 0; max-width: 24ch; font: 700 clamp(26px, 3vw, 38px)/1.12 var(--fonte-display); }

.nota-prancha {
  margin: 0; max-width: 60ch; padding: 10px 14px; box-sizing: border-box;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio-s);
  color: var(--texto-secundario); font-size: 14px; line-height: 1.45;
}

/* Revelação por palavra nos títulos (DESIGN.md, princípio 3). */
.revelar .palavra-r {
  display: inline-block; opacity: 0; transform: translateY(8px); color: var(--texto-terciario);
  transition: opacity var(--dur-lento) var(--curva-saida), transform var(--dur-lento) var(--curva-saida), color var(--dur-marcante) var(--curva-saida);
  transition-delay: calc(var(--i) * var(--escalonamento));
}
.revelar.visivel .palavra-r { opacity: 1; transform: none; color: var(--texto-primario); }
[data-movimento="reduzido"] .revelar .palavra-r { transform: none; color: var(--texto-primario); transition: opacity 150ms linear; transition-delay: 0ms; }

.o-que-e { display: grid; gap: 32px; padding-block: 96px 120px; }
.o-que-e-texto { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .o-que-e { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; padding-block: 160px; }
}

.ouvir { display: grid; gap: 16px; padding-block: 24px 120px; }
.ouvir .titulo { font-size: clamp(36px, 4.6vw, 60px); }
@media (min-width: 900px) {
  .ouvir { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: center; }
  .ouvir .titulo, .ouvir > .apoio { grid-column: 1; }
  .player { grid-column: 2; grid-row: 1 / span 2; }
  .ouvir > .nota-prancha { grid-column: 2; }
}
.player {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px;
  margin-top: 16px; padding: 24px; box-sizing: border-box;
  border: 1px solid var(--borda-sutil); border-radius: var(--raio-xl); background: var(--fundo-superficie);
}
.player-tocar {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px;
  border: none; border-radius: 50%; background: var(--acao-primaria-fundo); color: var(--acao-primaria-texto); cursor: pointer;
  transition: transform var(--dur-rapido) var(--curva-troca);
}
.player-tocar:active { transform: scale(0.96); }
.player-tocar:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 3px; }
.player-tocar .icone { width: 26px; height: 26px; }
.player .icone-pausar, .player[data-estado="tocando"] .icone-tocar { display: none; }
.player[data-estado="tocando"] .icone-pausar { display: block; }
.player[data-estado="carregando"] .player-tocar .icone { display: none; }
.player[data-estado="carregando"] .girando { display: block; width: 24px; height: 24px; }
.onda { height: 64px; border-radius: var(--raio-s); cursor: pointer; touch-action: none; }
.onda:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 6px; }
.onda-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.onda-svg .linha { fill: none; stroke: var(--texto-primario); stroke-width: 1.5; stroke-linejoin: round; }
.onda-svg .area { fill: var(--texto-primario); }
.onda-svg .marcador { stroke: var(--texto-primario); stroke-width: 1; stroke-dasharray: 3 3; }
.onda-svg .cabeca { fill: var(--texto-primario); stroke: var(--fundo-superficie); stroke-width: 2; }
.player-tempos { display: flex; justify-content: space-between; margin-top: 8px; color: var(--texto-secundario); font-size: 13px; font-variant-numeric: tabular-nums; }
.player-erro { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--alerta-texto); font-size: 15px; }
.player-erro .link-forte { padding: 10px 0; }

.dia { padding-block: 120px; }
.crista-dia { display: block; width: 100%; height: 72px; margin: 48px 0 16px; overflow: visible; }
.crista-dia .feito-linha { fill: none; stroke: var(--texto-primario); stroke-width: 1.5; stroke-linejoin: round; }
.crista-dia .falta-linha { fill: none; stroke: var(--borda-forte); stroke-width: 1.5; stroke-dasharray: 3 4; stroke-linejoin: round; }
.crista-dia .no-feito { fill: var(--texto-primario); }
.crista-dia .no-atual { fill: var(--fundo-base); stroke: var(--texto-primario); stroke-width: 2; }
.crista-dia .no-falta { fill: var(--borda-forte); }
.crista-dia .marcador { stroke: var(--texto-primario); stroke-width: 1; stroke-dasharray: 2 3; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } }
.passo h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: 600 20px/1.25 var(--fonte-texto); }
.passo-numero { color: var(--texto-terciario); font: 500 13px/1 var(--fonte-mono); letter-spacing: 0.04em; }
.passo p { margin: 0; color: var(--texto-secundario); font-size: 16px; }
.dia-descanso { margin-top: 48px; }

.temas { padding-block: 24px 120px; }
.temas-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.temas-cabeca .apoio { margin-top: 16px; }
.temas-setas { display: none; gap: 8px; }
@media (min-width: 900px) { .temas-setas { display: flex; } }
.botao-redondo {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--borda-forte); border-radius: 50%; background: transparent; color: var(--texto-primario); cursor: pointer;
  transition: background-color var(--dur-rapido) var(--curva-troca);
}
.botao-redondo:hover { background: var(--fundo-superficie); }
.botao-redondo:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }
.botao-redondo:disabled { opacity: 0.35; cursor: default; background: transparent; }
.trilho-temas {
  list-style: none; margin: 0 calc(-1 * var(--margem)); padding: 4px var(--margem) 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 64vw, 280px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); overscroll-behavior-x: contain;
}
.trilho-temas:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: -2px; }
.tema { scroll-snap-align: start; }
.tema img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio-l); background: var(--fundo-superficie); }
.tema h3 { margin: 16px 0 6px; font: 600 20px/1.25 var(--fonte-texto); }
.tema p { margin: 0; color: var(--texto-secundario); font-size: 15px; }

.diario { display: grid; gap: 28px; padding-block: 120px; }
.diario-icone { width: 40px; height: 40px; color: var(--texto-secundario); }
.diario-texto { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .diario { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
  .diario-icone { grid-column: 1 / -1; }
}

.preco { max-width: 760px; padding-block: 24px 120px; }
.planos { margin: 32px 0 24px; border-top: 1px solid var(--borda-sutil); }
.plano { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--borda-sutil); }
.plano dt { font: 600 20px/1.25 var(--fonte-texto); }
.plano dd { display: grid; justify-items: end; gap: 2px; margin: 0; text-align: right; }
.plano-valor { font-weight: 600; }
.plano-apoio { color: var(--texto-secundario); font-size: 14px; }

.lista { padding-block: 112px 120px; }
.lista-caixa {
  display: grid; gap: 20px; padding: clamp(28px, 5vw, 64px); box-sizing: border-box;
  border: 1px solid var(--borda-sutil); border-radius: var(--raio-xl); background: var(--fundo-superficie);
}
.formulario { display: grid; gap: 12px; max-width: 640px; margin-top: 12px; }
.rotulo-campo { font-size: 15px; font-weight: 600; }
.linha-campo { display: grid; gap: 12px; }
@media (min-width: 640px) { .linha-campo { grid-template-columns: minmax(0, 1fr) auto; } }
.campo {
  width: 100%; min-width: 0; min-height: 52px; padding: 0 18px; box-sizing: border-box;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-m); background: var(--fundo-base);
  color: var(--texto-primario); font: 400 17px var(--fonte-texto);
}
.campo:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }
.campo[aria-invalid="true"] { border-color: var(--alerta-texto); }
.consentimento { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; color: var(--texto-secundario); font-size: 15px; }
.consentimento label { padding-top: 1px; cursor: pointer; }
.isca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.caixa {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center;
  width: 24px; height: 24px; margin: 0; box-sizing: border-box;
  border: 1.5px solid var(--borda-forte); border-radius: var(--raio-xs); background: var(--fundo-base); cursor: pointer;
}
.caixa:checked { border-color: var(--acao-primaria-fundo); background: var(--acao-primaria-fundo); }
.caixa:checked::after {
  content: ""; width: 6px; height: 11px; box-sizing: border-box;
  border: solid var(--acao-primaria-texto); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg);
}
.caixa:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }
.caixa[aria-invalid="true"] { border-color: var(--alerta-texto); }
.erro { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--alerta-texto); font-size: 15px; }
.sucesso { display: grid; justify-items: start; gap: 8px; }
.sucesso:focus { outline: none; }
.sucesso h3 { margin: 0; font: 800 clamp(30px, 3.2vw, 42px)/1.05 var(--fonte-display); }
.sucesso-icone { width: 32px; height: 32px; }

.perguntas { display: grid; gap: 32px; padding-block: 24px 160px; }
@media (min-width: 900px) {
  .perguntas { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
}
.perguntas-lista { border-top: 1px solid var(--borda-sutil); }
.pergunta { border-bottom: 1px solid var(--borda-sutil); }
.pergunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; box-sizing: border-box; list-style: none; cursor: pointer;
  font-size: 18px; font-weight: 600;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary .icone { color: var(--texto-secundario); transition: transform var(--dur-base) var(--curva-troca); }
.pergunta[open] summary .icone { transform: rotate(180deg); }
.pergunta summary:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 4px; border-radius: var(--raio-xs); }
.pergunta > p { margin: 0 0 20px; max-width: 60ch; color: var(--texto-secundario); }
.pergunta > .nota-prancha { margin-bottom: 20px; }

/* Rodapé: uma frase grande no lugar de um mapa de links (Ft5). */
.rodape {
  max-width: var(--largura); margin: 0 auto; box-sizing: border-box;
  padding: 80px var(--margem) 32px; border-top: 1px solid var(--borda-sutil);
}
.rodape-frase { margin: 0 0 48px; font: 800 var(--texto-rodape)/1 var(--fonte-display); overflow-wrap: anywhere; }
.rodape-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; color: var(--texto-terciario); font-size: 14px; }
.wordmark-pequeno { height: 16px; width: 58px; color: var(--texto-primario); }
.link-discreto {
  padding: 12px 0; border: none; background: none; color: var(--texto-secundario);
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-discreto:hover { color: var(--texto-primario); }
.link-discreto:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; border-radius: 2px; }

.dialogo {
  width: min(520px, calc(100vw - 2 * var(--margem))); box-sizing: border-box; padding: 32px;
  border: 1px solid var(--borda-sutil); border-radius: var(--raio-xl); background: var(--fundo-folha); color: var(--texto-primario);
}
.dialogo::backdrop { background: color-mix(in oklab, var(--imagem-veu) 72%, transparent); }
.dialogo h2 { margin: 0 0 12px; font: 800 32px/1.05 var(--fonte-display); }
.dialogo h3 { margin: 22px 0 6px; font: 600 17px/1.3 var(--fonte-texto); }
.dialogo p + p { margin-top: 10px; }
.dialogo .nota-prancha { margin-top: 16px; }
.dialogo .botao { margin-top: 24px; }

/* Só da prancha: some quando a página vira a landing de verdade. */
.controles-prancha {
  max-width: var(--largura); margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 24px var(--margem) calc(48px + env(safe-area-inset-bottom));
  border-top: 1px dashed var(--borda-forte); color: var(--texto-secundario); font-size: 14px;
}
.controles-prancha p { margin: 0 12px 0 0; }
.alternador {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula);
  background: transparent; color: var(--texto-primario); font: 500 14px var(--fonte-texto); cursor: pointer;
}
.alternador[aria-pressed="true"] { border-color: transparent; background: var(--acao-primaria-fundo); color: var(--acao-primaria-texto); }
.alternador:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }