/* Arena 2026: tokens e componentes compartilhados (site sempre escuro).
   Raio: cartões 14px, botões e chips em pílula. Cor de destaque muda com o modo (geral, esquerda, direita). */
:root {
  --bg: #0a0c0f;
  --sup: #111419;
  --sup2: #171b21;
  --linha: rgb(255 255 255 / .08);
  --linha2: rgb(255 255 255 / .16);
  --txt: #eceef1;
  --txt2: #9aa2ad;
  --txt3: #6b7480;
  --lula: #e5484d;
  --lula-esc: #3a1517;
  --flavio: #4c8dff;
  --flavio-esc: #13243f;
  --dest: #eceef1;            /* destaque do modo */
  --dest-txt: #0a0c0f;
  --r: 14px;
  --larg: 1320px;
  --disp: 'Archivo', system-ui, sans-serif;
}
/* Modos Esquerda e Direita: o site inteiro muda de clima. A cor fica só com o candidato do lado escolhido;
   o outro aparece em cinza (os números continuam os mesmos). */
html[data-modo="esquerda"] {
  --bg: #0f0909; --sup: #180e0f; --sup2: #231416; --linha: rgb(255 150 150 / .09); --linha2: rgb(255 150 150 / .18);
  --flavio: #868c95; --flavio-esc: #1c1e22; --lula-esc: #4d1519;
  --dest: var(--lula); --dest-txt: #fff;
}
html[data-modo="direita"] {
  --bg: #070b13; --sup: #0d1422; --sup2: #131d31; --linha: rgb(150 180 255 / .1); --linha2: rgb(150 180 255 / .2);
  --lula: #868c95; --lula-esc: #1c1e22; --flavio-esc: #112c60;
  --dest: var(--flavio); --dest-txt: #06101f;
}
html[data-modo="esquerda"] body { background: radial-gradient(1100px 520px at 16% -10%, rgb(229 72 77 / .22), transparent 62%) no-repeat, var(--bg); }
html[data-modo="direita"] body { background: radial-gradient(1100px 520px at 84% -10%, rgb(76 141 255 / .22), transparent 62%) no-repeat, var(--bg); }
html[data-modo="esquerda"] #manchete, html[data-modo="direita"] #manchete { color: var(--dest); }

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; }
body { font-family: var(--disp); color: var(--txt); background: var(--bg); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100dvh; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--dest); outline-offset: 3px; border-radius: 6px; }
.caixa { width: min(100% - 32px, var(--larg)); margin-inline: auto; }

/* tipografia: Archivo com largura variável (condensada nos títulos, estilo placar) */
.t-xl { font-stretch: 68%; font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; }
.t-l { font-stretch: 72%; font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.02; text-transform: uppercase; }
.t-m { font-stretch: 78%; font-weight: 700; font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; }
.rot { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt2); }
.sub { color: var(--txt2); max-width: 62ch; }
.num { font-stretch: 70%; font-weight: 800; letter-spacing: -.02em; }

/* navegação */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.nav .caixa { display: flex; align-items: center; gap: 28px; height: 64px; }
.marca { font-stretch: 64%; font-weight: 900; font-size: 1.45rem; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.marca b { color: var(--dest); font-weight: 900; transition: color .3s; }
.nav nav { display: flex; gap: 22px; font-size: .9rem; font-weight: 600; color: var(--txt2); }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--txt); }
.nav .esp { flex: 1; }
@media (max-width: 860px) { .nav nav { display: none; } .nav .caixa { gap: 12px; } }

/* seletor de modo */
.modo { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sup2); border: 1px solid var(--linha); }
.modo button { padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--txt2); white-space: nowrap; transition: background .25s, color .25s; }
.modo button[aria-pressed="true"] { background: var(--dest); color: var(--dest-txt); }
.modo button:active { transform: scale(.97); }
@media (max-width: 420px) { .modo button { padding: 7px 10px; font-size: .74rem; } }
@media (max-width: 340px) { .marca { font-size: 1.15rem; } .modo button { padding: 6px 7px; font-size: .68rem; } }

/* botões */
.bt { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem; white-space: nowrap;
  background: var(--dest); color: var(--dest-txt); transition: transform .15s, background .3s, color .3s; }
.bt:hover { transform: translateY(-1px); }
.bt:active { transform: scale(.98); }
.bt.fant { background: transparent; color: var(--txt); border: 1px solid var(--linha2); }
.bt i { font-size: 1.15em; }

/* cartão e chip */
.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--sup2); border: 1px solid var(--linha); color: var(--txt2); }
.chip.vivo { color: var(--txt); }
.chip.vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; animation: pulso 1.4s infinite; }
@keyframes pulso { 50% { opacity: .25; } }

/* cores dos lados */
.cl { color: var(--lula); } .cf { color: var(--flavio); }
.bl { background: var(--lula); } .bf { background: var(--flavio); }

/* espaço de anúncio */
.anuncio { position: relative; border-radius: var(--r); overflow: hidden; background: var(--sup); border: 1px solid var(--linha); min-height: 96px; }
.anuncio::after { content: 'Publicidade'; position: absolute; bottom: 6px; right: 8px; padding: 2px 6px; border-radius: 4px; background: rgb(0 0 0 / .5); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c4c9d0; pointer-events: none; }
.anuncio a { display: flex; align-items: center; gap: 20px; padding: 20px 24px; min-height: inherit; height: 100%; }
.anuncio a.img { padding: 0; }
.anuncio a.img img { width: 100%; height: 100%; object-fit: cover; }
.anuncio .an-marca { flex: none; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; background: var(--an-cor, var(--sup2)); color: #fff; }
.anuncio .an-tit { font-stretch: 74%; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; line-height: 1.05; }
.anuncio .an-txt { color: var(--txt2); font-size: .9rem; }
.anuncio .an-cta { margin-left: auto; flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linha2); font-size: .82rem; font-weight: 700; }
.anuncio a.img picture { display: block; width: 100%; height: 100%; }
.anuncio .an-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anuncio .an-tit, .anuncio .an-txt { overflow-wrap: anywhere; }
.anuncio .an-insta { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .78rem; font-weight: 700; color: var(--txt2); }
/* anúncio montado com a logo do cliente (anuncie.html): faixa na cor escolhida + logo num quadro claro */
.anuncio.an-com-logo a { background: linear-gradient(90deg, color-mix(in srgb, var(--an-cor, #2a2f38) 42%, transparent), transparent 78%); }
.anuncio .an-logo { width: 76px; height: 76px; padding: 7px; background: #fff; }
.anuncio .an-logo img { width: 100%; height: 100%; object-fit: contain; }
.anuncio.troca a { animation: entra .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.anuncio[data-anuncio="topo"] { min-height: 120px; }
.anuncio[data-anuncio="rodape"] { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 40; min-height: 64px; display: none; box-shadow: 0 10px 40px rgb(0 0 0 / .6); }
.anuncio[data-anuncio="rodape"] a { padding: 10px 14px; gap: 12px; }
.anuncio[data-anuncio="rodape"] .an-marca { width: 40px; height: 40px; font-size: 1.2rem; }
.anuncio[data-anuncio="rodape"] .an-tit { font-size: 1rem; }
.anuncio[data-anuncio="rodape"] .an-txt, .anuncio[data-anuncio="rodape"] .an-insta { display: none; }
.anuncio[data-anuncio="rodape"] .an-logo { width: 44px; height: 44px; padding: 4px; }
@media (max-width: 700px) {
  .anuncio[data-anuncio="rodape"] { display: block; }
  body.tem-rodape { padding-bottom: 84px; }
  .anuncio a { padding: 16px; gap: 14px; }
  .anuncio .an-cta { display: none; }
  .anuncio .an-logo { width: 60px; height: 60px; }
}

/* rodapé */
.pe { border-top: 1px solid var(--linha); margin-top: 96px; padding: 36px 0 48px; color: var(--txt2); font-size: .88rem; }
.pe .caixa { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.pe a { color: var(--txt); font-weight: 600; }
@media (max-width: 700px) { .pe .caixa { grid-template-columns: 1fr; } }

/* entrada suave das seções (só quando o usuário aceita movimento) */
@media (prefers-reduced-motion: no-preference) {
  .surge { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
  .surge.visto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* chamada da luta: pílula no menu (computador) e botão flutuante (celular) */
.nav-luta { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 6px; border-radius: 999px; font-weight: 800; font-size: .86rem; text-transform: uppercase; font-stretch: 80%;
  background: linear-gradient(90deg, var(--lula), var(--flavio)); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .12) inset; transition: transform .15s; }
.nav-luta img { width: 30px; height: 30px; object-fit: contain; }
.nav-luta span { padding: 0 6px; }
.nav-corrida { margin-left: 8px; padding: 0 10px 0 12px; }
.nav-corrida i { font-size: 1.15rem; }
.nav-luta:hover { transform: translateY(-1px) scale(1.03); }
.fab-luta { display: none; }
@media (max-width: 860px) {
  .nav-luta { display: none; }
  .fab-luta { position: fixed; right: 14px; bottom: 90px; z-index: 45; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--lula), var(--flavio)); box-shadow: 0 8px 24px rgb(0 0 0 / .5); }
  .fab-luta img { width: 30px; height: 30px; object-fit: contain; margin: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) { .fab-luta { animation: chama 2.4s ease-in-out infinite; } }
@keyframes chama { 50% { transform: scale(1.07); } }