/* O site público da Aurora. Todo valor sai de tokens.generated.css (design/ds/tokens, pelo gerador);
   aqui só há composição. Regras do DS que valem aqui: cor é sinal (copper = ação e evidência,
   phosphor = cognição acontecendo), conteúdo é sólido e só o que flutua é vidro, nenhuma sombra,
   nenhum degradê, Sora afirma e Plex Mono comprova. */

@font-face { font-family: "Sora"; src: url("fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--space-56) + var(--space-16)); }
body {
  margin: 0; background: var(--surface-page); color: var(--text-body);
  font: 400 var(--size-16)/var(--leading-prose) var(--font-display);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--text-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-body); }
h1, h2, h3 { margin: 0; color: var(--text-body); }
p { margin: 0; }

.pular { position: absolute; left: var(--space-16); top: calc(-1 * var(--space-56)); padding: var(--pad-button); background: var(--surface-raised); color: var(--text-body); border-radius: var(--radius-control); z-index: 20; }
.pular:focus { top: var(--space-12); }

.largura { width: 100%; max-width: calc(var(--col-read) * 1.55); margin: 0 auto; padding: 0 var(--space-24); }
.coluna { max-width: var(--col-read); }
/* coluna de leitura alinhada à MESMA margem das outras seções, não centralizada */
.largura.coluna { max-width: calc(var(--col-read) * 1.55); }
.largura.coluna > * { max-width: var(--col-read); }

/* a barra do topo flutua sobre o conteúdo: é a única superfície de vidro da página */
.topo { position: sticky; top: 0; z-index: 10; background: var(--surface-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border-bottom: var(--border-width-hair) solid var(--border-hairline); }
.topo-in { display: flex; align-items: center; gap: var(--space-24); min-height: var(--space-56); }
.marca { font: var(--type-section); font-size: var(--size-15); letter-spacing: var(--tracking-brand); color: var(--text-body); text-decoration: none; }
.topo nav { display: flex; gap: var(--space-20); margin-left: auto; }
.topo nav a { font: var(--type-nav); font-size: var(--size-13-5); color: var(--text-meta); text-decoration: none; }
.topo nav a:hover { color: var(--text-body); }

.carimbo { display: inline-flex; align-items: center; gap: var(--space-10); font: 400 var(--size-12)/1.4 var(--font-mono); color: var(--text-meta); letter-spacing: var(--tracking-stamp); }
.assinatura { color: var(--aur-copper); flex: none; }
.no-aceso { fill: var(--aur-phosphor); }

/* botões: verbo em minúscula; o estado é por ELEMENTO, como no app (DS, estados interativos) */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit-comfortable);
  padding: 0 var(--space-20); border-radius: var(--radius-control); border: var(--border-width-hair) solid var(--border-hairline);
  background: transparent; color: var(--text-body); font: 600 var(--size-14)/1 var(--font-display); text-decoration: none; cursor: pointer;
  transition: filter var(--dur-quick) var(--ease-mechanical), transform var(--dur-quick) var(--ease-mechanical);
}
.botao:hover { filter: brightness(1.22); transform: translateY(-1px); color: var(--text-body); }
.botao:active { filter: brightness(0.94); transform: scale(0.985); }
.botao-primario { background: var(--aur-copper); border-color: var(--aur-copper); color: var(--aur-on-copper); }
.botao-primario:hover { color: var(--aur-on-copper); }
.botao-topo { min-height: var(--hit-min); padding: 0 var(--space-14); font-size: var(--size-13); }
.botao[disabled] { opacity: 0.45; filter: none; transform: none; cursor: default; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-control); }

/* abertura */
.abertura { padding: var(--space-56) 0 var(--space-40); }
.abertura h1 { margin-top: var(--space-20); max-width: 15ch; font: 600 var(--size-52)/var(--leading-tight) var(--font-display); letter-spacing: -0.02em; }
.destaque { margin-top: var(--space-24); max-width: 60ch; font-size: var(--size-19); line-height: var(--leading-prose); color: var(--text-body); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
.miudo { margin-top: var(--space-14); font: 400 var(--size-13)/1.5 var(--font-display); color: var(--text-meta); }

/* telas reais: conteúdo, então sólido, com hairline e sem sombra */
.tela { margin-top: var(--space-48); }
.tela a { display: block; cursor: zoom-in; }
.tela img { border: var(--border-width-hair) solid var(--border-hairline); border-radius: var(--radius-card); background: var(--surface-card); }
.tela figcaption { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-14); align-items: baseline; margin-top: var(--space-12); font-size: var(--size-14); color: var(--text-meta); }

.secao { padding: var(--space-56) 0; border-top: var(--border-width-hair) solid var(--border-hairline); }
.secao h2 { font: 600 var(--size-32)/var(--leading-tight) var(--font-display); letter-spacing: -0.01em; }
.secao h2 + p, .coluna > p { margin-top: var(--space-16); color: var(--text-body); }
.coluna > p + p { margin-top: var(--space-12); }

.passos { list-style: none; margin: var(--space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.passos li { padding: var(--space-24); background: var(--surface-card); border: var(--border-width-hair) solid var(--border-hairline); border-radius: var(--radius-card); }
.numero { display: block; font: 500 var(--size-12)/1 var(--font-mono); color: var(--text-action); letter-spacing: var(--tracking-stamp); }
.passos h3 { margin-top: var(--space-14); font: 600 var(--size-19)/1.3 var(--font-display); }
.passos p { margin-top: var(--space-10); font-size: var(--size-15); color: var(--text-meta); }

.duas { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-40); margin-top: var(--space-32); }
.rotulo { font: 500 var(--size-12)/1 var(--font-mono); letter-spacing: var(--tracking-stamp); color: var(--text-meta); }
.evidencias, .ausencias, .lista-simples { list-style: none; margin: var(--space-16) 0 0; padding: 0; }
/* a borda-esquerda de 2px é sinal no DS: copper = evidência */
.evidencias li { padding: var(--space-14) var(--space-18); border-left: var(--border-width-signal) solid var(--aur-copper); background: var(--surface-card); border-radius: 0 var(--radius-inline) var(--radius-inline) 0; }
.evidencias li + li { margin-top: var(--space-10); }
.numero-grande { font: 500 var(--size-24)/1.2 var(--font-mono); color: var(--text-action); }
.numero-grande span { font-size: var(--size-14); color: var(--text-meta); font-weight: 400; }
.evidencias li p + p { margin-top: var(--space-6); font-size: var(--size-14); color: var(--text-meta); }
.ausencias li { padding: var(--space-12) 0; border-bottom: var(--border-width-hair) solid var(--border-hairline); color: var(--text-meta); font-size: var(--size-15); }
.ausencias li:first-child { padding-top: var(--space-4); }

.principios { margin: var(--space-24) 0 0; }
.principios div { padding: var(--space-14) 0; border-bottom: var(--border-width-hair) solid var(--border-hairline); }
.principios dt { font: 600 var(--size-16)/1.4 var(--font-display); }
.principios dd { margin: var(--space-4) 0 0; color: var(--text-meta); font-size: var(--size-15); }

.lista-simples li { position: relative; padding: var(--space-10) 0 var(--space-10) var(--space-20); color: var(--text-body); }
.lista-simples li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-10) + 0.78em); width: var(--space-8); height: var(--border-width-hair); background: var(--text-meta); }

/* a lista de espera: a única ação da página */
.secao-lista { background: var(--surface-card); }
.formulario { margin-top: var(--space-24); }
.largura.coluna > .formulario { max-width: calc(var(--col-read) * 0.72); }
.campo + .campo { margin-top: var(--space-16); }
.campo label, .caixa label { display: block; font: 600 var(--size-14)/1.4 var(--font-display); }
.opcional { font: 400 var(--size-12) var(--font-mono); color: var(--text-meta); margin-left: var(--space-6); }
.campo input, .campo select {
  width: 100%; margin-top: var(--space-6); min-height: var(--hit-comfortable); padding: 0 var(--space-14);
  background: var(--surface-page); color: var(--text-body); border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-input); font: 400 var(--size-15) var(--font-display);
}
.campo input::placeholder { color: var(--text-meta); opacity: 0.8; }
.campo input[aria-invalid="true"], .caixa input[aria-invalid="true"] { border-color: var(--aur-danger); }
.caixa { display: flex; gap: var(--space-12); align-items: flex-start; margin-top: var(--space-20); }
.caixa input { flex: none; width: var(--size-20); height: var(--size-20); margin: var(--space-2) 0 0; accent-color: var(--aur-copper); }
.caixa label { font-weight: 400; }
.erro { margin-top: var(--space-6); font-size: var(--size-14); color: var(--text-error); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anti-robo { margin-top: var(--space-16); min-height: 0; }
.formulario button { margin-top: var(--space-20); }
.estado { margin-top: var(--space-14); font-size: var(--size-15); }
.estado[data-tipo="ok"] { color: var(--text-cognition); }
.estado[data-tipo="erro"] { color: var(--text-error); }

details { border-bottom: var(--border-width-hair) solid var(--border-hairline); }
details:first-of-type { margin-top: var(--space-16); }
summary { padding: var(--space-16) 0; font: 600 var(--size-16)/1.4 var(--font-display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-16); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-meta); }
details[open] summary::after { content: "−"; }
details p { padding: 0 0 var(--space-16); color: var(--text-meta); }

.rodape { padding: var(--space-40) 0 var(--space-56); border-top: var(--border-width-hair) solid var(--border-hairline); }
.rodape-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-32); }
.rodape-in > div { max-width: 52ch; }
.rodape .marca { display: block; margin-bottom: var(--space-10); }
.rodape p { color: var(--text-meta); font-size: var(--size-14); }
.ficha { display: grid; grid-template-columns: auto auto; gap: var(--space-6) var(--space-20); margin: 0; font: 400 var(--size-13)/1.5 var(--font-mono); }
.ficha div { display: contents; }
.ficha dt { color: var(--text-meta); }
.ficha dd { margin: 0; color: var(--text-body); }

@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; }
  .duas { grid-template-columns: 1fr; gap: var(--space-32); }
  .topo nav { display: none; }
  .botao-topo { margin-left: auto; }
}
@media (max-width: 560px) {
  .largura { padding: 0 var(--space-16); }
  .abertura { padding-top: var(--space-40); }
  .abertura h1 { font-size: var(--size-32); }
  .destaque { font-size: var(--size-16); }
  .secao { padding: var(--space-40) 0; }
  .secao h2 { font-size: var(--size-24); }
  .acoes .botao, .formulario button { width: 100%; }
  .titulo-pagina { font-size: var(--size-32); }
}
/* em movimento reduzido o movimento sai e o sinal fica */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao { transition: none; }
  .botao:hover, .botao:active { transform: none; }
}
@media (max-width: 767px) { .largura.coluna > .formulario { max-width: none; } }

/* a política: texto corrido, mesma coluna */
.politica { border-top: none; }
.titulo-pagina { margin-top: var(--space-12); font: 600 var(--size-40)/var(--leading-tight) var(--font-display); }
.politica h2 { margin-top: var(--space-40); font-size: var(--size-20); }
.politica h2 + p, .politica p + p, .politica ul + p { margin-top: var(--space-12); }
.politica > .coluna > p:first-of-type { margin-top: var(--space-16); }