/* ============================================================================
   JAGUAR KART — estilo do site (tema racing: preto + dourado onça + vermelho/azul)
   ========================================================================== */
:root{
  --bg:#0a0a0d; --bg2:#0f1015; --card:#15161d; --card2:#1b1d27;
  --line:#272a36; --line2:#343847;
  --txt:#eef1f6; --mut:#9aa1b0; --mut2:#6f7686;
  --gold:#e7a92b; --gold2:#ffd271; --red:#e2231a; --blue:#2ba8db; --green:#34c759;
  --rad:16px; --rad-s:11px; --page-pad:clamp(16px,2.4vw,42px);
  --disp:"Saira Condensed", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px}
body{
  margin:0; background:var(--bg); color:var(--txt); font-family:var(--body);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:100%; max-width:none; margin:0; padding:0 var(--page-pad)}
.wrap.narrow{max-width:none}
.center{text-align:center; margin-top:26px}
.gold{color:var(--gold)} .red{color:var(--red)} .blue{color:var(--blue)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--disp); font-weight:700; font-style:italic; letter-spacing:.5px;
  text-transform:uppercase; font-size:15px; border:1px solid transparent;
  padding:11px 20px; border-radius:999px; transition:transform .12s, box-shadow .2s, background .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:18px; padding:14px 28px}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#241a05;
  box-shadow:0 8px 24px rgba(231,169,43,.32)}
.btn-gold:hover{box-shadow:0 10px 30px rgba(231,169,43,.5); transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--txt); border-color:var(--line2)}
.btn-ghost:hover{background:rgba(255,255,255,.1); border-color:var(--gold)}

/* ============================ NAV ============================ */
.nav{position:sticky; top:0; z-index:50; transition:background .25s, box-shadow .25s, border-color .25s;
  background:rgba(10,10,13,.55); backdrop-filter:blur(14px); border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,13,.92); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(0,0,0,.4)}
.nav-in{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand-logo{width:42px; height:42px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--line2), 0 6px 18px rgba(0,0,0,.5)}
.brand-name{font-family:var(--disp); font-weight:800; font-style:italic; font-size:22px;
  line-height:.92; letter-spacing:.5px; display:flex; flex-direction:column; color:#fff}
.brand-name b{color:var(--gold)}
.brand-name small{font-family:var(--body); font-style:normal; font-weight:600; font-size:9.5px;
  letter-spacing:2px; color:var(--mut); text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links>a{font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  font-size:15.5px; color:var(--mut); padding:8px 12px; border-radius:8px; transition:color .15s, background .15s}
.nav-links>a:hover{color:#fff}
.nav-links>a.active{color:var(--gold)}
.nav-cta{margin-left:8px}
.nav-cta-m{display:none}
.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.nav-burger span{width:24px; height:2.5px; background:#fff; border-radius:2px; transition:.25s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============================ HERO ============================ */
.hero{position:relative; min-height:min(88vh,740px); display:flex; align-items:center;
  overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0; background:url("assets/hero-jaguar.png") center/cover no-repeat;
  opacity:.9; transform:scale(1.04)}
.hero-fade{position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 34%, rgba(10,10,13,.78), rgba(10,10,13,.4) 56%, transparent 80%),
    radial-gradient(1100px 520px at 18% 30%, rgba(226,35,26,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,10,13,.58) 0%, rgba(10,10,13,.28) 34%, rgba(10,10,13,.92) 92%),
    linear-gradient(90deg, rgba(10,10,13,.72) 0%, rgba(10,10,13,.22) 50%, rgba(10,10,13,.55) 100%)}
.hero-in{position:relative; z-index:2; padding:clamp(34px,4vw,58px) var(--page-pad) 64px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center}
.hero-eyebrow{display:inline-block; font-family:var(--disp); font-weight:700; font-style:italic;
  text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); font-size:15px;
  background:rgba(231,169,43,.1); border:1px solid rgba(231,169,43,.32); padding:6px 14px; border-radius:999px;
  align-self:center}
.hero-title{font-family:var(--disp); font-weight:800; font-style:italic; line-height:.86;
  font-size:clamp(68px,8.2vw,126px); margin:16px auto 4px; letter-spacing:1px;
  text-shadow:0 6px 30px rgba(0,0,0,.6)}
.hero-title span{display:block; color:var(--gold); -webkit-text-stroke:0}
.hero-tag{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  letter-spacing:2px; font-size:clamp(16px,2.6vw,23px); color:#fff; margin:0 0 10px}
.hero-desc{width:min(100%,1120px); color:#e2e5ec; font-size:clamp(16.5px,.98vw,18px);
  line-height:1.48; margin:0 auto 22px; text-wrap:balance}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:22px}
.hero-chips{width:min(100%,1180px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; margin:0 auto}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;
  color:#e7eaf0; background:rgba(255,255,255,.06); border:1px solid var(--line2);
  padding:8px 14px; border-radius:14px; backdrop-filter:blur(4px); justify-content:center; min-height:40px}
.checker{position:absolute; bottom:0; left:0; right:0; height:14px; z-index:3;
  background:repeating-linear-gradient(90deg,#fff 0 18px,#0a0a0d 18px 36px); opacity:.85}
.checker::after{content:""; position:absolute; top:14px; left:0; right:0; height:14px;
  background:repeating-linear-gradient(90deg,#0a0a0d 0 18px,#fff 18px 36px); opacity:0}

/* ============================ SECTIONS ============================ */
.section{padding:74px 0}
.section.alt{background:
  linear-gradient(180deg, var(--bg) 0%, var(--bg2) 12%, var(--bg2) 88%, var(--bg) 100%)}
.section-head{text-align:center; max-width:900px; margin:0 auto 38px}
.eyebrow{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  letter-spacing:2px; color:var(--gold); font-size:14px}
.h2{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:clamp(30px,5vw,48px); line-height:1; margin:8px 0 0; letter-spacing:.5px}
.section-sub{color:var(--mut); font-size:17px; margin:14px auto 0; max-width:780px}
.updated{text-align:center; color:var(--mut2); font-size:13px; margin-top:24px}

/* ---------- segmented tabs ---------- */
.seg{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:28px}
.seg button{font-family:var(--disp); font-weight:600; font-style:italic; text-transform:uppercase;
  letter-spacing:.5px; font-size:15px; color:var(--mut); background:var(--card);
  border:1px solid var(--line); padding:9px 18px; border-radius:999px; cursor:pointer; transition:.15s}
.seg button:hover{color:#fff; border-color:var(--line2)}
.seg button.on{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#241a05; border-color:transparent}

/* ---------- empty / placeholder ---------- */
.empty{text-align:center; color:var(--mut); padding:46px 20px; background:var(--card);
  border:1px dashed var(--line2); border-radius:var(--rad)}
.empty .big{font-size:38px; margin-bottom:8px}
.place-card{background:linear-gradient(135deg,var(--card2),var(--card)); border:1px solid var(--line2);
  border-radius:var(--rad); padding:34px; text-align:center; box-shadow:var(--shadow)}
.place-card .soon{display:inline-block; font-family:var(--disp); font-style:italic; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); font-size:14px;
  border:1px solid rgba(231,169,43,.4); border-radius:999px; padding:5px 14px; margin-bottom:14px}
.place-card p{color:#d8dce4; font-size:17px; margin:0 auto 22px; max-width:760px}
.place-card iframe{width:100%; min-height:560px; border:0; border-radius:12px}

/* ============================ RECORDES ============================ */
.rec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.rec-hero{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:18px}
.rec-card{background:linear-gradient(150deg,var(--card2),var(--card)); border:1px solid var(--line);
  border-radius:var(--rad); padding:20px; position:relative; overflow:hidden}
.rec-card.geral{border-color:rgba(231,169,43,.45);
  background:linear-gradient(150deg,rgba(231,169,43,.12),var(--card))}
.rec-card::before{content:""; position:absolute; top:0; left:0; width:5px; height:100%;
  background:linear-gradient(var(--gold),var(--red))}
.rec-card .cat{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  letter-spacing:.5px; font-size:16px; color:var(--mut); display:flex; align-items:center; gap:8px}
.rec-card.geral .cat{color:var(--gold)}
.rec-card .time{font-family:var(--disp); font-weight:800; font-style:italic; font-size:40px;
  line-height:1; margin:8px 0 4px; color:#fff}
.rec-card .who{color:#d8dce4; font-size:15px; font-weight:600}
.rec-card .when{color:var(--mut2); font-size:12.5px; margin-top:3px}
.rec-card .trophy{position:absolute; top:14px; right:16px; font-size:26px; opacity:.85}
.tracado-meta{text-align:center; color:var(--mut); font-size:14px; margin:-8px 0 22px}
.tracado-meta b{color:#fff}

/* ============================ CAMPEONATOS ============================ */
.camp-card{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden}
.camp-top{padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  border-bottom:1px solid var(--line); background:linear-gradient(135deg,rgba(43,168,219,.08),transparent)}
.camp-top h3{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase;
  margin:0; font-size:23px; margin-right:auto}
.tag{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.5px;
  font-size:12px; padding:4px 11px; border-radius:999px; border:1px solid var(--line2); color:var(--mut)}
.tag.live{color:var(--green); border-color:rgba(52,199,89,.4); background:rgba(52,199,89,.1)}
.tag.gold{color:var(--gold); border-color:rgba(231,169,43,.4); background:rgba(231,169,43,.1)}
.sub-tabs{display:flex; flex-wrap:wrap; gap:6px; padding:14px 22px 0}
.sub-tabs button{font-family:var(--disp); font-weight:600; font-style:italic; text-transform:uppercase;
  font-size:13.5px; color:var(--mut); background:transparent; border:0; border-bottom:2.5px solid transparent;
  padding:6px 10px; cursor:pointer}
.sub-tabs button.on{color:var(--gold); border-bottom-color:var(--gold)}
.camp-pane{padding:8px 22px 22px}

/* tabelas */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th{font-family:var(--disp); font-weight:600; font-style:italic; text-transform:uppercase;
  letter-spacing:.5px; color:var(--mut); text-align:left; padding:9px 10px; font-size:13px;
  border-bottom:1px solid var(--line2)}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .pos{font-family:var(--disp); font-weight:800; font-style:italic; font-size:18px; width:46px; color:var(--mut)}
.tbl tr.p1 .pos{color:var(--gold)} .tbl tr.p2 .pos{color:#cfd6e0} .tbl tr.p3 .pos{color:#d08a4e}
.tbl .nome{font-weight:600}
.tbl .pts{font-family:var(--disp); font-weight:800; font-style:italic; font-size:18px; text-align:right; color:#fff}
.tbl .num{text-align:center; color:var(--mut)}
.mini-tag{display:inline-block; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:5px;
  margin-left:5px; vertical-align:middle}
.mini-tag.pole{background:rgba(43,168,219,.18); color:var(--blue)}
.mini-tag.mv{background:rgba(147,99,255,.2); color:#b79bff}
.mini-tag.dsq{background:rgba(226,35,26,.18); color:#ff7a72}
.bat-block{margin-top:16px}
.bat-block h4{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  font-size:16px; margin:0 0 2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bat-block .bmeta{color:var(--mut2); font-size:12.5px; margin:0 0 8px}
.etapa-h{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:19px; margin:22px 0 2px; color:#fff}
.etapa-h .when{font-family:var(--body); font-style:normal; font-weight:500; font-size:13px; color:var(--mut)}

/* ============================ CARDS GRID (vídeos/empresas) ============================ */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.vcard{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden;
  transition:transform .15s, border-color .15s}
.vcard:hover{transform:translateY(-3px); border-color:var(--line2)}
.vcard .frame{aspect-ratio:16/9; background:#000; position:relative}
.vcard .frame iframe{width:100%; height:100%; border:0}
.vcard .ph{display:flex; align-items:center; justify-content:center; height:100%;
  background:linear-gradient(135deg,#1b1d27,#0e0f15); color:var(--mut2); flex-direction:column; gap:6px}
.vcard .ph .big{font-size:34px}
.vcard .meta{padding:14px 16px}
.vcard .meta h3{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  font-size:18px; margin:0 0 4px}
.vcard .meta p{color:var(--mut); font-size:14px; margin:0}
.ecard{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:24px; text-align:center}
.ecard .ico{font-size:36px; margin-bottom:10px}
.ecard h3{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase; font-size:20px; margin:0 0 6px}
.ecard p{color:var(--mut); font-size:14.5px; margin:0}

/* ============================ REGRAS ============================ */
.rules-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.rule-card{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:22px}
.rule-card h3{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  font-size:20px; margin:0 0 12px; display:flex; align-items:center; gap:10px}
.rule-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.rule-card li{position:relative; padding-left:18px; color:#cfd4dd; font-size:14.5px}
.rule-card li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:2px; transform:rotate(45deg); background:var(--gold)}

/* ============================ PARCEIROS ============================ */
.partners-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px}
.partner{display:flex; align-items:center; justify-content:center; gap:10px; min-height:96px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:18px;
  text-align:center; color:var(--mut); font-weight:600; transition:.15s}
.partner:hover{border-color:var(--gold); color:#fff}
.partner img{max-height:54px; width:auto; object-fit:contain; filter:grayscale(.2)}

/* ============================ CONTATO ============================ */
.contato{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.contato-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:18px}
.contato-card{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:26px}
.contato-card h3{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase;
  font-size:21px; margin:0 0 16px}
.contato-list{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:11px}
.contato-list li{display:flex; align-items:center; gap:11px; color:#d8dce4; font-size:15px}
.contato-list .i{font-size:18px; width:24px; text-align:center}
.contato-list a:hover{color:var(--gold)}
.horarios{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px}
.horarios li{display:flex; justify-content:space-between; gap:14px; padding-bottom:10px;
  border-bottom:1px solid var(--line); font-size:15px}
.horarios li:last-child{border-bottom:0}
.horarios .d{color:var(--mut)} .horarios .h{font-weight:600}
.redes{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap}
.redes a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:var(--card2); border:1px solid var(--line2); font-size:20px; transition:.15s}
.redes a:hover{border-color:var(--gold); transform:translateY(-2px)}

/* ============================ FOOTER ============================ */
.footer{border-top:1px solid var(--line); background:var(--bg2); padding:34px 0 0}
.footer-in{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; padding-bottom:26px}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-logo{width:48px; height:48px; border-radius:50%}
.footer-brand strong{font-family:var(--disp); font-style:italic; font-size:20px; display:block}
.footer-brand span{color:var(--mut); font-size:12px; letter-spacing:1.5px; text-transform:uppercase}
.footer-links{display:flex; flex-wrap:wrap; gap:16px}
.footer-links a{color:var(--mut); font-weight:600; font-size:14.5px}
.footer-links a:hover{color:var(--gold)}
.footer-redes a{width:40px; height:40px; font-size:18px}
.footer-bottom{border-top:1px solid var(--line); padding:16px var(--page-pad); color:var(--mut2); font-size:13px; text-align:center}

/* ============================ WHATSAPP FLOAT ============================ */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:27px;
  background:linear-gradient(135deg,#34c759,#1faa4b); box-shadow:0 10px 30px rgba(52,199,89,.4);
  transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:920px){
  .hero-in{min-height:auto}
  .hero-desc{max-width:760px}
  .hero-chips{display:flex; flex-wrap:wrap; justify-content:center; max-width:900px; margin-bottom:0}
  .chip{border-radius:999px; min-height:0; padding:7px 13px}
  .contato-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
  html{scroll-padding-top:64px}
  .nav-in{height:60px}
  .nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-links{position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,10,13,.98); border-bottom:1px solid var(--line); padding:8px 16px 16px;
    transform:translateY(-130%); transition:transform .28s ease; box-shadow:var(--shadow)}
  .nav-links.open{transform:translateY(0)}
  .nav-links>a{padding:13px 8px; border-bottom:1px solid var(--line); font-size:18px}
  .nav-cta-m{display:inline-flex; justify-content:center; margin-top:12px}
  .hero-in{padding:64px var(--page-pad) 90px}
  .hero-desc{text-align:left; text-wrap:auto}
  .section{padding:56px 0}
}
@media (max-width:480px){
  .wrap{padding:0 var(--page-pad)}
  .hero-title{font-size:clamp(50px,17vw,90px)}
  .rec-card .time{font-size:34px}
  .footer-in{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto; transition:none!important}}