/* ================================================================
   LIBERDADE PRIVATE CLUB — FASE 4M: PROFUNDIDADE EM TRÊS PLANOS
   Reescreve a camada da Fase 4L, reprovada pelo cliente.

   POR QUE A 4L FALHOU (medido, não achismo): amostrei o fundo
   renderizado da seção Capitães, excluindo texto e cards, e a
   luminância variava só entre 7,8 e 20,3 numa escala de 0-255 —
   amplitude de 12,5 níveis, 4,9% da escala. Na Bitcoin era pior:
   8,4 níveis (3,3%). Está abaixo do limiar de percepção casual.

   Três erros concretos:
   1. Centros de luz posicionados FORA da seção (`at 6% -12%`,
      `at 50% 118%`). O ponto claro caía fora do bloco e só a cauda
      fraca entrava — holofote apontado pra fora da sala.
   2. `transparent 58%..64%` extinguia o gradiente antes de virar massa.
   3. Passo tonal ínfimo: #0a1128 → #16224a são vizinhos.

   E um erro conceitual acima desses: degradê radial suave NÃO lê como
   plano. Espalhado por 1000px, o olho interpreta superfície uniforme.
   Plano se lê por ARESTA — transição curta, ângulo definido, recorte.

   O QUE ESTA CAMADA FAZ — três planos legíveis por seção:
   · FUNDO: navy quase preto nas bordas, empurrando os cantos pra trás;
   · MEIO: massa angular grande com transição CURTA (3-4%), cortada
     pelas bordas da seção, com salto tonal de 30-50 níveis;
   · PRIMEIRO PLANO: poça de luz curta atrás do elemento focal, pro
     conteúdo emergir do plano do meio.
   Em Capitães e Resultados o plano do meio é FOTOGRAFIA REAL do
   projeto (atletas reais, campo real), dessaturada, escurecida e sob
   máscara angular forte — massa e atmosfera, nunca protagonista.

   PROIBIDO AQUI: padrão repetitivo, grade, blueprint, fumaça,
   textura artificial, glow espalhado, clipart. Nenhum
   `repeating-linear-gradient` neste arquivo.

   META VERIFICÁVEL: amplitude de luminância do fundo ≥ 35 níveis
   (~14% da escala) nas seções retrabalhadas.
   ================================================================ */

.capitaes,.midia,.evento-teaser,.final,.estadio,.torneio,
#maquina.maquina,.historia,.numeros,.btcsec{position:relative;}

.capitaes > .wrap,.midia > .wrap,.evento-teaser > .wrap,.final > .wrap,
.estadio > .wrap,.torneio > .wrap,#maquina.maquina > .wrap,
.historia > .wrap,.numeros > .wrap,.btcsec > .wrap{position:relative;z-index:2;}

/* ================================================================
   1) CAPITÃES — FASE 4N: refeito. A 4M (foto a 18%, gradiente
   angular abstrato) foi reprovada — "continua parecendo chapado",
   critério agora é percepção, não luminância medida.

   REMOVIDO desta seção: o gradiente `linear-gradient(104deg,...)`
   de 6 paradas e a foto-fantasma a 18% de opacidade (imperceptível,
   era decoração CSS disfarçada de foto).

   NOVO SISTEMA — três planos reais, não três camadas de gradiente:
   1. FOTO (`::before`) — peneira-tresrios-05, recorte 0-27% da altura
      original (só muro de concreto + alambrado enferrujado; a cabeça
      do atleta começa a ~30% — testei 34/40/55% antes de achar o
      corte 100% limpo). Cobre o TOPO inteiro da seção, entra a 46%
      de opacidade — presente e reconhecível como fotografia real,
      mas sem rosto, sem protagonismo, é arquitetura de fundo.
   2. PLINTO (`.capitaes-plinto`, elemento HTML real — ver index.html)
      — bloco navy SÓLIDO com aresta reta, é onde os 4 cards
      literalmente se apoiam (margin negativo dos cards entra nele).
      Sem ele, os cards continuam "flutuando"; com ele, têm chão.
   3. FAIXA DE LUZ (`::after`) — clareia a faixa exata onde a linha
      de cards fica, pra eles se destacarem do plinto atrás.
   ================================================================ */
/* Fase 5: base saiu de #04060c (preto quase puro, zero matiz — "sem vida")
   pra navy-0 (mesma família de cor do resto do site) + um brilho quente bem
   contido no canto oposto à foto, pra seção ganhar alguma energia sem virar
   glow artificial (a foto/plinto abaixo continuam sendo o plano principal,
   intocados). */
.capitaes{
  background:
    radial-gradient(ellipse 820px 480px at 88% 4%, rgba(255,122,26,.10), transparent 60%),
    var(--navy-0) !important;
}
.capitaes::before{
  content:"";position:absolute;top:0;left:0;right:0;height:64%;z-index:0;pointer-events:none;
  background-image:image-set(
    url("../assets/img/bg-capitaes-1920.avif") type("image/avif"),
    url("../assets/img/bg-capitaes-1920.webp") type("image/webp"));
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  opacity:.46;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}
.capitaes::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,12,.35) 0%, rgba(4,6,12,.88) 46%, #04060c 66%, #04060c 100%);
}
/* plinto: bloco sólido com ARESTA (não gradiente) — a linha reta é
   o que lê como "chão real", diferente de qualquer degradê suave.
   Padding negativo-compensado: `.cap-grid` já tem margin-top próprio
   (clamp 72-110px, style.css) — em vez de duplicar espaço, o plinto
   absorve essa margem com padding-top equivalente e some ela do
   grid, senão sobraria uma faixa sem plinto acima dos cards. */
.capitaes-plinto{
  position:relative;z-index:1;margin-top:clamp(56px,7vw,88px);
  padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,88px);
  background:linear-gradient(180deg,#0a1130 0%,#070c1c 100%);
  border-top:1px solid rgba(255,255,255,.09);
  box-shadow:0 -40px 60px -30px rgba(0,0,0,.6);
}
.capitaes-plinto .cap-grid{margin-top:0 !important;}
/* faixa de luz na altura real dos cards — cai sobre o plinto, não
   sobre a foto, então nunca compete com o título/lead acima. */
.capitaes-plinto::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 1400px 340px at 50% 42%, rgba(64,92,176,.4) 0%, transparent 70%),
    radial-gradient(ellipse 620px 220px at 82% 30%, rgba(255,122,26,.10) 0%, transparent 68%);
}
.capitaes .wrap{position:relative;z-index:2;}

/* ================================================================
   2) RESULTADOS REAIS — mesmo sistema, luz espelhada (vem da direita)
   e foto entrando pelo lado oposto ao de Capitães, pra não repetir a
   mesma composição duas vezes na mesma rolagem.
   ================================================================ */
/* Fase 5: gradiente angular de 6 paradas removido daqui — era exatamente
   o sistema que o cliente já tinha reprovado uma vez ("textura artificial",
   "glow exagerado", ver header do arquivo) e que só não aparecia porque
   fase-4o/fase-4q empilhavam um !important flat por cima. Tirando os dois
   flatteners (Fase 5), este !important original voltava a vencer — por
   isso é removido aqui, na origem, e não só re-coberto. Fundo novo em
   css/fase-5-direcao-executiva-final.css. Os ::before/::after abaixo (foto
   espelhada + poça de luz) já eram sobrepostos pelo ::after de fase-4o
   (mantido) — inertes, deixados como estão. */
.numeros::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:image-set(
    url("../assets/img/bg-atmosfera-1600.avif") type("image/avif"),
    url("../assets/img/bg-atmosfera-1600.webp") type("image/webp"));
  background-size:cover;background-position:center 40%;background-repeat:no-repeat;
  transform:scaleX(-1);
  opacity:.15;
  -webkit-mask-image:linear-gradient(118deg,transparent 12%,#000 38%,#000 62%,transparent 86%);
  mask-image:linear-gradient(118deg,transparent 12%,#000 38%,#000 62%,transparent 86%);
}
.numeros::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 1000px 420px at 50% 70%, rgba(56,84,168,.45) 0%, transparent 66%),
    radial-gradient(ellipse 700px 380px at 88% 8%, rgba(255,122,26,.14) 0%, transparent 62%),
    linear-gradient(180deg, rgba(4,6,12,.8) 0%, transparent 14%),
    linear-gradient(0deg,   rgba(4,6,12,.84) 0%, transparent 16%);
}

/* ================================================================
   3) BITCOIN STANDARD — sem foto (não foi autorizada aqui). Planos
   angulares + poça quente contida atrás da órbita, na cor da própria
   seção (--btc), que é onde o calor faz sentido.
   ================================================================ */
/* Fase 5: idem .numeros acima — fundo novo em fase-5-direcao-executiva-
   final.css. ::after abaixo já era inerte (fase-4o vence por último). */
.btcsec::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle 420px at 74% 46%, rgba(247,147,26,.16) 0%, transparent 64%),
    radial-gradient(ellipse 900px 520px at 76% 44%, rgba(48,72,150,.5) 0%, transparent 62%),
    linear-gradient(180deg, rgba(4,6,12,.8) 0%, transparent 14%),
    linear-gradient(0deg,   rgba(4,6,12,.84) 0%, transparent 16%);
}
@media (max-width:900px){
  .btcsec::after{
    background:
      radial-gradient(ellipse 620px 460px at 50% 30%, rgba(48,72,150,.45) 0%, transparent 64%),
      linear-gradient(180deg, rgba(4,6,12,.8) 0%, transparent 12%),
      linear-gradient(0deg,   rgba(4,6,12,.84) 0%, transparent 14%);
  }
}

/* ================================================================
   4) DEMAIS ESCURAS — mesmo sistema de três planos, com direção de
   luz PRÓPRIA em cada uma, pra criar ritmo ao rolar a página.
   ================================================================ */
/* Fase 5: .midia/.estadio/.evento-teaser/.final tinham o mesmo fundo
   angular de 6 paradas aqui — removido, cada um ganha tratamento próprio
   em fase-5-direcao-executiva-final.css. #maquina.maquina abaixo é o
   único aprovado sem ressalva desde a Fase 4Q ("deve permanecer
   exatamente como está") — mantido, só ganhou 1 brilho quente extra. */
/* Fase 5: gradiente 6-paradas aprovado continua — só ganha 1 brilho quente
   contido atrás da órbita central (.maq-orbit fica perto de 72%/50% da
   seção), pra tirar a leitura "só azul" sem tocar na estrutura do diagrama. */
#maquina.maquina{
  background:
    radial-gradient(circle 460px at 72% 50%, rgba(255,122,26,.09), transparent 62%),
    linear-gradient(106deg,
      #05080f 0%, #090f28 17%,
      #121d4a 20%, #121d4a 50%,
      #182752 54%, #1e2f66 100%) !important;
}
/* Fase 5: .torneio idem — fundo novo em fase-5-direcao-executiva-final.css. */
/* poça de luz atrás do elemento focal de cada uma */
.midia::after,.estadio::after,.evento-teaser::after,.final::after,
#maquina.maquina::after,.torneio::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,12,.8) 0%, transparent 14%),
    linear-gradient(0deg,   rgba(4,6,12,.84) 0%, transparent 16%);
}
#maquina.maquina::after{
  background:
    radial-gradient(circle 400px at 72% 52%, rgba(255,122,26,.12) 0%, transparent 62%),
    radial-gradient(ellipse 900px 620px at 74% 48%, rgba(50,76,158,.45) 0%, transparent 62%),
    linear-gradient(180deg, rgba(4,6,12,.8) 0%, transparent 14%),
    linear-gradient(0deg,   rgba(4,6,12,.84) 0%, transparent 16%);
}
.torneio::after{
  background:
    radial-gradient(ellipse 760px 700px at 78% 46%, rgba(56,84,168,.5) 0%, transparent 62%),
    linear-gradient(180deg, rgba(4,6,12,.8) 0%, transparent 14%),
    linear-gradient(0deg,   rgba(4,6,12,.84) 0%, transparent 16%);
}
.historia::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,12,.78) 0%, transparent 15%),
    linear-gradient(0deg,   rgba(4,6,12,.82) 0%, transparent 16%);
}
/* halo curto que assenta o painel do Torneio no ambiente (mantido da 4L) */
.torneio-visual{position:relative;}
.torneio-visual::after{
  content:"";position:absolute;inset:-26px;z-index:-1;pointer-events:none;
  border-radius:32px;
  background:radial-gradient(ellipse at 50% 50%, rgba(46,70,140,.6) 0%, transparent 70%);
}

/* ================================================================
   5) SEÇÕES CLARAS — mesma lógica de planos, invertida. Branco quente
   num canto, cinza-gelo azulado bem mais fundo no oposto, com aresta.
   Salto tonal real (~50 níveis), pra a superfície BRANCA dos cards se
   destacar do fundo da seção — é essa diferença que dá acabamento
   editorial em vez de "folha em branco".
   ================================================================ */
.jornada-sec,.portas,.diretoria{position:relative;}
.jornada-sec > .wrap,.portas > .wrap,.diretoria > .wrap{position:relative;z-index:2;}

/* Mesmo aprendizado das escuras: eixo HORIZONTAL, que está sempre
   inteiro em tela (o vertical some na fatia visível e volta a parecer
   chapado). Aresta curta entre os planos e salto tonal real (~55
   níveis), pra a superfície BRANCA dos cards se destacar do fundo. */
/* Fase 5: as 3 claras tinham o mesmo esquema de 6 paradas com aresta dura
   aqui — era o "gradiente lavado" que a Fase 4Q tentou corrigir (achou a
   causa raiz certa, o z-index acima, mas também flatou por cima como
   reforço). Removido, plano novo e mais suave (sem aresta) em
   fase-5-direcao-executiva-final.css. O halo de luz atrás dos cards
   (::after) abaixo continua — combina com o plano novo, não precisa mudar. */
/* poça de luz atrás dos cards + assentamento de borda */
.jornada-sec::after,.portas::after,.diretoria::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 1150px 480px at 50% 58%, rgba(255,255,255,.72) 0%, transparent 68%),
    linear-gradient(180deg, rgba(13,21,48,.09) 0%, transparent 10%),
    linear-gradient(0deg,   rgba(13,21,48,.11) 0%, transparent 11%);
}

/* ================================================================
   3) GEANDERSON (atletas.html) — a seção "O Geanderson era
   invisível. Hoje é capitão." mostrava uma foto genérica de peneira,
   e o bloco de 3 fotos ao lado usava 3 imagens GERADAS POR IA
   (jogadores-abraco / entrada-triunfal / foto-acao-1: camisas com o
   mesmo nome repetido em jogadores diferentes, rostos e torcida
   sintéticos). Trocado pela foto REAL do Geanderson que já existia
   no projeto (assets/img/capitao-01-geanderson.png, a mesma dos
   Capitães na home), montada num painel institucional em vez de
   colada solta — recorte com fundo transparente pede composição.
   ================================================================ */
/* A própria seção usava `foto-acao-3.jpg` como fundo (fase3.css:302) —
   mais uma imagem gerada por IA. Na home essas fotos já eram anuladas
   por fase-2-premium.css, mas atletas.html não carrega aquele arquivo,
   então elas continuavam vivas só aqui. Substituído por ambiente navy
   com a mesma geometria do resto do site: o painel do Geanderson passa
   a ser o único ponto focal, sem foto competindo com foto. */
.atl-prova{
  background:
    radial-gradient(ellipse 900px 560px at 84% -6%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(ellipse 760px 520px at 6% 104%,rgba(52,211,153,.07),transparent 64%),
    linear-gradient(180deg,var(--navy-1) 0%,var(--navy-0) 100%) !important;
  position:relative;
}
.atl-prova > .wrap{position:relative;z-index:1;}
.atl-prova::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,16,.5) 0%, transparent 15%),
    linear-gradient(0deg,   rgba(4,7,16,.5) 0%, transparent 15%);
}

.geand-figure{border:0;background:none;}
.geand-media{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3.4vw,44px) clamp(24px,3.4vw,48px) 0;
  border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(ellipse 620px 420px at 88% 108%,rgba(52,211,153,.16),transparent 62%),
    radial-gradient(ellipse 560px 380px at 6% 0%,rgba(255,122,26,.1),transparent 60%),
    linear-gradient(158deg,var(--navy-3) 0%,var(--navy-1) 58%,var(--navy-0) 100%);
  border:1px solid rgba(255,255,255,.1);
}
.geand-media::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 520px 420px at 88% 8%, rgba(52,211,153,.1), transparent 62%),
    radial-gradient(ellipse 480px 380px at 4% 96%, rgba(255,122,26,.07), transparent 60%);
}
.geand-info{position:relative;z-index:1;align-self:center;padding-bottom:clamp(24px,3.4vw,44px);}
.geand-tag{
  display:inline-block;font-family:var(--f-body);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--el-natureza);margin-bottom:12px;
}
.geand-info b{
  display:block;font-family:var(--f-display);font-weight:800;font-stretch:104%;
  font-size:clamp(24px,3.2vw,40px);line-height:1.05;letter-spacing:-.02em;color:#fff;
}
.geand-role{
  display:block;margin-top:10px;font-family:var(--f-body);font-size:13.5px;
  letter-spacing:.02em;color:var(--mute);
}
.geand-portrait{
  position:relative;z-index:1;display:block;
  width:clamp(180px,24vw,272px);height:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
@media (max-width:640px){
  .geand-media{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:0;}
  .geand-info{padding-bottom:8px;}
  .geand-portrait{width:min(72vw,260px);}
}