<style>
/* ====================================================================
Paleta e tokens — MESMA estrutura de valores do site de referência
(raio de borda, sombra, grid, breakpoints), só a cor muda por token.
Referência: azul #123c69/#174a78 → vermelho · resto preservado.
==================================================================== */
:root {
–ink: #15100E;
–body-ink: #4A4238;
–brand: #A6192E;
–brand-hover: #7C1322;
–brand-soft: #FBEAEA;
–confirm: #157A4A;
–confirm-soft: #EAF7EF;
–confirm-deep: #0F5C37;
–warn: #B45309;
–warn-bg: #FDF3E4;
–warn-border: #F0CE9A;
–border: #E7DED2;
–border-soft: #F1EAE0;
–surface: #FFFFFF;
–surface-soft: #FBF8F4;
–ground: #F6F2EC;
–shadow-card: 0 12px 28px rgba(21,16,14,.07);
–shadow-step: 0 10px 24px rgba(21,16,14,.06);
Publicidade
–f-system: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=”light”]) {
–ink: #F2ECE4; –body-ink: #C9BEAE;
–brand: #E2536A; –brand-hover: #EF7A8C; –brand-soft: #3A1A1F;
–confirm: #4FBE85; –confirm-soft: #163726; –confirm-deep: #7BD4A2;
–warn: #E3A75B; –warn-bg: #3A2C13; –warn-border: #5A431E;
–border: #382F27; –border-soft: #2A231D;
–surface: #201A16; –surface-soft: #251E19; –ground: #171310;
–shadow-card: 0 12px 28px rgba(0,0,0,.35); –shadow-step: 0 10px 24px rgba(0,0,0,.3);
}
}
:root[data-theme=”dark”] {
–ink: #F2ECE4; –body-ink: #C9BEAE;
–brand: #E2536A; –brand-hover: #EF7A8C; –brand-soft: #3A1A1F;
–confirm: #4FBE85; –confirm-soft: #163726; –confirm-deep: #7BD4A2;
–warn: #E3A75B; –warn-bg: #3A2C13; –warn-border: #5A431E;
–border: #382F27; –border-soft: #2A231D;
–surface: #201A16; –surface-soft: #251E19; –ground: #171310;
–shadow-card: 0 12px 28px rgba(0,0,0,.35); –shadow-step: 0 10px 24px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
margin: 0;
background: var(–ground);
color: var(–ink);
font-family: var(–f-system);
font-size: 18px;
line-height: 28.8px;
}
img, video { max-width: 100%; height: auto; }
.test-banner {
background: var(–ink);
color: var(–ground);
font-family: var(–f-system);
font-size: 12px;
letter-spacing: .04em;
text-align: center;
padding: 9px 12px;
}
.test-banner b { color: var(–brand); }
.shell {
width: 100%;
padding: 18px 16px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 760px;
margin: 0 auto;
}
.brand-logo { font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(–brand); line-height: 1; }
.brand-tag { display: block; font-size: 11px; font-weight: 700; color: var(–body-ink); letter-spacing: .02em; margin-top: 3px; }
.shell-nav { display: flex; gap: 28px; font-size: 15px; }
.shell-nav a { color: var(–ink); text-decoration: none; }
.shell-nav a:hover { text-decoration: underline; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 70px; }
.kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
color: var(–brand-hover); background: var(–brand-soft); border: 1px solid var(–border);
border-radius: 999px; padding: 7px 12px;
}
.hero { margin: 16px auto 16px; max-width: 620px; }
.hero h1 { font-size: clamp(24px,4.4vw,36px); line-height: 1.14; margin: 12px 0 8px; color: var(–ink); }
.hero p { font-size: 16px; line-height: 1.6; color: var(–body-ink); margin: 0; }
.pressel-card {
width: 100%; max-width: 500px; margin: 18px auto 0; padding: 30px 20px;
background: var(–surface); border-radius: 12px; border: 1px solid var(–border);
box-shadow: 0 6px 18px rgba(21,16,14,.08); box-sizing: border-box;
}
.pressel-card .card-title {
font-size: 22px; font-weight: 800; color: var(–ink); text-align: center;
margin: 0 0 10px; line-height: 1.2; text-transform: uppercase;
}
.pressel-card .card-subtitle {
font-size: 17px; color: var(–ink); text-align: center; margin: 0 0 18px;
font-weight: 700; line-height: 20.4px;
}
.pressel-card .card-intro {
text-align: center; margin: 0 0 22px; font-weight: 500; color: var(–body-ink); line-height: 26px; font-size: 15px;
}
.pressel-card .card-button {
display: block; width: 100%; padding: 16px 12px; background: var(–brand); text-align: center;
font-size: 17px; line-height: 27.2px; font-weight: 800; border-radius: 10px; margin: 4px 0 0;
cursor: pointer; color: #fff; text-decoration: none; box-sizing: border-box;
}
.pressel-card .card-button:hover { background: var(–brand-hover); }
.pressel-card .card-note {
text-align: center; font-size: 13.5px; line-height: 22.4px; color: var(–confirm);
border-top: 1px solid var(–border-soft); padding-top: 15px; margin: 20px 0 20px;
}
.pressel-card .card-vantagens { list-style: none; padding: 0; margin: 0; }
.pressel-card .card-vantagens li {
font-size: 13.5px; line-height: 22.4px; color: var(–body-ink); margin-bottom: 6px;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.pressel-card .card-vantagens li:before { content: “\2713”; color: var(–confirm); margin-right: 8px; font-weight: 900; }
@media (max-width: 640px) { .pressel-card { padding: 24px 16px; } .pressel-card .card-button { min-height: 52px; } }
.trust-line { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.trust-line span {
border: 1px solid var(–border); border-radius: 999px; background: var(–surface);
color: var(–confirm-deep); font-size: 12px; font-weight: 850; padding: 6px 10px;
}
.card {
background: var(–surface); border: 1px solid var(–border); border-radius: 20px;
box-shadow: var(–shadow-card); padding: 18px; margin: 18px 0;
}
.matchup { display: flex; align-items: baseline; justify-content: center; gap: 12px; font-size: 21px; font-weight: 800; text-align: center; color: var(–ink); }
.matchup .vs { font-size: 13px; font-weight: 700; color: var(–body-ink); }
.matchmeta {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
font-size: 13px; color: var(–body-ink); font-variant-numeric: tabular-nums;
border-top: 1px solid var(–border-soft); margin-top: 12px; padding-top: 12px;
}
.matchmeta b { color: var(–ink); }
.card p { margin: 12px 0 0; color: var(–body-ink); font-size: 15px; line-height: 1.55; }
.card p:first-of-type { margin-top: 14px; }
.tbc {
display: inline-flex; align-items: center; gap: 6px; background: var(–warn-bg); color: var(–warn);
font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(–warn-border);
}
.adslot { margin: 8px auto; clear: both; text-align: center; min-height: 90px; }
.adslot-label { border-bottom: 1px solid var(–border-soft); padding-bottom: 1px; margin-bottom: 6px; }
.adslot-label span { font-size: 9px; color: var(–body-ink); }
.adslot-body { font-size: 12px; color: var(–body-ink); min-height: 60px; display: flex; align-items: center; justify-content: center; }
.adslot.is-loaded .adslot-body { color: var(–ink); font-weight: 700; background: var(–surface-soft); border-radius: 12px; }
.guide-section { max-width: 760px; margin: 16px auto; padding: 18px; border: 1px solid var(–border); border-radius: 20px; background: var(–surface); }
.guide-section > h2 { font-size: 24px; line-height: 1.2; margin: 0 0 6px; color: var(–ink); }
.section-lead { margin: 0 0 14px; color: var(–body-ink); line-height: 1.55; font-size: 15px; }
.step-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.step {
position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px;
min-height: 132px; padding: 16px; border: 1px solid var(–border); border-radius: 20px;
background: var(–surface); box-shadow: var(–shadow-step);
}
.step-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(–confirm-soft); color: var(–confirm-deep); font-size: 22px; }
.step-number { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 950; color: var(–confirm-deep); background: var(–confirm-soft); border-radius: 999px; padding: 4px 7px; }
.step h3 { font-size: 16px; line-height: 1.25; margin: 2px 0 6px; color: var(–brand-hover); }
.step p { font-size: 14px; line-height: 1.5; margin: 0; color: var(–body-ink); }
.route-panel {
max-width: 620px; margin: 16px auto; padding: 18px; border: 1px solid var(–warn-border);
border-radius: 22px; background: linear-gradient(135deg, var(–confirm-soft), var(–surface));
box-shadow: var(–shadow-card);
}
.route-panel h2 { font-size: 22px; line-height: 1.15; margin: 0 0 7px; color: var(–ink); }
.route-panel > p { font-size: 14px; line-height: 1.45; color: var(–body-ink); margin: 0 0 14px; }
.route-primary {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
min-height: 58px; padding: 13px 18px; border-radius: 16px; background: var(–confirm); color: #fff;
font-weight: 950; text-decoration: none; margin-bottom: 12px; font-size: 15px;
}
.route-primary span { font-size: 13px; font-weight: 750; opacity: .92; white-space: nowrap; }
.route-list { display: grid; gap: 9px; }
.route-card {
display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center;
padding: 12px; border: 1px solid var(–border); border-radius: 17px; background: var(–surface);
color: var(–ink); text-decoration: none;
}
.route-index { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(–confirm-soft); color: var(–confirm-deep); font-weight: 950; }
.route-card strong { display: block; color: var(–brand-hover); font-size: 15px; line-height: 1.2; margin-bottom: 3px; }
.route-card span { display: block; color: var(–body-ink); font-size: 13px; line-height: 1.35; }
.route-arrow { color: var(–confirm); font-size: 20px; font-weight: 950; }
.decision-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.decision-card { padding: 14px; border: 1px solid var(–border); border-radius: 16px; background: var(–surface-soft); }
.decision-card strong { display: block; margin-bottom: 5px; color: var(–confirm-deep); font-size: 14px; }
.decision-card p { margin: 0; color: var(–body-ink); font-size: 14px; line-height: 1.45; }
.faq details { border-top: 1px solid var(–border-soft); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 900; color: var(–brand-hover); }
.faq p { margin: 7px 0 0; color: var(–body-ink); line-height: 1.55; font-size: 14.5px; }
.source-list { display: grid; gap: 8px; margin-top: 12px; }
.source-list a {
display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px;
border: 1px solid var(–border); border-radius: 14px; color: var(–brand-hover); font-weight: 850;
text-decoration: none; background: var(–surface-soft);
}
.source-list .src-meta { display: flex; flex-direction: column; gap: 2px; }
.source-list .src-name { color: var(–ink); }
.source-list .src-note { font-size: 12.5px; color: var(–body-ink); font-weight: 500; }
.source-list .src-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.source-list .src-status.ok { color: var(–confirm); }
.source-list .src-status.pending { color: var(–warn); }
.source-list a:after { content: “Abrir ↗”; color: var(–confirm); font-size: 12px; white-space: nowrap; }
.quick-paths { max-width: 760px; margin: 14px auto; padding: 16px; border: 1px solid var(–border); border-radius: 18px; background: var(–surface-soft); }
.quick-paths h2 { font-size: 20px; line-height: 1.2; margin: 0 0 10px; color: var(–ink); }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.choice-link { display: block; padding: 12px; border: 1px solid var(–border); border-radius: 14px; background: var(–surface); color: var(–brand-hover); text-decoration: none; font-weight: 900; line-height: 1.3; }
.choice-link span { display: block; margin-top: 4px; color: var(–body-ink); font-size: 12px; font-weight: 750; }
.site-footer { max-width: 760px; margin: 34px auto 0; padding: 22px 16px 30px; border-top: 1px solid var(–border-soft); color: var(–body-ink); font-size: 13px; line-height: 1.5; }
.site-footer strong { display: block; color: var(–ink); font-size: 15px; margin-bottom: 6px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 12px 0; }
.site-footer a { color: var(–brand-hover); text-decoration: none; font-weight: 800; }
.site-footer a:hover { text-decoration: underline; }
.small { font-size: 12px; color: var(–body-ink); opacity: .85; margin: 4px 0 0; }
.vgb-ad-clearance-after-control { margin-top: var(–vgb-gap-top,0px) !important; }
.vgb-ad-clearance-before-control { margin-bottom: var(–vgb-gap-bottom,0px) !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(–brand); outline-offset: 2px; }
@media (max-width: 720px) {
.step-grid, .decision-grid, .choice-grid { grid-template-columns: 1fr; }
.hero h1 { font-size: 24px; }
.shell { padding: 14px 16px; }
.shell-nav { gap: 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.devpanel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(–surface); border-top: 1px solid var(–border); font-family: ui-monospace, “SF Mono”, monospace; max-height: 44vh; display: flex; flex-direction: column; }
.devpanel-toggle { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(–body-ink); max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.devpanel-toggle b { color: var(–brand); }
.devpanel-count { font-variant-numeric: tabular-nums; background: var(–surface-soft); border-radius: 10px; padding: 1px 8px; color: var(–ink); }
.devpanel-body { display: none; overflow-y: auto; border-top: 1px solid var(–border-soft); }
.devpanel.open .devpanel-body { display: block; }
.devpanel-intro { max-width: 760px; margin: 0 auto; padding: 10px 16px 0; font-size: 11.5px; color: var(–body-ink); font-family: var(–f-system); }
.devpanel-log { max-width: 760px; margin: 0 auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 5px; }
.devpanel-row { display: grid; grid-template-columns: 62px 96px 1fr; gap: 10px; font-size: 11px; color: var(–body-ink); padding: 3px 0; border-bottom: 1px dotted var(–border-soft); }
.devpanel-row .t { color: var(–body-ink); opacity: .7; font-variant-numeric: tabular-nums; }
.devpanel-row .ev { color: var(–brand); font-weight: 700; }
.devpanel-row .d { color: var(–ink); }
</style>
<div class=”test-banner”>MOCKUP DE TESTE — <b>Protocolo 95</b> · mesma estrutura/CSS do site de referência, cores e texto adaptados ao nicho “jogo do flamengo”</div>
<header class=”shell”>
<div>
<span class=”brand-logo”>Central do Torcedor</span>
<span class=”brand-tag”>Cobertura independente de futebol</span>
</div>
<nav class=”shell-nav”>
<a href=”#”>Início</a>
<a href=”#”>Times</a>
<a href=”#”>Contato</a>
</nav>
</header>
<div class=”wrap”>
<span class=”kicker”>Brasileirão Série A</span>
<div class=”pressel-card”>
<p class=”card-title”>Próximo jogo do Flamengo</p>
<h2 class=”card-subtitle”>Flamengo × Botafogo — 30 de agosto, 16h</h2>
<p class=”card-intro”>Veja o horário confirmado, o local e o que fazer enquanto o canal de transmissão ainda não sai.</p>
<p><a class=”card-button” href=”#detalhes”>VER HORÁRIO E ONDE ASSISTIR →</a></p>
<p class=”card-note”>Fonte: calendário oficial do Flamengo · nenhum ingresso é vendido aqui</p>
<ul class=”card-vantagens”>
<li>Data e horário já confirmados</li>
<li>Nenhum dado pessoal solicitado</li>
<li>Links diretos para as fontes oficiais</li>
</ul>
</div>
<div class=’adslot’ data-slot-name=”Content1″ id=”slot-Content1″ style=”margin:8px auto;text-align:center;display:block;clear:both;”>
<div class=”adslot-label”><span>Ads</span></div>
<div class=”adslot-body”>carregando quando visível…</div>
</div>
<div class=”card” id=”detalhes”>
<div class=”matchup”>FLAMENGO <span class=”vs”>×</span> BOTAFOGO</div>
<div class=”matchmeta”>
<span>📅 <b>30 de agosto</b></span>
<span>🕓 <b>16h00</b> · Brasília</span>
<span>📍 <b>Maracanã</b></span>
<span>🏆 <b>Brasileirão Série A</b></span>
</div>
<p>O próximo jogo do Flamengo é contra o Botafogo, no dia <strong>30 de agosto</strong>, às <strong>16h</strong>, no <strong>Maracanã</strong>. <span class=”tbc”>⏳ transmissão a confirmar</span></p>
<p>A emissora responsável costuma ser anunciada pela CBF nos dias que antecedem a rodada — assim que sair, esta página é atualizada.</p>
<div class=”trust-line”>
<span>Informação gratuita</span>
<span>Sem cadastro</span>
<span>Fontes oficiais</span>
</div>
</div>
<section class=”guide-section”>
<h2>Passo a passo</h2>
<p class=”section-lead”>Quatro passos pra não perder o jogo, na ordem que faz diferença.</p>
<div class=”step-grid”>
<div class=”step”>
<div class=”step-icon”>📅</div>
<div>
<span class=”step-number”>1</span>
<h3>Confirme a data e o horário</h3>
<p>30 de agosto, 16h — já oficial no calendário do clube.</p>
</div>
</div>
<div class=”step”>
<div class=”step-icon”>🌎</div>
<div>
<span class=”step-number”>2</span>
<h3>Ajuste pro seu fuso</h3>
<p>Horário acima é de Brasília — corrija se estiver em outro fuso.</p>
</div>
</div>
<div class=”step”>
<div class=”step-icon”>📡</div>
<div>
<span class=”step-number”>3</span>
<h3>Acompanhe o anúncio da transmissão</h3>
<p>Normalmente sai de 3 a 5 dias antes do jogo.</p>
</div>
</div>
<div class=”step”>
<div class=”step-icon”>📺</div>
<div>
<span class=”step-number”>4</span>
<h3>Escolha como vai acompanhar</h3>
<p>TV, streaming ou texto ao vivo — compare abaixo pela sua situação.</p>
</div>
</div>
</div>
</section>
<div class=”route-panel”>
<h2>Compare antes de agir</h2>
<p>O caminho certo depende do que você já tem disponível.</p>
<a class=”route-primary” href=”#”>Tem TV aberta ou assinatura? <span>Canal a confirmar</span></a>
<div class=”route-list”>
<a class=”route-card” href=”#”>
<span class=”route-index”>1</span>
<span><strong>Sem TV, só o celular</strong><span>Streaming oficial ou texto minuto a minuto</span></span>
<span class=”route-arrow”>→</span>
</a>
<a class=”route-card” href=”#”>
<span class=”route-index”>2</span>
<span><strong>Fora de casa, só quer o placar</strong><span>Minuto a minuto textual, sempre grátis</span></span>
<span class=”route-arrow”>→</span>
</a>
<a class=”route-card” href=”#”>
<span class=”route-index”>3</span>
<span><strong>Quer ir ao Maracanã</strong><span>Ingressos pelo canal oficial do mandante</span></span>
<span class=”route-arrow”>→</span>
</a>
</div>
</div>
<div class=’adslot’ data-slot-name=”Content2″ id=”slot-Content2″ style=”margin:8px auto;text-align:center;display:block;clear:both;”>
<div class=”adslot-label”><span>Ads</span></div>
<div class=”adslot-body”>carregando quando visível…</div>
</div>
<section class=”guide-section”>
<h2>O que pode mudar até lá</h2>
<p class=”section-lead”>Vale checar de novo perto da data se qualquer um destes pontos se aplicar a você.</p>
<div class=”decision-grid”>
<div class=”decision-card”>
<strong>Horário pode mudar</strong>
<p>Remanejamento de mando de campo ou pedido de emissora pode alterar até a semana do jogo.</p>
</div>
<div class=”decision-card”>
<strong>Nem toda rodada tem TV aberta</strong>
<p>Depende do que a emissora responsável define — por isso o canal ainda está pendente aqui.</p>
</div>
<div class=”decision-card”>
<strong>Ingresso é com o mandante</strong>
<p>Neste jogo, o Flamengo — a venda segue os canais oficiais do clube.</p>
</div>
<div class=”decision-card”>
<strong>Minuto a minuto sempre funciona</strong>
<p>Alternativa gratuita quando não há como assistir ao vivo.</p>
</div>
</div>
</section>
<section class=”guide-section”>
<h2>Dúvidas que mudam o próximo passo</h2>
<div class=”faq”>
<details>
<summary>E se a transmissão ainda não tiver sido anunciada quando eu ler isso?</summary>
<p>Você já sabe data, horário e local — o suficiente pra se planejar. O canal costuma sair poucos dias antes.</p>
</details>
<details>
<summary>Esse horário pode mudar?</summary>
<p>Raramente, mas é possível até a semana do jogo. A fonte oficial abaixo é sempre a mais atualizada.</p>
</details>
</div>
</section>
<section class=”guide-section”>
<h2>Confirme nos canais oficiais</h2>
<div class=”source-list”>
<a href=”https://www.flamengo.com.br/futebol/proximos-jogos”>
<span class=”src-meta”><span class=”src-name”>Calendário oficial do Flamengo</span><span class=”src-note”>Data, horário e local — fonte primária desta página</span></span>
<span class=”src-status ok”>verificado</span>
</a>
<a href=”#”>
<span class=”src-meta”><span class=”src-name”>Tabela oficial do Brasileirão (CBF)</span><span class=”src-note”>Rodada e confrontos da competição inteira</span></span>
<span class=”src-status pending”>a verificar</span>
</a>
<a href=”#”>
<span class=”src-meta”><span class=”src-name”>Anúncio da emissora responsável</span><span class=”src-note”>Canal de TV/streaming — ainda não divulgado</span></span>
<span class=”src-status pending”>pendente</span>
</a>
</div>
</section>
<div class=”quick-paths”>
<h2>Continue pela sua necessidade</h2>
<div class=”choice-grid”>
<a class=”choice-link” href=”#”>Tabela completa do Brasileirão<span>Todos os jogos e classificação</span></a>
<a class=”choice-link” href=”#”>Escalação prevista do Flamengo<span>Time que deve começar jogando</span></a>
<a class=”choice-link” href=”#”>Onde assistir ao vivo<span>Canais e plataformas por rodada</span></a>
<a class=”choice-link” href=”#”>Últimos resultados<span>Como o Flamengo chega pra este jogo</span></a>
</div>
</div>
<footer class=”site-footer”>
<strong>Central do Torcedor</strong>
<p>Site editorial independente de conteúdo esportivo. Sem vínculo oficial com o Clube de Regatas do Flamengo, a CBF ou qualquer emissora.</p>
<nav aria-label=”Páginas institucionais”>
<a href=”#”>Privacidade</a>
<a href=”#”>Cookies</a>
<a href=”#”>Termos</a>
<a href=”#”>Sobre nós</a>
<a href=”#”>Contato</a>
<a href=”#”>Política editorial</a>
</nav>
<p class=”small”>Datas e horários vêm de fontes públicas oficiais e podem mudar sem aviso prévio — confirme sempre no canal oficial antes de se planejar.</p>
<p class=”small”>Atualizado: 26/08/2026 · Responsável editorial: equipe do site · CNPJ: [inserir CNPJ real]</p>
</footer>
</div>
<aside class=”devpanel” id=”devpanel”>
<button class=”devpanel-toggle” id=”devpanel-toggle” aria-expanded=”false” aria-controls=”devpanel-body”>
<span>🔧 <b>Painel técnico</b> (teste) — mecanismos da seção 08 rodando de verdade nesta página</span>
<span class=”devpanel-count” id=”devpanel-count”>0 eventos</span>
</button>
<div class=”devpanel-body” id=”devpanel-body”>
<p class=”devpanel-intro”>Simulação local, sem chamada a nenhuma rede de anúncios real: role a página pra ver os slots carregarem só ao entrar em tela, e observe os anúncios ganharem espaço automático de qualquer link/botão próximo — mesma lógica e mesmos nomes de variável CSS (<code>–vgb-gap-top</code>/<code>–vgb-gap-bottom</code>) do HTML de referência.</p>
<div class=”devpanel-log” id=”devpanel-log”></div>
</div>
</aside>
<script>
(function () {
“use strict”;
var logEl = document.getElementById(‘devpanel-log’);
var countEl = document.getElementById(‘devpanel-count’);
var eventCount = 0;
var t0 = performance.now();
function log(slot, evt, detail) {
eventCount++;
countEl.textContent = eventCount + (eventCount === 1 ? ‘ evento’ : ‘ eventos’);
var row = document.createElement(‘div’);
row.className = ‘devpanel-row’;
var elapsed = ((performance.now() – t0) / 1000).toFixed(1) + ‘s’;
row.innerHTML =
‘<span class=”t”>’ + elapsed + ‘</span>’ +
‘<span class=”ev”>’ + evt + ‘</span>’ +
‘<span class=”d”>’ + slot + (detail ? ‘ — ‘ + detail : ”) + ‘</span>’;
logEl.appendChild(row);
logEl.scrollTop = logEl.scrollHeight;
}
var toggle = document.getElementById(‘devpanel-toggle’);
var panel = document.getElementById(‘devpanel’);
toggle.addEventListener(‘click’, function () {
var open = panel.classList.toggle(‘open’);
toggle.setAttribute(‘aria-expanded’, open ? ‘true’ : ‘false’);
});
function initLazySlot(el) {
var slotName = el.dataset.slotName;
var storageKey = ‘mockup_viewability_’ + slotName;
var variant;
try {
variant = window.localStorage.getItem(storageKey);
if (variant !== ‘late_55’ && variant !== ‘prefetch_200’) {
variant = Math.random() < 0.5 ? 'late_55' : 'prefetch_200';
window.localStorage.setItem(storageKey, variant);
}
} catch (e) {
variant = Math.random() < 0.5 ? 'late_55' : 'prefetch_200';
}
var config = variant === 'prefetch_200'
? { rootMargin: '200px 0px', threshold: 0.01 }
: { rootMargin: '0px', threshold: 0.55 };
log(slotName, 'assignment', 'variante ' + variant);
var requested = false;
function requestSlot() {
if (requested) return;
requested = true;
var start = performance.now();
log(slotName, 'request', 'entrou na condição de carregamento');
var delay = 280 + Math.random() * 480;
window.setTimeout(function () {
var ms = Math.round(performance.now() - start);
var body = el.querySelector('.adslot-body');
body.textContent = 'Anúncio carregado (mock) — slot ' + slotName;
el.classList.add('is-loaded');
log(slotName, 'render', ms + 'ms');
observeViewability(el, slotName);
}, delay);
}
if (!('IntersectionObserver' in window)) { requestSlot(); return; }
var observer = new IntersectionObserver(function (entries) {
if (!entries.some(function (entry) { return entry.isIntersecting; })) return;
observer.disconnect();
requestSlot();
}, config);
observer.observe(el);
}
function observeViewability(el, slotName) {
if (!('IntersectionObserver' in window)) return;
var timer = 0, recorded = false;
var vo = new IntersectionObserver(function (entries) {
var entry = entries[0];
if (entry && entry.isIntersecting && entry.intersectionRatio >= 0.5) {
if (!timer) {
timer = window.setTimeout(function () {
recorded = true;
vo.disconnect();
log(slotName, 'viewable_1s', 'visível continuamente por 1s (padrão MRC)');
}, 1000);
}
} else if (timer) {
window.clearTimeout(timer);
timer = 0;
}
}, { threshold: [0, 0.5, 1] });
vo.observe(el);
}
document.querySelectorAll('.adslot[data-slot-name]').forEach(initLazySlot);
var MIN_GAP = 48;
var CONTROLS = '.route-card,.route-primary,.choice-link,.source-list a,button,a[href]:not(.devpanel-toggle)';
var SLOTS = '.adslot,[class*="code-block-"],.kaizen-ai-lazy-slot,[id^="kaizen-lazy-"]';
function enforce() {
var actions = Array.prototype.slice.call(document.querySelectorAll(CONTROLS)).filter(function (el) {
var r = el.getBoundingClientRect();
return r.width > 0 && r.height > 0;
});
document.querySelectorAll(SLOTS).forEach(function (slot) {
slot.classList.remove('vgb-ad-clearance-after-control', 'vgb-ad-clearance-before-control');
slot.style.removeProperty('--vgb-gap-top');
slot.style.removeProperty('--vgb-gap-bottom');
var sr = slot.getBoundingClientRect();
if (!sr.width || !sr.height) return;
var topGapNeeded = 0, bottomGapNeeded = 0;
actions.forEach(function (action) {
if (slot.contains(action) || action.contains(slot)) return;
var ar = action.getBoundingClientRect();
var horizontalOverlap = ar.right > sr.left && ar.left < sr.right;
if (!horizontalOverlap) return;
if (sr.top >= ar.bottom && sr.top - ar.bottom < MIN_GAP) topGapNeeded = Math.max(topGapNeeded, MIN_GAP - (sr.top - ar.bottom));
if (ar.top >= sr.bottom && ar.top - sr.bottom < MIN_GAP) bottomGapNeeded = Math.max(bottomGapNeeded, MIN_GAP - (ar.top - sr.bottom));
});
var already = slot.dataset.clearanceApplied === '1';
if (topGapNeeded > 0) {
slot.style.setProperty('--vgb-gap-top', Math.ceil(topGapNeeded) + 'px');
slot.classList.add('vgb-ad-clearance-after-control');
}
if (bottomGapNeeded > 0) {
slot.style.setProperty('--vgb-gap-bottom', Math.ceil(bottomGapNeeded) + 'px');
slot.classList.add('vgb-ad-clearance-before-control');
}
if ((topGapNeeded > 0 || bottomGapNeeded > 0) && !already) {
slot.dataset.clearanceApplied = '1';
log(slot.dataset.slotName || slot.id, 'clearance_guard',
'gap ajustado +' + Math.ceil(Math.max(topGapNeeded, bottomGapNeeded)) + 'px pra manter 48px de um controle clicável');
}
});
}
document.addEventListener('DOMContentLoaded', enforce);
window.addEventListener('load', enforce);
window.addEventListener('resize', enforce);
window.setTimeout(enforce, 300);
window.setTimeout(enforce, 900);
})();
</script>
