/* Moldura do site com a marca Tony Celestino (Brand Kit v2), em tema escuro.
   Marca: Anton 400 na assinatura e em títulos curtos; Manrope no texto.
   Paleta aprovada: grafite #171918, Slow Swing #2C3241, Cloud Dancer #F0EEE9, Free Groove #024A7F.
   Free Groove é acento de fundo claro: no escuro, aparece só como fundo de botão ativo, com texto Cloud Dancer.
   Os dados continuam em vermelho (Lula) e azul (Flávio), como nos vídeos. */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(/2026/marca/anton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(/2026/marca/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(/2026/marca/manrope-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(/2026/marca/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(/2026/marca/manrope-latin-700-normal.woff2) format('woff2'); }

:root[data-tema="marca"] {
  --fundo: #171918;          /* grafite */
  --painel: #1e2122;
  --canvas: #1e2122;
  --borda: #2f3335;
  --texto: #F0EEE9;          /* Cloud Dancer */
  --sec: #a9a7a1;
  --ter: #77766f;
  --slow: #2C3241;           /* Slow Swing */
  --groove: #024A7F;         /* Free Groove */
  --sans: 'Manrope', Arial, sans-serif;
  --mono: 'Manrope', Arial, sans-serif;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --fonte-eixo: 'Manrope', Arial, sans-serif;
  --fonte-rotulo: 'Manrope', Arial, sans-serif;
}
[data-tema="marca"] body { font-family: var(--sans); font-size: 16px; }

/* topo fixo, pronto para o menu das subpáginas */
[data-tema="marca"] .topo { display: block; position: sticky; top: 0; z-index: 40; max-width: none; padding: 0; background: rgba(23, 25, 24, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
[data-tema="marca"] .topo-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 14px; }
[data-tema="marca"] .simbolo { display: block; line-height: 0; }
[data-tema="marca"] .simbolo img { width: 36px; height: auto; }
[data-tema="marca"] .topo .marca { padding-left: 14px; border-left: 1px solid var(--borda); font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
[data-tema="marca"] .menu { margin-left: auto; display: flex; gap: 4px; }
[data-tema="marca"] .menu a, [data-tema="marca"] .menu button { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px;
  border: 0; background: none; color: var(--sec); font: 600 14px var(--sans); text-decoration: none; cursor: pointer; }
[data-tema="marca"] .menu a:hover, [data-tema="marca"] .menu button:hover { color: var(--texto); }
[data-tema="marca"] .menu [aria-current="page"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--texto); border-radius: 0; }
[data-tema="marca"] #painel, [data-tema="marca"] #ficha, [data-tema="marca"] #estados { scroll-margin-top: 72px; }

/* abertura em grafite */
[data-tema="marca"] .abertura { padding: 44px 0 28px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t v" "s v" "p v"; column-gap: 32px; align-items: start; }
[data-tema="marca"] .abertura h1 { grid-area: t; }
[data-tema="marca"] .abertura .sub { grid-area: s; }
[data-tema="marca"] .abertura .placar { grid-area: p; }
[data-tema="marca"] .chamada-video { grid-area: v; align-self: end; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid var(--borda);
  border-radius: 4px; background: #1e2122; cursor: pointer; text-align: left; color: var(--texto); }
[data-tema="marca"] .chamada-video:hover { border-color: #4a4e50; }
[data-tema="marca"] .chamada-video[hidden] { display: none; }
[data-tema="marca"] .cv-capa { position: relative; width: 128px; aspect-ratio: 16 / 9; border-radius: 2px; background: #000 center / cover no-repeat; flex: none; }
[data-tema="marca"] .cv-capa::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: #fff; background: rgba(0,0,0,.3); }
[data-tema="marca"] .cv-texto { display: grid; gap: 2px; font-size: 14px; color: var(--sec); }
[data-tema="marca"] .cv-texto b { font: 700 15px var(--sans); color: var(--texto); }

/* vídeo em diálogo: escurece a página atrás */
.dlg-video { width: min(1100px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.dlg-video::backdrop { background: rgba(8, 9, 9, .86); }
.dlg-moldura { aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dlg-moldura iframe { width: 100%; height: 100%; border: 0; display: block; }
.dlg-fechar { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 4px; border: 1px solid rgba(240,238,233,.3);
  background: rgba(23,25,24,.8); color: #F0EEE9; font-size: 16px; cursor: pointer; }

[data-tema="marca"] h1 { font: 400 clamp(46px, 8vw, 96px)/.98 var(--display); letter-spacing: 0; text-transform: lowercase; margin-bottom: 18px; }
[data-tema="marca"] h1::after { content: '.'; }
[data-tema="marca"] .sub { color: #c9cbd3; font-size: 18px; }
[data-tema="marca"] h2 { font: 400 32px/1.05 var(--display); text-transform: lowercase; letter-spacing: 0; }
[data-tema="marca"] h3 { font: 700 11px/1.3 var(--sans); letter-spacing: .1em; }
[data-tema="marca"] .placar .k { font: 700 11px/1.2 var(--sans); letter-spacing: .1em; color: #c9cbd3; }
[data-tema="marca"] .placar .v { font: 400 42px/1.05 var(--display); letter-spacing: .01em; white-space: nowrap; }

/* painel */
[data-tema="marca"] .painel { border-radius: 4px; border-color: var(--borda); }
[data-tema="marca"] .busca input { border-radius: 4px; background-color: #141615; border-color: #3a3e40; font-family: var(--sans); font-weight: 500; font-size: 16px; }
[data-tema="marca"] .sug { border-radius: 4px; background: #232627; }
[data-tema="marca"] .sug .res, [data-tema="marca"] .parecidas .res, [data-tema="marca"] .uf .marg, [data-tema="marca"] .ctx .val { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-tema="marca"] .lentes button { border-radius: 4px; font-size: 14px; font-weight: 600; height: 36px; }
[data-tema="marca"] .lentes button[aria-selected="true"] { background: var(--groove); border-color: var(--groove); color: var(--texto); }
[data-tema="marca"] .balao { border-radius: 4px; background: rgba(35, 38, 39, .97); }
[data-tema="marca"] .balao .linha { font-family: var(--sans); font-weight: 600; }
[data-tema="marca"] .legenda { font: 600 12px var(--sans); }
[data-tema="marca"] .limpar-uf { border-radius: 4px; }

/* ficha */
[data-tema="marca"] .ficha h2 { font: 400 38px/1 var(--display); text-transform: none; }
[data-tema="marca"] .nums b { font: 400 34px/1.05 var(--display); letter-spacing: .01em; }
[data-tema="marca"] .barra { border-radius: 2px; }
[data-tema="marca"] .selo { border-radius: 2px; background: var(--texto); color: var(--fundo); font-family: var(--sans); font-weight: 700; }
[data-tema="marca"] .f-fechar { border-radius: 4px; }
[data-tema="marca"] .acoes a, [data-tema="marca"] .acoes button { border-radius: 4px; font-weight: 600; font-size: 14px; }
[data-tema="marca"] .acoes .prim { background: var(--groove); border-color: var(--groove); color: var(--texto); }
[data-tema="marca"] .uf-leg { font-family: var(--sans); font-weight: 600; }
[data-tema="marca"] .uf .nome small { font-family: var(--sans); }
[data-tema="marca"] .video-moldura { border-radius: 4px; }

/* notas e rodapé */
[data-tema="marca"] .notas { display: block; margin-top: 40px; padding-top: 20px; }
[data-tema="marca"] .notas p { max-width: 860px; font-size: 14px; margin: 0 0 6px; }
[data-tema="marca"] .rodape { display: block; max-width: none; padding: 0; margin-top: 40px; border-top: 1px solid var(--borda); }
[data-tema="marca"] .rodape-in { max-width: 1240px; margin: 0 auto; padding: 32px 16px 40px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "a r" "a l"; gap: 14px 24px; align-items: end; }
[data-tema="marca"] .assinatura-rodape { grid-area: a; display: block; width: 130px; height: auto; }
[data-tema="marca"] .redes { grid-area: r; display: flex; justify-content: flex-end; gap: 8px; }
[data-tema="marca"] .redes a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; color: var(--sec); }
[data-tema="marca"] .redes a:hover { color: var(--texto); background: #1e2122; }
[data-tema="marca"] .redes svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-tema="marca"] .linha-fim { grid-area: l; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; font: 600 12px var(--sans); color: var(--ter); }
[data-tema="marca"] .aviso { border-radius: 4px; }
@media (max-width: 1100px) {
  [data-tema="marca"] .abertura { padding-top: 28px; grid-template-columns: 1fr; grid-template-areas: "t" "s" "p" "v"; }
  [data-tema="marca"] .chamada-video { margin-top: 20px; justify-self: start; }
}
@media (max-width: 900px) {
  [data-tema="marca"] .abertura { padding-top: 28px; grid-template-columns: 1fr; grid-template-areas: "t" "s" "p" "v"; }
  [data-tema="marca"] .chamada-video { margin-top: 20px; justify-self: stretch; }
  [data-tema="marca"] .topo .marca { display: none; }
  [data-tema="marca"] .rodape-in { grid-template-columns: 1fr auto; grid-template-areas: "a r" "l l"; }
  [data-tema="marca"] .linha-fim { justify-content: flex-start; }
  [data-tema="marca"] .placar .v { font-size: 34px; }
}