:root{
  --blue:#2563eb;
  --green:#22c55e;
}

body{
  margin:0;
  font-family: Arial, sans-serif;
  color:white;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,99,235,0.65), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(34,197,94,0.55), transparent 45%),
    linear-gradient(135deg,#020617,#000);
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden; /* 👈 evita capas invisibles fuera */
}

/* ===== FONDOS ===== */
.bg-orb{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(85px);
  opacity:.6;
  pointer-events:none; /* 👈 NUNCA bloquean clics */
}

.orb-a{
  left:-140px;
  top:-160px;
  background:radial-gradient(circle,rgba(37,99,235,.85),transparent 70%);
}

.orb-b{
  right:-170px;
  bottom:-170px;
  background:radial-gradient(circle,rgba(34,197,94,.75),transparent 70%);
}

/* ===== CARD ===== */
.card{
  position:relative;
  width:min(720px,92vw);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  padding:54px;
  border-radius:26px;
  backdrop-filter:blur(22px);
  box-shadow:0 0 90px rgba(0,0,0,.65);
  text-align:center;
  z-index:2; /* 👈 garantiza que está encima */
}

/* ===== LOGO ===== */
.logoImgWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
}

.logoImg{
  width:120px;
  height:auto;
}

/* ===== TEXTOS ===== */
h1{
  font-size:36px;
  margin-bottom:10px;
}

.subtitle{
  opacity:.8;
  margin-bottom:15px;
}

.micro{
  font-size:13px;
  opacity:.6;
}

/* ===== BOTONES ===== */
.primary{
  background:linear-gradient(90deg,var(--green),#4ade80);
  border:none;
  padding:14px 26px;
  color:white;
  font-size:16px;
  cursor:pointer;
  border-radius:14px;
  margin-top:10px;
  transition:.15s ease;
}

.primary:hover{
  transform:scale(1.03);
}

.secondary{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  padding:12px 16px;
  color:white;
  border-radius:12px;
  cursor:pointer;
  transition:.15s ease;
}

.secondary:hover{
  background:rgba(255,255,255,.18);
}

/* ===== INPUT ===== */
.inputWrap{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

input{
  width:min(520px,88vw);
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(2,6,23,.35);
  color:white;
}

/* ===== VISIBILIDAD ===== */
.hidden{
  display:none;
}

/* ===== RESULTADO ===== */
.ideaCard{
  margin-top:20px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
}

.actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:center;
}

/* ===== TAGS (LOS 3 BOTONES) ===== */
.footer{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:center;
  position:relative;
  z-index:3; /* 👈 asegura clic */
}

.pill{
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  cursor:pointer;            /* 👈 MANO */
  user-select:none;
  transition:.15s ease;
  pointer-events:auto;       /* 👈 clic permitido */
}

.pill:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

/* ===== TOAST ===== */
.toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.7);
  padding:10px 14px;
  border-radius:12px;
  opacity:0;
  transition:.2s;
  pointer-events:none;
}

.toast.show{
  opacity:1;
}