/* ============================================================
   ABERTO DO MADEIRA 2027 — SISTEMA VISUAL
   ------------------------------------------------------------
   Direção: "Águas que se encontram" (ver .impeccable/surface-home.md).

   Carrega DEPOIS de style.css, tema-2027.css e motion-2027.css,
   e é o último a falar. Não reescreve componente: redefine os
   tokens que os componentes já consomem, e só desce ao seletor
   quando o valor está cravado no CSS de 2026.

   Três leis, e elas explicam cada linha abaixo:

   1. NADA É QUADRADO. Pedra de rio não tem quina.
   2. A LUZ VEM DA MARCA. Sombra cinza suja a superfície; sombra
      tingida de verde acende por baixo dela. E toda peça tem
      1px claro no topo, como sol na quina molhada.
   3. O LARANJA ACENDE, NÃO PINTA. Ele é luz sobre a água — vive
      em aresta, brilho e ação, não em área chapada.
   ============================================================ */

:root{
  /* ---- LEI 1: o arredondamento ----
     Esta é a correção mais importante do rebrand. A base de 2026
     tinha lg:28 / md:18 / sm:12. O tema que escrevi antes CORTOU
     para 18/12/6 — foi isso que deixou o site com cara de caixa.
     Aqui volta, e passa do ponto de origem de propósito: o
     cliente pediu "super arredondado, boleado". Referência
     medida no site do Tênis Clube: cartão 22px. */
  --radius-lg:34px;      /* blocos e cartões grandes */
  --radius-md:24px;      /* peças internas, miniaturas */
  --radius-sm:16px;      /* etiquetas, campos, chips */
  --radius-pill:999px;   /* tudo que é ação ou rótulo curto */

  /* ---- LEI 2: a luz ----
     Sombra em DUAS camadas, como na referência: um contato curto
     e próximo que cola a peça no fundo, e uma difusa e larga que
     a levanta. As duas tingidas de verde-marca. */
  --sombra-1:0 1px 3px rgba(4,24,12,.14), 0 8px 18px -12px rgba(7,40,20,.42);
  --sombra-2:0 2px 6px rgba(4,24,12,.16), 0 18px 38px -20px rgba(7,40,20,.5);
  --sombra-3:0 3px 10px rgba(4,24,12,.18), 0 30px 62px -28px rgba(7,40,20,.58);

  /* a aresta: 1px claro no topo. Some num print, muda tudo na tela. */
  --aresta-clara:inset 0 1px 0 rgba(255,255,255,.75);
  --aresta-escura:inset 0 1px 0 rgba(255,235,205,.14);

  /* o laranja como LUZ, não como tinta */
  --brilho-laranja:0 10px 26px -12px rgba(255,106,0,.55);
  --brilho-cobre:0 10px 26px -12px rgba(197,127,63,.48);
}

/* ============================================================
   SUPERFÍCIES — a peça padrão do sistema
   ------------------------------------------------------------
   Toda peça de conteúdo do site passa a ter a mesma anatomia:
   papel, sem borda dura, sombra em duas camadas, aresta de luz.
   É o que a referência faz e o que eu não estava fazendo —
   lá o cartão não tem borda nenhuma, só sombra.
   ============================================================ */
.secao-clara .news-card,
.secao-clara .jogos-home-card,
.secao-clara .cat-card,
.secao-clara .bento-peca,
.secao-clara .athlete-card,
.secao-clara .estrutura-galeria-item,
.secao-clara .stat-card,
.secao-clara .stat-box,
.secao-clara .map-card,
.secao-clara .timeline-item{
  background:#fff;
  border:0;                                  /* a borda some: quem separa é a sombra */
  border-radius:var(--radius-lg);
  box-shadow:var(--sombra-2), var(--aresta-clara);
  overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1);
}

/* O gesto de hover: a peça sobe e a luz cresce por baixo dela.
   Sem mudar cor, sem borda piscando. */
.secao-clara .news-card:hover,
.secao-clara .jogos-home-card:hover,
.secao-clara .cat-card:hover,
.secao-clara .bento-peca:hover,
.secao-clara .athlete-card:hover,
.secao-clara .estrutura-galeria-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-3), var(--aresta-clara);
}

/* No escuro a mesma anatomia, com a aresta invertida: a luz que
   no papel vem de cima aqui vem do cobre. */
.jogos-home-card,
.news-card,
.cat-card,
.bento-peca,
.athlete-card,
.estrutura-galeria-item,
.stat-card,
.tv-transmissao-card,
.tv-quadro,
.tv-prog,
.tv-ep{
  border-radius:var(--radius-lg);
  box-shadow:var(--sombra-2), var(--aresta-escura);
}

/* ============================================================
   AÇÕES — pílula, sempre
   ============================================================ */
.btn,
.btn-primary,
.btn-outline,
.tv-btn,
.tv-pill,
.read-more,
.cat-link{
  border-radius:var(--radius-pill);
}

.btn{
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s cubic-bezier(.22,1,.36,1),
             background-color .3s ease, color .3s ease;
}

/* O primário carrega a luz da própria cor: é o que faz um botão
   laranja parecer aceso em vez de pintado. O texto é carvão —
   branco sobre laranja dá 2,87:1 e reprova. */
.btn-primary{
  background:linear-gradient(168deg,#FF8128,var(--lime));
  color:var(--ink);
  box-shadow:var(--brilho-laranja), var(--aresta-clara);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(255,106,0,.68), var(--aresta-clara);
}
.btn-primary:active{transform:translateY(0);}

.btn-outline{
  border-width:1.5px;
  box-shadow:var(--aresta-escura);
}
.btn-outline:hover{transform:translateY(-2px);}

.secao-clara .btn-primary{
  background:linear-gradient(168deg,#0E4A24,var(--court-900));
  color:var(--sand);
  box-shadow:0 10px 26px -12px rgba(7,40,20,.55), var(--aresta-escura);
}
.secao-clara .btn-primary:hover{
  box-shadow:0 16px 34px -12px rgba(7,40,20,.62), var(--aresta-escura);
}

/* ============================================================
   ÍCONES — círculo, nunca quadrado arredondado
   ============================================================ */
.cat-icon,
.hero-poster-infobar .ic,
.hero-meta .ic,
.atalho .ic,
.tv-prog-cor,
.footer-social a,
.whatsapp-float,
.back-to-top,
.scroll-to-bottom,
.athletes-arrow,
.news-arrow,
.jogos-home-arrow,
.tv-btn--pular{
  border-radius:50%;
}
.cat-icon{
  background:linear-gradient(160deg, rgba(255,106,0,.22), rgba(197,127,63,.1));
  box-shadow:var(--aresta-escura);
}
.secao-clara .cat-icon{
  background:linear-gradient(160deg, rgba(255,106,0,.14), rgba(197,127,63,.08));
  box-shadow:var(--brilho-cobre), var(--aresta-clara);
}

/* ============================================================
   RÓTULOS — o chapéu vira pílula com luz
   ============================================================ */
.eyebrow,
.eyebrow--ghost,
.modalidade-tag,
.cat-tag,
.match-status,
.tv-chapeu,
.tv-meta,
.news-card .date,
.athlete-card .info .meta span{
  border-radius:var(--radius-pill);
}
.eyebrow{
  padding:7px 16px;
  box-shadow:var(--aresta-escura);
}
.secao-clara .eyebrow{
  background:rgba(158,66,0,.07);
  border-color:rgba(158,66,0,.26);
  box-shadow:var(--aresta-clara);
}

/* ============================================================
   IMAGENS DENTRO DE PEÇA
   A foto herda o raio do cartão no canto que encosta na borda.
   Sem isto, um cartão rolado com foto quadrada por dentro fica
   com um canto reto saltando — o detalhe que denuncia amadorismo.
   ============================================================ */
.news-card .thumb,
.athlete-card .fill,
.estrutura-galeria-item img,
.cat-card img,
.bento-peca img,
.tv-ep-capa{
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;
}
.secao-clara .athlete-card .fill{border-radius:var(--radius-lg) var(--radius-lg) 0 0;}

/* peça redonda por inteiro quando a imagem é a peça */
.estrutura-galeria-item,
.estrutura-galeria-item img{border-radius:var(--radius-lg);}

/* ============================================================
   CAMPOS DE FORMULÁRIO
   ============================================================ */
.field input,
.field select,
.field textarea,
.form-row input,
.form-row select{
  border-radius:var(--radius-sm);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--lime);
  box-shadow:0 0 0 4px rgba(255,106,0,.16);
}
.form-msg{border-radius:var(--radius-md);}

/* ============================================================
   NAVEGAÇÃO E RODAPÉ
   ============================================================ */
.nav-desktop a{border-radius:var(--radius-pill);}
.site-header.is-scrolled{
  box-shadow:0 1px 0 rgba(197,127,63,.18), 0 12px 30px -22px rgba(4,24,12,.8);
}
.lang-switch,
.lang-switch a,
.lang-switch button{border-radius:var(--radius-pill);}

/* O rodapé fecha com a mesma curva com que a página abre. */
.site-footer{
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
  box-shadow:0 -1px 0 rgba(197,127,63,.16);
}

/* ============================================================
   TV — as peças do canal entram no sistema
   ============================================================ */
.tv-player-cx,
.tv-quadro,
.tv-noar-card,
.tv-faixa,
.tv-prog,
.tv-ep,
.tv-short,
.tv-grade{
  border-radius:var(--radius-lg);
}
.tv-dia{border-radius:var(--radius-pill);}
.tv-faixa{
  box-shadow:var(--sombra-1), var(--aresta-escura);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.tv-faixa:hover{transform:translateX(4px);}
.secao-clara .tv-faixa{
  background:#fff;
  border:0;
  box-shadow:var(--sombra-1), var(--aresta-clara);
}
.tv-faixa.is-agora{
  box-shadow:var(--brilho-laranja), var(--aresta-escura);
}

/* ============================================================
   CARROSSÉIS E PAGINAÇÃO
   ============================================================ */
.athletes-dots span,
.news-dots span,
.jogos-home-dots span,
.hero-slide-dots button{
  border-radius:var(--radius-pill);
  transition:width .35s cubic-bezier(.22,1,.36,1), background-color .3s ease;
}

/* ============================================================
   FAIXAS — a transição entre claro e escuro vira curva de água
   ------------------------------------------------------------
   Faixa clara emendando com faixa escura num corte reto é a
   emenda que mais entrega "site montado em blocos". Aqui a
   emenda é uma curva, como margem de rio.
   ============================================================ */
.secao-clara{
  position:relative;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.secao-clara + .secao-clara{border-radius:0;}

/* ============================================================
   FOCO VISÍVEL — a luz da marca também serve de anel de foco
   ============================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

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

/* ============================================================
   ILHA ESCURA DENTRO DE FAIXA CLARA
   ------------------------------------------------------------
   Os tokens de .secao-clara partem do princípio de que tudo lá
   dentro pousa em papel. Qualquer peça que se pinte de escuro
   quebra essa premissa e herda texto escuro sobre fundo escuro.
   Foi o que aconteceu na faixa "no ar" da grade da TV:
   cinza #44433E sobre verde #072814 = 1,53:1.

   A regra geral: quem pinta o próprio fundo de escuro declara
   .sobre-escuro e recupera os tokens da noite.
   ============================================================ */
.secao-clara .sobre-escuro,
.secao-clara .tv-faixa.is-agora,
.secao-clara .tv-noar-card,
.secao-clara .tv-prog,
.secao-clara .cat-card.has-imagem{
  --lime:#FF6A00;
  --sky:#DDA268;
  --gold:#DDA268;
  --muted:#9FBAA7;
  --white:#ffffff;
  color:var(--sand);
}
.secao-clara .sobre-escuro *,
.secao-clara .tv-faixa.is-agora *,
.secao-clara .tv-noar-card *{
  color:inherit;
}
.secao-clara .tv-faixa.is-agora .tv-faixa-txt strong{color:var(--sand);}
.secao-clara .tv-faixa.is-agora .tv-faixa-hora,
.secao-clara .tv-faixa.is-agora .tv-faixa-txt span{color:#9FBAA7;}
.secao-clara .tv-faixa.is-agora em{color:#DDA268;}
/* a etiqueta "No ar" é laranja sólido: texto carvão, nunca branco
   (branco sobre laranja dá 2,87:1) */
.secao-clara .tv-faixa-agora,
.tv-faixa-agora{
  background:var(--am-laranja,#FF6A00);
  color:#1A1A1A !important;
}

/* ============================================================
   TEXTO FUNCIONAL ABAIXO DO PISO (TV)
   11px é o chão de legibilidade. Abaixo disso some em tela densa
   e no celular, por mais bonito que seja o rótulo.
   ============================================================ */
.tv-noar-rotulo{font-size:.76rem;}   /* era 9,6px  */
.tv-dia{font-size:.78rem;}           /* era 10,88px */
.tv-dia em,
.tv-dia small{font-size:.72rem;}     /* era 8,64px  */
.tv-faixa-agora{font-size:.74rem;}   /* era 9,28px  */
.tv-ep-dur,.tv-meta,.tv-chapeu{font-size:.76rem;}

/* ============================================================
   O BRILHO COLORIDO É DE SUPERFÍCIE CLARA
   ------------------------------------------------------------
   A referência usa sombra na cor do botão — mas o botão dela
   pousa em BRANCO, e aí a cor lê como calor. Sobre quase-preto a
   mesma sombra vira halo neon, que é o vício de interface gerada
   por IA (o detector pegou 15 ocorrências).

   Então: no claro o laranja acende por baixo; no escuro quem
   levanta a peça é profundidade neutra mais a aresta de luz.
   ============================================================ */
.btn-primary,
.hero-banner .btn-primary,
.tv-faixa.is-agora,
.hero-poster-subtitle,
.hero-kicker{
  box-shadow:0 10px 24px -14px rgba(4,24,12,.7), var(--aresta-escura);
}
.secao-clara .btn-primary{
  box-shadow:0 10px 26px -12px rgba(7,40,20,.5), var(--aresta-escura);
}
/* o brilho laranja fica só onde a peça laranja pousa em papel */
.secao-clara .cat-icon,
.secao-clara .atalho .ic,
.secao-clara .btn-primary.btn-laranja{
  box-shadow:var(--brilho-laranja), var(--aresta-clara);
}
.hero-banner .btn-primary:hover{
  box-shadow:0 16px 32px -14px rgba(4,24,12,.8), var(--aresta-escura);
}

/* Borda de 1px somada a sombra muito difusa é a assinatura visual
   de template gerado. Quem tem a sombra em camadas não tem borda. */
.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,
.secao-clara .stat-box{
  border:0 !important;
}

/* ============================================================
   OS ÚLTIMOS HALOS
   ------------------------------------------------------------
   Sombra colorida de deslocamento zero sobre fundo escuro é a
   assinatura de interface gerada por IA. Caça aos que restaram.
   ============================================================ */

/* O fio de cobre que separa cabeçalho e rodapé do conteúdo é uma
   RÉGUA, não uma sombra. Expressa como borda, ele diz o que é e
   para de ser lido como brilho. */
.site-header.is-scrolled{
  box-shadow:0 12px 30px -22px rgba(4,24,12,.85);
  border-bottom:1px solid rgba(197,127,63,.2);
}
.site-footer{
  box-shadow:none;
  border-top:1px solid rgba(197,127,63,.18);
}

/* A marca no cabeçalho não precisa brilhar para existir. */
.brand-badge{
  box-shadow:0 8px 20px -8px rgba(4,24,12,.7), var(--aresta-escura);
}

/* Ponto vivo pulsante: além de ser um tique visual conhecido, ele
   anunciava movimento num aviso que diz "encerradas". Fica o
   ponto, sai a pulsação. */
.dot,
.tv-ponto-vivo{
  animation:none !important;
  box-shadow:0 0 0 3px rgba(255,106,0,.18);
}

/* O ponto do aviso de inscrições: a regra tem especificidade
   .inscricoes-badge-big .dot, então a correção precisa casar.
   E o vermelho fora de paleta vira o laranja da marca — o aviso
   continua lendo como aviso sem introduzir uma sexta cor. */
.inscricoes-badge-big{
  background:rgba(255,106,0,.1);
  border-color:rgba(255,106,0,.42);
}
.inscricoes-badge-big .dot{
  background:var(--am-laranja,#FF6A00);
  box-shadow:0 0 0 3px rgba(255,106,0,.2);
  animation:none;
}

/* ============================================================
   PISO DE LEGIBILIDADE — 11,5px
   ------------------------------------------------------------
   Texto funcional (rótulo, etiqueta, hora, assinatura) abaixo de
   11px falha em tela de alta densidade e no celular. A página de
   programação tinha 206 ocorrências, quase todas vindas de UMA
   regra: .match-time-label a 9,6px, repetida em 113 jogos.

   Aqui o piso é 11,5px (.72rem). Rótulo em caixa alta com
   espacejamento continua sendo estilo — só para de ser ilegível.
   ============================================================ */
.match-time-label,
.match-player-seed,
.match-vs,
.match-category,
.match-round,
.modalidade-tag,
.countdown-grid span,
.brand small,
.jogos-home-card-time-label,
.jogos-home-card-cat,
.jogos-home-card-vs,
.tv-chapeu,
.tv-meta,
.tv-ep-dur,
.tv-ep-chapeu,
.tv-noar-rotulo,
.tv-noar-hora,
.tv-dia,
.tv-faixa-agora,
.tv-prog-txt span,
.tv-short-txt span{
  font-size:.74rem;   /* 11,84px */
}
/* os que eram ainda menores sobem um pouco mais, para a diferença
   de hierarquia entre eles não sumir junto */
.tv-dia em,
.tv-dia small,
.tv-ep-novo{
  font-size:.72rem;   /* 11,52px */
}

/* O ícone de categoria resistia em 18px: a regra de origem tem
   especificidade maior que a lista geral de círculos. */
.cat-card .cat-icon,
.bento-peca .cat-icon,
.secao-clara .cat-card .cat-icon{
  border-radius:50%;
  border:0;
}

/* ============================================================
   RITMO DEFINIDO PELO CLIENTE (22/10)
   atletas, categorias e estrutura no escuro; TV no claro.
   ============================================================ */

/* ---- ATLETA: a anatomia sai de dentro da faixa clara ----
   A ficha "foto em cima, texto embaixo" estava presa a
   .secao-clara. Com atletas voltando ao escuro, o cartão caía no
   layout antigo — degradê preto POR CIMA da foto, que foi a
   primeira reclamação do cliente. A anatomia agora vale sempre;
   o que muda entre claro e escuro é só a superfície. */
.athlete-card{
  height:auto;
  display:grid;
  grid-template-rows:310px 1fr;
  overflow:hidden;
}
.athlete-card .fill,
.athlete-card.has-foto .fill{
  position:relative;
  inset:auto;
  height:310px;
  opacity:1;
  overflow:hidden;
}
.athlete-card .fill .foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.athlete-card .info,
.athlete-card.has-foto .info{
  position:static;
  padding:20px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.athlete-card .info h3.card-titulo{margin:0; line-height:1.25;}
.athlete-card .info .meta{margin-top:auto; padding-top:12px;}
.athletes-track{align-items:stretch;}
.athlete-card-wrap{display:flex;}
.athlete-card{width:100%;}

/* a superfície, aí sim, depende da faixa */
.athlete-card,
.athlete-card.has-foto .info,
.athlete-card .info{
  background:linear-gradient(170deg,var(--court-800),var(--court-900));
}
.athlete-card .info h3.card-titulo{color:var(--sand);}
.athlete-card .info .meta span{
  color:var(--cobre-claro,#DDA268);
  background:rgba(197,127,63,.14);
  border:1px solid rgba(197,127,63,.3);
}
.secao-clara .athlete-card,
.secao-clara .athlete-card.has-foto .info,
.secao-clara .athlete-card .info{background:#fff;}
.secao-clara .athlete-card .info h3.card-titulo{color:var(--court-900);}
.secao-clara .athlete-card .info .meta span{
  color:var(--cobre-txt);
  background:rgba(197,127,63,.1);
  border-color:rgba(197,127,63,.32);
}

/* ---- TV NA FAIXA CLARA ----
   Os 5 logos de emissora são PNG 100% brancos: num cartão claro
   eles simplesmente somem. Então a faixa fica clara e os cartões
   de transmissão seguem escuros — ilha escura, que de quebra dá
   profundidade à seção. */
.secao-clara .tv-madeira-frase{color:var(--court-900);}
.secao-clara .tv-madeira-paragrafo{color:#53514B;}
.secao-clara .tv-madeira-video,
.secao-clara .tv-video-proprio,
.secao-clara .tv-madeira-placeholder{
  border-radius:var(--radius-lg);
  box-shadow:var(--sombra-3), var(--aresta-clara);
  overflow:hidden;
}
.secao-clara .tv-madeira-play{
  background:var(--am-laranja,#FF6A00);
  color:var(--ink);
  box-shadow:var(--brilho-laranja), var(--aresta-clara);
}
.secao-clara .tv-transmissao-card{
  --lime:#FF6A00; --sky:#DDA268; --gold:#DDA268;
  --muted:#9FBAA7; --white:#ffffff;
  background:linear-gradient(170deg,var(--court-800),var(--court-900));
  border:0;
  color:var(--sand);
  box-shadow:var(--sombra-3), var(--aresta-escura);
}
.secao-clara .tv-transmissao-card *{color:inherit;}
.secao-clara .tv-transmissao-titulo{color:var(--am-laranja,#FF6A00) !important;}
.secao-clara .tv-transmissao-logo img{filter:none;}

/* ---- CATEGORIAS E ESTRUTURA NO ESCURO ----
   O bento já nasceu escuro; o que precisa voltar é a superfície
   de cartão, que o sistema só dava no claro. */
.bento-peca,
.cat-card{
  background:linear-gradient(170deg,var(--court-800),var(--court-900));
  border:0;
  box-shadow:var(--sombra-2), var(--aresta-escura);
}
.bento-peca:hover,
.cat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-3), var(--aresta-escura);
}
.estrutura-galeria-item{
  box-shadow:var(--sombra-2), var(--aresta-escura);
}

/* As trajetórias de bola foram desenhadas para o escuro: lá elas
   voltam ao peso cheio. */
.section-dyn:not(.secao-clara) .am-trajetoria{opacity:1;}

/* ============================================================
   DOIS AJUSTES MEDIDOS APÓS A TROCA DE RITMO
   ============================================================ */

/* 1. SOMBRA SOBRE O ESCURO
   `--sombra-2` tem o verde da marca na segunda camada. Sobre uma
   faixa clara isso aquece a peça; sobre o verde escuro é verde
   sobre verde — quase não trabalha, e ainda lê como halo colorido.
   No escuro quem separa é profundidade quase preta. */
.section-dyn:not(.secao-clara) .bento-peca,
.section-dyn:not(.secao-clara) .cat-card,
.section-dyn:not(.secao-clara) .athlete-card,
.section-dyn:not(.secao-clara) .estrutura-galeria-item,
.section-dyn:not(.secao-clara) .jogos-home-card,
.section-dyn:not(.secao-clara) .news-card,
.secao-clara .tv-transmissao-card,
.tv-transmissao-card{
  box-shadow:0 2px 6px rgba(0,0,0,.3), 0 20px 40px -22px rgba(0,0,0,.62),
             var(--aresta-escura);
}
.section-dyn:not(.secao-clara) .bento-peca:hover,
.section-dyn:not(.secao-clara) .cat-card:hover,
.section-dyn:not(.secao-clara) .athlete-card:hover{
  box-shadow:0 3px 10px rgba(0,0,0,.34), 0 32px 60px -26px rgba(0,0,0,.7),
             var(--aresta-escura);
}

/* 2. RITMO DO TÍTULO NO CARTÃO
   O nome do atleta ficava a 20px da foto e a 75px das etiquetas:
   o `margin-top:auto` que alinhava as etiquetas na base jogava
   toda a folga entre nome e etiquetas, e aí o nome lia como
   legenda da FOTO, não como título da ficha.
   A folga vai para depois das etiquetas; os cartões continuam
   terminando na mesma altura porque quem equaliza é o stretch. */
.athlete-card .info{
  padding-top:26px;
  justify-content:flex-start;
}
.athlete-card .info .meta{
  margin-top:14px;
  padding-top:0;
}