/* ==========================================================================
   bodeboo · main.css
   Diseño dark, tarjetas, grids y barra de cookies
   ========================================================================== */

/* ----------------------------- Variables -------------------------------- */
:root{
  --bg:#0b0c10;
  --card:#11131a;
  --fg:#eaf0f6;
  --muted:#9fb3c8;
  --border:#202634;
  --accent:#7052fb;
  --accent-600:#5b43d3;
  --accent-700:#4b36b1;
  --teal:#18c9bb;
  --radius:14px;
  --container:1120px;
}

/* ----------------------------- Base ------------------------------------- */
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--container); margin-inline:auto; padding:clamp(16px,2.4vw,24px) }

/* ----------------------------- Botones ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid transparent;
  background:var(--accent); color:#fff; font-weight:800; text-decoration:none;
  box-shadow:0 8px 24px rgba(112,82,251,.18); transition:filter .15s ease
}
.btn:hover{ filter:brightness(1.05) }
.btn.secondary{ background:#1e2430; border-color:#2a3140; color:var(--fg); box-shadow:none }
.btn.sm{ padding:10px 14px; border-radius:10px; font-weight:700 }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed }

/* ----------------------------- Header ----------------------------------- */
header{
  position:sticky; top:0; z-index:20; background:rgba(11,12,16,.8);
  border-bottom:1px solid var(--border)
}
@media (prefers-reduced-transparency:no-preference){
  header{ backdrop-filter:saturate(1.1) blur(8px) }
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px }
.brand{ display:flex; align-items:center; gap:8px }
.brand img{ width:156px; height:auto }
header .btn{ box-shadow:none; padding:10px 14px; border-radius:10px }
header .btn.secondary{ padding:10px 12px }
@media (max-width:640px){
  .brand img{ width:132px }
  .nav{ min-height:50px }
  header .btn, header .btn.secondary{ padding:8px 12px; border-radius:9px }
}

/* ----------------------------- Hero ------------------------------------- */
.hero{ padding-block:clamp(28px,5vw,56px) }
.hero h1{ font-size:clamp(28px,4.4vw,52px); line-height:1.03; margin:0 0 8px }
.hero p{ color:var(--muted); font-size:clamp(16px,2.2vw,18px); margin:0 0 18px }
.hero .banner{
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  aspect-ratio:21/7; background:#0f1117
}
.panel{
  display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:stretch; margin-top:16px
}
@media (max-width:960px){ .panel{ grid-template-columns:1fr } }

/* ----------------------------- Tarjetas / stats ------------------------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px }
.stats{ display:grid; gap:10px }
.stat{ display:flex; justify-content:space-between; border-bottom:1px dashed rgba(255,255,255,.07); padding:8px 0 }
.stat:last-child{ border-bottom:0 }

/* ----------------------------- Secciones -------------------------------- */
section :is(h2){
  font-size:clamp(22px,3vw,34px); margin:0 0 14px; scroll-margin-top:80px
}
.feature{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px
}

/* Icon cards (icono arriba centrado) */
.feature.iconcard{
  display:grid; align-content:start; gap:8px; padding-top:18px; text-align:center
}
.lead-icon{ font-size:60px; line-height:1 }

/* ----------------------------- Grids reutilizables ---------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media (max-width:1024px){ .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px){ .grid-3, .grid-2{ grid-template-columns:1fr } }

/* ----------------------------- Steps ------------------------------------ */
.step{ display:flex; gap:12px }
.step .num{
  flex:0 0 34px; height:34px; border-radius:999px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:900
}

/* ----------------------------- Pricing ---------------------------------- */
.price{ display:flex; flex-direction:column; gap:12px; max-width:300px }
.price h3{ margin:0 }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px;
  background:#1e2430; border:1px solid #2a3140; color:#cfe0ff; font-size:12px }

/* ----------------------------- Footer ----------------------------------- */
footer{ border-top:1px solid var(--border); padding-block:28px; color:var(--muted); font-size:14px }

/* ----------------------------- Pruebas sugeridas ------------------------ */
.races-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:1024px){ .races-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px){ .races-grid{ grid-template-columns:1fr } }
.race{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius)
}
.racePoster{ position:relative; aspect-ratio:16/9; background:#f2f2f2; overflow:hidden }
.racePoster::before{
  content:""; position:absolute; inset:-6%;
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(112,82,251,.22), transparent 60%),
    radial-gradient(140% 100% at 50% 100%, rgba(24,201,187,.18), transparent 70%);
  filter:blur(18px); opacity:.8
}
.racePoster img{ position:relative; width:100%; height:100%; object-fit:contain; z-index:1 }
.raceBody{ padding:12px 14px; display:grid; gap:8px }
.raceTitle{ font-weight:900; letter-spacing:.2px }
.raceMeta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px }
.raceActions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px }

/* ----------------------------- Cookie bar ------------------------------- */
.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  background:#11131a; color:#eaf0f6; border:1px solid #202634; border-radius:12px;
  padding:12px 14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  box-shadow:0 8px 32px rgba(0,0,0,.35); font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial
}
.cookiebar[hidden]{ display:none !important }
.cookiebar p{ margin:0; color:#cfe0ff }
.cookiebar a{ color:#9fb3c8; text-decoration:underline }
.cookiebar .btn{ padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:700 }
.cookiebar .ok{ background:#7052fb; color:#fff }
.cookiebar .no{ background:#1e2430; color:#eaf0f6; border-color:#2a3140 }

/* ----------------------------- Utilidades pequeñas ---------------------- */
.muted{ color:var(--muted) }
.center{ text-align:center }
.mt-14{ margin-top:14px }


/* ----------------------------- social footer ---------------------- */
.footer-social {
  display:flex; gap:10px; align-items:center;
}
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid #2a3140; background:#1e2430; color:#eaf0f6;
  transition:filter .15s ease, transform .05s ease;
}
.icon-btn:hover { filter:brightness(1.1) }
.icon-btn:active { transform:translateY(1px) }

.footer-bottom-social{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:12px;
}

.icon-btn-lg{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(56px, 6vw, 80px);
  height:clamp(56px, 6vw, 80px);
  border-radius:999px;
  border:1px solid #2a3140;
  background:#1e2430;
  color:#eaf0f6;
  font-size:clamp(30px, 3vw, 40px);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.icon-btn-lg:hover{
  filter:brightness(1.12);
  box-shadow:0 14px 34px rgba(112,82,251,.25);
}
.icon-btn-lg:active{ transform:translateY(1px) }