:root{
  --bg:#0e0e10;
  --panel:#17171a;
  --panel2:#1f1f23;
  --line:#2a2a2f;
  --text:#f2f1ec;
  --text-dim:#9a9a9f;
  --accent:#e0472c;
  --font-display:'Sora', sans-serif;
  --font-hero:'Fugaz One', 'Sora', sans-serif;
  --font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:'JetBrains Mono', "Courier New", monospace;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);}

/* ---------- Landing comercial (home de radiosfm.app) ---------- */
.landing-brand-text{font-family:var(--font-hero);font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:0.3px;}
.landing-brand-text em{font-style:normal;color:var(--accent-color,var(--accent));}
.landing-wrap{max-width:900px;margin:0 auto;padding:0 20px;}
.landing-hero{text-align:center;padding:64px 0 40px;}
.landing-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);color:#d8d1ec;font-size:12px;font-weight:600;padding:6px 14px;
  border-radius:100px;margin-bottom:22px;}
.landing-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent-color,var(--accent));display:inline-block;}
.landing-title{font-family:var(--font-hero);font-size:clamp(30px,6vw,52px);text-transform:uppercase;
  line-height:1.15;margin:0 0 18px;background:linear-gradient(180deg,#fff,#d8d8d8);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.landing-subtitle{max-width:560px;margin:0 auto 30px;color:#c9c9c9;font-size:15px;line-height:1.65;}
.landing-cta-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.landing-demo-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--text-dim);
  font-size:12.5px;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,0.25);padding-bottom:2px;}
.landing-demo-link:hover{color:#fff;border-color:#fff;}

.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px 0 50px;}
.feature-card{background:rgba(20,20,23,0.6);border:1px solid rgba(255,255,255,0.07);border-radius:16px;
  padding:22px 18px;}
.feature-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,0,111,0.12);
  color:var(--accent-color,var(--accent));display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.feature-card h3{font-family:var(--font-display);font-weight:700;font-size:14.5px;margin:0 0 6px;color:#fff;}
.feature-card p{font-size:12.5px;color:var(--text-dim);line-height:1.55;margin:0;}

.landing-steps{padding:20px 0 56px;}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px;}
.step{text-align:center;}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--accent-color,var(--accent));color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:15px;margin-bottom:12px;}
.step h3{font-family:var(--font-display);font-weight:700;font-size:14.5px;margin:0 0 6px;color:#fff;}
.step p{font-size:12.5px;color:var(--text-dim);line-height:1.55;margin:0;max-width:220px;margin:0 auto;}

.landing-final-cta{text-align:center;padding:40px 24px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);border-radius:20px;margin-bottom:32px;}
.landing-final-cta h2{font-family:var(--font-hero);text-transform:uppercase;font-size:22px;color:#fff;margin:0 0 18px;}

@media (max-width:900px){
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .steps-grid{grid-template-columns:1fr;gap:28px;}
  .pricing-grid{grid-template-columns:1fr;}
  .dual-cta-grid{grid-template-columns:1fr;}
}

/* ---------- Buscador de dominio ilustrativo ---------- */
.domain-check-section{text-align:center;padding:20px 0 56px;}
.domain-check-form{display:flex;max-width:460px;margin:0 auto;background:rgba(20,20,23,0.6);
  border:1px solid rgba(255,255,255,0.1);border-radius:100px;padding:5px 5px 5px 20px;align-items:center;gap:6px;}
.domain-check-form input{flex:1;background:transparent;border:none;color:#fff;font-size:14px;padding:8px 0;
  min-width:0;}
.domain-check-form input:focus{outline:none;}
.domain-check-suffix{color:var(--text-dim);font-size:13px;white-space:nowrap;}
.domain-check-form .btn{border-radius:100px;padding:10px 20px;white-space:nowrap;}
.domain-result{display:flex;align-items:center;gap:10px;max-width:460px;margin:16px auto 0;
  background:rgba(99,153,34,0.12);border:1px solid rgba(99,153,34,0.35);color:#9fd97a;
  padding:12px 16px;border-radius:14px;font-size:13.5px;flex-wrap:wrap;justify-content:center;}
.domain-result strong{color:#fff;}
.domain-result .btn{margin-left:auto;flex-shrink:0;}
.domain-check-note{font-size:11px;color:var(--text-dim);margin-top:12px;}

/* ---------- Planes de precios ---------- */
.pricing-section{padding:20px 0 56px;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
.pricing-card{background:rgba(20,20,23,0.6);border:1px solid rgba(255,255,255,0.08);border-top:2px solid var(--accent-color,var(--accent));
  border-radius:16px;padding:22px 18px;display:flex;flex-direction:column;}
.pricing-card h3{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0 0 10px;color:#fff;}
.pricing-price{font-size:13px;color:var(--text-dim);margin-bottom:16px;}
.pricing-price s{opacity:0.6;}
.pricing-price strong{color:#fff;font-size:20px;font-family:var(--font-display);}
.pricing-features{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;flex:1;}
.pricing-features li{font-size:12px;color:#c9c9c9;padding-left:20px;position:relative;}
.pricing-features li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--accent-color,var(--accent));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat;}
.pricing-annual{font-size:11px;color:var(--text-dim);font-style:italic;margin-bottom:14px;}
.pricing-btn{width:100%;text-align:center;justify-content:center;}

/* ---------- Doble llamado a la acción ---------- */
.dual-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 56px;}
.dual-cta-card{background:rgba(20,20,23,0.6);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:26px 22px;}
.dual-cta-card h3{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 8px;color:#fff;}
.dual-cta-card p{font-size:13px;color:var(--text-dim);line-height:1.55;margin:0 0 18px;}

.landing-more-info{text-align:center;font-size:12.5px;color:var(--text-dim);padding-bottom:32px;}
.landing-more-info a{color:#fff;text-decoration:underline;}

/* ---------- FAQ ---------- */
.faq-section{padding:20px 0 56px;max-width:700px;margin:0 auto;}
.faq-item{border-bottom:1px solid rgba(255,255,255,0.08);padding:16px 4px;}
.faq-item summary{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:20px;color:var(--accent-color,var(--accent));flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{font-size:13px;color:var(--text-dim);margin:10px 0 0;line-height:1.6;}

/* ---------- Menú superior ---------- */
.player-page{margin:0;}
.topnav{position:sticky;top:0;z-index:5;background:rgba(9,9,10,0.78);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.07);}
.topnav-inner{max-width:760px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;}
.topnav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topnav-brand img{width:34px;height:34px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,0.07);padding:3px;}
.topnav-logo-fallback{width:28px;height:28px;border-radius:8px;background:var(--panel2);}
.topnav-links{display:flex;gap:22px;flex-shrink:0;}
.topnav-links a{position:relative;color:var(--text-dim);text-decoration:none;font-family:var(--font-hero);
  font-size:13px;text-transform:uppercase;letter-spacing:0.5px;transition:color 0.15s;padding-bottom:3px;}
.topnav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent-color,var(--accent));transition:right 0.2s ease;}
.topnav-links a:hover{color:#fff;}
.topnav-links a:hover::after{right:0;}

.topnav-clock{display:none;align-items:center;gap:8px;background:#fff;color:#141416;border-radius:100px;
  padding:6px 16px 6px 8px;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.topnav-clock::before{content:"";width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--accent-color,var(--accent));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center/60% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center/60% no-repeat;}
.topnav-clock .clock-date{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:0.3px;color:#555;display:block;line-height:1.2;}
.topnav-clock .clock-time{font-family:var(--font-display);font-weight:800;font-size:13px;display:block;line-height:1.2;}
@media (min-width:640px){.topnav-clock{display:flex;}}

/* ---------- Fondo y contenedor ---------- */
.player-bg{position:relative;min-height:100vh;background-size:cover;background-position:center;background-attachment:fixed;
  background-color:#141416;font-family:var(--font-body);}
.player-bg::before{content:"";position:fixed;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(6,6,7,0.6) 0%, rgba(8,8,9,0.8) 30%, rgba(8,8,9,0.95) 100%),
    radial-gradient(circle at 50% 0%, rgba(30,30,34,0.25), rgba(6,6,7,0.5) 55%);}
.player-inner{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:48px 20px 40px;
  display:flex;flex-direction:column;gap:24px;}

/* ---------- Hero ---------- */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.hero-logo{width:clamp(160px,32vw,260px);height:clamp(160px,32vw,260px);border-radius:22px;object-fit:contain;
  background:rgba(255,255,255,0.06);padding:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 34px rgba(0,0,0,0.45);}
.hero-title{font-family:var(--font-hero);font-size:26px;text-transform:uppercase;letter-spacing:0.5px;
  margin:0;line-height:1.1;background:linear-gradient(180deg,#fff, #d8d8d8);-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:0 2px 30px rgba(0,0,0,0.4);}
.hero-slogan{margin:0;font-size:13.5px;color:var(--text-dim);letter-spacing:0.3px;}
.player-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  color:#ff5c4d;margin-top:8px;letter-spacing:0.5px;}
.player-live i{width:7px;height:7px;border-radius:50%;background:#ff5c4d;display:inline-block;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

/* ---------- Tarjeta del player (horizontal, con identidad de radio) ---------- */
.player-card{position:relative;overflow:hidden;background:rgba(18,18,21,0.7);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.08);border-radius:24px;
  padding:22px 26px;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
.player-card-bg{position:absolute;inset:-40%;z-index:0;
  background:conic-gradient(from 0deg, var(--accent-color,var(--accent)), transparent 30%, transparent 70%, var(--accent-color,var(--accent)));
  opacity:0.16;filter:blur(40px);animation:spin 14s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.player-card-main{position:relative;z-index:1;display:flex;align-items:center;gap:20px;}
.np-art{position:relative;z-index:1;width:110px;height:110px;border-radius:16px;object-fit:cover;flex-shrink:0;
  margin-left:auto;box-shadow:0 10px 30px rgba(0,0,0,0.4);}

.live-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:100px;
  padding:6px 14px 6px 10px;font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:16px;}
.live-badge i{width:8px;height:8px;border-radius:50%;background:#666;flex-shrink:0;display:inline-block;}
.live-badge.is-live{color:#fff;}
.live-badge.is-live i{background:#ff3b3b;animation:live-blink 1.3s ease-in-out infinite;}
@keyframes live-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,59,59,0.55);}
  50%{opacity:0.55;box-shadow:0 0 0 6px rgba(255,59,59,0);}
}
.play-btn{width:60px;height:60px;flex-shrink:0;border-radius:50%;border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--accent-color,var(--accent));
  animation:glow 2.4s ease-in-out infinite;transition:transform 0.15s ease;}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 0 rgba(224,71,44,0.35), 0 8px 20px rgba(0,0,0,0.4);}
  50%{box-shadow:0 0 0 12px rgba(224,71,44,0), 0 8px 20px rgba(0,0,0,0.4);}
}
.play-btn:hover{transform:scale(1.05);}
.play-btn:active{transform:scale(0.96);}

.player-card-info{flex:1;min-width:0;text-align:left;}
.np-label{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;}
.np-title{font-family:var(--font-mono);font-size:15px;font-weight:500;min-height:19px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-overflow:ellipsis;line-height:1.25;word-break:break-word;}
.np-artist{font-size:12.5px;color:var(--text-dim);margin-top:1px;min-height:15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.np-row{display:flex;align-items:center;gap:12px;margin-top:8px;}
.np-sub{font-size:11px;color:var(--text-dim);}
.np-timer{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}

.eq{display:flex;align-items:flex-end;gap:3px;height:14px;opacity:0.25;}
.eq span{width:3px;border-radius:2px;height:5px;background:var(--accent-color,var(--accent));transition:opacity 0.2s;}
.eq.on{opacity:1;}
.eq.on span{animation:eqbar 0.9s ease-in-out infinite;}
.eq span:nth-child(1){animation-delay:0s;}
.eq span:nth-child(2){animation-delay:0.15s;}
.eq span:nth-child(3){animation-delay:0.3s;}
.eq span:nth-child(4){animation-delay:0.45s;}
@keyframes eqbar{0%,100%{height:4px;}50%{height:14px;}}

/* Mensaje dentro de la tarjeta del reproductor (en vez de un alert() feo del
   navegador) cuando el stream no conecta o la radio no tiene URL cargada. */
.player-error{position:relative;z-index:1;margin-top:16px;padding:10px 14px;border-radius:10px;
  background:rgba(255,92,77,0.12);border:1px solid rgba(255,92,77,0.3);
  color:#ff9a8c;font-size:12.5px;line-height:1.45;}
body.theme-claro .player-error{background:rgba(224,71,44,0.08);border:1px solid rgba(224,71,44,0.22);color:#b23a1f;}

/* ---------- Historial (grid con carátulas) ---------- */
.history-card{background:rgba(15,15,17,0.65);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;padding:22px;}
.section-label{font-family:var(--font-hero);font-size:15px;text-transform:uppercase;letter-spacing:0.5px;
  color:#fff;margin:0 0 16px;}
.history-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.history-item{display:flex;flex-direction:column;gap:6px;}
.history-item img{width:100%;aspect-ratio:1/1;border-radius:10px;object-fit:cover;background:var(--panel2);
  box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.history-item img.no-art{background:var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center/40% no-repeat;}
.history-item img.fallback-logo, .np-art.fallback-logo{object-fit:contain;background:var(--panel2);padding:5%;box-sizing:border-box;}
.history-item span{font-size:10.5px;color:var(--text-dim);line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- Nosotros ---------- */
.about-card{background:rgba(15,15,17,0.65);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;padding:26px 24px;}
.about-card h2{font-family:var(--font-hero);text-transform:uppercase;letter-spacing:0.5px;font-size:20px;color:#fff;margin:0 0 12px;}
.about-card p{font-size:13.5px;color:#c9c9c9;line-height:1.65;margin:0 0 16px;}
.contact-info{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;}
.contact-info li{display:flex;align-items:center;gap:9px;font-size:13px;color:#c9c9c9;}
.contact-info li svg{flex-shrink:0;color:var(--accent-color,var(--accent));}
.contact-info a{color:#c9c9c9;text-decoration:none;}
.contact-info a:hover{color:#fff;}
.socials{display:flex;gap:10px;}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
  transition:background 0.15s, transform 0.15s;}
.socials a:hover{background:var(--accent-color,var(--accent));transform:translateY(-2px);}

.wa-float{position:fixed;bottom:22px;right:22px;z-index:2;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;
  text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.4);transition:bottom 0.25s ease;}

/* ---------- Reproductor mini (franja de canto a canto) ----------
   Aparece fija abajo SOLO cuando el reproductor principal sale de la
   vista al bajar, y se oculta apenas vuelve a verse al subir. */
.mini-player{position:fixed;left:0;right:0;bottom:0;z-index:7;
  background:rgba(10,10,11,0.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,0.08);box-shadow:0 -8px 24px rgba(0,0,0,0.35);
  transform:translateY(100%);transition:transform 0.28s ease;}
.mini-player.visible{transform:translateY(0);}
.mini-player-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
.mini-player-btn{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--accent-color,var(--accent));}
.mini-player-art{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--panel2);}
.mini-player-art.fallback-logo{object-fit:contain;padding:3px;box-sizing:border-box;}
.mini-player-info{flex:1;min-width:0;text-align:left;}
.mini-player-title{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-player-sub{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-player-eq{display:flex;align-items:flex-end;gap:2px;height:12px;flex-shrink:0;opacity:0.25;}
.mini-player-eq span{width:2.5px;border-radius:2px;height:4px;background:var(--accent-color,var(--accent));}
.mini-player-eq.on{opacity:1;}
.mini-player-eq.on span{animation:eqbar 0.9s ease-in-out infinite;}
.mini-player-eq span:nth-child(1){animation-delay:0s;}
.mini-player-eq span:nth-child(2){animation-delay:0.15s;}
.mini-player-eq span:nth-child(3){animation-delay:0.3s;}
.mini-player-eq span:nth-child(4){animation-delay:0.45s;}
body.theme-claro .mini-player{background:rgba(255,255,255,0.9);border-top:1px solid rgba(0,0,0,0.08);}
body.theme-claro .mini-player-title{color:#1c1c1e;}
/* Cuando la franja mini está visible, subimos el botón de WhatsApp para que no se tapen */
body.mini-player-visible .wa-float{bottom:78px;}
/* ...y reservamos su altura al final de la página para que la franja NUNCA
   tape el crédito/publicidad del pie (promo-bar) al llegar hasta abajo. */
.player-bg{transition:padding-bottom 0.28s ease;}
body.mini-player-visible .player-bg{padding-bottom:60px;}
@media (max-width:480px){
  body.mini-player-visible .player-bg{padding-bottom:64px;}
}

/* ---------- Botones de apps + instalar PWA (mismo estilo, en fila) ---------- */
.app-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.app-btn{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:9px 14px;color:#fff;text-decoration:none;
  font-family:inherit;cursor:pointer;transition:background 0.15s, border-color 0.15s;}
.app-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
.app-btn span{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;line-height:1.2;text-align:left;}
.app-btn span small{font-size:9px;color:var(--text-dim);font-weight:400;text-transform:uppercase;letter-spacing:0.3px;}

/* ---------- Publicidad ---------- */
.ad-slot{display:flex;justify-content:center;}
.ad-slot a{display:block;}
.ad-img{display:block;width:100%;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.ad-horizontal{display:block;}
.ad-square{display:none;max-width:280px;margin:0 auto;}
@media (max-width:600px){
  .ad-horizontal{display:none;}
  .ad-square{display:block;}
}

/* ---------- Franja de publicidad propia (crédito + oferta, ancho completo) ---------- */
.promo-bar{position:relative;z-index:1;width:100%;background:linear-gradient(90deg, #150a28, #251142 60%, #1a0c30);
  border-top:1px solid rgba(255,255,255,0.08);padding:14px 20px;margin-top:8px;}
.promo-bar-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;}
.promo-live{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:0.5px;padding:5px 10px;border-radius:100px;flex-shrink:0;}
.promo-live i{width:6px;height:6px;border-radius:50%;background:#ff4d4d;display:inline-block;animation:pulse 1.6s infinite;}
.promo-text{font-size:12.5px;color:#d8d1ec;}
.promo-text strong{color:#fff;}
.promo-price{font-size:12.5px;color:#b9adda;white-space:nowrap;}
.promo-price strong{color:#fff;font-size:16px;font-family:var(--font-display);}
.promo-btn{background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff;font-weight:700;font-size:12.5px;
  padding:9px 20px;border-radius:100px;text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 16px rgba(124,58,237,0.45);transition:transform 0.15s;}
.promo-btn:hover{transform:scale(1.05);}
@media (max-width:560px){
  .promo-bar-inner{justify-content:flex-start;text-align:left;}
  .promo-text{width:100%;order:1;}
  .promo-live{order:0;}
  .promo-price{order:2;}
  .promo-btn{order:3;}
}

/* ---------- Modal de contacto ---------- */
.contact-modal{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,0.6);display:none;
  align-items:center;justify-content:center;padding:20px;}
.contact-modal.open{display:flex;}
.contact-modal-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;max-width:340px;width:100%;text-align:center;position:relative;}
.contact-modal-card h3{font-family:var(--font-display);font-size:17px;margin:0 0 8px;}
.contact-modal-card p{font-size:13px;color:var(--text-dim);margin:0 0 20px;}
.contact-close{position:absolute;top:14px;right:14px;background:transparent;border:none;color:var(--text-dim);
  font-size:15px;cursor:pointer;}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;
  padding:12px 22px;border-radius:100px;font-size:13.5px;font-weight:700;}
.hint-muted{color:var(--text-dim);font-size:12.5px;}

/* ---------- Panel admin ---------- */
.wrap{max-width:900px;margin:0 auto;padding:24px 20px 64px;}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--accent);display:flex;
  align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:16px;color:#fff;}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:15px;}
.brand-name span{color:var(--accent);}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:16px;}
.card h2{font-size:14px;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-dim);margin:0 0 18px;font-weight:700;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;font-weight:600;}
.field input,.field textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:8px;font-size:13.5px;font-family:var(--font-body);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:70px;}
.field .hint{font-size:11.5px;color:var(--text-dim);margin-top:5px;}
.field input[type=color]{height:40px;padding:4px;cursor:pointer;}
.field input[type=file]{padding:8px;font-size:12.5px;}
.thumb-preview{margin-top:8px;max-width:120px;max-height:80px;border-radius:6px;border:1px solid var(--line);display:block;}
.btn{background:var(--accent-color,var(--accent));color:#fff;border:none;padding:13px 26px;border-radius:11px;
  font-size:14.5px;font-weight:800;cursor:pointer;font-family:var(--font-body);text-decoration:none;
  display:inline-block;letter-spacing:0.2px;box-shadow:0 8px 20px rgba(0,0,0,0.3);
  transition:transform 0.15s ease, box-shadow 0.15s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,0.4);}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn.danger{background:#c0392b;}
.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:11.5px;text-transform:uppercase;color:var(--text-dim);
  padding:8px 10px;border-bottom:1px solid var(--line);}
.table td{padding:10px;border-bottom:1px solid var(--line);font-size:13.5px;}
.table tr:hover{background:var(--panel2);}
.row-actions{display:flex;gap:8px;}
.msg{padding:12px 16px;border-radius:8px;font-size:13.5px;margin-bottom:16px;}
.msg.ok{background:#123324;color:#4fce7e;border:1px solid #1f5c3e;}
.msg.error{background:#3a1414;color:#ff8080;border:1px solid #5c1f1f;}
.login-box{max-width:360px;margin:100px auto;}

@media (max-width:480px){
  .player-card{padding:20px;}
  .player-card-main{gap:14px;}
  .np-art{width:76px;height:76px;border-radius:12px;}
  .play-btn{width:52px;height:52px;}
  .live-badge{font-size:10px;padding:5px 12px 5px 9px;margin-bottom:12px;}
  .hero-title{font-size:22px;}
  .topnav-links{gap:14px;}
  .topnav-links a{font-size:12px;}
  .history-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:360px){
  .np-title,.np-artist{max-width:150px;}
}

/* ============================================
   MODO CLARO — se activa con body.theme-claro
   (el cliente lo elige desde su panel: Identidad → Estilo de tu web)
   Mismo diseño, pero pensado para fondos claros: overlay tenue
   en vez de oscuro casi negro, y textos oscuros en vez de blancos.
   ============================================ */
body.theme-claro{--text:#1c1c1e;--text-dim:#6b6b70;}

body.theme-claro .player-bg::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.68) 30%, rgba(255,255,255,0.82) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.2), rgba(255,255,255,0.45) 55%);
}

body.theme-claro .topnav{background:rgba(255,255,255,0.82);border-bottom:1px solid rgba(0,0,0,0.06);}
body.theme-claro .topnav-links a{color:#4a4a4f;}
body.theme-claro .topnav-links a:hover{color:#000;}
body.theme-claro .topnav-brand img{background:rgba(0,0,0,0.05);}

body.theme-claro .hero-logo{background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 12px 34px rgba(0,0,0,0.12);}
body.theme-claro .hero-title{background:linear-gradient(180deg,#1c1c1e,#45454a);-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:0 2px 20px rgba(255,255,255,0.5);}

body.theme-claro .player-card{background:rgba(255,255,255,0.72);border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 20px 50px rgba(0,0,0,0.1);}
body.theme-claro .np-art{box-shadow:0 8px 20px rgba(0,0,0,0.15);}
body.theme-claro .live-badge{background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.08);color:#5a5a5e;}
body.theme-claro .live-badge.is-live{color:#1c1c1e;}

body.theme-claro .history-card,
body.theme-claro .about-card{background:rgba(255,255,255,0.72);border:1px solid rgba(0,0,0,0.08);}
body.theme-claro .section-label,
body.theme-claro .about-card h2{color:#1c1c1e;}
body.theme-claro .about-card p{color:#3a3a3e;}
body.theme-claro .history-item img{background:rgba(0,0,0,0.06);}
body.theme-claro .history-item img.no-art{background:rgba(0,0,0,0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center/40% no-repeat;}

body.theme-claro .app-btn{background:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.08);color:#1c1c1e;}
body.theme-claro .contact-modal-card{background:#fdfdfd;color:#1c1c1e;border:1px solid rgba(0,0,0,0.08);}

/* ============================================
   SECCIÓN "PROGRAMACIÓN" (imagen + texto libre)
   Se muestra en la web pública si el cliente cargó
   al menos un bloque desde su panel.
   ============================================ */
.prog-card{position:relative;background:rgba(15,15,17,0.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.06);border-radius:18px;padding:22px 24px;}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;}
.prog-item{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:10px;}
.prog-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:var(--panel2);
  box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.prog-item p{margin:0;font-size:12px;color:#c9c9c9;line-height:1.5;word-break:break-word;}

body.theme-claro .prog-card{background:rgba(255,255,255,0.72);border:1px solid rgba(0,0,0,0.08);}
body.theme-claro .prog-item{background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.06);}
body.theme-claro .prog-item p{color:#3a3a3e;}
body.theme-claro .prog-card .section-label{color:#1c1c1e;}

/* Solo en la plantilla "Revista": la columna de Programación es angosta
   (va al costado del reproductor), así que un grid de varias columnas deja
   huecos vacíos cuando la cantidad de bloques no llena la última fila.
   Ahí usamos un carrusel horizontal en vez de grid — así nunca quedan
   espacios vacíos, sin importar si hay 2 o 20 bloques. Avanza solo cada
   pocos segundos (ver script al final de esta plantilla) y también se
   puede deslizar a mano con el dedo o el mouse; la barra de scroll queda
   oculta en todos los navegadores para que no rompa el diseño. Clásico y
   Moderno se quedan con el grid normal, que ahí ya se ve bien. */
.tpl-revista .zone-prog .prog-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
/* Cada bloque ocupa 1/3 del ancho del carrusel (menos los espacios entre
   ellos), así siempre se ven exactamente 3 imágenes a la vez sin importar
   cuántos bloques haya en total — el resto se revela deslizando o con el
   avance automático. */
.tpl-revista .zone-prog .prog-item{flex:0 0 calc((100% - 28px) / 3);scroll-snap-align:start;}
.tpl-revista .zone-prog .prog-grid::-webkit-scrollbar{display:none;}

/* ============================================
   PLANTILLAS DE DISEÑO
   El HTML es el mismo para las 3 (mismas "zonas":
   hero, player, app, history, ad, prog, about) — lo
   que cambia entre plantillas es cómo se acomodan
   esas zonas con CSS Grid. "clasico" es el diseño de
   siempre (columna única) y queda como comportamiento
   por defecto sin ninguna regla extra abajo.
   ============================================ */

/* ---------- Plantilla "Moderno": panel lateral fijo + contenido ---------- */
@media (min-width:821px){
  .tpl-moderno .player-inner{max-width:980px;display:grid;
    grid-template-columns:320px 1fr;column-gap:30px;row-gap:24px;align-items:start;
    grid-template-areas:
      "hero player"
      "hero app"
      "hero history"
      "hero ad"
      "hero prog"
      "hero about";
  }
  .tpl-moderno .zone-hero{grid-area:hero;position:sticky;top:90px;}
  .tpl-moderno .zone-player{grid-area:player;}
  .tpl-moderno .zone-app{grid-area:app;}
  .tpl-moderno .zone-history{grid-area:history;}
  .tpl-moderno .zone-ad{grid-area:ad;}
  .tpl-moderno .zone-prog{grid-area:prog;}
  .tpl-moderno .zone-about{grid-area:about;}
  .tpl-moderno .app-buttons{justify-content:flex-start;}

  /* Sin bloques de "Programación" cargados: quitamos esa fila de la
     cuadrícula en vez de dejar un espacio vacío entre Publicidad y Nosotros. */
  .tpl-moderno.no-prog .player-inner{
    grid-template-areas:
      "hero player"
      "hero app"
      "hero history"
      "hero ad"
      "hero about";
  }
}
.tpl-moderno .hero{background:rgba(18,18,21,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:30px 22px;box-shadow:0 16px 40px rgba(0,0,0,0.3);}
body.theme-claro.tpl-moderno .hero{background:rgba(255,255,255,0.72);border:1px solid rgba(0,0,0,0.08);}

/* Publicidad vertical: solo existe en el panel lateral del modelo Moderno.
   Vive dentro de .zone-hero, que ya es sticky — así que sube y baja pegada
   a la tarjeta del logo, sin CSS extra para "fijarla". */
.ad-vertical-slot{margin-top:16px;}
.ad-vertical-slot a,.ad-vertical-slot img{display:block;}
.ad-vertical-slot img{width:100%;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,0.35);}

/* ---------- Plantilla "Revista": banner ancho + grid tipo magazine ---------- */
@media (min-width:821px){
  .tpl-revista .player-inner{max-width:1040px;display:grid;
    grid-template-columns:1fr 1fr;gap:22px;align-items:start;
    grid-template-areas:
      "hero hero"
      "player prog"
      "app prog"
      "history history"
      "ad ad"
      "about about";
  }
  .tpl-revista .zone-hero{grid-area:hero;}
  .tpl-revista .zone-player{grid-area:player;}
  .tpl-revista .zone-app{grid-area:app;}
  .tpl-revista .zone-prog{grid-area:prog;min-width:0;}
  .tpl-revista .zone-history{grid-area:history;}
  .tpl-revista .zone-ad{grid-area:ad;}
  .tpl-revista .zone-about{grid-area:about;}
  .tpl-revista .zone-prog .prog-card{height:100%;min-width:0;}
  .tpl-revista .zone-prog .prog-grid{min-width:0;}
  .tpl-revista .zone-player,
  .tpl-revista .zone-app{min-width:0;}

  /* Si esta radio todavía no cargó bloques de "Programación", no reservamos
     esa columna vacía junto al reproductor — el reproductor y los botones
     de apps ocupan el ancho completo en vez de dejar un hueco al costado. */
  .tpl-revista.no-prog .player-inner{
    grid-template-areas:
      "hero hero"
      "player player"
      "app app"
      "history history"
      "ad ad"
      "about about";
  }
}
.tpl-revista .hero{position:relative;overflow:hidden;flex-direction:row;text-align:left;justify-content:flex-start;
  gap:22px;background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);border-radius:26px;padding:32px;}
.tpl-revista .hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 0% 0%, var(--accent-color,var(--accent)) 0%, transparent 58%);opacity:0.28;}
.tpl-revista .hero-logo{margin-bottom:0;width:clamp(96px,18vw,140px);height:clamp(96px,18vw,140px);flex-shrink:0;}
.tpl-revista .hero-title{font-size:clamp(24px,4vw,34px);}
@media (max-width:820px){
  .tpl-revista .hero{flex-direction:column;text-align:center;padding:26px 20px;}
}
body.theme-claro.tpl-revista .hero{background:linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01));
  border:1px solid rgba(0,0,0,0.08);}

/* ============================================
   PANEL: selector visual de plantilla
   ============================================ */
.tpl-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tpl-option{position:relative;cursor:pointer;display:block;}
.tpl-option input{position:absolute;opacity:0;width:1px;height:1px;}
.tpl-option-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:14px;
  padding:14px;background:var(--panel2);transition:border-color 0.15s, transform 0.15s;}
.tpl-option input:checked ~ .tpl-option-card{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,71,44,0.15);}
.tpl-option input:focus-visible ~ .tpl-option-card{outline:2px solid var(--accent);outline-offset:2px;}
.tpl-option:hover .tpl-option-card{transform:translateY(-2px);}
.tpl-option-name{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;margin-top:10px;}
.tpl-option-desc{font-size:11px;color:var(--text-dim);margin-top:2px;line-height:1.4;}

.tpl-mock{height:64px;border-radius:8px;background:#0b0b0d;border:1px solid var(--line);
  display:flex;padding:7px;gap:5px;overflow:hidden;}
.tpl-mock i{display:block;background:var(--accent);border-radius:3px;opacity:0.55;}
.tpl-mock.mock-clasico{flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.tpl-mock.mock-clasico i:nth-child(1){width:18px;height:18px;border-radius:50%;}
.tpl-mock.mock-clasico i:nth-child(2){width:60%;height:8px;}
.tpl-mock.mock-clasico i:nth-child(3){width:85%;height:18px;border-radius:4px;}
.tpl-mock.mock-moderno i:nth-child(1){width:28%;height:100%;border-radius:4px;}
.tpl-mock.mock-moderno i:nth-child(2){flex:1;height:100%;border-radius:4px;opacity:0.28;}
.tpl-mock.mock-revista{flex-direction:column;}
.tpl-mock.mock-revista i:nth-child(1){width:100%;height:20px;border-radius:4px;}
.tpl-mock.mock-revista i:nth-child(2){flex:1;border-radius:4px;opacity:0.28;}

/* ============================================
   PANEL: editor de "Programación" (filas dinámicas)
   ============================================ */
.prog-editor-row{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:start;
  padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);margin-bottom:12px;}
.prog-editor-row .field{margin-bottom:0;}
.prog-editor-remove{background:transparent;border:1px solid var(--line);color:#ff8080;border-radius:8px;
  padding:9px 12px;cursor:pointer;font-size:12px;height:fit-content;font-family:inherit;}
.prog-editor-remove:hover{border-color:#c0392b;background:rgba(192,57,43,0.1);}
.prog-editor-add{margin-top:2px;}
@media (max-width:600px){
  .tpl-picker{grid-template-columns:1fr;}
  .prog-editor-row{grid-template-columns:1fr;}
}