/* RadarFC. Segue o "Padrão de componentes (obrigatório)" do PRD. */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/schibsted-grotesk-latin-800-normal.woff2') format('woff2'); }

:root {
  --ink: #121A16; --muted: #4A5550; --line: #E1E4DF; --soft: #ECEEEA; --bg: #F3F4F1; --card: #FFFFFF;
  --green: #16794A; --link: #16603D; --amber: #F2C14E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 'Schibsted Grotesk', system-ui, sans-serif; }
a { color: var(--link); }
a:hover { color: #0E4029; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); font-size: 14px; }

/* Topo: uma linha (☰, marca, busca, conta) e menu ☰ por cima da página (canvas de 14/10/2026) */
.hdr { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.hdr-row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding-left: 14px; }
.ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; }
.ib:hover { background: var(--bg); color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.hdr-tema { display: none; }
.hdr-search { flex: 0 1 640px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hdr-search input { flex: 1; min-width: 0; height: 34px; padding: 0 14px; border: 1px solid #C9CEC9; border-radius: 10px; background: #F7F8F6; font: inherit; font-size: 16px; color: var(--ink); }
.btn-outline:disabled { opacity: .45; cursor: default; }
.btn-outline { height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.hdr-search .btn-outline { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
/* Botões de 34 px com área de toque de 44 px (auditoria de 13/10/2026). */
.btn-hit { position: relative; }
.btn-hit::after { content: ""; position: absolute; inset: -5px; }
.busca-voltar, .busca-btn { display: none; }
.hdr-upd { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.pessoa { margin-left: -6px; }
@media (max-width: 640px) {
  .hdr-row { gap: 2px; min-height: 56px; padding: 0 6px; }
  .brand { gap: 8px; padding: 0 4px; font-size: 19px; }
  .brand svg { width: 28px; height: 28px; }
  .hdr-tema { display: inline; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hdr-upd, .hdr-search { display: none; }
  .busca-btn { display: inline-flex; margin-left: auto; }
  .pessoa { margin-left: 0; }
  /* Busca aberta: o campo ocupa a barra (sem JavaScript, pelo link #busca). */
  .hdr.busca-aberta .hdr-row > :not(.hdr-search), .hdr:has(#busca:target) .hdr-row > :not(.hdr-search) { display: none; }
  .hdr.busca-aberta .hdr-search, #busca:target { display: flex; flex: 1; padding-right: 6px; }
  .hdr.busca-aberta .busca-voltar, #busca:target .busca-voltar { display: inline-flex; }
}
/* Menu ☰ */
.gaveta { display: flex; visibility: hidden; transform: translateX(-100%); transition: transform .18s ease-in, visibility 0s linear .18s; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: 224px; max-width: 85vw; overflow-y: auto; flex-direction: column; padding: 0 10px 16px; box-sizing: border-box; background: var(--card); color: var(--ink); box-shadow: 8px 0 32px rgba(18,26,22,.18); }
.gaveta.is-open, .gaveta:target { visibility: visible; transform: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.menu-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(18,26,22,.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease-in, visibility 0s linear .18s; }
.menu-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease-out, visibility 0s; }
/* Quem pediu menos movimento no sistema vê o menu aparecer e sumir na hora. */
@media (prefers-reduced-motion: reduce) { .gaveta, .gaveta.is-open, .menu-scrim, .menu-scrim.is-open { transition: none; } }
.menu-aberto, .menu-aberto body { overflow: hidden; }
.menu-top { display: flex; align-items: center; min-height: 72px; margin: 0 -10px 6px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.menu-k { margin: 8px 0 2px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu-i { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-decoration: none; text-align: left; font: 600 15px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; box-sizing: border-box; }
.menu-i:hover { background: var(--bg); color: var(--ink); }
.menu-i.is-active { background: var(--ink); color: #fff; }
.menu-i svg { flex: none; }
.cnt { margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: #E6E9E4; color: #26302B; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.menu-i.is-active .cnt { background: #fff; color: var(--ink); }
.menu-sep { height: 1px; margin: 8px 10px; border: 0; background: var(--line); }
.menu-email { display: block; padding: 0 10px 4px 40px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-email:empty { display: none; }
@media (max-width: 640px) {
  .gaveta { width: 256px; padding: 0 8px 14px; }
  .menu-top { min-height: 56px; margin: 0 -8px 6px; padding: 0 6px; }
  .menu-i { min-height: 40px; }
}

/* Filtro por período: botão único; no celular, painel que sobe da parte de baixo */
.periodo { position: relative; flex: 0 0 auto; margin-left: auto; }
.datebtn { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border: 1px solid #C9CEC9; border-radius: 10px; background: var(--card); color: var(--ink); font: 600 14px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.datebtn:hover { border-color: var(--ink); }
.datebtn.is-open { border-color: var(--green); box-shadow: 0 0 0 2px #CFE8DA; }
.lbl-mini { display: none; }
.scrim { display: none; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 7; width: 320px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(18,26,22,.18); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sheethead { display: none; }
.opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.opt:hover { background: var(--bg); }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.opt:has(input:checked) { font-weight: 700; }
.opt-sub { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }
.custom { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 6px; border-top: 1px solid var(--soft); margin-top: 4px; }
.custom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #3A443F; }
.field input { height: 44px; padding: 0 10px; border: 1px solid #C9CEC9; border-radius: 10px; background: var(--card); font: inherit; font-size: 15px; color: var(--ink); min-width: 0; }
.erro { margin: 0; font-size: 14px; color: #8A1C1C; }
.custom .muted { margin: 0; font-size: 13px; }
.btn-block { align-self: stretch; min-height: 44px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.iconx { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.iconx:hover { background: var(--bg); }
@media (max-width: 640px) {
  .lbl-full { display: none; }
  .lbl-mini { display: inline; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(18,26,22,.45); }
  .pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 20; border: 0; border-radius: 20px 20px 0 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(18,26,22,.2); max-height: 85vh; overflow-y: auto; }
  .sheethead { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
  .grab { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: #C9CEC9; margin: 4px 0 6px; }
  .sheetrow { display: flex; align-items: center; justify-content: space-between; }
  .sheetrow h2 { margin: 0 0 0 12px; font-size: 18px; }
}

/* Lista */
.aviso { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #FFF4D6; color: #4D3A00; font-size: 15px; }
.list-head { display: flex; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.list-title { white-space: nowrap; }
.lista-resumo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-upd { display: none; }
@media (max-width: 640px) {
  .list-head { gap: 8px; }
  .lista-resumo { font-size: 12px; }
  .res-per { display: none; }
  .res-upd { display: inline; }
}
.list-title { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.list-head .muted { margin: 0; }
.empty-box { background: var(--card); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.empty-box p { margin: 0; }
.btn-mais { display: block; margin: 20px auto 0; padding: 0 28px; }

/* Temas */
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; }
.t-ccf { background: #DDF0E4; color: #0B4A3F; }
.t-saf { background: #E2E6F6; color: #26347A; }
.t-base { background: #FBE4D3; color: #7A3408; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

main.wrap { padding-top: 20px; padding-bottom: 64px; }
.crumbs { margin-bottom: 12px; }
.card-search { padding-bottom: 16px; }
h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 8px 0 16px; }

/* Atualizações oficiais */
.official { background: #E4E7E2; color: var(--ink); border-radius: 16px; padding: 16px 20px; margin-top: 32px; }
.official h2 { margin: 0 0 8px; font-size: 16px; }
.official ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.official a { color: var(--ink); font-weight: 600; }
.official a:hover { color: var(--link); }

/* Cards (padrão de componentes) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { background: var(--card); border-radius: 16px; padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(18,26,22,.06); position: relative; }
.card-body { display: flex; flex-direction: column; gap: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; color: var(--muted); }
.meta strong { color: var(--ink); font-weight: 600; }
.card-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.thumb-link { display: block; }
.thumb { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; background: var(--soft); }
.actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--soft); }
/* Marcadores: texto sublinhado com contagem; marcado = cor própria, negrito, sublinhado grosso e check. */
.marks { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -8px; }
.mk { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 14px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-decoration-color: #B9C1BC; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mk:hover { background: var(--bg); color: var(--ink); }
/* Largura fixa ao marcar: o check ocupa o espaço que já existe antes do texto (fora do fluxo) e
   a largura do negrito fica reservada desde o início; os botões não mudam de tamanho nem de linha. */
.mk { position: relative; }
.mk-ok { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); pointer-events: none; visibility: hidden; }
.mk-l { display: inline-grid; }
.mk-l::after { content: attr(data-t); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
.mk[aria-pressed="true"] { font-weight: 700; text-decoration-thickness: 2px; }
.mk[aria-pressed="true"] .mk-ok { visibility: visible; }
.mk-imp { color: #121A16; text-decoration-color: #121A16; }
.mk-opo { color: #0B4A3F; text-decoration-color: #0B4A3F; }
.mk-ris { color: #8A3A09; text-decoration-color: #8A3A09; }
.mk-duv { color: #6B4E00; text-decoration-color: #6B4E00; }
.mk-reg { color: #5B2A86; text-decoration-color: #5B2A86; }
.mk-n { font-weight: 400; font-variant-numeric: tabular-nums; }
.mk-n:empty { display: none; }
.item .mk { gap: 6px; padding: 0 10px; font-size: 16px; text-underline-offset: 6px; }
.item .mk-ok { width: 16px; height: 16px; left: -10px; }
@media (max-width: 640px) {
  /* Marcadores no celular: mais justos para caberem na linha (área de toque continua com 44 px). */
  .marks, .item .marks { gap: 0 2px; margin-left: -8px; }
  .mk, .item .mk { gap: 4px; padding: 0 8px; font-size: 13px; }
  .mk-ok, .item .mk-ok { width: 13px; height: 13px; left: -7px; }
  .item .mk { font-size: 15px; }
}
.item .marks { gap: 0 6px; margin-left: -10px; }
.item-actions { gap: 8px 16px; padding-top: 20px; border-top-color: var(--line); }
.mark-box { display: flex; flex-direction: column; gap: 10px; }
.mark-box .label { margin: 0; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 15px; line-height: 1.35; box-shadow: 0 8px 24px rgba(18,26,22,.25); }
.sharewrap { margin-left: auto; position: relative; }
.sharebtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font: 600 14px 'Schibsted Grotesk', system-ui, sans-serif; color: var(--ink); }
.sharebox { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 6px; background: var(--card); }
.sharebtn:hover .sharebox { background: var(--ink); color: #fff; }
.item .sharebtn { font-size: 16px; }
.item .sharebox { height: 24px; }
.menu { position: absolute; right: 0; bottom: 46px; z-index: 6; min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(18,26,22,.16); padding: 6px; display: flex; flex-direction: column; }
.menuitem { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); text-decoration: none; text-align: left; font: 500 15px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; }
.menuitem:hover { background: var(--bg); }
.empty { color: var(--muted); }

/* Página de item */
.crumbs { font-size: 14px; color: var(--muted); }
.item-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.item { flex: 999 1 600px; min-width: 0; background: var(--card); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(18,26,22,.06); }
.item h1 { font-size: 32px; margin: 0; }
.item-main { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.item-main > div { flex: 1 1 320px; min-width: 0; }
.item-img { flex: 0 0 200px; width: 200px; max-height: 150px; object-fit: cover; border-radius: 14px; background: var(--soft); }
.label { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.summary { margin: 0; font-size: 17px; line-height: 1.55; color: #26302B; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 14px; background: var(--green); color: #fff; text-decoration: none; font-weight: 700; align-self: flex-start; }
.btn-primary:hover { color: #fff; background: #11603B; }
.related { flex: 1 1 280px; min-width: 0; background: var(--card); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.related h2 { margin: 0; font-size: 18px; }
.rel-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--soft); }
.rel-item a { color: var(--ink); font-weight: 700; text-decoration: none; }

/* Atualização oficial */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.facts div { background: var(--bg); border-radius: 12px; padding: 12px; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 700; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl caption { text-align: left; font-weight: 700; padding: 8px 0; }
.tbl th, .tbl td { text-align: left; padding: 8px; border-bottom: 1px solid var(--soft); }
.note { background: #FCEFC7; border-radius: 12px; padding: 12px; }
.lead { margin: 0; font-size: 17px; color: #26302B; }

/* Clubes formadores */
.clubes-busca { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.clubes-busca input { height: 44px; max-width: 420px; padding: 0 14px; border: 1px solid #C9CEC9; border-radius: 12px; background: #F7F8F6; font: inherit; font-weight: 400; font-size: 15px; color: var(--ink); }
.clubes-busca .muted { margin: 0; font-weight: 400; }
.feds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fed { background: var(--bg); border-radius: 12px; padding: 12px 16px; }
.fed h2 { margin: 0 0 6px; font-size: 16px; }
.clubes { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 15px; }

.center { max-width: 560px; margin: 48px auto; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.offline { background: #FCEFC7; color: #4D3800; padding: 10px 16px; font-size: 14px; text-align: center; }

.ftr { border-top: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--muted); }
.ftr-in { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px; padding-bottom: 20px; text-align: center; }
.ftr-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.ftr-links li { display: flex; align-items: center; }
.ftr-links li + li::before { content: "|"; color: #A9B0AB; padding: 0 2px; }
.ftr-links a, .ftr-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #26302B; font: 500 15px 'Schibsted Grotesk', system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.ftr-links a:hover, .ftr-btn:hover { background: var(--bg); color: var(--ink); text-decoration: underline; }
.ftr-meta { margin: 0; }

/* Janelas do rodapé: Compartilhar e Fale Conosco */
.dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 28px 32px 32px; border: 0; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 24px 64px rgba(18,26,22,.28); }
.dlg::backdrop { background: rgba(18,26,22,.45); }
.dlg[open] { display: flex; flex-direction: column; gap: 16px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dlg-head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.dlg-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; }
.dlg-x:hover { background: var(--line); }
.dlg-sub { margin: 0; font-size: 17px; color: var(--muted); }
.dlg-center { text-align: center; }
.dlg-qr { align-self: center; width: min(280px, 70vw); margin-top: 4px; }
.qr { display: block; width: 100%; height: auto; }
.dlg-copy { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 76px; padding: 12px 20px; border: 0; border-radius: 18px; background: var(--green); color: #fff; font-family: inherit; cursor: pointer; }
.dlg-copy:hover { background: #12663E; }
.dlg-copy-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; }
.dlg-copy-t strong { font-size: 18px; overflow-wrap: anywhere; }
.dlg-copy-t span { font-size: 14px; font-weight: 500; }
.dlg-form { display: flex; flex-direction: column; gap: 18px; }
.dlg-field { display: flex; flex-direction: column; gap: 10px; }
.dlg-field label { font-size: 16px; font-weight: 700; color: #26302B; }
.dlg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dlg-n { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dlg textarea, .dlg input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid #C9CEC9; border-radius: 18px; background: #fff; font: 400 17px/1.45 'Schibsted Grotesk', system-ui, sans-serif; color: var(--ink); }
.dlg textarea { min-height: 150px; padding: 16px 18px; resize: vertical; }
.dlg input[type="text"] { height: 56px; padding: 0 18px; }
.dlg-hint { margin: 0; font-size: 13px; color: var(--muted); }
.dlg-erro { margin: 0; padding: 10px 14px; border-radius: 12px; background: #FDE3E1; color: #7A140C; font-size: 15px; font-weight: 600; }
.dlg-send { height: 58px; border: 0; border-radius: 16px; background: var(--green); color: #fff; font: 700 18px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; }
.dlg-send:hover { background: #12663E; }
.dlg-send:disabled { background: #B9D9C8; cursor: not-allowed; }
.dlg-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dlg-ok[hidden] { display: none; }
.dlg-ok p { margin: 0; font-size: 18px; line-height: 1.5; color: #26302B; }
.dlg-ok .dlg-send { align-self: stretch; }
.dlg-ok-i { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: #E6F2EC; color: var(--green); }
@media (max-width: 640px) {
  .dlg { padding: 22px 20px; border-radius: 24px; }
  .dlg-head h2 { font-size: 24px; }
  .dlg-x { width: 46px; height: 46px; }
  .ftr-links a, .ftr-btn { padding: 0 8px; }
  .ftr-links { gap: 0 6px; }
  .ftr-links li + li::before { content: none; }
}


/* Convite para criar conta */
.convite { border-radius: 20px; padding: 28px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; margin-top: 32px; background: var(--card); box-shadow: 0 1px 2px rgba(18,26,22,.06); }
.convite h2 { margin: 0; font-size: 22px; font-weight: 800; }
.convite p { margin: 0; font-size: 15px; line-height: 1.5; color: #3A443F; }
.convite-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.convite-acoes { flex: 0 0 240px; display: flex; justify-content: center; }
@media (max-width: 640px) { .convite-acoes { flex: 1 1 100%; justify-content: flex-start; } }
.convite-btn { min-height: 48px; padding: 0 22px; }
.convite-item { margin-top: 0; padding: 24px; flex-direction: column; align-items: stretch; gap: 14px; background: var(--ink); color: #fff; box-shadow: none; }
.convite-item h2 { font-size: 20px; line-height: 1.2; }
.convite-item p { color: #D6DBD8; }
.convite-item .convite-txt { flex: 0 0 auto; gap: 14px; }
.convite-item .convite-acoes { flex: 0 0 auto; flex-direction: column; align-items: stretch; }
.convite-item .convite-btn { align-self: stretch; background: var(--amber); color: var(--ink); }
.convite-item .convite-btn:hover { background: #E5B23C; color: var(--ink); }
.item-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.item-side .related { flex: 0 0 auto; min-width: 0; }

/* Entrar, criar conta e links do e-mail */
.auth-wrap { display: flex; justify-content: center; padding: 8px 0 24px; }
.auth-card { width: 100%; max-width: 440px; background: var(--card); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(18,26,22,.06); }
.auth-card h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.auth-card h1:focus { outline: none; }
.auth-lead { margin: 0; font-size: 15px; line-height: 1.5; color: #3A443F; }
.auth-text { margin: 0; font-size: 16px; line-height: 1.55; color: #26302B; overflow-wrap: anywhere; }
.auth-card .muted { margin: 0; }
.auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: 600 15px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; }
.tab-on { color: var(--ink); border-bottom-color: var(--green); }
.btn-g { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid #C9CEC9; border-radius: 12px; background: var(--card); color: var(--ink); font: 600 15px 'Schibsted Grotesk', system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.btn-g:hover { border-color: var(--ink); color: var(--ink); }
.btn-g:disabled, .btn-primary:disabled { opacity: .6; cursor: default; }
.hint { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.hint-center { text-align: center; }
.err { margin: 0; font-size: 14px; color: #B42318; }
.sep { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form { display: flex; flex-direction: column; gap: 14px; }
.auth-card .field { font-size: 14px; color: #26302B; }
.inp { height: 48px; padding: 0 14px; border: 1px solid #C9CEC9; border-radius: 12px; background: var(--card); font: 400 16px 'Schibsted Grotesk', system-ui, sans-serif; color: var(--ink); min-width: 0; }
.inp-err { border: 2px solid #B42318; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #3A443F; line-height: 1.45; }
.check-strong { color: #26302B; }
.check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--green); }
.check .muted { font-size: 14px; }
.linkbtn { align-self: flex-start; border: 0; background: transparent; padding: 0; min-height: 44px; color: var(--link); font: 600 15px 'Schibsted Grotesk', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.err .linkbtn { min-height: 0; font-size: 14px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.row-btns .btn-primary { min-height: 48px; padding: 0 20px; }
.notice { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FFF4D6; color: #4D3A00; font-size: 15px; line-height: 1.45; }
@media (max-width: 640px) { .auth-card { padding: 22px; } }

/* Minha conta */
.mc-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.mc-main { flex: 999 1 640px; min-width: 0; }
.mc-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mc-sec { display: flex; flex-direction: column; gap: 12px; }
.mc-sec h2 { margin: 0; font-size: 20px; font-weight: 800; }
.mtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.mtabs::-webkit-scrollbar { display: none; }
.mtab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: 600 15px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.mtab-on { color: var(--ink); border-bottom-color: var(--green); }
.mtab .n { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--muted); }
.mc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mc-busca { flex: 1 1 260px; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid #C9CEC9; border-radius: 10px; background: var(--card); font: 400 15px 'Schibsted Grotesk', system-ui, sans-serif; color: var(--ink); }
.mc-temas { flex: 0 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filter { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #C9CEC9; background: var(--card); color: var(--ink); font: 600 14px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.filter-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mc-sec > .muted { margin: 0; }
.panel { background: var(--card); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(18,26,22,.06); }
.panel h2 { margin: 0; font-size: 18px; font-weight: 800; }
.panel p { margin: 0; }
.panel .btn-g { align-self: flex-start; min-height: 44px; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.4; }
.switch { flex: 0 0 auto; position: relative; width: 52px; height: 32px; border: 0; border-radius: 999px; background: #C9CEC9; cursor: pointer; padding: 0; }
.switch-on { background: var(--green); }
.switch:disabled { opacity: .6; cursor: default; }
.knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.switch-on .knob { left: 23px; }
.mc-email { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
#mc-carregando { margin: 24px 0; }

/* Termos e Política (rascunhos de teste) */
.legal { max-width: 740px; }
.legal h2 { margin: 12px 0 0; font-size: 20px; }
.legal p, .legal li { line-height: 1.6; }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.tbl-wrap { overflow-x: auto; }
.legal .tbl { min-width: 560px; }
.legal .tbl th, .legal .tbl td { vertical-align: top; }
.auth-card > .btn-g { align-self: flex-start; }

/* Notícias vistas: "Aberta", "Já vi", "Mostrar vistas" e aba Vistas (desenho aprovado no canvas Vistas) */
.vistas-sw { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vistas-sw .n { font-weight: 400; color: var(--muted); }
.vistas-sw .switch { width: 44px; height: 26px; }
.vistas-sw .knob { width: 20px; height: 20px; }
.vistas-sw .switch-on .knob { left: 21px; }
/* Mostrar vistas no menu ☰ (14/10/2026): a linha inteira lê o rótulo; a chave fica à direita. */
.gaveta .vistas-sw { font-size: 15px; cursor: default; }
.gaveta .vistas-sw:hover { background: transparent; }
.gaveta .vistas-sw .switch { margin-left: auto; width: 38px; height: 22px; }
.gaveta .vistas-sw .knob { width: 16px; height: 16px; }
.gaveta .vistas-sw .switch-on .knob { left: 19px; }
.card-aberta, .card-vista { background: #F8F9F7; box-shadow: none; }
.card-aberta { border: 1px solid var(--line); }
.card-vista { border: 1px dashed #C9CEC9; }
.card-aberta .card-title a, .card-vista .card-title a { color: #5E6762; font-weight: 600; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; }
.seen { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; margin: -10px -8px -10px auto; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 13px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; }
.seen:hover { background: var(--bg); color: var(--ink); }
.toast-com-acao { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; }
.toast-com-acao > span { flex: 1; min-width: 0; }
.toast-acao { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9FE0BC; font: 700 15px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; }
.toast-acao:hover { background: rgba(255,255,255,.08); }
#mc-vistas-nota { margin: 12px 0 0; font-size: 14px; }
.vistas-lista { display: flex; flex-direction: column; }
.vista-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--soft); }
.vista-t { flex: 1 1 320px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.vista-t:hover { text-decoration: underline; }
.vista-row .btn-g { min-height: 40px; font-size: 14px; border-radius: 10px; }
@media (max-width: 640px) {
  /* Celular: o "Mostrar vistas" desce para uma linha própria, alinhado à direita. */
}

/* ===== Teste de visual (12/10/2026): A = atual, B = jornal de negócios, C = briefing executivo =====
   Desenhos aprovados no canvas. Só a home e as páginas de tema mudam (html[data-teste-visual]);
   o visual.js aplica a escolha antes de a página aparecer. A fonte serifada só é baixada no B e no C. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/source-serif-4-latin-700-normal.woff2') format('woff2'); }

/* Faixa de teste */
.sv-bar { background: #0B1A2B; color: #DCE3EC; border-bottom: 1px solid #24364D; font-size: 13px; }
.sv-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 6px; padding-bottom: 6px; }
.sv-seg { display: inline-flex; border: 1px solid #3A4B61; border-radius: 8px; overflow: hidden; }
.sv-seg button { min-width: 44px; min-height: 32px; padding: 0 12px; border: 0; border-right: 1px solid #3A4B61; background: transparent; color: #DCE3EC; font: 700 13px 'Schibsted Grotesk', system-ui, sans-serif; cursor: pointer; }
.sv-seg button:last-child { border-right: 0; }
.sv-seg button[aria-pressed="true"] { background: #FFFFFF; color: #0B1A2B; }
.sv-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: #1F3A2C; color: #9FE0BC; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv-hint { color: #9FB0C3; }
@media (max-width: 640px) { .sv-hint { display: none; } }

/* Guia (SAF, CCF e base) e os links que levam a ele */
.guia-cta { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; margin-bottom: 14px; border-radius: 14px; background: #E6F2EC; color: #0E4029; text-decoration: none; font-size: 16px; line-height: 1.35; }
.guia-cta:hover { background: #D5EADF; color: #0E4029; }
.guia-tag { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #0E4029; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.guia-cta-arw { margin-left: auto; font-weight: 700; }
.guia-lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; align-self: flex-start; }
.guia-head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.guia-head h1 { margin: 0; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.guia-lead { margin: 0; font-size: 18px; line-height: 1.55; color: #26302B; }
.guia-art .guia-lead { padding: 16px 18px; border-radius: 14px; background: #E6F2EC; color: #0E4029; }
.guia-meta { margin: 0; font-size: 14px; color: var(--muted); }
.guia-hub { display: flex; flex-direction: column; gap: 28px; padding-bottom: 32px; }
.guia-hub h2 { margin: 0 0 14px; font-size: 22px; }
.guia-box { background: var(--card); border-radius: 20px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(18,26,22,.06); }
.guia-flow { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.guia-step { flex: 1 1 150px; background: var(--bg); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.guia-step span { font-size: 13px; color: var(--muted); }
.guia-step.is-last { background: #E6F2EC; }
.guia-step.is-last span { color: #0E4029; }
.guia-flow-arw { display: flex; align-items: center; color: var(--muted); }
.guia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.guia-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(18,26,22,.06); }
.guia-card:hover { border-color: var(--green); color: var(--ink); }
.guia-card strong { font-size: 18px; }
.guia-card span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.guia-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.guia-ver h2 { margin: 0; font-size: 15px; }
.guia-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-bottom: 32px; }
.guia-art { gap: 14px; max-width: 740px; }
.guia-art h2 { margin: 16px 0 0; font-size: 22px; line-height: 1.25; scroll-margin-top: 100px; }
.guia-art p, .guia-art li, .guia-art dd { font-size: 17px; line-height: 1.6; color: #26302B; }
.guia-art p { margin: 0; }
.guia-art ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.guia-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; margin: 0 1px; padding: 0 6px; border: 1px solid #B9D9C8; border-radius: 8px; background: #FFFFFF; color: #16603D; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; vertical-align: middle; box-sizing: border-box; }
.guia-ref:hover { background: #16794A; border-color: #16794A; color: #FFFFFF; }
.guia-flag { padding: 1px 6px; border-radius: 4px; background: #FCEFC7; color: #5C4300; font-size: 14px; font-weight: 600; }
.guia-faq { display: flex; flex-direction: column; gap: 18px; }
.guia-faq h3 { margin: 0 0 4px; font-size: 18px; }
.guia-terms { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.guia-terms dt { font-weight: 700; font-size: 17px; }
.guia-terms dd { margin: 2px 0 0; }
.guia-art .tbl th[scope="row"] { font-weight: 600; white-space: nowrap; }
.guia-art .tbl td { overflow-wrap: anywhere; }
.guia-fontes { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.guia-fontes h2 { margin-top: 0; font-size: 18px; }
.guia-fontes ol { margin: 10px 0 0; padding-left: 26px; display: flex; flex-direction: column; gap: 6px; }
.guia-fontes li { font-size: 15px; }
.guia-pn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.guia-pn a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; text-decoration: none; }
.guia-pn a span { font-size: 13px; color: var(--muted); }
.guia-pn .is-next { margin-left: auto; text-align: right; }
.guia-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 140px; }
.guia-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.guia-nav h2 { margin: 0 0 6px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guia-nav-a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.guia-nav-a:hover { background: var(--bg); color: var(--ink); }
.guia-nav-a.is-on { background: var(--ink); color: #fff; font-weight: 700; }
.guia-menu { display: none; margin-bottom: 14px; background: var(--card); border-radius: 14px; }
.guia-menu summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.guia-menu nav { display: flex; flex-direction: column; padding: 0 6px 8px; }
@media (max-width: 900px) {
  .guia-side { display: none; }
  .guia-menu { display: block; }
}
@media (max-width: 640px) {
  .guia-head h1 { font-size: 30px; }
  .guia-flow-arw { flex: 1 1 100%; justify-content: center; transform: rotate(90deg); }
  .guia-cta { padding: 10px 14px; font-size: 15px; }
}

/* Como funciona e faixa de boas-vindas da home */
.cf { display: flex; flex-direction: column; gap: 18px; max-width: 740px; padding-bottom: 32px; }
.cf h1 { margin: 0; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.cf-lead { margin: 0; padding: 18px 20px; border-radius: 14px; background: #E6F2EC; color: #0E4029; font-size: 19px; line-height: 1.55; }
.cf-jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-jump { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.cf-jump:hover { border-color: var(--green); color: var(--ink); }
.cf-sec { background: var(--card); border-radius: 18px; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(18,26,22,.06); scroll-margin-top: 140px; }
.cf-sec h2 { margin: 0; font-size: 22px; }
.cf-sec p, .cf-sec li { margin: 0; font-size: 17px; line-height: 1.6; color: #26302B; }
.cf-sec ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.cf-ex { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.cf-ex-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cf-ex p { font-size: 16px; line-height: 1.55; }
.cf-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cf-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 16px; }
.bv { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--card); border: 1px solid #C9CEC9; }
.bv-l { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.35; }
.bv-l svg { flex: none; color: var(--green); }
.bv-l:hover strong { text-decoration: underline; }
.bv-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.bv-x:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 640px) {
  .cf h1 { font-size: 30px; }
  .cf-lead { padding: 14px 16px; font-size: 17px; }
  .cf-sec { padding: 18px; }
  .cf-sec p, .cf-sec li { font-size: 16px; }
  .bv { padding: 10px 8px 10px 14px; }
  .bv-l { font-size: 15px; }
}

/* Elementos que só aparecem no B ou no C */
.logo-b, .logo-c, .hdr-date, .brief { display: none; }
.serif, .dest-lead-t, .dest-lead-s, .dest-n, .dest-col a, .dest-card-t { font-family: 'Source Serif 4', Georgia, serif; }
.dest-list { list-style: none; margin: 0; padding: 0; }
.dest-lead-t a, .dest-col a, .dest-card-t a { color: inherit; text-decoration: none; }
.dest-lead-t a:hover, .dest-col a:hover, .dest-card-t a:hover { text-decoration: underline; }

/* ---------- B: Jornal de negócios ---------- */
:root[data-visual="b"] { --bg: #FAF8F3; --card: #FAF8F3; --line: #E4DED3; --soft: #E4DED3; --ink: #141A17; --muted: #5B6460; }
:root[data-visual="b"] body { background: #FAF8F3; }
:root[data-visual="b"] .hdr { background: #FAF8F3; border-bottom: 1px solid #141A17; }
:root[data-visual="b"] .brand > svg { display: none; }
:root[data-visual="b"] .logo-b { display: block; width: 40px; height: 40px; border-radius: 9px; background: url('/assets/icons/logo-b.png') center / cover no-repeat; }
:root[data-visual="b"] .brand { gap: 12px; font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
:root[data-visual="b"] .hdr-date { display: inline; padding-left: 20px; border-left: 1px solid #D9D2C5; font-size: 13px; color: var(--muted); }
:root[data-visual="b"] .hdr-search input { border-radius: 4px; border-color: #D9D2C5; background: #FFFFFF; }
:root[data-visual="b"] .btn-outline, :root[data-visual="b"] .datebtn, :root[data-visual="b"] .acct { border-radius: 4px; background: transparent; }
:root[data-visual="b"] main.wrap { padding-top: 32px; }
:root[data-visual="b"] .dest { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; margin-bottom: 40px; }
:root[data-visual="b"] .dest[hidden] { display: none; }
:root[data-visual="b"] .dest-lead { display: flex; flex-direction: column; gap: 12px; }
:root[data-visual="b"] .dest-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #141A17; }
:root[data-visual="b"] .k-ccf { color: #0B6B4F; } :root[data-visual="b"] .k-saf { color: #2C3E8C; } :root[data-visual="b"] .k-base { color: #9A4A12; }
:root[data-visual="b"] .dest-lead-t { margin: 0; font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
:root[data-visual="b"] .dest-lead-s { margin: 0; font-size: 19px; line-height: 1.5; color: #333B37; }
:root[data-visual="b"] .dest-meta { margin: 0; }
:root[data-visual="b"] .dest-side { border-top: 3px solid #141A17; padding-top: 12px; }
:root[data-visual="b"] .dest-t { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
:root[data-visual="b"] .dest-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #E4DED3; }
:root[data-visual="b"] .dest-n { font-size: 28px; font-weight: 600; line-height: 1; color: #16794A; font-variant-numeric: tabular-nums; }
:root[data-visual="b"] .dest-col { display: flex; flex-direction: column; gap: 4px; }
:root[data-visual="b"] .dest-col a { font-size: 17px; line-height: 1.3; font-weight: 600; }
:root[data-visual="b"] .dest-src { font-size: 13px; color: var(--muted); }
:root[data-visual="b"] .list-head { border-bottom: 3px solid #141A17; padding-bottom: 8px; margin-bottom: 0; }
:root[data-visual="b"] .list-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 24px; font-weight: 700; }
:root[data-visual="b"] .grid { display: block; }
:root[data-visual="b"] .card { background: transparent; box-shadow: none; border-radius: 0; padding: 18px 0 4px; border-bottom: 1px solid #E4DED3; gap: 6px; }
:root[data-visual="b"] .card-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 600; }
:root[data-visual="b"] .card .chip { height: auto; padding: 0; background: transparent; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
:root[data-visual="b"] .card .t-ccf { color: #0B6B4F; } :root[data-visual="b"] .card .t-saf { color: #2C3E8C; } :root[data-visual="b"] .card .t-base { color: #9A4A12; }
:root[data-visual="b"] .card .thumb-link { display: none; }
:root[data-visual="b"] .card .actions { border-top: 0; padding-top: 0; }
:root[data-visual="b"] .card-aberta, :root[data-visual="b"] .card-vista { background: transparent; border-left: 0; border-right: 0; border-top: 0; }
:root[data-visual="b"] .sharebox { border-radius: 4px; background: transparent; }
:root[data-visual="b"] .ftr { background: #FAF8F3; border-top: 1px solid #141A17; }
@media (max-width: 760px) {
  :root[data-visual="b"] .hdr-date { display: none; }
  :root[data-visual="b"] .brand { font-size: 24px; }
  :root[data-visual="b"] .dest { grid-template-columns: 1fr; gap: 24px; }
  :root[data-visual="b"] .dest-lead-t { font-size: 28px; }
  :root[data-visual="b"] .dest-lead-s { font-size: 17px; }
}

/* ---------- C: Briefing executivo ---------- */
:root:is([data-visual="c"], [data-visual="d"]) { --bg: #FFFFFF; --ink: #0E1B2C; --muted: #5A6472; --line: #E3E7EC; --soft: #EEF1F4; }
:root:is([data-visual="c"], [data-visual="d"]) body { background: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr { background: #0B1A2B; border-bottom: 0; color: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .brand { color: #FFFFFF; gap: 12px; font-size: 20px; font-weight: 700; }
:root:is([data-visual="c"], [data-visual="d"]) .brand > svg { display: none; }
:root:is([data-visual="c"], [data-visual="d"]) .logo-c { display: block; width: 40px; height: 40px; background: url('/assets/icons/logo-c.png') center / contain no-repeat; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr-search input { border-radius: 8px; border-color: #2B3B50; background: #13243A; color: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr-search input::placeholder { color: #8FA0B4; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr .btn-outline, :root:is([data-visual="c"], [data-visual="d"]) .hdr .acct { border-color: #3A4B61; border-radius: 8px; background: transparent; color: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr a.btn-outline { color: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr .ib, :root:is([data-visual="c"], [data-visual="d"]) .hdr-tema { color: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .hdr .ib:hover { background: rgba(255,255,255,.12); }
:root:is([data-visual="c"], [data-visual="d"]) .hdr-upd { color: #C9D3DF; }
:root[data-visual="b"] .hdr-upd { display: none; }
:root:is([data-visual="c"], [data-visual="d"]) main.wrap { padding-top: 36px; }
:root:is([data-visual="c"], [data-visual="d"]) .brief { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
:root:is([data-visual="c"], [data-visual="d"]) .brief-k { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:root:is([data-visual="c"], [data-visual="d"]) .brief-h { font-family: 'Source Serif 4', Georgia, serif; font-size: 40px; line-height: 1.1; font-weight: 700; }
:root:is([data-visual="c"], [data-visual="d"]) .dest { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
:root:is([data-visual="c"], [data-visual="d"]) .dest[hidden] { display: none; }
:root:is([data-visual="c"], [data-visual="d"]) .dest-t, :root:is([data-visual="c"], [data-visual="d"]) .list-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
:root:is([data-visual="c"], [data-visual="d"]) .dest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:root:is([data-visual="c"], [data-visual="d"]) .dest-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid #E3E7EC; border-radius: 12px; background: #F7F9FB; }
:root:is([data-visual="c"], [data-visual="d"]) .dest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:root:is([data-visual="c"], [data-visual="d"]) .dest-num { font-size: 13px; color: var(--muted); }
:root:is([data-visual="c"], [data-visual="d"]) .dest-num b { font-family: 'Source Serif 4', Georgia, serif; font-size: 30px; font-weight: 700; color: #16794A; font-variant-numeric: tabular-nums; }
:root:is([data-visual="c"], [data-visual="d"]) .dest-card-t { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; }
:root:is([data-visual="c"], [data-visual="d"]) .dest-meta { margin: auto 0 0; }
:root:is([data-visual="c"], [data-visual="d"]) .chip { height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
:root:is([data-visual="c"], [data-visual="d"]) .t-ccf { background: #E3F2EA; color: #0B5A40; } :root:is([data-visual="c"], [data-visual="d"]) .t-saf { background: #E6EAF7; color: #25357A; } :root:is([data-visual="c"], [data-visual="d"]) .t-base { background: #FBEADC; color: #8A3F0D; }
:root:is([data-visual="c"], [data-visual="d"]) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
:root:is([data-visual="c"], [data-visual="d"]) .card { box-shadow: none; border: 1px solid #E3E7EC; border-radius: 12px; padding: 20px 20px 8px; }
:root:is([data-visual="c"], [data-visual="d"]) .card-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.32; }
:root:is([data-visual="c"], [data-visual="d"]) .card .thumb-link { display: none; }
:root:is([data-visual="c"], [data-visual="d"]) .card .actions { border-top: 0; }
:root:is([data-visual="c"], [data-visual="d"]) .card .mk { min-height: 32px; margin: 6px 0; border: 1px solid #E3E7EC; border-radius: 999px; padding: 0 10px; text-decoration: none; font-size: 13px; }
:root:is([data-visual="c"], [data-visual="d"]) .ftr { background: #0B1A2B; border-top: 0; color: #C9D3DF; }
:root:is([data-visual="c"], [data-visual="d"]) .ftr a, :root:is([data-visual="c"], [data-visual="d"]) .ftr .ftr-btn { color: #FFFFFF; }
:root:is([data-visual="c"], [data-visual="d"]) .ftr-links a:hover, :root:is([data-visual="c"], [data-visual="d"]) .ftr-btn:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
@media (max-width: 760px) {
  :root:is([data-visual="c"], [data-visual="d"]) .dest-grid, :root:is([data-visual="c"], [data-visual="d"]) .grid { grid-template-columns: 1fr; }
  :root:is([data-visual="c"], [data-visual="d"]) .brief-h { font-size: 30px; }
}
.dest-meta { display: block; }

/* ---------- D: cores, logo e Destaques do C; lista em 3 colunas com foto pequena ao lado do título
   (canvas aprovado em 15/10/2026). Sem foto, o título ocupa a largura do card. ---------- */
:root[data-visual="d"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-visual="d"] .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 10px; }
:root[data-visual="d"] .card-body { display: contents; }
:root[data-visual="d"] .card .meta { grid-column: 1 / -1; flex-wrap: nowrap; min-width: 0; }
:root[data-visual="d"] .card .meta > span:not(.tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-visual="d"] .card .meta > .chip, :root[data-visual="d"] .card .meta > .tag, :root[data-visual="d"] .card .seen { flex: none; }
:root[data-visual="d"] .card-title { grid-column: 1; grid-row: 2; }
:root[data-visual="d"] .card:not(:has(.thumb-link)) .card-title { grid-column: 1 / -1; }
:root[data-visual="d"] .card .thumb-link { display: block; grid-column: 2; grid-row: 2; align-self: start; }
:root[data-visual="d"] .card .thumb { width: 96px; height: 96px; max-height: none; border-radius: 8px; }
:root[data-visual="d"] .card .actions { grid-column: 1 / -1; grid-row: 3; align-self: end; }
@media (max-width: 1100px) {
  :root[data-visual="d"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root[data-visual="d"] .grid { grid-template-columns: 1fr; }
  :root[data-visual="d"] .card-title { font-size: 18px; }
  :root[data-visual="d"] .card .thumb { width: 80px; height: 80px; }
}
:root[data-visual="b"] .hdr-search { flex: 1 1 280px; }
:root[data-visual="b"] .dest.dest-solo { grid-template-columns: minmax(0, 1fr); }
:root[data-visual="b"] .dest.dest-solo .dest-lead { max-width: 820px; }