/* ============================================================
   ABERTO DO MADEIRA 2027 — Tema da identidade aprovada
   ------------------------------------------------------------
   Este arquivo é carregado DEPOIS do style.css e só redefine
   tokens. Nenhuma regra de componente precisa ser alterada:
   as ~1.800 linhas do style.css passam a usar a identidade de
   2027 automaticamente, porque todas elas leem var(--token).

   Para voltar ao visual de 2026, basta não carregar este
   arquivo — nada no style.css foi modificado.

   Paleta oficial (board de identidade 2027):
     Verde Amazônia   #072814   força, natureza, equilíbrio
     Laranja Energia  #FF6A00   esporte, movimento, paixão
     Cobre Natural    #C57F3F   premium, conquista, sofisticação
     Areia Amazônia   #E8D6B9   elegância, conexão, natural
     Carvão Profundo  #1A1A1A   base, contraste, modernidade
   ============================================================ */

:root{
  /* ---- CORES OFICIAIS, com os nomes da marca ---- */
  --am-verde:#072814;
  --am-laranja:#FF6A00;
  --am-cobre:#C57F3F;
  --am-areia:#E8D6B9;
  --am-carvao:#1A1A1A;

  /* ---- Rampa de verde: mesmo matiz (144°) e saturação (70%),
          só a luminosidade muda. Calculada, não escolhida no olho. ---- */
  --court-950:#04180c;   /* 5,5%  — fundo mais profundo */
  --court-900:#072814;   /* 9,2%  — VERDE AMAZÔNIA oficial, fundo base */
  --court-800:#082e17;   /* 10,5% — superfície elevada */
  --court-700:#0b3f1f;   /* 14,5% — cartões sobre o escuro */
  --court-600:#0f552a;   /* 19,5% — bordas e divisores */
  --court-500:#147138;   /* 26,0% — só superfície; bege sobre ele dá 4,28:1 */

  /* ---- Laranja ---- */
  --lime:#FF6A00;        /* nome herdado do CSS de 2026; é o laranja da marca */
  --lime-soft:#FF9A4D;
  --laranja-fundo:#C45200;

  /* ---- Cobre (ocupa o lugar do antigo --gold) ---- */
  --gold:#C57F3F;
  --cobre-claro:#DDA268;

  /* ---- Areia e neutros claros: a característica de 2027 ---- */
  --sand:#E8D6B9;        /* AREIA AMAZÔNIA oficial */
  --areia-clara:#F3E9D6;
  --papel:#FBF5EA;

  /* ---- Carvão e texto ---- */
  --ink:#1A1A1A;         /* CARVÃO PROFUNDO oficial */
  --white:#ffffff;
  --muted:#9FBAA7;       /* texto de apoio sobre o verde — 8,9:1 */

  /* ---- Tons só para TELA ----
     O laranja e o cobre oficiais reprovam como texto sobre a areia
     (2,02:1 e 2,28:1). Estes são os mesmos matizes, escurecidos até
     passar 4,5:1. Use-os apenas para texto e link em faixa clara;
     em superfície (botão, selo, faixa) continua valendo o oficial. */
  --laranja-txt:#9E4200;
  --cobre-txt:#835328;

  /* ---- Cores que o CSS de 2026 usava e não existem na marca 2027.
          Remapeadas para dentro da paleta em vez de removidas, para
          não quebrar nenhuma regra que ainda as referencie. ---- */
  --sky:#C57F3F;
  --coral:#FF8A3D;
  --coral-deep:#C45200;

  /* ---- Vidro, agora sobre verde e com um toque de areia ---- */
  --glass:rgba(232,214,185,.07);
  --glass-border:rgba(232,214,185,.18);

  /* ---- Tipografia ----
     O board pede Monument Extended nos títulos. Ela é comercial
     (Pangram Pangram) e precisa de licença web comprada. Enquanto
     isso, Archivo com eixo de largura expandida faz o mesmo papel
     e é gratuita. Quando a licença chegar, troque só esta linha
     e adicione o @font-face da Monument. */
  --font-head:'Archivo','Arial Black',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- Geometria: 2027 é mais angular que 2026.
          O losango do logo pede cantos menos arredondados. ---- */
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:6px;
}

/* A família Archivo só fica expandida com o eixo de largura. */
h1,h2,h3,h4,.btn,.eyebrow,.selo,.nav-desktop a{
  font-stretch:expanded;
  font-variation-settings:'wdth' 125;
}

/* Títulos de 2027 em caixa alta, como no board. */
h1,h2,.section-head h2{
  text-transform:uppercase;
  letter-spacing:.005em;
}

/* O laranja oficial não pode ser texto sobre fundo claro.
   Onde a marca aparece como destaque de texto, usa o tom de tela. */
.grad-text{color:var(--lime);}
.secao-clara .grad-text,
.sec--areia .grad-text{color:var(--laranja-txt);}

/* Botão primário: o texto é o carvão, nunca branco (branco dá 2,87:1). */
.btn-primary{
  background:var(--lime);
  color:var(--ink);
  box-shadow:0 10px 22px -12px rgba(26,26,26,.45);
}
.btn-primary:hover{background:var(--lime-soft);}

/* Chapéu/eyebrow com o espaçamento do board. */
.eyebrow{
  letter-spacing:.26em;
  border-radius:0;
}

/* ---- Faixa clara: o bloco que não existia em 2026 ----
   Dá ao 2027 os "dois tempos" — dia na areia, noite na quadra.
   Aplique a classe .secao-clara em qualquer <section>. */
.secao-clara{
  background:linear-gradient(180deg,var(--papel),var(--areia-clara));
  color:var(--ink);
}
.secao-clara h1,.secao-clara h2,.secao-clara h3{color:var(--court-900);}
.secao-clara p{color:#53514B;}
.secao-clara .section-head p{color:#53514B;}
.secao-clara .btn-outline{
  color:var(--laranja-txt);
  border-color:var(--laranja-txt);
  background:transparent;
}
.secao-clara .btn-outline:hover{
  background:var(--laranja-txt);
  color:var(--papel);
}

/* ---- Textura de malha de raquete, usada como fundo de bloco ---- */
.textura-raquete{
  background-image:
    repeating-linear-gradient(45deg,rgba(197,127,63,.22) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(-45deg,rgba(197,127,63,.22) 0 1px,transparent 1px 13px);
}

/* ============================================================
   FAIXA CLARA — o tema completo, não só o fundo
   ------------------------------------------------------------
   Tudo que aparece dentro de uma .secao-clara precisa trocar de
   lado: texto, bordas, vidro, chapéu e botões. Sem isto a faixa
   fica com texto claro sobre fundo claro.
   ============================================================ */

.secao-clara{
  --glass:rgba(7,40,20,.045);
  --glass-border:rgba(7,40,20,.14);
  --muted:#5B5A54;
  --white:var(--court-900);
}

.secao-clara,
.secao-clara p,
.secao-clara li,
.secao-clara span:not(.eyebrow):not(.grad-text){
  color:#44433E;
}
.secao-clara h1,.secao-clara h2,.secao-clara h3,.secao-clara h4,
.secao-clara strong,.secao-clara b{
  color:var(--court-900);
}
.secao-clara .grad-text{color:var(--laranja-txt);}

/* Chapéu: no escuro é pílula laranja; no claro vira contorno discreto. */
.secao-clara .eyebrow{
  background:transparent;
  color:var(--laranja-txt);
  border:1px solid rgba(158,66,0,.4);
}
.secao-clara .eyebrow--ghost{
  background:rgba(158,66,0,.08);
  border-color:rgba(158,66,0,.35);
}

/* Botões dentro da faixa clara. */
.secao-clara .btn-primary{
  background:var(--court-900);
  color:var(--sand);
  box-shadow:0 10px 24px -12px rgba(7,40,20,.6);
}
.secao-clara .btn-primary:hover{background:var(--court-700);}
.secao-clara .btn-outline{
  color:var(--laranja-txt);
  border-color:var(--laranja-txt);
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.secao-clara .btn-outline:hover{
  background:var(--laranja-txt);
  color:var(--papel);
  border-color:var(--laranja-txt);
}

/* Cartões e superfícies de vidro passam a ser papel com borda. */
.secao-clara .cat-card,
.secao-clara .estrutura-item,
.secao-clara .stat-card,
.secao-clara .map-card,
.secao-clara .field input,
.secao-clara .field select,
.secao-clara .field textarea{
  background:rgba(255,255,255,.72);
  border-color:rgba(7,40,20,.14);
  color:#44433E;
}
.secao-clara .field label{color:var(--court-900);}

/* Imagens ganham um contorno suave, que no escuro não era necessário. */
.secao-clara img{border-radius:var(--radius-md);}

/* Separador em onda entre a faixa escura e a clara — a assinatura do
   layout do Tênis Clube. Desenhado em CSS, sem imagem. */
.secao-clara::before,
.secao-clara::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:clamp(26px,3.4vw,54px);
  background:var(--papel);
  pointer-events:none;
}
.secao-clara::before{
  top:0;
  transform:translateY(-99%);
  -webkit-mask:radial-gradient(60% 100% at 50% 0,transparent 99%,#000 100%);
  mask:radial-gradient(60% 100% at 50% 0,transparent 99%,#000 100%);
}
.secao-clara::after{
  bottom:0;
  transform:translateY(99%);
  background:var(--areia-clara);
  -webkit-mask:radial-gradient(60% 100% at 50% 100%,transparent 99%,#000 100%);
  mask:radial-gradient(60% 100% at 50% 100%,transparent 99%,#000 100%);
}
.secao-clara{position:relative;}

/* ============================================================
   ATALHOS SOBREPOSTOS — a assinatura do layout do Tênis Clube
   ------------------------------------------------------------
   O cartão sobe por cima do fim do hero. É o primeiro objeto
   clicável depois da chamada e resolve o que a maioria das
   pessoas vem buscar: quando é, como se inscrever, onde é.
   ============================================================ */
.atalhos-2027{
  position:relative;
  z-index:5;
  margin-top:clamp(-72px,-5vw,-44px);
}
.atalhos-cx{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--papel);
  border-radius:var(--radius-lg);
  padding:10px;
  box-shadow:0 26px 60px -28px rgba(4,24,12,.75);
}
.atalho{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  padding:clamp(13px,1.3vw,17px);
  border-radius:var(--radius-md);
  min-width:0;
  color:var(--court-900);
  transition:background .32s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
/* divisor fino entre os atalhos, como no Tênis Clube */
.atalho + .atalho::before{
  content:"";
  position:absolute;
  left:0; top:20%; bottom:20%;
  width:1px;
  background:linear-gradient(transparent,rgba(7,40,20,.18),transparent);
}
.atalho:hover{background:rgba(255,106,0,.07); transform:translateY(-3px);}
.atalho:active{transform:translateY(-1px) scale(.99);}

.atalho-ico{
  width:clamp(42px,4vw,52px);
  aspect-ratio:1;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--papel);
}
.atalho-ico svg{width:46%; height:46%;}
.atalho-ico--laranja{background:var(--lime); color:var(--ink);}
.atalho-ico--cobre  {background:var(--gold); color:var(--ink);}
.atalho-ico--verde  {background:var(--court-900); color:var(--sand);}
.atalho-ico--areia  {background:var(--sand); color:var(--court-900);}

.atalho-txt{min-width:0; flex:1;}
.atalho-txt b{
  display:block;
  font-family:var(--font-head);
  font-weight:800;
  font-size:.76rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1.25;
  color:var(--court-900);
}
.atalho-txt span{
  display:block;
  font-size:.72rem;
  color:#6B6A63;
  margin-top:2px;
}
.atalho-seta{
  width:17px; height:17px; flex:none;
  color:var(--laranja-txt);
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .3s ease, transform .3s ease;
}
.atalho:hover .atalho-seta{opacity:1; transform:translateX(0);}

@media (max-width:900px){
  .atalhos-cx{grid-template-columns:repeat(2,minmax(0,1fr));}
  .atalho:nth-child(3)::before{display:none;}
}
@media (max-width:520px){
  .atalhos-2027{margin-top:clamp(-40px,-6vw,-26px);}
  .atalhos-cx{grid-template-columns:minmax(0,1fr);}
  .atalho + .atalho::before{
    left:14px; right:14px; top:0; bottom:auto;
    width:auto; height:1px;
    background:linear-gradient(90deg,transparent,rgba(7,40,20,.18),transparent);
  }
  .atalho-seta{opacity:1; transform:none;}
}

/* ============================================================
   BENTO — as quatro competições deixam de ter o mesmo peso
   ------------------------------------------------------------
   O conteúdo é o mesmo que já vinha do painel. O que muda é a
   hierarquia: o torneio ITF ocupa a peça grande, porque é o que
   põe o evento no circuito internacional; o beach profissional
   fica alto ao lado; os dois regionais dividem a base.
   ============================================================ */
.bento-2027{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.bento-peca{min-width:0;}
.bento-peca--1{grid-column:span 4; min-height:clamp(290px,30vw,380px);}
.bento-peca--2{grid-column:span 2; min-height:clamp(290px,30vw,380px);}
.bento-peca--3{grid-column:span 3; min-height:clamp(210px,20vw,250px);}
.bento-peca--4{grid-column:span 3; min-height:clamp(210px,20vw,250px);}

/* A peça grande ganha respiro e título maior — é o destaque da seção. */
.bento-peca--1{padding:clamp(24px,2.6vw,34px);}
.bento-peca--1 h3{font-size:clamp(1.25rem,2.4vw,1.75rem);}
.bento-peca--1 p{max-width:46ch;}

/* Textura de raquete na peça grande quando ela não tem foto própria. */
.bento-peca--1:not(.has-imagem){
  background-image:
    repeating-linear-gradient(45deg,rgba(197,127,63,.16) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(-45deg,rgba(197,127,63,.16) 0 1px,transparent 1px 14px);
}

@media (max-width:860px){
  .bento-2027{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bento-peca--1,.bento-peca--2,.bento-peca--3,.bento-peca--4{
    grid-column:span 2;
    min-height:clamp(200px,42vw,280px);
  }
}
@media (max-width:560px){
  .bento-2027{grid-template-columns:minmax(0,1fr);}
  .bento-peca--1,.bento-peca--2,.bento-peca--3,.bento-peca--4{grid-column:span 1;}
}

/* ============================================================
   RITMO CLARO — a correção de direção de 22/10
   ------------------------------------------------------------
   O site tinha 7 faixas verde-escuro seguidas. O site de
   referência (tenisclubepvh) é o contrário: claro na maior parte,
   com o escuro guardado para hero, TV e rodapé. Sem essa inversão
   as fotos ficam afogadas e os cartões somem no fundo.

   Aqui se completa o que faltava na .secao-clara: as peças de
   cartão (jogos, atletas, notícias, bento) que ainda nasciam
   escuras.
   ============================================================ */

/* Laranja, ouro e céu NÃO passam como cor de texto sobre o claro
   (laranja #FF6A00 sobre areia = 2,02:1). São 36 regras no
   style.css; remapear o token resolve todas de uma vez, que é a
   mesma jogada que o resto deste arquivo usa. */
.secao-clara{
  --lime:var(--laranja-txt);        /* #9E4200 — 4,66:1 no papel */
  --lime-soft:#C45200;
  --sky:var(--cobre-txt);           /* #835328 */
  --gold:var(--cobre-txt);
}

/* Variante de papel, para a faixa clara seguinte não repetir o
   mesmo tom e o olho perceber a troca de assunto. */
.secao-clara--areia{
  background:linear-gradient(180deg,var(--areia-clara),var(--sand));
}

/* Cartões no claro: papel branco com sombra, como na referência.
   O --glass a 4,5% é invisível sobre fundo claro; sem a sombra
   o cartão não existe. */
.secao-clara .news-card,
.secao-clara .jogos-home-card,
.secao-clara .cat-card,
.secao-clara .bento-peca,
.secao-clara .estrutura-galeria-item,
.secao-clara .stat-card{
  background:#fff;
  border-color:rgba(7,40,20,.10);
  box-shadow:0 16px 34px -26px rgba(7,40,20,.55);
}
.secao-clara .news-card:hover,
.secao-clara .jogos-home-card:hover,
.secao-clara .cat-card:hover{
  border-color:rgba(158,66,0,.45);
  box-shadow:0 22px 44px -24px rgba(7,40,20,.45);
}

/* ---- Atleta: desfazer a sobreposição ----
   No escuro a ficha era um degradê preto POR CIMA da foto. É
   exatamente a "sobreposição de cores" reclamada: a foto virava
   fundo de legenda. No claro a ficha desce para baixo da foto e
   a foto volta a ser foto. */
.secao-clara .athlete-card{
  height:auto;
  background:#fff;
  border-color:rgba(7,40,20,.10);
  box-shadow:0 16px 34px -26px rgba(7,40,20,.55);
  display:grid;
  grid-template-rows:310px auto;
}
.secao-clara .athlete-card .fill,
.secao-clara .athlete-card.has-foto .fill{
  position:relative;
  inset:auto;
  height:310px;
  opacity:1;
}
.secao-clara .athlete-card .info,
.secao-clara .athlete-card.has-foto .info{
  position:static;
  background:#fff;
  padding:18px 20px 22px;
}
.secao-clara .athlete-card .info h4{color:var(--court-900);}
.secao-clara .athlete-card .info .meta span{
  color:var(--cobre-txt);
  background:rgba(197,127,63,.10);
  border-color:rgba(197,127,63,.32);
}

/* Patrocinadores no claro: a faixa deixa de ser um buraco escuro. */
.secao-clara .sponsor-item{
  background:#fff;
  border:1px solid rgba(7,40,20,.08);
  border-radius:var(--radius-sm);
  box-shadow:0 10px 22px -20px rgba(7,40,20,.5);
}

/* Setas e marcadores dos carrosséis. */
.secao-clara .athletes-arrow,
.secao-clara .news-arrow,
.secao-clara .jogos-home-arrow{
  background:#fff;
  border-color:rgba(7,40,20,.14);
  color:var(--court-900);
}
.secao-clara .athletes-dots span,
.secao-clara .news-dots span,
.secao-clara .jogos-home-dots span{background:rgba(7,40,20,.18);}
.secao-clara .athletes-dots span.is-active,
.secao-clara .news-dots span.is-active,
.secao-clara .jogos-home-dots span.is-active{background:var(--laranja-txt);}

/* ============================================================
   HERO — tirar a lavagem de cima do vídeo
   ------------------------------------------------------------
   O vídeo levava um véu verde chapado de 68% de ponta a ponta:
   a filmagem sumia e sobrava uma mancha. É a "sobreposição de
   cores" reclamada pelo cliente.

   A troca: escurecer SÓ onde o texto pousa (a coluna central e a
   base) e deixar o resto do quadro limpo. É como a referência
   trata a foto do hero — a imagem continua sendo imagem.
   ============================================================ */
.hero-banner .hero-slide--video::after,
.hero-banner .hero-slide--photo::after{
  background:
    /* véu suave atrás do bloco de texto, para o branco ler */
    radial-gradient(68% 52% at 50% 46%, rgba(4,24,12,.62), transparent 72%),
    /* base: ancora a composição e emenda com a seção seguinte */
    linear-gradient(180deg,
      rgba(4,24,12,.30) 0%,
      rgba(4,24,12,.10) 34%,
      rgba(4,24,12,.55) 78%,
      var(--court-900) 100%);
}

/* O ciano de 2026 ainda vivia no véu do hero; fora da paleta 2027.
   Troca por cobre, que é cor oficial. */
.hero-banner .hero-slide::after{
  background:
    radial-gradient(60% 60% at 18% 20%, rgba(255,106,0,.14), transparent 60%),
    radial-gradient(50% 50% at 85% 80%, rgba(197,127,63,.16), transparent 60%),
    linear-gradient(180deg, rgba(4,24,12,.42) 0%, rgba(4,24,12,.72) 62%, var(--court-900) 100%);
}

/* A marca estava dentro de um quadrado de vidro com blur — lia
   como adesivo colado por cima do vídeo. Sai a caixa, fica a
   marca, com sombra para destacar do fundo em movimento. */
.hero-banner .hero-poster-logo{
  width:196px;
  height:196px;
  background:none;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  padding:0;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));
}
@media (max-width:760px){
  .hero-banner .hero-poster-logo{width:150px;height:150px;}
}

/* Cartão de atleta no claro: o nome encostava na borda da foto e os
   cartões do carrossel terminavam em alturas diferentes. */
.secao-clara .athletes-track{align-items:stretch;}
.secao-clara .athlete-card-wrap{display:flex;}
.secao-clara .athlete-card{
  width:100%;
  grid-template-rows:310px 1fr;
}
.secao-clara .athlete-card .info,
.secao-clara .athlete-card.has-foto .info{
  padding:20px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.secao-clara .athlete-card .info h4{margin:0;line-height:1.25;}
.secao-clara .athlete-card .info .meta{margin-top:auto;padding-top:12px;}

/* A foto vinha com 358px dentro de uma faixa de 310px e o .fill estava
   com overflow visível: ela transbordava 48px e comia a categoria e o
   topo do nome. Ancorar a imagem por inset resolve sem depender de
   height:100% resolver na grade. */
.secao-clara .athlete-card .fill{overflow:hidden;}
.secao-clara .athlete-card .fill .foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Notícias: mesma equalização de altura dos atletas, para a fileira
   terminar alinhada. */
.secao-clara .news-track{align-items:stretch;}
.secao-clara .news-card-wrap{display:flex;}
.secao-clara .news-card{
  width:100%;
  display:flex;
  flex-direction:column;
}
.secao-clara .news-card .body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.secao-clara .news-card .read-more{margin-top:auto;padding-top:14px;}

/* Bento no claro: as quatro peças terminavam em alturas diferentes e a
   grade ficava esfarrapada. Linhas iguais alinham as bordas sem mexer
   no peso de cada peça (ITF continua span 4, as de areia span 3). */
.secao-clara .bento-2027{grid-auto-rows:1fr;}
.secao-clara .bento-peca{
  height:100%;
  display:flex;
  flex-direction:column;
}
.secao-clara .bento-peca .cat-link{margin-top:auto;}

/* As trajetórias de bola foram desenhadas para o fundo escuro, onde o
   laranja é um traço de luz. Sobre o papel viram riscos soltos por cima
   dos cartões — aqui elas ficam bem mais discretas e atrás de tudo. */
.secao-clara .am-trajetoria{opacity:.2;z-index:0;}
.secao-clara .am-trajetoria path{stroke-width:1.1;}
.secao-clara .bento-2027,
.secao-clara .section-head{position:relative;z-index:1;}

/* ============================================================
   ACABAMENTO — achados do detector (22/10)
   ============================================================ */

/* 9,92px e 10,88px em texto funcional: abaixo do piso de 11px,
   ilegível em tela de alta densidade e no celular. */
.modalidade-tag{font-size:.74rem;}          /* era .62rem = 9,92px */
.brand small{font-size:.72rem;}             /* era .68rem = 10,88px */
.match-player-seed,
.match-vs,
.jogos-home-card-vs{font-size:.72rem;}      /* eram .68rem */
.countdown-grid span{font-size:.7rem;}      /* era .65rem */

/* Halo colorido com deslocamento zero é a sombra padrão de
   interface gerada por IA. Profundidade de verdade tem offset e
   cor neutra; o laranja fica na superfície, não na luz. */
.btn-primary,
.btn-primary:hover{
  box-shadow:0 10px 22px -12px rgba(26,26,26,.45);
}
.btn-primary:hover{transform:translateY(-2px);}
.secao-clara .btn-primary{box-shadow:0 10px 24px -14px rgba(7,40,20,.55);}

/* Animar padding causa recálculo de layout a cada quadro. */
.btn,.btn-primary,.btn-outline{transition-property:transform,background-color,border-color,color,box-shadow;}

/* ============================================================
   HERO — legibilidade sobre vídeo, sem voltar a lavar a imagem
   ------------------------------------------------------------
   Ao aliviar o véu, o texto caiu para 1,2:1 (chapéu) e 3,0:1
   (título) contra os quadros do vídeo. Lavar tudo de novo não é
   a saída: a referência resolve isso com BARRA SÓLIDA atrás do
   rótulo e um véu concentrado só na coluna do texto.
   ============================================================ */

/* Véu concentrado: mais forte no miolo, onde o texto pousa;
   as bordas do quadro seguem limpas. */
.hero-banner .hero-slide--video::after,
.hero-banner .hero-slide--photo::after{
  background:
    radial-gradient(54% 44% at 50% 48%, rgba(4,24,12,.86), rgba(4,24,12,.34) 68%, transparent 84%),
    linear-gradient(180deg,
      rgba(4,24,12,.34) 0%,
      rgba(4,24,12,.16) 30%,
      rgba(4,24,12,.62) 80%,
      var(--court-900) 100%);
}

/* O chapéu laranja sobre vídeo claro é o pior caso (1,2:1).
   Vira pílula sólida — mesma solução da barra amarela do site de
   referência. Carvão sobre laranja = 6,06:1. */
.hero-banner .hero-poster-subtitle,
.hero-banner .hero-kicker{
  display:inline-block;
  background:var(--lime);
  color:var(--ink);
  padding:6px 16px;
  border-radius:999px;
  text-shadow:none;
}

/* O título e o apoio ganham sombra: garante leitura em qualquer
   quadro do vídeo, inclusive nos mais claros, sem escurecer a
   imagem inteira. */
.hero-banner .hero-poster-title,
.hero-banner .hero-poster-desc,
.hero-banner .hero-poster-infobar{
  text-shadow:0 2px 14px rgba(4,24,12,.92), 0 1px 3px rgba(4,24,12,.8);
}

/* Os brilhos laranja que sobraram do CSS de 2026. */
.hero-poster-cta .btn-primary,
.countdown-box,
.hero-selo-oficial,
.tv-madeira-play{box-shadow:0 10px 24px -12px rgba(4,24,12,.6);}

/* ============================================================
   HIERARQUIA DE TITULOS
   ------------------------------------------------------------
   Os cartoes vinham com <h4> logo depois do <h2> da secao, e o
   rodape com <h5> — dois niveis pulados. Leitor de tela anuncia
   a estrutura errada. As tags viraram <h3>; estes seletores
   mantêm exatamente a mesma aparência de antes.
   ============================================================ */
.athlete-card .info h3.card-titulo{font-size:1.2rem;margin:6px 0 0;}
.news-card h3.card-titulo{font-size:1.1rem;margin:8px 0;}
.footer-col h3.rodape-titulo{
  font-family:var(--font-head);
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:20px;
  color:var(--white);
}
.secao-clara .athlete-card .info h3.card-titulo{
  color:var(--court-900);
  margin:0;
  line-height:1.25;
}
.secao-clara .news-card h3.card-titulo{color:var(--court-900);}

/* ============================================================
   HERO — painéis sólidos onde o texto pousa
   ------------------------------------------------------------
   A barra de datas e o contador eram vidro translúcido sobre o
   vídeo: em quadro claro davam 1,1:1. Vidro é bonito sobre fundo
   estável; sobre vídeo em movimento ele não garante leitura
   nenhuma. Ficam opacos o bastante para o branco ler em qualquer
   quadro, e o desfoque segue por baixo.
   ============================================================ */
.hero-banner .hero-poster-infobar{
  background:rgba(4,24,12,.88);
  border:1px solid rgba(232,214,185,.16);
}
.hero-banner .countdown-box,
.hero-banner .hero-poster-mini-countdown{
  background:rgba(4,24,12,.88);
  border:1px solid rgba(232,214,185,.16);
}
/* O título do contador herdava o tamanho de h3; como virou h2 para
   corrigir a hierarquia, trava-se o tamanho que já tinha. */
.contador-titulo{
  font-size:1.05rem;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 10px;
}