@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;900&family=IBM+Plex+Mono:wght@500;600&display=swap");
:root{
  --bg:#0B0B0B; --superficie:#131313; --lima:#C8F52C; --lima-oscuro:#A8D216;
  --texto:#7F98A8; --texto-fuerte:#CBDDE7; --blanco:#F4F7F5;
  --linea:#232323; --linea-viva:#2E2E2E; --rojo:#FF6F5E; --radio:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--texto);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.5; min-height:100dvh;
  display:flex; justify-content:center;
  padding:clamp(28px,7vw,80px) 22px 64px;
  -webkit-font-smoothing:antialiased;
}
main{width:100%;max-width:520px}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:#6B8496; margin:0 0 22px;
}
h1{
  font-size:clamp(52px,13.5vw,96px); font-weight:900; line-height:.86;
  letter-spacing:-.025em; color:var(--lima); margin:0 0 28px; text-transform:uppercase;
}
h2{font-size:24px;font-weight:700;color:var(--texto-fuerte);letter-spacing:-.01em;margin:0 0 14px}
.lead{font-size:19px; line-height:1.5; margin:0 0 34px; max-width:42ch}
.lead b{color:var(--texto-fuerte); font-weight:700}
form{display:grid;gap:22px}
label{
  display:block; font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--texto-fuerte); margin-bottom:8px;
}
.pista{display:block;font-size:13px;font-weight:400;color:#63798A;margin-top:3px}
input{
  width:100%; font:inherit; color:var(--blanco); background:var(--superficie);
  border:1.5px solid var(--linea-viva); border-radius:var(--radio);
  padding:14px 16px; transition:border-color .12s ease;
}
input::placeholder{color:#4E606D}
input:hover{border-color:#3C3C3C}
input:focus-visible{outline:3px solid rgba(200,245,44,.25);outline-offset:1px;border-color:var(--lima)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em}
.mono::placeholder{letter-spacing:.02em}
.btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  font:inherit; font-weight:700; font-size:16px; color:#0B0B0B;
  background:var(--lima); border:none; border-radius:var(--radio);
  padding:16px 22px; cursor:pointer; transition:background .12s ease;
}
.btn:hover{background:var(--lima-oscuro)}
.btn:disabled{background:#4F5D2A;color:#9AA88C;cursor:progress}
.btn:focus-visible{outline:3px solid rgba(200,245,44,.45);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--texto-fuerte);border:1.5px solid var(--linea-viva)}
.btn.ghost:hover{border-color:var(--lima);color:var(--lima)}
.error{
  margin:20px 0 0; color:var(--rojo); font-size:15px;
  border-left:2px solid var(--rojo); padding-left:14px;
}
.error:empty{display:none}
.card{
  margin-top:32px; background:var(--superficie);
  border:1px solid var(--linea-viva); border-radius:var(--radio); overflow:hidden;
}
.card[hidden]{display:none}
.card-head{padding:18px 22px 16px;font-size:14px;color:var(--texto)}
.card-head strong{color:var(--texto-fuerte);font-weight:700}
.perf{height:1px;background:repeating-linear-gradient(to right,var(--linea-viva) 0 7px,transparent 7px 14px)}
.card-body{padding:22px;display:flex;flex-direction:column;gap:14px}
.url{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px;
  color:#5F7382; word-break:break-all; line-height:1.45; margin:0;
}
.copy{
  font:inherit; font-size:14px; font-weight:600; color:var(--texto-fuerte);
  background:transparent; border:1px solid var(--linea-viva); border-radius:8px;
  padding:9px 15px; cursor:pointer;
}
.copy:hover{border-color:var(--lima);color:var(--lima)}
.copy:focus-visible{outline:3px solid rgba(200,245,44,.35);outline-offset:2px}
.barra{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  align-items:baseline; border-bottom:1px solid var(--linea); padding-bottom:16px; margin-bottom:30px;
}
.barra .quien{font-size:14px;color:#5F7382;margin:0}
.barra .quien b{color:var(--texto-fuerte);font-weight:700}
.barra a{font-size:14px;color:var(--texto-fuerte);text-decoration:none}
.barra a:hover{color:var(--lima)}
.campanas{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.campana{
  background:var(--superficie); border:1px solid var(--linea-viva);
  border-radius:var(--radio); padding:26px 24px;
  transition:border-color .12s ease;
}
.campana:hover{border-color:#3C3C3C}
.campana h2{margin:0 0 8px}
.campana p{margin:0 0 20px;font-size:16px;max-width:44ch}
.campana .btn{width:auto;display:inline-block;padding:12px 20px;font-size:15px}
.vacio{
  border:1px dashed var(--linea-viva); border-radius:var(--radio);
  padding:34px 24px; text-align:center; color:#5F7382;
}
.pie{margin:38px 0 0;font-size:14px;color:#5F7382}
.pie a{color:var(--texto-fuerte)}
.pie a:hover{color:var(--lima)}
@keyframes eject{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}
.card.animate{animation:eject .3s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}