:root{
  /* Light theme */
  --bg:#f6f7fb;
  --bg2:#ffffff;
  --card:#ffffff;
  --soft:#f1f3f9;
  --stroke: rgba(16, 24, 40, .10);

  --text:#121826;
  --muted: rgba(18, 24, 38, .68);

  /* Accentos vivos pero NO neón */
  --brand1:#ff6b6b;  /* coral */
  --brand2:#ffd166;  /* amarillo suave */
  --brand3:#4cc9f0;  /* celeste */
  --brand4:#7c3aed;  /* violeta (moderado) */

  --radius: 18px;
  --radius2: 26px;
  --shadow: 0 18px 50px rgba(16,24,40,.10);
  --max: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 300;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255, 209, 102, .22), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(76, 201, 240, .18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
button{font-family:inherit}

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding: 12px 18px;
  border:1px solid var(--stroke);
  background: #fff;
  color: var(--text);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(16,24,40,.10);
  border-color: rgba(16,24,40,.16);
}
.btn.primary{
  border-color: transparent;
  background: linear-gradient(90deg, var(--brand1), var(--brand3));
  color:#0b1220;
  font-weight:600;
}
.btn.ghost{
  background: transparent;
  border-color: rgba(16,24,40,.14);
}

.icon-btn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(16,24,40,.10); }

.badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  display:grid; place-items:center;
  font-size:11px;
  background: var(--brand2);
  color:#111;
  font-weight:700;
  border:1px solid rgba(0,0,0,.10);
}

.top-glow{
  position:fixed; inset:0 0 auto 0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--brand3), var(--brand1), transparent);
  opacity:.9;
  z-index:200;
}

::selection{ background: rgba(255, 107, 107, .22); }