/* Catraca Ponto, site de apresentação. Decisões em docs/design-system.md.
   Celular primeiro. Tema claro por padrão, escuro por prefers-color-scheme.
   Seções .noite usam o azul-noite nos dois temas. Nada em linha: a CSP só aceita este arquivo. */

@font-face {
  font-family: "Montserrat";
  src: url("/site/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --fundo: #FFFFFF;
  --fundo-2: #F3F6FA;
  --cartao: #FFFFFF;
  --linha: #DCE2EB;
  --linha-forte: #B9C3D1;
  --texto: #17202E;
  --apoio: #485264;
  --legenda: #5A6475;

  --marca: #4372B8;
  --marca-forte: #365F9E;
  --marca-texto: #2F5694;
  --marca-suave: #EAF0F9;
  --acento: #5CBF90;
  --acento-texto: #1F7A52;
  --acento-suave: #E6F5EE;
  --ambar: #F5B92E;
  --ambar-texto: #8A5A00;
  --ambar-suave: #FFF4DB;
  --erro-texto: #B03A2E;
  --erro-suave: #FBEAE7;

  --noite: #101B30;
  --noite-2: #18263F;
  --noite-3: #0B1424;
  --noite-linha: #2C3D5C;

  --fone-moldura: #101B30;
  --sombra-1: 0 1px 2px rgba(16, 27, 48, .06), 0 4px 14px rgba(16, 27, 48, .06);
  --sombra-2: 0 2px 6px rgba(16, 27, 48, .08), 0 18px 44px rgba(16, 27, 48, .16);

  --raio-p: 8px;
  --raio: 12px;
  --raio-g: 18px;

  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --topo-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E131B;
    --fundo-2: #131A24;
    --cartao: #18202C;
    --linha: #2A3442;
    --linha-forte: #46536A;
    --texto: #E8EDF4;
    --apoio: #C2CAD7;
    --legenda: #A7B1C0;

    --marca-texto: #8FB3EA;
    --marca-suave: #1A2840;
    --acento-texto: #6CCB9C;
    --acento-suave: #14302A;
    --ambar-texto: #F0B860;
    --ambar-suave: #3A2C10;
    --erro-texto: #F08A7D;
    --erro-suave: #3A1E1B;

    --noite: #0A0F18;
    --noite-2: #121A27;
    --noite-3: #070B12;
    --noite-linha: #263347;

    --fone-moldura: #2A3442;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .45);
  }
}

/* Seções de impacto: azul-noite nos dois temas. Os componentes leem os mesmos tokens. */
.noite {
  --fundo: var(--noite);
  --fundo-2: var(--noite-2);
  --cartao: var(--noite-2);
  --linha: var(--noite-linha);
  --linha-forte: #4A5D80;
  --texto: #FFFFFF;
  --apoio: #C6D0E0;
  --legenda: #AAB6CA;
  --marca-texto: #9DBBEA;
  --marca-suave: #1D2E4D;
  --acento-texto: #6CCB9C;
  --acento-suave: #15362E;
  --ambar-texto: #F3BE68;
  --ambar-suave: #3B2E12;
  --erro-texto: #F4978B;
  --erro-suave: #3E2020;
  background: var(--noite);
  color: var(--texto);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 16px);
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--marca-texto); text-underline-offset: 3px; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
button, input { font: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 3px;
  border-radius: 6px;
}
.noite :focus-visible { outline-color: #9DBBEA; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: var(--raio-p);
  background: var(--marca); color: #FFFFFF; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

.caixa { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .caixa { padding: 0 32px; } }

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: 10px;
  font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.botao:active { transform: scale(.97); }
.botao-pri { background: var(--marca); color: #FFFFFF; }
.botao-pri:hover { background: var(--marca-forte); }
.botao-g { min-height: 56px; padding: 0 28px; font-size: 17px; }
.botao-p { min-height: 44px; padding: 0 16px; font-size: 15px; }
.botao-claro { background: #FFFFFF; color: #17202E; }
.botao-claro:hover { background: #E3EAF5; }
.botao-contorno { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); }
.botao-contorno:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }

.link-seta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--marca-texto); font-weight: 700; text-decoration: none;
}
.link-seta:hover { text-decoration: underline; }
.link-seta .ic { transition: transform .16s ease; }
.link-seta:hover .ic { transform: translateY(2px); }

.fonte {
  font-size: .875em; font-weight: 600; color: var(--marca-texto);
  text-decoration: underline; text-decoration-thickness: 1px;
}
.fonte .ic { display: inline-block; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; }
.nota-fonte { margin-top: 28px; font-size: 15px; color: var(--legenda); max-width: 78ch; }
.nota-fonte .fonte { font-size: 1em; margin-right: 12px; }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
.selo .ic { width: 14px; height: 14px; }
.selo-ok { background: var(--acento-suave); color: var(--acento-texto); }
.selo-ambar { background: var(--ambar-suave); color: var(--ambar-texto); }
.selo-erro { background: var(--erro-suave); color: var(--erro-texto); }
.selo-azul { background: var(--marca-suave); color: var(--marca-texto); }
.selo-neutro { background: var(--fundo-2); color: var(--apoio); box-shadow: inset 0 0 0 1px var(--linha); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--fundo);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.topo.rolou { border-bottom-color: var(--linha); box-shadow: 0 6px 20px rgba(16, 27, 48, .06); }
.topo-linha { display: flex; align-items: center; gap: 24px; min-height: var(--topo-h); }
.marca {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--texto); font-weight: 800; font-size: 18px; letter-spacing: -.015em; text-decoration: none;
}
.marca img { width: 36px; height: 24px; }
.menu { display: none; margin-left: auto; gap: 4px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--apoio); font-size: 15px; font-weight: 600; text-decoration: none; border-radius: var(--raio-p);
}
.menu a:hover { color: var(--texto); background: var(--fundo-2); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topo-cta { display: none; }
@media (min-width: 640px) { .topo-cta { display: inline-flex; } }
@media (min-width: 980px) {
  .menu { display: flex; }
  .topo-acoes { margin-left: 8px; }
}

/* ---------- Abertura ---------- */
.abertura { padding: 40px 0 64px; overflow: clip; }
.abertura-grade { display: grid; gap: 28px; }
.abertura-grade > h1 { min-width: 0; }
.palco { margin-top: 20px; }
.h1-termo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: .005em;
  color: var(--marca-texto);
}
.h1-termo::before { content: ""; flex: none; width: 28px; height: 4px; border-radius: 2px; background: var(--acento); }
.h1-tese {
  display: block;
  font-size: clamp(34px, 10.4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -.038em;
}
.h1-tese .frase { display: block; }
.h1-tese .frase-2 { color: var(--marca-texto); }
.lide { font-size: 18px; line-height: 1.6; color: var(--apoio); max-width: 60ch; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.abertura-nota { margin-top: 24px; font-size: 14.5px; color: var(--legenda); max-width: 60ch; }
.abertura-nota .fonte { font-size: 1em; }

.palco { min-width: 0; }
.palco figcaption, .anatomia-figura figcaption, .percurso figcaption, .espelho figcaption, .marcas-legenda {
  margin-top: 16px; font-size: 13.5px; color: var(--legenda);
}
.palco figcaption { text-align: center; }
.palco-cena { display: flex; flex-direction: column; align-items: center; max-width: 420px; margin: 0 auto; }

.fone {
  width: 268px; padding: 9px; border-radius: 40px;
  background: var(--fone-moldura); box-shadow: var(--sombra-2);
}
.fone-tela {
  border-radius: 31px; background: var(--cartao); color: var(--texto);
  padding: 14px 18px 20px; text-align: center;
}
.fone-barra { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--legenda); }
.fone-online { display: inline-flex; align-items: center; gap: 6px; }
.fone-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.fone-rotulo { margin-top: 24px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--legenda); }
.relogio { margin-top: 4px; font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
.relogio .d { display: inline-block; width: .64em; text-align: center; }
.relogio .s { display: inline-block; width: .3em; text-align: center; color: var(--marca-texto); }
.fone-data { font-size: 13px; color: var(--legenda); }
.fone-pessoa {
  display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 12px;
  border-radius: var(--raio); background: var(--fundo-2); text-align: left;
}
.fone-pessoa b { display: block; font-size: 14px; line-height: 1.3; }
.fone-pessoa small { display: block; font-size: 12px; line-height: 1.35; color: var(--legenda); }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca-texto); font-size: 13px; font-weight: 800;
}
.fone-provas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.fone-provas .selo { font-size: 12px; padding: 4px 9px; }
.fone-botao {
  display: flex; align-items: center; justify-content: center; margin-top: 16px; min-height: 52px;
  border-radius: 14px; background: var(--marca); color: #FFFFFF; font-size: 17px; font-weight: 800;
}
.fone-ultima { margin-top: 12px; font-size: 12px; color: var(--legenda); }

/* O recibo: cartão com picote e dados em fonte de máquina. */
.recibo {
  position: relative;
  background: var(--cartao); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 20px 18px 16px; box-shadow: var(--sombra-1);
}
.recibo::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 7px; height: 5px;
  background: radial-gradient(circle at 3px 2.5px, var(--linha-forte) 1.6px, transparent 2px) 0 0 / 11px 5px repeat-x;
}
.recibo-titulo { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.recibo-sub { margin-top: 2px; font-size: 13px; color: var(--legenda); }
.recibo-dados { margin-top: 12px; border-top: 1px dashed var(--linha-forte); }
.recibo-dados > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linha); font-size: 13px; }
.recibo-dados dt { color: var(--legenda); font-weight: 600; }
.recibo-dados dd { font-weight: 600; overflow-wrap: anywhere; }
.recibo-dados .hash { font-size: 12px; font-weight: 500; color: var(--apoio); }
.recibo-assinado { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--acento-texto); }

.recibo-palco { align-self: flex-start; width: 256px; margin-top: -52px; padding: 18px 16px 14px; transform: rotate(-2.5deg); z-index: 2; box-shadow: var(--sombra-2); }
.recibo-palco .recibo-dados > div { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 12px; padding: 5px 0; }
.recibo-palco .recibo-dados .hash { font-size: 10.5px; overflow-wrap: normal; }
.recibo-palco .recibo-titulo { font-size: 10.5px; }
.recibo-palco .recibo-assinado { font-size: 12px; }
.cartao-conferir {
  align-self: flex-end; width: 208px; margin-top: -12px; z-index: 3;
  display: grid; gap: 4px; justify-items: start; padding: 12px 14px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-2);
}
.cartao-conferir b { font-size: 14px; line-height: 1.3; }
.cartao-conferir small { font-size: 12px; line-height: 1.35; color: var(--legenda); }

@media (min-width: 700px) {
  .abertura { padding: 64px 0 88px; }
  .h1-termo { font-size: 17px; }
  .lide { font-size: 19px; }
  .h1-tese { font-size: clamp(38px, 5vw, 72px); line-height: 1.04; }
  .abertura-grade { gap: 36px; }
  .palco-cena { display: block; position: relative; width: 520px; max-width: 100%; height: 478px; }
  .fone { position: absolute; right: 0; top: 0; width: 276px; }
  .relogio { font-size: 47px; }
  .cartao-conferir { position: absolute; left: 0; top: 34px; width: 222px; margin: 0; }
  .recibo-palco { position: absolute; left: 6px; top: 176px; width: 258px; margin: 0; }
}
@media (min-width: 1040px) {
  .abertura { padding: 56px 0 96px; }
  .abertura-grade { grid-template-columns: minmax(0, 1fr) 520px; column-gap: 64px; row-gap: 44px; align-items: center; }
  .abertura-grade > h1 { grid-column: 1 / -1; }
  .palco { margin-top: 0; }
}

/* ---------- Seções ---------- */
.secao { padding: 64px 0; }
.secao-2 { background: var(--fundo-2); }
@media (min-width: 900px) { .secao { padding: 112px 0; } }

.cabeca { max-width: 640px; }
.cabeca-larga { max-width: 860px; }
.cabeca > p:not(.indice):not(.lide):not(.nota-fonte) { margin-top: 16px; color: var(--apoio); }
.indice {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-texto);
}
.indice span {
  display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 6px;
  border: 1.5px solid currentColor; border-radius: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0;
}
h2 { font-size: clamp(29px, 4.6vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
h2 + .lide { margin-top: 18px; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }

/* ---------- 01 Hoje ---------- */
.hoje-grade { display: grid; gap: 40px; }
.fato { margin-top: 32px; padding: 20px 22px; border-left: 4px solid var(--acento); background: var(--cartao); border-radius: 0 var(--raio) var(--raio) 0; box-shadow: var(--sombra-1); }
.fato-numero { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.fato-texto { margin-top: 10px; font-size: 16px; color: var(--apoio); }
.fato .fonte { display: inline-block; margin-top: 12px; padding: 4px 0; }
.teste { display: grid; gap: 12px; }
.teste li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
}
.teste .n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--marca-suave); color: var(--marca-texto); font-family: var(--mono); font-size: 17px; font-weight: 700;
}
.teste p { margin-top: 8px; font-size: 16px; color: var(--apoio); }
.hoje-tag {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 5px;
  background: var(--ambar-suave); color: var(--ambar-texto);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
.teste-fecho { margin-top: 24px; font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
@media (min-width: 980px) {
  .hoje-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .hoje-grade .cabeca { position: sticky; top: calc(var(--topo-h) + 32px); }
}

/* ---------- 02 A batida ---------- */
.anatomia { display: grid; gap: 40px; margin-top: 48px; }
.marcador {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--marca); color: #FFFFFF; font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1;
}
.marcador.vazio { background: transparent; }
.recibo-grande { max-width: 520px; padding: 26px 22px 20px; box-shadow: var(--sombra-2); }
.recibo-grande .recibo-titulo { font-size: 13px; }
.recibo-numerado > div { grid-template-columns: 132px minmax(0, 1fr); font-size: 14px; padding: 9px 0; align-items: start; }
.recibo-numerado dt { display: flex; align-items: center; gap: 8px; }
.recibo-grande .hash { font-size: 12.5px; }
.recibo-grande .recibo-assinado { font-size: 14px; }
.anatomia-lista { display: grid; gap: 4px; align-content: start; }
.anatomia-lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.anatomia-lista li:last-child { border-bottom: 0; }
.anatomia-lista .marcador { margin-top: 2px; }
.anatomia-lista p { margin-top: 4px; font-size: 16px; color: var(--apoio); }
@media (max-width: 479px) {
  .recibo-numerado > div { grid-template-columns: 112px minmax(0, 1fr); font-size: 13px; }
}
@media (min-width: 940px) {
  .anatomia { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; margin-top: 64px; }
  .anatomia-figura { position: sticky; top: calc(var(--topo-h) + 32px); }
}

/* ---------- 03 A corrente ---------- */
.corrente { display: grid; gap: 32px; margin-top: 48px; }
.corrente-cena { font-size: 18px; color: var(--apoio); }
.corrente-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.verificador {
  margin-top: 24px; padding: 18px 20px; border-radius: var(--raio);
  background: var(--noite-3); border: 1px solid var(--noite-linha); border-left: 4px solid var(--acento);
}
.verificador[data-estado="quebrado"] { border-left-color: var(--erro-texto); }
.verificador-rotulo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--legenda); }
.verificador-frase { margin-top: 8px; font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; }
.verificador[data-estado="quebrado"] .verificador-frase { color: var(--erro-texto); }
.verificador-nota { margin-top: 6px; font-size: 15px; color: var(--apoio); }
.tratamento { margin-top: 16px; padding: 18px 20px; border-radius: var(--raio); background: var(--acento-suave); border: 1px solid #25604C; }
.tratamento-titulo { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-texto); }
.tratamento p + p { margin-top: 8px; font-size: 15px; color: var(--apoio); }

.elos { position: relative; display: grid; gap: 10px; padding-left: 30px; }
.elos::before { content: ""; position: absolute; left: 8px; top: 26px; bottom: 26px; width: 2px; background: var(--noite-linha); }
.elo {
  position: relative; display: grid; gap: 10px; padding: 12px 14px;
  background: var(--noite-2); border: 1px solid var(--noite-linha); border-radius: var(--raio);
  transition: border-color .2s ease, background-color .2s ease;
}
.elo::before {
  content: ""; position: absolute; left: -29px; top: 18px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 4px var(--noite);
  transition: background-color .2s ease;
}
.elo[data-estado="quebrado"] { border-color: #8A3D36; background: #25182A; }
.elo[data-estado="quebrado"]::before { background: var(--erro-texto); }
.elo[data-estado="tratado"] { border-color: #25604C; }
.elo-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.elo-nsr { font-size: 14px; font-weight: 700; }
.elo-quem { font-size: 13.5px; color: var(--legenda); }
.elo-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.elo-hora { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.elo-hora > span, .elo-cod > span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--legenda); white-space: nowrap; }
.elo-cod .largo { display: none; }
.elo-hora input {
  width: 100%; max-width: 150px; min-height: 44px; padding: 6px 10px;
  background: var(--noite-3); color: #FFFFFF; border: 1.5px solid #7C90B5; border-radius: var(--raio-p);
  font-family: var(--mono); font-size: 17px; font-weight: 700; color-scheme: dark;
}
.elo-hora input:hover:not(:disabled) { border-color: #9DBBEA; }
.elo-hora input:disabled { opacity: 1; }
.elo-hora input.mexida { border-color: var(--erro-texto); color: var(--erro-texto); }
.elo-cod code { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--apoio); white-space: nowrap; }
.elo-cod code.difere { color: var(--erro-texto); font-weight: 700; }
.elo-estado { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13.5px; font-weight: 800; color: var(--acento-texto); }
.elo[data-estado="quebrado"] .elo-estado { color: var(--erro-texto); }
.elo-tratamento { font-size: 13.5px; color: var(--apoio); border-top: 1px dashed var(--noite-linha); padding-top: 10px; }
.elo-tratamento b { color: var(--acento-texto); }
@media (min-width: 620px) {
  .elo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "topo estado" "campos campos" "trat trat"; padding: 12px 16px 14px; }
  .elo-topo { grid-area: topo; }
  .elo-estado { grid-area: estado; justify-self: end; }
  .elo-campos { grid-area: campos; grid-template-columns: 150px repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
  .elo-tratamento { grid-area: trat; }
  .elo-hora { grid-column: auto; display: block; }
  .elo-hora > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .elo-cod .largo { display: inline; }
  .elo-cod code { padding-bottom: 10px; font-size: 13.5px; }
}
@media (min-width: 1020px) {
  .corrente { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; margin-top: 56px; }
  .corrente-lado { position: sticky; top: calc(var(--topo-h) + 32px); }
}

.trio { display: grid; gap: 28px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--linha); }
.trio p { margin-top: 8px; font-size: 16px; color: var(--apoio); }
.trio .fonte { font-size: 1em; }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* ---------- 04 Sem sinal ---------- */
.campo-grade { display: grid; gap: 40px; }
.pontos { display: grid; gap: 20px; margin-top: 32px; }
.pontos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.pontos .ic { width: 24px; height: 24px; margin-top: 2px; color: var(--marca-texto); }
.pontos p { margin-top: 4px; font-size: 16px; color: var(--apoio); }
.percurso-passos { position: relative; display: grid; gap: 14px; padding-left: 34px; }
.percurso-passos::before { content: ""; position: absolute; left: 10px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(to bottom, var(--linha-forte) 0 6px, transparent 6px 12px); }
.passo { position: relative; padding: 18px 20px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.passo::before { content: ""; position: absolute; left: -32px; top: 22px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 4px var(--fundo); }
.passo-off::before { background: var(--ambar); }
.passo-envio::before { background: var(--marca); }
.passo-ok::before { background: var(--acento); }
.passo-hora { font-size: 26px; font-weight: 700; line-height: 1.1; }
.passo-titulo { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 16px; font-weight: 800; }
.passo-off .passo-titulo { color: var(--ambar-texto); }
.passo-envio .passo-titulo { color: var(--marca-texto); }
.passo-ok .passo-titulo { color: var(--acento-texto); }
.passo p:last-child { margin-top: 6px; font-size: 15.5px; color: var(--apoio); }
@media (min-width: 980px) {
  .campo-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
}

.meios { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--linha); }
.meios-titulo { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.meios-lista { display: grid; gap: 12px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.meios-lista li { padding: 20px; background: var(--fundo-2); border-radius: var(--raio); }
.meios-lista .ic { width: 26px; height: 26px; color: var(--marca-texto); }
.meios-lista h4 { margin-top: 14px; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.meios-lista p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--apoio); }
.meios-nota { margin-top: 20px; font-size: 16px; color: var(--apoio); }

/* ---------- 05 A conferir ---------- */
.conferir-grade { display: grid; gap: 40px; }
.marcas { min-width: 0; }
.marcas-opcoes { display: grid; gap: 4px; padding: 20px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio) var(--raio) 0 0; border-bottom: 0; }
.marcas-opcoes legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.chave { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; cursor: pointer; clear: both; }
.chave input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.chave-trilho { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: #8792A2; transition: background-color .16s ease; }
.chave-trilho::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .16s ease; }
.chave input:checked + .chave-trilho { background: var(--marca); }
.chave input:checked + .chave-trilho::after { transform: translateX(22px); }
.chave input:focus-visible + .chave-trilho { outline: 3px solid var(--marca); outline-offset: 3px; }
.chave-texto { font-size: 16px; font-weight: 600; }
.marcas-saida { border-radius: 0 0 var(--raio) var(--raio); padding-top: 24px; }
.marcas-resultado { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--acento-texto); }
.marcas-saida .recibo-dados > div { grid-template-columns: 116px minmax(0, 1fr); font-size: 14px; }
.marcas-rotulo { margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--legenda); }
.marcas-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 30px; }
.marcas-vazio { font-size: 15px; color: var(--apoio); }
.marcas-destino { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha-forte); font-size: 15.5px; font-weight: 700; }
@media (min-width: 560px) { .marcas-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .marcas-opcoes legend { grid-column: 1 / -1; } }
@media (min-width: 980px) {
  .conferir-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
}

/* ---------- 06 O mês ---------- */
.etapas { display: grid; gap: 28px; margin-top: 48px; counter-reset: etapa; }
.etapas li { position: relative; padding-top: 20px; border-top: 2px solid var(--linha); }
.etapa-n {
  position: absolute; top: -15px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--marca); color: #FFFFFF; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 5px var(--fundo);
}
.etapas p { margin-top: 8px; font-size: 16px; color: var(--apoio); }
@media (min-width: 640px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (min-width: 1040px) { .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; } }

.espelho { margin-top: 56px; }
.espelho-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px; background: var(--cartao); border: 1px solid var(--linha); border-bottom: 0; border-radius: var(--raio) var(--raio) 0 0; }
.espelho-titulo { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.espelho-sub { margin-top: 2px; font-size: 14px; color: var(--legenda); }
.espelho-rolagem { background: var(--cartao); border: 1px solid var(--linha); border-radius: 0 0 var(--raio) var(--raio); box-shadow: var(--sombra-1); }
.espelho-tabela th, .espelho-tabela td { padding: 14px 20px; text-align: left; font-size: 15px; vertical-align: top; border-top: 1px solid var(--linha); }
.espelho-tabela thead th { border-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--legenda); background: var(--fundo-2); }
.espelho-tabela tbody th { font-weight: 700; white-space: nowrap; }
.espelho-tabela .n { text-align: right; }
.espelho-tabela td.mono { font-size: 14.5px; }
.espelho-tabela .vago { color: var(--legenda); font-family: var(--sans); }
.espelho-tabela small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--legenda); }
.incluida { padding: 1px 5px; border-radius: 4px; background: var(--marca-suave); color: var(--marca-texto); font-weight: 700; box-shadow: inset 0 0 0 1px var(--marca-texto); }
@media (max-width: 719px) {
  .espelho-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .espelho-tabela, .espelho-tabela tbody { display: block; }
  .espelho-tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; border-top: 1px solid var(--linha); }
  .espelho-tabela tr:first-child { border-top: 0; }
  .espelho-tabela th, .espelho-tabela td { display: block; padding: 0; border: 0; }
  .espelho-tabela tbody th { grid-column: 1; }
  .espelho-tabela td.n { grid-column: 2; grid-row: 1; }
  .espelho-tabela td:nth-child(2) { grid-column: 1 / -1; }
  .espelho-tabela td:last-child { grid-column: 1 / -1; margin-top: 4px; }
}

.rotina { margin-top: 56px; }
.rotina h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fichas li { padding: 9px 14px; border-radius: 999px; background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--linha); font-size: 15px; font-weight: 600; color: var(--texto); }

/* ---------- 07 Saídas ---------- */
.saidas { display: grid; gap: 12px; margin-top: 48px; }
.saida { display: flex; flex-direction: column; padding: 22px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.saida .ic { width: 26px; height: 26px; color: var(--marca-texto); }
.saida h3 { margin-top: 16px; }
.saida p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--apoio); }
.art { align-self: flex-start; margin-top: auto; padding: 3px 9px; border-radius: 6px; background: var(--marca-suave); color: var(--marca-texto); font-size: 12.5px; font-weight: 700; }
.saida p + .art { margin-top: 14px; }
.saida-g { background: var(--noite); border-color: var(--noite); color: #FFFFFF; }
.saida-g .ic { color: #9DBBEA; }
.saida-g h3 { font-size: 22px; letter-spacing: -.02em; }
.saida-g p { color: #C6D0E0; font-size: 16px; }
.saida-g .art { background: #1D2E4D; color: #9DBBEA; }
@media (prefers-color-scheme: dark) { .saida-g { background: var(--noite-2); border-color: var(--noite-linha); } }
@media (min-width: 640px) { .saidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .saidas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .saida { grid-column: span 2; }
  .saida-g { grid-column: span 3; padding: 28px; }
}

/* ---------- 08 Dados ---------- */
.grade-3 { display: grid; gap: 32px; margin-top: 48px; }
.grade-3 > li > .ic { width: 26px; height: 26px; color: var(--marca-texto); }
.grade-3 h3 { margin-top: 14px; }
.grade-3 p { margin-top: 6px; font-size: 16px; color: var(--apoio); }
.grade-3 .fonte { display: inline-block; margin-top: 10px; padding: 4px 0; }
@media (min-width: 640px) { .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (min-width: 1040px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; } }

/* ---------- 09 Limites ---------- */
.limites-grade, .implantacao-grade, .perguntas-grade { display: grid; gap: 40px; }
.limites { display: grid; gap: 0; }
.limites li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.limites li:first-child { padding-top: 0; }
.limites li:last-child { border-bottom: 0; }
.limites li > .ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha); color: var(--apoio); }
.limites p { margin-top: 4px; font-size: 16px; color: var(--apoio); }
.limites .fonte { display: inline-block; margin-top: 8px; padding: 4px 0; }
@media (min-width: 980px) {
  .limites-grade, .implantacao-grade, .perguntas-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .limites-grade .cabeca, .implantacao-grade .cabeca, .perguntas-grade .cabeca { position: sticky; top: calc(var(--topo-h) + 32px); }
}

/* ---------- 10 Implantação ---------- */
.trilha { position: relative; display: grid; gap: 28px; padding-left: 52px; counter-reset: passo; }
.trilha::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--linha); }
.trilha li { position: relative; counter-increment: passo; }
.trilha li::before {
  content: counter(passo); position: absolute; left: -52px; top: -4px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fundo); border: 2px solid var(--marca); color: var(--marca-texto);
  font-family: var(--mono); font-size: 15px; font-weight: 700;
}
.trilha p { margin-top: 4px; font-size: 16px; color: var(--apoio); }

/* ---------- 11 Perguntas ---------- */
.faq { border-top: 1px solid var(--linha-forte); }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 18px; }
.faq summary .ic { width: 22px; height: 22px; color: var(--marca-texto); transition: transform .2s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq summary:hover h3 { color: var(--marca-texto); }
.resposta { padding: 0 0 22px; max-width: 68ch; }
.resposta p { font-size: 16.5px; color: var(--apoio); }
.resposta p + p { margin-top: 10px; }
.resposta .nota-fonte { margin-top: 10px; font-size: 15px; }

/* ---------- Linha de soluções ---------- */
.irmaos { display: grid; gap: 16px; margin-top: 40px; }
.irmaos a { display: grid; gap: 8px; height: 100%; padding: 28px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-g); color: var(--texto); text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease; }
.irmaos a:hover { border-color: var(--marca); box-shadow: var(--sombra-1); }
.irmao-nome { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.irmao-texto { font-size: 16.5px; color: var(--apoio); }
.irmaos .link-seta { margin-top: 4px; }
.irmaos a:hover .link-seta .ic { transform: translateX(3px); }
@media (min-width: 760px) { .irmaos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Chamada final ---------- */
.final { padding-top: 0; }
.final-cartao { padding: 40px 24px; border-radius: 24px; }
.final-cartao h2 { max-width: 16ch; }
.final-cartao > p { margin-top: 16px; font-size: 18px; color: var(--apoio); max-width: 58ch; }
.final-contato { font-size: 15.5px; color: var(--apoio); }
.final-contato a { color: #FFFFFF; font-weight: 600; }
@media (max-width: 479px) {
  .final-cartao .botao { width: 100%; padding: 0 14px; font-size: 16px; }
  .final-cartao .botao .ic { display: none; }
}
.final-fluxo { display: none; }
@media (prefers-color-scheme: dark) { .final-cartao { background: var(--noite-2); box-shadow: inset 0 0 0 1px var(--noite-linha); } }
@media (min-width: 760px) { .final-cartao { padding: 72px 64px; } }
@media (min-width: 1000px) {
  .final-cartao { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 64px; align-items: center; }
  .final-cartao > h2, .final-cartao > p, .final-cartao > .acoes { grid-column: 1; }
  .final-fluxo { grid-column: 2; grid-row: 1 / span 3; position: relative; display: grid; gap: 14px; }
  .final-fluxo::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: var(--noite-linha); }
  .final-fluxo li { position: relative; display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 700; color: #FFFFFF; }
  .final-fluxo span { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--noite-3); border: 1px solid var(--noite-linha); color: #9DBBEA; }
  .final-fluxo .ic { width: 20px; height: 20px; }
  .final-fluxo li:last-child span { background: var(--acento-suave); border-color: #25604C; color: var(--acento-texto); }
}

/* ---------- Rodapé ---------- */
.rodape { padding: 48px 0 112px; border-top: 1px solid var(--linha); background: var(--fundo); font-size: 15px; color: var(--apoio); }
.rodape-grade { display: grid; gap: 28px; }
.logo-rodape img { width: 180px; height: 27px; }
.rodape-marca p { margin-top: 12px; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--apoio); font-weight: 600; }
.rodape-links a:hover { color: var(--marca-texto); }
.rodape-nota { font-size: 13.5px; color: var(--legenda); }
@media (min-width: 640px) { .rodape { padding-bottom: 56px; } }
@media (min-width: 860px) {
  .rodape-grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .rodape-nota { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--linha); }
}

/* ---------- Barra de chamada no celular ---------- */
.barra-celular {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--fundo); border-top: 1px solid var(--linha); box-shadow: 0 -8px 24px rgba(16, 27, 48, .1);
  transform: translateY(110%); visibility: hidden;
  transition: transform .26s ease, visibility 0s linear .26s;
}
.barra-celular.visivel { transform: none; visibility: visible; transition: transform .26s ease, visibility 0s; }
.barra-celular .botao { width: 100%; }
@media (min-width: 640px) { .barra-celular { display: none; } }

/* ---------- Páginas internas ---------- */
.pagina { padding: 48px 0 88px; }
.pagina .caixa { max-width: 820px; }
.pagina h1 { font-size: clamp(34px, 6vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.pagina .lide { margin-top: 20px; }
.pagina h2 { margin-top: 48px; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.pagina h2 + p, .pagina h2 + ul, .pagina h2 + dl { margin-top: 12px; }
.pagina p + p, .pagina p + ul, .pagina ul + p { margin-top: 12px; }
.pagina .prosa { color: var(--apoio); }
.pagina .prosa ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.pagina .prosa b, .pagina .prosa strong { color: var(--texto); }
.ficha { margin-top: 32px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra-1); }
.ficha > div { display: grid; gap: 2px; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.ficha > div:last-child { border-bottom: 0; }
.ficha dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--legenda); }
.ficha dd { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ficha > div { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; gap: 16px; } }
.pagina .irmaos { margin-top: 20px; }
.pagina .acoes { margin-top: 40px; }
.atualizado { margin-top: 40px; font-size: 14px; color: var(--legenda); }
.erro-404 { min-height: 60vh; display: grid; align-content: center; }
.erro-404 .indice { margin-bottom: 14px; }

/* ---------- Entrada das seções ---------- */
[data-revelar] { transition: opacity .28s ease-out, transform .28s ease-out; }
[data-revelar].antes { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  [data-revelar].antes { opacity: 1; transform: none; }
}

@media print {
  .topo, .barra-celular, .pular { display: none; }
  [data-revelar].antes { opacity: 1; transform: none; }
}