:root{
  --bg:#0b0e12; --bg2:#10141a; --panel:#161b22; --texto:#e9eef4; --suave:#93a1b0;
  --verde:#1FAE5B; --verde2:#28d46f; --linea:#222a34; --oro:#ffcf4d; --rojo:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%, #11331f 0%, var(--bg) 55%);color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit}
.barra{display:flex;align-items:center;gap:18px;padding:14px 22px;border-bottom:1px solid var(--linea);
  position:sticky;top:0;background:rgba(11,14,18,.85);backdrop-filter:blur(10px);z-index:5}
.marca{font-weight:800;font-size:18px;letter-spacing:.3px}.marca span{color:var(--verde2)}
nav a{color:var(--suave);text-decoration:none;margin-right:14px;font-weight:600;font-size:14px}
nav a.activo{color:var(--verde2)}
.gamif{margin-left:auto;display:flex;align-items:center;gap:10px}
.chip{background:var(--panel);border:1px solid var(--linea);border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px}
.chip.demo{background:rgba(255,207,77,.12);border-color:var(--oro);color:var(--oro)}
.xpbar{width:130px;height:10px;background:var(--panel);border-radius:999px;overflow:hidden;border:1px solid var(--linea)}
#xpfill{height:100%;width:0;background:linear-gradient(90deg,var(--verde),var(--verde2));transition:width .6s ease}
main{max-width:1040px;margin:26px auto;padding:0 18px;display:grid;gap:22px}
.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--linea);border-radius:18px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
h1{margin:.1em 0 .7em;font-size:26px}
label{display:block;margin:16px 0 7px;color:var(--suave);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{width:100%;background:#0d1117;border:1px solid var(--linea);border-radius:11px;color:var(--texto);padding:12px 14px;font-size:15px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--verde)}
.opc{color:var(--suave);font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;opacity:.8}
.ayuda{margin:9px 0 0;color:var(--suave);font-size:12.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{cursor:pointer;border:1px solid var(--linea);background:#0d1117;color:var(--texto);border-radius:999px;padding:9px 15px;font-weight:600;font-size:14px;transition:.15s;user-select:none}
.pill small{display:block;color:var(--suave);font-weight:500;font-size:11px;text-transform:none;letter-spacing:0}
.pill:hover{border-color:#2f3a47}
.pill.sel{border-color:var(--verde);background:rgba(31,174,91,.16);box-shadow:0 0 0 2px rgba(31,174,91,.22)}
.cta{margin-top:24px;width:100%;background:linear-gradient(90deg,var(--verde),var(--verde2));color:#04150b;border:0;border-radius:13px;padding:16px;font-size:16px;font-weight:800;cursor:pointer;transition:.15s}
.cta:hover{filter:brightness(1.06);transform:translateY(-1px)} .cta:disabled{opacity:.55;cursor:wait;transform:none}
.salida{display:grid;gap:16px}
.carta{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--linea);border-radius:18px;padding:20px;animation:subir .45s cubic-bezier(.2,.8,.2,1)}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.carta h3{margin:0 0 2px;display:flex;align-items:center;gap:10px;font-size:17px}
.etq{font-size:12px;color:var(--suave)}
.medidor{display:flex;align-items:center;gap:12px;margin:12px 0 6px}
.aro{--p:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;
  background:conic-gradient(var(--verde2) calc(var(--p)*1%), #232b35 0)}
.aro b{background:var(--panel);width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.ejes{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.eje{font-size:11px;background:#0d1117;border:1px solid var(--linea);border-radius:8px;padding:3px 9px;color:var(--suave)}
.guion{white-space:pre-wrap;background:#0d1117;border:1px solid var(--linea);border-radius:12px;padding:15px;margin-top:10px;font-size:15px}
.acciones{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{cursor:pointer;border:1px solid var(--linea);background:#0d1117;color:var(--texto);border-radius:10px;padding:9px 14px;font-weight:600;transition:.15s}
.btn:hover{border-color:#34404e}
.btn.win{border-color:var(--oro);color:var(--oro)} .btn.like.on{border-color:var(--verde);color:var(--verde2)}
.btn.dislike.on{border-color:var(--rojo);color:var(--rojo)}
.cargando{color:var(--suave);text-align:center;padding:40px;animation:pulso 1.2s infinite}
@keyframes pulso{50%{opacity:.45}}
.confeti{position:fixed;inset:0;pointer-events:none;z-index:50}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--verde);color:var(--texto);padding:12px 18px;border-radius:12px;font-weight:600;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.oculto{display:none}

/* Botón INFO en la barra */
.info-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--verde);background:rgba(31,174,91,.12);
  color:var(--verde2);font-weight:800;font-size:14px;font-style:italic;font-family:Georgia,'Times New Roman',serif;
  cursor:pointer;display:grid;place-items:center;line-height:1;transition:.18s;padding:0}
.info-btn:hover{background:var(--verde);color:#04150b;transform:scale(1.08);box-shadow:0 0 0 4px rgba(31,174,91,.18)}

/* Modal de ayuda */
.modal-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;
  background:rgba(5,8,11,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fadeIn .22s ease}
.modal-backdrop.oculto{display:none}  /* gana sobre el display:grid de arriba */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{position:relative;width:min(540px,100%);max-height:90vh;overflow:auto;
  background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--linea);border-radius:22px;
  padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(31,174,91,.08);
  animation:modalIn .35s cubic-bezier(.2,.9,.25,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--linea);
  background:#0d1117;color:var(--suave);cursor:pointer;font-size:14px;transition:.15s}
.modal-x:hover{color:var(--texto);border-color:var(--rojo)}
.modal-cab{display:flex;gap:14px;align-items:center;margin-bottom:18px;padding-right:30px}
.modal-emoji{font-size:34px;line-height:1;filter:drop-shadow(0 4px 10px rgba(31,174,91,.35))}
.modal h2{margin:0;font-size:21px;letter-spacing:.2px}
.modal-sub{margin:3px 0 0;color:var(--suave);font-size:13px}

/* Reproductor de audio */
.player{display:flex;gap:14px;align-items:center;background:#0d1117;border:1px solid var(--linea);
  border-radius:15px;padding:13px 15px;margin-bottom:20px}
.player.sonando{border-color:var(--verde);box-shadow:0 0 0 3px rgba(31,174,91,.14)}
.play-btn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;font-size:16px;
  background:linear-gradient(135deg,var(--verde),var(--verde2));color:#04150b;display:grid;place-items:center;
  transition:.15s;box-shadow:0 6px 18px rgba(31,174,91,.35)}
.play-btn:hover{transform:scale(1.06)}
.player-cuerpo{flex:1;min-width:0}
.player-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.player-tit{font-weight:700;font-size:13.5px}
.player-time{color:var(--suave);font-size:12px;font-variant-numeric:tabular-nums}
.player-barra{height:7px;background:#222a34;border-radius:999px;overflow:hidden;cursor:pointer}
.player-progreso{height:100%;width:0;background:linear-gradient(90deg,var(--verde),var(--verde2));border-radius:999px;transition:width .15s linear}

/* Pasos */
.pasos{list-style:none;counter-reset:p;margin:0 0 22px;padding:0;display:grid;gap:12px}
.pasos li{counter-increment:p;position:relative;padding:2px 0 2px 40px;font-size:14.5px;line-height:1.5;color:var(--texto)}
.pasos li::before{content:counter(p);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;
  background:rgba(31,174,91,.14);border:1px solid var(--verde);color:var(--verde2);font-weight:800;font-size:13px;
  display:grid;place-items:center}
.pasos b{color:#fff}
.cta-modal{margin-top:0}