:root{
  --bg:#0b1220;
  --card:#0f1a2f;
  --text:#e6edf6;
  --muted:#a3b0c2;
  --line:rgba(255,255,255,.08);
  --primary:#3b82f6;
  --ok:#22c55e;
}

/* ----- HERO ----- */
.home-hero{
  position: relative;
  background: radial-gradient(1000px 400px at 20% -10%, rgba(59,130,246,.18), transparent),
              radial-gradient(800px 360px at 100% 0%, rgba(34,197,94,.12), transparent),
              var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 24px;
  margin:10px 0 20px;
  overflow:hidden;
}
.home-badge{
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:800;
  letter-spacing:.5px;
  margin-bottom:10px;
}
.home-hero h1{
  margin:4px 0 6px;
  font-size: clamp(24px, 4vw, 36px);
  color:var(--text);
  line-height:1.15;
}
.home-hero h1 span{
  background:linear-gradient(90deg, #60a5fa, #34d399);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.home-sub{
  margin:4px 0 18px;
  color:var(--muted);
}
.home-cta{
  display:flex; flex-wrap:wrap; gap:10px;
}

/* ----- BOTONES ----- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px; font-weight:700;
  border:1px solid var(--line); color:var(--text); text-decoration:none;
  background:rgba(255,255,255,.04);
}
.btn:hover{ filter:brightness(1.08); }
.btn-primary{ background:var(--primary); border-color:transparent; color:#fff; }
.btn-success{ background:var(--ok); border-color:transparent; color:#06220f; }
.btn-outline{ background:transparent; }

/* ----- CARD SELECTOR TEMA ----- */
.home-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.home-label{
  display:block; font-weight:800; color:var(--text); margin-bottom:8px;
}
.theme-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.selector-tema{
  appearance:none;
  height:44px; padding:0 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0b1730; color:var(--text);
  outline:none;
}
.selector-tema:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
.hint{ color:var(--muted); }

/* Responsive */
@media (max-width:700px){
  .home-cta{ flex-direction:column; }
}
/* Fuerza fondo oscuro en el home y quita fondo del contenedor */
body{ background:#0b1220 !important; }
.contenido{ background:transparent !important; }