/* ==========================================================================
   Ranking de Tênis Caldas Novas — sistema visual
   Marca própria. Nenhum token, cor ou fonte do Morada Tennis Academy.
   Contraste de todos os pares verificado em docs/contraste.md (npm run contraste).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Escala de espaçamento — 4/8pt, sem valor mágico fora dela */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Tipografia */
  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.75rem;   --t-sm: 0.875rem;  --t-base: 1rem;
  --t-md: 1.0625rem; --t-lg: 1.25rem;   --t-xl: 1.5rem;
  --t-2xl: 2rem;     --t-3xl: 2.75rem;  --t-4xl: 3.5rem;  --t-5xl: 4.5rem;

  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6;
  --tr-caps: 0.1em;

  --medida: 68ch;
  --largura: 1120px;
  --largura-estreita: 720px;

  --dur: 160ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tema claro (padrão) — todo token definido aqui, nunca só dentro de media query */
:root {
  --bg: #FBF8F5;
  --surface: #FFFFFF;
  --surface-2: #F4EEE8;
  --text: #1E1815;
  --muted: #63554C;
  --line: #E5DCD3;        /* filete decorativo */
  --line-field: #7D6C61;  /* fronteira de componente — piso 3:1 */

  --brand: #B24A22;
  --brand-hover: #8F3A19;
  --brand-soft: #FBEDE6;
  --brand-ink: #7A3115;
  --on-brand: #FFFFFF;

  --ok: #1F6B4C;      --ok-soft: #E6F3ED;
  --erro: #A81C15;    --erro-soft: #FBEAE8;
  --aviso: #8A5A00;   --aviso-soft: #FCF2DD;

  --disabled-text: #5F534B;
  --disabled-bg: #F0E9E3;

  --sombra-flutuante: 0 2px 8px rgba(48, 30, 20, 0.08), 0 12px 28px rgba(48, 30, 20, 0.10);
  --veu: rgba(18, 12, 8, 0.62);
}

/* Escuro pelo sistema, exceto quando o usuário fixou claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #17130F;
    --surface: #221C17;
    --surface-2: #2C241D;
    --text: #F2EBE5;
    --muted: #B3A398;
    --line: #3A2F27;
    --line-field: #8A7A6E;

    --brand: #F09267;
    --brand-hover: #F7B393;
    --brand-soft: #33211A;
    --brand-ink: #F5A97F;
    --on-brand: #2A1108;

    --ok: #68C79B;      --ok-soft: #16281F;
    --erro: #F3A49B;    --erro-soft: #2E1A18;
    --aviso: #E3B45C;   --aviso-soft: #2A2115;

    --disabled-text: #A2938A;
    --disabled-bg: #2A231D;

    --sombra-flutuante: 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
    --veu: rgba(10, 6, 4, 0.68);
  }
}

/* Escuro escolhido pelo usuário — vence o sistema nas duas direções */
:root[data-tema="escuro"] {
  --bg: #17130F;
  --surface: #221C17;
  --surface-2: #2C241D;
  --text: #F2EBE5;
  --muted: #B3A398;
  --line: #3A2F27;
  --line-field: #8A7A6E;

  --brand: #F09267;
  --brand-hover: #F7B393;
  --brand-soft: #33211A;
  --brand-ink: #F5A97F;
  --on-brand: #2A1108;

  --ok: #68C79B;      --ok-soft: #16281F;
  --erro: #F3A49B;    --erro-soft: #2E1A18;
  --aviso: #E3B45C;   --aviso-soft: #2A2115;

  --disabled-text: #A2938A;
  --disabled-bg: #2A231D;

  --sombra-flutuante: 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
  --veu: rgba(10, 6, 4, 0.68);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` do HTML vale `display: none` só com a especificidade do
   estilo do navegador — qualquer classe que declare `display` o derrota em
   silêncio. Sem esta regra, `.botao[hidden]`, `.aviso[hidden]` e
   `.campo__dica[hidden]` continuam na tela: os botões "Voltar" e "Enviar"
   apareciam já no passo 1, e o aviso "menores de 18 anos" era mostrado a
   adultos. É regra de base, não remendo por elemento. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo: sem isto, toda âncora do índice do regulamento
     leva o título da seção para debaixo da barra. */
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 8vw, var(--t-5xl)); }
h2 { font-size: clamp(1.875rem, 5vw, var(--t-3xl)); }
h3 { font-size: clamp(1.375rem, 3.5vw, var(--t-xl)); font-weight: 600; }
h4 { font-size: var(--t-lg); font-weight: 600; }

p { margin: 0 0 var(--e4); max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand); color: var(--on-brand); }

.pular-para-conteudo {
  position: absolute; left: var(--e4); top: -100px;
  background: var(--brand); color: var(--on-brand);
  padding: var(--e3) var(--e5); border-radius: var(--r-md);
  font-weight: 600; z-index: 100; transition: top var(--dur) var(--ease);
}
.pular-para-conteudo:focus { top: var(--e4); color: var(--on-brand); }

.so-leitor-de-tela {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.envoltorio { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--e5); }
.envoltorio--estreito { max-width: var(--largura-estreita); }

.secao { padding-block: var(--e8); }
.secao--compacta { padding-block: var(--e7); }
.secao--tinta { background: var(--surface-2); }

@media (min-width: 768px) {
  .secao { padding-block: var(--e9); }
  .envoltorio { padding-inline: var(--e6); }
}

.rotulo-secao {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--e3);
}

.subtitulo-secao { color: var(--muted); font-size: var(--t-md); margin-top: var(--e4); }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); min-height: 68px;
}
.marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: var(--text); }
.marca:hover { color: var(--text); }
.marca__simbolo { width: 34px; height: 34px; flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__linha1 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.marca__linha2 {
  font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--brand); margin-top: 3px;
}

.nav { display: none; align-items: center; gap: var(--e2); }
@media (min-width: 900px) { .nav { display: flex; } }
.nav__link {
  color: var(--text); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  padding: var(--e3) var(--e3); border-radius: var(--r-sm); min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav__link:hover { color: var(--brand); background: var(--brand-soft); }
.nav__link[aria-current="page"] { color: var(--brand); font-weight: 600; }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--e2); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 52px; padding: var(--e3) var(--e6);
  font-family: var(--f-body); font-size: var(--t-base); font-weight: 600;
  border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.botao:active:not(:disabled) { transform: translateY(1px); }

.botao--primario { background: var(--brand); color: var(--on-brand); }
.botao--primario:hover:not(:disabled) { background: var(--brand-hover); color: var(--on-brand); }

.botao--secundario { background: transparent; color: var(--text); border-color: var(--line-field); }
.botao--secundario:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.botao--claro { background: rgba(255,255,255,0.14); color: #FFFFFF; border-color: rgba(255,255,255,0.55); }
.botao--claro:hover:not(:disabled) { background: rgba(255,255,255,0.24); color: #FFFFFF; border-color: #FFFFFF; }

.botao--pequeno { min-height: 44px; padding: var(--e2) var(--e4); font-size: var(--t-sm); }

.botao:disabled, .botao[aria-disabled="true"] {
  background: var(--disabled-bg); color: var(--disabled-text);
  border-color: transparent; cursor: not-allowed; transform: none;
}

.botao__girador {
  width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.botao-tema {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-field); border-radius: var(--r-pill);
  color: var(--text); cursor: pointer;
}
.botao-tema:hover { border-color: var(--brand); color: var(--brand); }
.botao-tema svg { width: 19px; height: 19px; }

/* ---------- Hero ---------- */
.heroi { position: relative; isolation: isolate; overflow: hidden; background: #3A1D0F; }
.heroi__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: -2;
}
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,12,8,0.55) 0%, var(--veu) 45%, rgba(18,12,8,0.78) 100%);
}
.heroi__interno { padding-block: var(--e9) var(--e8); color: #FFFFFF; }
@media (min-width: 768px) { .heroi__interno { padding-block: var(--e10) var(--e9); } }

.heroi__etiqueta {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: #FFFFFF; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4);
  padding: var(--e2) var(--e4); border-radius: var(--r-pill); margin-bottom: var(--e5);
}
.heroi__titulo { color: #FFFFFF; max-width: 15ch; }
.heroi__linha { display: block; color: #FFB894; }
.heroi__texto {
  color: #F0E6DE; font-size: var(--t-lg); max-width: 46ch; margin-top: var(--e5);
  line-height: 1.5;
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.heroi__acoes .botao { flex: 1 1 100%; }
@media (min-width: 560px) { .heroi__acoes .botao { flex: 0 0 auto; } }

.heroi__creditos {
  position: absolute; right: var(--e4); bottom: var(--e3); z-index: 1;
  font-size: 0.6875rem; color: rgba(255,255,255,0.82);
}
.heroi__creditos a { color: rgba(255,255,255,0.92); }

/* Fato do formato no hero — estático, sem contagem */
/* Texto puro, sem casca. A versão anterior herdou o formato de pílula do
   contador antigo e ficava logo abaixo de dois botões-pílula: virava um
   terceiro botão falso, que o visitante tenta clicar e não faz nada.
   Elemento não clicável não se veste de controle. */
.heroi__fato {
  margin-top: var(--e5);
  color: #E6D8CE; font-size: var(--t-sm); line-height: 1.4;
}

/* ---------- Cartões e grades ---------- */
.grade { display: grid; gap: var(--e4); }
.grade--2 { grid-template-columns: 1fr; }
.grade--3 { grid-template-columns: 1fr; }
.grade--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grade--2, .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

.cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--e5);
}
.cartao__numero {
  font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700;
  color: var(--brand); line-height: 1; margin-bottom: var(--e3);
  font-variant-numeric: tabular-nums;
}
.cartao__icone { color: var(--brand); margin-bottom: var(--e3); }
.cartao__icone svg { width: 26px; height: 26px; }
.cartao h3 { margin-bottom: var(--e2); }
.cartao p { color: var(--muted); font-size: var(--t-base); }

.lista-classes { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.lista-classes li {
  display: flex; align-items: baseline; gap: var(--e2);
  padding: var(--e2) 0; border-top: 1px solid var(--line); font-size: var(--t-base);
}
.lista-classes li:first-child { border-top: none; }
.lista-classes .detalhe { color: var(--muted); font-size: var(--t-sm); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px var(--e3); border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-ink);
}
.etiqueta--neutra { background: var(--surface-2); color: var(--muted); }

/* ---------- Aviso / ressalva ---------- */
.aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  background: var(--aviso-soft); border-left: 4px solid var(--aviso);
  border-radius: var(--r-md); padding: var(--e4); font-size: var(--t-base);
}
.aviso svg { width: 20px; height: 20px; flex: none; color: var(--aviso); margin-top: 2px; }
.aviso p { color: var(--text); }
.aviso--info { background: var(--brand-soft); border-left-color: var(--brand); }
.aviso--info svg { color: var(--brand); }

/* ---------- Tabela de valores ---------- */
.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
  width: 100%; border-collapse: collapse; font-size: var(--t-base);
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
}
.tabela th, .tabela td { padding: var(--e3) var(--e4); text-align: left; }
.tabela thead th {
  background: var(--surface-2); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.tabela tbody tr + tr td { border-top: 1px solid var(--line); }
.tabela .valor {
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
  color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tabela td:last-child, .tabela th:last-child { text-align: right; }

/* ---------- Formulário ---------- */
.formulario { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }

.passos { display: flex; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.passos__item {
  flex: 1; padding: var(--e3) var(--e2); text-align: center;
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent;
}
.passos__item[aria-current="step"] { color: var(--brand); border-bottom-color: var(--brand); background: var(--surface); }
.passos__item--feito { color: var(--ok); }
.passos__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-right: 6px;
  background: currentColor; color: var(--surface); font-size: 0.6875rem; font-weight: 700;
}
.passos__rotulo { display: none; }
@media (min-width: 560px) { .passos__rotulo { display: inline; } }

.formulario__corpo { padding: var(--e5); }
@media (min-width: 768px) { .formulario__corpo { padding: var(--e6); } }

.bloco { display: none; }
.bloco[data-ativo="true"] { display: block; animation: aparecer var(--dur) var(--ease); }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bloco__titulo { margin-bottom: var(--e2); }
.bloco__ajuda { color: var(--muted); font-size: var(--t-base); margin-bottom: var(--e5); }

.campo { margin-bottom: var(--e5); }
.campo__rotulo {
  display: block; font-size: var(--t-sm); font-weight: 600;
  margin-bottom: var(--e2); color: var(--text);
}
.campo__opcional { font-weight: 400; color: var(--muted); }
.campo__dica { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: var(--e2); }

.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 52px; padding: var(--e3) var(--e4);
  font-family: var(--f-body); font-size: var(--t-base); color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line-field);
  border-radius: var(--r-md); appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.entrada { min-height: 96px; resize: vertical; line-height: 1.5; }
.entrada::placeholder { color: var(--muted); opacity: 0.75; }
.entrada:hover:not(:disabled) { border-color: var(--brand); }
.entrada:focus-visible { border-color: var(--brand); outline: 3px solid var(--brand); outline-offset: 1px; }
.entrada[aria-invalid="true"] { border-color: var(--erro); border-width: 2px; }
.entrada:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }

select.entrada {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D6C61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e4) center; background-size: 18px;
  padding-right: var(--e8);
}
:root[data-tema="escuro"] select.entrada,
:root:not([data-tema="claro"]) select.entrada { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7A6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) select.entrada { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D6C61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}

.campo__erro {
  display: none; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 500; color: var(--erro); margin-top: var(--e2);
}
.campo__erro svg { width: 15px; height: 15px; flex: none; }
.campo[data-erro="true"] .campo__erro { display: flex; }

.dupla { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .dupla { grid-template-columns: 1fr 1fr; } }

/* Caixas de seleção de classe */
.grupo-classes { border: 0; padding: 0; margin: 0 0 var(--e5); }
.grupo-classes legend { padding: 0; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e2); }
.grupo-classes__titulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted); margin: var(--e4) 0 var(--e2);
}
.opcoes { display: grid; gap: var(--e2); grid-template-columns: 1fr; }
@media (min-width: 620px) { .opcoes { grid-template-columns: 1fr 1fr; } }

.opcao {
  display: flex; align-items: flex-start; gap: var(--e3);
  min-height: 56px; padding: var(--e3) var(--e4);
  border: 1.5px solid var(--line-field); border-radius: var(--r-md);
  cursor: pointer; background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.opcao:hover { border-color: var(--brand); background: var(--brand-soft); }
.opcao:has(input:checked) { border-color: var(--brand); border-width: 2px; background: var(--brand-soft); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.opcao input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }
.opcao__texto { display: flex; flex-direction: column; gap: 2px; }
.opcao__nome { font-size: var(--t-base); font-weight: 500; }
.opcao__detalhe { font-size: var(--t-sm); color: var(--muted); }

.consentimento {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4); border: 1.5px solid var(--line-field); border-radius: var(--r-md);
  background: var(--surface-2); margin-bottom: var(--e4); cursor: pointer;
}
.consentimento:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.consentimento input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }
.consentimento span { font-size: var(--t-sm); line-height: 1.5; }

.resumo { background: var(--surface-2); border-radius: var(--r-md); padding: var(--e4); margin-bottom: var(--e5); }
.resumo dl { display: grid; gap: var(--e2); margin: 0; grid-template-columns: auto 1fr; }
.resumo dt { font-size: var(--t-sm); color: var(--muted); }
.resumo dd { margin: 0; font-size: var(--t-sm); font-weight: 500; text-align: right; }

.formulario__acoes { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e5); }
.formulario__acoes .botao { flex: 1 1 100%; }
@media (min-width: 560px) {
  .formulario__acoes .botao { flex: 0 0 auto; }
  .formulario__acoes .botao--primario { margin-left: auto; }
}

.alerta {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4); border-radius: var(--r-md); margin-bottom: var(--e5);
  font-size: var(--t-base);
}
.alerta svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alerta--erro { background: var(--erro-soft); color: var(--text); border-left: 4px solid var(--erro); }
.alerta--erro svg { color: var(--erro); }
.alerta--ok { background: var(--ok-soft); color: var(--text); border-left: 4px solid var(--ok); }
.alerta--ok svg { color: var(--ok); }

.mel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Regulamento ---------- */
.regulamento { display: grid; gap: var(--e6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .regulamento { grid-template-columns: 260px 1fr; gap: var(--e8); } }

.indice { display: none; }
@media (min-width: 940px) {
  .indice { display: block; position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; }
}
.indice__titulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--e3);
}
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.indice li { counter-increment: idx; }
.indice a {
  display: block; padding: var(--e2) var(--e3); font-size: var(--t-sm);
  color: var(--muted); text-decoration: none; border-left: 2px solid var(--line);
  min-height: 40px; display: flex; align-items: center;
}
.indice a::before { content: counter(idx) "."; margin-right: var(--e2); font-variant-numeric: tabular-nums; opacity: 0.65; }
.indice a:hover { color: var(--brand); border-left-color: var(--brand); background: var(--brand-soft); }
.indice a[aria-current="true"] { color: var(--brand); font-weight: 600; border-left-color: var(--brand); }

.regra { border-bottom: 1px solid var(--line); }
.regra:last-child { border-bottom: none; }
.regra__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700;
  color: var(--text); text-align: left; min-height: 64px;
}
.regra__botao:hover { color: var(--brand); }
.regra__seta { flex: none; width: 22px; height: 22px; color: var(--brand); transition: transform var(--dur) var(--ease); }
.regra__botao[aria-expanded="true"] .regra__seta { transform: rotate(180deg); }
.regra__corpo { padding: 0 0 var(--e6); }
.regra__corpo[hidden] { display: none; }
.regra__corpo p, .regra__corpo li { font-size: var(--t-base); }
.regra__corpo ul { padding-left: var(--e5); margin: 0 0 var(--e4); }
.regra__corpo li { margin-bottom: var(--e2); }
.regra__corpo li::marker { color: var(--brand); }

@media (min-width: 940px) {
  .regra__botao { cursor: default; pointer-events: none; padding-top: var(--e6); }
  .regra__seta { display: none; }
}

.destaque-numero {
  display: inline-block; font-family: var(--f-display); font-weight: 700;
  color: var(--brand); font-variant-numeric: tabular-nums;
}

/* Calculadora de pontuação */
.calculadora { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--e5); margin: var(--e4) 0; }
.calculadora__campos { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-end; }
.calculadora__campo { flex: 1 1 130px; }
.calculadora__campo .campo__rotulo { margin-bottom: var(--e2); }
.calculadora__saida {
  margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--line);
}
.calculadora__total {
  font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700;
  color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums;
}
.calculadora__conta { color: var(--muted); font-size: var(--t-sm); margin-top: var(--e2); }

/* ---------- Confirmação ---------- */
.protocolo {
  display: inline-block; font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 700;
  letter-spacing: 0.04em; color: var(--brand); background: var(--brand-soft);
  padding: var(--e3) var(--e5); border-radius: var(--r-md); margin: var(--e4) 0;
}

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--line); padding-block: var(--e7); background: var(--surface-2); }
.rodape__interno { display: grid; gap: var(--e5); }
@media (min-width: 768px) { .rodape__interno { grid-template-columns: 1fr auto; align-items: start; } }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }
.rodape__links a { font-size: var(--t-sm); color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.rodape__links a:hover { color: var(--brand); text-decoration: underline; }
.rodape__nota { font-size: var(--t-xs); color: var(--muted); margin-top: var(--e4); max-width: 62ch; }

/* ---------- Estados vazio / carregando / erro ---------- */
.estado {
  text-align: center; padding: var(--e8) var(--e5);
  border: 1px dashed var(--line-field); border-radius: var(--r-lg); background: var(--surface);
}
.estado__icone { color: var(--muted); margin-bottom: var(--e4); }
.estado__icone svg { width: 34px; height: 34px; margin-inline: auto; }
.estado h3 { margin-bottom: var(--e2); }
.estado p { color: var(--muted); margin-inline: auto; max-width: 46ch; }
.estado .botao { margin-top: var(--e5); }

.esqueleto {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; border-radius: var(--r-sm);
}
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------- Painel do administrador ---------- */
.painel { padding-block: var(--e6); }
.painel__kpis { display: grid; gap: var(--e3); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--e6); }
@media (min-width: 768px) { .painel__kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--e4); }
.kpi__numero { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__rotulo { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--e2); }
.kpi__ref { font-size: var(--t-xs); color: var(--muted); margin-top: 6px; }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; margin-bottom: var(--e4); }
.filtros .campo { margin-bottom: 0; flex: 1 1 180px; }
.filtros .entrada { min-height: 44px; }

.recorte-ativo {
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
  font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--e3);
}

/* Tela de escanear: nasce densa */
.tabela--densa { font-size: var(--t-sm); }
.tabela--densa th, .tabela--densa td { padding: var(--e2) var(--e3); }
.tabela--densa tbody tr { height: 40px; }
.tabela--densa tbody tr:hover { background: var(--surface-2); }
.tabela--densa th button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: inherit;
  letter-spacing: inherit;
}
.tabela--densa th button:hover { color: var(--brand); }
.linha-atencao { background: var(--aviso-soft); }
.linha-atencao td:first-child { border-left: 3px solid var(--aviso); }

/* ---------- Impressão ---------- */
@media print {
  .cabecalho, .rodape, .heroi__acoes, .botao, .indice, .botao-tema { display: none !important; }
  body { background: #FFF; color: #000; font-size: 11pt; }
  .envoltorio { max-width: none; padding: 0; }
  @page { margin: 20mm; }
  .regra__corpo[hidden] { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ---------- Utilitários de espaçamento (a CSP proíbe style inline) ---------- */
.espaco-topo-4 { margin-top: var(--e4); }
.espaco-topo-5 { margin-top: var(--e5); }
.espaco-topo-6 { margin-top: var(--e6); }
.espaco-base-5 { margin-bottom: var(--e5); }

/* ---------- Faixa de fotografia entre seções ---------- */
.faixa-foto { position: relative; overflow: hidden; height: 220px; background: var(--surface-2); }
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
@media (min-width: 768px) { .faixa-foto { height: 320px; } }

.rodape__marca {
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em; margin: 0;
}

/* ---------- Grupos de classe no formulário (revelação progressiva) ---------- */
.grupo-classe { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--e2); overflow: hidden; }
.grupo-classe[data-bloqueado="true"] { opacity: .55; }
.grupo-alvo {
  width: 100%; display: flex; align-items: center; gap: var(--e3);
  min-height: 60px; padding: var(--e3) var(--e4);
  background: var(--surface); border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-body); color: var(--text);
}
.grupo-alvo:hover:not(:disabled) { background: var(--brand-soft); }
.grupo-alvo:disabled { cursor: not-allowed; }
.grupo-alvo__nome { font-size: var(--t-base); font-weight: 600; flex: 1; }
.grupo-alvo__meta { font-size: var(--t-sm); color: var(--muted); }
.grupo-alvo__seta { width: 20px; height: 20px; flex: none; color: var(--brand); transition: transform var(--dur) var(--ease); }
.grupo-alvo[aria-expanded="true"] .grupo-alvo__seta { transform: rotate(180deg); }
.grupo-classe .opcoes { padding: 0 var(--e4) var(--e4); }
.grupo-classe .campo__dica { padding: 0 var(--e4) var(--e4); }

/* ---------- Faixa de foto com título ---------- */
.faixa-foto--titulo { height: auto; display: grid; }
.faixa-foto--titulo img { grid-area: 1 / 1; height: 100%; min-height: 200px; }
.faixa-foto__texto {
  grid-area: 1 / 1; align-self: end; padding-block: var(--e6);
  position: relative; z-index: 1; color: #FFFFFF;
}
.faixa-foto--titulo::after {
  content: ""; grid-area: 1 / 1; z-index: 0;
  background: linear-gradient(180deg, rgba(18,12,8,.30) 0%, rgba(18,12,8,.78) 100%);
}
.faixa-foto__texto h1 { color: #FFFFFF; font-size: clamp(2.25rem, 6vw, var(--t-4xl)); }
.faixa-foto__texto p { color: #F0E6DE; margin: var(--e3) 0 0; }
@media (min-width: 768px) { .faixa-foto--titulo img { min-height: 280px; } }

/* ---------- Lista ordenada de critérios ---------- */
.lista-ordem { counter-reset: crit; list-style: none; padding: 0; margin: var(--e4) 0; }
.lista-ordem li {
  counter-increment: crit; display: flex; align-items: baseline; gap: var(--e3);
  padding: var(--e2) 0; border-top: 1px solid var(--line); font-size: var(--t-base);
}
.lista-ordem li:first-child { border-top: none; }
.lista-ordem li::before {
  content: counter(crit) "º"; font-family: var(--f-display); font-weight: 700;
  color: var(--brand); flex: none; min-width: 2ch;
}

/* ---------- Calculadora ---------- */
.calculadora__par { display: flex; align-items: center; gap: var(--e2); }
.calculadora__par .entrada { min-height: 48px; text-align: center; padding-inline: var(--e2); }

/* ---------- Confirmação ---------- */
.confirmacao { text-align: center; max-width: 560px; margin-inline: auto; }
.confirmacao__marca {
  width: 68px; height: 68px; margin: 0 auto var(--e5);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ok-soft); color: var(--ok);
}
.confirmacao__marca svg { width: 34px; height: 34px; }
.confirmacao p { margin-inline: auto; }
.proximos { text-align: left; margin-top: var(--e7); }
.proximos ol { padding-left: var(--e5); }
.proximos li { margin-bottom: var(--e3); }
.proximos li::marker { color: var(--brand); font-weight: 700; }

/* ---------- Esqueletos de carregamento do painel ---------- */
.kpi__esqueleto-n { height: 30px; width: 60%; margin-bottom: var(--e2); }
.kpi__esqueleto-r { height: 12px; width: 85%; }
.tabela-esqueleto { height: 420px; width: 100%; border-radius: var(--r-lg); }

/* ---------- Contenção de largura no cabeçalho ----------
   Sem isto, um e-mail longo na etiqueta do operador empurra a linha do
   cabeçalho além da viewport e o navegador móvel reduz o zoom da página
   inteira para caber — medido em 456 px numa tela de 360 px. */
.cabecalho__interno > * { min-width: 0; }
.marca { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.marca__texto { min-width: 0; }
.marca__linha1, .marca__linha2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho__acoes { flex: 0 0 auto; }
.cabecalho__acoes .etiqueta {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Abaixo de 700 px o e-mail do operador sai da barra: é informação de apoio,
   e o espaço pertence à marca e ao botão de tema. */
@media (max-width: 699px) { .cabecalho__acoes .etiqueta { display: none; } }

/* O logo é alvo de navegação, então respeita o piso de 44 px do celular.
   Os links dentro de frase (crédito da foto, "como tratamos seus dados")
   ficam menores de propósito: são a exceção "inline" da WCAG 2.5.8, e
   inflá-los quebraria o fluxo do texto. */
.marca { min-height: 44px; }

/* ---------- Tabela densa: truncar em vez de quebrar ----------
   A lei de densidade pede linha de ~40 px e 12+ linhas visíveis a 1440×900.
   Sem truncamento, o nome longo e a lista de categorias quebravam a linha em
   três e a tabela caía para 9 linhas numa página duas vezes mais alta. */
.tabela--densa { table-layout: auto; }
.tabela--densa td, .tabela--densa th { vertical-align: middle; }
.tabela--densa td.nowrap, .tabela--densa th { white-space: nowrap; }
.tabela--densa td.corta {
  max-width: 1px;              /* deixa a coluna encolher; o max-width real vem abaixo */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela--densa td.col-nome    { max-width: 21ch; }
.tabela--densa td.col-email   { max-width: 22ch; }
.tabela--densa td.col-cidade  { max-width: 13ch; }
.tabela--densa td.col-classes { max-width: 20ch; }
.tabela--densa td.col-dupla   { max-width: 14ch; }
.tabela--densa td.col-onde    { max-width: 24ch; }
.etiqueta--min {
  font-size: 0.625rem; padding: 1px 6px; margin-left: var(--e2);
  vertical-align: middle; letter-spacing: .02em;
}

/* O painel é superfície de trabalho, não de leitura: a medida de 1120 px
   existe para texto corrido e aqui só espremia as colunas. */
.painel.envoltorio { max-width: 1560px; }
.lista-classes li > span:first-child { white-space: nowrap; }

/* Ajuste fino da densidade: a tabela cabe sem rolagem a 1440, e o bloco de
   cabeçalho do painel encolhe para deixar 12+ linhas visíveis em 900 px. */
.tabela--densa td.col-email   { max-width: 17ch; }
.tabela--densa td.col-onde    { max-width: 17ch; }
.tabela--densa td.col-classes { max-width: 17ch; }
.tabela--densa td.col-nome    { max-width: 19ch; }
.tabela--densa th, .tabela--densa td { padding-inline: var(--e2); }

.painel { padding-block: var(--e5) var(--e6); }
.painel h1 { font-size: var(--t-2xl); }
.painel__kpis { gap: var(--e2); margin-bottom: var(--e4); }
.painel .kpi { padding: var(--e3); }
.painel .kpi__numero { font-size: var(--t-xl); }
.painel .filtros { margin-bottom: var(--e2); }
.painel .recorte-ativo { margin-bottom: var(--e2); }
/* Faltavam 40 px para a 12ª linha caber em 900: sai do crômio, nunca do
   alvo de clique nem do rótulo. */
.painel { padding-block: var(--e4) var(--e6); }
.painel h1 { font-size: var(--t-xl); margin-bottom: var(--e3); }
.painel .kpi__numero { font-size: var(--t-lg); }
.painel .kpi__ref { margin-top: 2px; }
.painel h1 { font-size: var(--t-lg); margin-bottom: var(--e2); }
.painel .kpi { padding: var(--e2) var(--e3); }
.painel .kpi__rotulo { margin-top: 4px; }
.painel .rolagem-x.espaco-topo-4 { margin-top: var(--e2); }


/* =========================================================================
   Correções do gate da entrega (2026-08-31)
   ========================================================================= */

/* O número do passo ficava invisível: `background: currentColor` resolve para
   a `color` do PRÓPRIO elemento, e a regra definia as duas como --surface.
   Agora o fundo vem de token e o texto usa a cor da superfície. */
.passos__numero {
  background: var(--muted);
  color: var(--surface);
}
.passos__item[aria-current="step"] .passos__numero { background: var(--brand); }
.passos__item--feito .passos__numero { background: var(--ok); }

/* A marca saía cortada como "RANKI…" no celular, que é o aparelho principal.
   O nome do produto não trunca: quem encolhe é o crômio ao redor. */
@media (max-width: 479px) {
  .marca__linha1 { font-size: 1.0625rem; }
  .marca__linha2 { font-size: 0.5625rem; }
  .cabecalho__acoes .botao { padding-inline: var(--e3); font-size: var(--t-xs); }
  .cabecalho__interno { gap: var(--e2); }
}
.marca__linha1, .marca__linha2 { text-overflow: clip; }

/* Cartão em grade de 5 esticava e deixava metade vazia. */
.grade { align-items: start; }

/* Campo de data vazio parecia preenchido: o "dd/mm/aaaa" saía na cor do texto.
   `:empty` não vale para input, então o alvo é o placeholder nativo do Chrome. */
input[type="date"]:not(:focus):invalid,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field { color: var(--muted); }
input[type="date"]:focus::-webkit-datetime-edit-text,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-day-field,
input[type="date"]:focus::-webkit-datetime-edit-year-field,
input[type="date"]:valid::-webkit-datetime-edit-text,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-day-field,
input[type="date"]:valid::-webkit-datetime-edit-year-field { color: var(--text); }

/* E-mail do operador: caixa alta forçada cortava no meio da letra. */
.cabecalho__acoes .etiqueta { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* A faixa do regulamento tomava ~740 px de saibro vazio antes da primeira regra. */
.faixa-foto--titulo img { min-height: 150px; max-height: 240px; object-fit: cover; }
@media (min-width: 768px) { .faixa-foto--titulo img { min-height: 190px; max-height: 280px; } }

/* O selo de telefone repetido era engolido pela elipse da coluna de nome, e a
   linha âmbar ficava sem motivo legível. Ele ganha coluna própria. */
.tabela--densa td.col-marca { white-space: nowrap; }

/* Crédito das fotos das faixas (regra da licença Unsplash). */
.faixa-foto { position: relative; }
.faixa-foto__credito {
  position: absolute; right: var(--e4); bottom: var(--e2); margin: 0;
  font-size: 0.6875rem; color: rgba(255, 255, 255, 0.82);
}
.faixa-foto__credito a { color: rgba(255, 255, 255, 0.92); }

/* Quando o espaço da prova social não está mostrando uma contagem, o número
   grande sai de cena: um "3" gigante ali era lido como "3 pré-inscritos". */
/* Paginação do painel. */
.paginacao {
  display: flex; align-items: center; gap: var(--e3);
  margin-top: var(--e4); font-size: var(--t-sm); color: var(--muted);
}

/* Abaixo de 420 px a barra não cabe com marca inteira + tema + CTA. O que sai
   é o botão de tema: é conveniência, e o sistema operacional já decide o tema
   sozinho. O nome do produto e a ação principal ficam. */
@media (max-width: 479px) {
  .cabecalho__acoes .botao-tema { display: none; }
  .cabecalho__acoes .botao { padding-inline: var(--e3); font-size: 0.8125rem; min-height: 44px; }
  .marca__simbolo { width: 28px; height: 28px; }
  .marca { gap: var(--e2); }
  .marca__linha1 { font-size: 1rem; }
}

/* ---------- Modalidades (tênis e beach tennis) ---------- */
.modalidade + .modalidade { margin-top: var(--e7); }
.modalidade__cabeca {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  padding-bottom: var(--e3); border-bottom: 2px solid var(--brand);
}
.modalidade__cabeca h3 { font-size: var(--t-xl); }
.modalidade__meta { font-size: var(--t-sm); color: var(--muted); }

.modalidade-campo { margin-top: var(--e5); }
.modalidade-campo:first-of-type { margin-top: var(--e4); }
.modalidade-campo__titulo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 var(--e2); padding-bottom: var(--e2);
  border-bottom: 1px solid var(--line);
}
.modalidade-campo__meta { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ---------- Marca mais longa (Tênis E Beach Tennis) ----------
   O nome do produto não trunca: ele quebra em duas linhas quando não cabe, e
   quem encolhe é o crômio em volta. */
.marca__linha1 {
  white-space: normal;
  text-wrap: balance;
  line-height: 1.02;
  max-width: 22ch;
}
.cabecalho__interno { min-height: 72px; }
@media (max-width: 479px) {
  .marca__linha1 { font-size: 0.9375rem; max-width: 15ch; }
  .marca__linha2 { font-size: 0.5rem; }
}