/* ATRACA · identidade do filme: grafite com grade blueprint, Archivo condensado e largo, Plex Mono nos capítulos */
:root {
  --g0: #0E131B; --g1: #161E29; --g2: #1F2935; --g3: #2B3645; --g4: #3A4658;
  --card-a: #212B38; --card-b: #1B2430;
  --borda: rgba(245, 243, 239, 0.09); --borda-forte: rgba(245, 243, 239, 0.17);
  --lar: #F26B1D; --lar-texto: #FF8D4D; --lar-fundo: rgba(242, 107, 29, 0.13);
  --ver: #1E9E71; --ver-texto: #4FD3A0; --ver-fundo: rgba(30, 158, 113, 0.15);
  --con: #F5F3EF; --texto2: #C9CFD8; --aco: #8B95A3; --aco2: #5B6676;
  --campo: #111821;
  --realce: rgba(245, 243, 239, 0.05); --realce-forte: rgba(245, 243, 239, 0.08);
  --grade-forte: rgba(245, 243, 239, 0.045); --grade-fraca: rgba(245, 243, 239, 0.018);
  --vinheta: rgba(6, 9, 13, 0.45); --luz: rgba(242, 107, 29, 0.11);
  --vidro: rgba(22, 30, 41, 0.82); --vidro-nav: rgba(14, 19, 27, 0.92); --painel: rgba(14, 19, 27, 0.55);
  --card-plano: #25303E;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.18); --sombra-hover: 0 16px 36px rgba(0, 0, 0, 0.28); --sombra-forte: 0 18px 40px rgba(0, 0, 0, 0.4);
  --inverso: #F5F3EF; --inverso-texto: #161E29;
  --lateral: 236px;
  --margem: 16px;

  /* Movimento: 180 micro · 280 padrão · 400 celebração; saída rápida, chegada suave */
  --mov-micro: 180ms; --mov-padrao: 280ms; --mov-celebra: 400ms;
  --mov-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

/* Versão light: concreto claro, mesma grade e mesmos acentos */
:root[data-tema="claro"] {
  --g0: #FFFFFF; --g1: #F3F1EC; --g2: #E9E5DD; --g3: #ECE8E1; --g4: #4A5462;
  --card-a: #FFFFFF; --card-b: #FCFBF8;
  --borda: rgba(27, 36, 49, 0.09); --borda-forte: rgba(27, 36, 49, 0.17);
  --lar-texto: #C24E08; --lar-fundo: rgba(242, 107, 29, 0.12);
  --ver-texto: #13795A; --ver-fundo: rgba(30, 158, 113, 0.12);
  --con: #1B2431; --texto2: #3D4756; --aco: #66707E; --aco2: #9AA3AE;
  --campo: #FFFFFF;
  --realce: rgba(27, 36, 49, 0.04); --realce-forte: rgba(27, 36, 49, 0.07);
  --grade-forte: rgba(27, 36, 49, 0.055); --grade-fraca: rgba(27, 36, 49, 0.022);
  --vinheta: rgba(27, 36, 49, 0.05); --luz: rgba(242, 107, 29, 0.07);
  --vidro: rgba(243, 241, 236, 0.86); --vidro-nav: rgba(255, 255, 255, 0.94); --painel: rgba(255, 255, 255, 0.7);
  --card-plano: #FFF8F2;
  --sombra: 0 1px 2px rgba(27, 36, 49, 0.05), 0 6px 18px rgba(27, 36, 49, 0.05); --sombra-hover: 0 10px 26px rgba(27, 36, 49, 0.1); --sombra-forte: 0 14px 34px rgba(27, 36, 49, 0.18);
  --inverso: #1B2431; --inverso-texto: #FFFFFF;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--g1); color: var(--con);
  font: 400 14px/1.45 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 520px at 50% 115%, var(--luz), transparent 70%),
              radial-gradient(ellipse 130% 90% at 50% 40%, transparent 60%, var(--vinheta) 100%);
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14.5px; color: var(--con); }
a, button { transition: background var(--mov-micro) ease, border-color var(--mov-micro) ease, color var(--mov-micro) ease, transform 120ms ease, box-shadow var(--mov-micro) ease; }
:focus-visible { outline: 2px solid var(--lar); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--lar); color: #fff; }

/* ---------- tipografia ---------- */
.display { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 88%; letter-spacing: -0.012em; line-height: 1.0; margin: 0; }
.largo { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 116%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mono { font-family: 'IBM Plex Mono', monospace; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px; }
.laranja { color: var(--lar); }
.aco { color: var(--aco); }
.verde-t { color: var(--ver-texto); }
.lar-t { color: var(--lar-texto); }
.wordmark { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 116%; letter-spacing: -0.01em; }
.sub { font-size: 12.5px; line-height: 1.45; color: var(--aco); }
.forte { color: var(--con); font-weight: 600; }
.exp { font-family: 'IBM Plex Sans', sans-serif; font-stretch: 100%; font-size: 0.82em; letter-spacing: 0; }

.capitulo { display: flex; align-items: center; gap: 9px; color: var(--con); }
.capitulo::before { content: ''; width: 8px; height: 8px; background: var(--lar); flex-shrink: 0; }
.capitulo .num { color: var(--aco); }

/* ---------- utilitários ---------- */
.linha { display: flex; align-items: center; }
.entre { justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.min0 { min-width: 0; }
.flex1 { flex: 1; min-width: 0; }
.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-desktop { display: none !important; }

/* ---------- casca ---------- */
#app { position: relative; z-index: 1; min-height: 100dvh; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; }
.conteudo { flex: 1; padding: 14px var(--margem) 100px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px var(--margem);
  background: var(--vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.topo .marca { display: flex; align-items: center; gap: 8px; }
.topo .wordmark { font-size: 16px; }
.btn-icone {
  position: relative; width: 40px; height: 40px; border-radius: 10px; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
}
.btn-icone:hover { background: var(--realce-forte); }
.badge {
  position: absolute; top: 4px; right: 3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 99px;
  background: var(--lar); color: #fff; font: 700 9px/14px 'Archivo', sans-serif; text-align: center;
  border: 1.5px solid var(--g1); box-sizing: border-box; pointer-events: none; animation: popIn var(--mov-celebra) var(--mov-curva) both;
}

.header-tela {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) var(--margem) 6px 6px;
  background: var(--vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.header-tela .mono { color: var(--aco); }

.cabeca { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cabeca h1 { font-size: 34px; }
.cabeca .cabeca-sub { font-size: 13px; color: var(--aco); line-height: 1.5; max-width: 620px; }
.cabeca-acoes { display: none; }

/* manchete revela linha a linha, como no filme */
.revela .ln { display: block; overflow: hidden; padding: 0.05em 0 0.1em; margin: -0.05em 0 -0.1em; }
/* Título é uma frase só: os grupos ficam lado a lado e quebram sozinhos quando não couberem. */
.cabeca h1.revela .ln { display: inline-block; vertical-align: top; }
.revela .ln > span { display: inline-block; animation: sobe 560ms var(--mov-curva) both; }
.revela .ln:nth-child(2) > span { animation-delay: 70ms; }
.revela .ln:nth-child(3) > span { animation-delay: 140ms; }

/* ---------- seções ---------- */
.secao { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--texto2); }
.secao::before { content: ''; width: 6px; height: 6px; background: var(--lar); flex-shrink: 0; }
.secao em { font-style: normal; color: var(--aco); }
.secao::after { content: ''; flex: 1; height: 1px; background: var(--borda); order: 1; }
.secao > a, .secao > button { order: 2; background: none; border: none; color: var(--lar-texto); font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 0; }

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--borda); border-radius: 14px; padding: 13px 14px; min-width: 0;
  box-shadow: var(--sombra);
}
.card-link { display: block; position: relative; }
.card-link.col { display: flex; }
.card-link.linha { display: flex; }
.card-link:hover { border-color: rgba(242, 107, 29, 0.45); transform: translateY(-1px); box-shadow: var(--sombra-hover); }
.card-link:active { transform: scale(0.992); }
.card.plano { background: linear-gradient(180deg, var(--card-plano), var(--card-b)); }
.card.laranja { background: linear-gradient(160deg, #F4772E, #D9560B); border-color: transparent; color: #fff; }
.card.verde { background: linear-gradient(160deg, #22AB7B, #16835D); border-color: transparent; color: #fff; }
.titulo-card { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 92%; font-size: 17px; line-height: 1.2; letter-spacing: -0.005em; }
.seta { flex-shrink: 0; opacity: 0.5; transition: transform var(--mov-micro) var(--mov-curva), opacity var(--mov-micro) ease; }
.card-link:hover .seta { opacity: 1; transform: translateX(3px); }

.selo {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 700 11.5px/1 'Archivo', sans-serif; padding: 5px 9px; border-radius: 99px;
}
.selo-verde { background: var(--ver); color: #fff; box-shadow: 0 4px 14px rgba(30, 158, 113, 0.35); }
.selo-verde::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.selo-suave { background: var(--ver-fundo); color: var(--ver-texto); }
.selo-laranja { background: var(--lar-fundo); color: var(--lar-texto); }
.selo-cinza { background: var(--realce-forte); color: var(--aco); }
.selo-claro { background: rgba(255, 255, 255, 0.2); color: #fff; }
.selo-branco { background: #fff; color: #13795A; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
.selo-branco::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #1E9E71; }
.chip { border: 1px solid var(--borda-forte); color: var(--texto2); font-size: 11.5px; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }

.avatar {
  border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font: 800 13px 'Archivo', sans-serif; color: #fff; background: var(--g4); width: 34px; height: 34px;
}
.avatar.lar { background: var(--lar); }
.avatar.ver { background: var(--ver); }
.avatar.p { width: 26px; height: 26px; font-size: 10.5px; border-radius: 8px; }
.avatar.g { width: 52px; height: 52px; font-size: 19px; border-radius: 14px; }

/* ---------- números ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat b { white-space: nowrap; }
.stat {
  background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--borda);
  border-radius: 11px; padding: 9px 9px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  position: relative; overflow: hidden;
}
.stat .mono { color: var(--aco); font-size: 8.5px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b { font: 800 19px/1 'Archivo', sans-serif; font-stretch: 116%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat small { font-size: 11px; color: var(--aco); display: none; }
.stat.destaque { border-color: rgba(242, 107, 29, 0.5); }
.stat.destaque::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--lar); }
.stat.destaque b { color: var(--lar); }
.stat.verde b { color: var(--ver-texto); }

.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.spec { background: var(--card-b); padding: 10px 11px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spec b { font: 800 16px/1.1 'Archivo', sans-serif; font-stretch: 108%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.spec span { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aco); }
.spec.destaque b { color: var(--lar); }

.barra-wrap { display: grid; grid-template-columns: 92px minmax(0, 1fr) 36px; align-items: center; gap: 10px; }
.barra-wrap .rotulo { font-size: 12px; color: var(--aco); }
.barra-wrap .valor { font: 700 12px 'Archivo', sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.barra { height: 6px; background: var(--realce-forte); border-radius: 99px; overflow: hidden; }
.barra > div { height: 100%; background: var(--ver); border-radius: 99px; transform-origin: left; animation: cresce 700ms var(--mov-curva) 120ms both; }
.barra > div.parcial { background: var(--lar); }

.funil { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.funil > div { padding: 11px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; border-left: 1px solid var(--borda); }
.funil > div:first-child { border-left: none; }
.funil b { font: 800 22px/1 'Archivo', sans-serif; font-stretch: 116%; }
.funil span { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aco); text-align: center; }
.funil .quente b { color: var(--lar); }

/* ---------- botões ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center;
  border: 1px solid transparent; border-radius: 11px; padding: 12px 16px;
  font: 700 14.5px 'Archivo', sans-serif; letter-spacing: 0.005em; white-space: nowrap;
}
.btn-laranja { background: var(--lar); color: #fff; box-shadow: 0 8px 22px rgba(242, 107, 29, 0.3); }
.btn-laranja:hover { background: #FF7A2E; }
.btn-laranja:active { background: #C24E08; transform: translateY(1px); box-shadow: none; }
.btn-ghost { background: var(--realce); border-color: var(--borda-forte); color: var(--texto2); font-weight: 600; }
.btn-ghost:hover { border-color: var(--aco); color: var(--con); background: var(--realce-forte); }
.btn-claro { background: var(--inverso); color: var(--inverso-texto); }
.btn-claro:hover { opacity: 0.9; }
.btn-verde { background: var(--ver); color: #fff; box-shadow: 0 8px 22px rgba(30, 158, 113, 0.3); }
.btn-verde:hover { background: #22B07E; }
.btn-p { padding: 9px 12px; font-size: 13px; border-radius: 9px; width: auto; }
.btn-texto { background: none; border: none; color: var(--lar-texto); font: 600 12.5px 'IBM Plex Sans', sans-serif; padding: 6px 0; }
.btn-texto:hover { color: var(--lar); }
.btn-perigo { color: #FF8A80; }
.acoes { display: flex; gap: 8px; }
.acoes > .btn { flex: 1; }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aco); }
.campo input, .campo select, textarea.area {
  width: 100%; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--campo);
  padding: 11px 12px; outline: none; transition: border-color var(--mov-micro) ease, box-shadow var(--mov-micro) ease;
}
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B95A3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.campo input:focus, .campo select:focus, textarea.area:focus { border-color: var(--lar); box-shadow: 0 0 0 3px rgba(242, 107, 29, 0.18); }
.campo input::placeholder, textarea.area::placeholder { color: var(--aco2); }
textarea.area { resize: none; font-size: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--campo); border: 1px solid var(--borda); border-radius: 11px; padding: 3px; }
.toggle button { border: none; background: none; font: 700 13.5px 'Archivo', sans-serif; color: var(--aco); padding: 9px 0; border-radius: 8px; }
.toggle button.ativo { background: var(--lar); color: #fff; box-shadow: 0 4px 14px rgba(242, 107, 29, 0.3); }

.chip-toggle { background: var(--campo); border: 1px solid var(--borda-forte); color: var(--texto2); font-size: 12.5px; padding: 7px 12px; border-radius: 99px; }
.chip-toggle.ativo { background: var(--lar-fundo); border-color: rgba(242, 107, 29, 0.6); color: var(--lar-texto); font-weight: 600; }

.aviso { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--texto2); background: var(--realce); border: 1px solid var(--borda); border-left: 3px solid var(--aco2); border-radius: 10px; padding: 10px 12px; }
.aviso svg { flex-shrink: 0; margin-top: 1px; }
.aviso.verde { border-left-color: var(--ver); background: rgba(30, 158, 113, 0.08); }
.aviso.laranja { border-left-color: var(--lar); background: rgba(242, 107, 29, 0.07); }
.aviso b { color: var(--con); }

.vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--aco); font-size: 13px; line-height: 1.55; padding: 22px 16px; }
.vazio b { color: var(--con); }
.vazio svg { opacity: 0.6; }

/* ---------- listas ---------- */
.lista { display: flex; flex-direction: column; gap: 8px; }
.lista.grade > .vazio { grid-column: 1 / -1; }
.so-mobile-oculto { display: none; }
.atividade .item-linha:nth-child(n+4) { display: none; }
.linhas { padding: 0; overflow: hidden; }
.item-linha { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-top: 1px solid var(--borda); min-width: 0; }
.item-linha:first-child { border-top: none; }
a.item-linha:hover { background: var(--realce); }
a.item-linha:hover .seta { opacity: 1; transform: translateX(3px); }
.item-linha.nao-lida { box-shadow: inset 3px 0 0 var(--lar); }
.ic-quadrado { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--g3); }

.duas, .duas-iguais, .tres { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coluna { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- tabela da equipe ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aco); text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--borda); text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr:last-child td { border-bottom: none; }
.tabela td.n { font: 700 15px 'Archivo', sans-serif; font-stretch: 110%; }
.tabela td.zero { color: var(--aco2); }
.tabela tbody tr { animation: cardEntra var(--mov-padrao) var(--mov-curva) backwards; }
.tabela tbody tr:hover { background: var(--realce); }
.equipe-mobile { display: flex; flex-direction: column; }
.equipe-mobile .item-linha { align-items: flex-start; }
.mini-nums { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 12px; margin-top: 6px; }
.mini-nums span { font-size: 11px; color: var(--aco); white-space: nowrap; }
.mini-nums b { font: 700 13px 'Archivo', sans-serif; color: var(--con); margin-right: 3px; }

/* ---------- convite e plano ---------- */
.codigo { font: 800 26px/1 'Archivo', sans-serif; font-stretch: 116%; letter-spacing: 0.02em; color: var(--con); padding: 12px 14px; border: 1px dashed rgba(242, 107, 29, 0.55); border-radius: 10px; background: rgba(242, 107, 29, 0.06); text-align: center; }
.preco { display: flex; align-items: baseline; gap: 6px; }
.preco b { font: 900 34px/1 'Archivo', sans-serif; font-stretch: 116%; letter-spacing: -0.02em; }
.preco span { color: var(--aco); font-size: 12.5px; }
.checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--texto2); line-height: 1.4; }
.checks li::before { content: ''; width: 6px; height: 6px; margin-top: 6px; background: var(--ver); flex-shrink: 0; }

.racha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.racha .lado { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.racha .lado span:not(.avatar) { font-size: 11.5px; color: var(--texto2); max-width: 100%; }
.racha .meio { font: 900 20px 'Archivo', sans-serif; font-stretch: 116%; }
.racha-barra { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 8px; }
.racha-barra i { border-radius: 99px; background: var(--lar); }
.racha-barra i + i { background: var(--con); opacity: 0.85; }
.racha-barra i.fora { background: var(--g4); opacity: 1; }

/* ---------- celebração ---------- */
.celebra { position: relative; overflow: hidden; text-align: center; padding: 20px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.celebra > * { position: relative; }
.celebra h2 { font-size: 40px; }
.selo-anel { position: relative; display: inline-flex; }
.selo-anel .anel { position: absolute; inset: -5px; border: 2px solid var(--ver); border-radius: 99px; animation: anel 1800ms var(--mov-curva) infinite; pointer-events: none; }
.selo-anel .anel + .anel { animation-delay: 600ms; }
.card.verde .selo-anel .anel { border-color: #fff; }
.card.verde h2, .card.verde .racha .meio { color: #fff; }
.card.verde .sub { color: rgba(255, 255, 255, 0.92) !important; }
.card.verde .racha .lado span:not(.avatar) { color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.card.verde .racha .avatar:not(.lar) { background: #0F5E43; }

/* ---------- navegação ---------- */
.navbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--vidro-nav); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--borda);
}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; padding: 5px 0 2px; font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aco); position: relative; }
.nav-item.ativo { color: var(--con); }
.nav-item.ativo::after { content: ''; position: absolute; top: -7px; width: 18px; height: 2px; background: var(--lar); animation: popIn var(--mov-padrao) var(--mov-curva) both; }
.nav-mais { justify-self: center; width: 50px; height: 50px; border-radius: 14px; border: none; background: var(--lar); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; box-shadow: 0 8px 22px rgba(242, 107, 29, 0.4); transform: rotate(0deg); }
.nav-mais:active { transform: scale(0.94); }
.sidebar { display: none; }
.txt-curto { display: none; }

.toast {
  position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  background: var(--inverso); color: var(--inverso-texto); font-size: 13.5px; font-weight: 600; padding: 11px 16px; border-radius: 10px;
  box-shadow: var(--sombra-forte); animation: toastEntra var(--mov-padrao) var(--mov-curva) both;
}
.toast::before { content: ''; width: 8px; height: 8px; background: var(--lar); flex-shrink: 0; }
.toast.saindo { animation: toastSai var(--mov-micro) ease both; }

/* ---------- transição entre telas: some uma, entra a outra ---------- */
#app.saindo > .conteudo, #app.saindo > .header-tela, #app.saindo > .topo { animation: telaSai 140ms ease-in both; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 16px 32px; }
.login-topo { width: 100%; max-width: 460px; display: flex; justify-content: space-between; align-items: center; padding: 4px 0 8px; }
.login-card { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 14px; animation: telaEntra 420ms var(--mov-curva) both; }
.logo-desenha { display: flex; align-items: center; gap: 14px; }
.logo-desenha .base { fill: var(--con); transform-box: fill-box; transform-origin: left; animation: cresce 520ms cubic-bezier(0.65, 0, 0.35, 1) 150ms both; }
.logo-desenha .dente { fill: var(--con); transform-box: fill-box; transform-origin: bottom; animation: denteSobe 460ms var(--mov-curva) both; }
.logo-desenha .dente.d1 { animation-delay: 420ms; }
.logo-desenha .dente.d2 { animation-delay: 540ms; }
.logo-desenha .dente.acento { fill: var(--lar); animation-delay: 780ms; animation-duration: 560ms; }
@keyframes denteSobe { 0% { opacity: 0; transform: scaleY(0); } 70% { opacity: 1; transform: scaleY(1.08); } 100% { opacity: 1; transform: none; } }
.logo-desenha .wm { font-size: 34px; display: flex; overflow: hidden; padding: 0.06em 0 0.1em; }
.logo-desenha .wm span { display: inline-block; animation: sobe 520ms var(--mov-curva) both; }
.demo-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--campo); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 9px; min-width: 0; }
.demo:hover { border-color: rgba(242, 107, 29, 0.5); }
.demo .col { min-width: 0; }
.demo b { font-size: 12.5px; font-weight: 600; }
.demo small { font-size: 10.5px; color: var(--aco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- explorar ---------- */
.explorar { display: flex; flex-direction: column; gap: 12px; }
.filtros { display: none; }
.filtros.aberto { display: flex; animation: painelAbre var(--mov-padrao) var(--mov-curva) both; }
.busca-box { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--campo); padding: 0 12px; min-width: 0; }
.busca-box input { flex: 1; border: none; background: transparent; outline: none; padding: 11px 0; min-width: 0; }
.busca-box:focus-within { border-color: var(--lar); box-shadow: 0 0 0 3px rgba(242, 107, 29, 0.18); }
.btn-filtro { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--campo); display: flex; align-items: center; justify-content: center; }
.btn-filtro.ativo { background: var(--lar); border-color: var(--lar); }

/* ---------- chat (desligado por flag) ---------- */
.chat-area { gap: 8px; padding-bottom: 96px; }
.chat-sistema { align-self: center; font-size: 11.5px; color: var(--aco); background: var(--realce); border-radius: 99px; padding: 6px 12px; text-align: center; }
.bolha { max-width: 80%; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; animation: bolhaEntra var(--mov-micro) var(--mov-curva) both; }
.bolha .hora { font-size: 10px; align-self: flex-end; color: var(--aco); }
.bolha.minha { align-self: flex-end; background: var(--lar); color: #fff; border-radius: 12px 12px 3px 12px; }
.bolha.minha .hora { color: rgba(255, 255, 255, 0.75); }
.bolha.dele { align-self: flex-start; background: var(--g2); border: 1px solid var(--borda); border-radius: 12px 12px 12px 3px; }
.chat-input { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; z-index: 30; display: flex; gap: 8px; padding: 10px var(--margem) calc(12px + env(safe-area-inset-bottom)); background: var(--vidro-nav); border-top: 1px solid var(--borda); }
.chat-input input { flex: 1; min-width: 0; border: 1px solid var(--borda-forte); border-radius: 99px; background: var(--campo); padding: 11px 16px; outline: none; }
.chat-input button { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--lar); display: flex; align-items: center; justify-content: center; }

/* ---------- animações ---------- */
@keyframes telaEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes telaSai { to { opacity: 0; } }
@keyframes cardEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sobe { from { transform: translateY(108%); } to { transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes celebra { 0% { opacity: 0; transform: translateY(14px) scale(0.97); } 60% { transform: translateY(-2px) scale(1.005); } 100% { opacity: 1; transform: none; } }
@keyframes cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes anel { from { opacity: 0.75; transform: scale(0.94); } to { opacity: 0; transform: scale(1.35); } }
@keyframes toastEntra { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastSai { to { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes painelAbre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bolhaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.conteudo { animation: telaEntra var(--mov-padrao) var(--mov-curva) backwards; }
.header-tela, .topo { animation: telaEntra var(--mov-micro) var(--mov-curva) both; }
.conteudo > *, .coluna > *, .lista > *, .kpis > *, .specs > * { animation: cardEntra var(--mov-padrao) var(--mov-curva) backwards; }
.conteudo > :nth-child(2), .coluna > :nth-child(2), .lista > :nth-child(2), .kpis > :nth-child(2), .specs > :nth-child(2) { animation-delay: 40ms; }
.conteudo > :nth-child(3), .coluna > :nth-child(3), .lista > :nth-child(3), .kpis > :nth-child(3), .specs > :nth-child(3) { animation-delay: 80ms; }
.conteudo > :nth-child(4), .coluna > :nth-child(4), .lista > :nth-child(4), .kpis > :nth-child(4), .specs > :nth-child(4) { animation-delay: 120ms; }
.conteudo > :nth-child(5), .coluna > :nth-child(5), .lista > :nth-child(5), .kpis > :nth-child(5), .specs > :nth-child(5) { animation-delay: 160ms; }
.conteudo > :nth-child(6), .coluna > :nth-child(6), .lista > :nth-child(6), .kpis > :nth-child(6), .specs > :nth-child(6) { animation-delay: 200ms; }
.conteudo > :nth-child(n+7), .coluna > :nth-child(n+7), .lista > :nth-child(n+7), .kpis > :nth-child(n+7), .specs > :nth-child(n+7) { animation-delay: 240ms; }
.celebra { animation: celebra var(--mov-celebra) var(--mov-curva) both; }
/* re-render na mesma tela (filtro, estrela, toggle): sem replay das entradas */
#app.estatico .conteudo, #app.estatico .header-tela, #app.estatico .topo,
#app.estatico .conteudo > *, #app.estatico .coluna > *, #app.estatico .lista > *, #app.estatico .kpis > *, #app.estatico .specs > *,
#app.estatico .revela .ln > span, #app.estatico .tabela tbody tr, #app.estatico .barra > div, #app.estatico .celebra,
#app.estatico .selo-verde, #app.estatico .stat.destaque b, #app.estatico .nav-item.ativo::after, #app.estatico .side-item.ativo::before { animation: none; }
.selo-verde { animation: popIn var(--mov-celebra) var(--mov-curva) 120ms both; }
.stat.destaque b { animation: popIn var(--mov-celebra) var(--mov-curva) 160ms both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  :root { --margem: 24px; }
  #app, .navbar, .chat-input { max-width: 900px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .stat small { display: block; }
  .stat b { font-size: 24px; white-space: normal; }
  .stat .mono { font-size: 9.5px; letter-spacing: 0.12em; }
  .stat { padding: 10px 11px 11px; }
  .so-mobile-oculto { display: revert; }
  .atividade .item-linha:nth-child(n+4) { display: flex; }
  .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .specs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lista.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-iguais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cabeca h1 { font-size: 44px; }
}


/* ---------- iPad: trilho de ícones à esquerda, conteúdo em duas colunas ---------- */
@media (min-width: 700px) {
  /* Botão que só existe porque o do cabeçalho some no celular: some junto quando ele volta. */
  .so-estreito { display: none !important; }
}

@media (min-width: 700px) and (max-width: 1179px) {
  :root { --trilho: 84px; }
  #app { max-width: none; margin: 0; padding-left: var(--trilho); }
  .navbar, .topo { display: none; }
  .conteudo { padding: 18px 24px 36px; }
  .header-tela { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; padding: 14px 24px 0 14px; }
  .header-tela + .conteudo { padding-top: 6px; }
  .cabeca { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .cabeca-acoes { display: flex; gap: 8px; }
  .cabeca-acoes .btn { width: auto; }
  .cabeca h1 { font-size: 42px; }
  .duas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
  .tres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .tres > :last-child { grid-column: 1 / -1; }
  .duas .lista.grade { grid-template-columns: minmax(0, 1fr); }
  .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { bottom: 24px; left: calc(50% + var(--trilho) / 2); }
  .chat-input { left: var(--trilho); right: 0; transform: none; width: auto; max-width: none; }

  .sidebar {
    display: flex; flex-direction: column; align-items: center; position: fixed; left: 0; top: 0; bottom: 0; width: var(--trilho); z-index: 40;
    background: var(--vidro-nav); border-right: 1px solid var(--borda); padding: calc(16px + env(safe-area-inset-top)) 8px 12px; gap: 14px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .side-logo .wordmark, .side-grupo .mono, .txt-longo, .side-user .col, .side-user .btn-icone { display: none; }
  .side-grupo { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .side-grupo + .side-grupo { border-top: 1px solid var(--borda); padding-top: 10px; }
  .side-item {
    position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px;
    background: none; border: none; border-radius: 10px; color: var(--aco);
    font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .txt-curto { display: block; }
  .side-item:hover { background: var(--realce); color: var(--con); }
  .side-item.ativo { background: var(--realce-forte); color: var(--con); }
  .side-item.ativo::before { content: ''; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; background: var(--lar); border-radius: 0 3px 3px 0; }
  .side-item .contador { position: absolute; top: 3px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--lar); color: #fff; font: 700 9.5px/16px 'Archivo', sans-serif; letter-spacing: 0; }
  .side-item .contador.cinza { background: var(--g4); }
  .side-publicar { width: 52px; height: 52px; padding: 0; border-radius: 14px; }
  .side-rodape { margin-top: auto; width: 100%; }
  .side-user { width: 100%; display: flex; justify-content: center; padding-top: 10px; border-top: 1px solid var(--borda); }
  .side-user .linha { justify-content: center; }

  #app:has(.login), #app:has(.lp) { padding-left: 0; }
}

/* ---------- desktop: interface própria com menu lateral ---------- */
@media (min-width: 1180px) {
  #app { max-width: none; margin: 0; padding-left: var(--lateral); }
  .so-desktop { display: revert !important; }
  .so-mobile { display: none !important; }
  .navbar, .topo { display: none; }
  .conteudo { padding: 18px 28px 40px; gap: 14px; max-width: 1480px; }
  .header-tela { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; padding: 16px 28px 0 20px; max-width: 1480px; }
  .header-tela + .conteudo { padding-top: 6px; }

  .cabeca { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .cabeca > .col { gap: 10px; min-width: 0; }
  .cabeca h1 { font-size: 50px; }
  .cabeca-acoes { display: flex; gap: 8px; align-items: center; }
  .cabeca-acoes .btn { width: auto; }

  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat { padding: 13px 14px; }
  .stat b { font-size: 30px; }

  .duas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
  .duas.larga { grid-template-columns: minmax(0, 1fr) 420px; }
  .duas-iguais { gap: 16px; }
  .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .lista.grade { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-grade .dupla { grid-column: span 2; }
  .toast { bottom: 28px; left: calc(50% + var(--lateral) / 2); }
  .celebra h2 { font-size: 52px; }
  .login-numeros .stat b { font-size: 30px; }

  .explorar { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
  .filtros, .filtros.aberto { display: flex; position: sticky; top: 16px; animation: none; }
  .btn-filtro { display: none; }

  .sidebar {
    display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: var(--lateral); z-index: 40;
    background: var(--vidro-nav); border-right: 1px solid var(--borda); padding: 20px 12px 14px; gap: 18px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .side-logo { display: flex; align-items: center; gap: 9px; padding: 0 8px; }
  .side-logo .wordmark { font-size: 18px; }
  .side-grupo { display: flex; flex-direction: column; gap: 2px; }
  .side-grupo .mono { color: var(--aco2); padding: 0 10px 6px; font-size: 9.5px; }
  .side-item {
    position: relative; display: flex; align-items: center; gap: 11px; background: none; border: none; border-radius: 9px;
    color: var(--aco); font: 500 13.5px 'IBM Plex Sans', sans-serif; padding: 9px 10px; text-align: left; width: 100%;
  }
  .side-item:hover { color: var(--con); background: var(--realce); }
  .side-item.ativo { color: var(--con); background: var(--realce-forte); font-weight: 600; }
  .side-item.ativo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--lar); border-radius: 0 3px 3px 0; animation: popIn var(--mov-padrao) var(--mov-curva) both; }
  .side-item .contador { margin-left: auto; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--lar); color: #fff; font: 700 10.5px/18px 'Archivo', sans-serif; text-align: center; }
  .side-item .contador.cinza { background: var(--g3); color: var(--texto2); }
  .side-publicar { margin: 0 2px; }
  .side-imob { margin: 0 2px; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--borda); background: var(--realce); display: flex; flex-direction: column; gap: 3px; }
  .side-imob:hover { border-color: rgba(242, 107, 29, 0.45); }
  .side-imob b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .txt-curto { display: none; }
  .side-rodape { margin-top: auto; }
  .side-rodape .side-item { color: var(--aco); }
  .side-user { display: flex; align-items: center; gap: 9px; padding: 12px 6px 0; border-top: 1px solid var(--borda); }
  .side-user .col { min-width: 0; }
  .side-nome { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


  .chat-input { left: var(--lateral); right: 0; transform: none; width: auto; max-width: none; padding: 12px 28px; }
}

@media (min-width: 1500px) {
  .duas { grid-template-columns: minmax(0, 1fr) 400px; }
}
#app:has(.login), #app:has(.lp) { padding-left: 0 !important; max-width: none; }

/* ---------- fotos do galpão ---------- */
.fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 6px; }
.fotos.unica { grid-template-columns: 1fr; grid-auto-rows: 120px; }
.foto { position: relative; border-radius: 10px; overflow: hidden; background: var(--g3); border: 1px solid var(--borda); animation: cardEntra var(--mov-padrao) var(--mov-curva) backwards; }
.foto.capa { grid-column: span 4; grid-row: span 2; }
.fotos.unica .foto.capa { grid-column: auto; grid-row: span 2; }
.foto img, .foto-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-img { padding: 0; border: none; background: none; cursor: zoom-in; }
.foto-img img { transition: transform var(--mov-padrao) var(--mov-curva); }
.foto-img:hover img { transform: scale(1.03); }
.foto-selo { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 99px; background: rgba(14, 19, 27, 0.72); color: #fff; font: 600 10px 'IBM Plex Sans', sans-serif; pointer-events: none; }
.foto:not(.capa) .foto-selo span { display: none; }
.foto-acoes { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--mov-micro) ease; }
.foto:hover .foto-acoes, .foto:focus-within .foto-acoes { opacity: 1; }
@media (hover: none) { .foto-acoes { opacity: 1; } }
.foto-acoes button { width: 26px; height: 26px; border-radius: 8px; border: none; background: rgba(14, 19, 27, 0.72); display: flex; align-items: center; justify-content: center; }
.foto-acoes button:hover { background: var(--lar); }
.foto-oculta, .foto-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 8px; font-size: 11.5px; color: var(--aco); }
.foto-oculta { background: var(--realce); border-style: dashed; }
.foto-add { background: var(--lar-fundo); border: 1.5px dashed rgba(242, 107, 29, 0.55); color: var(--lar-texto); font-weight: 600; cursor: pointer; }
.foto-add:hover { background: rgba(242, 107, 29, 0.2); }
.foto-add small { font-weight: 400; color: var(--aco); font-size: 10.5px; }
.foto-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fotos:not(.unica) .foto-add small, .fotos:not(.unica) .foto-oculta span { display: none; }
.miniatura { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--borda); }
img.ic-quadrado.miniatura { width: 32px; height: 32px; border-radius: 9px; }
.card.com-capa { padding-top: 0; overflow: hidden; }
.capa-card { position: relative; display: block; margin: 0 -14px 2px; padding: 0; border: none; background: var(--g3); aspect-ratio: 16 / 8; cursor: zoom-in; overflow: hidden; }
.capa-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--mov-padrao) var(--mov-curva); }
.capa-card:hover img { transform: scale(1.03); }
.capa-card .mono { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 99px; background: rgba(14, 19, 27, 0.72); color: #fff; font-size: 9px; }
.chip-toggle { font-family: 'IBM Plex Sans', sans-serif; }
[hidden] { display: none !important; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 9, 13, 0.92); display: flex; align-items: center; justify-content: center; padding: 56px 16px; animation: fadeIn var(--mov-padrao) ease both; }
.lightbox.saindo { animation: fadeOut 180ms ease both; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: fotoEntra var(--mov-celebra) var(--mov-curva) both; }
.lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 12px; border: none; background: rgba(245, 243, 239, 0.12); display: flex; align-items: center; justify-content: center; }
.lightbox button:hover { background: var(--lar); }
.lightbox-fechar { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lightbox-ant { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-prox { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-conta { position: absolute; top: calc(26px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); color: #C9CFD8; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fotoEntra { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  .fotos { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 64px; }
  .foto.capa { grid-column: span 4; grid-row: span 3; }
  .fotos.unica { grid-template-columns: 1fr; grid-auto-rows: 110px; }
}

/* ---------- seletor de cidades ---------- */
.cidades { position: relative; }
.cidades-caixa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--campo); cursor: text;
  transition: border-color var(--mov-micro) ease, box-shadow var(--mov-micro) ease;
}
.cidades-caixa:focus-within { border-color: var(--lar); box-shadow: 0 0 0 3px rgba(242, 107, 29, 0.18); }
.cidades-caixa input, .campo .cidades-caixa input, .campo .cidades-caixa input:focus { flex: 1; min-width: 140px; width: auto; border: none; background: transparent; outline: none; box-shadow: none; padding: 5px 4px; }
.cidades-caixa input::placeholder { color: var(--aco2); }
.cidade-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 10px; border-radius: 99px;
  background: var(--lar-fundo); color: var(--con); font-size: 13px; font-weight: 600; animation: popIn var(--mov-padrao) var(--mov-curva) both;
}
.cidade-chip small, .cidades-lista small { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.08em; color: var(--aco); }
.cidade-chip button { width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--realce-forte); color: var(--texto2); font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cidade-chip button:hover { background: var(--lar); color: #fff; }
.cidades-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; display: flex; flex-direction: column; padding: 4px;
  background: var(--card-a); border: 1px solid var(--borda-forte); border-radius: 12px; box-shadow: var(--sombra-forte);
  max-height: 300px; overflow-y: auto; animation: painelAbre var(--mov-micro) var(--mov-curva) both;
}
.cidades-lista button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: none; background: none; padding: 10px 11px; border-radius: 8px; font-size: 14px; color: var(--con); }
.cidades-lista button.ativa, .cidades-lista button:hover { background: var(--lar-fundo); }
.cidades-vazio { padding: 10px 11px; font-size: 13px; color: var(--aco); }
.cidades-fonte { position: sticky; bottom: 0; display: block; padding: 7px 11px; background: var(--campo); border-top: 1px solid var(--borda); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--aco); }

/* ---------- evolução do atraque ---------- */
.progresso { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.passo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.passo i { height: 4px; border-radius: 99px; background: var(--realce-forte); transform-origin: left; }
.passo.feito i { background: var(--ver); animation: cresce 500ms var(--mov-curva) backwards; }
.passo.atual i { background: var(--lar); }
.passo span { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aco2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passo.feito span { color: var(--texto2); }
.passo.atual span { color: var(--lar-texto); }
.progresso.parado .passo.feito i { background: var(--aco2); }
.linha-tempo { padding: 6px 14px; }
.evento { position: relative; display: flex; gap: 12px; padding: 10px 0; animation: cardEntra var(--mov-padrao) var(--mov-curva) backwards; }
.evento + .evento { border-top: 1px solid var(--borda); }
.evento > i { width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; flex-shrink: 0; background: var(--aco2); }
.evento.lar > i { background: var(--lar); }
.evento.ver > i { background: var(--ver); }
.evento.cinza > i { background: var(--g4); }
.evento b { font-size: 13.5px; font-weight: 600; }
@media (min-width: 700px) { .passo span { font-size: 9.5px; } }

.proximo-passo { border-color: rgba(242, 107, 29, 0.35); }
.outra-etapa summary { cursor: pointer; list-style: none; }
.outra-etapa summary::-webkit-details-marker { display: none; }
.outra-etapa summary::before { content: '+ '; color: var(--lar-texto); }
.outra-etapa[open] summary::before { content: '− '; }

/* ---------- custo total ---------- */
.total-custo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 12px; border-radius: 10px; background: var(--lar-fundo); border: 1px solid rgba(242, 107, 29, 0.3); }
.total-custo b { font: 800 18px 'Archivo', sans-serif; font-stretch: 110%; color: var(--con); }
.total-custo b small { font: 500 11px 'IBM Plex Sans', sans-serif; color: var(--aco); margin-left: 2px; }
.total-custo .sub { flex-basis: 100%; }
.custos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.custos > div { background: var(--card-b); padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.custos span { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aco); }
.custos b { font: 800 14px 'Archivo', sans-serif; font-stretch: 105%; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custos small { font-size: 10.5px; color: var(--aco); }
.custos .total b { color: var(--lar-texto); }
.cidades-lista button.livre { border-top: 1px dashed var(--borda-forte); border-radius: 0 0 8px 8px; color: var(--lar-texto); }
@media (max-width: 420px) { .custos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.selo > .exp { margin-left: -6px; }

@media (min-width: 700px) {
  .login { justify-content: center; padding-top: 24px; }
  .login-card { background: var(--painel); border: 1px solid var(--borda); border-radius: 20px; padding: 28px; }
}
.preco { flex-wrap: wrap; } .preco b { white-space: nowrap; }

@media (min-width: 700px) {
  .login { justify-content: center; padding-top: 24px; }
  .login-card { background: var(--painel); border: 1px solid var(--borda); border-radius: 20px; padding: 28px; }
}

/* ---------- barquinho navegando pelas etapas ---------- */
.bq { --pos: 0%; display: flex; flex-direction: column; gap: 6px; }
.bq-mar { position: relative; height: 58px; margin: 0 4px; }
.bq-ondas { position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; height: 12px; }
.bq-ondas path { fill: none; stroke: var(--realce-forte); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bq-rastro { position: absolute; left: 0; bottom: 11px; height: 3px; width: var(--pos); border-radius: 99px; background: var(--ver); animation: bqRastro 1.4s var(--mov-curva) both; }
.bq.parado .bq-rastro { background: var(--aco2); }
.bq-boia { position: absolute; bottom: 5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--card-b); border: 2px solid var(--aco2); z-index: 1; }
.bq-boia i { position: absolute; left: 50%; top: -9px; width: 2px; height: 8px; margin-left: -1px; background: var(--aco2); }
.bq-boia.feita { border-color: var(--ver); background: var(--ver); }
.bq-boia.feita i { background: var(--ver); }
.bq-boia.atual { border-color: var(--lar); animation: bqPisca 1.6s ease-in-out infinite; }
.bq-boia.atual i { background: var(--lar); }
.bq-cais { position: absolute; right: -4px; bottom: 2px; width: 22px; height: 16px; display: flex; justify-content: space-between; border-top: 4px solid var(--aco2); }
.bq-cais i { width: 3px; background: var(--aco2); }
.bq.fechado .bq-cais { border-color: var(--con); }
.bq.fechado .bq-cais i { background: var(--con); }
.bq-navio { position: absolute; bottom: 10px; left: var(--pos); width: 50px; height: 40px; margin-left: -25px; z-index: 2; animation: bqNavega 1.4s var(--mov-curva) both; }
.bq.fechado .bq-navio { margin-left: -46px; }
.bq-balanco { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; animation: bqBalanca 3.4s ease-in-out infinite; }
.bq-barco { width: 100%; height: 100%; display: block; overflow: visible; }
:root[data-tema="claro"] .bq-barco path:nth-child(3) { fill: #FFFFFF; stroke: #D8D3C9; stroke-width: 1.5; }
.bq.parado .bq-navio { filter: grayscale(1); opacity: .6; }
.bq.parado .bq-balanco { animation: none; }
.bq-corda { position: absolute; right: -2px; bottom: 6px; width: 10px; height: 8px; border: 2px solid var(--lar); border-top: none; border-left: none; border-radius: 0 0 8px 0; }
.bq-rotulos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; }
.bq-rotulos span { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aco2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-rotulos span.feita { color: var(--texto2); }
.bq-rotulos span.atual { color: var(--lar-texto); }
.bq.mini .bq-mar { height: 38px; margin: 0; }
.bq.mini .bq-navio { width: 32px; height: 26px; margin-left: -16px; bottom: 8px; }
.bq.mini.fechado .bq-navio { margin-left: -30px; }
.bq.mini .bq-boia { width: 10px; height: 10px; margin-left: -5px; bottom: 6px; }
.bq.mini .bq-boia i { display: none; }
.bq.mini .bq-cais { width: 16px; height: 12px; }
.bq-legenda { font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aco); }
@keyframes bqNavega { from { left: 0%; } }
@keyframes bqRastro { from { width: 0%; } }
@keyframes bqBalanca { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(2px) rotate(3deg); } }
@keyframes bqPisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 107, 29, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(242, 107, 29, 0); } }
@media (min-width: 700px) { .bq-rotulos span { font-size: 9.5px; } .bq-mar { height: 64px; } .bq:not(.mini) .bq-navio { width: 58px; height: 46px; margin-left: -29px; } .bq.fechado:not(.mini) .bq-navio { margin-left: -54px; } }
#app.estatico .bq-navio, #app.estatico .bq-rastro { animation: none; }

/* ---------- diálogo da plataforma ---------- */
.dlg-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(8, 12, 18, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; animation: fadeIn var(--mov-padrao) ease both; }
.dlg-fundo.saindo { animation: fadeOut var(--mov-micro) ease both; }
.dlg { width: 100%; max-width: 440px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--borda); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sombra-forte); animation: telaEntra var(--mov-padrao) var(--mov-curva) both; }
.dlg .sub { font-size: 13.5px; }
.dlg-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg .acoes { margin-top: 4px; }
.dlg .sub.pre { white-space: pre-wrap; max-height: 46vh; overflow: auto; }
.btn-perigo-cheio { background: #C8372D; color: #fff; }
.btn-perigo-cheio:hover { background: #B02D24; }
@media (min-width: 700px) { .dlg-fundo { align-items: center; } }

/* valores do custo mensal em colunas estreitas */
.duas > .coluna:last-child .custos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- oportunidade na rede ---------- */
.explorar-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 12.5px 'IBM Plex Sans', sans-serif; color: var(--lar-texto); }
.card-link:hover .explorar-ver svg { transform: translateX(3px); }
.explorar-ver svg { transition: transform var(--mov-micro) var(--mov-curva); }
.capa-card { cursor: pointer; }
.op-compat.bate { border-color: rgba(30, 158, 113, 0.4); }
.op-motivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.op-motivos li { position: relative; padding-left: 16px; font-size: 13px; color: var(--texto2); line-height: 1.45; }
.op-motivos li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--aco2); }

/* ---------- desempenho: gráficos, tabelas e folha de impressão ---------- */
.grafico { width: 100%; overflow-x: auto; }
.grafico svg { width: 100%; min-width: 300px; max-width: 760px; height: auto; display: block; }
.g-eixo { font: 9px/1 'IBM Plex Mono', monospace; fill: var(--aco); letter-spacing: 0.04em; }
.g-centro { font: 800 18px/1 'Archivo', sans-serif; font-stretch: 116%; fill: var(--con); }
.g-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--aco); }
.g-legenda.col { flex-direction: column; gap: 7px; }
.g-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.g-rosca { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.g-rosca svg { width: 132px; flex: none; }
.g-barras { display: flex; flex-direction: column; gap: 9px; }
.g-barra { display: grid; grid-template-columns: minmax(92px, 36%) 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.g-barra b { font-variant-numeric: tabular-nums; }
.g-rot { color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-trilho { height: 10px; border-radius: 6px; background: var(--realce); overflow: hidden; }
.g-trilho i { display: block; height: 100%; border-radius: 6px; }
.card.sem-pad { padding: 0; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela th { text-align: left; font: 600 9.5px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.07em; color: var(--aco); padding: 11px 13px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 11px 13px; border-bottom: 1px solid var(--borda); color: var(--texto2); white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }
.rel-filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.rel-filtros .toggle { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); flex: 1; min-width: 210px; }
.rel-filtros .toggle button { padding: 8px 6px; font-size: 12.5px; }
.so-impressao { display: none; }

@media print {
  @page { margin: 12mm; }
  :root, :root[data-tema="escuro"], :root:not([data-tema="claro"]) {
    --g0: #FFFFFF; --g1: #FFFFFF; --g2: #FFFFFF; --g3: #FFFFFF;
    --card-a: #FFFFFF; --card-b: #FFFFFF; --campo: #FFFFFF;
    --borda: rgba(27, 36, 49, 0.16); --borda-forte: rgba(27, 36, 49, 0.3);
    --con: #16202C; --texto2: #2E3846; --aco: #5B6676; --aco2: #94A0AE;
    --realce: rgba(27, 36, 49, 0.06); --realce-forte: rgba(27, 36, 49, 0.1);
    --grade-forte: transparent; --grade-fraca: transparent; --vinheta: transparent; --luz: transparent;
    --lar-texto: #C24E08; --ver-texto: #13795A;
    --sombra: none; --sombra-hover: none; --sombra-forte: none;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; }
  body { background: #fff !important; }
  body::after, body::before { display: none !important; }
  .navbar, .sidebar, .header-tela, .sem-impressao, .rel-filtros, .cabeca-acoes, .toast { display: none !important; }
  .conteudo { padding: 0 !important; gap: 10px; }
  .so-impressao { display: flex !important; }
  .rel-folha { align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--con); padding-bottom: 8px; margin-bottom: 6px; font-size: 11px; color: var(--aco); }
  .rel-folha-topo { display: flex; align-items: center; gap: 8px; }
  .rel-folha-topo b { font: 800 17px/1 'Archivo', sans-serif; font-stretch: 116%; letter-spacing: 0.04em; color: var(--con); }
  .cabeca h1 { font-size: 30px; }
  .card, .specs, .g-barras, .grafico, table { break-inside: avoid; }
  .tabela tr { break-inside: avoid; }
  .duas, .duas-iguais { display: grid; grid-template-columns: 1fr 1fr; }
  .card { border: 1px solid var(--borda); box-shadow: none; }
  .card.sem-pad { overflow: visible; }
  a[href]::after { content: none !important; }
}

/* ---------- fila de verificação: blocos numerados ---------- */
.verif-num {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lar); color: #fff;
  font: 800 16px/1 'Archivo', sans-serif; font-stretch: 116%; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.verif-num.feito { background: var(--realce); color: var(--aco); }
.card.verif-pendente { border-color: var(--borda-forte); }
.verif-linhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.verif-linhas > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.verif-linhas .mono { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.verif-linhas b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verif-linhas small { font-size: 11.5px; color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Duas colunas sempre: o cartão já divide a tela ao meio, quatro colunas aqui
   dentro cortariam CNPJ e data no meio. */

/* Trocar o período não pode apagar a tela: o corpo esmaece, o cabeçalho fica. */
.rel-corpo { display: contents; }
.rel-corpo.atualizando > * { opacity: 0.45; transition: opacity var(--mov-micro, 180ms) ease; pointer-events: none; }
.rel-atualizando { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aco); align-self: center; }

/* Explicação de tela: o que é e para que serve, sem virar parede de texto. */
.explica { border-left: 4px solid var(--lar); }
.explica-itens { display: flex; flex-direction: column; gap: 9px; }
.explica-itens > span { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 13.5px; line-height: 1.55; color: var(--texto2); }
.explica-itens > span > svg { margin-top: 2px; }
.explica-itens b { color: var(--con); font-weight: 600; }
@media (min-width: 1180px) {
  .explica-itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- documentos públicos: privacidade e termos ---------- */
.doc { min-height: 100vh; background: var(--fundo); display: flex; flex-direction: column; }
.doc-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--grafite); color: var(--claro); }
.doc-topo .marca { display: flex; align-items: center; gap: 8px; color: var(--claro); text-decoration: none; }
.doc-topo .wordmark { font-size: 16px; }
.doc-folha { width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 20px 72px; display: flex; flex-direction: column; gap: 14px; animation: telaEntra var(--mov-padrao) var(--mov-curva) both; }
.doc-folha .display { font-size: clamp(30px, 6vw, 44px); line-height: 1.04; }
.doc-folha > .aviso { margin-top: 18px; }
.doc-sec { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.doc-sec h2 { display: flex; align-items: baseline; gap: 12px; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 108%; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.doc-sec h2 .mono { font-size: 12px; color: var(--laranja); letter-spacing: .12em; }
.doc-sec p { font-size: 15.5px; line-height: 1.65; color: var(--texto2); }
.doc-sec code { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; background: var(--card-a); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 6px; }
.doc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-lista li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: var(--texto2); }
.doc-lista li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--laranja); }
.doc-lista b, .doc-sec p b { color: var(--texto1); font-weight: 600; }
.doc-pe { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 700px) { .doc-folha { padding: 56px 32px 96px; } .doc-sec h2 { font-size: 22px; } }