/* ==========================================================================
   base.css — compartilhado por todos os modelos e por todas as internas.

   As cores NÃO ficam aqui: vêm das variáveis que o layout base injeta a
   partir do tema do cliente. Aqui só forma, espaço e componente.

   A tipografia é escala, não tamanho solto: os modelos trocam --fonte,
   --fonte-titulo e --escala, e todo o resto se recalcula junto. É isso que
   dá personalidade a cada modelo sem duplicar CSS.
   ========================================================================== */

:root{
  /* Escala tipográfica modular. --escala é o passo entre um degrau e o
     seguinte; modelo denso usa passo menor, modelo comercial usa maior. */
  --escala: 1.22;
  --fs-base: 1.0625rem;                                          /* 17px */
  --fs-0:  var(--fs-base);
  --fs--1: calc(var(--fs-base) / var(--escala));                 /* apoio   */
  --fs--2: calc(var(--fs-base) / var(--escala) / var(--escala)); /* legenda */
  --fs-1:  calc(var(--fs-base) * var(--escala));
  --fs-2:  calc(var(--fs-1) * var(--escala));
  --fs-3:  calc(var(--fs-2) * var(--escala));
  --fs-4:  calc(var(--fs-3) * var(--escala));

  /* Ritmo vertical. Uma medida só, usada em múltiplos, evita o
     espaçamento aleatório que aparece quando cada seção inventa o seu. */
  --sec-y: clamp(56px, 7vw, 96px);

  --fonte-titulo: var(--fonte);
  --peso-titulo: 700;
  --tracking-titulo: -.4px;

  --linha: rgba(15,23,42,.10);
  --texto-2: #5a6270;   /* apoio sobre fundo claro */
  --texto-3: #6b7280;   /* legenda sobre fundo claro */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:var(--fs-0);
  line-height:1.65;
  color:var(--c-texto);
  background:var(--c-branco);
  -webkit-font-smoothing:antialiased;
  /* Nenhum modelo pode gerar rolagem lateral: a home é a página mais
     acessada pelo celular e o overflow some com o layout inteiro. */
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--fonte-titulo);
  font-weight:var(--peso-titulo);
  letter-spacing:var(--tracking-titulo);
  line-height:1.15;
  text-wrap:balance;
}
h1{font-size:var(--fs-4)}
h2{font-size:var(--fs-3)}
h3{font-size:var(--fs-1)}
h4{font-size:var(--fs-0)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* Foco sempre visível — teclado é o único caminho para quem não usa mouse. */
:focus-visible{outline:3px solid var(--c-marca);outline-offset:2px;border-radius:2px}

.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.sec{padding:var(--sec-y) 0}
.sec--claro{background:var(--c-claro)}
.sec--escuro{background:var(--c-escuro);color:var(--c-texto-inv)}
.sec--escuro h2,.sec--escuro h3,.sec--escuro h4{color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Pular para o conteúdo: some da tela, aparece no primeiro Tab. */
.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--c-marca);color:var(--c-marca-sobre,#fff);padding:12px 20px;font-weight:700;border-radius:0 0 6px 0}
.pular:focus{left:0}

/* A marca tem DUAS variáveis com papéis diferentes: --c-marca preenche
   (fundo de botão, faixa, borda) e --c-marca-txt escreve (mesma cor,
   escurecida no layout base até passar 4.5:1 sobre fundo claro). Trocar
   uma pela outra reintroduz o texto laranja de 3:1 sobre branco. */

/* -------------------------------------------------------------- Tipografia */
.eyebrow{font-size:var(--fs--2);font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--c-marca-txt);margin:0 0 12px;line-height:1.3}
.titulo{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 16px;max-width:22ch}
.intro{font-size:var(--fs-1);line-height:1.6;max-width:62ch;color:var(--texto-2)}
.sec--escuro .intro{color:var(--c-texto-inv)}
.nota{font-size:var(--fs--1);color:var(--texto-3);margin-top:20px;max-width:72ch}
.cabecalho-sec{margin-bottom:clamp(28px,4vw,44px)}

/* ==========================================================================
   REGRA DE COR SOBRE A MARCA
   --------------------------------------------------------------------------
   Onde o fundo é --c-marca, o texto é --c-marca-sobre, nunca #fff chapado.

   --c-marca só garante 3:1 contra branco, que é o mínimo para PREENCHIMENTO
   (botão, faixa, borda). Texto pequeno precisa de 4.5:1, e a laranja real
   de um cliente dava 3.23:1 — reprovava AA em todo botão primário do site.

   --c-marca-sobre escolhe entre branco e escuro o que tiver mais contraste
   contra a marca. Como r(branco) × r(preto) = 21 para qualquer cor, o melhor
   dos dois nunca fica abaixo de 4.58:1.
   ========================================================================== */

/* ------------------------------------------------------------------ Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--raio);
  font-family:var(--fonte);font-size:var(--fs--1);font-weight:700;letter-spacing:.3px;
  line-height:1.2;border:2px solid transparent;transition:.18s ease;cursor:pointer;
  text-align:center;min-height:48px;   /* alvo de toque confortável no celular */
}
/* Preenchimento com texto branco por cima é TEXTO: precisa de 4.5:1, não
   dos 3:1 que bastam para uma borda. Por isso o botão primário usa a
   variante escurecida — com a laranja real do cliente (#eb6723) o branco
   ficava em 3.2:1. */
.btn--primario{background:var(--c-marca-txt);color:#fff}
.btn--primario:hover{filter:brightness(1.08)}
.btn--escuro{background:var(--c-escuro);color:#fff}
.btn--escuro:hover{filter:brightness(1.3)}
.btn--fantasma{border-color:rgba(255,255,255,.55);color:#fff}
.btn--fantasma:hover{background:rgba(255,255,255,.14)}
.btn--linha{border-color:var(--c-marca);color:var(--c-marca-txt)}
.btn--linha:hover{background:var(--c-marca);color:var(--c-marca-sobre,#fff)}
.btn--bloco{width:100%}

/* ================================================================== TOPO == */
/* --c-topo, e não --c-topbar: o tema do cliente entra como matiz numa
   superfície escura derivada, e não como cor chapada. Cor de marca
   saturada ocupando uma faixa inteira lê como erro, não como identidade —
   e o texto branco em cima depende da sorte da cor escolhida. A marca
   volta como acento (o filete abaixo). */
.topbar{background:var(--c-topo);color:#fff;font-size:var(--fs--2);border-bottom:3px solid var(--c-marca)}
.topbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:6px 22px;min-height:42px;flex-wrap:wrap}
.topbar a,.topbar span{display:inline-flex;align-items:center;gap:7px;letter-spacing:.6px;font-weight:600}
.topbar a{opacity:.9;padding:6px 0}
.topbar a:hover{opacity:1;color:var(--c-marca)}
.topbar .contato{margin-right:auto;display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;opacity:.92}

/* ------------------------------------------------------- Faixa com a logo */
.logo-bar{background:var(--c-branco);border-bottom:1px solid var(--linha)}
.logo-bar .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,32px);min-height:96px;flex-wrap:wrap;padding-block:12px}
.logo-bar .marca{display:flex;align-items:center;gap:14px;min-width:0}
.logo-bar img{max-height:66px;width:auto;object-fit:contain}
.logo-bar .marca strong{font-family:var(--fonte-titulo);font-size:var(--fs-1);line-height:1.2;max-width:22ch}
.logo-bar .apoio{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.logo-bar .apoio a:not(.btn){font-size:var(--fs--1);font-weight:600}
.logo-bar .apoio a:not(.btn):hover{color:var(--c-marca-txt)}

/* ------------------------------------------------- Busca interna (cabeçalho)
   A barra "Faça a sua busca…". Empurrada para a direita (margin-left:auto),
   levando o grupo de atalhos junto. HTML puro: <form method="get"> sem uma
   linha de JavaScript. */
.busca-topo{margin-left:auto;display:flex;align-items:stretch;min-width:0;
  border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  background:var(--c-branco)}
.busca-topo:focus-within{border-color:var(--c-marca);box-shadow:0 0 0 2px color-mix(in srgb,var(--c-marca) 30%,transparent)}
.busca-topo input{border:0;outline:0;background:transparent;padding:9px 12px;
  font:inherit;font-size:var(--fs--1);color:var(--c-texto);width:clamp(120px,16vw,220px);min-width:0}
.busca-topo input::placeholder{color:var(--texto-2)}
.busca-topo button{border:0;cursor:pointer;background:var(--c-marca);color:var(--c-marca-sobre,#fff);
  padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
.busca-topo button:hover{filter:brightness(.94)}

/* ---------------------------------------------------- Busca (página de resultados) */
.busca-pagina{margin:0 0 28px}
.busca-rotulo{display:block;font-weight:700;margin-bottom:8px}
.busca-linha{display:flex;gap:10px;flex-wrap:wrap}
.busca-linha input{flex:1 1 260px;min-width:0;padding:12px 14px;font:inherit;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--c-branco);color:var(--c-texto)}
.busca-linha input:focus{outline:0;border-color:var(--c-marca);box-shadow:0 0 0 2px color-mix(in srgb,var(--c-marca) 30%,transparent)}
.busca-linha .btn{display:inline-flex;align-items:center;gap:8px}
.busca-resumo{color:var(--texto-2);margin:0 0 20px}
.busca-grupo{margin:0 0 30px}
.busca-grupo > h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-1);
  padding-bottom:8px;border-bottom:2px solid var(--c-marca);margin:0 0 14px}
.busca-conta{font-size:var(--fs--1);font-weight:600;color:var(--c-marca-sobre,#fff);
  background:var(--c-marca);border-radius:999px;padding:1px 10px;line-height:1.6}
.busca-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.busca-lista li{padding-bottom:16px;border-bottom:1px solid var(--linha)}
.busca-lista li:last-child{border-bottom:0;padding-bottom:0}
.busca-titulo{font-family:var(--fonte-titulo);font-weight:700;font-size:var(--fs-1);color:var(--c-marca-txt)}
.busca-titulo:hover{text-decoration:underline}
.busca-trecho{margin:5px 0 0;color:var(--texto-2);line-height:1.55;max-width:80ch}
.busca-trecho mark{background:color-mix(in srgb,var(--c-marca) 26%,transparent);
  color:inherit;padding:0 2px;border-radius:3px;font-weight:600}
.busca-mais{margin:12px 0 0;font-size:var(--fs--1);color:var(--texto-2);font-style:italic}

/* ================================================== Menu principal (nav) ==
   Dropdown 100% CSS. :hover cobre o mouse, :focus-within cobre o teclado —
   sem JS, porque menu é conteúdo indexável e precisa existir no HTML. */
.nav{background:var(--c-nav);position:relative;z-index:40}
.nav .wrap{display:flex;align-items:center;justify-content:center}
.nav-lista{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%}
.nav-item{position:relative}
/* Item de menu sem destino, que só abre submenu.
   É um <button> (ver menu-item.blade.php: com <span> o submenu não abria
   por teclado nem no iPad), então precisa perder toda a aparência de
   botão de formulário e ficar igual aos links vizinhos.
   O cursor é ponteiro, e não default: ele ABRE alguma coisa, e fingir que
   não é clicável foi o que escondeu o problema por tanto tempo. */
.nav-item > .nav-rotulo{
  display:flex;align-items:center;gap:7px;
  color:var(--c-nav-txt);font-size:var(--fs--1);font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;padding:18px 15px;min-height:56px;line-height:1.2;
  border:0;border-bottom:3px solid transparent;cursor:pointer;
  background:none;font-family:inherit;text-align:left;
}
.nav-item:focus-within > .nav-rotulo,.nav-item:hover > .nav-rotulo{color:var(--c-nav-acento,var(--c-marca))}
.nav-item.tem-filhos > .nav-rotulo::after{
  content:"";width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.7;
}

/* .nav-lista > .nav-item, e nao .nav-item: os itens DENTRO do submenu
   tambem sao .nav-item, entao estas regras de barra de topo caiam sobre
   eles. O submenu herdava min-height 56px, caixa-alta e espacamento de
   barra -- era isso que fazia o painel parecer uma lista solta e vazia,
   com 56px de altura para uma palavra de 15px. */
.nav-lista > .nav-item > a{
  display:flex;align-items:center;gap:7px;
  color:var(--c-nav-txt);font-size:var(--fs--1);font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;padding:18px 15px;min-height:56px;line-height:1.2;
  border-bottom:3px solid transparent;transition:.15s ease;
}
/* --c-nav-acento, e não --c-marca: quando o fundo do menu É a cor da
   marca, o item sumia justamente ao passar o mouse. O acento é a marca
   ajustada até passar 4.5:1 contra o fundo do próprio menu. */
.nav-lista > .nav-item > a:hover,.nav-lista > .nav-item:focus-within > a{color:var(--c-nav-acento,var(--c-marca-txt));border-bottom-color:var(--c-nav-acento,var(--c-marca))}
.nav-lista > .nav-item.tem-filhos > a::after{
  content:"";width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.7;
}

/* Teto de altura no painel.
   O submenu de "Competições" media 1072px, com 376px abaixo da dobra e sem
   como rolar: os últimos itens simplesmente não existiam para quem usasse
   uma tela de notebook. */
.submenu{
  max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain;
  position:absolute;top:100%;left:0;min-width:264px;max-width:340px;
  background:var(--c-branco);border:1px solid var(--linha);
  border-top:3px solid var(--c-marca);
  /* Cantos de baixo mais generosos que o --raio do modelo: o painel e uma
     superficie flutuante, nao um campo de formulario. */
  border-radius:0 0 12px 12px;
  /* Duas sombras: uma curta que assenta a borda e uma longa e suave que da
     a distancia. Uma sombra so, grande, deixa o painel com aspecto de
     adesivo colado na pagina. */
  box-shadow:0 2px 6px rgba(10,20,38,.07), 0 18px 44px rgba(10,20,38,.19);
  padding:7px;
  /* visibility (e não display) para a transição existir e o item continuar
     acessível pelo Tab assim que o pai recebe foco. */
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;
}
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu{opacity:1;visibility:visible;transform:none}
/* Linha do submenu: alta o bastante para o dedo (40px), baixa o bastante
   para a lista se ler como bloco. A barra da esquerda cresce no hover em
   vez de aparecer do nada -- movimento curto, sem deslocar o texto. */
.submenu a{
  display:flex;align-items:center;min-height:40px;
  padding:9px 12px 9px 14px;border-radius:7px;
  font-size:var(--fs--1);font-weight:500;color:var(--c-texto);
  line-height:1.3;text-transform:none;letter-spacing:0;
  position:relative;transition:background .13s ease,color .13s ease;
}
.submenu a::before{
  content:"";position:absolute;left:4px;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:2px;background:var(--c-marca);
  transition:height .16s ease;
}
.submenu a:hover,.submenu a:focus-visible{
  background:var(--c-claro);color:var(--c-marca-txt);
}
.submenu a:hover::before,.submenu a:focus-visible::before{height:18px}
.submenu a:focus-visible{outline:2px solid var(--c-marca);outline-offset:-2px}
/* O terceiro nível NÃO voa para o lado: fica aninhado e indentado dentro
   do próprio painel. Um flyout lateral escaparia da tela em qualquer item
   à direita do meio do menu — e não há CSS que saiba onde o item está. */
.submenu .submenu{
  position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;border:0;border-left:2px solid var(--linha);border-radius:0;
  background:transparent;min-width:0;max-width:none;
  padding:2px 0 4px;margin:2px 0 6px 20px;
}
/* Terceiro nivel: menor e mais claro, mas na MESMA caixa do segundo.
   Estava em caixa-alta por herdar a regra da barra de topo, o que fazia o
   filho gritar mais que o pai. */
.submenu .submenu a{
  min-height:34px;padding:6px 12px;font-size:var(--fs--2);
  color:var(--texto-2);font-weight:500;
}
.submenu .submenu a::before{left:0}
.submenu .nav-item.tem-filhos > a::after{display:none}

/* Item do submenu que so abre outro nivel: rotulo de grupo, nao linha
   clicavel. Sem isso ele finge ser link e nao leva a lugar nenhum. */
/* A setinha de "tem filhos" é da BARRA DE TOPO, onde o rótulo é flex e ela
   fica ao lado do texto. Dentro do painel o rótulo é block: a seta perdia o
   alinhamento e sobrava como um risco colado na palavra. E ali ela não
   significa nada — o rótulo do grupo não é clicável e os filhos já estão
   listados logo abaixo. */
.submenu .nav-item.tem-filhos > .nav-rotulo::after{content:none}

.submenu .nav-rotulo{
  display:block;width:100%;padding:10px 12px 4px;border:0;background:none;
  font-family:inherit;text-align:left;cursor:default;
  font-size:var(--fs--2);font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--texto-3);
}

/* Os últimos itens do menu abrem o painel alinhado pela direita, senão ele
   escapa da borda e cria rolagem lateral no notebook. */
.nav-lista > .nav-item:nth-last-child(-n+3) > .submenu{left:auto;right:0}

/* Botão do menu no celular: <details>, não JS. */
.nav-toggle{display:none}
.nav-toggle > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:0 4px;
  color:var(--c-nav-txt);font-size:var(--fs--1);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
}
.nav-toggle > summary::-webkit-details-marker{display:none}
.nav-toggle > summary .barras{width:24px;height:2px;background:currentColor;position:relative;flex:none}
.nav-toggle > summary .barras::before,
.nav-toggle > summary .barras::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor}
.nav-toggle > summary .barras::before{top:-8px}
.nav-toggle > summary .barras::after{top:8px}

/* -------------------------------- Barra de atalhos (declarações, boleto) */
.atalhos{background:var(--c-topo)}
.atalhos .wrap{display:flex;align-items:center;justify-content:center;gap:4px clamp(16px,3vw,34px);min-height:54px;flex-wrap:wrap;padding-block:8px}
.atalhos a{color:#fff;font-size:var(--fs--2);font-weight:700;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:8px;padding:6px 0;line-height:1.3}
.atalhos a:hover{opacity:.8}

/* ========================================================= Próximas etapas
   Bloco vindo da API de competição. Aparece em quase todos os modelos. */
/* --c-topo (superfície escura derivada do tema), e não --c-destaque cru.
   Este bloco ocupa a largura toda da home; com a cor de marca chapada,
   a marca verde da Federação virava uma faixa de verde-limão de ponta a
   ponta, com texto branco em cima dependendo da sorte da cor. A marca
   volta como acento no filete e nas ações. */
.etapas{
  background:var(--c-topo);color:#fff;
  padding:clamp(44px,6vw,64px) 0;
  border-top:3px solid var(--c-marca);
}
.etapas .cabecalho-sec{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.etapas h2{color:#fff;font-size:var(--fs--1);font-weight:700;letter-spacing:2.4px;text-transform:uppercase;margin:0}
/* Branco, e não a cor de marca: o fundo desta faixa é escolhido pelo
   cliente e a marca dele pode cair em cima dele sem contraste nenhum. */
.etapas .todas{font-size:var(--fs--1);font-weight:700;color:#fff}
.etapas .todas:hover{text-decoration:underline}
/* GRADE: O NÚMERO DE CARTÕES É O NÚMERO DE COLUNAS
   O bloco mostra de 1 a 4 etapas e cada quantidade tinha um problema
   próprio. Com auto-fill a 260px, três etapas numa tela de 1440 deixavam
   uma coluna inteira vazia à direita: a grade sabia que cabiam cinco e o
   conjunto ficava encostado na esquerda. Trocar por auto-fit resolveria
   isso e quebraria o caso oposto — uma única etapa aberta, situação comum
   fora de temporada, esticada por 1350px de largura.
   Então a contagem é feita em CSS. A base segue auto-fill (é o que vale em
   tela estreita e em navegador sem :has()); acima de 1180px cada quantidade
   pede seu número exato de colunas, e o cartão único ganha um teto.
   O corte é 1180 e não 860 porque abaixo disso três colunas dariam ~310px
   de cartão e a barra de ação quebrava em duas linhas — o que desalinha a
   régua entre cartões com número diferente de ações. Duas colunas largas
   são melhores que três apertadas. */
.etapas-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(14px,1.4vw,20px)}
/* Tablet: duas colunas fixas, e o cartão ímpar sobrando ocupa a linha
   inteira em vez de deixar meia linha vazia ao lado. Aqui não dá para
   contar os cartões com :has() sem repetir a tabela toda — a regra do
   órfão resolve 1 e 3 de uma vez. */
@media (min-width:620px) and (max-width:1179px){
  .etapas-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapas-grade > .etapa-card:nth-child(odd):last-child{grid-column:1 / -1}
}
@media (min-width:1180px){
  .etapas-grade:has(> .etapa-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .etapas-grade:has(> .etapa-card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .etapas-grade:has(> .etapa-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapas-grade:has(> .etapa-card:only-child){grid-template-columns:minmax(0,560px)}
}
.etapa-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--raio);padding:22px;display:flex;flex-direction:column;gap:9px}
.etapa-card h3{font-size:var(--fs-0);color:#fff;margin:0;line-height:1.3}
.etapa-card .periodo{font-size:var(--fs--1);color:rgba(255,255,255,.78);margin:0}
.etapa-card .inscritos{font-size:var(--fs--2);color:#fff;font-weight:700;letter-spacing:.4px;margin:0}
.etapa-card .acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.etapa-card .acoes a{font-size:var(--fs--2);font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:11px 15px;border-radius:6px;background:var(--c-marca);color:var(--c-marca-sobre,#fff);line-height:1.2}
.etapa-card .acoes a:hover{filter:brightness(1.1)}
.etapa-card .acoes a.sec{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.etapa-card .acoes a.sec:hover{background:rgba(255,255,255,.12);filter:none}

/* ---------------------------------------------------------------- Cartões */
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px)}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.grade-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}

.card{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;transition:.2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,20,38,.12)}
.card:focus-within{box-shadow:0 0 0 3px var(--c-marca)}
/*
 * A CAPA DA NOTÍCIA APARECE INTEIRA.
 *
 * object-fit:cover cortava, e notícia de federação quase nunca é foto: é
 * cartaz feito no Canva, com data, nome da etapa e logo desenhados dentro.
 * Cortar come justamente a informação. Era a reclamação "as imagens nos
 * posts não aparecem todas".
 *
 * contain resolveria o corte e deixaria duas tarjas lisas nas laterais de
 * todo cartão em pé. Então é contain sobre um fundo que é a MESMA imagem
 * ampliada e desfocada — mesmo recurso do carrossel de banners, pelo mesmo
 * motivo: nada é cortado, não há tarja, e a cor de fundo sai da própria
 * arte. Mesmo arquivo, já em cache, sem requisição a mais.
 *
 * A proporção continua fixa para os cartões da grade ficarem alinhados e
 * para a página não saltar enquanto as imagens carregam.
 */
.card .foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-claro);display:block}
.card .foto::before{
  content:"";position:absolute;inset:0;
  background-image:var(--capa);background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.1);transform:scale(1.18);
}
.card .foto img{position:relative;width:100%;height:100%;object-fit:contain;transition:.4s ease}
.card:hover .foto img{transform:scale(1.05)}
.card .corpo{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.card h3{font-size:var(--fs-1);margin:0 0 8px;line-height:1.25}
.card p{font-size:var(--fs--1);line-height:1.6;color:var(--texto-2);flex:1;margin:0}
.card time{font-size:var(--fs--2);color:var(--c-marca-txt);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;display:block}
.card .mais{margin-top:16px;font-weight:700;font-size:var(--fs--1);color:var(--c-marca-txt)}

/* ------------------------------------------------------------- Lista/agenda */
.lista li{display:flex;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--linha)}
.lista li:last-child{border-bottom:0}
.sec--escuro .lista li{border-color:rgba(255,255,255,.14)}
.lista .data{flex:0 0 60px;text-align:center;background:var(--c-claro);border-radius:8px;padding:9px 0;line-height:1}
.sec--escuro .lista .data{background:rgba(255,255,255,.1)}
.lista .dia{font-family:var(--fonte-titulo);font-size:var(--fs-1);font-weight:700;line-height:1}
.lista .mes{font-size:var(--fs--2);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-marca-txt);margin-top:3px}
.lista h4{font-size:var(--fs-0);margin:0 0 3px;line-height:1.3}
.lista .meta{font-size:var(--fs--1);color:var(--texto-3);margin:0}
.lista .meta a{color:var(--c-marca-txt);font-weight:700}
.lista .meta a:hover{text-decoration:underline}
.lista a:hover{color:var(--c-marca-txt)}

/* ----------------------------------------------------------- Estado vazio
   Cliente novo não pode ver buraco: o bloco diz o que vai aparecer ali e
   oferece um caminho. Discreto de propósito — não é erro, é "ainda não". */
.vazio{
  padding:clamp(28px,4vw,40px);text-align:center;
  border:1px dashed var(--linha);border-radius:var(--raio);
  background:var(--c-claro);color:var(--texto-2);
}
.vazio p{font-size:var(--fs--1);max-width:48ch;margin:0 auto .9em}
.vazio p:last-child{margin-bottom:0}
.vazio strong{display:block;font-family:var(--fonte-titulo);font-size:var(--fs-0);color:var(--c-texto);margin-bottom:6px}
.vazio .btn{margin-top:14px;width:auto}
/* Sobre fundo escuro o vazio inverte, senão vira uma mancha clara. */
.sec--escuro .vazio,.etapas .vazio{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82)}
.sec--escuro .vazio strong,.etapas .vazio strong{color:#fff}

/* ================================================== INTERNAS: cabeçalho ==
   A faixa do topo era `--c-destaque` chapado: na Federação Paranaense, um
   retângulo verde-limão com o título dentro. Agora é a superfície escura
   derivada do tema, e a cor do cliente volta como filete sob o título — a
   mesma regra do rodapé. */
.pagina-topo{
  background:var(--c-topo);
  background-image:linear-gradient(180deg,var(--c-topo-alto),var(--c-topo) 78%);
  color:#fff;
  /* Respiro reduzido: com 52/46 o conteudo util das internas (o campo de
     CPF da filiacao, a tabela de resultados) caia abaixo da dobra num
     notebook. A faixa continua sendo uma faixa; ela so parou de empurrar. */
  padding:clamp(24px,3vw,34px) 0 clamp(22px,2.6vw,30px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pagina-topo .trilha{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;
  margin:0 0 10px;
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,.68);
}
.pagina-topo .trilha a{color:var(--c-topo-acento)}
.pagina-topo .trilha a:hover{text-decoration:underline}
.pagina-topo .trilha [aria-current]{color:rgba(255,255,255,.72);font-weight:600}
.pagina-topo h1{font-size:clamp(1.7rem,3.6vw,2.5rem);color:#fff;margin:0;max-width:26ch}
/* Único lugar da faixa onde a cor de marca aparece cheia — e em 56px, não
   na tela inteira. */
.pagina-topo h1::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--c-topo-acento);margin-top:12px;
}
.pagina-topo-sub{margin:12px 0 0;max-width:62ch;font-size:var(--fs-0);color:rgba(255,255,255,.82)}

/* ================================================== INTERNAS: conteúdo == */
/* O padding do topo era 72px — somado a faixa do titulo, empurrava o
   conteudo util para fora da primeira tela. O de baixo continua generoso:
   fim de pagina colado no rodape e que fica feio. */
.conteudo{padding:clamp(26px,3vw,38px) 0 clamp(40px,5.5vw,72px);min-height:46vh}
.conteudo > .wrap > :first-child{margin-top:0}
.conteudo h2{font-size:var(--fs-2);margin:0 0 14px}
.conteudo h3{font-size:var(--fs-1);margin:28px 0 10px}
.conteudo p{margin-bottom:1.1em;max-width:65ch}
.conteudo img{border-radius:var(--raio)}

/* Coluna de leitura. ~65ch é a medida em que o olho ainda encontra o começo
   da linha seguinte sem se perder; sem isso o texto do cliente atravessa
   1350px e vira uma faixa de uma linha só. */
.medida{max-width:68ch}

/* Bloco de texto dentro de uma interna com vários registros. */
.secao-texto{margin-bottom:clamp(26px,3.2vw,40px)}
.secao-texto:last-child{margin-bottom:0}
.secao-texto h2{font-size:var(--fs-1);margin:0 0 10px}
.secao-texto.primeira h2{font-size:var(--fs-2)}

/* Cabeçalho de bloco dentro da interna: título + linha de apoio. */
.bloco-titulo{margin:0 0 clamp(20px,3vw,30px);max-width:60ch}
.bloco-titulo h2{margin:0 0 8px}
.bloco-titulo p{font-size:var(--fs--1);color:var(--texto-2);margin:0}

/* ------------------------------------------- Texto do editor do cliente
   `.prosa` e `.corpo-noticia` recebem HTML arbitrário: o cliente cola de
   Word, de e-mail, de outro site. Sem regra nenhuma o resultado era uma
   pilha de <p> gigantes sem hierarquia — e listas sem marcador, porque o
   reset global tira o list-style de todo <ul> do site. Aqui a marcação é
   devolvida item por item. */
.prosa,.corpo-noticia{max-width:65ch;margin-inline:auto;font-size:var(--fs-0);line-height:1.72;color:var(--c-texto)}
.prosa > :first-child,.corpo-noticia > :first-child{margin-top:0}
.prosa > :last-child,.corpo-noticia > :last-child{margin-bottom:0}
.prosa p,.corpo-noticia p{margin:0 0 1.15em;max-width:none}
.prosa h1,.prosa h2,.corpo-noticia h1,.corpo-noticia h2{font-size:var(--fs-2);margin:1.9em 0 .5em;line-height:1.2}
.prosa h3,.corpo-noticia h3{font-size:var(--fs-1);margin:1.7em 0 .45em;line-height:1.25}
.prosa h4,.prosa h5,.prosa h6,
.corpo-noticia h4,.corpo-noticia h5,.corpo-noticia h6{
  font-size:var(--fs-0);margin:1.5em 0 .4em;letter-spacing:.2px;
}
.prosa ul,.prosa ol,.corpo-noticia ul,.corpo-noticia ol{margin:0 0 1.2em;padding-left:1.35em}
.prosa ul,.corpo-noticia ul{list-style:disc}
.prosa ol,.corpo-noticia ol{list-style:decimal}
.prosa li,.corpo-noticia li{margin-bottom:.45em;padding-left:.2em}
.prosa li::marker,.corpo-noticia li::marker{color:var(--c-marca-txt)}
.prosa li > ul,.prosa li > ol,.corpo-noticia li > ul,.corpo-noticia li > ol{margin:.45em 0 0}
.prosa a,.corpo-noticia a{color:var(--c-marca-txt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prosa a:hover,.corpo-noticia a:hover{text-decoration-thickness:2px}
.prosa strong,.corpo-noticia strong{font-weight:700}
.prosa blockquote,.corpo-noticia blockquote{
  margin:1.6em 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--c-marca);
  font-size:var(--fs-1);line-height:1.5;color:var(--texto-2);
}
.prosa hr,.corpo-noticia hr{border:0;border-top:1px solid var(--linha);margin:2em 0}
.prosa figure,.corpo-noticia figure{margin:1.6em 0}
.prosa figcaption,.corpo-noticia figcaption{font-size:var(--fs--2);color:var(--texto-3);margin-top:8px}
.prosa small,.corpo-noticia small{font-size:var(--fs--2);color:var(--texto-3)}
/* Tabela colada de fora não tem classe nenhuma: recebe a mesma forma da
   `.tabela` do resto do site, e rola dentro de si em vez de estourar. */
.prosa table,.corpo-noticia table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;margin:1.6em 0;font-size:var(--fs--1);
  border:1px solid var(--linha);border-radius:var(--raio);
}
.prosa th,.corpo-noticia th{background:var(--c-claro);text-align:left;padding:11px 14px;font-weight:700;white-space:nowrap}
.prosa td,.corpo-noticia td{padding:10px 14px;border-top:1px solid var(--linha)}


/* --------------------------------------------------- Índice de páginas
   Era uma lista de links soltos com o título em corpo grande. Vira grade
   de cartões: o alvo de clique passa a ser a área toda e a página deixa de
   ser uma coluna estreita com metade da tela vazia. */
.lista-docs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(14px,1.8vw,20px);
}
.lista-docs li{margin:0}
/* O item pode ser <a> (documento com arquivo) ou <div> (registro sem link):
   a caixa é a mesma, só o comportamento muda. */
.lista-docs > li > *{
  display:flex;flex-direction:column;gap:6px;height:100%;
  padding:20px 22px;border:1px solid var(--linha);border-radius:var(--raio);
  background:#fff;transition:.18s ease;
}
.lista-docs > li > a:hover{border-color:var(--c-marca);box-shadow:0 10px 26px rgba(10,20,38,.10);transform:translateY(-2px)}
.lista-docs h3{font-size:var(--fs-0);margin:0;line-height:1.35}
.lista-docs p{font-size:var(--fs--1);color:var(--texto-2);margin:0;max-width:none}
.lista-docs .meta{font-size:var(--fs--2);color:var(--texto-3);margin:0}
/* A seta indica "abre" sem depender de cor — quem não distingue o link
   pela cor ainda vê o sinal. */
.lista-docs > li > a::after{content:"→";margin-top:auto;padding-top:10px;font-weight:700;color:var(--c-marca-txt)}

/* ---------------------------------------------------------- Modalidades */
.modalidade{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);align-items:start;
  padding-bottom:clamp(28px,3.4vw,42px);margin-bottom:clamp(28px,3.4vw,42px);
  border-bottom:1px solid var(--linha);
}
.modalidade:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* Sem foto a modalidade não pode deixar uma coluna vazia à esquerda. */
.modalidade:not(:has(.moldura)){display:block;max-width:68ch}
.modalidade-texto{min-width:0}
.modalidade h2{font-size:var(--fs-2);margin:0 0 12px}
.modalidade .prosa{max-width:62ch}
.modalidade .moldura{margin-top:6px;position:sticky;top:20px}

/* ------------------------------------------------------------ Parceiros */
.grade-parceiros{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
  gap:clamp(12px,1.6vw,18px);
}
.parceiro{
  display:grid;place-items:center;aspect-ratio:3/2;padding:18px;
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  text-align:center;transition:.18s ease;
}
.parceiro img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  /* Colorida por padrão: ver o comentário em .faixa-patro-marca img. */
  transition:transform .18s ease}
a.parceiro:hover,a.parceiro:focus-visible{
  border-color:var(--c-marca);box-shadow:0 10px 26px rgba(10,20,38,.13);
  transform:translateY(-3px);
}
a.parceiro:hover img,a.parceiro:focus-visible img{transform:scale(1.04)}
a.parceiro:focus-visible{outline:2px solid var(--c-marca);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .parceiro,.parceiro img{transition:none}
  a.parceiro:hover,a.parceiro:hover img{transform:none}
}
.parceiro span{font-size:var(--fs--1);font-weight:700;color:var(--texto-2);line-height:1.35}

/* --------------------------------- Faixa de patrocinadores (acima do rodapé)
   Aparece em todas as páginas, porque é isso que o patrocinador contrata.
   A marca NUNCA é cortada: quadro de altura fixa + object-fit:contain, que
   aceita logo deitada, quadrada e em pé sem descaracterizar nenhuma. Sem
   imagem, o nome ocupa o mesmo quadro — buraco na faixa pareceria imagem
   quebrada. */
.faixa-patro{background:var(--c-claro);border-top:1px solid var(--linha);padding:clamp(22px,3vw,34px) 0}
.faixa-patro-titulo{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--texto-2);text-align:center;margin:0 0 clamp(14px,1.8vw,20px);
}
/* --------- A faixa vira carrossel quando passa de uma página ---------
   Mesmo mecanismo do carrossel de banners (.bn): a faixa desliza por
   transform e os pontinhos são âncoras lidas com :target + :has(). Zero
   JavaScript — a suíte de verificação reprova qualquer <script>.

   O que muda em relação aos banners: lá cada página é UM slide, aqui são
   VÁRIAS marcas por página, e quantas cabem depende da largura (6 / 4 / 2).
   O HTML é o mesmo nas três larguras; quem varia é a largura do cartão,
   definida em cada @media abaixo. O passo do transform é sempre UMA janela,
   então a mesma marcação serve para os três casos.

   Teto de largura: solto no wrap de 1350px, oito marcas viravam 7 + 1
   sozinha na segunda linha. */
.fp{position:relative;max-width:1040px;margin-inline:auto;--fp-gap:16px;--fp-pg:0}

/* Alvos de 1px presos à viewport.
   position:fixed é o detalhe que impede o pulo: elemento fixo já está no
   campo de visão, então a âncora não tem para onde rolar. Com absolute o
   navegador leva o topo da faixa ao topo da tela. Mesmo motivo de .bn-alvo. */
.fp-alvo{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;
  pointer-events:none;opacity:0}

/* overflow:clip, e não hidden.
   `clip` não cria caixa de rolagem, então o foco do teclado num cartão que
   está fora da página visível NÃO consegue arrastar a faixa e desalinhar o
   transform — que é o defeito que obrigou o carrossel de banners a tirar os
   links do tab. Aqui os links são de quem paga e precisam continuar
   alcançáveis. Todo navegador que suporta :has(), requisito do mecanismo,
   suporta clip; o `hidden` antes fica de rede. */
.fp-janela{overflow:hidden;overflow:clip}

.fp-trilho{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fp-gap);
}
/* Fora do modo carrossel vale a grade estática de sempre. */
.fp-card{flex:0 1 150px;min-width:0}

/* Pontinhos: área de toque grande por fora, sem engordar o ponto, e o
   ativo vira pílula larga — bolinhas idênticas não dizem onde se está. */
.fp-pontos{display:flex;justify-content:center;gap:14px;margin-top:16px}
.fp-pontos a{position:relative;width:10px;height:10px;border-radius:50%;
  background:rgba(21,24,29,.22);box-shadow:0 0 0 1.5px rgba(21,24,29,.28);
  transition:background .15s,width .15s}

/* A ÁREA DE TOQUE LADRILHA, NÃO SE SOBREPÕE.
   O carrossel de banners usa 44x44 por fora do ponto, e ali funciona porque
   são poucos slides. Aqui podem ser doze páginas: com 44px de largura cada,
   as áreas invadem as vizinhas em mais da metade, e como a de baixo é
   desenhada depois ela fica por cima — o dedo mira um ponto e abre o
   seguinte. Então a largura é o PASSO entre os pontos (10 do ponto + 14 do
   intervalo = 24px), o que faz as áreas encostarem sem invadir. Continua
   com 44px de ALTURA, e 24x44 passa no mínimo de 24x24 da WCAG 2.5.8. */
.fp-pontos a::after{content:"";position:absolute;top:50%;left:50%;
  width:24px;height:44px;transform:translate(-50%,-50%)}
.fp-pontos a:hover{background:var(--c-marca)}
.fp-pontos a:focus-visible{outline:2px solid var(--c-marca);outline-offset:4px}

/* Desktop: seis marcas por página. */
@media (min-width:1024px){
  .fp--car-d .fp-trilho{flex-wrap:nowrap;justify-content:flex-start;
    /* min() com --fp-max-d limita o deslocamento à última página QUE EXISTE
       nesta largura: sem o teto, quem abrisse a página 6 no celular e
       girasse o aparelho veria faixa vazia aqui, onde só há 3 páginas. */
    transform:translateX(calc(min(var(--fp-pg), var(--fp-max-d,0)) * -1 * (100% + var(--fp-gap))));
    transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .fp--car-d .fp-card{flex:0 0 calc((100% - 5 * var(--fp-gap)) / 6)}
  .fp:not(.fp--car-d) .fp-pontos{display:none}
  .fp-pontos a:not(.pt--d){display:none}

  /* FOCO DO TECLADO TRAZ A PÁGINA DA MARCA PARA A FRENTE.
     Sem isto, quem navega por Tab passa pelos patrocinadores das páginas
     seguintes com o foco invisível — a janela é overflow:clip e não rola.
     Cada regra cobre a faixa de cartões de uma página nesta largura (6 por
     página) e reescreve --fp-pg enquanto o foco estiver ali dentro; ao sair,
     volta a valer a página escolhida no ponto. */
  .fp--car-d:has(.fp-card:nth-child(n+1):nth-child(-n+6):focus-within){--fp-pg:0}
  .fp--car-d:has(.fp-card:nth-child(n+7):nth-child(-n+12):focus-within){--fp-pg:1}
  .fp--car-d:has(.fp-card:nth-child(n+13):nth-child(-n+18):focus-within){--fp-pg:2}
  .fp--car-d:has(.fp-card:nth-child(n+19):nth-child(-n+24):focus-within){--fp-pg:3}
  .fp--car-d:has(.fp-card:nth-child(n+25):nth-child(-n+30):focus-within){--fp-pg:4}
  .fp--car-d:has(.fp-card:nth-child(n+31):nth-child(-n+36):focus-within){--fp-pg:5}
  .fp--car-d:has(.fp-card:nth-child(n+37):nth-child(-n+42):focus-within){--fp-pg:6}
  .fp--car-d:has(.fp-card:nth-child(n+43):nth-child(-n+48):focus-within){--fp-pg:7}
  .fp--car-d:has(.fp-card:nth-child(n+49):nth-child(-n+54):focus-within){--fp-pg:8}
  .fp--car-d:has(.fp-card:nth-child(n+55):nth-child(-n+60):focus-within){--fp-pg:9}
  .fp--car-d:has(.fp-card:nth-child(n+61):nth-child(-n+66):focus-within){--fp-pg:10}
  .fp--car-d:has(.fp-card:nth-child(n+67):nth-child(-n+72):focus-within){--fp-pg:11}
}

/* Tablet: quatro. */
@media (min-width:561px) and (max-width:1023px){
  .fp--car-t .fp-trilho{flex-wrap:nowrap;justify-content:flex-start;
    transform:translateX(calc(min(var(--fp-pg), var(--fp-max-t,0)) * -1 * (100% + var(--fp-gap))));
    transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .fp--car-t .fp-card{flex:0 0 calc((100% - 3 * var(--fp-gap)) / 4)}
  .fp:not(.fp--car-t) .fp-pontos{display:none}
  .fp-pontos a:not(.pt--t){display:none}

  /* FOCO DO TECLADO TRAZ A PÁGINA DA MARCA PARA A FRENTE.
     Sem isto, quem navega por Tab passa pelos patrocinadores das páginas
     seguintes com o foco invisível — a janela é overflow:clip e não rola.
     Cada regra cobre a faixa de cartões de uma página nesta largura (4 por
     página) e reescreve --fp-pg enquanto o foco estiver ali dentro; ao sair,
     volta a valer a página escolhida no ponto. */
  .fp--car-t:has(.fp-card:nth-child(n+1):nth-child(-n+4):focus-within){--fp-pg:0}
  .fp--car-t:has(.fp-card:nth-child(n+5):nth-child(-n+8):focus-within){--fp-pg:1}
  .fp--car-t:has(.fp-card:nth-child(n+9):nth-child(-n+12):focus-within){--fp-pg:2}
  .fp--car-t:has(.fp-card:nth-child(n+13):nth-child(-n+16):focus-within){--fp-pg:3}
  .fp--car-t:has(.fp-card:nth-child(n+17):nth-child(-n+20):focus-within){--fp-pg:4}
  .fp--car-t:has(.fp-card:nth-child(n+21):nth-child(-n+24):focus-within){--fp-pg:5}
  .fp--car-t:has(.fp-card:nth-child(n+25):nth-child(-n+28):focus-within){--fp-pg:6}
  .fp--car-t:has(.fp-card:nth-child(n+29):nth-child(-n+32):focus-within){--fp-pg:7}
  .fp--car-t:has(.fp-card:nth-child(n+33):nth-child(-n+36):focus-within){--fp-pg:8}
  .fp--car-t:has(.fp-card:nth-child(n+37):nth-child(-n+40):focus-within){--fp-pg:9}
  .fp--car-t:has(.fp-card:nth-child(n+41):nth-child(-n+44):focus-within){--fp-pg:10}
  .fp--car-t:has(.fp-card:nth-child(n+45):nth-child(-n+48):focus-within){--fp-pg:11}
}

/* Celular: duas. */
@media (max-width:560px){
  .fp{--fp-gap:12px}
  .fp--car-m .fp-trilho{flex-wrap:nowrap;justify-content:flex-start;
    transform:translateX(calc(min(var(--fp-pg), var(--fp-max-m,0)) * -1 * (100% + var(--fp-gap))));
    transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .fp--car-m .fp-card{flex:0 0 calc((100% - var(--fp-gap)) / 2)}
  .fp:not(.fp--car-m) .fp-pontos{display:none}
  .fp-pontos a:not(.pt--m){display:none}

  /* FOCO DO TECLADO TRAZ A PÁGINA DA MARCA PARA A FRENTE.
     Sem isto, quem navega por Tab passa pelos patrocinadores das páginas
     seguintes com o foco invisível — a janela é overflow:clip e não rola.
     Cada regra cobre a faixa de cartões de uma página nesta largura (2 por
     página) e reescreve --fp-pg enquanto o foco estiver ali dentro; ao sair,
     volta a valer a página escolhida no ponto. */
  .fp--car-m:has(.fp-card:nth-child(n+1):nth-child(-n+2):focus-within){--fp-pg:0}
  .fp--car-m:has(.fp-card:nth-child(n+3):nth-child(-n+4):focus-within){--fp-pg:1}
  .fp--car-m:has(.fp-card:nth-child(n+5):nth-child(-n+6):focus-within){--fp-pg:2}
  .fp--car-m:has(.fp-card:nth-child(n+7):nth-child(-n+8):focus-within){--fp-pg:3}
  .fp--car-m:has(.fp-card:nth-child(n+9):nth-child(-n+10):focus-within){--fp-pg:4}
  .fp--car-m:has(.fp-card:nth-child(n+11):nth-child(-n+12):focus-within){--fp-pg:5}
  .fp--car-m:has(.fp-card:nth-child(n+13):nth-child(-n+14):focus-within){--fp-pg:6}
  .fp--car-m:has(.fp-card:nth-child(n+15):nth-child(-n+16):focus-within){--fp-pg:7}
  .fp--car-m:has(.fp-card:nth-child(n+17):nth-child(-n+18):focus-within){--fp-pg:8}
  .fp--car-m:has(.fp-card:nth-child(n+19):nth-child(-n+20):focus-within){--fp-pg:9}
  .fp--car-m:has(.fp-card:nth-child(n+21):nth-child(-n+22):focus-within){--fp-pg:10}
  .fp--car-m:has(.fp-card:nth-child(n+23):nth-child(-n+24):focus-within){--fp-pg:11}
}

@media (prefers-reduced-motion:reduce){.fp-trilho{transition:none}}
@media print{.fp-pontos{display:none}
  .fp-trilho{transform:none;flex-wrap:wrap;justify-content:center}}
.faixa-patro-marca{
  display:grid;place-items:center;height:78px;padding:12px;
  background:var(--c-branco);border:1px solid var(--linha);border-radius:var(--raio);
  text-align:center;transition:.18s ease;
}
.faixa-patro-marca img{
  /* max-height em PIXEL, e nao em 100%: a linha do grid e `auto` e cresce
     com o conteudo, entao a porcentagem resolvia contra a propria imagem e
     logo alta (a da Liga Nacional, 300x350) transbordava o quadro por cima
     do rodape. 54px = 78px do quadro menos os 12px de respiro de cada lado. */
  width:auto;height:auto;max-width:100%;max-height:54px;object-fit:contain;
  transition:transform .18s ease;
}

/*
 * AS MARCAS FICAM COLORIDAS.
 *
 * Estavam em cinza, com a cor voltando só no hover. A intenção era
 * uniformizar a fileira para ela não disputar atenção com o rodapé — mas
 * o efeito é que a faixa inteira parecia apagada, e a única marca viva era
 * a que estava sob o cursor. Quem paga por esta faixa paga pela marca
 * DELE, com a cor dele, e no celular não existe hover: em telefone a
 * faixa nunca saía do cinza.
 *
 * O que uniformiza agora é o quadro — mesma caixa, mesma altura, mesmo
 * respiro para todas — e não a dessaturação do logotipo alheio.
 */
a.faixa-patro-marca:hover,a.faixa-patro-marca:focus-visible{
  border-color:var(--c-marca);
  box-shadow:0 10px 24px rgba(10,20,38,.13);
  transform:translateY(-3px);
}
a.faixa-patro-marca:hover img,a.faixa-patro-marca:focus-visible img{transform:scale(1.04)}
a.faixa-patro-marca:focus-visible{outline:2px solid var(--c-marca);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .faixa-patro-marca,.faixa-patro-marca img{transition:none}
  a.faixa-patro-marca:hover{transform:none}
  a.faixa-patro-marca:hover img{transform:none}
}
.faixa-patro-marca span{font-size:var(--fs--2);font-weight:700;color:var(--texto-2);line-height:1.3}
@media (max-width:560px){
  /* Duas por linha no celular: com 150px fixos sobrava uma marca sozinha
     na última linha em 375px. Vale para a grade estática; no modo carrossel
     a largura vem da regra .fp--car-m acima. */
  .fp-card{flex:0 1 calc(50% - 6px)}
  .faixa-patro-marca{height:66px}
  .faixa-patro-marca img{max-height:42px}
}
@media (prefers-reduced-motion: reduce){
  .faixa-patro-marca,.faixa-patro-marca img{transition:none}
}

/*
 * QUAL PÁGINA ESTÁ ABERTA.
 *
 * O :has() olha para dentro da faixa, vê qual alvo está em :target e grava
 * o número da página em --fp-pg. Quem usa esse número é o transform de cada
 * @media acima, já limitado pelo teto daquela largura.
 *
 * A regra do :not(:has(...)) cobre o carregamento da página, quando ainda
 * não há nada em :target.
 */
.fp:has(.fp-alvo:nth-of-type(1):target){--fp-pg:0}
.fp:has(.fp-alvo:nth-of-type(2):target){--fp-pg:1}
.fp:has(.fp-alvo:nth-of-type(3):target){--fp-pg:2}
.fp:has(.fp-alvo:nth-of-type(4):target){--fp-pg:3}
.fp:has(.fp-alvo:nth-of-type(5):target){--fp-pg:4}
.fp:has(.fp-alvo:nth-of-type(6):target){--fp-pg:5}
.fp:has(.fp-alvo:nth-of-type(7):target){--fp-pg:6}
.fp:has(.fp-alvo:nth-of-type(8):target){--fp-pg:7}
.fp:has(.fp-alvo:nth-of-type(9):target){--fp-pg:8}
.fp:has(.fp-alvo:nth-of-type(10):target){--fp-pg:9}
.fp:has(.fp-alvo:nth-of-type(11):target){--fp-pg:10}
.fp:has(.fp-alvo:nth-of-type(12):target){--fp-pg:11}

/* O ponto da página aberta vira pílula larga: sem isso são bolinhas
   idênticas e não dá para saber onde se está nem quantas faltam. */
.fp:not(:has(.fp-alvo:target)) .fp-pontos a:first-child,
.fp:has(.fp-alvo:nth-of-type(1):target) .fp-pontos a:nth-child(1),
.fp:has(.fp-alvo:nth-of-type(2):target) .fp-pontos a:nth-child(2),
.fp:has(.fp-alvo:nth-of-type(3):target) .fp-pontos a:nth-child(3),
.fp:has(.fp-alvo:nth-of-type(4):target) .fp-pontos a:nth-child(4),
.fp:has(.fp-alvo:nth-of-type(5):target) .fp-pontos a:nth-child(5),
.fp:has(.fp-alvo:nth-of-type(6):target) .fp-pontos a:nth-child(6),
.fp:has(.fp-alvo:nth-of-type(7):target) .fp-pontos a:nth-child(7),
.fp:has(.fp-alvo:nth-of-type(8):target) .fp-pontos a:nth-child(8),
.fp:has(.fp-alvo:nth-of-type(9):target) .fp-pontos a:nth-child(9),
.fp:has(.fp-alvo:nth-of-type(10):target) .fp-pontos a:nth-child(10),
.fp:has(.fp-alvo:nth-of-type(11):target) .fp-pontos a:nth-child(11),
.fp:has(.fp-alvo:nth-of-type(12):target) .fp-pontos a:nth-child(12){
  background:var(--c-marca);box-shadow:none;width:26px;border-radius:5px
}

/* -------------------------------------------------------------- Contato */
.contato-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:start}
.contato-grid > *{min-width:0}
.dados-contato{margin:0}
.dados-contato dt{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c-marca-txt);margin-top:20px;
}
.dados-contato dt:first-child{margin-top:0}
.dados-contato dd{margin:5px 0 0;font-size:var(--fs-0);line-height:1.5;max-width:44ch}
.dados-contato a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.dados-contato a:hover{color:var(--c-marca-txt)}

.form{display:flex;flex-direction:column;gap:16px;margin-top:22px;
  padding:clamp(20px,2.6vw,30px);border:1px solid var(--linha);border-radius:var(--raio);background:var(--c-claro)}
.form label{display:flex;flex-direction:column;gap:7px;font-size:var(--fs--2);font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--texto-2)}
.form input,.form textarea{
  font-family:var(--fonte);font-size:var(--fs-0);line-height:1.4;color:var(--c-texto);
  padding:13px 14px;min-height:48px;
  border:1px solid var(--linha);border-radius:8px;background:#fff;
  text-transform:none;letter-spacing:0;font-weight:400;
  transition:.15s ease;width:100%;
}
.form textarea{resize:vertical;min-height:130px}
.form input:hover,.form textarea:hover{border-color:rgba(15,23,42,.24)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--c-marca);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
/* O foco por teclado continua com o anel do site: borda colorida sozinha
   não é sinal suficiente para quem navega por Tab. */
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--c-marca);outline-offset:2px}
.form .btn{margin-top:4px}

/* -------------------------------------------------------------- Notícia */
/* Centrada, não encostada à esquerda: com 68ch de medida numa tela de
   1400px sobram ~600px mortos de um lado só, e a página inteira parece
   torta. Centrar é o que faz a coluna de leitura parecer proposital. */
.artigo{max-width:68ch;margin-inline:auto}
.artigo-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 22px;
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--c-marca-txt);
}
/* A capa é mais larga que a coluna de texto de propósito: dá respiro sem
   quebrar a medida de leitura logo abaixo. */
/* A capa da notícia NÃO é recortada.
   O acervo é quase todo arte de divulgação — cartaz de etapa, comunicado,
   banner de campeonato — com texto dentro. Um corte 16/9 come metade da
   arte e o título vira "7ª ETAPA CAMPE...". Aqui a proporção é a do
   arquivo, com teto de altura para banner muito deitado não empurrar o
   texto para fora da primeira tela.

   Sobrescreve a .moldura de propósito: nas grades a proporção fixa é o
   que alinha os cartões; na capa de um artigo não há grade para alinhar. */
.artigo-capa{
  max-width:min(100%,860px);
  margin:0 auto clamp(24px,3vw,34px);
  border-radius:var(--raio);
  overflow:hidden;
  background:var(--c-claro);
}
.artigo-capa > img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.artigo-fim{margin-top:clamp(34px,4vw,48px);padding-top:24px;border-top:1px solid var(--linha)}

/* -------------------------------------------------------------- Galeria */
.grade-fotos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:clamp(10px,1.4vw,16px);
}
/* Galeria sem capa: o quadro diz o que é em vez de ficar um cinza mudo. */
.card .foto .foto-sem{
  display:grid;place-items:center;height:100%;padding:16px;text-align:center;
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--texto-3);
}

.grade-fotos figure{margin:0}
.grade-fotos figcaption{font-size:var(--fs--2);color:var(--texto-3);margin-top:7px;line-height:1.4}
.grade-fotos .moldura{transition:.2s ease}
.grade-fotos a:hover .moldura,.grade-fotos .moldura:hover{transform:scale(1.015);box-shadow:0 12px 28px rgba(10,20,38,.16)}

/* ----------------------------------------------------------- Calendário
   Cada prova é um cartão com a data em bloco à esquerda. O `.lista` puro
   deixava tudo na mesma altura de linha, sem nada que ancorasse o olho. */
.agenda{display:grid;gap:12px}
.agenda li{
  display:grid;grid-template-columns:74px minmax(0,1fr) auto;
  gap:clamp(14px,2vw,22px);align-items:center;
  padding:16px 20px;border:1px solid var(--linha);border-left:3px solid var(--c-marca);
  border-radius:var(--raio);background:#fff;transition:.18s ease;
}
.agenda li:hover{box-shadow:0 10px 26px rgba(10,20,38,.09)}
.agenda .data{text-align:center;background:var(--c-claro);border-radius:8px;padding:10px 4px;line-height:1}
.agenda .data time{display:block}
.agenda .dia{display:block;font-family:var(--fonte-titulo);font-size:var(--fs-2);font-weight:700;line-height:1}
.agenda .mes{display:block;font-size:var(--fs--2);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-marca-txt);margin-top:5px}
.agenda h3{font-size:var(--fs-0);margin:0 0 4px;line-height:1.35}
.agenda .meta{font-size:var(--fs--1);color:var(--texto-3);margin:0}
.agenda .acao{font-size:var(--fs--2);font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-marca-txt);white-space:nowrap}
.agenda .acao:hover{text-decoration:underline}

.tabela{width:100%;font-size:var(--fs--1)}
.tabela th{background:var(--c-topo);color:#fff;text-align:left;padding:13px 14px;font-size:var(--fs--2);font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--linha)}
.tabela tbody tr:nth-child(even){background:rgba(0,0,0,.025)}
/* Tabela larga rola dentro do container — nunca empurra a página. */
.tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* Dentro da caixa que rola a tabela pode passar de 100%: com `width:100%`
   fixo o navegador espremia as colunas de nome de clube até seis linhas por
   célula em vez de usar a rolagem que já existe. `min-width:100%` mantém as
   tabelas estreitas ocupando a largura toda, como antes. */
.tabela-scroll > .tabela{width:auto;min-width:100%}

.paginacao{display:flex;gap:6px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.paginacao a,.paginacao span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--linha);border-radius:6px;font-size:var(--fs--1);font-weight:700}
.paginacao a:hover{border-color:var(--c-marca);color:var(--c-marca-txt)}
.paginacao .ativa{background:var(--c-marca);color:var(--c-marca-sobre,#fff);border-color:var(--c-marca)}

/* ================================================================ Rodapé
   A cor do cliente NÃO é o fundo daqui. `--c-rodape` chega do layout base
   já como superfície neutra escura derivada do tema, e `--c-rodape-acento`
   traz a cor de marca de volta com contraste garantido sobre ela. O que
   antes era um bloco verde-limão de tela cheia agora é um grafite com
   verde nos títulos, no filete do topo e no hover. */
.rodape{
  background:var(--c-rodape);
  background-image:linear-gradient(180deg,var(--c-rodape-alto),var(--c-rodape) 46%);
  color:var(--c-texto-inv);
  border-top:4px solid var(--c-rodape-acento);
  padding-top:clamp(42px,5vw,64px);
}
.rodape-grade{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);
  gap:clamp(26px,3vw,44px);
  padding-bottom:clamp(32px,4vw,52px);
}
.rodape h4{font-size:var(--fs--2);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--c-rodape-acento);margin:0 0 16px}
.rodape li{margin-bottom:9px;line-height:1.5}
.rodape li:last-child{margin-bottom:0}
.rodape a{font-size:var(--fs--1);color:var(--c-texto-inv)}
.rodape-col a{display:inline-block;padding-block:3px}
.rodape-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-rodape-acento)}

/* Logo de cliente costuma ser escura sobre transparente: sem a placa clara
   ela some no fundo escuro. */
.rodape-sobre img{max-height:56px;width:auto;margin-bottom:18px;background:rgba(255,255,255,.94);border-radius:8px;padding:8px 10px}
.rodape-sobre h4{font-size:var(--fs--1);letter-spacing:.4px;text-transform:none;color:#fff;margin-bottom:10px;line-height:1.35}
.rodape-sobre p{font-size:var(--fs--1);color:var(--c-texto-inv);max-width:40ch;line-height:1.65;margin:0}
.rodape .contato li{display:flex;gap:10px;font-size:var(--fs--1)}
.rodape .contato b{color:#fff;font-weight:700;flex:none;min-width:66px}
.rodape .redes{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.rodape .redes a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 16px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font-size:var(--fs--2);font-weight:700;letter-spacing:.5px;
}
/* Texto na cor do fundo: o acento já foi validado em 4.5:1 contra ele, então
   a inversão vale nos dois sentidos, qualquer que seja a cor do cliente. */
.rodape .redes a:hover{background:var(--c-rodape-acento);border-color:var(--c-rodape-acento);color:var(--c-rodape);text-decoration:none}

/* O copyright era um retângulo cinza (rgba(0,0,0,.35)) colado embaixo do
   rodapé — sobre verde-limão virava uma barra suja com texto ilegível.
   Aqui é o mesmo fundo do rodapé, separado só por um filete. */
.rodape-rodape{border-top:1px solid rgba(255,255,255,.10);padding:20px 0 26px}
.rodape-recado{font-size:var(--fs--2);color:rgba(255,255,255,.62);margin:0 0 10px;max-width:70ch;line-height:1.6}
.rodape-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  font-size:var(--fs--2);color:rgba(255,255,255,.62);
}
.rodape-legal p{margin:0}
.rodape-legal a{font-size:var(--fs--2);color:rgba(255,255,255,.62)}
.rodape-legal a:hover{color:#fff;text-decoration:underline}

/* ---- Convite da etapa ---------------------------------------------------
   O PDF vem antes do texto: é o que a pessoa quer levar. O texto do cadastro
   herda `.prosa`, que já dá medida de linha e espaçamento ao HTML do ERP. */
.convite-pdf{margin:0 0 22px}
.convite-texto{max-width:78ch}
.convite-texto img{max-width:100%;height:auto}
/* Tabela colada de editor não pode estourar a página no celular. */
.convite-texto table{width:100%;max-width:100%;display:block;overflow-x:auto}

/* ---- Esquadras da etapa -------------------------------------------------
   Cartões em grade: cada um é uma esquadra, com o HORÁRIO em destaque (é o
   que o atirador procura na véspera) e o número como referência secundária.
   Grade e não tabela: são 30+ esquadras de 5 postos, e uma tabela de 150
   linhas obriga a rolar procurando a sua. */
.esq-grupo{margin:28px 0 14px;font-size:var(--fs-1)}
.esq-lista{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.esq-card{
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--c-branco);overflow:hidden;
}
.esq-card__topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 14px;background:var(--c-claro);border-bottom:1px solid var(--linha);
}
.esq-card__hora{margin:0;font-size:var(--fs-1);font-weight:800;line-height:1;color:var(--c-marca-txt)}
.esq-card__dia{margin-left:6px;font-size:var(--fs--2);font-weight:600;color:var(--texto-2)}
.esq-card__hora--vazia{font-size:var(--fs--1);font-weight:600;color:var(--texto-2)}
.esq-card__nr{margin:0;font-size:var(--fs--2);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--texto-2)}
.esq-tag{
  display:inline-block;margin-left:6px;padding:2px 6px;border-radius:4px;
  background:var(--c-marca);color:var(--c-marca-sobre);font-size:.66rem;letter-spacing:.5px;
}
.esq-postos{list-style:none;margin:0;padding:6px 0;counter-reset:none}
.esq-posto{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 14px;font-size:var(--fs--1);line-height:1.35;
}
.esq-posto + .esq-posto{border-top:1px dashed var(--linha)}
/* O número do posto é referência, não conteúdo: tabular-nums para os
   números ficarem na mesma coluna óptica. */
.esq-posto__nr{
  flex:none;min-width:1.5em;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--texto-2);
}
.esq-posto__nome{flex:1 1 auto;min-width:0}
.esq-posto__div{flex:none;font-size:var(--fs--2);color:var(--texto-2)}
/* Posto livre continua visível — a lacuna é informação (ainda cabe gente) e
   escondê-la faria os postos seguintes parecerem ter outro número. */
.esq-posto--vazio .esq-posto__nome--vazio{color:var(--texto-2);font-style:italic}

/* ---- Página 404 ---------------------------------------------------------
   Só o layout desta página. Botão, tipografia e cor vêm do sistema do site
   (.btn--primario, .btn--linha, --c-marca), para a página de erro sair na
   marca de cada cliente sem repetir nenhuma cor aqui.

   O código do erro é grande mas apagado: o destaque pertence ao caminho de
   volta, não ao número. */
/* padding-BLOCK, não `padding`: o atalho zeraria o padding-inline que o
   .wrap desta mesma div dá, e no celular os botões encostavam na borda. */
.erro404{max-width:60ch;margin-inline:auto;padding-block:clamp(40px,7vw,76px);text-align:center}
.erro404__cod{
  margin:0;font-size:clamp(3.4rem,11vw,5.6rem);font-weight:800;line-height:1;
  color:var(--c-marca);opacity:.20;
}
.erro404__titulo{margin:4px 0 14px;font-size:clamp(1.35rem,3.4vw,1.95rem);line-height:1.25}
.erro404__texto{margin:0 0 30px;line-height:1.65;color:var(--c-texto)}
.erro404__acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.erro404__busca{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.erro404__busca input{
  flex:1 1 260px;max-width:340px;padding:12px 15px;font:inherit;
  border:1px solid var(--c-claro);border-radius:var(--raio);
  background:var(--c-branco);color:var(--c-texto);
}
.erro404__busca input:focus-visible{outline:3px solid var(--c-marca);outline-offset:2px}
.erro404__busca button{
  padding:12px 24px;font:inherit;font-weight:700;cursor:pointer;
  border-radius:var(--raio);border:2px solid var(--c-marca);
  background:transparent;color:var(--c-marca-txt);
}
.erro404__busca button:hover{background:var(--c-marca);color:var(--c-marca-sobre)}
/* No celular os controles empilham: botão espremido ao lado do campo vira
   alvo de toque pequeno demais. */
@media (max-width:560px){
  .erro404__acoes{flex-direction:column}
  .erro404__acoes .btn{width:100%}
  .erro404__busca input,.erro404__busca button{flex:1 1 100%;max-width:none}
}

/* ---- Assinatura da Shooting House (rodapé do site e da loja) -------------
   Discreta em repouso — a marca do cliente é a estrela da página — e ganha
   contorno e brilho no hover. Pílula própria para não ser confundida com os
   links legais ao lado; por isso reafirma cor e sublinhado, que a regra
   `.rodape-legal a` acima já tinha definido. */
.sh-assin{
  display:inline-flex;align-items:center;gap:10px;
  margin-left:auto;padding:7px 12px 7px 13px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(255,255,255,.04);
  text-decoration:none;line-height:1;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.sh-assin:hover{
  border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.09);
  transform:translateY(-1px);text-decoration:none;
}
.sh-assin__rot{
  font-size:.66rem;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(255,255,255,.46);white-space:nowrap;
}
.sh-assin:hover .sh-assin__rot{color:rgba(255,255,255,.66)}
.sh-assin__marca{display:inline-flex;align-items:center;gap:8px}
.sh-assin__selo{display:block;flex:none;border-radius:9px}
/* O selo azul acende no hover — sinal de que a assinatura é clicável. */
.sh-assin:hover .sh-assin__selo{filter:brightness(1.14)}
.sh-assin__nome{
  font-size:.9rem;color:rgba(255,255,255,.80);white-space:nowrap;letter-spacing:.01em;
}
.sh-assin__nome b{font-weight:700;color:#fff}
.sh-assin:hover .sh-assin__nome{color:#fff}

/* Em telas estreitas o rodapé legal empilha: a assinatura perde o
   `margin-left:auto` (senão fica pendurada sozinha na direita) e o rótulo
   some, deixando só selo + nome. */
@media (max-width:560px){
  .sh-assin{margin-left:0;margin-top:6px}
  .sh-assin__rot{display:none}
}

/* ============================================================= Responsivo
   Quatro paradas de verdade: 1440 (padrão), 1024, 768 e 375. */
@media (max-width:1024px){
  .grade-4{grid-template-columns:repeat(2,1fr)}
  .logo-bar .wrap{min-height:80px}
  .nav-item > a{padding:16px 11px;letter-spacing:.3px}
}

/* Abaixo de 900 o menu horizontal não cabe: vira lista dentro do <details>.
   O HTML é o mesmo — nenhuma rota some do índice do Google. */
@media (max-width:900px){
  .nav .wrap{display:block}
  .nav-toggle{display:block}
  /* Menu real da federação: 9 itens de primeiro nível e 43 no total. Aberto
     por inteiro ele passava de 2000px e empurrava a home para baixo — aqui
     o painel rola dentro de si mesmo, sem JS e sem esconder link nenhum. */
  .nav-lista{display:none;flex-direction:column;padding-bottom:12px;max-height:min(68vh,520px);overflow-y:auto;overscroll-behavior:contain}
  .nav-toggle[open] + .nav-lista{display:flex}
  .nav-item{width:100%}
  .nav-item > a{padding:13px 4px;min-height:48px;border-bottom:1px solid rgba(128,128,128,.22)}
  .nav-item.tem-filhos > a::after{margin-left:auto;margin-top:-4px}
  /* No celular o submenu fica aberto e indentado: um toque a menos e
     nenhuma armadilha de hover em tela sensível ao toque. */
  .submenu,.submenu .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--c-marca);border-radius:0;
    background:transparent;min-width:0;padding:4px 0 8px 14px;margin-left:4px;
  }
  .submenu a{color:var(--c-nav-txt);opacity:.85;padding:10px 4px;min-height:44px;display:flex;align-items:center}
  .submenu a:hover{background:transparent;opacity:1;color:var(--c-marca)}
  /* O terceiro nível herdava --texto-2 da regra de desktop, que é cinza
     escuro, sobre a barra escura do menu: media 1,05:1 de contraste, ou
     seja, invisível. Aqui ele volta para a cor do menu, um degrau mais
     apagado que o segundo nível. */
  .submenu .submenu a{color:var(--c-nav-txt);opacity:.72;font-size:var(--fs--2)}

  /* No celular o painel é lista, e lista se lê alinhada à esquerda. O
     centralizado vinha do desktop e empurrava os itens 78px para dentro. */
  .nav .wrap,.nav-lista{justify-content:flex-start;text-align:left}

  /* O botão que abre submenu precisa parecer e medir como os links
     vizinhos, senão a lista fica com dois ritmos. */
  .nav-item > .nav-rotulo{
    width:100%;padding:13px 4px;min-height:48px;
    border-bottom:1px solid rgba(128,128,128,.22);
  }
  .nav-item.tem-filhos > .nav-rotulo::after{margin-left:auto;margin-top:-4px}
  .logo-bar .wrap{justify-content:center;text-align:center}
  .logo-bar .marca{justify-content:center}
  .logo-bar .apoio{margin-left:0;justify-content:center;width:100%}
  /* Os atalhos de texto da faixa da logo repetem o menu, que aqui já está
     a um toque de distância. Sobra só o botão de ação. */
  .logo-bar .apoio a:not(.btn){display:none}
  /* A busca vira uma linha inteira, centralizada, abaixo da logo. É atalho
     de verdade no celular, então não some — só reflui. */
  .logo-bar .busca-topo{order:3;margin-left:0;width:100%;max-width:460px}
  .logo-bar .busca-topo input{width:100%}
}

@media (max-width:768px){
  .grade-3{grid-template-columns:repeat(2,1fr)}
  .topbar .wrap{justify-content:center}
  .topbar .contato{margin-right:0;justify-content:center;width:100%}
}

@media (max-width:560px){
  :root{--fs-base:1rem;--escala:1.2}
  .grade-2,.grade-3,.grade-4{grid-template-columns:1fr}
  .atalhos .wrap{gap:2px 16px;padding-block:12px}
  /* No celular a barra de serviço fica com telefone e WhatsApp; o e-mail
     completo estourava para uma terceira linha só dele. */
  .topbar .contato a:nth-child(n+3){display:none}
  .lista li{align-items:flex-start}
  .btn{width:100%}
  .btn--auto{width:auto}
}

/* ------------------------------------------------------------ Competição
   Telas de resultado, inscrito, ranking e súmula. São as internas com mais
   tabela e mais níveis de título, e as únicas que precisam de forma própria
   além do que .tabela já dá.

   Nada aqui depende de JavaScript: as abas são links, o seletor de
   temporada é uma tira de links e o cabeçalho fixo é `position:sticky`.
   É requisito de SEO — resultado de prova é o conteúdo que traz busca
   orgânica para o clube, e o que não está no HTML não é indexado. */

/* .......................................... Contexto da prova (o topo)
   Quem chega de busca cai direto num resultado. Sem esta faixa a página
   começa em "Resultados" e o leitor não sabe de que etapa, de que
   campeonato nem de que data ela é. */
.painel-prova{
  border:1px solid var(--linha);border-left:4px solid var(--c-marca);
  border-radius:var(--raio);background:#fff;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  margin:0 0 clamp(18px,2.4vw,26px);
}
.painel-prova .contexto{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--c-marca-txt);margin:0 0 6px;line-height:1.3;
}
/* Sem teto de 34ch: o nome da prova é dado do cliente e costuma ser longo
   ("6ª Etapa Paranaense de Trap 50 - Data Liga Nacional"). Com o teto,
   quebrava em duas linhas no meio de um cartão largo e vazio à direita.
   O balanceamento evita a última linha com uma palavra solta. */
.painel-prova h2{font-size:var(--fs-2);margin:0;line-height:1.2;text-wrap:balance}
.painel-prova .fatos{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;
  font-size:var(--fs--1);color:var(--texto-2);
}
.painel-prova .fatos > span{display:inline-flex;align-items:baseline;gap:7px}
.painel-prova .fatos b{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--texto-3);
}
.painel-prova .fatos strong{font-weight:700;color:var(--c-texto)}

/* ................................................... Abas de uma prova
   As sete visões da mesma etapa (resultado, categorias, classes, clubes,
   equipes, agrupados, inscritos) eram sete URLs sem ligação entre si: o
   visitante tinha que voltar no navegador para trocar de visão. */
.abas{
  display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:2px solid var(--linha);
  margin:0 0 clamp(22px,3vw,32px);
}
.abas a{
  flex:none;display:inline-flex;align-items:center;min-height:46px;
  padding:11px 16px;margin-bottom:-2px;white-space:nowrap;
  font-size:var(--fs--1);font-weight:700;color:var(--texto-2);
  border-bottom:3px solid transparent;
}
.abas a:hover{color:var(--c-marca-txt);background:var(--c-claro)}
.abas a[aria-current]{color:var(--c-marca-txt);border-bottom-color:var(--c-marca);background:var(--c-claro)}
.abas a:focus-visible{outline:3px solid var(--c-marca);outline-offset:-3px}

/* ............................................. Navegação de temporada
   O site que estamos substituindo resolve isto com um <select> que navega
   por JavaScript — o que deixa todas as temporadas anteriores fora do
   índice de busca. Aqui cada ano é um link de verdade. */
.temporadas{
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  background:var(--c-claro);border-radius:var(--raio);
  padding:12px 16px;margin:0 0 clamp(22px,3vw,30px);
}
.temporadas .rot{
  flex:none;font-size:var(--fs--2);font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--texto-2);
}
/* Quebra em linhas em vez de rolar: uma tira que rola na horizontal esconde
   metade das temporadas sem nenhum sinal de que há mais à direita. Um
   cliente antigo tem vinte anos de histórico, e todos precisam estar a um
   toque — é justamente o histórico que a versão em JavaScript perdia. */
.anos{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.anos a{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;min-height:40px;padding:0 12px;
  border:1px solid var(--linha);border-radius:6px;background:#fff;
  font-size:var(--fs--1);font-weight:700;font-variant-numeric:tabular-nums;
}
.anos a:hover{border-color:var(--c-marca);color:var(--c-marca-txt)}
.anos a[aria-current]{background:var(--c-marca);border-color:var(--c-marca);color:var(--c-marca-sobre,#fff)}

/* ................................................ Linha de prova
   Índice de campeonatos e de etapas.

   Já foi cartão, com o nome e quatro botões dentro. Com sete campeonatos
   por temporada — e trezentas etapas no índice — isso é muita rolagem para
   pouca leitura: lista de prova é conteúdo para VARRER, e varredura pede
   linha, não cartão. O nome ocupa a largura, as visões ficam compactas à
   direita, e a zebra de `.tabela` faz o olho não se perder na horizontal. */
.tabela td.nome a{font-weight:700}
.tabela td.nome a:hover{color:var(--c-marca-txt);text-decoration:underline;text-underline-offset:3px}
.tabela td.nome small{
  display:block;margin-top:3px;font-weight:400;font-size:var(--fs--2);
  color:var(--texto-3);line-height:1.35;
}
.tabela th.celula-acoes,
.tabela td.celula-acoes{width:1%;white-space:nowrap;text-align:right}

/* Sem quebra: é o que faz a coluna de ação ocupar exatamente a sua largura
   (o `width:1%` acima só funciona sobre conteúdo que não quebra) e mantém a
   altura da linha constante — quatro links empilhados em três alturas
   diferentes destroem a varredura vertical que a tabela existe para dar. */
.acoes-linha{display:flex;flex-wrap:nowrap;gap:4px 12px;align-items:center;justify-content:flex-end}
.acoes-linha a{
  display:inline-flex;align-items:center;min-height:34px;white-space:nowrap;
  font-size:var(--fs--2);font-weight:700;color:var(--texto-2);line-height:1.2;
}
.acoes-linha a:hover{color:var(--c-marca-txt);text-decoration:underline;text-underline-offset:3px}
/* A ação principal ganha moldura — sem ela, quatro links de mesmo peso não
   dizem por onde começar. */
.acoes-linha a.principal{
  padding:0 12px;border:1px solid var(--c-marca);border-radius:5px;
  color:var(--c-marca-txt);
}
.acoes-linha a.principal:hover{background:var(--c-marca);color:#fff;text-decoration:none}

/* ......................................... Índice interno da página
   A página de resultado agrupado de uma etapa grande passa de mil linhas.
   Os atalhos levam direto à modalidade/divisão, sem rolagem cega. */
.atalhos-pagina{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(22px,3vw,30px)}
.atalhos-pagina a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 13px;
  border:1px solid var(--linha);border-radius:20px;background:#fff;
  font-size:var(--fs--2);font-weight:700;color:var(--texto-2);
}
.atalhos-pagina a:hover{border-color:var(--c-marca);color:var(--c-marca-txt)}

/* ............................................ Hierarquia dos títulos */
.conteudo h2.modalidade-titulo{
  font-size:var(--fs-2);margin:clamp(32px,4vw,44px) 0 4px;padding-top:12px;
  border-top:2px solid var(--linha);
}
.conteudo h2.modalidade-titulo:first-child{margin-top:0;border-top:0;padding-top:0}
.conteudo h2.modalidade-titulo small{font-size:var(--fs--1);font-weight:500;color:var(--texto-3);margin-left:10px;white-space:nowrap}
.conteudo h3.divisao{font-size:var(--fs-1);margin:26px 0 6px;scroll-margin-top:16px}
.conteudo h3.divisao small{font-size:var(--fs--1);font-weight:500;color:var(--texto-3);margin-left:8px}
.conteudo h4.faixa{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--c-marca-txt);margin:24px 0 8px;
}

/* Índice de categorias/classes: no plugin isto é um <select> em JS; aqui
   são links, para o resultado entrar no índice de busca. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 28px}
.chips li{
  border:1px solid var(--linha);border-radius:6px;background:#fff;
  font-size:var(--fs--1);font-weight:600;
}
.chips li > a,.chips li{display:flex}
.chips li > a{align-items:center;min-height:44px;padding:0 15px;width:100%}
.chips li:not(:has(a)){align-items:center;min-height:44px;padding:0 15px}
.chips li:hover{border-color:var(--c-marca);color:var(--c-marca-txt)}

.somatorio{display:inline-block;font-size:var(--fs--2);color:var(--texto-2);margin-right:10px;white-space:nowrap}
/* Uma série de trap tem 25 pratos e uma equipe soma até seis atiradores.
   Em linha única a tabela fica mais larga que a tela dentro do container
   que rola, e a coluna de total sai de vista sem nenhum aviso. Um limite de
   largura na célula força a quebra e devolve o total para dentro. */
.lancamentos{display:flex;flex-wrap:wrap;gap:2px 0;max-width:34ch}
.tabela td.atiradores{max-width:46ch;white-space:normal}
.prato{display:inline-block;min-width:20px;text-align:center;font-size:var(--fs--2)}
.prato.acerto{color:#1b7a43}
.prato.erro{color:#b03024}

/* ................................................. Tabela de resultado
   Três decisões: número alinhado à direita com dígito de largura fixa (a
   coluna de pontos só é comparável assim), pódio destacado e cabeçalho que
   acompanha a rolagem nas tabelas longas. */
.tabela .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela th.num{text-align:right}
.tabela .pos{width:1%;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabela .nome{font-weight:600}
.tabela tbody tr:hover{background:rgba(0,0,0,.05)}
.tabela tbody tr.podio{background:rgba(0,0,0,.035)}
.tabela tbody tr.podio .nome{font-weight:700}

.medalha{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-size:var(--fs--2);font-weight:700;color:#2b2410;
}
.medalha--1{background:#e8b93f}
.medalha--2{background:#c3c8cf}
.medalha--3{background:#d79a6a}

/* ..................................... Logo do clube na classificação
   Quadro de tamanho fixo para as linhas não dançarem de altura conforme a
   proporção da logo, e `contain` porque recortar a marca de um clube a
   descaracteriza — mesma regra de .filiado-marca. Clube sem logo cai no
   monograma: célula vazia quebraria o alinhamento da coluna inteira. */
.tabela .logo-col{width:1%}
.tabela td.logo-clube{width:1%;padding-top:4px;padding-bottom:4px}
.tabela td.logo-clube .marca{position:relative;display:block;width:34px;height:34px}
/* A imagem cobre a sigla quando carrega; quando não carrega fica com
   tamanho zero e a sigla continua visível atrás. */
.tabela td.logo-clube img{
  position:absolute;inset:0;margin:auto;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;object-position:center;
}
.tabela td.logo-clube .sem-logo{
  position:absolute;inset:0;
  display:grid;place-items:center;
  border-radius:4px;background:var(--c-claro);
  font-size:var(--fs--2);font-weight:800;letter-spacing:.5px;color:var(--texto-3);
}

/* Nome de clube é longo ("CLUBE DE TIRO X - Associação de Tiro e Lazer &
   Cia"). Sem largura mínima ele quebra em seis linhas e uma linha da
   tabela fica mais alta que a tela do telefone; a caixa já rola na
   horizontal, então a largura extra não custa nada. */
.tabela td.clube-nome{min-width:16ch}

/* Série que fechou o máximo possível. A cor não pode ser o único sinal,
   então o negrito carrega a mesma informação e o leitor de tela recebe o
   texto "(série perfeita)" junto do número. */
.tabela .serie-perfeita{color:#b03024;font-weight:700}
.tabela td.serie{font-variant-numeric:tabular-nums}

.tabela .sumula-col{width:1%;white-space:nowrap}
.tabela .link-sumula{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 12px;
  border:1px solid var(--linha);border-radius:6px;
  font-size:var(--fs--2);font-weight:700;
}
.tabela .link-sumula:hover{border-color:var(--c-marca);color:var(--c-marca-txt,var(--c-marca))}
.tabela .vazio-celula{color:var(--texto-3)}

/* Cabeçalho fixo só faz sentido onde a caixa rola: por isso a altura
   máxima vem junto, e só nas tabelas longas (a view decide pela contagem
   de linhas). */
.tabela-scroll--alta{max-height:min(74vh,760px);overflow:auto}
.tabela-scroll--alta thead th{position:sticky;top:0;z-index:2}

/* .......................................... Tabela larga no telefone
   289 inscrições em 6 colunas a 375px não cabem em tabela nenhuma. Abaixo
   de 640px cada linha vira um cartão com o nome como título e os demais
   campos rotulados — mesmo HTML, sem rolagem horizontal. */
@media (max-width:640px){
  .tabela--fichas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tabela--fichas,
  .tabela--fichas tbody{display:block;width:100%}
  .tabela--fichas tr{
    display:flex;flex-direction:column;
    border:1px solid var(--linha);border-left:3px solid var(--linha);
    border-radius:var(--raio);background:#fff;
    padding:12px 14px;margin-bottom:10px;
  }
  .tabela--fichas tbody tr:nth-child(even){background:#fff}
  .tabela--fichas tbody tr:hover{background:#fff}
  .tabela--fichas tbody tr.podio{border-left-color:var(--c-marca)}
  .tabela--fichas td{
    display:flex;gap:14px;align-items:baseline;justify-content:space-between;
    text-align:right;border:0;padding:5px 0;width:auto;
  }
  /* No cartão o nome do clube aparece logo abaixo, escrito por extenso:
     a logo repetiria a mesma informação gastando uma linha inteira e um
     segundo rótulo "Clube". Fica só no formato tabela. */
  .tabela--fichas td.logo-clube{display:none}
  /* Aqui o link é tocado com o dedo, não clicado com o ponteiro. */
  .tabela--fichas .link-sumula{min-height:44px;padding:0 16px}

  .tabela--fichas td::before{
    content:attr(data-rotulo);flex:none;text-align:left;
    font-size:var(--fs--2);font-weight:700;letter-spacing:.8px;text-transform:uppercase;
    color:var(--texto-3);
  }
  /* O nome é a âncora do cartão: sobe para o topo e vira o título. */
  .tabela--fichas td.nome{
    order:-1;display:block;text-align:left;font-size:var(--fs-0);font-weight:700;
    padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--linha);
  }
  .tabela--fichas td.nome::before{display:none}
  .tabela--fichas .num{text-align:right}
  /* No cartão a coluna de ação vira o rodapé da ficha, com alvo de toque
     cheio — é onde o dedo vai depois de ler o nome. */
  .tabela--fichas td.celula-acoes{
    display:block;width:auto;text-align:left;white-space:normal;
    border-top:1px solid var(--linha);margin-top:8px;padding-top:10px;
  }
  .tabela--fichas td.celula-acoes::before{display:none}
  .tabela--fichas .acoes-linha{justify-content:flex-start;flex-wrap:wrap;gap:8px 16px}
  .tabela--fichas .acoes-linha a{min-height:42px}
  .tabela-scroll--alta{max-height:none;overflow:visible}

  /* Vinte temporadas em chips de 62px ocupavam seis linhas antes do
     conteúdo. Menores, cabem cinco por linha e continuam com alvo de toque
     de 38px — nenhuma temporada sai da tela. */
  .temporadas{padding:12px}
  .anos{gap:5px}
  .anos a{min-width:52px;min-height:38px;padding:0 8px;font-size:var(--fs--2)}

  .painel-prova h2{font-size:var(--fs-1)}
}

/* ==========================================================================
   ENQUADRAMENTO DE IMAGEM
   --------------------------------------------------------------------------
   O acervo dos clientes é irregular: banner deitado de 1920x400 convive com
   foto de celular em pé e com arte quadrada de post. Deixar cada imagem no
   tamanho natural desalinha a grade inteira e é o que faz um site parecer
   improvisado.

   A regra é sempre a mesma: o CONTÊINER define a proporção, a imagem
   preenche com `cover` e o excesso é cortado. Assim a grade fica alinhada
   independentemente do que o cliente subiu.

   `object-position: center 35%` em vez do centro puro porque em foto de
   pessoa o assunto costuma estar no terço superior — centralizar corta
   cabeça. Em foto de prova, mantém o atirador e descarta chão.
   ========================================================================== */

.moldura{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--c-claro);
  border-radius:var(--raio);
  /* Evita o pulo de layout enquanto a imagem carrega. */
  aspect-ratio:16/10;
}
.moldura > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
}

/* Proporções por finalidade. */
.moldura--larga  {aspect-ratio:21/9}   /* faixa de topo, banner deitado    */
.moldura--capa   {aspect-ratio:16/9}   /* capa de notícia                  */
.moldura--cartao {aspect-ratio:16/10}  /* cartão em grade                  */
.moldura--quadro {aspect-ratio:1}      /* galeria, avatar, logo de parceiro */
.moldura--retrato{aspect-ratio:3/4}    /* diretoria, atleta                */

/* Logo de parceiro é a exceção: cortar uma marca a descaracteriza, então
   ela cabe inteira dentro do quadro, com respiro. */
.moldura--marca{
  aspect-ratio:3/2;
  background:var(--c-branco);
  display:grid;
  place-items:center;
  padding:18px;
}
.moldura--marca > img{
  width:auto;height:auto;
  max-width:100%;max-height:100%;
  object-fit:contain;
  /* Marca colorida sobre fundo branco cansa numa grade de 12; o cinza
     uniformiza e o hover devolve a cor. */
  filter:grayscale(1);opacity:.72;transition:.2s ease;
}
.moldura--marca:hover > img{filter:none;opacity:1}

/* Foto que veio pequena demais não deve ser esticada até borrar: o
   contêiner mantém a proporção e a imagem fica centralizada no tamanho
   natural. */
.moldura > img[width]:not([width=""]){max-width:100%}

/* Aplica o mesmo enquadramento onde a marcação já existia. */
.card .foto{aspect-ratio:16/10}
.card .foto img{object-position:center 35%}
.foto-item{aspect-ratio:4/3}
.foto-item img{object-position:center 35%}

/* Imagem dentro de texto livre (notícia, página do editor): o cliente cola
   HTML com width fixo, e isso estoura o layout no celular. A imagem pode
   passar da coluna de leitura (sangra até 860px), o texto não. */
.prosa img,.corpo-noticia img{
  height:auto;max-width:min(100%,860px);
  border-radius:var(--raio);
  margin-block:1.4em;
}
.prosa iframe,.corpo-noticia iframe{width:100%;max-width:min(100%,860px);aspect-ratio:16/9;height:auto;border:0;border-radius:var(--raio);margin-block:1.4em}

@media (prefers-reduced-motion: reduce){
  .moldura--marca > img{transition:none}
}


/* ====================================== Responsivo — internas e rodapé == */
@media (max-width:1180px){
  .rodape-grade{grid-template-columns:1.4fr 1fr 1fr}
  .rodape-sobre{grid-column:1 / -1}
  .rodape-sobre p{max-width:60ch}
}
@media (max-width:900px){
  /* Três colunas de links em 700px de largura deixam "Regulamentos" e o
     endereço quebrando em toda linha. Duas colunas cabem inteiras. */
  .rodape-grade{grid-template-columns:repeat(2,1fr)}
  .contato-grid{grid-template-columns:1fr}
  .modalidade{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}
@media (max-width:768px){
  .modalidade{grid-template-columns:1fr;max-width:68ch}
  /* Na coluna única a foto vira faixa: 16/9 em 340px de largura ficaria um
     selo perdido no topo do texto. */
  .modalidade .moldura{aspect-ratio:16/9}
  .agenda li{grid-template-columns:64px minmax(0,1fr);row-gap:10px}
  .agenda .acao{grid-column:2;justify-self:start}
}
@media (max-width:560px){
  .rodape-grade{grid-template-columns:1fr;gap:30px}
  .rodape-sobre p{max-width:none}
  .rodape-legal{justify-content:flex-start}
  .grade-parceiros{grid-template-columns:repeat(2,1fr)}
  .grade-fotos{grid-template-columns:repeat(2,1fr)}
  .pagina-topo h1::after{margin-top:14px}
  .form{padding:18px 16px}
}

@media (prefers-reduced-motion: reduce){
  .lista-docs a:hover,.grade-fotos a:hover .moldura,.grade-fotos .moldura:hover{transform:none}
  .parceiro img{transition:none}
}

/* ==========================================================================
   CARTÃO INTEIRO CLICÁVEL
   --------------------------------------------------------------------------
   O título já era o link, e o "Leia mais" era decorativo — mas é justamente
   nele que as pessoas clicam, e nada acontecia.

   A solução não é transformar o cartão inteiro num <a>: isso faria o leitor
   de tela anunciar a data, o resumo e o "Leia mais" como se fossem o texto
   do link. Em vez disso, o link do título se estica por cima do cartão. Fica
   um único link no HTML, com o texto certo, e a área de clique inteira.

   Para seleção de texto continuar funcionando, o esticado fica ABAIXO do
   conteúdo no empilhamento (z-index), e só a área vazia recebe o clique.
   ========================================================================== */
.card{position:relative;isolation:isolate}
.card h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}
/* Nada dentro do cartão pode ficar acima do link esticado: o "Leia mais",
   a data e o resumo estavam capturando o clique e a área continuava morta.
   O link do título fica por cima, e os elementos decorativos deixam o
   ponteiro passar. */
.card .corpo > *{position:static}
.card .mais,.card time{pointer-events:none}

/* O rótulo continua decorativo, mas agora tem afordância de link: ele
   reage junto com o cartão. */
.card:hover .mais,.card:focus-within .mais{text-decoration:underline;text-underline-offset:3px}

/* Foco visível no cartão inteiro, e não só nas palavras do título. */
.card:focus-within{outline:3px solid var(--c-marca);outline-offset:2px}
.card h3 a:focus-visible{outline:none}

/* dt/dd em duas colunas: o rótulo curto ancora e o valor alinha, sem virar
   uma lista de "Cidade: x" repetindo o rótulo em fonte cheia. */
.filiado dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:14px 0 0;font-size:var(--fs--1)}
.filiado dt{font-weight:700;color:var(--texto-3);white-space:nowrap}
.filiado dd{margin:0}
.filiado dd a:hover{color:var(--c-marca-txt,var(--c-marca));text-decoration:underline}
@media (max-width:420px){
  .filiado dl{grid-template-columns:1fr;gap:0 0}
  .filiado dt{margin-top:8px}
}


/* A logo cabe INTEIRA (contain) e nunca é cortada: recortar a marca de um
   clube filiado a descaracteriza. Altura fixa mantém a grade alinhada
   mesmo com logos de proporções muito diferentes. */
.filiado-marca{
  height:132px;display:grid;place-items:center;padding:22px;
  background:var(--c-claro);border-bottom:1px solid var(--linha);
}
.filiado-marca img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.filiado-marca .monograma{
  font-family:var(--fonte-titulo);font-size:2rem;font-weight:800;letter-spacing:1px;
  color:var(--c-marca-txt,var(--c-marca));opacity:.55;
}

.filiado-corpo{padding:22px;display:flex;flex-direction:column;flex:1}
.filiado h2{font-size:var(--fs-0);line-height:1.3;margin:0}
.filiado .cidade{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--texto-3);margin:6px 0 0;
}
.filiado dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:16px 0 0;font-size:var(--fs--1)}
.filiado dt{font-weight:700;color:var(--texto-3);white-space:nowrap}
.filiado dd{margin:0;min-width:0}
.filiado dd.quebra{overflow-wrap:anywhere}
.filiado dd a:hover{color:var(--c-marca-txt,var(--c-marca));text-decoration:underline}
.filiado-site{
  margin-top:auto;padding-top:16px;font-size:var(--fs--1);font-weight:700;
  color:var(--c-marca-txt,var(--c-marca));
}
.filiado-site:hover{text-decoration:underline}

@media (max-width:420px){
  .filiado dl{grid-template-columns:1fr;gap:0}
  .filiado dt{margin-top:10px}
}

/* ======================================= CARTÃO DE PRÓXIMA ETAPA (bloco)
   Escopado em `.etapas` de propósito: o modelo 04 reaproveita a classe
   `.etapa-card` numa coluna lateral com marcação própria, sobre outro
   fundo. As regras genéricas de `.etapa-card` lá em cima continuam sendo
   as dele; daqui para baixo é só o bloco de home.

   A ordem de leitura do cartão é a ordem da pergunta do atleta: quando é,
   dá para se inscrever, onde vejo o resultado.

   As três cores de estado são fixas (verde/âmbar/cinza) e NÃO derivam do
   tema: são semáforo, não marca — e um cliente de marca verde não pode
   fazer "encerrada" parecer "aberta". Elas aparecem só como ponto e como
   filete; o texto do estado é branco, então o significado nunca depende
   da cor sozinha. */
.etapas{
  --e-abre:#4ade80;
  --e-agora:#fbbf24;
  --e-fecha:rgba(255,255,255,.40);   /* 3:1 medido contra a superfície do cartão */
}

/* Superfície opaca derivada do tema, no lugar do rgba(255,255,255,.07):
   com fundo translúcido o contraste do texto dependia da composição alfa
   e não dava para afirmar. Ver a derivação em layouts/base.blade.php. */
.etapas .etapa-card{
  background:var(--c-topo-cartao);
  border:1px solid rgba(255,255,255,.11);
  padding:16px 18px 15px;
  gap:14px;
  position:relative;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.etapas .etapa-card:hover{border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.etapas .etapa-card:focus-within{border-color:rgba(255,255,255,.45)}
/* Filete de estado: dá para varrer a grade e achar a etapa aberta sem ler. */
.etapas .etapa-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--e-fecha);
}
.etapas .e--aberta::before{background:var(--e-abre)}
.etapas .e--andamento::before{background:var(--e-agora)}

/* ------------------------------------------------- Topo: data + identidade */
.etapa-topo{display:flex;gap:13px;align-items:flex-start}
/* A data era uma linha de texto com o mesmo peso do resto. É o primeiro
   dado que o atleta procura, então virou bloco. aria-hidden: o valor
   acessível está no <time> do período, que é texto de verdade. */
/* O fundo do bloco de data é --c-topo (a faixa), e não um branco
   translúcido por cima do cartão: assim o mês pode usar --c-topo-acento,
   que é calculado exatamente contra essa cor e tem 4.5:1 por construção.
   Com o rgba(255,255,255,.09) que estava aqui o chip clareava e o mês caía
   para 4.37:1 — o mesmo erro de medir o acento contra a superfície errada. */
.etapa-data{
  flex:none;min-width:58px;margin:0;padding:9px 9px 8px;
  text-align:center;line-height:1;
  background:var(--c-topo);border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.etapa-data .dia{
  display:block;font-family:var(--fonte-titulo);font-weight:700;
  font-size:clamp(1.45rem,1.9vw,1.7rem);color:#fff;letter-spacing:-.5px;
}
.etapa-data .mes{
  display:block;margin-top:4px;font-size:var(--fs--2);font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--c-topo-acento);
}
.etapa-data .ano{
  display:block;margin-top:3px;font-size:.62rem;font-weight:600;
  letter-spacing:1px;color:rgba(255,255,255,.66);
}

.etapa-ident{flex:1;min-width:0}
/* Era --c-marca cru sobre --c-topo, que é derivado da PRÓPRIA marca:
   verde sobre verde na Federação, 4.16:1 na laranja. Agora é o acento
   calculado contra a superfície do cartão, com 4.5:1 garantido. */
.etapa-camp{
  font-size:var(--fs--2);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--c-topo-cartao-acento);margin:0 0 4px;line-height:1.3;
}
.etapas .etapa-card h3{font-size:var(--fs-0);color:#fff;margin:0;line-height:1.25}
.etapas .etapa-card .periodo{
  margin:6px 0 0;font-size:var(--fs--2);color:rgba(255,255,255,.74);
}

/* ------------------------------------------- Rodapé: estado + barra de ação
   Estado e ações num só bloco com margin-top:auto. É o que faz a régua cair
   na mesma altura nos três cartões mesmo com título de uma ou duas linhas —
   antes cada cartão fechava numa altura diferente conforme o número de
   ações, e a fileira parecia torta. */
.etapa-rodape{margin-top:auto;padding-top:13px;border-top:1px solid rgba(255,255,255,.13)}

/* A RÉGUA NA MESMA ALTURA, INCLUSIVE QUANDO A BARRA QUEBRA
   `margin-top:auto` alinha o rodapé pelo pé do cartão, o que basta enquanto
   todas as barras de ação couberem em uma linha. Com quatro etapas numa
   tela de 1440 a coluna cai para ~294px, o cartão de três ações quebra em
   duas linhas e o filete dele sobe 40px em relação aos vizinhos — de novo a
   fileira torta.
   Subgrid resolve pelo lado certo: cada cartão passa a ocupar duas faixas
   da própria grade (conteúdo e rodapé), então a altura do rodapé é a mesma
   para a linha inteira e o filete é literalmente a mesma linha. Fica atrás
   de @supports porque o flex acima já é um resultado aceitável sem ele. */
@supports (grid-template-rows:subgrid){
  .etapas .etapa-card{
    display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:14px;
  }
  /* Dentro da subgrade o rodapé já ocupa a faixa inteira: o margin-top:auto
     do fallback empurraria a barra curta para o pé da faixa e o filete
     voltaria a ficar em altura diferente da barra que quebrou. */
  .etapas .etapa-rodape{margin-top:0;align-self:start}
}
.etapa-estado{
  display:flex;align-items:center;gap:7px;margin:0 0 9px;
  font-size:var(--fs--2);font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.etapa-estado .pt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--e-fecha)}
.e--aberta .etapa-estado{color:#fff}
.e--aberta .etapa-estado .pt{background:var(--e-abre);box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.e--andamento .etapa-estado .pt{background:var(--e-agora);box-shadow:0 0 0 3px rgba(251,191,36,.2)}

/* Uma ação preenchida por cartão, as outras como links compactos. Botão
   para tudo empilhava três linhas dentro de um cartão de 260px e o rodapé
   virava uma lista de botões soltos em vez de uma barra. */
.etapa-acoes{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;
  margin:0;padding:0;list-style:none;
}
.etapa-acoes a{
  display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding-block:6px;      /* alvo de toque no celular */
  font-size:var(--fs--2);font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#fff;line-height:1.2;
  /* text-decoration e não border-bottom: o filete precisa acompanhar o
     texto, não a base da caixa de 38px do alvo de toque. */
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(255,255,255,.32);
}
.etapa-acoes a:hover{text-decoration-color:#fff}
.etapa-acoes a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
/* A inscrição é a ação que o clube quer que aconteça: é a única preenchida.
   --c-marca-sobre e não #fff chapado: a marca só garante 3:1 contra branco
   (mínimo de preenchimento) e o rótulo do botão precisa de 4.5:1. */
.etapa-acoes a.destaque{
  background:var(--c-marca);color:var(--c-marca-sobre);
  padding:0 15px;border-radius:7px;min-height:38px;
  text-decoration:none;margin-right:2px;
}
.etapa-acoes a.destaque:hover{filter:brightness(1.08)}
.etapa-acoes a.destaque:focus-visible{outline-offset:2px}
.etapa-acoes .n{
  font-variant-numeric:tabular-nums;background:rgba(255,255,255,.16);
  color:#fff;padding:1px 7px;border-radius:20px;font-size:.92em;
}

/* Celular: o bloco da data encolhe para não comer a largura do título. */
@media (max-width:420px){
  .etapa-data{min-width:52px;padding:8px 7px}
  .etapa-data .dia{font-size:1.35rem}
  .etapa-acoes{gap:2px 12px}
}

/* ========================================== CALENDÁRIO: SELETOR DE VISTA
   O calendário tem duas vistas — lista (padrão) e grade anual — e a troca é
   URL, não JavaScript: /calendario/{ano} e /calendario/grade/{ano}. São dois
   <a href> pela mesma razão da tira de temporadas logo acima: um
   <select onchange> deixaria a segunda vista fora do índice de busca e fora
   do alcance de quem navega sem JS. */
.vistas{
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  background:var(--c-claro);border-radius:var(--raio);
  padding:12px 16px;margin:0 0 12px;
}
.vistas .rot{
  flex:none;font-size:var(--fs--2);font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--texto-2);
}
.vistas .opcoes{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.vistas .opcoes a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 16px;
  border:1px solid var(--linha);border-radius:6px;background:#fff;
  font-size:var(--fs--1);font-weight:700;
}
.vistas .opcoes a:hover{border-color:var(--c-marca);color:var(--c-marca-txt)}
.vistas .opcoes a[aria-current]{background:var(--c-marca);border-color:var(--c-marca);color:#fff}

/* ================================================ CALENDÁRIO: GRADE ANUAL
   Um bloco por mês, uma faixa por prova. É a vista que responde "como está
   distribuída a temporada" — a pergunta que a lista cronológica não responde.

   COR NÃO É O ÚNICO SINAL. O dado real traz os sete campeonatos da temporada
   com a MESMA cor e use_color_background = 0, então quem pinta é a paleta do
   controller. Mesmo com cores boas, daltônico não pode depender delas: cada
   faixa carrega o NÚMERO do campeonato (o mesmo da legenda) e um PADRÃO
   (liso, listra clara, listra escura) que alterna junto com a cor, e o nome
   da prova está escrito na própria linha. Sem enxergar uma cor sequer, a
   grade continua legível. */
.grade-legenda{
  background:var(--c-claro);border-radius:var(--raio);
  padding:18px 20px;margin:0 0 clamp(22px,3vw,32px);
}
.grade-legenda h2{
  font-size:var(--fs--1);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--texto-2);margin:0 0 12px;
}
.grade-legenda ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 20px;
}
.grade-legenda li{display:flex;align-items:center;gap:10px;font-size:var(--fs--1);min-width:0}
.grade-legenda .nome{min-width:0}
.grade-legenda .chave{
  flex:none;width:26px;height:26px;border-radius:5px;
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:var(--fs--2);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
.grade-dica{font-size:var(--fs--2);color:var(--texto-2);margin:14px 0 0;line-height:1.6}
.grade-dica kbd{
  font:inherit;font-weight:700;background:#fff;
  border:1px solid var(--linha);border-radius:4px;padding:1px 6px;
}

/* Cor + padrão. As cores da paleta passam 4.5:1 contra o branco do número. */
.pad-0,.pad-1,.pad-2{background-color:var(--cor)}
.pad-1{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.30) 0 3px,rgba(255,255,255,0) 3px 8px)}
.pad-2{background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.32) 0 2px,rgba(0,0,0,0) 2px 7px)}

.grade-mes-bloco{margin:0 0 clamp(20px,3vw,30px)}
.grade-mes-bloco > h2{
  font-size:var(--fs-0);margin:0 0 8px;letter-spacing:.6px;text-transform:uppercase;
}
.grade-mes-bloco > h2 span{color:var(--texto-3);font-weight:400}
.grade-mes-vazio{
  font-size:var(--fs--1);color:var(--texto-3);margin:0;
  padding:11px 16px;background:var(--c-claro);border-radius:8px;
}

/* A rolagem horizontal fica DENTRO do mês: a página inteira rolando de lado
   quebraria o menu, o cabeçalho e o rodapé junto. tabindex="0" no HTML é o
   que dá a esta caixa foco de teclado — sem ele, quem não usa mouse não
   chegaria ao dia 31 em tela estreita. */
.grade-rolagem{
  overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--linha);border-radius:var(--raio);background:#fff;
}
.grade-rolagem:focus-visible{outline:3px solid var(--c-marca);outline-offset:2px}

.grade-mes{
  --col-nome:210px;--col-dia:30px;
  border-collapse:separate;border-spacing:0;
  /* table-layout:fixed é o que impede o nome longo da prova de esticar a
     coluna do dia: com layout automático, um mês com "1ª ETAPA CAMPEONATO
     PARANAENSE DE TRAP AMERICANO - CLASSE B" jogaria a grade para 2000px. */
  table-layout:fixed;width:100%;
  min-width:calc(var(--col-nome) + var(--n-dias) * var(--col-dia));
  font-size:var(--fs--2);
}
.grade-mes th,.grade-mes td{
  padding:0;border-bottom:1px solid var(--linha);border-right:1px solid rgba(15,23,42,.06);
}
.grade-mes tr:last-child th,.grade-mes tr:last-child td{border-bottom:0}
.grade-mes th:last-child,.grade-mes td:last-child{border-right:0}

/* Coluna do nome grudada à esquerda: rolando o mês na horizontal, o que
   identifica a linha não pode sumir da tela. */
.grade-mes .c-nome{
  width:var(--col-nome);
  position:sticky;left:0;z-index:2;background:#fff;
  text-align:left;font-weight:600;font-size:var(--fs--1);line-height:1.25;
  padding:8px 12px;box-shadow:1px 0 0 var(--linha);
}
.grade-mes .c-nome a{color:inherit}
.grade-mes .c-nome a:hover{color:var(--c-marca-txt);text-decoration:underline;text-underline-offset:3px}
.grade-mes thead .c-nome{
  z-index:3;background:var(--c-claro);
  font-size:var(--fs--2);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--texto-2);
}
.grade-mes .c-dia{
  width:var(--col-dia);padding:5px 0;text-align:center;
  font-weight:700;color:var(--texto-2);font-variant-numeric:tabular-nums;
  background:var(--c-claro);
}
/* Fim de semana marcado na coluna inteira: é a leitura que o atirador faz
   primeiro, porque quase toda prova cai em sábado e domingo. */
.grade-mes .c-dia.fds{background:#dfe5ee;color:#3c4a5a}
.grade-mes .c-dia .n{display:block}
.grade-mes .c-dia .s{display:block;font-size:9px;font-weight:600;opacity:.75;text-transform:uppercase}

.grade-mes tbody tr:nth-child(even) th,.grade-mes tbody tr:nth-child(even) td{background:#fafbfc}
.grade-mes tbody td.vago.fds{background:rgba(15,23,42,.055)}
.grade-mes tbody tr:nth-child(even) td.vago.fds{background:rgba(15,23,42,.075)}

/* A faixa é UMA célula com colspan igual à duração da prova — por isso ela
   cobre o intervalo inteiro sem posicionamento absoluto e sem cálculo de px. */
.grade-mes td.faixa{padding:3px 2px;vertical-align:middle}
.barra{
  display:flex;align-items:center;justify-content:center;gap:1px;
  min-height:22px;padding:0 2px;border-radius:5px;
  color:#fff;font-weight:800;font-size:var(--fs--2);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);overflow:hidden;
}
/* Prova que atravessa o mês aparece nos DOIS meses (ver o porquê em
   CalendarController::meses). A ponta recortada perde o arredondamento e
   ganha o sinal de continuação, senão pareceriam duas provas diferentes. */
.barra.corta-inicio{border-top-left-radius:0;border-bottom-left-radius:0}
.barra.corta-fim{border-top-right-radius:0;border-bottom-right-radius:0}
.barra .num,.barra .segue{line-height:1}
.barra .segue{font-size:1.25em;opacity:.9}

/* A instrução de rolagem só existe onde a grade realmente rola. */
.grade-dica .so-estreito{display:none}

@media (max-width:900px){
  .grade-mes{--col-nome:160px;--col-dia:28px}
  .grade-dica .so-estreito{display:inline}
}
@media (max-width:600px){
  /* 31 colunas não cabem em 375px de jeito nenhum: o mês rola por dentro. A
     coluna do nome encolhe até o ponto em que ainda mostra duas linhas de
     texto e ainda sobra tela para uns oito dias de grade. */
  .grade-mes{--col-nome:118px;--col-dia:26px}
  .grade-mes .c-nome{padding:7px 9px;font-size:var(--fs--2)}
  .grade-legenda{padding:14px 16px}
  .grade-legenda ul{grid-template-columns:1fr}
  .vistas,.grade-legenda{margin-bottom:16px}
}

/* ================================================================ IMPRESSÃO
   A grade anual é feita para virar papel — é o que o atirador prega na
   parede. Não existe botão de imprimir com window.print() aqui: o requisito
   do projeto é não depender de JavaScript, e Ctrl+P já faz o trabalho desde
   que a folha esteja pronta. Então ela está.

   Vale para o site inteiro (nenhuma página quer imprimir o menu), e o que é
   específico da grade está preso às classes dela. */
@media print{
  @page{margin:12mm}

  html,body{background:#fff;color:#000;font-size:10pt}
  .pular,.topbar,.logo-bar,.nav,.atalhos,.rodape,.trilha,
  .temporadas,.vistas,.grade-dica{display:none !important}

  /* O cabeçalho da interna é um bloco escuro de altura de tela: no papel
     ele viraria uma página inteira de tinta. Fica só o título. */
  .pagina-topo{background:none !important;color:#000;padding:0 0 8px;min-height:0}
  .pagina-topo::before,.pagina-topo::after{display:none}
  .pagina-topo h1{font-size:17pt;color:#000}
  .pagina-topo-sub{display:none}
  .conteudo{padding:0;min-height:0}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:none}

  /* Impressora descarta cor de fundo por padrão — e aqui a cor É o dado. */
  .barra,.grade-legenda .chave,.grade-mes .c-dia,.grade-mes td.vago.fds{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  .grade-legenda{background:none;border:1px solid #999;padding:8px 10px;margin:0 0 8px;break-inside:avoid}
  .grade-legenda h2{font-size:8pt;margin-bottom:6px}
  .grade-legenda ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px 12px}
  .grade-legenda li{font-size:8pt}
  .grade-legenda .chave{width:16px;height:16px;font-size:7pt;border-radius:3px}

  /* Um mês nunca é partido ao meio pela quebra de página: metade de uma
     grade de 31 colunas no fim da folha não se lê. Não forço uma folha por
     mês — seriam doze páginas para caber o que cabe em três. */
  .grade-mes-bloco{break-inside:avoid;page-break-inside:avoid;margin:0 0 7px}
  .grade-mes-bloco > h2{font-size:9.5pt;margin-bottom:3px}
  .grade-rolagem{overflow:visible;border:0;border-radius:0}
  /* 118px de nome + 31 × 17px de dia = 645px: cabe na largura útil de um A4
     em retrato, sem forçar @page landscape (que valeria para o site todo). */
  .grade-mes{--col-nome:118px;--col-dia:17px;min-width:0;width:100%;font-size:6.5pt}
  .grade-mes .c-nome{position:static;box-shadow:none;font-size:6.5pt;padding:2px 5px;line-height:1.15}
  .grade-mes .c-dia{padding:2px 0;font-size:6pt}
  .grade-mes .c-dia .s{display:none}
  .grade-mes th,.grade-mes td{border-color:#999}
  .grade-mes td.faixa{padding:1.5px 1px}
  .barra{min-height:11px;font-size:6pt;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
  .grade-mes-vazio{background:none;border:1px dashed #bbb;padding:3px 6px;font-size:7pt}
}


/* ==========================================================================
   CLUBES FILIADOS
   --------------------------------------------------------------------------
   Grade de cartões: os clubes ficam lado a lado, o que dá para varrer a
   relação inteira sem rolar muito e deixa a marca de cada um com espaço
   próprio — que é o ponto da página.
   ========================================================================== */
.grade-filiados{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.filiado{
  display:flex;flex-direction:column;
  background:var(--c-branco);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;transition:.18s ease;
}
.filiado:hover{border-color:var(--c-marca);box-shadow:0 10px 28px rgba(10,20,38,.08);transform:translateY(-2px)}

/* Altura fixa alinha a grade mesmo com logos de proporções muito
   diferentes, e a logo cabe INTEIRA: recortar a marca de um clube
   filiado a descaracteriza. */
.filiado-marca{
  position:relative;
  height:118px;
  border-bottom:1px solid var(--linha);
  overflow:hidden;
}
/* A imagem cobre o monograma quando carrega; quando não carrega, o
   elemento fica com tamanho zero e a sigla continua visível atrás. */
/* A imagem cobre o quadro inteiro (e o monograma atrás). Sem o fundo
   branco de antes: com o quadro já neutro, a caixinha branca em volta da
   logo era mais uma borda sem função. */
.filiado-marca img{
  position:absolute;inset:0;margin:auto;
  max-width:78%;max-height:72%;width:auto;height:auto;object-fit:contain;
}
/*
 * O monograma é FALLBACK, e fallback não pode aparecer quando não é preciso.
 *
 * Antes cada clube tinha uma cor pastel própria, derivada do id. Como a
 * logo ocupa 76% do quadro, a cor sobrava numa moldura em volta — e cada
 * cartão da grade ficava de uma cor diferente. Lido junto, virava enfeite,
 * não identidade: parecia caderno de adesivos, não lista de federação.
 *
 * Agora o quadro é neutro e igual em todos, a logo manda no cartão, e a
 * sigla só aparece de fato quando a imagem não carrega — cinza, discreta,
 * do jeito que um marcador de ausência deve ser.
 */
.filiado-marca > span{
  position:absolute;inset:0;
  font-family:var(--fonte-titulo);font-weight:800;font-size:1.7rem;letter-spacing:1px;
  color:var(--texto-3);
  background:var(--c-claro);
  display:grid;place-items:center;
}

.filiado-corpo{padding:20px;display:flex;flex-direction:column;flex:1;min-width:0}
.filiado h2{font-size:var(--fs-0);line-height:1.28;margin:0}
.filiado-linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0 0}
.filiado-linha .local{font-size:var(--fs--1);color:var(--texto-2)}
.filiado-linha .cr{
  font-size:var(--fs--2);font-weight:700;letter-spacing:.8px;
  color:var(--texto-3);background:var(--c-claro);
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}

/* Contato sem rótulo: "Telefone 4533220428" gastava metade da largura
   repetindo o que o formato do dado já diz. */
.filiado-contato{
  display:flex;flex-direction:column;gap:5px;
  margin:auto 0 0;padding-top:14px;
  font-size:var(--fs--1);
}
.filiado-contato a{color:var(--c-marca-txt,var(--c-marca));font-weight:600}
.filiado-contato a:hover{text-decoration:underline}

@media (max-width:560px){
  .grade-filiados{grid-template-columns:1fr}
  .filiado-marca{height:96px}
}

/* Vista em lista dos filiados: mesma marcação, uma linha por clube.
   Ganha quando o visitante já sabe qual clube procura — a grade ganha
   quando ele está folheando. */
.filiados--lista{grid-template-columns:1fr;gap:10px}
.filiados--lista .filiado{
  display:grid;grid-template-columns:88px 1fr;align-items:center;
  gap:20px;padding:14px 18px;
}
.filiados--lista .filiado:hover{transform:none}
.filiados--lista .filiado-marca{height:60px;border-bottom:0;border-radius:8px}
.filiados--lista .filiado-marca > span{font-size:1.05rem}
.filiados--lista .filiado-corpo{padding:0}
.filiados--lista .filiado-contato{
  flex-direction:row;flex-wrap:wrap;gap:6px 18px;
  margin:8px 0 0;padding-top:0;
}
@media (max-width:560px){
  .filiados--lista .filiado{grid-template-columns:60px 1fr;gap:14px}
  .filiados--lista .filiado-marca{height:52px}
  .filiados--lista .filiado-contato{flex-direction:column;gap:4px}
}

/* Ícone de contato: alinhado pela linha de base do texto, e não pelo
   centro da caixa — centralizado ele flutua acima das letras. */
.ico{flex:none;vertical-align:-2px}
/* O ícone fica no topo e o texto quebra sozinho: com align-items:center o
   ícone escorregava para o meio do bloco quando o e-mail ocupava duas
   linhas. min-width:0 é o que permite o span encolher dentro do flex. */
.filiado-contato a{display:flex;align-items:flex-start;gap:7px}
.filiado-contato a > span{min-width:0;overflow-wrap:break-word}
.filiado-contato .ico{margin-top:3px}
.filiado-contato .ico{opacity:.75}
.filiado-contato a:hover .ico{opacity:1}
.topbar a,.dados-contato a{display:inline-flex;align-items:center;gap:6px}
.dados-contato .ico{opacity:.75}

/* ==========================================================================
   BARRA DE PRÉ-VISUALIZAÇÃO
   Ferramenta de trabalho, não faz parte do site. Só renderiza com
   config('site.preview'). Estilo deliberadamente neutro e escuro, para não
   ser confundida com o tema do cliente que ela está mostrando.
   ========================================================================== */
.preview-barra{
  background:#11131a;color:#e6e9ef;padding:18px 0 20px;
  border-top:2px solid #2b2f3d;
  font-family:system-ui,-apple-system,sans-serif;
}
.preview-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;margin-bottom:14px}
.preview-topo strong{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#8e97ab}
.preview-topo span{color:#8e97ab}
.preview-topo b{color:#e6e9ef}
.preview-dev{background:#fde68a;color:#15181d;border-radius:99px;padding:3px 12px;font-size:11.5px;font-weight:600}
.preview-sair{margin-left:auto;color:#7cc4ff;font-weight:600}
.preview-sair:hover{text-decoration:underline}

.preview-grupo{display:flex;align-items:flex-start;gap:12px;margin-top:10px;flex-wrap:wrap}
.preview-rot{
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f7789;
  min-width:52px;padding-top:11px;flex:none;
}

.preview-lista{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.preview-lista a{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:6px;border:1px solid #2b2f3d;background:#181b24;
  font-size:12.5px;line-height:1;min-height:36px;color:#c9cfdc;
}
.preview-lista a:hover{border-color:#4a5164;background:#20242f;color:#fff}
.preview-lista a b{font-variant-numeric:tabular-nums;color:#8e97ab;min-width:15px;text-align:right}
.preview-lista a.ativo{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.preview-lista a.ativo b{color:#cfe0ff}

/* Amostra de cor: o quadrado é a informação, o rótulo fica no title e no
   sr-only para leitor de tela — cor sozinha não comunica. */
.preview-cores{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0}
.preview-cores a{
  display:block;padding:5px;border-radius:6px;border:1px solid #2b2f3d;background:#181b24;
  line-height:0;
}
.preview-cores a:hover{border-color:#6b7382}
.preview-cores a.ativo{border-color:#fff;box-shadow:0 0 0 1px #fff}
.preview-cores i{display:block;width:24px;height:24px;border-radius:4px}

.preview-limpa{
  display:inline-flex;align-items:center;min-height:36px;padding:0 10px;
  font-size:12px;color:#7cc4ff;
}
.preview-limpa:hover{text-decoration:underline}

.preview-aviso{
  margin:14px 0 0;padding:10px 14px;border-radius:6px;
  background:#2a2213;border:1px solid #4a3a1a;color:#e8d7ae;
  font-size:12.5px;line-height:1.5;
}
.preview-aviso b{color:#fff}

/* Resultado do cache de página, escrito pelo middleware CachePagina
   direto no corpo da resposta (o site é verificado em zero <script>,
   então não há como pintar isto pelo navegador). Números tabulares
   porque o valor troca a cada F5 e a barra não pode dançar junto. */
.preview-cache-info{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:99px;
  background:#20242f;border:1px solid #333a4a;
  font-size:12px;line-height:1.4;color:#8e97ab;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.preview-cache-info b{letter-spacing:.8px;font-size:11px}
.preview-cache-info .cache-hit{color:#5fd39a}
.preview-cache-info .cache-miss{color:#f0b658}
.preview-cache-info .cache-bypass{color:#8e97ab}

@media (max-width:700px){
  .preview-grupo{flex-direction:column;gap:6px}
  .preview-rot{padding-top:0}
}
/* ============================================================
   CARROSSEL DE BANNERS
   Zero JavaScript: a faixa desliza por transform e os pontinhos são
   âncoras lidas com :target + :has(). Ver partials/banners.blade.php
   para o porquê de não escrevermos texto por cima do banner.
   ============================================================ */
.bn{position:relative;background:var(--c-escuro);overflow:hidden}
/* A faixa desliza com transform, não com rolagem.
   Rolagem exigiria script para os pontinhos funcionarem, e este site não
   carrega JavaScript nenhum. Ver partials/banners.blade.php. */
.bn-trilho{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}
@media(prefers-reduced-motion:reduce){.bn-trilho{transition:none}}

/* Alvos de 1px, presos à viewport.
   position:fixed é o detalhe que impede o pulo: elemento fixo está sempre
   no campo de visão, então a navegação por âncora não tem para onde
   rolar. Com position:absolute o navegador levava o topo do carrossel ao
   topo da tela e a página saltava 364px no primeiro clique — medido.
   Continuam dentro de .bn no HTML, que é o que o :has() enxerga. */
.bn-alvo{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;
  pointer-events:none;opacity:0}

/*
 * A PROPORÇÃO DA FAIXA É FIXA, E ELA É LARGA.
 *
 * Fixa porque sem ela a página salta enquanto o banner carrega, e salto
 * de layout é penalizado no Core Web Vitals dos 1500 domínios.
 *
 * Larga porque com contain a altura da faixa NÃO aumenta o tamanho da
 * imagem: um banner mais largo que a faixa já preenche a largura toda, e
 * cada pixel de altura a mais vira só desfoque em volta.
 */
.bn-slide{position:relative;flex:0 0 100%;min-width:0;
  aspect-ratio:var(--bn-prop,2.33);overflow:hidden;background:var(--c-escuro)}

/* Só no celular a proporção ganha teto.
   Um banner 5,5:1 num telefone de 375px daria 68px de altura — o texto que
   o cliente desenhou fica ilegível. Abaixo de 560px a faixa não passa de
   2,5:1, e é só aí que o desfoque aparece, para dar altura à arte.
   No tablet e no desktop vale a proporção real, sem sobra nenhuma. */
@media(max-width:560px){.bn-slide{aspect-ratio:min(var(--bn-prop,2.33),2.5)}}

/*
 * A IMAGEM NUNCA É CORTADA — e a faixa também nunca fica com tarja.
 *
 * O banner é feito pelo cliente, com o texto desenhado dentro, e vem em
 * qualquer proporção. Duas saídas óbvias, as duas ruins:
 *
 *   object-fit:cover   → preenche bonito e CORTA. Num banner que existe
 *                        para exibir texto, isso come o texto. Foi o que
 *                        aconteceu: "SEGUNDA ETAPA" virou "UNDA ETAPA".
 *   object-fit:contain → não corta e deixa tarja lisa dos dois lados.
 *
 * A saída é contain para a imagem de verdade, sobre um fundo que é a
 * MESMA imagem ampliada e desfocada. Nada é cortado, não há tarja, e a
 * cor do fundo sai da própria arte do cliente — combina sempre, sem
 * ninguém escolher cor nenhuma. É o mesmo arquivo, já em cache: não
 * custa uma requisição a mais.
 */
.bn-slide::before{content:"";position:absolute;inset:0;
  background-image:var(--bn-img);background-size:cover;background-position:center;
  filter:blur(34px) saturate(1.15);transform:scale(1.15)}

.bn-slide > a{position:relative;display:block;width:100%;height:100%}
.bn-slide img{position:relative;display:block;width:100%;height:100%;
  object-fit:contain}

.bn-pontos{position:absolute;left:0;right:0;bottom:14px;display:flex;
  justify-content:center;gap:10px;z-index:2}
.bn-pontos a{position:relative;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.45);box-shadow:0 0 0 1.5px rgba(255,255,255,.9);
  transition:background .15s,transform .15s,width .15s}

/* Alvo de toque de 44px sem engordar o ponto: a área clicável cresce por
   fora, invisível. Ponto de 10px é impossível de acertar com o dedo. */
.bn-pontos a::after{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

.bn-pontos a:hover{background:#fff;transform:scale(1.2)}
.bn-pontos a:focus-visible{outline:2px solid #fff;outline-offset:4px}

/*
 * QUAL SLIDE ESTÁ ABERTO — e o deslocamento da faixa.
 *
 * O :has() olha para dentro do carrossel, vê qual alvo está em
 * :target e faz duas coisas: desloca a faixa e engorda o ponto
 * correspondente. A regra do :first-child cobre o carregamento da
 * página, quando nada está em :target ainda.
 *
 * Sem isto são bolinhas idênticas: dá para trocar de slide e não dá
 * para saber onde se está nem quantos faltam.
 */
.bn:has(.bn-alvo:nth-of-type(1):target) .bn-trilho{transform:translateX(-0%)}
.bn:has(.bn-alvo:nth-of-type(2):target) .bn-trilho{transform:translateX(-100%)}
.bn:has(.bn-alvo:nth-of-type(3):target) .bn-trilho{transform:translateX(-200%)}
.bn:has(.bn-alvo:nth-of-type(4):target) .bn-trilho{transform:translateX(-300%)}
.bn:has(.bn-alvo:nth-of-type(5):target) .bn-trilho{transform:translateX(-400%)}
.bn:has(.bn-alvo:nth-of-type(6):target) .bn-trilho{transform:translateX(-500%)}
.bn:has(.bn-alvo:nth-of-type(7):target) .bn-trilho{transform:translateX(-600%)}
.bn:has(.bn-alvo:nth-of-type(8):target) .bn-trilho{transform:translateX(-700%)}
.bn:has(.bn-alvo:nth-of-type(9):target) .bn-trilho{transform:translateX(-800%)}
.bn:has(.bn-alvo:nth-of-type(10):target) .bn-trilho{transform:translateX(-900%)}
.bn:not(:has(.bn-alvo:target)) .bn-pontos a:first-child,
.bn:has(.bn-alvo:nth-of-type(1):target) .bn-pontos a:nth-child(1),
.bn:has(.bn-alvo:nth-of-type(2):target) .bn-pontos a:nth-child(2),
.bn:has(.bn-alvo:nth-of-type(3):target) .bn-pontos a:nth-child(3),
.bn:has(.bn-alvo:nth-of-type(4):target) .bn-pontos a:nth-child(4),
.bn:has(.bn-alvo:nth-of-type(5):target) .bn-pontos a:nth-child(5),
.bn:has(.bn-alvo:nth-of-type(6):target) .bn-pontos a:nth-child(6),
.bn:has(.bn-alvo:nth-of-type(7):target) .bn-pontos a:nth-child(7),
.bn:has(.bn-alvo:nth-of-type(8):target) .bn-pontos a:nth-child(8),
.bn:has(.bn-alvo:nth-of-type(9):target) .bn-pontos a:nth-child(9),
.bn:has(.bn-alvo:nth-of-type(10):target) .bn-pontos a:nth-child(10){
  background:#fff;width:26px;border-radius:5px
}


@media print{.bn-pontos{display:none}.bn-trilho{transform:none}
  .bn-slide:not(:first-child){display:none}}

/* ---- Modalidades ---- */
.modalidade-texto h2 a{color:inherit}
.modalidade-texto h2 a:hover{color:var(--c-marca-txt,var(--c-marca))}
.modalidade-mais{font-weight:700;color:var(--c-marca-txt,var(--c-marca))}
.modalidade-mais:hover{text-decoration:underline}

/* Capa da página da modalidade: largura da coluna de leitura, altura
   limitada. Sem o teto, uma foto em pé empurra o texto para fora da tela
   e a pessoa abre a página sem ver uma linha do conteúdo. */
.modalidade-capa{
  display:block;width:100%;max-height:340px;object-fit:cover;
  border-radius:var(--raio);margin:0 0 28px;
}

/* Irmãs no fim da página: pastilhas, não lista com marcador — são poucas
   e curtas, e em pastilha cabem numa linha só no desktop. */
.modalidade-irmas{list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.modalidade-irmas a{
  display:inline-block;padding:10px 18px;border:1px solid var(--linha);
  border-radius:99px;background:var(--c-branco);font-weight:600;
  font-size:var(--fs--1);
}
.modalidade-irmas a:hover{
  border-color:var(--c-marca);color:var(--c-marca-txt,var(--c-marca));
}

/* ---- "Cadastre-se" da barra de topo: escolhe atleta ou clube ----
   Mesmo mecanismo do menu (button + :focus-within), pelo mesmo motivo:
   sem elemento focável não abre no teclado nem no tablet. */
.topo-filiar{position:relative}
.topo-filiar-abre{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px;
}
.topo-filiar-abre::after{
  content:"";width:5px;height:5px;flex:none;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.7;
}
.topo-filiar-abre:hover,.topo-filiar:focus-within .topo-filiar-abre{
  color:var(--c-topbar-acento,#fff);
}

.topo-filiar-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  list-style:none;margin:0;padding:7px;min-width:272px;
  background:var(--c-branco);border:1px solid var(--linha);
  border-top:3px solid var(--c-marca);border-radius:0 0 12px 12px;
  box-shadow:0 2px 6px rgba(10,20,38,.07), 0 18px 44px rgba(10,20,38,.19);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;
  text-align:left;
}
.topo-filiar:hover > .topo-filiar-menu,
.topo-filiar:focus-within > .topo-filiar-menu{opacity:1;visibility:visible;transform:none}

/* Duas linhas por opção: o rótulo decide, e a segunda linha tira a dúvida
   de quem não sabe se "filiação" é dele ou do clube dele. O documento
   pedido (CPF ou CNPJ) é o que resolve isso em uma palavra. */
/* Ícone + texto em fileira. O ícone sobe um fio (margin-top) para alinhar
   com a PRIMEIRA linha do título em vez de centralizar no bloco de duas
   linhas, que o deixava visivelmente baixo. */
.topo-filiar-menu a{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:7px;
  color:var(--c-texto);line-height:1.3;
  transition:background .13s ease;
}
.topo-filiar-menu a > .ico{flex:none;margin-top:3px;color:var(--c-marca-txt)}
.topo-filiar-txt{display:block;min-width:0}
.topo-filiar-menu a:hover,.topo-filiar-menu a:focus-visible{background:var(--c-claro)}
.topo-filiar-menu a:focus-visible{outline:2px solid var(--c-marca);outline-offset:-2px}
.topo-filiar-menu strong{display:block;font-size:var(--fs--1);font-weight:700}
.topo-filiar-menu .topo-filiar-txt > span{display:block;font-size:var(--fs--2);color:var(--texto-2);margin-top:2px}

/* No celular a barra de topo é apertada e o painel escaparia pela borda.
   Continua absoluto (fixed ficaria preso na tela ao rolar a página) e só
   ganha um teto de largura, ancorado pela direita como no desktop. */
@media(max-width:560px){
  .topo-filiar-menu{min-width:0;width:max-content;max-width:calc(100vw - 24px)}
}

@media print{.preview-barra{display:none}}

/* ------------------------------------------------- Validar declaração */
/* Cartão centralizado, no mesmo molde do .fil-porta da filiação: as duas
   telas fazem a mesma coisa — pedem um código só — e não havia motivo para
   uma ficar encostada à esquerda de um wrap largo enquanto a outra centra. */
.valida-form{
  max-width:520px;margin:0 auto;text-align:center;
  background:var(--sup-1,#fff);
  border:1px solid var(--linha,#e6e8ec);border-radius:12px;
  padding:clamp(24px,3vw,34px) clamp(18px,2.5vw,30px);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.06);
}
.valida-form label{display:block;font-weight:700;font-size:var(--fs--1);margin-bottom:10px}
/* grid, e não flex em linha: empilhado, o botão ocupa a largura inteira e o
   conjunto fica simétrico dentro do cartão em qualquer largura de tela. */
.valida-campo{display:grid;gap:14px}
.valida-campo input{
  width:100%;padding:14px 16px;text-align:center;
  border:1px solid var(--linha);border-radius:8px;background:#fff;
  font:inherit;font-size:var(--fs-0);font-weight:600;
  /* Código tem letra e número parecidos (O/0, I/l): monoespaçada evita
     erro de leitura na conferência. */
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;
}
.valida-campo input:focus{outline:3px solid var(--c-marca);outline-offset:1px;border-color:transparent}
.valida-campo .btn{width:100%;justify-content:center}
.valida-form .nota{margin:16px 0 0}
/* Com resposta dentro, o cartão precisa de um pouco mais de largura para a
   lista de dados caber em duas colunas no desktop. Sem resposta ele volta a
   ser estreito: um campo só não justifica largura. */
.valida-form--respondido{max-width:620px}

/* ---- A resposta ------------------------------------------------------
   Ela mora DENTRO do cartão do formulário, encostada no botão. Antes era um
   segundo cartão solto, abaixo do primeiro, com um vão no meio: no desktop —
   cartão estreito e centralizado, muito espaço vazio em volta — quem clicava
   ficava com o olho na altura do botão e não percebia que a resposta tinha
   chegado. Vale inclusive (e principalmente) para o sucesso, que é o motivo
   de a tela existir.

   Nenhuma cor de marca aqui: a marca não pode dizer "autêntica". As cores
   abaixo são semânticas e fixas de propósito, todas conferidas em >=6:1 com
   o branco da faixa. */
.valida-resposta{
  margin:20px 0 0;text-align:left;
  border:1px solid var(--linha);border-radius:10px;overflow:hidden;
  background:#fff;
  /* O topo do site é fixo: sem esta margem, o foco que o navegador traz para
     cá (autofocus) encostaria a faixa do veredito atrás da barra. */
  scroll-margin-top:110px;
}
/* O foco chega aqui pelo `autofocus` do HTML (sem script). Sem contorno, quem
   enxerga não veria para onde o foco foi — o leitor de tela já ouve. */
.valida-resposta:focus{outline:3px solid var(--c-marca);outline-offset:3px}

/* Faixa cheia, e não só um texto colorido: é o que faz o veredito ler-se de
   relance, sem precisar do texto de apoio. */
.valida-faixa{
  display:flex;gap:10px;align-items:flex-start;
  margin:0;padding:14px 16px;
  color:#fff;font-weight:600;line-height:1.35;
  font-size:var(--fs-0);
}
.valida-faixa b{font-weight:800}
.valida-faixa .valida-ico{flex:none;width:22px;height:22px;margin-top:2px}

/* Sucesso pesa mais que os outros estados: faixa maior, ícone maior. Era o
   estado mais importante e o menos visível da tela. */
.valida--ok .valida-faixa{font-size:var(--fs-1);padding:16px}
.valida--ok .valida-faixa .valida-ico{width:26px;height:26px}

.valida-corpo{padding:16px;font-size:var(--fs--1)}
.valida-corpo > :first-child{margin-top:0}
.valida-corpo > :last-child{margin-bottom:0}
/* O botão dentro da resposta não pode estourar os 375px de um celular. */
.valida-corpo .btn{max-width:100%}

.valida--ok{background:#f2faf3;border-color:#bfe3c6}
.valida--ok .valida-faixa{background:#146c2e}      /* 6,5:1 com o branco */
.valida--vencida{background:#fdf8ef;border-color:#ecd7b0}
.valida--vencida .valida-faixa{background:#92400e} /* 7,1:1 */
.valida--nao{background:#fdf4f4;border-color:#eec9c9}
.valida--nao .valida-faixa{background:#991b1b}     /* 8,3:1 */
/* Espera/indisponível em tom neutro, NÃO em vermelho: nesta tela a cor de
   erro lê-se como "documento falso", e nem o limite de consultas nem o
   serviço fora do ar dizem qualquer coisa sobre o documento. */
.valida--espera{background:#f6f7f9;border-color:var(--linha)}
.valida--espera .valida-faixa{background:#334155}  /* 10,4:1 */

.valida-corpo dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 16px}
.valida-corpo dt{font-weight:700;color:var(--texto-3);font-size:var(--fs--1);white-space:nowrap}
.valida-corpo dd{margin:0;font-size:var(--fs--1);min-width:0;overflow-wrap:anywhere}
.valida-corpo dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px}
/* Em cartão estreito as duas colunas espremem o nome do atirador; empilhar
   rótulo e valor lê melhor do que quebrar o nome em três linhas. */
@media (max-width:560px){
  .valida-corpo dl{grid-template-columns:1fr;gap:0}
  .valida-corpo dt{margin-top:10px}
  .valida-corpo dt:first-child{margin-top:0}
}

/* ====================================================== Filiação
 |
 | Formulário de filiação de atleta e de clube. Sem uma linha de script:
 | o que valida antes de enviar é `required`/`pattern`/`type=date`, o que
 | valida de verdade é o servidor, e o que marca o campo com erro é a
 | classe que o servidor devolve na re-renderização.
 |
 | A grade é `auto-fit` e não colunas fixas: o formulário do atleta tem 20
 | campos e o do clube tem 45, e o mesmo CSS precisa dar conta dos dois em
 | 375px e em 1024px sem media query por seção.
 */
.fil-porta{max-width:520px;margin:0 auto;background:var(--sup-1,#fff);
  border:1px solid var(--linha,#e6e8ec);border-radius:12px;padding:32px 28px}
.fil-porta p{color:var(--texto-2);margin:0 0 20px;font-size:var(--fs--1)}
.fil-porta label{display:block;font-weight:700;font-size:var(--fs--1);margin-bottom:8px}
.fil-porta input[type=text]{width:100%;padding:12px 14px;font-size:var(--fs-0);
  border:1px solid var(--linha,#d7dae0);border-radius:8px;background:#fff;
  text-align:center;letter-spacing:.5px;font-weight:600}
.fil-porta .btn{width:100%;margin-top:18px;justify-content:center}
.fil-porta .nota{margin:18px 0 0;font-size:var(--fs--2)}

.fil-doc-resumo{font-size:var(--fs--1);color:var(--texto-2);margin:0 0 20px}

.fil-secao{border:1px solid var(--linha,#e6e8ec);border-radius:12px;
  padding:0 0 22px;margin:0 0 26px;background:var(--sup-1,#fff);min-width:0}
.fil-secao > legend{
  /* legend dentro de fieldset com borda arredondada só fica alinhada se
     ela mesma virar a faixa — por isso ocupa a largura inteira. */
  width:100%;margin:0;padding:14px 22px;box-sizing:border-box;
  background:var(--c-escuro,#15181d);color:#fff;font-weight:700;
  font-size:var(--fs--1);text-transform:uppercase;letter-spacing:.6px;
  border-radius:11px 11px 0 0}
.fil-grade{display:grid;gap:18px 20px;padding:22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fil-campo{min-width:0;display:flex;flex-direction:column}
.fil-campo--largo{grid-column:1/-1}
.fil-campo > label,.fil-radios > legend{
  font-weight:700;font-size:var(--fs--2);margin-bottom:6px;color:var(--texto-1)}
.fil-obrig{color:#b91c1c;text-decoration:none;margin-left:3px;font-weight:800}

.fil-campo input[type=text],.fil-campo input[type=email],
.fil-campo input[type=date],.fil-campo input[type=password],
.fil-campo select,.fil-campo textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;font:inherit;
  font-size:var(--fs--1);color:var(--texto-1);background:#fff;
  border:1px solid var(--linha,#d7dae0);border-radius:6px}
.fil-campo textarea{resize:vertical;min-height:96px}
.fil-campo input[type=file]{font-size:var(--fs--2);padding:6px 0}
.fil-campo :is(input,select,textarea):focus-visible{
  outline:3px solid var(--c-marca);outline-offset:1px;border-color:transparent}

/* :invalid só depois de mexerem no campo. Sem :not(:placeholder-shown) e
   sem :user-invalid o formulário nasce todo vermelho, antes de a pessoa
   digitar qualquer coisa. */
.fil-campo input:user-invalid,.fil-campo select:user-invalid,
.fil-campo textarea:user-invalid{border-color:#dc2626;background:#fff8f8}

.fil-radios{border:0;padding:0;margin:0;min-width:0}
.fil-radio{display:inline-flex;align-items:center;gap:6px;margin:0 14px 4px 0;
  font-size:var(--fs--1);font-weight:400;cursor:pointer}
.fil-radio input{accent-color:var(--c-marca)}

.fil-dica{display:block;margin-top:5px;font-size:var(--fs--2);color:var(--texto-3)}
.fil-erro{margin:6px 0 0;font-size:var(--fs--2);font-weight:700;color:#b91c1c}
.fil-campo--erro > label,.fil-campo--erro > .fil-radios > legend{color:#b91c1c}
.fil-campo--erro :is(input,select,textarea){border-color:#dc2626;background:#fff8f8}

.fil-recarrega{align-self:flex-start;margin-top:8px;padding:6px 12px;
  font:inherit;font-size:var(--fs--2);font-weight:700;cursor:pointer;
  color:var(--c-marca-txt,var(--c-marca));background:transparent;
  border:1px solid currentColor;border-radius:6px}
.fil-recarrega:hover{background:var(--c-marca);color:#fff;border-color:transparent}

.fil-termo{max-height:230px;overflow-y:auto;margin:22px 22px 0;padding:16px 18px;
  font-size:var(--fs--2);line-height:1.6;color:var(--texto-2);
  background:var(--sup-2,#f6f7f9);border:1px solid var(--linha,#e6e8ec);border-radius:8px}
.fil-termo p{margin:0 0 10px}
.fil-aceite{display:flex;align-items:flex-start;gap:10px;margin:16px 22px 0;
  font-size:var(--fs--1);cursor:pointer}
.fil-aceite input{margin-top:3px;accent-color:var(--c-marca)}
.fil-secao > .fil-erro{margin:8px 22px 0}

.fil-enviar{margin:8px 0 40px}
.fil-enviar .btn{width:100%;justify-content:center}
.fil-enviar .nota{margin-top:14px;text-align:center}

.fil-alerta{margin:0 0 24px;padding:14px 18px;border-radius:8px;
  border-left:4px solid #b91c1c;background:#fdf4f4;color:#991b1b;
  font-size:var(--fs--1);font-weight:600}

.fil-aviso{max-width:680px;margin:0 auto;padding:26px 28px;border-radius:12px;
  border-left:4px solid;background:var(--sup-1,#fff)}
.fil-aviso p{font-size:var(--fs--1);color:var(--texto-2);margin:0 0 14px}
.fil-aviso p:last-child{margin-bottom:0}
.fil-aviso-titulo{font-size:var(--fs-1);font-weight:700;line-height:1.35}
.fil-aviso--ok{border-left-color:#1f8b2c;background:#f2faf3}
.fil-aviso--ok .fil-aviso-titulo{color:#166534}
.fil-aviso--parado{border-left-color:#b45309;background:#fdf8ef}
.fil-aviso--parado .fil-aviso-titulo{color:#92400e}
.fil-aviso .btn{margin:6px 8px 0 0}

@media (max-width:640px){
  .fil-porta{padding:24px 18px}
  .fil-grade{padding:16px;gap:16px}
  .fil-secao > legend{padding:12px 16px}
  .fil-termo,.fil-aceite{margin-left:16px;margin-right:16px}
  .fil-secao > .fil-erro{margin-left:16px;margin-right:16px}
  /* Em telas estreitas o campo precisa de 16px de fonte: abaixo disso o
     iOS dá zoom sozinho ao focar e a pessoa perde o resto do formulário.
     Os seletores repetem os de cima com o mesmo peso porque
     `.fil-campo input[type=text]` vence um `:is(input,…)` — e vencia. */
  .fil-campo input[type=text],.fil-campo input[type=email],
  .fil-campo input[type=date],.fil-campo input[type=password],
  .fil-campo select,.fil-campo textarea,
  .fil-porta input[type=text]{font-size:16px}
}