:root{
  --red:#c62828;
  --red-dark:#8e1f1f;
  --gold:#ffcc33;
  --amber:#ffb300;
  --black:#0b0b0c;
  --glow:0 0 28px rgba(255,204,51,.35),0 0 60px rgba(198,40,40,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:#fff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Poppins,Arial;
  background: radial-gradient(1200px 700px at 50% -10%, #2a0f0f 0%, #0b0b0c 60%) fixed;
  overflow:hidden;
}
.app{height:100%; display:grid; grid-template-rows:1fr auto}

/* ===== Views ===== */
main{position:relative; overflow:hidden}
.view{position:absolute; inset:0; display:none}
.view.active{display:grid; grid-template-rows:1fr auto auto; align-content:center}

/* ===== Player vertical 4:5 ===== */
.player-wrap{display:grid; place-items:center; padding: clamp(10px,2vw,16px)}
.portrait-player{
  aspect-ratio:4/5; width:min(92vw, 420px);
  position:relative; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(255,204,51,.08), rgba(255,0,0,.05) 40%, rgba(0,0,0,.6) 65%),
    linear-gradient(180deg, #160707, #0b0b0c 70%);
  box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset, var(--glow);
}

/* Logo + destello */
.logo-wrap{
  position:absolute;
  top:10%; left:50%;
  transform:translateX(-50%);
  width:68%; aspect-ratio:1/1;
  display:grid; place-items:center;
  z-index:2;
}
.logo-mark{
  width:100%; height:auto;
  border-radius:50%;
  position:relative;
  z-index:2;
}
.logo-glow{
  position:absolute; inset:-6px;
  border-radius:50%;
  border:4px solid transparent;
  background:conic-gradient(from 0deg,
    rgba(255,204,51,.8),
    rgba(255,102,0,.4),
    rgba(255,204,51,.8));
  -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 2px));
  mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 2px));
  animation: rotateGlow 6s linear infinite;
  z-index:1;
}
@keyframes rotateGlow{
  to{ transform:rotate(360deg); }
}

/* Visualizador */
#viz{
  position:absolute;
  left:0;
  right:0;
  bottom:22%;
  width:100%;
  height:32%;
  filter: drop-shadow(0 0 10px rgba(255,204,51,.45));
  z-index:3;
}

.crowd{
  position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax slice"><path d="M0,250 C150,210 250,280 400,240 C550,200 650,280 800,240 C950,200 1050,270 1200,230 L1200,300 L0,300 Z" fill="%23000000" opacity="0.65"/></svg>') center bottom/cover no-repeat,
    radial-gradient(60% 100% at 50% 100%, rgba(0,0,0,.75), transparent 70%);
  filter: drop-shadow(0 -6px 24px rgba(255,204,51,.08));
  z-index:4;
}

.pp{
  position:absolute; left:50%; top:76%; transform:translate(-50%,-50%);
  width:min(22vw,105px); height:min(22vw,105px); border-radius:50%; border:none; cursor:pointer;
  background: radial-gradient(circle at 30% 30%, #fff6cc, #ffc233 38%, #ff8f00 70%, #c62828 100%);
  box-shadow: 0 8px 0 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.35), 0 0 40px rgba(255,204,51,.55);
  z-index:5;
}
.pp:active{ transform:translate(-50%,-50%) scale(.98) }
.slogan{position:absolute; left:0; right:0; bottom:8%; text-align:center; color:var(--gold); font-weight:900; letter-spacing:.3px; z-index:5}

/* ===== Slider ===== */
.slider{position:relative; display:grid; place-items:center; height:62vh}
.slide{width:min(92vw, 520px); max-height:70vh; display:grid; place-items:center}
.slide img{width:100%; height:auto; border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.5)}
.caption{margin:8px auto 0; text-align:center; font-size:12px; color:#ffd88a}
.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color:#fff; font-size:24px; cursor:pointer; box-shadow: var(--glow);
}
.nav-btn.left{left:6px} .nav-btn.right{right:6px}
.back-btn{justify-self:center; margin:8px 0 6px; padding:.5rem 1rem; border:none; border-radius:999px; background:var(--gold); color:#2b0a0a; font-weight:900; box-shadow: var(--glow); cursor:pointer}

/* ===== Mini player ===== */
.mini-player{
  width:min(560px,92vw); margin:8px auto 10px; padding:8px 10px; border-radius:999px;
  display:flex; align-items:center; gap:10px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.15); box-shadow: var(--glow);
}
.mini-pp{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 35% 25%, #fff6cc, #ffd54f 40%, #ff8f00 70%, #8e1f1f 100%);
  color:#2b0a0a; font-weight:900; cursor:pointer;
}
.mini-track{font-size:12px; color:#ffd88a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-viz{height:18px; flex:1}

/* ===== Contacto ===== */
.card{
  width:min(560px,92vw); margin: 10px auto 6px; padding:14px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); box-shadow: var(--glow);
}
.card h3{margin:0 0 8px; color:var(--gold); text-align:center}
#contactForm input,#contactForm textarea{
  width:100%; margin-top:8px; padding:12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.35); color:#fff;
}
.form-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.form-actions .chip{flex:1; text-align:center}

/* ===== Footer ===== */
footer{
  padding: 8px 10px 12px; display:grid; gap:6px; place-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  border-top:1px solid rgba(255,255,255,.08);
}
.socials{display:flex; gap:12px}
.sbtn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.15); color:#fff; text-decoration:none; font-weight:900;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: var(--glow);
}
.sbtn.unified{color:#fff; background:linear-gradient(180deg,#222,#444,#111)}
.copy{font-size:11px; color:#ffd88a; opacity:.9}

/* ===== FAB (WhatsApp) ===== */
.fab{position:fixed; right:16px; bottom:16px; z-index:40}
.fab button{
  width:74px; height:74px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 35% 25%, #fff6cc, #ffd54f 40%, #ff8f00 70%, #8e1f1f 100%);
  color:#2b0a0a; cursor:pointer; position:relative; z-index:2;
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 36px rgba(255,204,51,.5);
}
.fab svg{width:70%; height:70%}
.pulse{position:absolute; inset:0; border-radius:999px; filter:blur(6px);
  background: radial-gradient(circle, rgba(255,204,51,.35), rgba(198,40,40,.0) 70%);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.92); opacity:.9} 50%{transform:scale(1.05); opacity:.65}}

.sheet{
  position:fixed; right:12px; bottom:96px; width:220px; display:none; z-index:45;
  background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.7));
  border:1px solid rgba(255,255,255,.15); border-radius:16px; box-shadow: var(--glow); padding:10px;
}
.sheet.open{display:block}
.sheet a{display:block; color:#fff; padding:10px 12px; border-radius:12px; text-decoration:none; margin:6px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
}

/* ===== Unlock overlay ===== */
.unlock{position:absolute; inset:0; display:none; place-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.75))}

/* ===== Responsive ===== */
@media (max-width:380px){
  .brand-title{font-size:18px}
  .nav-btn{width:40px; height:40px; font-size:20px}
}

/* ===== Menú hamburguesa ===== */
.menu-btn{
  position:fixed; top:14px; left:14px; z-index:50;
  width:46px; height:46px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--gold), var(--amber));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: var(--glow);
}
.menu-icon, .menu-icon::before, .menu-icon::after{
  content:""; display:block; background:#2b0a0a;
  width:20px; height:3px; border-radius:2px;
  position:relative;
}
.menu-icon::before{position:absolute; top:-7px}
.menu-icon::after{position:absolute; top:7px}

.side-menu{
  position:fixed; top:0; left:-260px; width:240px; height:100%;
  background:linear-gradient(180deg,#111,#222); color:#fff;
  display:flex; flex-direction:column; padding:20px; z-index:60;
  box-shadow:2px 0 10px rgba(0,0,0,.6); transition:left .3s ease;
}
.side-menu.open{left:0}
.side-menu nav{flex:1; display:flex; flex-direction:column; gap:16px; margin-top:40px}
.side-menu nav a{color:var(--gold); text-decoration:none; font-weight:bold}
.close-btn{
  align-self:flex-end; background:none; border:none; color:#fff;
  font-size:28px; cursor:pointer;
}
.side-footer{font-size:11px; color:#aaa; text-align:center; margin-top:auto}

/* ===== Overlays (Galería / Privacidad) ===== */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; flex-direction:column; align-items:center;
  padding:20px; overflow:auto; z-index:70;
}
.overlay.active{display:flex}
.close-overlay{
  align-self:flex-end; background:none; border:none; color:#fff;
  font-size:32px; cursor:pointer; margin-bottom:10px;
}
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px; width:100%; max-width:960px;
}
.gallery-grid img{
  width:100%; height:auto; border-radius:12px; box-shadow: var(--glow);
}
.privacy-box{
  max-width:600px; background:#111; padding:20px; border-radius:16px;
  box-shadow: var(--glow); color:#fff;
}

/* ===== Enlaces personalizados ===== */
.privacy-link {
  color: var(--gold);
  text-decoration: underline;
  font-weight: bold;
}
.privacy-link:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--gold);
}

.donbeltran-link {
  color: var(--gold);
  text-decoration: underline;
  font-weight: bold;
}
.donbeltran-link:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--gold), 0 0 16px rgba(255, 204, 51, 0.8);
}
#installBubble {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffcc33, #c62828);
  color: #fff;
  padding: 14px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  font-family: Poppins, sans-serif;
}

#installBubble .install-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

#installBtn {
  background: #fff;
  color: #c62828;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: bold;
  cursor: pointer;
}

#closeInstall {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
#iosInstallBubble {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffcc33, #c62828);
  color: #fff;
  padding: 14px 18px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 9999;
  font-family: Poppins, sans-serif;
  max-width: 90%;
  animation: fadeIn 0.6s ease;
}
#iosInstallBubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
#iosInstallBubble #closeIosInstall {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin-left: 12px;
}
@keyframes fadeIn {
  from {opacity:0; transform:translate(-50%, 20px);}
  to {opacity:1; transform:translate(-50%,0);}
}