/* =====================================================================
   ROTA INSCRIÇÕES · IDENTIDADE v2
   Camada de marca aplicada POR CIMA das telas que já existem.

   Regra que guiou este arquivo: o design v2 entregue é um CONCEITO, com
   exemplos. Ele não mostra tudo o que a plataforma faz (cupom por kit, chip,
   importados, camisa infantil, editor de página, retirada de kit...). Então
   nada aqui substitui estrutura de tela: isto acrescenta a linguagem visual
   — corte diagonal, faixa de marca, tipografia — sem tocar em comportamento.

   Paleta:  #0A0A0B fundo · #EFA929 dourado · #F3EFE6 off-white
   Fontes:  Anton (títulos) · Archivo (corpo)
   ===================================================================== */

:root{
  --rt-bg:#0A0A0B;
  --rt-bg-fundo:#08080A;
  --rt-surface:#17171A;
  --rt-surface-2:#121214;
  --rt-ouro:#EFA929;
  --rt-ouro-claro:#F6C35C;
  --rt-ouro-escuro:#A57106;
  --rt-ouro-texto-claro:#7A5300;   /* dourado legível sobre fundo claro */
  --rt-osso:#F3EFE6;
  --rt-linha:rgba(243,239,230,0.10);
  --rt-linha-forte:rgba(243,239,230,0.20);
  --rt-muted:rgba(243,239,230,0.55);
  --rt-corte:26px;              /* profundidade do corte diagonal */
}

/* ---------------------------------------------------------------------
   CORTE DIAGONAL — a assinatura da identidade.
   Aplicado por clip-path para não criar elemento novo nem mexer no fluxo.
   Em telas estreitas o corte diminui: 26px num aparelho de 360px come
   quase 8% da largura e faz o conteúdo parecer torto.
   --------------------------------------------------------------------- */
.rt-corte      { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rt-corte)), calc(100% - var(--rt-corte)) 100%, 0 100%); }
.rt-corte-topo { clip-path: polygon(0 var(--rt-corte), var(--rt-corte) 0, 100% 0, 100% 100%, 0 100%); }
.rt-corte-duplo{ clip-path: polygon(0 var(--rt-corte), var(--rt-corte) 0, 100% 0, 100% calc(100% - var(--rt-corte)), calc(100% - var(--rt-corte)) 100%, 0 100%); }

@media (max-width: 560px){ :root{ --rt-corte:14px; } }
@media (prefers-reduced-motion: reduce){ .rt-fita__trilho{ animation:none !important; } }

/* ---------------------------------------------------------------------
   TÍTULOS — Anton é estreita e alta; o tracking negativo que a fonte
   anterior pedia aqui aperta demais e cola as letras.
   --------------------------------------------------------------------- */
/* RESPIRO NOS TÍTULOS — feedback direto do usuário: "muito juntas e densas,
   linhas praticamente coladas". A Anton é condensada; entrelinha abaixo de
   1.0 (que o conceito usava) cola as linhas de verdade quando o título tem
   2-3 linhas. Todas as entrelinhas de display sobem para ≥1.06 e o tracking
   abre um ponto. O impacto visual da fonte continua; a claustrofobia não. */
.rt-titulo{
  font-family:'Anton', system-ui, sans-serif;
  font-weight:400; letter-spacing:.02em; line-height:1.08; text-transform:uppercase;
}
.rt-titulo--ouro{
  background:linear-gradient(180deg, var(--rt-ouro-claro), var(--rt-ouro) 55%, var(--rt-ouro-escuro));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------------------------------------------------------------------
   FITA DE MARCA (marquee)
   --------------------------------------------------------------------- */
.rt-fita{ overflow:hidden; border-top:1px solid var(--rt-linha); border-bottom:1px solid var(--rt-linha);
  background:var(--rt-surface-2); padding:11px 0; }
.rt-fita__trilho{ display:flex; gap:34px; width:max-content; animation:rt-marquee 38s linear infinite; }
.rt-fita__trilho span{ font-family:'Anton', system-ui, sans-serif; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rt-muted); white-space:nowrap; }
.rt-fita__trilho span::after{ content:'●'; margin-left:34px; color:var(--rt-ouro); font-size:9px; vertical-align:middle; }
@keyframes rt-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------------
   BOTÃO E CARTÃO DA MARCA
   --------------------------------------------------------------------- */
.rt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Anton', system-ui, sans-serif; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; padding:15px 26px; border:0; cursor:pointer; text-decoration:none;
  color:#0A0A0B; background:linear-gradient(120deg, var(--rt-ouro), var(--rt-ouro-claro));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition:filter .18s ease, transform .14s ease;
}
.rt-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); color:#0A0A0B; }
.rt-btn:active{ transform:translateY(0); }
.rt-btn--fantasma{ background:transparent; color:var(--rt-osso); border:1px solid var(--rt-linha-forte); clip-path:none; }
.rt-btn--fantasma:hover{ border-color:var(--rt-ouro); color:var(--rt-ouro); }

.rt-card{ background:var(--rt-surface); border:1px solid var(--rt-linha); padding:22px; position:relative; }
.rt-card--corte{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.rt-card__tag{ display:inline-block; font-family:'Archivo', system-ui, sans-serif; font-weight:800;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rt-ouro);
  border:1px solid rgba(239,169,41,.42); padding:4px 11px; margin-bottom:13px; }

/* =====================================================================
   LEGIBILIDADE — correções MEDIDAS na página renderizada.

   Não são preferências de gosto: cada uma foi medida e estava abaixo do
   mínimo do WCAG AA (4,5:1 para texto normal, 3:1 para texto grande).
   Todas vinham de antes desta identidade — mas uma identidade nova não
   pode carregar texto ilegível adiante.
   ===================================================================== */

/* 1) BOTÃO DOURADO COM TEXTO CLARO — o pior caso do site.
      O "Criar evento" grande da home usava off-white sobre o dourado:
      1,76:1 medido, contra 4,5:1 exigido. É o mesmo defeito que já
      corrigi no painel. Texto sobre dourado é sempre escuro → 9,78:1. */
html .btn-gold, html a.btn-gold,
html .btn-gold:hover, html a.btn-gold:hover,
html .btn-lg.btn-gold, html a.btn-lg.btn-gold{ color:#0A0A0B; }

/* 2) SELO "INSCRIÇÕES ABERTAS" — verde escuro sobre verde médio dava
      2,66:1 num texto de 11px. Escurecendo o texto: 5,39:1.
      Mesmo motivo do "html" acima: o <style> da página vem depois. */
html .hc-status, html .ev-status, html .status-chip{ color:#00311A; }

/* 3) CHIP DE DATA (Ago / Set / Dez) — dourado sobre BRANCO dava 2,11:1
      no menor texto da página (10px). Dourado escuro → 6,85:1.
      Vale só para dourado sobre fundo claro; o dourado sobre fundo
      escuro, que é a maior parte da marca, continua igual.

      O prefixo "html" não é enfeite: cada página traz o próprio <style>
      DEPOIS deste arquivo, então uma regra de mesma especificidade
      perderia por ordem. Com o elemento a mais, esta vence sem !important.
      São duas classes porque a home usa .hc-date e a lista usa .date-badge. */
html .hc-date span,  html .hc-date small,  html .hc-date b,  html .hc-date strong,
html .date-badge span, html .date-badge small, html .date-badge b, html .date-badge strong{
  color:var(--rt-ouro-texto-claro);
}

/* 4) REMOVIDA DE PROPÓSITO — .p-quem no cartão de preço.
      Eu tinha escurecido o dourado deste rótulo achando que o cartão era
      claro. Não é: o fundo é linear-gradient(168deg, rgba(239,169,41,.11),
      #16161B 55%) — um cartão ESCURO com um véu dourado de 11%. Meu medidor
      fazia média das cores declaradas do gradiente ignorando o alfa de cada
      parada, e por isso "viu" um fundo claro que não existe.
      No cartão real o dourado tem contraste de sobra. Escurecê-lo seria a
      regressão, não a correção. */

/* 5) SELO "INSCRIÇÕES ABERTAS" — DE PROPÓSITO, NÃO ESTÁ AQUI.
      A mesma classe .status.open, dentro do mesmo .ticket-img, pede cores
      OPOSTAS em duas páginas: na lista de eventos o selo flutua sobre a capa
      com fundo verde quase opaco (pede texto escuro); na home ele é inline no
      card escuro com verde a 0,16 (pede texto claro). O que difere é a
      opacidade do fundo, e CSS não consegue consultar isso — nenhum seletor
      separa os dois casos.
      Eu tentei uma regra genérica aqui: consertou a lista e derrubou a home
      para 1,06:1. A correção certa é na página que está errada, e está em
      fix-selo-eventos.php. Se alguém sentir falta de uma regra de selo neste
      arquivo, é este parágrafo. */

/* 6) OLHO-DE-SEÇÃO EM FAIXA CLARA. Mesma armadilha do item 5: .eyebrow
      aparece tanto em faixa escura (onde o dourado da marca já tem contraste
      de sobra) quanto dentro de .block.light, cujo fundo é #F3EFE6 — ali o
      dourado cai para 3,71:1. O seletor é o container claro, medido na
      página, e não a classe do texto: assim o dourado sobre escuro, que é a
      cara da marca, continua intacto. */
html .block.light .eyebrow{ color:var(--rt-ouro-texto-claro); }

/* 7) NUMERAL DO PASSO A PASSO ("Como funciona"), só na faixa CLARA.
      Ali o círculo é #F2EFE8 e o numeral vinha #9A7514: 3,71:1 em 15px.
      Nas faixas escuras o mesmo numeral usa o dourado da marca e está ótimo —
      por isso o seletor carrega o .block.light.

      A especificidade aqui não é enfeite: a página declara
      `.block.light .track.athlete .step .num` (0-5-0). Minha primeira versão
      era `html .track.athlete .step .num` (0-4-1) e simplesmente PERDIA a
      cascata — a regra existia no arquivo e não pintava nada. Com o
      .block.light ela fica 0-5-1 e ganha por um ponto, sem !important. */
html .block.light .track.athlete .step .num{ color:var(--rt-ouro-texto-claro); }

/* 8) SELO "EXPIRADA"/"CANCELADA" no painel. Vermelho #E5615A sobre o próprio
      véu vermelho a 14% em cima do card: 4,45:1 — reprova por 0,05 num texto
      de 12px. #EA6F68 leva a 5,01:1 e continua o mesmo vermelho aos olhos, o
      que importa aqui: é cor de STATUS, e status que muda de cor confunde
      mais do que ajuda. É por isso que o ajuste é o menor possível. */
html .badge.expirada, html .badge.cancelada, html .fi-ic.expirada{ color:#EA6F68; }

/* 9) ASSINATURA "Rota Inscrições" (.ck-brand) — TAMBÉM NÃO ESTÁ AQUI, e pelo
      mesmo motivo do item 5. Eu cheguei a pôr uma regra genérica: consertou a
      página de obrigado (fundo claro, 3,99:1) e QUEBROU o checkout do Dragon
      (fundo escuro, caiu para 2,82:1). A mesma classe, dois fundos opostos,
      dois arquivos diferentes.
      A correção está na origem: em checkout.php, que é a página clara, a
      variável --gold-txt passou de #A87508 para #7A5300. Ver
      fix-selo-eventos.php. */

/* =====================================================================
   RECONSTRUÇÃO VISUAL — é isto que faz o site PARECER novo.

   A troca de paleta sozinha não muda nada aos olhos: #0E0E10 para #0A0A0B
   ninguém distingue. O que dá a cara da identidade v2 são três coisas, e
   elas estão todas aqui:

     1. TIPOGRAFIA DE DISPLAY. Anton é uma condensada alta, feita para
        caixa-alta e corpo grande. Usada em corpo médio e caixa-baixa ela
        vira "só mais uma fonte" — que é exatamente o que estava
        acontecendo. Aqui ela vira o elemento gráfico principal.
     2. CORTE DIAGONAL. A assinatura da marca. Feito com clip-path, sem
        criar elemento novo e sem mexer no fluxo da página.
     3. FAIXA DE MARCA correndo entre as seções.

   Tudo isto age sobre as classes que a página JÁ TEM. Nenhuma estrutura
   de tela é substituída — as 68 injeções de PHP da home continuam
   intactas, e com elas cupom por kit, camisa infantil, chip, importados
   e o editor de página, que o conceito do zip não mostra.
   ===================================================================== */

/* --- 1. TIPOGRAFIA DE DISPLAY ---------------------------------------
   O tracking NEGATIVO que a fonte anterior pedia (-0.02em) aperta o Anton
   a ponto de colar as letras: ela já é condensada de fábrica. Aqui vai
   positivo, e a entrelinha fecha para o bloco de título ganhar peso. */
html .hero h1,
html .sec-head h2{
  font-family:'Anton', system-ui, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.06;
}
html .hero h1{ font-size:clamp(44px, 7.4vw, 92px); margin-bottom:26px; }
html .sec-head h2{ font-size:clamp(32px, 4.6vw, 56px); }

/* O trecho em destaque do título recebe o degradê da marca. O sublinhado
   em SVG que existia embaixo dele sai: com caixa-alta e corpo grande ele
   briga com a letra em vez de apoiar. */
html .hero h1 .accent{
  background:linear-gradient(180deg, var(--rt-ouro-claro), var(--rt-ouro) 52%, var(--rt-ouro-escuro));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  white-space:normal;               /* caixa-alta é mais larga: deixar quebrar */
}
html .hero h1 .accent svg{ display:none; }

/* --- 2. CORTE DIAGONAL ----------------------------------------------
   Canto inferior direito cortado nos cartões e no bloco de busca. É o
   mesmo ângulo do .rt-corte, em escala menor para não comer conteúdo. */
html .hc-card,
html .search-card,
html .ticket,
html .featured-event{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  border-radius:0;
}
/* Em tela estreita o corte encolhe: 20px num aparelho de 360px come
   quase 6% da largura e o cartão fica visivelmente torto. */
@media (max-width: 560px){
  html .hc-card, html .search-card, html .ticket, html .featured-event{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  }
}

/* Botão dourado com o mesmo corte, e em Anton — vira peça de marca. */
html .btn-gold{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  border-radius:0;
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  letter-spacing:.05em; text-transform:uppercase;
}

/* Botão secundário ("Sou organizador", "Ver detalhes" no painel): o conceito
   não tem NENHUMA pílula arredondada — canto reto é parte da linguagem. Sem
   isso o cabeçalho fica meio novo e meio antigo lado a lado, que foi o que
   você notou. Só a forma muda; a cor e o contorno continuam iguais, então
   não mexe em legibilidade. */
html .btn-ghost, html a.btn-ghost, html .btn-outline, html a.btn-outline{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* Chips de esporte: cantos retos e caixa-alta, alinhados à marca. */
html .sport{ border-radius:0; }
html .sport span:last-child{ letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; font-weight:700; }

/* Olho-de-seção com a barra da marca à esquerda. */
html .sec-head .eyebrow{
  display:inline-block; padding-left:13px; position:relative;
  letter-spacing:.2em; text-transform:uppercase;
}
html .sec-head .eyebrow::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:1em; background:var(--rt-ouro);
}

/* =====================================================================
   HOME v2 — as estruturas novas do conceito.
   ===================================================================== */

.rt-hero-v2{ position:relative; padding:74px 0 56px; overflow:hidden; }
.rt-topo{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none; }

/* row-reverse + wrap: no desktop o título fica à esquerda e os eventos à
   direita; quando não cabe lado a lado, o wrap joga os EVENTOS para cima —
   que é o certo no celular, porque o que o atleta quer é o evento, não a
   manchete. É o mesmo truque do conceito. */
.rt-hero-grid{
  position:relative; z-index:1;
  display:flex; flex-direction:row-reverse; flex-wrap:wrap;
  gap:40px; align-items:flex-start;
}
.rt-hero-copy{ flex:1 1 460px; min-width:300px; display:flex; flex-direction:column; gap:30px; }

.rt-selo{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  border:1px solid rgba(239,169,41,.35); padding:8px 16px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rt-ouro);
}
.rt-ponto{ width:8px; height:8px; border-radius:50%; background:var(--rt-ouro); animation:rt-pulso 2s infinite; }
@keyframes rt-pulso{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,169,41,.5); }
  70%    { box-shadow:0 0 0 10px rgba(239,169,41,0); }
}
@media (prefers-reduced-motion: reduce){ .rt-ponto{ animation:none; } }

/* O título em três linhas: cheia, dourada e VAZADA. O vazado é
   -webkit-text-stroke com preenchimento transparente — é o contorno que dá
   o ar de número de peito. */
.rt-h1{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  font-size:clamp(46px, 7.2vw, 98px); line-height:1.05; letter-spacing:.015em;
  text-transform:uppercase; margin:0;
}
.rt-h1 .l1{ display:block; color:var(--rt-osso); }
.rt-h1 .l2{ display:block; color:var(--rt-ouro); }
/* Letra vazada: o contorno é a única coisa que desenha a forma, então ele
   precisa de MAIS contraste que texto cheio, não menos — não há massa de
   cor ajudando o olho. A 0,55 ficava um cinza apagado; a 0,85 lê como
   letra. Continua vazada, que é a intenção do conceito. */
.rt-h1 .l3{
  display:block; color:transparent;
  -webkit-text-stroke:2px rgba(243,239,230,.85);
}
/* Contorno de 2px numa letra de 46px fica grosso demais e fecha os vãos
   (o "ç", o "ã"): em tela pequena o traço afina junto. */
@media (max-width: 560px){ .rt-h1 .l3{ -webkit-text-stroke-width:1.5px; } }

.rt-hero-sub{ max-width:540px; font-size:17.5px; line-height:1.65; color:rgba(243,239,230,.78); margin:0; }

/* --- BUSCA --- */
.rt-busca{
  background:var(--rt-surface-2); border:1px solid var(--rt-linha); padding:10px; max-width:880px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.rt-busca-form{ display:flex; flex-wrap:wrap; gap:8px; }
.rt-busca-form input, .rt-busca-form select{
  background:#1A1A1D; border:1px solid rgba(243,239,230,.08); color:var(--rt-osso);
  font-family:'Archivo', system-ui, sans-serif; font-weight:500; padding:15px 14px; outline:none;
}
.rt-busca-form input{ flex:2 1 220px; min-width:0; }
.rt-busca-form select{ flex:1 1 130px; min-width:0; cursor:pointer; }
.rt-busca-form input:focus, .rt-busca-form select:focus{ border-color:var(--rt-ouro); }
.rt-busca-btn{
  flex:0 0 auto; background:var(--rt-ouro); color:#0A0A0B; border:0; cursor:pointer;
  font-family:'Anton', system-ui, sans-serif; font-size:15px; letter-spacing:.05em;
  text-transform:uppercase; padding:15px 30px; transition:background .2s ease;
}
.rt-busca-btn:hover{ background:var(--rt-ouro-claro); }

/* --- CARTÃO DE DESTAQUE (bib) --- */
.rt-destaque{
  flex:1 1 340px; min-width:300px; background:var(--rt-surface-2);
  border:1px solid var(--rt-linha); border-top:3px solid var(--rt-ouro);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  display:flex; flex-direction:column;
}
.rt-destaque-top{ padding:18px 20px 12px; }
.rt-destaque-tit{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Anton', system-ui, sans-serif; font-size:16px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rt-osso);
}
/* UM CARTÃO INTEIRO + O PRÓXIMO ESPIANDO. Esta regra já mudou duas vezes por
   feedback, e o histórico importa para ninguém "consertar" de volta:
     v1 (herdada): flex 0 0 min(280px,82%) → cabiam 1,54 cartões e o segundo
        aparecia CORTADO no meio, parecendo defeito;
     v2 (minha): 100% → um cartão perfeito, mas a lateral direita virava um
        vazio morto e nada indicava que havia mais eventos;
     v3 (pedido do usuário): 86% com encaixe — o cartão principal inteiro e
        uma fatia honesta do próximo, que convida a deslizar. É o que o
        conceito do zip desenha.
   E o carrossel deixa de ser travado em 430px: em tela média o bloco de
   destaque ocupa a largura toda e o limite antigo deixava um buraco à
   direita (o print do usuário mostrava exatamente isso). */
.rt-destaque .hero-carousel{ max-width:100%; }
.rt-destaque .hc-card{ flex:0 0 86% !important; max-width:86%; scroll-snap-align:start; }
.rt-destaque .hc-track{ gap:12px; }

/* SETAS DO CARROSSEL — refeitas a pedido: botão DOURADO com o corte da
   identidade e a seta PRETA, sobrepostas nas laterais do carrossel (não
   mais no cabeçalho, onde a primeira versão encolhia e virava dois traços).
   Elas SOMAM à rolagem por arraste, não a substituem. */
.rt-destaque{ position:relative; }
.rt-destaque-top{ display:flex; align-items:center; gap:12px; }
.rt-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:40px; height:40px; padding:0; border:0; cursor:pointer;
  display:grid; place-items:center;
  background:var(--rt-ouro); color:#0A0A0B;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.75);
  transition:background .18s ease, transform .14s ease;
}
.rt-seta:hover{ background:var(--rt-ouro-claro); transform:translateY(calc(-50% - 1px)); }
.rt-seta:active{ transform:translateY(-50%); }
.rt-seta--esq{ left:10px; }
.rt-seta--dir{ right:10px; }
.rt-seta svg{ width:18px; height:18px; }
/* No celular as setas encolhem um pouco para não cobrir o preço do cartão. */
@media (max-width: 560px){
  .rt-seta{ width:34px; height:34px; }
  .rt-seta svg{ width:15px; height:15px; }
}

.rt-bib{ display:block; text-decoration:none; }
.rt-bib-capa{
  position:relative; width:100%; aspect-ratio:1/1; max-height:340px;
  background:#0A0A0B center top / cover no-repeat;
}
.rt-bib-tag{
  position:absolute; top:12px; left:12px; background:var(--rt-osso); color:#0A0A0B;
  font-family:'Anton', system-ui, sans-serif; font-size:10.5px; letter-spacing:.1em;
  padding:5px 10px; text-transform:uppercase; box-shadow:0 8px 18px -8px rgba(0,0,0,.85);
}
.rt-bib-tag.destaque{ background:var(--rt-ouro); }
.rt-bib-corpo{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.rt-bib-nome{
  font-family:'Anton', system-ui, sans-serif; font-size:21px; line-height:1.18; letter-spacing:.02em;
  color:var(--rt-osso); text-transform:uppercase;
}
/* LEGIBILIDADE DO TEXTO PEQUENO. Estes já passavam no mínimo do WCAG
   (6,75:1), mas passar não é o mesmo que ler bem: a 10 e 12,5px com 62% de
   opacidade o texto some no cartão. Subo opacidade E corpo — os dois juntos,
   porque em texto miúdo o tamanho pesa tanto quanto o contraste. */
.rt-bib-meta{ font-size:13px; font-weight:600; color:rgba(243,239,230,.78); }
.rt-bib-pe{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rt-bib-preco .rot{
  display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  color:rgba(243,239,230,.78); text-transform:uppercase;
}
.rt-bib-preco .val{ display:block; font-family:'Anton', system-ui, sans-serif; font-size:20px; color:var(--rt-ouro); margin-top:2px; }
.rt-bib-cta{ background:var(--rt-ouro); color:#0A0A0B; font-weight:800; font-size:13px; padding:11px 20px; white-space:nowrap; }
.rt-bib:hover .rt-bib-cta{ background:var(--rt-ouro-claro); }

/* --- FAIXA ROLANTE, no tamanho do conceito --- */
.rt-fita__trilho span{ font-size:22px; letter-spacing:.10em; padding-right:40px; color:rgba(243,239,230,.62); }
.rt-fita__trilho span::after{ content:none; }
.rt-fita__trilho .ouro{ color:var(--rt-ouro); }

/* --- CONFIANÇA --- */
.rt-confianca{ position:relative; border-top:1px solid var(--rt-linha); background:#0D0D0F; overflow:hidden; padding:78px 0; }
.rt-eyebrow-d{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rt-ouro); margin-bottom:12px; }
.rt-h2{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  font-size:clamp(32px, 4.5vw, 56px); text-transform:uppercase; line-height:1.08;
  margin:0 0 40px; max-width:700px; color:var(--rt-osso);
}
.rt-h2 .vazado{ color:transparent; -webkit-text-stroke:1.5px var(--rt-ouro); }
.rt-deps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin-bottom:34px; }
.rt-dep{ background:var(--rt-surface-2); border:1px solid var(--rt-linha); padding:24px; margin:0; display:flex; flex-direction:column; gap:14px; }
.rt-estrelas{ color:var(--rt-ouro); font-size:14px; letter-spacing:3px; }
.rt-dep blockquote{ margin:0; font-size:15.5px; line-height:1.62; color:rgba(243,239,230,.9); }
.rt-dep figcaption{ font-size:13px; font-weight:700; color:rgba(243,239,230,.78); }
/* A marca "depoimento ilustrativo" precisa ser LEGÍVEL, não escondida: é ela
   que impede que um texto inventado passe por depoimento real de cliente. */
.rt-dep .ilustrativo{ color:var(--rt-ouro); }
.rt-selos{ display:flex; flex-wrap:wrap; gap:10px; }
.rt-selo-conf{ border:1px solid rgba(243,239,230,.15); padding:10px 18px; font-size:13px; font-weight:700; color:rgba(243,239,230,.78); }

/* --- CTA ORGANIZADORES (bloco dourado) --- */
.rt-cta-org{ background:var(--rt-ouro); clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%); margin-top:-1px; }
.rt-cta-grid{
  position:relative; padding-top:100px; padding-bottom:84px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:36px;
}
.rt-cta-linhas{ position:absolute; right:0; bottom:0; width:50%; height:100%; opacity:.14; pointer-events:none; }
.rt-cta-copy{ max-width:560px; position:relative; }
.rt-eyebrow-esc{ font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#0A0A0B; margin-bottom:14px; }
.rt-h2.esc{ color:#0A0A0B; margin-bottom:16px; }
.rt-cta-copy p{ font-size:17px; line-height:1.6; color:rgba(10,10,11,.9); margin:0; font-weight:500; }
.rt-cta-acao{ display:flex; flex-direction:column; gap:14px; position:relative; }
.rt-cta-btn{
  background:#0A0A0B; color:var(--rt-ouro); font-weight:800; font-size:16px; padding:18px 36px;
  text-align:center; text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition:transform .2s ease, color .2s ease;
}
.rt-cta-btn:hover{ transform:translateY(-3px); color:var(--rt-ouro-claro); }
.rt-cta-obs{ font-size:13.5px; font-weight:700; color:rgba(10,10,11,.88); text-align:center; }

@media (max-width: 760px){
  .rt-hero-v2{ padding:48px 0 40px; }
  .rt-hero-grid{ gap:28px; }
  .rt-busca-btn{ flex:1 1 100%; }
  .rt-cta-grid{ padding-top:74px; padding-bottom:60px; }
  .rt-cta-acao{ width:100%; }
  .rt-fita__trilho span{ font-size:17px; }
}

/* =====================================================================
   PAINEL DO INSCRITO — com ênfase nos DESAFIOS VIRTUAIS.

   O conceito "Desafios Virtuais v2" trata o desafio como jogo: a barra de
   progresso com marcos, a medalha como objeto de desejo e o corte diagonal
   como moldura. A página já tem toda a mecânica (adesão, Pix, progresso do
   Strava, conquistas) — o que entra aqui é só a linguagem visual por cima
   das classes que já existem.
   ===================================================================== */

/* Cartão de desafio: canto cortado no lugar do arredondado, e a borda
   dourada só no que está ATIVO — o olho precisa achar o desafio em
   andamento antes dos outros. */
html .dsf, html .gcard, html .card{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
html .dhero{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  background-image:radial-gradient(900px 480px at 82% -10%, rgba(239,169,41,.10), transparent 60%);
}

/* A MEDALHA é o motivo de a pessoa estar ali. Ganha respiro, moldura
   dourada e um brilho lento — lento de propósito: brilho rápido em algo que
   fica parado na tela vira distração, não recompensa. */
html .dsf-med, html .medalha img{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  border:2px solid rgba(239,169,41,.55);
  animation:rt-brilho 4.5s ease-in-out infinite;
}
@keyframes rt-brilho{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(239,169,41,.22)); }
  50%    { filter:drop-shadow(0 0 20px rgba(239,169,41,.42)); }
}
@media (prefers-reduced-motion: reduce){ html .dsf-med, html .medalha img{ animation:none; } }

/* BARRA DE PROGRESSO: degradê do dourado escuro ao claro, como no conceito.
   O preenchimento fica mais alto (14px) porque a barra é a informação
   principal da tela — em 10px ela lia como um detalhe. */
html .gami-barra{ height:14px; border-radius:0; }
html .gami-barra > *{
  background-image:linear-gradient(90deg, #9A6A12, var(--rt-ouro)) !important;
  border-radius:0;
}

/* Conquistas: grade de selos com canto cortado. */
html .conq-grid > *{ border-radius:0; clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }

/* Títulos do painel do inscrito em tipografia de display, como no site. */
html .dhero h1, html .dhero h2, html .gsec > h2, html .dsf h3{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.14;
}

/* Pílulas e etiquetas de estado acompanham o resto. */
html .pill, html .dot, html .kick{ border-radius:0; }

/* AS ABAS EM DESTAQUE DA ÁREA DO ATLETA — o pior contraste que encontrei no
   projeto inteiro, e logo na aba que mais importa:
     "Desafios 🏅"  texto BRANCO sobre degradê DOURADO ....... 1,63:1
     "Strava"       texto BRANCO sobre o laranja da marca .... 3,40:1
   Branco sobre dourado é quase invisível — 1,63 é praticamente texto da cor
   do fundo. Texto escuro resolve os dois: 12,14:1 no dourado e 5,82:1 no
   laranja.
   Escolhi escurecer o TEXTO em vez de escurecer o laranja porque #FC4C02 é a
   cor de marca do Strava; mexer nela descaracteriza a integração, e o ganho
   seria menor (4,69:1 contra 5,82:1). */
html .tab.destaque, html .tab.destaque:hover,
html .tab.tab-desafios, html .tab.tab-strava{ color:#0A0A0B; }
html .tab.destaque *, html .tab.tab-desafios *, html .tab.tab-strava *{ color:inherit; }

/* Ênfase nos DESAFIOS: a aba fica com o corte da marca e peso de display,
   para ser a primeira coisa que o atleta acha na área dele. */
html .tab.tab-desafios{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  letter-spacing:.04em; text-transform:uppercase;
}
html .tab.tab-strava{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* =====================================================================
   FORMULÁRIO DE INSCRIÇÃO — conceito "Formulario Inscricao v2".
   Mesma regra: só a camada visual. Nada de cupom por kit, camisa infantil,
   inscrição para outra pessoa ou Pix é tocado.
   ===================================================================== */

/* ATENÇÃO AO NOME DAS CLASSES: a primeira versão desta seção mirava
   .ck-card / .form-card / .kit-card, que eu SUPUS que existiam. Não existem.
   As classes reais do fluxo de inscrição, lidas na página renderizada, são
   .panel (os blocos de cada etapa) e .opt (as opções de kit). Escrever CSS
   para classe imaginária não quebra nada — e é justamente por isso que passa
   despercebido: some sem erro nenhum. */
html .panel{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
html .opt{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
html .panel input, html .panel select, html .panel textarea,
html .opt input, html .opt select{ border-radius:0; }
html .panel input:focus, html .panel select:focus, html .panel textarea:focus{
  border-color:var(--rt-ouro); outline:none;
}
/* Etiquetas de kit/tamanho e botões do fluxo acompanham a forma. */
html .chip-r, html .tote, html .btn-green, html .sel{ border-radius:0; }

/* O passo atual do checkout ganha peso: é a única informação que diz
   "você está aqui" num fluxo de quatro etapas. */
html .step.open .step-num{ font-family:'Anton', system-ui, sans-serif; font-weight:400; }

/* =====================================================================
   PAINÉIS ADMINISTRATIVOS — reformulação completa do front (v2).
   Vale para o painel do ORGANIZADOR e o do SUPER: os dois usam as mesmas
   classes (.card, .fld, .kpi, .page-head, .btn...), então uma folha só
   atende os dois sem duplicar regra.

   O que muda: forma (corte diagonal no lugar do canto arredondado),
   tipografia de display nos títulos e números, e a barra lateral no
   desenho do conceito. O que NÃO muda: nenhuma estrutura de tela, nenhum
   fluxo, nenhuma consulta. Todas as informações continuam onde estão.

   REGRA QUE ME GUIOU AQUI: nada pode empurrar conteúdo depois que a página
   carrega. Por isso tudo é clip-path, cor e tipografia — propriedades que
   não recalculam layout. Largura de coluna e altura de bloco ficam como
   estão, para a página não "dançar" ao abrir.
   ===================================================================== */

/* --- BARRA LATERAL ---------------------------------------------------
   A LARGURA FICA COMO ESTÁ (264px), de propósito. O conceito desenha 248px,
   mas essa medida é lida em DOIS lugares — a barra e o recuo do conteúdo
   (.main margin-left) — a partir do mesmo --sidebar-w no :root. Sobrescrever
   de fora só funciona se esta folha vencer a cascata nos dois; se vencer em
   um só, sobra uma faixa vazia de 16px ao lado da barra.
   16px de diferença ninguém percebe; uma faixa vazia, sim. A identidade aqui
   vem da forma, da tipografia e da cor — não de 16 pixels de largura. */
html .sidebar{
  border-right:1px solid rgba(243,239,230,.07);
}
html .brand{
  border-bottom:1px solid rgba(243,239,230,.07);
  padding-bottom:16px; margin-bottom:4px;
}
html .brand-txt strong{ letter-spacing:.02em; text-transform:uppercase; }

/* Item de menu: canto reto e a marca dourada à esquerda no ativo — é ela
   que diz "você está aqui" sem depender só da cor de fundo. */
html .nav-item{
  border-radius:0;
  font-weight:600;
}
html .nav-item.active{
  background:linear-gradient(90deg, rgba(239,169,41,.16), transparent 72%);
}
html .nav-group-label{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  letter-spacing:.18em; font-size:11px;
}

/* --- CARTÕES E BLOCOS ------------------------------------------------ */
html .card, html .kpi, html .chart-card, html .rel-bloco, html .notice, html .alert{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
/* Em tela estreita o corte encolhe: 16px num cartão de 320px come 5% da
   largura e o bloco parece torto. */
@media (max-width: 560px){
  html .card, html .kpi, html .chart-card, html .rel-bloco, html .notice, html .alert{
    clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  }
}

/* O NÚMERO do indicador é a informação da tela — ganha a fonte de display,
   que é alta e estreita e por isso lê grande sem ocupar mais largura. */
html .kpi .k-val, html .kpi strong, html .kpi b{
  font-family:'Anton', system-ui, sans-serif; font-weight:400; letter-spacing:.01em;
}
html .k-lbl{ letter-spacing:.14em; text-transform:uppercase; }

/* --- TÍTULO DE PÁGINA ------------------------------------------------ */
html .page-head h1, html .page-head h2, html .fs-head h2{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.16;
}

/* --- FORMULÁRIOS ----------------------------------------------------- */
html .fld, html .fld input, html .fld select, html .fld textarea,
html input[type=text], html input[type=email], html input[type=tel],
html input[type=number], html input[type=date], html input[type=search],
html input[type=password], html select, html textarea{
  border-radius:0;
}
html .fld input:focus, html .fld select:focus, html .fld textarea:focus{
  border-color:var(--rt-ouro); outline:none;
}
html .switch, html .slider{ border-radius:999px; }   /* interruptor continua redondo: é a forma que diz "arrasta" */

/* --- TABELAS --------------------------------------------------------- */
html .table-scroll{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
html .cell-name{ font-weight:700; }
html thead th{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; font-size:11.5px;
}

/* --- BOTÕES E ETIQUETAS ---------------------------------------------- */
html .btn-sm{ border-radius:0; }
html .icon-btn{ border-radius:0; }
html .tag, html .chip{ border-radius:0; }

/* --- GAVETA DE DETALHES ---------------------------------------------- */
html .drawer{ border-radius:0; border-left:1px solid rgba(243,239,230,.10); }
html .drawer-head{ border-bottom:1px solid rgba(243,239,230,.07); }
html .drawer-head strong{ font-family:'Anton', system-ui, sans-serif; font-weight:400; text-transform:uppercase; }

/* --- QUADRO (KANBAN) DE INSCRITOS ------------------------------------
   Colunas rolam na horizontal DENTRO do próprio quadro, como no conceito.
   Isso é de propósito: no celular quatro colunas não cabem, e empilhá-las
   viraria uma lista comprida — que é exatamente o que a tabela já faz. */
.rt-visao{ display:flex; gap:8px; margin-bottom:12px; }
.rt-quadro-wrap[hidden]{ display:none; }
.rt-quadro{
  display:flex; gap:12px; align-items:flex-start;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:10px;
}
.rt-col{
  flex:1 0 250px; max-width:300px; min-width:0;
  background:var(--card, #17171A); border:1px solid var(--line, rgba(243,239,230,.10));
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  padding:12px;
}
.rt-col-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.rt-col-t{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}
.rt-col-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.rt-col-n{
  font-size:11px; font-weight:800; padding:2px 8px;
  background:rgba(243,239,230,.07); color:var(--muted, rgba(243,239,230,.62));
}
.rt-col-b{ display:flex; flex-direction:column; gap:8px; min-height:60px; }
.rt-cartao{
  background:var(--bg-3, #1E1E24); border:1px solid var(--line, rgba(243,239,230,.10));
  padding:11px 11px 9px;
}
.rt-cartao-top{ display:flex; align-items:center; gap:10px; }
.rt-ini{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  font-family:'Anton', system-ui, sans-serif; font-size:12px;
  background:rgba(239,169,41,.16); color:var(--rt-ouro);
}
.rt-cartao-id{ min-width:0; }
.rt-cartao-id b{
  display:block; font-size:12.5px; font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rt-cartao-id small{ display:block; font-size:10.5px; color:rgba(243,239,230,.62); }
.rt-cartao-pe{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.rt-cartao-val{ font-size:11.5px; font-weight:800; color:var(--rt-ouro); }
.rt-cartao-q{ font-size:10.5px; color:rgba(243,239,230,.62); }
.rt-col-vazia{
  border:1.5px dashed rgba(243,239,230,.14); padding:14px 10px; margin:0;
  text-align:center; font-size:11.5px; color:rgba(243,239,230,.62);
}
.rt-quadro-obs{ font-size:12.5px; color:rgba(243,239,230,.62); margin:10px 0 0; max-width:640px; }

/* No tema claro do painel as cores acima trocam sozinhas pelas variáveis,
   menos estas duas, que são escritas direto. */
:root[data-theme="light"] .rt-col-n{ background:rgba(18,18,20,.06); color:rgba(18,18,20,.62); }
:root[data-theme="light"] .rt-cartao-id small,
:root[data-theme="light"] .rt-cartao-q,
:root[data-theme="light"] .rt-quadro-obs,
:root[data-theme="light"] .rt-col-vazia{ color:rgba(18,18,20,.62); }
:root[data-theme="light"] .rt-col-vazia{ border-color:rgba(18,18,20,.16); }

/* --- ASSISTENTE DE CRIAÇÃO (passos) ---------------------------------- */
html .wz-num{ border-radius:0; font-family:'Anton', system-ui, sans-serif; font-weight:400; }

/* =====================================================================
   MELHORIAS 16 — rodada de refinamentos pedida pelo usuário.
   ===================================================================== */

/* --- CUPOM EM DESTAQUE. "Às vezes passa despercebido": o campo vivia com a
   mesma cara de qualquer outro. Ganha moldura tracejada dourada e um véu de
   fundo — destaca sem gritar, e sem competir com o botão de finalizar, que
   continua sendo a ação principal do carrinho. */
html .cupom-box{
  border:1.5px dashed rgba(239,169,41,.5);
  background:rgba(239,169,41,.06);
  padding:14px 16px; margin:14px 0;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
html .cupom-lbl{
  font-family:'Anton', system-ui, sans-serif; font-weight:400; font-size:13.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rt-ouro);
}
html .cupom-lbl::before{ content:'🎟️ '; }

/* --- ABAS DO PAINEL DO CORREDOR. O print mostrou quatro abas com quatro
   formas diferentes (pílula, texto solto, caixa laranja, caixa verde) que
   quebravam em duas linhas sem alinhamento. Agora: mesma altura, mesma
   forma, mesmo corpo — a HIERARQUIA vem só da cor (ativa dourada, Strava
   com o laranja da marca deles, Desafios com o degradê), não de tamanhos
   diferentes brigando entre si. */
html .tabs{ display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
html .tabs .tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; font-size:13px; font-weight:700; line-height:1;
  border:1px solid rgba(243,239,230,.16); border-radius:0;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
html .tabs .tab.on{ border-color:transparent; }
html .tab.tab-desafios{ font-size:13px; letter-spacing:.05em; }

/* --- "SEU EVENTO NA ROTA" NO CELULAR. O print mostrava um vão preto enorme
   entre o último selo de confiança e a faixa dourada, com uma pegada
   flutuando sozinha no meio do nada. Causa: o padding de 78px da seção de
   confiança somado ao corte de 40px do CTA. No celular tudo comprime e a
   segunda pegada some — pegada é rastro de quem passou, não enfeite de
   vazio. */
@media (max-width: 640px){
  .rt-confianca{ padding:46px 0 34px; }
  .rt-confianca svg[aria-hidden]:nth-of-type(2){ display:none; }
  .rt-cta-org{ clip-path:polygon(0 22px, 100% 0, 100% 100%, 0 100%); }
  .rt-cta-grid{ padding-top:56px; padding-bottom:48px; }
}

/* --- EVENTOS SUGERIDOS (venda cruzada). Cartões enxutos: capa pequena,
   nome, data e um chamado. Usados na página do evento, no obrigado e no
   painel do corredor. */
.rt-sug{ margin:34px 0 8px; }
.rt-sug-t{
  font-family:'Anton', system-ui, sans-serif; font-weight:400; font-size:17px;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 12px;
  display:flex; align-items:center; gap:9px;
}
.rt-sug-t::before{ content:''; width:4px; height:1em; background:var(--rt-ouro); flex:none; }
.rt-sug-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; }
.rt-sug-card{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--rt-surface); border:1px solid var(--rt-linha); padding:10px 12px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition:border-color .2s ease;
}
.rt-sug-card:hover{ border-color:rgba(239,169,41,.45); }
.rt-sug-img{ width:56px; height:56px; flex:none; background:#0A0A0B center/cover no-repeat; }
.rt-sug-info{ min-width:0; }
.rt-sug-nome{
  display:block; font-family:'Anton', system-ui, sans-serif; font-size:13.5px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--rt-osso);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rt-sug-meta{ display:block; font-size:11.5px; color:rgba(243,239,230,.65); margin-top:3px; }
.rt-sug-cta{ display:block; font-size:11px; font-weight:800; color:var(--rt-ouro); margin-top:4px; }

/* --- BOTÕES DO CARTÃO DE INSCRIÇÃO (painel do corredor) --- */
.rt-insc-acoes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.rt-insc-acoes .btn{ font-size:12.5px; padding:8px 14px; }

/* --- SORTEIO NO PAINEL --- */
.rt-sorteio-link{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:rgba(239,169,41,.07); border:1.5px dashed rgba(239,169,41,.45);
  padding:12px 14px; margin:10px 0;
}
.rt-sorteio-link code{
  font-size:13px; word-break:break-all; color:var(--rt-ouro); background:transparent;
}

/* =====================================================================
   BLOG NA IDENTIDADE v2 — lista e página de artigo.
   As classes são as que o blog já usa (.post, .img, .date, .more, .cover,
   .content): nada de reescrever página, só vestir.
   ===================================================================== */

/* Lista: cartão com o corte da marca, capa alta e data como etiqueta. */
html .post{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  border:1px solid var(--rt-linha);
  transition:border-color .2s ease, transform .18s ease;
}
html .post:hover{ border-color:rgba(239,169,41,.45); transform:translateY(-2px); }
html .post .img{ border-radius:0; }
html .post h2, html .post h3{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.16;
}
html .post .date{
  font-family:'Anton', system-ui, sans-serif; font-weight:400; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rt-ouro);
}
html .post .more{ color:var(--rt-ouro); font-weight:800; }

/* Artigo: título de display, H2 com a barra dourada, imagens cortadas e
   legendas discretas — a assinatura visual do site nas matérias. */
html article.wrap h1{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.015em; line-height:1.12;
}
html .cover{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
html .content h2{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.18;
  padding-left:13px; position:relative; margin-top:34px;
}
html .content h2::before{
  content:''; position:absolute; left:0; top:.12em; width:4px; height:1em;
  background:var(--rt-ouro);
}
html .content h3{ font-weight:800; margin-top:22px; }
/* FOTO COM MOLDURA DOURADA — pedido do usuário. A moldura é um filete
   dourado colado na imagem mais uma sombra sólida dourada deslocada — o
   "fundo amarelo" aparece por trás do canto inferior direito, na linguagem
   do corte da marca. (O clip-path saiu daqui de propósito: ele cortaria a
   sombra junto e a moldura sumiria.) */
html .content figure{ margin:26px 4px 26px 0; }
html .content figure img{
  width:100%; height:auto; display:block; border-radius:0;
  border:2px solid var(--rt-ouro);
  box-shadow:10px 10px 0 rgba(239,169,41,.35);
}
/* LEGENDA COM CARA DE LEGENDA — não mais uma linha apagada: vira uma
   plaquinha com filete dourado, texto maior e claro. */
html .content figcaption{
  margin-top:14px; padding:9px 14px;
  background:rgba(239,169,41,.08);
  border-left:3px solid var(--rt-ouro);
  font-size:13.5px; line-height:1.5; color:rgba(243,239,230,.85);
  font-style:italic;
}

/* "LEIA TAMBÉM" LEGÍVEL — o print do usuário mostrou a lista inteira em
   Anton miúda: fonte condensada em corpo pequeno é para TÍTULO, não para
   lista de links. Os itens voltam para a Archivo em corpo de leitura; só o
   cabeçalho da seção fica em display, maior e com respiro. */
html .outros h2, html .outros h3{
  font-family:'Anton', system-ui, sans-serif; font-weight:400;
  font-size:19px; letter-spacing:.06em; text-transform:uppercase;
  line-height:1.2; margin-bottom:14px;
}
html .outros a{
  font-family:'Archivo', system-ui, sans-serif !important;
  font-size:15.5px; font-weight:700; letter-spacing:0; text-transform:none;
  line-height:1.55; color:var(--rt-osso);
}
html .outros a:hover{ color:var(--rt-ouro); }
html .content ul li{ margin:6px 0; }
html .content a{ text-decoration-color:rgba(239,169,41,.5); }

/* ---------------------------------------------------------------------
   RESPONSIVIDADE DE BASE — vale para o site inteiro.
   São os problemas reais medidos no projeto, não teoria.
   --------------------------------------------------------------------- */

/* 1) Nada pode empurrar a página para os lados no celular: uma única
      imagem ou tabela larga demais faz a página inteira deslizar. */
html, body{ max-width:100%; overflow-x:hidden; }

/* 2) Mídia nunca estoura o container. */
img, video, canvas, svg, iframe{ max-width:100%; height:auto; }

/* 3) Tabela larga rola DENTRO do próprio quadro, sem entortar a tela. */
.table-scroll, .rt-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 4) Palavra gigante (e-mail, link, código Pix) quebra em vez de alargar
      o container e empurrar tudo para fora. */
.rt-quebra, td, th, p, li, h1, h2, h3, h4{ overflow-wrap:anywhere; }

/* 5) iOS dá zoom automático em campo com fonte < 16px ao focar, e o usuário
      perde o enquadramento da página no meio da inscrição.

      É UM DOS DOIS !important DO ARQUIVO (o outro desliga a animação da
      fita para quem pede menos movimento), e é proposital. A versão sem ele
      não funcionava: as páginas declaram `.field input{font-size:14.5px}`
      (0-1-1) e esta folha carrega ANTES do <style> de cada página, então
      nem `html input` (0-0-2) ganharia. Medido: home 14,5px, checkout do
      Dragon 15px, painel/página 14px, importados 12,5px — todos dariam zoom.
      Não é preferência de estilo, é defeito de uso: a tela pula quando o
      dedo toca o campo. Por isso vence à força, e só abaixo de 640px.
      Caixas de marcar ficam de fora — nelas font-size não muda nada. */
@media (max-width: 640px){
  html input:not([type=checkbox]):not([type=radio]),
  html select,
  html textarea{ font-size:16px !important; }
}

/* 6) Alvo de toque: botão baixo demais erra o dedo. 44px é o mínimo
      recomendado (WCAG 2.5.5 e guias de iOS/Android). */
@media (max-width: 760px){
  .rt-btn{ min-height:48px; width:100%; }
}

/* 7) Respeita a área segura de aparelhos com notch. */
@supports (padding: max(0px)){
  .rt-safe{ padding-left:max(16px, env(safe-area-inset-left));
            padding-right:max(16px, env(safe-area-inset-right)); }
}