
:root{
  --orange-500:#ff7a00;
  --orange-700:#d86500;
  --black:#000;
  --white:#fff;
}
*{font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
.bg-black{background:#000!important;}
.bg-black-opaque{background:rgba(0,0,0,0.85);backdrop-filter: blur(6px);}
.text-orange{color:var(--orange-500)!important;}
.border-orange-700{border-color:var(--orange-700)!important;}
.btn-orange{background:var(--orange-500);color:#000;border:none;border-radius:12px;padding:.6rem 1rem;font-weight:700}
.btn-orange:hover{background:var(--orange-700);color:#000}
.badge-orange{background:var(--orange-700);color:#000}
.section-title{font-weight:800;letter-spacing:.5px}
.card-dark{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:16px}
a, .nav-link{transition:opacity .2s ease, color .2s ease}
a:hover{opacity:.9}
.hero{
  background: radial-gradient(1000px 400px at 10% 0%, rgba(255,122,0,.15), transparent 50%),
              radial-gradient(800px 300px at 90% 20%, rgba(255,122,0,.10), transparent 50%),
              #000;
}
.hero .pill{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:999px;padding:.4rem .8rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns: repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns: repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns: repeat(4,minmax(0,1fr));}
@media (max-width: 992px){.grid-4{grid-template-columns: repeat(2,minmax(0,1fr));} .grid-3{grid-template-columns: repeat(2,minmax(0,1fr));}}
@media (max-width: 576px){.grid-2,.grid-3,.grid-4{grid-template-columns: 1fr;}}
figure{margin:0}
figure img{border-radius:12px;object-fit:cover}
.sponsor-logo{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:1rem;height:100px}
.sponsor-logo img{max-height:70px;max-width:100%;}

/* === Nitro Circus vibe adjustments === */
.hero {
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.85)),
              url('assets/img/background_event.png') center/cover no-repeat fixed;
  min-height: 78vh;
  display:flex;
  align-items:center;
}
.navbar-brand img{height:44px; width:auto;}
.nav-link, .btn { text-transform: uppercase; letter-spacing: .6px; }
.display-5, .display-4 { text-transform: uppercase; }
.hero .pill{background:rgba(0,0,0,.6); border-color:#2a2a2a}
.card-dark{backdrop-filter: blur(6px);}
.btn-orange{border-radius:999px; padding:.75rem 1.25rem; font-weight:800;}
.btn-outline-light{border-radius:999px;}

/* ==== Cronograma styles ==== */
.now { background: rgba(255,122,0,0.08); }
.past { opacity:.6; }
.pulse { animation: pulse 1s infinite alternate; }
@keyframes pulse { from { transform:scale(1); } to { transform:scale(1.05);} }
.progress-thin{height:6px;border-radius:999px;background:#1f1f1f;overflow:hidden}
.progress-thin .bar{height:100%;background:var(--orange-500);width:0%}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips .chip{border:1px solid #2a2a2a;border-radius:999px;padding:.35rem .75rem;font-size:.85rem;cursor:pointer}
.chips .chip.active{background:var(--orange-500);color:#000;border-color:transparent;font-weight:700}
#gadget-finais .display-6{font-weight:800;letter-spacing:.5px}

/* === Accents + Counter + Calendar === */
.section-kicker{color:var(--orange-500); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.8rem}
.hr-accent{height:3px; background:linear-gradient(90deg,var(--orange-500),transparent); border:none; border-radius:999px; margin:1rem 0 1.5rem}
#index-cal .day-card{border-radius:16px; overflow:hidden; border:1px solid #262626; background:#0b0b0b}
#index-cal .day-head{background:linear-gradient(180deg,rgba(255,122,0,.25),rgba(255,122,0,.05)); padding:.75rem 1rem; border-bottom:1px solid #262626; font-weight:800; display:flex; align-items:center; justify-content:space-between}
#index-cal .day-head .badge{background:var(--orange-700); color:#000; border-radius:999px}
#index-cal ul{list-style:none; margin:0; padding:1rem}
#index-cal li{display:flex; gap:.5rem; align-items:center; padding:.4rem 0; border-bottom:1px dashed #232323}
#index-cal li:last-child{border-bottom:none}
#counter-base{background: radial-gradient(600px 200px at 10% 0%, rgba(255,122,0,.12), transparent 50%), #0b0b0b; border:1px solid #1f1f1f; border-radius:16px; padding:1rem 1.25rem}
#counter-base .big{font-size: clamp(42px, 8vw, 72px); line-height: .9; font-weight:900; letter-spacing:-1px}
#counter-base .label{font-weight:800; letter-spacing:.08em}
#counter-base.started .big{color:var(--orange-500)}

/* === Header compact countdown === */
.count-pill{display:inline-flex;align-items:center;gap:.3rem;background:#0b0b0b;border:1px solid #2a2a2a;border-radius:999px;padding:.25rem .6rem;font-size:.8rem}
.count-pill .num{color:var(--orange-500);font-weight:900}
.count-pill .lab{color:#aaa;text-transform:uppercase;letter-spacing:.08em}

/* === Timeline Home === */
#timeline-home{border:1px solid #1f1f1f;border-radius:16px;padding:1rem;background:#0b0b0b}
.day-lane{margin-bottom:1.25rem}
.day-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-weight:800}
.track{position:relative;height:8px;background:#1f1f1f;border-radius:999px;overflow:visible}
.track .progress{position:absolute;top:0;left:0;height:100%;background:var(--orange-500);width:0%;transition:width .6s ease}
.node{position:absolute;top:50%;transform:translate(-50%,-50%);background:var(--orange-500);height:16px;width:16px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,122,0,.25)}
.node .tip{position:absolute;top:-44px;left:50%;transform:translateX(-50%);background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:.35rem .5rem;white-space:nowrap;font-size:.8rem;display:none}
.node:hover .tip{display:block}
.node .time{color:#aaa;margin-right:.25rem}

/* === Orange section block === */
.section-orange{background:var(--orange-500); color:#000;}
.section-orange .section-title, .section-orange h1, .section-orange h2, .section-orange h3{color:#000;}
.section-orange .text-secondary{color:#111!important;}
.section-orange .badge-orange{background:#000;color:var(--orange-500);}
.section-orange .btn-outline-light{border-color:#000;color:#000}
.section-orange .btn-outline-light:hover{background:#000;color:var(--orange-500)}

/* === Decorative hero icons + interactions === */
.hero{position:relative; overflow:hidden}
.hero-decos{position:absolute; inset:0; pointer-events:none}
.deco-icon{position:absolute; width:clamp(80px, 12vw, 180px); opacity:.28; filter:drop-shadow(0 10px 25px rgba(0,0,0,.45)); transform:translate3d(0,0,0) rotate(var(--rot,0deg)); animation:floatY var(--dur,9s) ease-in-out infinite alternate}
.deco-icon.di-1{left:-20px; top:8%; --dur:10s; --rot:-6deg}
.deco-icon.di-2{right:2%; top:3%; --dur:8s; --rot:8deg}
.deco-icon.di-3{left:4%; bottom:-4%; --dur:11s; --rot:4deg}
.deco-icon.di-4{right:-30px; bottom:12%; --dur:9.5s; --rot:-3deg}
@keyframes floatY{from{transform:translate3d(0,-6px,0) rotate(var(--rot))} to{transform:translate3d(0,8px,0) rotate(var(--rot))}}

/* Tilt cards */
.tilt{transform-style:preserve-3d; transition:transform .18s ease, box-shadow .18s ease}
.tilt:hover{box-shadow:0 10px 30px rgba(255,122,0,.15)}
.tilt .tilt-pop{transform:translateZ(30px)}

/* Ripple for buttons */
.btn{position:relative; overflow:hidden}
.btn .ripple{position:absolute;border-radius:999px;transform:scale(0);opacity:.4;background:var(--orange-500);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(12);opacity:0}}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Sponsor wiggle hover */
@keyframes wiggle{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.sponsor-logo:hover{animation:wiggle .45s ease-in-out}

/* === Random icon system (lightweight, mobile-safe) === */
.hero{position:relative}
.hero .content-elevated{position:relative; z-index:2}
.icons-layer{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden}
.icon-fx{position:absolute; opacity:.16; will-change:transform, opacity; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
@media (prefers-reduced-motion: reduce){
  .icon-fx{position:absolute; opacity:.16; will-change:transform, opacity; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
}
/* simple float + drift */
@keyframes driftY {from { transform: translateY(-8px) } to { transform: translateY(10px) }}
.icon-fx.float{animation: driftY var(--dur,9s) ease-in-out infinite alternate}
/* subtle spin */
@keyframes spinS {from{ transform: rotate(0deg) } to{ transform: rotate(360deg) }}
.icon-fx.spin{animation: spinS var(--durs,64s) linear infinite}
/* orange shadow overlay for hero bottom for readability */
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:25%; 
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  pointer-events:none; z-index:1;
}
/* orange chips for 'sobre' badges on orange section */
.section-orange .badge-orange{background:#000;color:var(--orange-500);}

#sobre, #atletas, #local, #patrocinadores{position:relative}

/* Full-bleed orange section (Sobre) */
.section-orange{background:var(--orange-500); color:#000;}
.section-orange .section-title, .section-orange h1, .section-orange h2, .section-orange h3{color:#000;}
.section-orange .text-secondary{color:#111!important;}
.section-orange .badge-orange{background:#000;color:var(--orange-500);}
.section-orange .btn-outline-light{border-color:#000;color:#000}
.section-orange .btn-outline-light:hover{background:#000;color:var(--orange-500)}
