/* =========================================================================
   CABAL ACTION — camada visual v2 (22/10/2026)
   Integra as entregas do Codex: ID-01 rota B (ESCOLHIDA pelo Bruno em 22/10; versão de estudo até o ID-08), ID-02 abertura,
   ID-03 nações, ID-04 materiais. Carregada depois de action.css e sobrescreve o v1.
   Recursos sobre preto (ID-04) entram com mix-blend-mode: screen.
   ========================================================================= */

/* ---------- materiais ---------- */
.cabecalho { background: url("../img/arte/aco-tile.webp") repeat, linear-gradient(180deg, #13171c, #0d1014); background-blend-mode: soft-light, normal; }
.cabecalho::after { height: 12px; bottom: -6px; background: url("../img/arte/fresta.webp") center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: .8; pointer-events: none; }

/* ---------- marca: rota B — Asa de Força (escolhida 22/10; estudo, final vem no ID-08) ---------- */
.marca { display: inline-flex; align-items: center; flex: none; text-decoration: none; padding: 4px 0; }
.marca__img {
  display: block; height: 36px; aspect-ratio: 1065 / 200;
  background: linear-gradient(90deg, var(--forca-nucleo) 0, var(--forca) 20%, var(--prata) 30%, #FFFFFF 65%, var(--prata) 100%);
  -webkit-mask: url("../img/arte/marca-b-assinatura.png") center / contain no-repeat;
  mask: url("../img/arte/marca-b-assinatura.png") center / contain no-repeat;
  transition: filter .2s;
}
.marca:hover .marca__img { filter: drop-shadow(0 0 8px rgba(0,224,138,.45)); }
.marca--grande .marca__img { height: 56px; }
.brasao-marca { width: 132px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,224,138,.35)); }

/* ---------- abertura com a arte ID-02 ---------- */
.abertura { min-height: min(820px, calc(100svh - var(--cab-altura) - 30px)); background: var(--aco-950); }
.abertura__arte { position: absolute; inset: 0; z-index: -2; background: none; overflow: hidden; }
.abertura__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 38%; transform-origin: 70% 40%; animation: respira 26s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.045); } }
.abertura__veu { background:
  linear-gradient(90deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.72) 30%, rgba(11,13,16,.08) 56%, transparent 70%),
  linear-gradient(0deg, var(--aco-950) 0, rgba(11,13,16,.55) 16%, transparent 36%),
  linear-gradient(180deg, rgba(11,13,16,.5) 0, transparent 14%); }
.abertura__texto > * { animation: sobe .7s cubic-bezier(.2,.7,.2,1) both; }
.abertura__texto > :nth-child(2) { animation-delay: .06s; }
.abertura__texto > :nth-child(3) { animation-delay: .12s; }
.abertura__texto > :nth-child(4) { animation-delay: .18s; }
.abertura__texto > :nth-child(5) { animation-delay: .24s; }
@keyframes sobe { from { transform: translateY(14px); } to { transform: none; } }  /* sem opacidade: o texto nunca fica invisível se a animação parar */
.abertura h1 { text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.abertura h1 em { background: linear-gradient(90deg, var(--forca-nucleo), var(--forca) 60%, #3fc6b9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abertura__marca { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ao-vivo-faixa { background: rgba(11,13,16,.78); }

/* ---------- divisor O Corte (ID-04) ---------- */
.corte { height: 64px; }
.corte::before { display: none; }
.corte::after { width: min(1000px, 90%); height: 100%; transform: none; box-shadow: none;
  background: url("../img/arte/corte-divisor.webp") center / contain no-repeat; mix-blend-mode: screen; }

/* ---------- guerra com a arte ID-03 ---------- */
.guerra { gap: 0; }
.guerra__nacao { padding: 0; min-height: 400px; justify-content: flex-end; --fundo: var(--aco-950); }
.guerra__nacao::after { background: var(--aco-950) !important; }
.guerra__arte { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; z-index: 0; transition: transform .6s ease; }
.guerra__nacao--1 .guerra__arte { object-position: 0% 18%; }
.guerra__nacao--2 .guerra__arte { object-position: 100% 18%; }
.guerra__nacao:hover .guerra__arte { transform: scale(1.03); }
.guerra__nacao--1 .guerra__veu { background: linear-gradient(90deg, transparent 20%, rgba(11,13,16,.75) 55%, rgba(11,13,16,.95) 100%), linear-gradient(0deg, rgba(11,13,16,.9), transparent 55%); }
.guerra__nacao--2 .guerra__veu { background: linear-gradient(270deg, transparent 20%, rgba(11,13,16,.75) 55%, rgba(11,13,16,.95) 100%), linear-gradient(0deg, rgba(11,13,16,.9), transparent 55%); }
.guerra__veu { position: absolute; inset: 1px; z-index: 0; pointer-events: none; }
.guerra__info { position: relative; z-index: 1; padding: 28px; display: grid; gap: 14px; max-width: 62%; }
.guerra__nacao--1 .guerra__info { margin-left: auto; text-align: right; justify-items: end; }
.guerra__nacao--2 .guerra__info { margin-right: auto; text-align: left; justify-items: start; }
.guerra__nacao--1 .portador__meta { justify-content: flex-end; align-items: flex-end; }
.guerra__nacao--2 .portador__meta { justify-content: flex-start; align-items: flex-start; }
.guerra__nacao .portador, .guerra__nacao .guerra__titulo { max-width: none; }
.guerra__titulo { font-size: 2.3rem; text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.guerra__titulo.nacao-1 { color: #F06B5E; }
.guerra__titulo.nacao-2 { color: #6FA4FF; }
.guerra__centro { background: radial-gradient(60% 50% at 50% 50%, rgba(0,168,107,.18), transparent 70%); min-width: 240px; }
.guerra__centro::before { opacity: .45; }
.guerra__nucleo { width: 56px; height: 56px; mix-blend-mode: screen; animation: flutua 4s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-5px); } }
.contagem, .contagem-rotulo { background: transparent; }
.contagem { text-shadow: 0 0 22px rgba(0,224,138,.35); }

/* ---------- topo das páginas internas ---------- */
.topo-pagina { padding: 84px 0 52px; background: var(--aco-950); }
.topo-pagina::before { display: none; }
.topo-pagina__arte { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: .6; }
.topo-pagina__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--aco-950) 0, rgba(11,13,16,.85) 38%, rgba(11,13,16,.35) 75%, rgba(11,13,16,.6) 100%), linear-gradient(0deg, var(--aco-950) 0, transparent 50%); }
.topo-pagina__corte { position: absolute; z-index: -1; right: -60px; top: -120px; width: 520px; height: 520px; background: url("../img/arte/corte-grande.webp") center / contain no-repeat; mix-blend-mode: screen; opacity: .7; pointer-events: none; }

/* ---------- cartões e painéis: profundidade e resposta ---------- */
.passo, .cartao, .etapa, .char, .estatistica { transition: transform .2s ease, filter .2s ease; }
a.cartao:hover, .passo:hover { transform: translateY(-3px); filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
a.cartao:hover::before, .passo:hover::before { background: linear-gradient(135deg, var(--forca), var(--aco-600) 45%); }
.tabela-wrap::after, .painel::after { background-image: url("../img/arte/aco-tile.webp"); background-blend-mode: soft-light; }
.linha-1 td:first-child { position: relative; }

/* ---------- comunidade: Discord em destaque ---------- */
.canais { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.canal { --fundo: var(--aco-900); --borda: var(--aco-700); padding: 26px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--texto); min-height: 200px; }
.canal:hover { --borda: var(--forca); color: var(--texto); transform: translateY(-3px); }
.canal h3 { font-size: 1.6rem; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.canal p { color: var(--texto-2); }
.canal .link-seta { margin-top: auto; }
.canal--principal { --borda: rgba(0,224,138,.55); --fundo: radial-gradient(90% 120% at 100% 0%, rgba(0,168,107,.32), transparent 60%), var(--aco-900); }
.canal--principal h3 { font-size: 2.2rem; }
.canal__selo { align-self: flex-start; font: 700 .68rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--aco-950); background: var(--forca); padding: 5px 8px; }
.canal .cartao__icone { width: 46px; height: 46px; }
.canal .cartao__icone svg { width: 24px; height: 24px; }

/* ---------- rodapé ---------- */
.rodape { background: url("../img/arte/aco-tile.webp") repeat, linear-gradient(180deg, var(--aco-900), var(--aco-950)); background-blend-mode: soft-light, normal; position: relative; }
.rodape::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: url("../img/arte/fresta.webp") center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: .55; }
.redes { display: flex; gap: 8px; margin-top: 16px; }
.redes a { --c: 7px; --fundo: var(--aco-900); --borda: var(--aco-600); width: 44px; height: 44px; display: grid; place-items: center; color: var(--texto-2); }
.redes a:hover { --borda: var(--forca); color: var(--forca-nucleo); }
.redes svg { width: 20px; height: 20px; }

/* ---------- página de comparação das marcas ---------- */
.rotas { display: grid; gap: 20px; }
.rota { --fundo: var(--aco-900); --borda: var(--aco-700); padding: 24px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.rota__acabada { width: 220px; height: 220px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(0,224,138,.25)); }
.rota h2 { font-size: 1.8rem; text-transform: uppercase; }
.rota__cab { display: flex; align-items: center; gap: 20px; padding: 14px 18px; background: #12161B; border: 1px solid var(--aco-700); margin: 12px 0; }
.rota__cab .marca__img { height: 40px; }
.rota__tamanhos { display: flex; align-items: flex-end; gap: 18px; color: var(--texto-3); font-size: .78rem; }
.rota__tamanhos span { display: grid; justify-items: center; gap: 6px; }
.simbolo-mask { display: block; background: var(--texto); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.m-a { --m: url("../img/arte/marca-a-simbolo.png"); }
.m-b { --m: url("../img/arte/marca-b-simbolo.png"); }
.m-c { --m: url("../img/arte/marca-c-simbolo.png"); }
.rota__cab .ass-b { -webkit-mask-image: url("../img/arte/marca-b-assinatura.png"); mask-image: url("../img/arte/marca-b-assinatura.png"); }
.rota__cab .ass-c { -webkit-mask-image: url("../img/arte/marca-c-assinatura.png"); mask-image: url("../img/arte/marca-c-assinatura.png"); }
.rota__cab .ass-a { aspect-ratio: 761 / 200; -webkit-mask-image: url("../img/arte/marca-a-assinatura.png"); mask-image: url("../img/arte/marca-a-assinatura.png"); }
.rota__cab .ass-b { aspect-ratio: 1065 / 200; background: linear-gradient(90deg, var(--forca) 0, var(--forca) 24%, var(--prata) 30%, #fff 65%, var(--prata)); }
.rota__cab .ass-c { aspect-ratio: 695 / 200; background: linear-gradient(90deg, var(--forca) 0, var(--forca) 20%, var(--prata) 26%, #fff 62%, var(--prata)); }
.s16 { width: 16px; height: 16px; } .s32 { width: 32px; height: 32px; } .s48 { width: 48px; height: 48px; }
.rota p { color: var(--texto-2); }

@media (max-width: 900px) {
  .guerra__nacao { min-height: 340px; }
  .guerra__info { max-width: 78%; }
  .guerra__nacao--1 .guerra__info, .guerra__nacao--2 .guerra__info { margin: 0; text-align: left; justify-items: start; }
  .guerra__nacao--1 .portador__meta, .guerra__nacao--2 .portador__meta { justify-content: flex-start; align-items: flex-start; }
  .guerra__nacao--1 .guerra__arte { object-position: 0% 20%; }
  .guerra__nacao--1 .guerra__veu, .guerra__nacao--2 .guerra__veu { background: linear-gradient(0deg, rgba(11,13,16,.96) 0, rgba(11,13,16,.6) 45%, transparent 75%); }
  .guerra__centro { background: none; }
  .canais { grid-template-columns: 1fr; }
  .rota { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .marca__img { height: 32px; }
  /* celular: arte ID-02 (2:3) presa no topo; o texto começa na área escura de baixo da própria arte */
  .abertura__arte, .abertura__veu { bottom: auto; height: 150vw; }
  .abertura__arte img { object-position: 50% 0; }
  .abertura__veu { background: linear-gradient(0deg, var(--aco-950) 0, rgba(11,13,16,.9) 22%, rgba(11,13,16,.15) 48%, transparent 60%), linear-gradient(180deg, rgba(11,13,16,.55) 0, transparent 12%); }
  .abertura__conteudo { padding-top: 96vw; }
  .credito-arte { top: 10px; right: 12px; }
  /* nações: arte em faixa no topo do cartão, texto embaixo sobre o aço */
  .guerra__nacao { min-height: 0; justify-content: flex-start; }
  .guerra__nacao .guerra__arte, .guerra__nacao .guerra__veu { inset: 1px 1px auto 1px; height: 210px; }
  .guerra__nacao--1 .guerra__veu, .guerra__nacao--2 .guerra__veu { background: linear-gradient(0deg, var(--aco-950) 0, transparent 45%); }
  .guerra__info { max-width: none; padding: 172px 20px 20px; }
  .brasao-marca { width: 104px; height: 48px; }

  .guerra__nacao--2 .guerra__arte { object-position: 85% 20%; }
  .guerra__nacao--1 .guerra__arte { object-position: 12% 20%; }
  .topo-pagina { padding: 56px 0 36px; }
  .topo-pagina__corte { width: 300px; height: 300px; top: -80px; right: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .abertura__arte img, .guerra__nucleo { animation: none; }
}
.rota--escolhida { --borda: var(--forca); --fundo: radial-gradient(70% 120% at 0% 50%, rgba(0,168,107,.25), transparent 60%), var(--aco-900); }
.rota--escolhida .canal__selo { display: inline-block; margin-bottom: 8px; }
.chip--tg.ao-vivo .chip__prox { display: none; }
@media (max-width: 420px) {
  .marca__img { height: 26px; }
  .chip__prox { display: none; }
  .cabecalho__inner { gap: 12px; }
}

/* ===================== rodada 2 do Codex: ID-05, ID-07, ID-08 ===================== */
.marca__svg { display: block; height: 36px; width: auto; }
.marca:hover .marca__svg { filter: drop-shadow(0 0 8px rgba(0,224,138,.4)); }
.marca-empilhada { width: 180px; height: auto; }
.brasao-marca { width: 120px; height: 75px; }
.emblema { width: 16px; height: 16px; flex: none; }
.nacao-chip--emblema::before { display: none; }
.emblema--grande { width: 34px; height: 34px; margin-right: 10px; vertical-align: -4px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.topo-pagina--fundo .topo-pagina__arte { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 1; }
.topo-pagina--fundo .topo-pagina__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.topo-pagina--fundo { padding: 104px 0 64px; text-align: center; }
.topo-pagina--fundo p { margin-left: auto; margin-right: auto; }
.topo-pagina--fundo .topo-pagina__veu { background: radial-gradient(60% 70% at 50% 40%, rgba(11,13,16,.55), transparent 70%), linear-gradient(0deg, var(--aco-950) 0, transparent 45%); }
.rota-final { --fundo: radial-gradient(60% 90% at 50% 0%, rgba(0,168,107,.22), transparent 60%), var(--aco-900); --borda: var(--forca); padding: 28px; display: grid; gap: 16px; }
.rota-final h2 { font-size: 2rem; text-transform: uppercase; }
.rota-final__vitrine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 24px; padding: 24px; background: var(--aco-950); border: 1px solid var(--aco-700); }
.rota-final__vitrine img { max-width: 100%; height: auto; }
.rota-final__guia { width: 100%; height: auto; border: 1px solid var(--aco-700); }
.rota__tamanhos img { display: block; }
@media (max-width: 420px) { .marca__svg { height: 28px; } }
.rota-final > .canal__selo { justify-self: start; }