/* Gerado por scripts/gerar-site.mjs. As cores são as do app: Oliveira e pedra; Hésperos no modo escuro. */
@font-face { font-family: 'Figtree'; src: url('fontes/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fontes/eb-garamond-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root {
  --fundo: #f5f2ea; --superficie: #fffdf8; --texto: #26332c;
  --suave: #46684f; --link: #3f5546; --marca: #fff3c4; --linha: #cdd5cb;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #182f3d; --superficie: #203b49; --texto: #d3dfe1;
    --suave: #aebfc2; --link: #a9dae4; --marca: #5a4a1c; --linha: #3b5a69;
    color-scheme: dark;
  }
  .marca img, .assinatura img { filter: brightness(0) invert(0.9); }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1.0625rem/1.6 'Figtree', system-ui, sans-serif; }
.dentro, main { max-width: 68rem; margin: 0 auto; padding-inline: 1rem; }
main { padding-block: 0 3rem; }
main.texto > * { max-width: 44rem; }
h1, h2, h3 { font-family: 'EB Garamond', Georgia, serif; font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 6vw, 3rem); margin: 2rem 0 1rem; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 2.5rem 0 0.5rem; }
h3 { font-size: 1.375rem; margin: 0 0 0.5rem; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.pular { position: absolute; left: 1rem; top: -4rem; padding: 0.75rem 1rem; background: var(--superficie); border-radius: 12px; z-index: 2; }
.pular:focus { top: 1rem; }
.preliminar { margin: 0; padding: 0.75rem 1rem; background: var(--marca); text-align: center; font-size: 1rem; }

/* Cabeçalho: marca, menu e o botão do app; no celular, o menu vira um <details>. */
.topo { border-bottom: 1px solid var(--linha); }
.topo .dentro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; position: relative; }
.marca { display: inline-flex; min-height: 48px; align-items: center; }
.menu { display: none; align-items: center; gap: 0.25rem 1.25rem; }
.menu a:not(.botao), .menu-celular nav a:not(.botao) { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 600; }
.menu a[aria-current='page'], .menu-celular a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; }
.menu-celular summary { list-style: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem;
  border: 1px solid var(--linha); border-radius: 999px; font-weight: 600; cursor: pointer; }
.menu-celular summary::-webkit-details-marker { display: none; }
.menu-celular summary::after { content: ''; width: 0.5rem; height: 0.5rem; margin-left: 0.5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.menu-celular[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.menu-celular nav { position: absolute; right: 1rem; left: 1rem; top: 100%; z-index: 3; display: grid; gap: 0.25rem; padding: 0.75rem 1.25rem 1.25rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); }
.menu-celular nav .botao { justify-self: start; margin-top: 0.5rem; }
@media (min-width: 52rem) {
  .menu { display: flex; }
  .menu-celular { display: none; }
}

/* Botões: o principal é cheio; o outro, só o contorno. Todos com 48px. */
.botoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.botao { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--link);
  border-radius: 999px; font-weight: 600; text-decoration: none; }
.botao.principal { background: var(--link); color: var(--fundo); }

/* Início: a abertura em duas colunas no computador. */
.abertura { display: grid; gap: 1.5rem; align-items: center; padding-top: 1rem; }
.abertura h1 { margin-top: 1rem; }
.chamada { font-size: 1.25rem; }
.nota, .sub { color: var(--suave); font-size: 1rem; }
.capa { border-radius: 20px; aspect-ratio: 16 / 9; max-width: 100%;
  background: url('imagens/egeu.webp') center / cover, var(--superficie); }
@media (min-width: 52rem) {
  .abertura { grid-template-columns: 1.1fr 1fr; gap: 3rem; padding-top: 2rem; }
  .capa { aspect-ratio: 4 / 5; max-height: 34rem; }
}
.secao { margin-top: 4rem; }
.secao > h2 { margin-top: 0; }
.cartoes { display: grid; gap: 1rem; margin-block: 1.5rem; }
@media (min-width: 40rem) { .cartoes.quatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) {
  .cartoes.tres { grid-template-columns: repeat(3, 1fr); }
  .cartoes.quatro { grid-template-columns: repeat(4, 1fr); }
}
.cartao { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 20px; min-width: 0; }
.cartao p { margin: 0; }
.cartao .captura { margin-top: auto; padding-top: 1rem; }
.porta { text-decoration: none; color: var(--texto); }
.porta strong { color: var(--link); font-size: 1.125rem; }
.porta:hover strong { text-decoration: underline; }
.destaque { padding: 1.5rem; background: var(--superficie); border-radius: 20px; border: 1px solid var(--linha); }
.pontos { padding-left: 1.25rem; }
.pontos li { margin-bottom: 0.5rem; }
.lista-nao { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.lista-nao li { padding: 0.75rem 1rem; border: 1px solid var(--linha); border-radius: 12px; }

/* O app: uma parte por linha, a captura alternando de lado. */
.recursos { display: grid; gap: 3rem; margin-top: 2.5rem; }
.recurso { display: grid; gap: 1rem; align-items: center; }
.recurso > div { min-width: 0; max-width: 36rem; }
.recurso h2 { margin-top: 0; }
@media (min-width: 40rem) {
  .recurso { grid-template-columns: 16rem 1fr; gap: 3rem; }
  .recurso:nth-child(even) { grid-template-columns: 1fr 16rem; }
  .recurso:nth-child(even) .captura { order: 2; }
}
.captura { margin: 0; justify-self: center; width: 100%; max-width: 16rem; }
.captura img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--linha); }
.captura figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--suave); text-align: center; }

/* Ajuda */
.indice { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--linha); border-radius: 999px; text-decoration: none; font-weight: 600; }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary { cursor: pointer; min-height: 48px; padding: 0.75rem 0; font-weight: 600; }
.pergunta p { margin-top: 0; }
.compromissos dt { font-weight: 700; margin-top: 1rem; }
.compromissos dd { margin: 0.25rem 0 0; }
.versao, .base { color: var(--suave); font-size: 1rem; }
mark { background: var(--marca); color: var(--texto); padding: 0 0.15em; border-radius: 3px; }
.tabela { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--superficie); }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }

/* Rodapé: a linha de emergência, as três colunas e a empresa. */
.rodape { background: var(--superficie); border-top: 1px solid var(--linha); padding-block: 2rem; }
.emergencia { padding-bottom: 1.5rem; border-bottom: 1px solid var(--linha); }
.emergencia h2 { font-family: 'Figtree', system-ui, sans-serif; font-size: 1.0625rem; margin: 0 0 0.25rem; }
.emergencia p { margin: 0.25rem 0; max-width: 44rem; }
.numeros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem !important; }
.numeros a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem; border: 1px solid var(--linha);
  border-radius: 999px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.colunas { display: grid; gap: 1.5rem; padding-top: 1.5rem; }
@media (min-width: 40rem) { .colunas { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.assinatura { margin: 0; color: var(--suave); font-size: 1rem; max-width: 18rem; }
.assinatura img { display: block; margin-bottom: 0.5rem; }
.colunas nav { display: flex; flex-direction: column; }
.colunas nav a { display: inline-flex; align-items: center; min-height: 44px; }
.colunas a[aria-current='page'] { font-weight: 700; }
.coluna { margin: 0 0 0.25rem; font-weight: 700; }
.empresa { color: var(--suave); font-size: 1rem; margin: 1.5rem 0 0; }
@media print { .rodape, .preliminar, .topo { display: none; } body { background: #fff; color: #000; } }