/* ============ VARIABLES Y BASE ============ */
:root{
  --bg:#0a0a0c;
  --glass:rgba(16,16,20,.55);
  --border:rgba(255,255,255,.08);
  --text:#f1efe9;
  --soft:#d6d3cd;
  --muted:#8e8b85;
  --gold:#c9a26b;
  --gold-soft:rgba(201,162,107,.4);
  --kick-soft:#7ee849;
  --twitch-soft:#cfaeff;
}

*{margin:0;padding:0;box-sizing:border-box}

::selection{background:var(--gold);color:#0a0a0c}

/* Fondo de la Grieta como textura sutil, casi negra */
body{
  background:
    linear-gradient(rgba(8,8,11,.84), rgba(8,8,11,.95)),
    url('fondo.webp') center/cover no-repeat var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  display:flex;justify-content:center;
  min-height:100vh;
  padding:28px 16px;
}

.wrap{width:100%;max-width:420px;text-align:center}

/* ============ CABECERA ============ */
.avatar{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:1px solid var(--gold-soft);
  box-shadow:0 0 0 5px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.6);
}

h1{
  font-family:'Chakra Petch',sans-serif;
  font-size:2rem;letter-spacing:6px;margin-top:16px;
}
/* divisor dorado fino bajo el título */
h1::after{
  content:"";display:block;width:56px;height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.tag{color:var(--muted);font-size:.9rem;margin-top:10px;letter-spacing:.4px}

/* ============ BADGE EN VIVO + PUNTOS ============ */
.live{
  display:inline-flex;align-items:center;gap:8px;margin:18px 0 6px;
  background:var(--glass);border:1px solid var(--border);border-radius:999px;
  padding:8px 16px;font-size:.8rem;font-weight:600;letter-spacing:.6px;color:var(--soft);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* punto "on air"; --c controla el color del pulso */
.dot{
  --c:255,68,68;
  width:8px;height:8px;border-radius:50%;
  background:rgb(var(--c));
  animation:pulse 1.6s infinite;
}
.dot-btn{width:9px;height:9px}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--c),.5)}
  70%{box-shadow:0 0 0 8px rgba(var(--c),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--c),0)}
}

/* ============ BOTONES ============ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:15px;margin-top:12px;border-radius:12px;
  text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.3px;
  transition:transform .15s;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn:active{transform:scale(.98)}

/* permite animar el ángulo del gradiente de plasma */
@property --angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* KICK: fondo verde transparente + plasma girando en el borde */
.kick{
  position:relative;
  background:rgba(83,252,24,.08);   /* el verde translúcido de siempre */
  color:var(--kick-soft);
  box-shadow:0 6px 24px rgba(0,0,0,.45), 0 0 16px rgba(83,252,24,.15);
}

/* el plasma vive aquí: un anillo de 2px recortado con máscaras,
   así el interior del botón puede seguir siendo transparente */
.kick::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;   /* grosor del anillo */
  background:conic-gradient(from var(--angle),
    rgba(83,252,24,.15) 0%,
    #53fc18 10%,
    #d8ffc4 20%,
    rgba(83,252,24,.15) 35%,
    rgba(83,252,24,.15) 50%,
    #53fc18 60%,
    #d8ffc4 70%,
    rgba(83,252,24,.15) 85%,
    rgba(83,252,24,.15) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:plasma-spin 3.5s linear infinite;
  pointer-events:none;
}

@keyframes plasma-spin{
  to{--angle:360deg}
}

/* TWITCH: fondo morado transparente + plasma girando en el borde */
.twitch{
  position:relative;
  background:rgba(169,112,255,.1);   /* morado translúcido, igual que antes */
  color:var(--twitch-soft);
  box-shadow:0 6px 24px rgba(0,0,0,.45), 0 0 16px rgba(145,70,255,.18);
}

.twitch::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;   /* grosor del anillo */
  background:conic-gradient(from var(--angle),
    rgba(145,70,255,.15) 0%,
    #9146ff 10%,
    #e8dbff 20%,                       /* núcleo caliente lavanda */
    rgba(145,70,255,.15) 35%,
    rgba(145,70,255,.15) 50%,
    #9146ff 60%,
    #e8dbff 70%,
    rgba(145,70,255,.15) 85%,
    rgba(145,70,255,.15) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:plasma-spin 3.5s linear infinite;
  animation-delay:-1.75s;   /* desfasado medio giro: los plasmas no bailan sincronizados */
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .dino,.dot,.kick::before,.twitch::before{animation:none}
}

/* secundarios: vidrio oscuro */
.sec{
  background:var(--glass);
  border:1px solid var(--border);
  color:var(--soft);
  font-weight:500;font-size:.92rem;padding:13px;
}

/* íconos de redes */
.ico{
  width:18px;height:18px;
  object-fit:contain;
  flex:none;
}

/* ============ COLABORACIÓN MDF ============ */
.collab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:22px;padding:14px 16px;border-radius:16px;
  background:var(--glass);border:1px solid var(--border);
  text-decoration:none;text-align:left;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.collab-tag{
  display:block;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px;
}
.collab-text{font-size:.9rem;color:var(--soft);line-height:1.5}
.code{color:var(--gold);letter-spacing:1px}
.collab-arrow{color:var(--muted);font-size:1.1rem}

/* ============ TARJETA DE HORARIOS ============ */
.card{
  background:var(--glass);border:1px solid var(--border);border-radius:16px;
  padding:20px;margin-top:24px;text-align:left;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.card h2{
  font-family:'Chakra Petch',sans-serif;font-size:.85rem;letter-spacing:2.5px;
  margin-bottom:12px;color:var(--gold);text-transform:uppercase;
}
.card p{font-size:.93rem;line-height:1.75;color:var(--soft)}
.nota{color:var(--muted)}

footer{color:var(--muted);font-size:.78rem;margin-top:28px;letter-spacing:.3px}

/* ============ PISADA DE DINOSAURIO (Instagram) ============ */
.dino{
  animation:dino-step 2.6s ease-in-out infinite;
}
@keyframes dino-step{
  0%,45%,100%{transform:scale(1);box-shadow:0 6px 24px rgba(0,0,0,.45)}
  8%  {transform:scale(1.035)}                                            /* alza la pata  */
  14% {transform:scale(.965) translateY(2px);box-shadow:0 2px 10px rgba(0,0,0,.65)}  /* TUM           */
  20% {transform:scale(1.01) translateY(-1px)}                            /* rebote        */
  26% {transform:scale(1)}                                                /* asienta       */
  31% {transform:scale(1.035)}                                            /* alza la otra  */
  37% {transform:scale(.965) translateY(2px);box-shadow:0 2px 10px rgba(0,0,0,.65)}  /* TUM           */
  43% {transform:scale(1.01) translateY(-1px)}                            /* rebote        */
}

/* ============ ACCESIBILIDAD ============ */
@media (prefers-reduced-motion:reduce){
  .dino,.dot,.kick::before{animation:none}
}