/* NoAr / OnAir: site público.
   Identidade da marca: preto puro, superfícies por degrau de luminosidade, sem sombras em repouso, Inter no texto
   e Archivo (a fonte do logo, licença OFL) só nos títulos grandes. O vermelho da lâmpada é a única cor de marca;
   o verde só aparece como estado (Prévia, versão publicada). Sem gradientes, sem linhas finas: separação por espaço
   e por degrau de tom. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-display.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --s1: #111;
  --s2: #2a2a2a;
  --s3: #444;
  --ink: #fff;
  --ink-2: #b4b4b4;
  --ink-3: #949494;
  --red: #d92d2d;
  --red-hi: #e53a3a;
  --green: #2bc35f;
  --r: 6px;                       /* um só raio de canto: botões, quadros, painéis */
  --gutter: 16px;
  --max: 1280px;
  color-scheme: dark;
  --head-h: 0px;                  /* altura do cabeçalho fixo (só em telas largas) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (min-width: 700px) { :root { --gutter: 32px; --head-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(255, 255, 255, .14); scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  font-feature-settings: "calt", "kern";
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--red); color: #fff; }
p, li, dd { overflow-wrap: break-word; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a, button, summary, [role="tab"] { touch-action: manipulation; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
code, kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em;
  background: var(--s2); padding: .12em .4em; border-radius: 4px; overflow-wrap: anywhere;
}
pre { background: var(--s2); padding: 18px 20px; border-radius: var(--r); margin: 0 0 1em; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
pre code { background: none; padding: 0; }
strong { font-weight: 650; }

.skip { position: absolute; left: 8px; top: -80px; background: #fff; color: #000; padding: 12px 16px; z-index: 30; font-weight: 600; border-radius: var(--r); }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

/* ---------------------------------------------------------------- Cabeçalho */
.site-header { padding-block: 12px; background: var(--bg); }
@media (min-width: 700px) { .site-header { position: sticky; top: 0; z-index: 20; height: var(--head-h); padding-block: 0; display: flex; align-items: center; } .site-header .wrap { width: 100%; } }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.brand { display: inline-flex; align-items: center; min-height: 48px; border-radius: var(--r); }
.brand img { height: 30px; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; padding: 0; list-style: none; }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--r);
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .9375rem; transition: color .15s, background-color .15s;
}
.site-nav a:hover { color: var(--ink); background: var(--s1); }
/* a página atual está "No ar": lâmpada vermelha */
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--s1); }
.site-nav a[aria-current="page"]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.site-nav .lang a { color: var(--ink); background: var(--s2); font-weight: 650; margin-left: 8px; }
.site-nav .lang a:hover { background: var(--s3); }
@media (max-width: 699px) {
  .site-header .wrap { flex-direction: column; align-items: stretch; }
  .site-nav { justify-content: flex-start; margin-inline: -16px; }
  .site-nav a { padding: 0 16px; }
  .site-header .wrap { position: relative; }
  .site-nav .lang { position: absolute; top: 0; right: 16px; margin: 0; }
  .site-nav .lang a { margin: 0; }
  .brand { align-self: flex-start; }
}

/* ---------------------------------------------------------------- Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  background: var(--s2); color: var(--ink); text-decoration: none; border-radius: var(--r); border: 0;
  font: inherit; font-weight: 650; cursor: pointer; transition: background-color .15s, transform .12s;
}
.btn:hover { background: var(--s3); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-hi); }
.btn[aria-disabled="true"] { background: var(--s1); color: var(--ink-3); cursor: default; }
.btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:active { background: var(--s1); transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Lojas: link real quando publicado; "Em breve" é texto, não link, e não parece clicável */
.stores { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.stores li { margin: 0; }
.store { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 22px; border-radius: var(--r); font-weight: 650; text-decoration: none; }
a.store { background: var(--s2); color: var(--ink); transition: background-color .15s; }
a.store::after { content: "\2192"; font-weight: 500; }
a.store:hover { background: var(--s3); }
.store.soon { color: var(--ink-3); background: var(--s1); cursor: default; }
.store .tag { font-size: .9375rem; font-weight: 600; }
.pkg .store.soon, .band .store.soon { background: var(--bg); }

/* Download: arquivos, tamanho e SHA-256 copiável (um toque seleciona tudo) */
table.dl td:first-child .btn { white-space: nowrap; }
table.dl td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.fname { display: block; margin-top: 8px; color: var(--ink-3); font-size: .9375rem; overflow-wrap: anywhere; }
.hash { display: block; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.status { position: relative; padding-left: 26px; font-weight: 650; margin-bottom: 20px; }
.status::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--s3); }
.status.on::before { background: var(--green); }

/* ---------------------------------------------------------------- Início: abertura */
.hero { padding-block: clamp(28px, 5vw, 72px) 0; }
.hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 9.2vw, 9rem);
  line-height: .95; letter-spacing: -0.035em; word-spacing: .06em;
}
.section-head h2, .cta h2, .statement h2, .cols-2 > div > h2, .page-head h1, .rows h3, .node h3, .doc-body h2, .cols-2 h3 { word-spacing: .08em; }
/* o ponto final da frase é a lâmpada de No ar acesa; o anel é o da marca */
.dot { display: inline-block; position: relative; width: .4em; height: .4em; border-radius: 50%; background: var(--red); margin-left: .2em; }
.dot::after { content: ""; position: absolute; inset: -.17em; border-radius: 50%; border: .075em solid var(--red); opacity: .55; }
.hero-row { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.hero .lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink); max-width: 33em; margin: 0; }
.hero .btn-row { margin-top: 0; }
.hero-note { color: var(--ink-3); font-size: .9375rem; margin: 18px 0 0; }
.hero .stores { margin-top: 18px; }

.viewer-wrap { margin-top: clamp(36px, 6vw, 88px); }
.viewer .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.viewer .tabs[hidden] { display: none; }
.viewer [role="tab"] {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r); background: var(--s1); color: var(--ink-2);
  font: inherit; font-weight: 650; cursor: pointer; transition: background-color .15s, color .15s;
}
.viewer [role="tab"]:hover { background: var(--s2); color: var(--ink); }
.viewer [role="tab"][aria-selected="true"] { background: var(--ink); color: #000; }
.viewer .panel[hidden] { display: none; }

/* ---------------------------------------------------------------- Capturas de tela (reais, só emolduradas) */
.shot { margin: 0 0 32px; }
.shot img { display: block; width: 100%; height: auto; background: var(--bg); border: 6px solid var(--s1); border-radius: 14px; }
@media (min-width: 700px) { .shot img { border-width: 8px; } }
.band .shot img, .pkg .shot img { border-color: var(--s2); }
.shot figcaption { color: var(--ink-3); font-size: .9375rem; line-height: 1.45; padding-top: 12px; max-width: 46em; }
.shot.wide, .shot.feat { margin-bottom: 0; }
.shot.host img { background: #fff; border-radius: 10px; }
.shot.tall { max-width: 560px; }

/* ---------------------------------------------------------------- Seções */
.section { padding-block: clamp(72px, 10vw, 160px); }
.band { background: var(--s1); }
.section-head { display: grid; gap: 20px 64px; margin-bottom: clamp(36px, 6vw, 72px); }
@media (min-width: 900px) { .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.section-head h2, .cta h2, .statement h2, .cols-2 > div > h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -0.035em;
}
.section-head p { color: var(--ink-2); margin: 0; font-size: 1.125rem; max-width: 32em; }

/* Como se liga: três etapas, do tablet ao programa */
.flow { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; } }
.flow > li { margin: 0; }
.node { background: var(--bg); padding: clamp(24px, 3vw, 40px); height: 100%; border-radius: var(--r); }
.flow > li:nth-child(3) .node { background: var(--s2); }
.flow > li:nth-child(5) .node { background: var(--s3); }
.node h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.08; margin-bottom: 14px; }
.node p { color: var(--ink-2); margin: 0; }
.flow > li:nth-child(5) .node p { color: #d4d4d4; }
@media (min-width: 900px) { .node { min-height: 280px; } }
.link-label {
  display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 6px;
  padding: 8px 16px; color: var(--ink-2); font-size: .9375rem; font-weight: 550; width: 156px; justify-content: flex-start; padding-top: 120px;
}
.link-label .arrow { font-size: 1.75rem; color: var(--ink); line-height: 1; }
@media (max-width: 899px) { .link-label { padding-top: 6px; width: auto; flex-direction: row; justify-content: flex-start; padding: 6px 4px; text-align: left; } .link-label .arrow { transform: rotate(90deg); font-size: 1.4rem; } }

/* Lista de funções */
.rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rows > li { margin: 0; display: grid; gap: 18px 64px; padding-block: clamp(36px, 5vw, 64px); align-content: start; }
@media (min-width: 900px) { .rows > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rows h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.02; letter-spacing: -0.03em; }
.rows p { color: var(--ink-2); margin: 0; font-size: 1.125rem; max-width: 36em; }
.rows .has-shot > figure { grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 24px); }

.tally { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); margin-right: 2px; }
.tally::before { content: ""; width: 12px; height: 12px; display: inline-block; background: var(--s3); border-radius: 2px; }
.tally.pgm::before { background: var(--red); }
.tally.pvw::before { background: var(--green); }

/* Tabelas */
.tablewrap { overflow-x: auto; max-width: 100%; border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 16px 20px; }
th { font-weight: 650; color: var(--ink); background: var(--s2); }
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background: var(--s1); }
tbody th { font-weight: 600; }
.band tbody tr:nth-child(odd) td, .band tbody tr:nth-child(odd) th, .pkg tbody tr:nth-child(odd) td { background: var(--bg); }
td { color: var(--ink); }
td.muted { color: var(--ink-2); }
@media (max-width: 699px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td, table.stack th { display: block; width: 100%; }
  table.stack thead { position: absolute; left: -9999px; }
  table.stack tr { margin-bottom: 10px; background: var(--s1); border-radius: var(--r); padding-block: 6px; }
  .band table.stack tr, .pkg table.stack tr { background: var(--bg); }
  table.stack td, table.stack th { background: transparent !important; padding: 8px 16px; }
  table.stack td::before { content: attr(data-l); display: block; color: var(--ink-3); font-size: .9375rem; }
}

.cols-2 { display: grid; gap: 40px 64px; }
@media (min-width: 900px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
.cols-2 h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; margin-bottom: 16px; }
.cols-2 .plain { font-size: 1.125rem; margin: 0; max-width: 30em; }
.plain { color: var(--ink-2); }
.small { font-size: .9375rem; color: var(--ink-3); }

/* Frases de posição: o texto grande é o layout */
.statement .cols-2 { align-items: start; gap: 28px 64px; }
@media (min-width: 900px) { .statement .cols-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.statement h2 { font-size: clamp(2.6rem, 7.6vw, 6.5rem); line-height: .96; }
.statement p { color: var(--ink-2); font-size: 1.125rem; max-width: 32em; }
.statement p:first-child { color: var(--ink); }

/* Em desenvolvimento */
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 64px; }
@media (min-width: 800px) { .todo { grid-template-columns: 1fr 1fr; } }
.todo li { margin: 0; padding: 18px 0 18px 32px; position: relative; font-size: 1.2rem; font-weight: 550; line-height: 1.35; }
.todo li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 12px; height: 12px; background: var(--s3); border-radius: 2px; }

.cta { text-align: center; }
.cta h2 { font-size: clamp(2.4rem, 7vw, 6rem); max-width: 13em; margin-inline: auto; }
.cta p { color: var(--ink-2); max-width: 34em; margin: 28px auto 0; font-size: 1.125rem; }
.cta .btn-row { margin-top: 36px; justify-content: center; }
.cta .btn:not(.primary) { background: var(--s2); }

/* ---------------------------------------------------------------- Documentos: manual, download, política, termos, suporte */
.page-head { padding-block: clamp(36px, 6vw, 96px) clamp(36px, 5vw, 72px); }
.page-head .wrap { display: grid; gap: 20px 64px; align-items: end; }
@media (min-width: 900px) { .page-head .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .page-head h1 { grid-column: 1; grid-row: 1 / span 3; } .page-head .lead, .page-head .contact { grid-column: 2; } }
.page-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.7rem, 7.4vw, 6.25rem); line-height: .96; letter-spacing: -0.04em; }
.page-head .lead { color: var(--ink); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 30em; margin: 0; }
.page-head .meta { color: var(--ink-3); margin: 0; font-size: .9375rem; grid-column: 1 / -1; }
@media (min-width: 900px) { .page-head .meta { grid-column: 2; } }
.page-head .contact { margin: 4px 0 0; font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 650; overflow-wrap: anywhere; }
.page-head .contact a { display: inline-flex; align-items: center; min-height: 48px; }

.doc { display: grid; gap: 28px; padding-bottom: clamp(72px, 9vw, 144px); }
@media (min-width: 1000px) { .doc { grid-template-columns: 280px minmax(0, 1fr); gap: 72px; } }
.toc { align-self: start; }
@media (min-width: 1000px) { .toc { position: sticky; top: calc(var(--head-h) + 16px); max-height: calc(100vh - var(--head-h) - 32px); overflow-y: auto; } }
.toc details { background: var(--s1); border-radius: var(--r); }
.toc summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-weight: 650; cursor: pointer; list-style: none; border-radius: var(--r); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.toc details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (min-width: 1000px) { .toc summary { cursor: default; } .toc summary::after { display: none; } }
.toc ol, .toc ul { list-style: none; margin: 0; padding: 0 8px 12px; }
.toc li { margin: 0; }
.toc a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: var(--r);
  color: var(--ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.3; transition: color .15s, background-color .15s;
}
.toc a:hover { color: var(--ink); background: var(--s2); }
/* o passo que está "No ar" na leitura */
.toc a[aria-current="location"] { color: var(--ink); background: var(--s2); font-weight: 600; }
.toc a[aria-current="location"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.doc-body { min-width: 0; }
.doc-body > section, .doc-body > div > section { scroll-margin-top: calc(var(--head-h) + 16px); }
.doc-body section { margin-bottom: clamp(80px, 9vw, 136px); }
@media (min-width: 1000px) { .doc-body section > p, .doc-body section > ul, .doc-body section > ol, .doc-body section > h3, .doc-body section > address { max-width: 40rem; } }
.doc-body p, .doc-body li { line-height: 1.7; }
.doc-body h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 24px; }
.doc-body h3 { font-size: 1.3rem; margin: 40px 0 14px; letter-spacing: -0.02em; }
.doc-body ul { padding-left: 1.3em; }
.doc-body ul.stores { padding-left: 0; }
.doc-body ul li::marker { color: var(--ink-3); }
.doc-body ol { list-style: none; padding: 0; counter-reset: passo; }
.doc-body ol > li { counter-increment: passo; position: relative; padding-left: 52px; margin-bottom: 1.1em; }
.doc-body ol > li::before {
  content: counter(passo); position: absolute; left: 0; top: .12em; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--s2); border-radius: var(--r); font-weight: 700; font-size: .9375rem; line-height: 1;
}
.doc-body a.anchor { color: inherit; text-decoration: none; }
.doc-body a.anchor:hover { text-decoration: underline; }
.doc-body .shot { margin: 28px 0 36px; }
.callout { background: var(--s1); padding: 22px 26px; margin: 28px 0; border-radius: var(--r); }
.callout > p { max-width: 40rem; }
.pkg .callout { background: var(--s2); }
.callout p:last-child { margin-bottom: 0; }
.callout .t { font-weight: 700; display: block; margin-bottom: 6px; font-size: 1.05rem; }
.pending { background: #3a2a00; color: #ffd98a; padding: 0 .3em; border-radius: 3px; font-weight: 600; overflow-wrap: anywhere; }

.pkg { background: var(--s1); padding: clamp(24px, 4vw, 52px); border-radius: var(--r); }
.doc-body section.pkg { margin-bottom: 20px; }
.doc-body section.pkg + section:not(.pkg) { margin-top: clamp(64px, 8vw, 112px); }
.pkg h2 { margin-bottom: 20px; }
.pkg .tablewrap { margin-block: 8px 20px; }

/* Perguntas: sem linhas, um bloco de tom atrás da aberta */
details.faq { margin-bottom: 4px; border-radius: var(--r); }
details.faq[open] { background: var(--s1); }
details.faq summary {
  min-height: 60px; display: flex; align-items: center; padding: 12px 22px; font-weight: 650; font-size: 1.125rem; cursor: pointer;
  list-style: none; gap: 16px; justify-content: space-between; border-radius: var(--r); transition: background-color .15s;
}
details.faq summary:hover { background: var(--s1); }
details.faq[open] summary:hover { background: transparent; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
details.faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.faq .ans { padding: 0 22px 22px; color: var(--ink-2); max-width: 42rem; }
details.faq .ans p:last-child { margin-bottom: 0; }
.pkg details.faq[open] { background: var(--bg); }

/* ---------------------------------------------------------------- Página não encontrada */
.page-head.err .wrap { align-items: center; }
.page-head.err .lead { max-width: 28em; }
.lamp-off { width: min(60vw, 260px); aspect-ratio: 1; border-radius: 50%; background: var(--s2); outline: 12px solid var(--s1); outline-offset: 12px; justify-self: start; margin: 12px; }
@media (min-width: 900px) { .page-head.err h1 { grid-row: 1; } .page-head.err .lead { grid-row: 2; grid-column: 1; } .lamp-off { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-right: 24px; } }

/* ---------------------------------------------------------------- Rodapé */
.site-footer { background: var(--s1); padding-block: clamp(56px, 7vw, 104px) clamp(32px, 4vw, 56px); }
.site-footer .top { display: grid; gap: 40px; }
@media (min-width: 900px) { .site-footer .top { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 56px; } }
.site-footer img.logo { height: 34px; width: auto; display: block; margin-bottom: 16px; }
.site-footer h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 12px; color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer p, .site-footer address { color: var(--ink-2); font-size: .9375rem; font-style: normal; margin: 0 0 .8em; line-height: 1.55; }
.site-footer .legal { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 4px 64px; }
@media (min-width: 900px) { .site-footer .legal { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.site-footer .legal p { max-width: 40em; }
.site-footer .mark { display: block; width: 100%; height: auto; margin-top: clamp(40px, 6vw, 96px); }

/* ---------------------------------------------------------------- Movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-head .wrap > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .page-head .wrap > :nth-child(2) { animation-delay: .08s; }
  .page-head .wrap > :nth-child(n+3) { animation-delay: .16s; }
  .reveal { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-row.reveal { animation-delay: .09s; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .dot::after { animation: acende 3.4s ease-in-out infinite; }
  @keyframes acende { 0%, 100% { opacity: .3; } 50% { opacity: .75; } }
  /* entrada das partes de cada seção: só quando o script rodou (sem JS, tudo já aparece) */
  .js [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
  .js [data-rv].in { opacity: 1; transform: none; }
}
@media print { body { background: #fff; color: #000; } .site-header, .site-footer .top, .site-footer .mark { display: none; } }

@media (min-width: 900px) { .rows .has-shot > figure.tall { grid-column: 2; } }