/* ====== Reset & tokens ====== */
*{box-sizing:border-box}
:root{
  /* Fondo marrón oscuro */
  --bg-deep:#120d0a;
  --bg-1:#17100c;
  --bg-2:#1d140e;

  /* Tarjetas y bordes */
  --card:#1c130d;
  --card-alt:#1a110c;
  --border:#2a1b12;

  /* Texto */
  --ink:#fff7ed;       /* crema muy claro */
  --ink-dim:#f5e7d8;   /* crema tenue */
  --muted:#e7d2bf;     /* crema más apagado */

  /* Acentos naranja / ámbar */
  --acc-1:#f97316;  /* orange 500 */
  --acc-2:#fb923c;  /* orange 400 */
  --acc-3:#f59e0b;  /* amber 500 */
  --acc-4:#ea580c;  /* orange 600 */

  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-1:0 20px 50px rgba(234,88,12,.18);
  --shadow-2:0 14px 30px rgba(234,88,12,.14);
  --glass:rgba(255,255,255,.05);
}

html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.45 "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  background:
    radial-gradient(900px 600px at -10% -20%, #29180f 0%, transparent 60%),
    radial-gradient(900px 600px at 110% -10%, #1f140e 0%, transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-2) 35%, var(--bg-deep));
  overflow-x:hidden;
}

/* ====== Utilities ====== */
.container{width:min(1200px, 92%); margin-inline:auto}
.h2{
  font-size:clamp(24px,3.2vw,32px);
  margin:0 0 8px;
  letter-spacing:.2px;
  font-weight:1000;
}
.lead{color:var(--muted); margin:0 0 22px}

/* ====== Decorative BG ====== */
.bg-decor{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(480px 280px at 20% 75%, rgba(249,115,22,.15), transparent 60%),
    radial-gradient(560px 340px at 80% 18%, rgba(245,158,11,.14), transparent 60%);
  filter: blur(8px) saturate(115%);
}

/* ====== Header ====== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(18,13,10,.92), rgba(18,13,10,.72));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none }
.logo{ width:28px; height:28px; display:block }
.wordmark{
  font-weight:1000; letter-spacing:.3px;
  background:linear-gradient(90deg,var(--acc-2),var(--acc-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tag.beta{
  margin-left:6px; padding:2px 8px; border-radius:999px; font-weight:900; font-size:11px;
  background:linear-gradient(180deg, #23160f, #1f140e);
  border:1px solid var(--border);
  color:var(--ink-dim);
}
.nav{display:flex; align-items:center; gap:14px}
.nav a{
  color:var(--ink-dim); text-decoration:none; font-weight:800; font-size:14px;
  padding:8px 10px; border-radius:8px;
}
.nav a:hover{ color:var(--ink) }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; border-radius:12px; border:1px solid var(--border);
  font-weight:1000; letter-spacing:.2px; text-decoration:none; transition:.12s ease;
  font-family: inherit; /* Nunito en botones también */
}
.btn.ghost{
  background:linear-gradient(180deg,#20140f,#1c120d);
  color:var(--ink);
}
.btn.ghost:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2) }

/* ====== Hero ====== */
.hero{ padding:42px 0 26px; border-bottom:1px solid var(--border) }
.hero-inner{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:28px; align-items:center;
}
.title{
  margin:0 0 6px; font-size:clamp(30px,5.8vw,52px); line-height:1.06; font-weight:1000; letter-spacing:.3px;
}
.title span{
  background:linear-gradient(90deg,var(--acc-2),var(--acc-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle{ color:var(--ink-dim); margin:0 0 18px; font-size:clamp(16px,2.2vw,18px) }
.cta-row{ display:flex; gap:12px; margin: 12px 0 12px; flex-wrap:wrap }

.btn.primary{
  min-width:200px;
  background:linear-gradient(180deg,#fb923c,#f97316);
  color:#2b170a; border-color:#f59e0b;
  box-shadow:0 12px 26px rgba(249,115,22,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{ transform:translateY(-1px); filter:saturate(1.08); box-shadow:0 16px 30px rgba(249,115,22,.32) }
.btn.secondary{
  background:linear-gradient(180deg,#20140f,#1c120d); color:var(--ink); border-color:#2a1b12;
}
.btn.secondary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2) }

.highlights{
  list-style:none; padding:0; margin:10px 0 0; display:flex; gap:14px; flex-wrap:wrap; color:var(--muted)
}
.highlights li{
  padding:8px 12px; border:1px solid var(--border); border-radius:999px;
  background:linear-gradient(180deg,#1f140e,#1b120d);
  font-weight:900; font-size:13px;
}

.hero-card{
  background: linear-gradient(180deg, #21160f, #1b120d);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.05);
}
.card-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);
}
.chip{
  padding:4px 8px; border-radius:999px; font-weight:900; font-size:11px; letter-spacing:.2px;
  background:linear-gradient(180deg,#3b2316,#331f14); border:1px solid #4a2a1a; color:#ffd7b2;
}
.head-title{ color:var(--ink-dim); font-weight:900 }
.card-body{ padding:14px; display:grid; gap:10px }
.card-body .row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.badge{ width:40px; height:40px; border-radius:10px; background:linear-gradient(180deg,#3b2519,#2e1c13); border:1px solid #4a2a1a; }
.badge.alt{ background:linear-gradient(180deg,#2e1c13,#27170f); border-color:#4a2a1a; }
.team{ display:flex; align-items:center; gap:10px }
.team-name{ color:var(--ink) }
.vs{ color:var(--ink-dim); font-weight:1000 }
.meta{ display:flex; gap:12px; color:var(--ink-dim); flex-wrap:wrap }
.meta b{ color:var(--ink) }
.card-foot{ padding:12px 14px; border-top:1px solid var(--border) }
.link{ color:var(--acc-2); text-decoration:none; font-weight:1000 }
.link:hover{ text-decoration:underline }

/* ====== Sections ====== */
.section{ padding:38px 0 }
.section.alt{
  background: linear-gradient(180deg, rgba(23,16,12,.55), rgba(23,16,12,.35));
  border-block:1px solid var(--border)
}

/* Features grid (sin enlaces internos) */
.grid.features{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr) }
.feat{
  background:linear-gradient(180deg,#20140f,#1b120d);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.feat .icon{ font-size:22px; margin-bottom:8px }
.feat h3{ margin:0 0 6px; font-size:18px; font-weight:1000 }
.feat p{ margin:0; color:var(--muted); font-weight:700 }

/* Steps */
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px }
.steps li{
  display:grid; grid-template-columns: 42px 1fr; gap:12px; align-items:flex-start;
  background:linear-gradient(180deg,#20140f,#1b120d);
  padding:14px; border:1px solid var(--border); border-radius:var(--radius-md);
}
.step-num{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:linear-gradient(180deg,#fb923c,#f97316); color:#2b170a; font-weight:1000; border:1px solid #f59e0b;
}
.steps h3{ margin:0 0 4px; font-weight:1000 }
.steps p{ margin:0; color:var(--muted); font-weight:700 }
.cta-center{ margin-top:16px; display:flex; justify-content:center }

/* News (más antigua → más moderna) */
.news{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.news li{
  display:grid; grid-template-columns: 110px 1fr; gap:12px; align-items:start;
  background:linear-gradient(180deg,#20140f,#1b120d);
  padding:12px; border:1px solid var(--border); border-radius:var(--radius-md);
}
.news time{ color:var(--ink-dim); font-weight:1000 }
.news p{ margin:0; color:var(--muted); font-weight:700 }

/* CTA final */
.cta-final{ text-align:center }
.btn.big{ height:50px; min-width:240px; font-size:16px; border-radius:14px }

/* ====== Footer ====== */
.foot{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(18,13,10,.92), rgba(18,13,10,.76));
}
.foot-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0;
}
.foot small{ color:var(--ink-dim); font-weight:800 }
.foot-nav a{ color:var(--ink-dim); text-decoration:none; margin-left:12px; font-weight:900; }
.foot-nav a:hover{ color:var(--ink) }

/* ====== Scrollbar (WebKit/Firefox) ====== */
*{ scrollbar-width:thin; scrollbar-color:#77472c #1b120d; }
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-track{ background:#1b120d }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#b45309,#9a3412);
  border:2px solid #1b120d; border-radius:999px;
}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .grid.features{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .nav{ display:none }
  .news li{ grid-template-columns: 92px 1fr }
}