/* ============================================================
   ABERTO DO MADEIRA 2027 — SISTEMA V3
   ------------------------------------------------------------
   Referências: Padel Social Club (Stanislav K.), Elite Court
   (Attractive UI), Padel Point (Frame Focus) e o Padel Club de
   Dubai enviado pelo cliente.

   O que as quatro têm em comum, nas palavras do próprio autor de
   uma delas: "Dark Mode UI with high-contrast neon accents,
   dynamic grids, strong typography, layered components."

   A tradução para esta marca NÃO troca a paleta aprovada no
   board. Troca a PROPORÇÃO:
     • o fundo desce de #072814 para um verde-quase-preto;
     • o #FF6A00 vira o ÚNICO ponto saturado da tela;
     • o verde da marca passa a ser profundidade, não fundo.

   Laranja saturado sobre quase-preto É um acento neon. A marca
   já tinha o que a referência usa — faltava o contraste.

   ------------------------------------------------------------
   POR QUE ISSO FUNCIONA (o pedido de neuromarketing)

   1. POP-OUT (Treisman). Num campo escuro e dessaturado, uma
      única cor saturada é a só coisa que "salta" sem busca
      serial. O olho acha o CTA antes de ler a página.
   2. VON RESTORFF. O item isolado é o lembrado. Um acento só,
      usado sempre para a mesma função, vira memória de marca.
   3. NEURÔNIOS-ESPELHO. Atleta em ação, recortado e grande,
      dispara simulação motora: a pessoa se projeta na quadra.
   4. ANCORAGEM E PROVA SOCIAL. Números grandes e verificáveis
      (18 edições, 700+ atletas) antes do pedido de ação.
   5. ZEIGARNIK. Lista numerada e incompleta puxa a rolagem.
   6. PICO-FIM. O hero e o CTA final carregam a lembrança; é
      neles que o investimento de acabamento se paga.
   7. FITTS E HICK. Alvos grandes, poucas escolhas por tela.
   ============================================================ */

:root{
  /* ---------- O CHÃO ----------
     Quase preto, com o verde da marca ainda presente no matiz.
     Não é cinza: é a mata à noite. */
  --v3-chao:#060A07;
  --v3-chao-2:#0A110C;        /* faixa alternada, quase imperceptível */
  --v3-superficie:#101A13;    /* cartão */
  --v3-superficie-2:#16231A;  /* cartão elevado / hover */
  --v3-fio:rgba(232,214,185,.13);      /* hairline bege, não cinza */
  --v3-fio-forte:rgba(232,214,185,.26);

  /* ---------- O ÚNICO ACENTO ---------- */
  --v3-neon:#FF6A00;
  --v3-neon-claro:#FF9A4D;
  --v3-neon-fosco:rgba(255,106,0,.14);

  /* o cobre do board vira o segundo nível, nunca compete */
  --v3-cobre:#C57F3F;

  /* ---------- TEXTO ----------
     Nunca branco puro sobre quase-preto: cansa e vibra. */
  --v3-texto:#F2EDE4;
  --v3-texto-2:#A9B3AB;       /* apoio — 7,1:1 sobre o chão */
  --v3-texto-3:#6F7C73;       /* micro-rótulo — 4,6:1 */

  /* ---------- RITMO ---------- */
  --v3-gutter:clamp(20px,5vw,72px);
  --v3-faixa:clamp(72px,9vw,140px);   /* respiro vertical de seção */
}

/* ============================================================
   O CHÃO
   ============================================================ */
body{
  background:var(--v3-chao);
  color:var(--v3-texto);
}

/* As faixas perdem a alternância clara/escura: no sistema novo a
   página é escura de ponta a ponta e quem separa é o RESPIRO e a
   linha de quadra, não a troca de fundo. Uma única faixa clara
   sobra como alívio, perto do fim. */
.section-dyn,
.section-dyn.secao-clara,
.section-dyn.secao-clara--areia{
  background:var(--v3-chao);
  color:var(--v3-texto);
  border-radius:0;
  padding-block:var(--v3-faixa);
  position:relative;
}
.section-dyn:nth-of-type(even){background:var(--v3-chao-2);}

/* A faixa de alívio: clara, uma só, e é a dos números do torneio
   — o lugar onde a prova social precisa de máximo contraste. */
.section-dyn.v3-alivio{
  background:var(--v3-texto);
  color:#0A110C;
}
.section-dyn.v3-alivio h1,
.section-dyn.v3-alivio h2,
.section-dyn.v3-alivio h3,
.section-dyn.v3-alivio strong{color:#060A07;}
.section-dyn.v3-alivio p,
.section-dyn.v3-alivio li{color:#43504A;}
.section-dyn.v3-alivio .grad-text{color:#B34A00;}

/* ============================================================
   TIPOGRAFIA — a voz da referência
   ------------------------------------------------------------
   Display enorme, apertado, caixa alta. O tamanho não é vaidade:
   um título que ocupa a largura da tela é lido como afirmação,
   não como rótulo, e é o que separa site de torneio mundial de
   site de clube de bairro.
   ============================================================ */
.section-dyn h2,
.page-hero h1,
.hero-poster-title{
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.92;
  text-transform:uppercase;
  text-wrap:balance;
}
.section-dyn h2{
  font-size:clamp(2.4rem,6.4vw,5.2rem);
  margin:0 0 18px;
  max-width:18ch;
}
.hero-poster-title{
  font-size:clamp(2.8rem,8.4vw,7rem);
  letter-spacing:-.04em;
}

/* UMA palavra no acento, nunca duas. */
.grad-text,
.hero-poster-title .hl{
  color:var(--v3-neon);
  -webkit-text-fill-color:var(--v3-neon);
  background:none;
}

/* Micro-rótulo: pequeno, muito espacejado, nunca em caixa de cor.
   É a assinatura tipográfica das quatro referências. */
.eyebrow,
.eyebrow--ghost{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  padding:0;
  color:var(--v3-texto-3);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  margin-bottom:20px;
  box-shadow:none;
}
/* o ponto laranja antes do rótulo: o menor uso possível do acento */
.eyebrow::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--v3-neon);
  flex:none;
}
.v3-alivio .eyebrow{color:#6B776F;}

.section-head{max-width:none;}
.section-head p{
  color:var(--v3-texto-2);
  font-size:clamp(.98rem,1.2vw,1.1rem);
  max-width:52ch;
  line-height:1.65;
}

/* ============================================================
   SUPERFÍCIES — vidro escuro, fio bege, sem branco
   ------------------------------------------------------------
   Cartão branco num site escuro vira buraco de luz e rouba a
   atenção do acento. Aqui a peça é uma camada do próprio chão,
   separada por um fio de 1px e por profundidade.
   ============================================================ */
.news-card,
.jogos-home-card,
.cat-card,
.bento-peca,
.athlete-card,
.estrutura-galeria-item,
.stat-card,
.stat-box,
.tv-transmissao-card,
.tv-quadro,
.tv-prog,
.tv-ep,
.map-card,
.timeline-item,
.secao-clara .news-card,
.secao-clara .jogos-home-card,
.secao-clara .cat-card,
.secao-clara .bento-peca,
.secao-clara .athlete-card,
.secao-clara .stat-card{
  background:var(--v3-superficie);
  border:1px solid var(--v3-fio);
  border-radius:var(--radius-md);
  box-shadow:none;
  color:var(--v3-texto);
  transition:border-color .4s cubic-bezier(.22,1,.36,1),
             background-color .4s cubic-bezier(.22,1,.36,1),
             transform .4s cubic-bezier(.22,1,.36,1);
}
.news-card:hover,
.jogos-home-card:hover,
.cat-card:hover,
.bento-peca:hover,
.athlete-card:hover,
.estrutura-galeria-item:hover{
  background:var(--v3-superficie-2);
  border-color:var(--v3-fio-forte);
  transform:translateY(-4px);
}

/* o texto dentro da peça volta ao tom do sistema */
.secao-clara .news-card *,
.secao-clara .jogos-home-card *,
.secao-clara .athlete-card *,
.secao-clara .cat-card *,
.secao-clara .bento-peca *{color:inherit;}
.news-card h3,.news-card h4,
.athlete-card h3,.athlete-card h4,
.cat-card h3,.bento-peca h3{color:var(--v3-texto);}
.news-card p,.cat-card p,.bento-peca p,
.jogos-home-card-cat,.jogos-home-card-court{color:var(--v3-texto-2);}

/* ============================================================
   AÇÕES
   ------------------------------------------------------------
   Uma ação primária por tela, em laranja sólido com texto carvão
   (branco sobre laranja reprova: 2,87:1). O resto é contorno.
   ============================================================ */
.btn{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.82rem;
  border-radius:var(--radius-pill);
  padding:16px 30px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary,
.secao-clara .btn-primary,
.hero-banner .btn-primary{
  background:var(--v3-neon);
  color:#0A0A0A;
  border:0;
  box-shadow:none;
}
.btn-primary:hover,
.hero-banner .btn-primary:hover{
  background:var(--v3-neon-claro);
  transform:translateY(-2px);
  box-shadow:none;
}
.btn-outline,
.secao-clara .btn-outline{
  background:none;
  border:1px solid var(--v3-fio-forte);
  color:var(--v3-texto);
}
.btn-outline:hover,
.secao-clara .btn-outline:hover{
  border-color:var(--v3-neon);
  color:var(--v3-neon);
  background:none;
  transform:translateY(-2px);
}
.v3-alivio .btn-outline{border-color:rgba(10,17,12,.3);color:#0A110C;}
.v3-alivio .btn-outline:hover{border-color:#B34A00;color:#B34A00;}

/* seta em círculo: o gesto das quatro referências */
.read-more,
.cat-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--v3-texto);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.read-more svg,
.cat-link svg{
  width:34px; height:34px;
  padding:9px;
  border-radius:50%;
  border:1px solid var(--v3-fio-forte);
  transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.news-card:hover .read-more svg,
.cat-card:hover .cat-link svg{
  background:var(--v3-neon);
  border-color:var(--v3-neon);
  color:#0A0A0A;
  transform:translateX(3px);
}

/* ============================================================
   LINHA DE QUADRA — o motivo estrutural
   ------------------------------------------------------------
   Nas quatro referências a quadra não é ilustração: é a grade que
   organiza a página. Aqui ela entra como fios finíssimos que
   marcam o começo de cada faixa.
   ============================================================ */
.section-dyn::before{
  content:'';
  position:absolute;
  left:var(--v3-gutter); right:var(--v3-gutter);
  top:0; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--v3-fio) 12%, var(--v3-fio) 88%, transparent);
  pointer-events:none;
}
.section-dyn.v3-alivio::before{background:none;}

/* ============================================================
   MICRO-INTERAÇÃO DE FOCO
   ============================================================ */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--v3-neon);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .btn,.news-card,.jogos-home-card,.cat-card,
  .bento-peca,.athlete-card,.estrutura-galeria-item{transition:none !important;}
  .btn:hover,.news-card:hover,.jogos-home-card:hover,
  .cat-card:hover,.bento-peca:hover,.athlete-card:hover{transform:none !important;}
}

/* ============================================================
   TONS DE TEXTO — fechando o que vinha do tema de papel
   ------------------------------------------------------------
   Com .secao-clara desligada, sobram regras de style.css que
   ainda pintam texto para fundo claro. Aqui o sistema afirma os
   seus tons, e nenhuma peça fica contando com herança.
   ============================================================ */
.section-dyn h1,.section-dyn h2,.section-dyn h3,
.section-dyn h4,.section-dyn h5,.section-dyn strong,.section-dyn b{
  color:var(--v3-texto);
}
.section-dyn p,.section-dyn li,.section-dyn span{color:var(--v3-texto-2);}
.section-dyn .grad-text,
.section-dyn .hl{color:var(--v3-neon);}

/* ---- Cartão de jogo: a peça mais densa do site ----
   É tabela disfarçada de cartão. O que importa é o nome do
   atleta e o horário; o resto recua. */
.jogos-home-card-time{
  color:var(--v3-neon);
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:-.02em;
}
.jogos-home-card-time-label,
.jogos-home-card-court,
.jogos-home-card-cat,
.jogos-home-card-round,
.jogos-home-card-vs{color:var(--v3-texto-3);}
.jogos-home-card-player{color:var(--v3-texto);font-weight:700;}
.jogos-home-card-player.is-vencedor{color:var(--v3-neon);}

/* etiquetas de modalidade: contorno, não caixa colorida */
.modalidade-tag,
.cat-tag,
.match-status{
  background:none;
  border:1px solid var(--v3-fio-forte);
  color:var(--v3-texto-2);
  border-radius:var(--radius-pill);
  padding:5px 12px;
}
.modalidade-tag--tenis{border-color:rgba(197,127,63,.45);color:var(--v3-cobre);}
.modalidade-tag--beach{border-color:rgba(255,106,0,.45);color:var(--v3-neon-claro);}
.match-status--em_andamento{border-color:var(--v3-neon);color:var(--v3-neon);}

/* ---- Atleta ---- */
.athlete-card .info span{color:var(--v3-neon);}
.athlete-card .info h3,
.athlete-card .info h4{color:var(--v3-texto);}
.athlete-card .info .meta span{
  background:none;
  border:1px solid var(--v3-fio);
  color:var(--v3-texto-3);
}

/* ---- Notícia ---- */
.news-card .date{color:var(--v3-texto-3);}
.news-card .read-more{color:var(--v3-texto);}

/* ---- A faixa de alívio inverte tudo ---- */
.v3-alivio h1,.v3-alivio h2,.v3-alivio h3,.v3-alivio strong{color:#060A07;}
.v3-alivio p,.v3-alivio li,.v3-alivio span{color:#43504A;}
.v3-alivio .grad-text,.v3-alivio .hl{color:#B34A00;}
.v3-alivio .stat-box,
.v3-alivio .stat-card{
  background:rgba(6,10,7,.04);
  border:1px solid rgba(6,10,7,.12);
}
.v3-alivio .stat-box strong,
.v3-alivio .stat-card strong{color:#060A07;}

/* O chapéu na faixa clara dava 4,01:1 (precisa 4,5). */
.v3-alivio .eyebrow{color:#4E5A53;}

/* ============================================================
   HERO V3 — a composição das referências
   ------------------------------------------------------------
   Nas quatro: a foto do atleta ocupa o quadro, a headline é
   gigante, e um cartão de vidro com NÚMEROS entra antes do
   pedido de ação. A ordem importa: ancoragem primeiro
   (18 edições, 700+ atletas), pedido depois. Prova antes de
   promessa é o que separa convite de anúncio.
   ============================================================ */

/* A marca recua: quem abre a página é a palavra, não o brasão.
   Ele vira assinatura no alto, não protagonista. */
.hero-banner .hero-poster-logo{
  width:clamp(74px,7vw,104px);
  height:clamp(74px,7vw,104px);
  margin-bottom:26px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6));
}
.hero-banner .hero-poster-logo::before,
.hero-banner .hero-poster-logo::after{display:none;}

/* O chapéu perde a pílula laranja e vira micro-rótulo, como nas
   referências. O laranja fica reservado à headline e ao CTA —
   um acento que aparece em três lugares deixa de ser acento. */
.hero-banner .hero-poster-subtitle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:none;
  color:var(--v3-texto-2);
  padding:0;
  border-radius:0;
  box-shadow:none;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.hero-banner .hero-poster-subtitle::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--v3-neon);
  flex:none;
}

.hero-banner .hero-poster-title{
  margin:18px 0 20px;
  text-shadow:0 4px 30px rgba(0,0,0,.75);
}
.hero-banner .hero-poster-desc{
  color:var(--v3-texto-2);
  max-width:46ch;
  font-size:clamp(1rem,1.2vw,1.12rem);
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}

/* ---- A barra de datas vira fio, não caixa ----
   Caixa opaca no meio do hero compete com a headline. Fio com
   divisores verticais informa sem disputar. */
.hero-banner .hero-poster-infobar{
  background:none;
  border:0;
  border-top:1px solid var(--v3-fio);
  border-bottom:1px solid var(--v3-fio);
  border-radius:0;
  box-shadow:none;
  padding:18px 0;
  margin:26px 0;
  gap:0;
}
.hero-banner .hero-poster-infobar > div{
  padding:0 clamp(16px,2.4vw,34px);
  border-left:1px solid var(--v3-fio);
}
.hero-banner .hero-poster-infobar > div:first-child{
  border-left:0;
  padding-left:0;
}
.hero-banner .hero-poster-infobar .ic{
  background:none;
  border:1px solid var(--v3-fio-forte);
  border-radius:50%;
  color:var(--v3-neon);
  box-shadow:none;
}
.hero-banner .hero-poster-infobar strong{color:var(--v3-texto);}
.hero-banner .hero-poster-infobar span{color:var(--v3-texto-3);}

/* ---- Prova social: o cartão de vidro ---- */
.v3-provas{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,3vw,46px);
  padding:22px clamp(22px,2.6vw,34px);
  margin:0 0 28px;
  border-radius:var(--radius-lg);
  background:rgba(6,10,7,.56);
  border:1px solid var(--v3-fio);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  width:fit-content;
}
.v3-provas div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.v3-provas strong{
  font-family:var(--font-head);
  font-weight:900;
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--v3-texto);
}
.v3-provas span{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--v3-texto-3);
}
@media (max-width:620px){
  .v3-provas{
    width:100%;
    gap:18px;
    justify-content:space-between;
  }
  .v3-provas strong{font-size:1.5rem;}
}

/* ---- O véu do hero: só o suficiente para o texto ler ---- */
.hero-banner .hero-slides::before{
  background:linear-gradient(180deg,
    rgba(6,10,7,.52) 0%,
    rgba(6,10,7,.2) 36%,
    rgba(6,10,7,.72) 82%,
    var(--v3-chao) 100%);
}
.hero-banner .hero-slides::after{
  background:linear-gradient(180deg, rgba(6,10,7,.28), rgba(6,10,7,.46));
  mix-blend-mode:multiply;
}

/* ============================================================
   O RESTO DO CHASSI — cabeçalho, atalhos, marquee, rodapé
   ------------------------------------------------------------
   Peças que sobraram da linguagem de papel. Num sistema escuro
   um cartão creme vira buraco de luz e rouba a atenção do único
   acento; é exatamente o que a referência evita.
   ============================================================ */

/* ---- Cabeçalho: fino, transparente, vira sólido ao rolar ---- */
.site-header{
  background:linear-gradient(180deg, rgba(6,10,7,.92), rgba(6,10,7,0));
  border-bottom:0;
}
.site-header.is-scrolled{
  background:rgba(6,10,7,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--v3-fio);
  box-shadow:none;
}
.nav-desktop a{
  color:var(--v3-texto-2);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav-desktop a:hover{color:var(--v3-texto);}
.nav-desktop a.active{
  color:var(--v3-texto);
  background:rgba(232,214,185,.08);
}
.brand-badge{box-shadow:none;}
.destaques-logos{
  background:var(--v3-chao);
  border-bottom:1px solid var(--v3-fio);
}

/* ---- Atalhos: o cartão de papel vira painel de vidro ----
   Ele sobrepõe o hero, então é a primeira peça depois da dobra.
   Em creme ele competia com o laranja; em vidro ele conduz. */
.atalhos-2027{
  background:rgba(16,26,19,.82);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid var(--v3-fio);
  border-radius:var(--radius-lg);
  box-shadow:none;
}
.atalhos-2027 .atalho{
  border-left:1px solid var(--v3-fio);
  color:var(--v3-texto);
}
.atalhos-2027 .atalho:first-child{border-left:0;}
.atalhos-2027 .atalho strong{
  color:var(--v3-texto);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.atalhos-2027 .atalho span{color:var(--v3-texto-3);}
.atalhos-2027 .atalho .ic{
  background:none;
  border:1px solid var(--v3-fio-forte);
  color:var(--v3-neon);
  box-shadow:none;
}
.atalhos-2027 .atalho:hover .ic{
  background:var(--v3-neon);
  border-color:var(--v3-neon);
  color:#0A0A0A;
}

/* ---- Marquee de patrocinadores: fio, não faixa ---- */
.marquee,
.marquee-track{background:none;}
.marquee-track span{
  color:var(--v3-texto-3);
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.marquee-track span::before{color:var(--v3-neon);}

/* ---- Parede de logos: monocromática, acende no hover ----
   É o tratamento clássico de parede de patrocinador: todos iguais
   em repouso, um de cada vez ao passar o ponteiro. Evita que a
   seção vire um mosaico de marcas brigando entre si. */
.sponsor-item{
  background:none;
  border:0;
  box-shadow:none;
}
.sponsor-item img{
  opacity:.5;
  transition:opacity .35s ease;
}
.sponsor-item:hover img{opacity:1;}

/* ---- Rodapé ---- */
.site-footer{
  background:var(--v3-chao);
  border-top:1px solid var(--v3-fio);
  border-radius:0;
  box-shadow:none;
}
.footer-col h3.rodape-titulo{
  color:var(--v3-texto-3);
  letter-spacing:.2em;
}
.footer-col a{color:var(--v3-texto-2);}
.footer-col a:hover{color:var(--v3-neon);}
.footer-social a{
  border:1px solid var(--v3-fio);
  color:var(--v3-texto-2);
}
.footer-social a:hover{
  border-color:var(--v3-neon);
  color:var(--v3-neon);
}

/* ---- Botões flutuantes ---- */
.back-to-top,
.scroll-to-bottom{
  background:rgba(16,26,19,.9);
  border:1px solid var(--v3-fio-forte);
  color:var(--v3-texto);
  box-shadow:none;
}
.back-to-top:hover,
.scroll-to-bottom:hover{
  background:var(--v3-neon);
  border-color:var(--v3-neon);
  color:#0A0A0A;
}

/* ---- Folhagem e fitas: muito mais discretas ----
   No sistema de papel elas emolduravam. Sobre quase-preto, com um
   único acento saturado, qualquer ornamento disputa com o CTA.
   Ficam como textura de fundo, não como elemento. */
.am-mata img{opacity:.3 !important;}
.am-rio span{opacity:.3 !important;}
.am-caustica{opacity:.4 !important;}
.am-folha{opacity:.07 !important;}
.am-trajetoria{opacity:.35;}

/* ============================================================
   ATALHOS E INSCRIÇÕES — os seletores de verdade
   ------------------------------------------------------------
   A primeira tentativa mirou .atalhos-2027 e .ic, que são o
   invólucro e um nome de outro componente. O cartão é .atalhos-cx
   e os ícones são .atalho-ico. Medido no HTML renderizado.
   ============================================================ */
.atalhos-cx{
  background:rgba(16,26,19,.84);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border:1px solid var(--v3-fio);
  border-radius:var(--radius-lg);
  box-shadow:none;
}
.atalhos-cx .atalho{border-left:1px solid var(--v3-fio);}
.atalhos-cx .atalho:first-child{border-left:0;}
.atalho-txt strong{
  color:var(--v3-texto);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:.8rem;
}
.atalho-txt span{color:var(--v3-texto-3);}

/* Os quatro ícones eram quatro cores da marca. Num sistema de um
   acento só, quatro cores viram ruído: todos passam a ser
   contorno, e só o que está sob o ponteiro acende. */
.atalho-ico,
.atalho-ico--areia,
.atalho-ico--cobre,
.atalho-ico--laranja,
.atalho-ico--verde{
  background:none;
  border:1px solid var(--v3-fio-forte);
  color:var(--v3-texto-2);
  border-radius:50%;
  box-shadow:none;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.atalho:hover .atalho-ico{
  background:var(--v3-neon);
  border-color:var(--v3-neon);
  color:#0A0A0A;
}
.atalho-seta{color:var(--v3-texto-3);transition:color .3s ease, transform .3s ease;}
.atalho:hover .atalho-seta{color:var(--v3-neon);transform:translateX(3px);}

/* ---- Faixa de inscrições + contador ---- */
.inscricoes-strip{background:none;}
.inscricoes-col h2,
.inscricoes-col h3{color:var(--v3-texto);}
.inscricoes-col p{color:var(--v3-texto-2);}
.countdown-card{
  background:var(--v3-superficie);
  border:1px solid var(--v3-fio);
  border-radius:var(--radius-lg);
  box-shadow:none;
}
.contador-titulo{color:var(--v3-texto-3);letter-spacing:.2em;}
.countdown-grid strong{
  color:var(--v3-neon);
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:-.02em;
}
.countdown-grid span{color:var(--v3-texto-3);}
.inscricoes-badge-big{
  background:none;
  border:1px solid rgba(255,106,0,.4);
}
.inscricoes-badge-big .txt{
  color:var(--v3-texto);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
}

/* ---- Cartão de prova no hero: uma linha só até o celular ----
   Quebrando em duas linhas ele perde a leitura de "painel" e
   vira lista. */
.v3-provas{flex-wrap:nowrap;}
@media (max-width:860px){
  .v3-provas{flex-wrap:wrap;}
}

/* ============================================================
   CORREÇÕES MEDIDAS
   ============================================================ */

/* O tom de apoio passava sobre o fundo da página (4,56:1) mas
   REPROVAVA sobre o cartão de vidro, que é mais claro (4,00:1).
   O novo valor passa nos dois: 4,79 no cartão, 5,46 na página. */
:root{ --v3-texto-3:#7C8982; }

/* O título do atalho é <b>, não <strong> — a primeira regra mirou
   o elemento errado e o texto ficou verde-escuro sobre vidro. */
.atalho-txt b{
  color:var(--v3-texto);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:.8rem;
  display:block;
}
.atalho-txt span{color:var(--v3-texto-3);}

/* A etiqueta de inscrições ficava vermelha (#ff4d4d, vinda de
   style.css). Vermelho não está na paleta do board, e num sistema
   de um acento só ele compete com o laranja. */
.inscricoes-badge-big .txt,
.inscricoes-badge-big .txt:where(*){
  color:var(--v3-texto) !important;
}

/* O contador: números no acento, rótulos no tom de apoio. */
.countdown-grid > div > strong{
  color:var(--v3-neon);
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:-.02em;
}
.countdown-grid > div > span{color:var(--v3-texto-3);}

/* ============================================================
   MAIS DUAS CORREÇÕES MEDIDAS
   ============================================================ */

/* 1. O CIANO DE 2026 AINDA VIVIA NO TOPO DAS PÁGINAS INTERNAS.
   `.page-hero` carregava um radial em rgba(34,193,220,.18) — uma
   sexta cor, fora do board, no primeiro bloco que o visitante vê
   em programação, estrutura, história e contato. */
.page-hero{
  background:
    radial-gradient(64% 58% at 82% 0%, rgba(255,106,0,.12), transparent 62%),
    radial-gradient(50% 50% at 10% 10%, rgba(197,127,63,.07), transparent 65%);
  border-bottom:1px solid var(--v3-fio);
}
.page-hero h1{
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.94;
  text-transform:uppercase;
  font-size:clamp(2.3rem,5.6vw,4.4rem);
  color:var(--v3-texto);
}
.page-hero p{color:var(--v3-texto-2);max-width:56ch;}
.page-hero .crumb{color:var(--v3-texto-3);}
.page-hero .crumb span{color:var(--v3-neon);}

/* 2. A BARRA DE DATAS DO HERO FICOU SEM FUNDO E O TEXTO PASSOU A
   POUSAR DIRETO NO VÍDEO. Medida: "Tênis Clube" caiu para
   mediana 3,1:1. O fio continua (é o que dá a leitura de régua),
   mas agora com um véu por trás: sobre vídeo em movimento,
   nenhuma sombra de texto garante leitura sozinha. */
.hero-banner .hero-poster-infobar{
  background:rgba(6,10,7,.62);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--v3-fio);
  border-radius:var(--radius-md);
  padding:18px clamp(14px,1.6vw,22px);
}
.hero-banner .hero-poster-infobar strong,
.hero-banner .hero-poster-infobar span{text-shadow:none;}

/* A grade da TV era uma ilha clara (.tv-faixa a 66% de branco).
   Com o sistema escuro, texto claro sobre ela dava 1,2:1. */
.tv-faixa,
.secao-clara .tv-faixa{
  background:var(--v3-superficie);
  border:1px solid var(--v3-fio);
  color:var(--v3-texto);
  box-shadow:none;
}
.tv-faixa-txt strong{color:var(--v3-texto);}
.tv-faixa-txt span,
.tv-faixa-hora{color:var(--v3-texto-3);}
.tv-faixa.is-agora{
  background:var(--v3-superficie-2);
  border-color:var(--v3-neon);
  box-shadow:none;
}
.tv-faixa.is-agora .tv-faixa-hora{color:var(--v3-neon);}
.tv-faixa-agora{background:var(--v3-neon);color:#0A0A0A !important;}
.tv-dia{
  background:none;
  border:1px solid var(--v3-fio-forte);
  color:var(--v3-texto-2);
}
.tv-dia.is-ativo{
  background:var(--v3-neon);
  border-color:var(--v3-neon);
  color:#0A0A0A;
}
.tv-dia em,.tv-dia small{color:inherit;opacity:.75;}
/* o cobre sobre o verde escuro dava 2,4:1 */
.tv-chapeu,.tv-meta,.tv-ep-chapeu{color:var(--v3-texto-3);}

/* O cartão de atleta guardava o degradê verde do sistema anterior
   (court-800 -> court-900). Sobre o quase-preto ele vira uma caixa
   verde saturada que destoa de todas as outras peças. A superfície
   é a mesma do resto: uma camada do próprio chão. */
.athlete-card,
.athlete-card .info,
.athlete-card.has-foto .info,
.secao-clara .athlete-card,
.secao-clara .athlete-card .info{
  background:var(--v3-superficie);
}
.athlete-card:hover,
.athlete-card:hover .info{background:var(--v3-superficie-2);}

/* O título da TV vinha inteiro em laranja porque as duas linhas
   caem no .grad-text. Um acento que toma a seção inteira deixa de
   ser acento: só a segunda linha fica. */
.section-dyn h2 .grad-text{color:var(--v3-neon);}
.section-dyn h2{color:var(--v3-texto);}

/* ============================================================
   MENU DO TOPO COM NOVE ITENS
   ------------------------------------------------------------
   O menu voltou a ter Galeria e Campeões (duas páginas que
   existiam em 2026 e tinham sumido). São nove itens, e o
   tratamento v3 — caixa-alta, fonte expandida, letras soltas —
   faz cada um ocupar muito espaço: medido, o menu passava
   219px da largura do cabeçalho e vazava a janela em telas de
   notebook (1280–1600px).

   Em vez de esconder dois links ou jogar o notebook para o
   menu sanduíche, a régua aperta onde o menu aparece. A
   identidade continua a mesma (caixa-alta e expandida) — muda
   a respiração, não a forma.

   Vale de 1181px (onde o menu sanduíche entra) para cima, sem
   teto: mesmo numa tela de 1920 o cabeçalho é limitado a
   1132px, então o menu largo estourava a coluna e empurrava o
   botão de inscrição para fora da tela.
   ============================================================ */
@media (min-width:1181px){
  .nav-desktop{gap:2px;}
  .nav-desktop a{
    padding:10px 10px;
    font-size:.72rem;
    letter-spacing:.045em;
    font-variation-settings:'wdth' 112;
  }
}

/* ============================================================
   ESCALA DOS TÍTULOS
   ------------------------------------------------------------
   Medido no site e comparado com o tenisclubepvh.com.br, que o
   cliente deu como referência:

                      Aberto (antes)   Tênis Clube
     h2 de seção      83px             46–50px
     h1 de página     68px             64px

   O h2 estava 70% maior que o da referência. Com a fonte
   expandida (wdth 125) a mancha fica ainda maior que o número
   sugere — "QUEM TORNA O ABERTO DO MADEIRA POSSÍVEL" ocupava
   três linhas inteiras da tela.

   A nova escala fica um pouco abaixo da do Tênis Clube
   justamente para compensar a largura extra da fonte: a mancha
   final no olho é equivalente.
   ============================================================ */
.section-dyn h2,
.section .section-head h2{
  font-size:clamp(1.85rem, 3.4vw, 2.95rem);
  line-height:1.0;
  letter-spacing:-.028em;
}
.page-hero h1{
  font-size:clamp(2rem, 4.2vw, 3.3rem);
  line-height:1.02;
}
.hero-dados + * h2{line-height:1.0;}

/* os parágrafos de apoio acompanham, senão o título encolhe e o
   texto abaixo passa a competir com ele */
.section-dyn .section-head p,
.page-hero p{
  font-size:clamp(.95rem, 1.05vw, 1.05rem);
  line-height:1.6;
}

/* Títulos longos quebram em linhas de tamanhos parecidos em vez de
   deixar uma palavra órfã na última linha. */
.section-dyn h2,
.page-hero h1,
.hd-chamada h1,
.section .section-head h2{text-wrap:balance;}

/* ============================================================
   TÍTULOS: UMA LINHA QUANDO CABE, DUAS QUANDO NÃO (23/10)
   ------------------------------------------------------------
   Padrão pedido pelo cliente (o das "4 pontes"): se o título
   inteiro cabe na largura, fica numa linha; se não cabe, a quebra
   é sempre ANTES do trecho em laranja, que desce inteiro para a
   segunda linha. Antes o laranja ficava sempre sozinho na linha,
   e "QUEM BRILHOU EM 2026" saía em três linhas.

   Quem decide é a medição em motion-2027.js, que põe .tit-1linha
   ou .tit-2linhas. Sem JavaScript fica o comportamento antigo.
   ============================================================ */
/* "html body" na frente: o home-2027.css carrega depois deste arquivo e
   repõe as larguras antigas (24ch no título, 62ch no bloco de texto). */
html body .section-dyn h2,
html body .section .section-head h2{max-width:none;}
html body .tvm-cab-txt{flex:1 1 0; min-width:min(100%, 280px); max-width:none; align-self:stretch;}
html body .tvm-cab-txt p{max-width:62ch;}

.tit-medindo{white-space:nowrap !important;}
html body .tit-medindo .grad-text,
html body .tit-medindo .hl,
html body .tit-1linha .grad-text,
html body .tit-1linha .hl,
html body .tit-2linhas .grad-text,
html body .tit-2linhas .hl{display:inline !important;}
/* duas linhas: quebra logo antes do laranja; o que vem depois dele
   ("possível", "em 2026") continua na mesma linha que ele */
html body .tit-2linhas .grad-text::before,
html body .tit-2linhas .hl::before{content:"\A"; white-space:pre;}
/* com o título ocupando a largura toda, o parágrafo de apoio também
   precisa vir para o centro, como no cabeçalho das 4 pontes */
html body .section .section-head p{margin-left:auto; margin-right:auto;}