/* ============================================================================
   KDB RACING — folha de estilo única do site.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700;800&display=swap');

/* ── PARTE 1 — Estilos base ────────────────────────────────────────────────── */
/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9; /* review round 7 (Barron): the accent moves to
     the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
     accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
     accent held (L 0.660, so the documented ratios survive) and chroma
     in the product blurple's own range (its token sits at C 0.118; the
     accent takes 0.125, from the old steel's 0.030):
     the accent now reads as an accent rather than another neutral. */
  --color-accent-2: #a7a1db; /* the machine-derived stand-in follows: same
     hue, same L 0.734, chroma at the same 2:3 proportion it held */
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* Deck section-divider ground — review round 3: saturation as presence.
     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
     family; C 0.094 — written when the accent held C 0.030, before the
     round-7 blurple raised it past the ground's) with a lighter bloom and
     a ghost tint of the same hue, while the slide grounds stay
     desaturated. Deck-scale fills only — not interface colors. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
.table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ── PARTE 2 — Visual da KDB (cores F1, layout, animações) ─────────────────── */
/* ==========================================================================
   KDB — Kart da Baixada — estilos do site (por cima do Nocturne)
   Inspiração F1: fundo escuro, vermelho de assinatura, maiúsculas e velocidade.
   Para manutenção: cores, dados de etapa e links ficam comentados nas páginas.
   ========================================================================== */

/* ── Vermelho F1: remapeia a rampa de acento do Nocturne ───────────────── */
:root{
  --f1-red:#e10600;
  /* Fonte de cabeçalho com pegada de velocidade (condensada, encorpada) */
  --font-heading:"Saira Condensed", "Inter", system-ui, sans-serif;
  --font-heading-weight:700;
  --color-accent:#e10600;
  --color-accent-100:#fff1f0;
  --color-accent-200:#ffd7d4;
  --color-accent-300:#ff9d97;   /* acento em tamanho de texto sobre fundo escuro */
  --color-accent-400:#ff6b63;
  --color-accent-500:#e10600;
  --color-accent-600:#bd0500;
  --color-accent-700:#8c0400;
  --color-accent-800:#4e100d;   /* preenchimento discreto (tags) */
  --color-accent-900:#2c0c0b;   /* preenchimento profundo / brilho de fundo */
  --color-accent-2:#e10600;
  --color-accent-2-100:#fff1f0;
  --color-accent-2-800:#4e100d;
  /* Faixa de números → presença vermelha F1 */
  --color-section:#b00500;
  --color-section-glow:#e10600;
  --color-section-ghost:#ff6b63;

  --edge:clamp(20px, 5vw, 72px);
  --leading:28px;
}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:
    radial-gradient(1200px 720px at 84% -180px,
      color-mix(in srgb, var(--color-accent-900) 78%, transparent), transparent 60%),
    radial-gradient(1100px 820px at -12% 100%,
      color-mix(in srgb, black 32%, transparent), transparent 55%),
    var(--color-bg);
  background-attachment:fixed;
  text-wrap:pretty;
}

/* ── Fundo animado: feixes de luz diagonais em movimento ─────────────────── */
/* Aplica-se a todas as páginas automaticamente. Para desligar, apague este bloco. */
body::before, body::after{
  content:""; position:fixed; inset:-30%; z-index:-1; pointer-events:none;
}
/* Camada 1 — feixes vermelhos, mais largos e lentos */
body::before{
  background:repeating-linear-gradient(43deg,
    transparent 0 62px,
    color-mix(in srgb, var(--f1-red) 16%, transparent) 62px 96px,
    transparent 96px 118px,
    color-mix(in srgb, var(--f1-red) 8%, transparent) 118px 130px,
    transparent 130px 232px);
  filter:blur(16px);
  opacity:.5;
  animation:beams-a 26s linear infinite;
}
/* Camada 2 — filetes claros, finos e mais rápidos (dá o brilho do "beam") */
body::after{
  background:repeating-linear-gradient(43deg,
    transparent 0 88px,
    color-mix(in srgb, #ffffff 5%, transparent) 88px 92px,
    transparent 92px 150px,
    color-mix(in srgb, var(--color-accent-300) 6%, transparent) 150px 156px,
    transparent 156px 264px);
  filter:blur(7px);
  opacity:.55;
  animation:beams-b 17s linear infinite;
}
/* Translada exatamente um período do padrão -> loop sem emenda */
@keyframes beams-a{
  from{transform:translate(0,0);}
  to{transform:translate(158.2px, -169.6px);}   /* 232px no eixo de 43° */
}
@keyframes beams-b{
  from{transform:translate(0,0);}
  to{transform:translate(-180.0px, 193.0px);}   /* 264px, sentido oposto */
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{animation:none;}
}
@media (max-width:640px){
  body::before{opacity:.34;} body::after{opacity:.3;}
}

/* Conteúdo acima do fundo animado */
.site-nav, .wrap, .hero-media, .sponsors, .stats, .site-foot{position:relative; z-index:1;}
.site-nav{z-index:50;}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--edge);}
.rule{height:1px;border:0;margin:0;
  background:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent);}

/* skew "velocidade" para números de destaque */
.speed{display:inline-block;transform:skewX(-9deg);}

/* ── Barra de navegação ─────────────────────────────────────────────────── */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--space-6);
  padding:var(--space-3) var(--edge);
  background:color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-divider);
}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; color:var(--color-text);}
.brand-logo{height:46px; width:auto; display:block; flex:none;}
@media (max-width:820px){ .brand-logo{height:40px;} }
.brand .bn{display:flex; flex-direction:column; line-height:1.05;}
.brand .bn strong{font-family:var(--font-heading); font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase;}
.brand .bn small{font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 55%,transparent);}
.nav-links{display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap;}
.nav-links a{color:inherit; text-decoration:none; font-family:var(--font-heading); font-weight:600;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;}
.nav-links a:hover{color:var(--color-accent);}
.nav-links a[aria-current="page"]{color:var(--color-accent);}
@media (max-width:820px){
  .site-nav{flex-wrap:wrap; gap:var(--space-3); flex-direction:column; text-align:center;}
  .brand{margin-right:0; flex-direction:column; gap:8px;}
  .brand-logo{height:72px;}
  .brand .bn{align-items:center;}
  /* Rodapé: logo alinhado à esquerda, encaixando com o texto e os links abaixo */
  .site-foot .brand{flex-direction:row; align-items:center; gap:8px; margin-right:auto;}
  .site-foot .brand-logo{height:46px;}
  .nav-links{gap:var(--space-4); width:100%; order:3; justify-content:center;}
}

/* ── Kicker (marca de acento) ───────────────────────────────────────────── */
.kicker{position:relative; display:inline-block; padding-left:52px;
  font-family:var(--font-heading); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); margin:0 0 16px;}
.kicker::before{content:""; position:absolute; left:0; top:50%; width:40px; height:2px;
  transform:translateY(-50%) skewX(-20deg); background:var(--color-accent);}

/* ── Títulos de seção ───────────────────────────────────────────────────── */
.display{font-family:var(--font-heading); font-weight:700; text-transform:uppercase;
  font-size:clamp(46px, 7.4vw, 96px); line-height:.98; letter-spacing:-.02em; margin:0;}
.display .hl{color:var(--color-accent);}
.h-title{font-family:var(--font-heading); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px, 4vw, 46px); line-height:1.03; letter-spacing:-.01em; margin:0;}
.lead{font-size:17px; line-height:1.65; margin:14px 0 0; max-width:62ch;
  color:color-mix(in srgb, var(--color-text) 82%, transparent);}

.section{padding:calc(2.4 * var(--leading)) 0;}
.section-head{margin-bottom:calc(1.4 * var(--leading));}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding:calc(3 * var(--leading)) 0 calc(2.4 * var(--leading));}
.hero .sub{font-size:18px; line-height:1.6; max-width:56ch; margin:22px 0 0;
  color:color-mix(in srgb, var(--color-text) 86%, transparent);}
.btn-row{display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:28px;}
.btn-lg{font-size:14px; padding:11px 22px;}

/* Hero com foto de fundo (piloto em ação) */
.hero-media{position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center;
  min-height:clamp(500px, 78vh, 800px);}
.hero-media .hero-bg{position:absolute; inset:0; z-index:-2;}
.hero-media .hero-bg img.hero-img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0; transition:opacity 1.4s ease-in-out;}
.hero-media .hero-bg img.hero-img.is-active{opacity:1;}
.cover-img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-media .scrim{position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg) 74%, transparent) 40%,
    color-mix(in srgb, var(--color-bg) 14%, transparent) 72%,
    color-mix(in srgb, var(--color-bg) 55%, transparent) 100%),
  linear-gradient(0deg, var(--color-bg) 2%, transparent 38%),
  radial-gradient(720px 400px at 88% 6%, color-mix(in srgb, var(--f1-red) 24%, transparent), transparent 62%);}
.hero-media .wrap{width:100%;}
.hero-media .hero{padding:calc(2.2 * var(--leading)) 0;}
@media (max-width:640px){
  .hero-media{min-height:auto; padding:0;}
  .hero-media .hero-bg{position:relative; inset:auto; height:44vh; min-height:280px; z-index:0;}
  .hero-media .hero-bg img.hero-img{position:absolute; object-position:right center;}
  .hero-media .scrim{top:auto; bottom:0; height:60%; background:
    linear-gradient(180deg, transparent, var(--color-bg) 82%);}
  .hero-media{flex-direction:column; align-items:stretch;}
  .hero-media .wrap{margin-top:-40px; position:relative; z-index:1;}
  .hero-media .hero{padding:0 0 calc(2 * var(--leading)); text-align:center;}
  .hero-media .btn-row{justify-content:center;}
  .hero-media .kicker{padding-left:0;}
  .hero-media .kicker::before{display:none;}
}

/* ── Calendário / próximas etapas ───────────────────────────────────────── */
.cal-wrap{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background:var(--color-surface); border:1px solid var(--color-divider);}
.cal{width:100%; border-collapse:collapse; font-size:16px;}
.cal thead th{text-align:left; font-family:var(--font-heading); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:12px; color:var(--color-accent);
  padding:16px 22px; background:color-mix(in srgb, var(--color-accent-900) 55%, var(--color-surface));
  border-bottom:1px solid var(--color-divider);}
.cal tbody td{padding:17px 22px; border-bottom:1px solid var(--color-divider); vertical-align:middle;
  color:color-mix(in srgb, var(--color-text) 88%, transparent);}
.cal tbody tr:last-child td{border-bottom:0;}
.cal tbody tr{position:relative; transition:background .15s;}
.cal tbody tr:hover{background:color-mix(in srgb, var(--color-accent-900) 30%, transparent);}
.cal .et{font-family:var(--font-heading); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:16px; color:var(--color-text); border-left:3px solid transparent;}
.cal tbody tr:not(.tbd) .et{border-left-color:var(--color-accent);}
.cal .date{font-family:var(--font-heading); font-weight:700; font-feature-settings:"tnum" 1;
  transform:skewX(-8deg); display:inline-block; font-size:17px;}
.cal .tbd td{color:color-mix(in srgb, var(--color-text) 45%, transparent);}
.cal .final .et{color:var(--color-accent);}
.cal .final{background:color-mix(in srgb, var(--color-accent-900) 40%, transparent);}
@media (max-width:600px){
  /* No celular a tabela vira cards empilhados — todas as informações aparecem. */
  .cal thead{display:none;}
  .cal, .cal tbody, .cal tr, .cal td{display:block; width:100%;}
  .cal tbody tr{padding:14px 16px 16px; border-bottom:1px solid var(--color-divider); position:relative;}
  .cal tbody tr:last-child{border-bottom:0;}
  .cal tbody td{padding:0; border:0; display:flex; justify-content:space-between; align-items:baseline;
    gap:16px; font-size:15px; padding:5px 0;}
  .cal tbody td::before{content:attr(data-label); font-family:var(--font-heading); font-weight:700;
    text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--color-accent); flex:none;}
  .cal .et{display:block; font-size:19px; padding:0 0 8px; border-left:0;
    border-bottom:1px solid var(--color-divider); margin-bottom:8px;}
  .cal .et::before{display:none;}
  .cal tbody tr:not(.tbd){border-left:3px solid var(--color-accent);}
  .cal tbody tr.tbd{border-left:3px solid transparent;}
  .cal tbody td.date{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    transform:none; font-size:16px;}
}

/* ── Faixa de patrocinadores (marquee branco) ───────────────────────────── */
.sponsors{background:#ffffff; overflow:hidden; display:flex; align-items:center;
  border-top:1px solid #ececec; border-bottom:1px solid #ececec;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);}
.sponsors-track{display:flex; align-items:center; width:max-content; animation:sponsor-scroll 42s linear infinite;}
.sponsors:hover .sponsors-track{animation-play-state:paused;}
.sponsor-set{display:flex; align-items:center; flex:none;}
.sponsor{position:relative; flex:none; width:119px; height:56px; margin:7px 18px; overflow:hidden;}
.sponsor img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
  /* logos coloridos ficam em cinza discreto; ganham cor ao passar o mouse */
  filter:grayscale(1); opacity:.62; transition:filter .2s, opacity .2s;}
.sponsor:hover img{filter:none; opacity:1;}
@keyframes sponsor-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .sponsors-track{animation:none;} }
@media (max-width:640px){ .sponsor{width:91px; height:42px; margin:13px;} }

/* ── Faixa de números ───────────────────────────────────────────────────── */.stats{
  background:
    radial-gradient(900px 440px at 86% -40%,
      color-mix(in srgb, var(--color-section-glow) 55%, transparent), transparent 64%),
    var(--color-section);
  padding:calc(2 * var(--leading)) 0;
}
.stats .grid{display:grid; grid-template-columns:repeat(4, auto); justify-content:space-between;
  gap:calc(1.2 * var(--leading)) var(--leading);}
.stat-num{font-family:var(--font-heading); font-weight:700; font-size:clamp(40px, 5vw, 64px);
  line-height:1; margin:0; color:var(--color-neutral-100); font-feature-settings:"tnum" 1; text-align:center;}
.stat-label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:12px 0 0;
  color:color-mix(in srgb, #ffffff 82%, transparent); text-align:center;}
@media (max-width:640px){ .stats .grid{grid-template-columns:repeat(2, 1fr); justify-content:start;} }

/* ── Efeito "lamp": facho de luz vermelho sobre o título ─────────────────── */
.lamp{position:relative; isolation:isolate; padding-top:calc(3.4 * var(--leading));}
.lamp-rig{position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(920px, 100%); height:290px; pointer-events:none; z-index:-1; overflow:hidden;}
.lamp-cone{position:absolute; top:0; height:210px; width:15rem; opacity:.45;
  transition:width 1s cubic-bezier(.4,0,.2,1), opacity 1s cubic-bezier(.4,0,.2,1);}
.lamp-cone.left{right:50%;
  background:conic-gradient(from 70deg at center top, var(--f1-red), transparent 22%);
  -webkit-mask-image:linear-gradient(to top, transparent, #000 70%); mask-image:linear-gradient(to top, transparent, #000 70%);}
.lamp-cone.right{left:50%;
  background:conic-gradient(from 290deg at center top, transparent 78%, var(--f1-red));
  -webkit-mask-image:linear-gradient(to top, transparent, #000 70%); mask-image:linear-gradient(to top, transparent, #000 70%);}
.lamp-glow{position:absolute; top:0; left:50%; transform:translate(-50%,-46%);
  width:26rem; height:9rem; border-radius:50%; background:var(--f1-red);
  opacity:.32; filter:blur(72px);}
.lamp-core{position:absolute; top:0; left:50%; transform:translate(-50%,-52%);
  width:8rem; height:7rem; border-radius:50%; background:#ff5147; filter:blur(34px);
  transition:width 1s cubic-bezier(.4,0,.2,1);}
.lamp-line{position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:15rem; height:2px; background:linear-gradient(to right, transparent, #ff6b63, transparent);
  transition:width 1s cubic-bezier(.4,0,.2,1);}
.lamp.lit .lamp-cone{width:30rem; opacity:1;}
.lamp.lit .lamp-core{width:16rem;}
.lamp.lit .lamp-line{width:30rem;}
.lamp-content{opacity:0; transform:translateY(28px);
  transition:opacity .9s .25s ease, transform .9s .25s cubic-bezier(.4,0,.2,1);}
.lamp.lit .lamp-content{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .lamp-cone,.lamp-core,.lamp-line,.lamp-content{transition:none;}
  .lamp-content{opacity:1; transform:none;}
}
@media (max-width:640px){
  .lamp{padding-top:calc(2.6 * var(--leading));}
  .lamp-rig{height:200px;}
  .lamp.lit .lamp-cone{width:19rem;}
  .lamp.lit .lamp-line{width:19rem;}
}

/* ── Cards de categoria ─────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--space-6);}
.cat-card{position:relative; display:flex; flex-direction:column; gap:10px; overflow:hidden;
  padding:var(--space-8) var(--space-6); border-radius:var(--radius-md);
  background:var(--color-surface); box-shadow:var(--shadow-sm); border-top:3px solid var(--color-accent);}
.cat-card .rank{font-family:var(--font-heading); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent);}
.cat-card h3{font-family:var(--font-heading); font-weight:700; text-transform:uppercase;
  font-size:24px; margin:0; letter-spacing:-.01em;}
.cat-card p{margin:0; font-size:14.5px; line-height:1.6;
  color:color-mix(in srgb, var(--color-text) 78%, transparent);}
.cat-card .huge{position:absolute; right:-8px; bottom:-24px; font-family:var(--font-heading);
  font-weight:700; font-size:120px; line-height:1; color:color-mix(in srgb,var(--color-accent) 9%,transparent);
  pointer-events:none;}

/* Cor de assinatura por categoria (borda superior, rótulo e número) */
.cat-card.cat-azul{border-top-color:#2b7fff;}
.cat-card.cat-azul .rank{color:#4b93ff;}
.cat-card.cat-azul .huge{color:color-mix(in srgb, #2b7fff 12%, transparent);}
.cat-card.cat-branco{border-top-color:#eef0f4;}
.cat-card.cat-branco .rank{color:#dfe3ea;}
.cat-card.cat-branco .huge{color:color-mix(in srgb, #eef0f4 9%, transparent);}

/* ── Linhas de recurso (o que fazemos) ──────────────────────────────────── */
.feature{display:grid; grid-template-columns:minmax(52px,90px) minmax(0,1fr); gap:6px clamp(20px,4vw,56px);
  padding:calc(1.2 * var(--leading)) 0; align-items:baseline; position:relative;}
.feature + .feature::before{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent);}
.f-num{font-family:var(--font-heading); font-weight:700; font-size:18px; color:var(--color-accent);
  font-feature-settings:"tnum" 1; margin:0;}
.f-title{font-family:var(--font-heading); font-weight:700; text-transform:uppercase; font-size:22px;
  letter-spacing:-.01em; margin:0 0 6px;}
.f-copy{font-size:15.5px; line-height:1.6; margin:0; max-width:60ch;
  color:color-mix(in srgb, var(--color-text) 78%, transparent);}
@media (max-width:640px){ .feature{grid-template-columns:1fr; gap:8px;} }

/* ── Molduras de embed (planilha / instagram) ───────────────────────────── */
.embed-frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background:var(--color-surface);}
.embed-frame iframe{width:100%; border:0; display:block;}
.embed-note{font-size:12.5px; margin:12px 0 0; color:color-mix(in srgb,var(--color-text) 55%,transparent);}

/* ── Galeria de etapas ──────────────────────────────────────────────────── */
.etapa-hero{position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--color-surface); box-shadow:var(--shadow-md);}
.etapa-hero .cover{width:100%; aspect-ratio:16/7;}
.etapa-hero .body{padding:var(--space-8) var(--space-6);}
.live-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-heading);
  font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-100); background:var(--color-accent-700); padding:5px 11px; border-radius:999px;}
.live-badge .dot{width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,#fff 30%,transparent);
  animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
@media (max-width:560px){ .photo-grid{grid-template-columns:repeat(2,1fr);} }
.etapa-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:var(--space-4);}
.etapa-chip{display:block; text-decoration:none; color:inherit; padding:var(--space-4) var(--space-4);
  border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-sm);
  border-left:3px solid var(--color-neutral-700); transition:border-color .15s, transform .15s;}
.etapa-chip:hover{border-left-color:var(--color-accent); transform:translateY(-2px);}
.etapa-chip.done{border-left-color:var(--color-accent);}
.etapa-chip .n{font-family:var(--font-heading); font-weight:700; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-accent);}
.etapa-chip .t{font-family:var(--font-heading); font-weight:700; font-size:17px; margin:4px 0 2px;}
.etapa-chip .d{font-size:12.5px; color:color-mix(in srgb,var(--color-text) 55%,transparent);}
.etapa-chip .soon{color:color-mix(in srgb,var(--color-text) 40%,transparent);}

/* ── Carrossel do Instagram (3 posts) ───────────────────────────────────── */
.ig-carousel{position:relative;}
.ig-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--space-4)) / 3);
  gap:var(--space-4); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none; padding-bottom:4px;}
.ig-track::-webkit-scrollbar{display:none;}
.ig-slide{position:relative; display:block; border-radius:var(--radius-md); overflow:hidden;
  background:var(--color-surface); text-decoration:none; box-shadow:var(--shadow-sm); scroll-snap-align:start;}
.ig-slide image-slot{width:100%; height:100%;}
.ig-slide .instagram-media{margin:0 !important; min-width:0 !important; width:100% !important;}
.ig-slide::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;}
.ig-slide:hover::after{opacity:0;}
.ig-open{display:block; text-align:center; text-decoration:none; padding:11px 12px;
  font-family:var(--font-heading); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-accent-300);
  background:color-mix(in srgb, var(--color-accent-900) 60%, var(--color-surface));
  border-top:1px solid var(--color-divider); transition:background .15s, color .15s;}
.ig-open:hover{background:var(--color-accent-700); color:var(--color-accent-100);}
.ig-track{align-items:start;}
.ig-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer; font-size:26px; line-height:1;
  color:var(--color-neutral-100); background:color-mix(in srgb, var(--color-bg) 74%, transparent);
  border:1px solid var(--color-divider); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .15s, border-color .15s;}
.ig-nav:hover{background:var(--color-accent-700); border-color:var(--color-accent);}
.ig-nav.prev{left:-10px;}
.ig-nav.next{right:-10px;}
.ig-nav[disabled]{opacity:.3; pointer-events:none;}
.ig-dots{display:flex; justify-content:center; gap:8px; margin-top:16px;}
.ig-dots button{width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--color-neutral-700); transition:background .15s, transform .15s;}
.ig-dots button[aria-current="true"]{background:var(--color-accent); transform:scale(1.3);}
@media (max-width:760px){
  .ig-track{grid-auto-columns:calc((100% - var(--space-4)) / 2);}
  .ig-nav{display:none;}
}
@media (max-width:520px){ .ig-track{grid-auto-columns:88%;} }

/* ── Formulário de cadastro ─────────────────────────────────────────────── */
.form-card{max-width:640px; padding:var(--space-8); border-radius:var(--radius-lg);
  background:var(--color-surface); box-shadow:var(--shadow-md);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-6);}
.form-grid .full{grid-column:1 / -1;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }
.field select.input{appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
  linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position:calc(100% - 18px) 16px, calc(100% - 12px) 16px; background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;}
.photo-drop{display:flex; align-items:center; gap:16px;}
.photo-drop .prev{width:84px; height:84px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--color-bg); border:1px dashed var(--color-divider); display:grid; place-items:center;}
.photo-drop .prev img{width:100%; height:100%; object-fit:cover;}
.photo-drop .prev span{font-size:11px; color:color-mix(in srgb,var(--color-text) 45%,transparent); text-align:center; padding:6px;}
.form-note{font-size:13px; line-height:1.55; padding:14px 16px; border-radius:var(--radius-md);
  background:var(--color-accent-900); border:1px solid var(--color-accent-700); color:var(--color-accent-100); margin-top:var(--space-6);}
.ok-msg{display:none; padding:16px 18px; border-radius:var(--radius-md); background:var(--color-accent-800);
  border:1px solid var(--color-accent-600); color:var(--color-accent-100); font-size:14.5px; line-height:1.5; margin-top:var(--space-6);}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.site-foot{margin-top:calc(2 * var(--leading)); padding:calc(1.8 * var(--leading)) 0;
  border-top:1px solid var(--color-divider); font-size:13px; line-height:1.7;
  color:color-mix(in srgb, var(--color-text) 55%, transparent);}
.site-foot .cols{display:flex; flex-wrap:wrap; gap:var(--space-8) 64px; align-items:flex-start; justify-content:space-between;}
.site-foot a{color:inherit; text-decoration:none;}
.site-foot a:hover{color:var(--color-accent);}
.foot-links{display:flex; flex-direction:column; gap:6px;}