/* =======================================================
   DLOMALO — FUEGO DORADO (responsive + drawer móvil)
   ======================================================= */

/* Paleta */
:root{
  --bg:#0b0000;
  --txt:#f4efe7;
  --muted:#c9bfb1;
  --line:#2a0c0c;

  --gold-1:#ffb648;
  --gold-2:#f2a13b;
  --gold-3:#d48b2d;
  --gold-4:#7a3c0a;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--txt); line-height:1.6;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
img,video,iframe{max-width:100%;display:block}
a{color:#ffb648;text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1140px,92%);margin-inline:auto}

/* ===================== Header ===================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; gap:12px; padding:10px 0;
  position:relative; /* referencia para la hamburguesa en móvil */
}

/* Logo */
.logo-badge{
  position:relative; display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(60% 55% at 50% 50%, rgba(255,90,0,.18), rgba(0,0,0,.6) 70%);
  box-shadow: 0 8px 24px rgba(212,58,0,.25), inset 0 0 10px rgba(255,120,40,.18);
  isolation:isolate;
}
.logo-badge img{width:80%; height:80%; object-fit:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.logo-badge::before,
.logo-badge::after{
  content:""; position:absolute; inset:-20%; z-index:-1; border-radius:18px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,122,46,.18), rgba(212,58,0,.18), rgba(255,122,46,.18));
  filter: blur(12px) saturate(1.1); animation: flameSpin 10s linear infinite;
}
.logo-badge::after{ inset:-10%; filter: blur(22px); opacity:.35; animation-duration:14s; animation-direction:reverse }
@keyframes flameSpin{ to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .logo-badge::before, .logo-badge::after{ animation:none } }

/* Menú ESCRITORIO */
.desktop-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.desktop-nav a{color:var(--txt);opacity:.92;font-weight:600}
.desktop-nav a:hover{opacity:1;color:#ffcf7a}

/* ===================== HERO ===================== */
.hero{
  position:relative; display:grid; place-items:center; text-align:center;
  background: url('../img/hero_bg_fire.png') center/cover no-repeat fixed;
  overflow:hidden;
}
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(60% 50% at 50% 45%, rgba(0,0,0,.12), rgba(0,0,0,.85) 85%);
}
.hero-content{position:relative; z-index:2}
.hero-sub{margin:6px 0 16px; color:var(--muted)}

/* Título dorado */
.brandmark-fire{
  margin:0; line-height:.92; font-family:"Great Vibes", cursive;
  font-weight:400; letter-spacing:.02em; color:transparent;
  background-image:
    radial-gradient(100% 100% at 50% 35%, #ffffff33 0%, #ffffff00 60%),
    linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 65%, var(--gold-4) 85%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow: 0 1px 0 rgba(255,220,180,.55), 0 10px 28px rgba(255,140,40,.35), 0 26px 70px rgba(212,58,0,.28);
  filter: drop-shadow(0 0 12px rgba(255,160,60,.22));
  position:relative;
}
.brandmark-fire.--sm{font-size:clamp(34px,4vw,60px)}
.brandmark-fire.--xl{font-size:clamp(72px,10vw,160px)}
.brandmark-fire::after{
  content:""; position:absolute; inset:-8px -12px; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 50%, rgba(255,140,40,.12), rgba(212,58,0,.10) 60%, transparent 72%);
  filter: blur(16px); animation: heatPulse 5.5s ease-in-out infinite alternate;
}
@keyframes heatPulse{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-3px) scale(1.02)}}

/* Botones */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04); color:var(--txt); font-weight:700; transition:.18s ease;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25)}
.btn.primary{border-color:rgba(255,182,72,.6);box-shadow:0 0 20px rgba(255,182,72,.22)}

/* ===================== Footer ===================== */
.site-footer{padding:24px 0;text-align:center;color:#bda58a;border-top:1px solid var(--line)}

/* ===================== LIVE banner ===================== */
.live-banner{background:linear-gradient(90deg,#ff3b3b,#ff8a8a);text-align:center;border-bottom:1px solid rgba(0,0,0,.35)}
.live-link{display:inline-block;padding:8px 14px;color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ===================== Social (hero) ===================== */
.social-row{ margin-top:16px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.social{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.25); box-shadow: 0 0 16px rgba(255,182,72,.18); }
.social svg {
  width:22px; height:22px;
  fill:#fff;
  transition: fill .2s ease, transform .2s ease;
}
.social:hover svg {
  fill:#ffb648;
  transform: scale(1.1);
}

/* ===================== Hamburguesa (solo móvil) ===================== */
.hamburger{
  display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04); border-radius:10px; cursor:pointer;
  align-items:center; justify-content:center; gap:5px;
}
.hamburger span{display:block; width:22px; height:2px; background:#ffb648; transition:.2s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===================== Drawer (menú móvil) ===================== */
.drawer{ position:fixed; inset:0; z-index:80; pointer-events:none; }
.drawer-inner{
  position:absolute; top:0; left:0; height:100%; width:280px;
  background:rgba(10,0,0,.97); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .25s ease;
  box-shadow: 8px 0 30px rgba(0,0,0,.5);
}
.drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s ease; }
.drawer.show{ pointer-events:auto; }
.drawer.show .drawer-inner{ transform:translateX(0); }
.drawer.show .drawer-backdrop{ opacity:1; }

.drawer-close{
  position:absolute; top:8px; right:8px; width:36px; height:36px;
  border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.drawer nav ul{ list-style:none; padding:56px 0 12px; margin:0; }
.drawer nav li{ border-bottom:1px solid rgba(255,255,255,.08); }
.drawer nav a{ display:block; padding:14px 18px; color:var(--txt); font-weight:700 }

/* ===================== Toast de agradecimiento ===================== */
.toast{
  position:fixed; left:0; right:0; bottom:18px; z-index:120;
  display:flex; justify-content:center; pointer-events:none;
}
.toast-msg{
  pointer-events:auto;
  padding:12px 16px; border-radius:12px;
  background:rgba(20,0,0,.92);
  border:1px solid rgba(255,182,72,.55);
  color:#f4efe7; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,182,72,.18);
  backdrop-filter: blur(6px);
  transition: transform .35s ease, opacity .35s ease;
}
.toast.hide{ transform: translateY(14px); opacity: 0; }

/* ===================== Mini-barra “Reproduciendo” ===================== */
.npbar{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  transform: translateY(110%); transition: transform .25s ease;
  pointer-events:none;
}
.npbar.show{ transform: translateY(0); }
.npbar-inner{
  margin:0 auto 10px auto; width:min(720px,94%);
  background:rgba(20,0,0,.92);
  border:1px solid rgba(255,182,72,.45);
  border-radius:12px;
  color:#f4efe7; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,182,72,.12);
  pointer-events:auto;
}
.np-btn{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:#fff; font-weight:700;
}
#npTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* ===================== Responsive ===================== */
/* MÓVIL: logo centrado en header + hamburguesa a la derecha */
@media (max-width:768px){
  .desktop-nav{display:none}
  .nav{justify-content:center}
  .header-logo{ margin:0 auto }           /* centra el logo en el header */
  .hamburger{display:flex; position:absolute; right:0; top:50%; transform:translateY(-50%);}

  .hero{ background-attachment:scroll; background-position:center top; background-size:cover; min-height:100dvh; }
  .hero-content{text-align:center}
  .brandmark-fire.--xl{font-size:clamp(46px,12vw,86px)}
  .hero-sub{font-size:1rem; margin-bottom:12px}
  .cta{flex-direction:column; gap:10px}
  .btn{width:100%; padding:14px 0; font-size:1rem}
  .social-row{gap:10px}

  body.no-scroll{overflow:hidden}
  .site-footer{padding:16px 0}
  .toast{ bottom:14px }
  .toast-msg{ font-size:0.95rem }
}

/* ESCRITORIO: logo a la izquierda + menú visible + SIN hamburguesa */
@media (min-width:769px){
  .nav{justify-content:space-between}
  .hamburger{display:none}
  .hero{min-height:88vh}
}

/* ======= Parche de compatibilidad con index.php ======= */

/* 1) Drawer: soportar atributo aria-hidden del HTML actual */
.drawer[aria-hidden="false"] { pointer-events: auto; }
.drawer[aria-hidden="false"] .drawer-inner { transform: translateX(0); }
.drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }
/* (seguimos soportando .drawer.show para compatibilidad con otras páginas) */

/* 2) Now Playing bar: soportar .active además de .show */
.npbar { transform: translateY(110%); transition: transform .25s ease; pointer-events: none; }
.npbar.show, .npbar.active { transform: translateY(0); }
.npbar.show .npbar-inner, .npbar.active .npbar-inner { pointer-events: auto; }

/* 3) Accesibilidad: helper para contenido solo para lectores de pantalla */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip: rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* 4) (Opcional) Respetar 'reduced motion' también en el brillo del título */
@media (prefers-reduced-motion: reduce){
  .brandmark-fire::after { animation: none; }
}

/* ===== Overlay de permiso de audio (iOS) ===== */
.audio-gate{
  position:absolute; inset:0; z-index:5;
  display:grid; place-items:center;
  background: rgba(0,0,0,.65);
  border:0; cursor:pointer;
}
.audio-gate .gate-text{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(255,182,72,.55);
  background: rgba(20,0,0,.92);
  color:#f4efe7; font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,182,72,.18);
}
.audio-gate.hide{ opacity:0; pointer-events:none; transition:opacity .25s ease; }