/* =====================================================================
   Radio Megamix Peru — Mollendo
   Estilos del sitio público (Inicio). Reproduce fielmente el diseño
   aprobado (Inicio.dc.html = desktop, Inicio Movil.dc.html = móvil).
   ===================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,sans-serif;
  background:#ffffff;
  color:#16181d;
  -webkit-font-smoothing:antialiased;
}
a{color:#ef2b2b;text-decoration:none}
a:hover{color:#c81e1e}
img{max-width:100%;display:block}
button{font-family:inherit}

@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(239,43,43,.6)}
  70%{box-shadow:0 0 0 7px rgba(239,43,43,0)}
  100%{box-shadow:0 0 0 0 rgba(239,43,43,0)}
}

.chat-scroll{scrollbar-width:thin;scrollbar-color:#d7dbe2 transparent}
.chat-scroll::-webkit-scrollbar{width:8px}
.chat-scroll::-webkit-scrollbar-thumb{background:#d7dbe2;border-radius:8px}
.chat-scroll::-webkit-scrollbar-track{background:transparent}

.page{min-height:100vh;background:#ffffff}

/* ===== BANNER SUPERIOR ============================================== */
.banner{
  position:relative;width:100%;height:170px;overflow:hidden;
  background-image:var(--banner-desktop, url('../assets/banner.png'));
  background-size:cover;background-position:center;
}
.banner__controls{
  position:absolute;top:22px;right:32px;
  display:flex;align-items:center;gap:14px;
}
.live-pill{
  display:flex;align-items:center;gap:12px;background:#ffffff;
  border-radius:999px;padding:7px 8px 7px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.live-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Montserrat';font-weight:800;font-size:12px;
  letter-spacing:.1em;color:#16181d;
}
.live-dot{
  width:9px;height:9px;border-radius:50%;background:#ef2b2b;
  animation:livepulse 1.6s infinite;flex-shrink:0;
}
.btn-dark{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:#16181d;color:#fff;font-family:'Montserrat';font-weight:700;
  font-size:13px;padding:9px 16px;border-radius:999px;
}
.btn-dark:hover{background:#000;color:#fff}
.btn-login{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:#16181d;color:#fff;font-family:'Montserrat';font-weight:800;
  font-size:13px;letter-spacing:.03em;padding:11px 20px;border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.btn-login:hover{background:#000;color:#fff}

/* Barra móvil bajo el banner (oculta en desktop) */
.banner__mobilebar{display:none}

/* ===== CONTENIDO PRINCIPAL ========================================= */
.main{
  max-width:1280px;margin:0 auto;padding:40px 32px 80px;
  display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start;
}

/* ----- Reproductor -------------------------------------------------- */
.player{
  position:relative;overflow:hidden;border-radius:22px;padding:44px;color:#fff;
  box-shadow:0 20px 50px rgba(20,20,30,.18);min-height:520px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-image:var(--radio-desktop, url('../assets/radio.png'));
  background-size:cover;background-position:center;
}
.player__overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,20,.42) 0%,rgba(10,10,20,.12) 32%,rgba(10,10,20,.35) 62%,rgba(10,10,20,.86) 100%);
}
.player__inner{
  position:relative;z-index:1;display:flex;flex-direction:column;
  height:100%;justify-content:space-between;
}
.badge-now{
  display:inline-flex;align-items:center;gap:8px;background:rgba(239,43,43,.9);
  color:#fff;font-family:'Montserrat';font-weight:800;font-size:11px;
  letter-spacing:.12em;padding:7px 13px;border-radius:999px;
}
.badge-now .dot{width:8px;height:8px;border-radius:50%;background:#fff}
.player__title{
  font-family:'Righteous',cursive;font-size:clamp(40px,5vw,64px);line-height:1;
  letter-spacing:.01em;color:#fff;margin-top:16px;
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}
.player__subtitle{
  font-family:'Barlow';font-weight:600;font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.player__controls{display:flex;align-items:center;gap:22px;margin-top:22px}
.btn-play{
  display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  background:linear-gradient(90deg,#ff5a4d,#e11d2b);color:#fff;
  font-family:'Montserrat';font-weight:800;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;padding:15px 30px;border-radius:999px;
  box-shadow:0 10px 26px rgba(225,29,43,.45);
}
.btn-play:hover{filter:brightness(1.08)}
.volume{display:flex;align-items:center;gap:10px}
.volume svg{flex-shrink:0}
.volume input[type=range]{
  -webkit-appearance:none;appearance:none;width:130px;height:7px;
  border-radius:999px;background:rgba(255,255,255,.45);outline:none;cursor:pointer;
}
.volume input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:pointer;
}
.volume input[type=range]::-moz-range-thumb{
  width:17px;height:17px;border:none;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:pointer;
}
/* Aviso stream no configurado / error */
.player__notice{
  margin-top:14px;font-family:'Barlow';font-weight:600;font-size:13px;
  color:#fff;background:rgba(10,10,20,.55);border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:10px 14px;display:none;align-items:center;gap:10px;
}
.player__notice.show{display:flex}
.player__notice button{
  border:none;cursor:pointer;background:#ef2b2b;color:#fff;font-family:'Montserrat';
  font-weight:700;font-size:12px;padding:7px 12px;border-radius:8px;
}

/* ----- Chat --------------------------------------------------------- */
.chat{
  display:flex;flex-direction:column;height:520px;background:#ffffff;
  border:1px solid #e6e8ec;border-radius:22px;
  box-shadow:0 12px 34px rgba(20,20,30,.07);overflow:hidden;
}
.chat__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid #eef0f3;
}
.chat__head h3{font-family:'Montserrat';font-weight:800;font-size:18px;color:#16181d;line-height:1.1}
.chat__live{
  display:inline-flex;align-items:center;gap:7px;background:rgba(239,43,43,.1);
  color:#ef2b2b;font-family:'Montserrat';font-weight:800;font-size:10px;
  letter-spacing:.1em;padding:6px 11px;border-radius:999px;
}
.chat__live .dot{width:7px;height:7px;border-radius:50%;background:#ef2b2b;animation:livepulse 1.6s infinite}
.chat__list{
  flex:1;min-height:0;padding:18px 20px;overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
}
.chat-msg__name{font-family:'Montserrat';font-weight:800;font-size:14px}
.chat-msg__text{font-family:'Barlow';font-weight:500;font-size:14px;color:#2b2f36;line-height:1.4;margin-top:2px;word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg__time{font-family:'Barlow';font-weight:500;font-size:11px;color:#9aa0aa;margin-left:6px}
.chat__empty{font-family:'Barlow';font-size:13px;color:#9aa0aa;text-align:center;margin:auto 0}
.chat__foot{padding:14px 18px;border-top:1px solid #eef0f3;background:#fbfbfc}
.chat__inputrow{display:flex;align-items:center;gap:10px}
.chat__inputrow input{
  flex:1;border:1px solid #e6e8ec;background:#fff;border-radius:12px;padding:12px 14px;
  font-family:'Barlow';font-size:14px;color:#16181d;outline:none;
}
.chat__inputrow input:focus{border-color:#e11d2b}
.chat__send{
  width:46px;height:46px;flex-shrink:0;border:none;cursor:pointer;border-radius:12px;
  background:#ef2b2b;display:flex;align-items:center;justify-content:center;
}
.chat__send:hover{background:#c81e1e}
.chat__connected{font-family:'Barlow';font-size:12px;color:#9aa0aa;margin-top:8px}
.chat__connected b{color:#16181d}
.chat__connected a{color:#e11d2b;font-weight:700}
.chat__gate{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.chat__gate p{font-family:'Barlow';font-weight:600;font-size:13px;color:#6b7280;line-height:1.4}
.chat__gate .row{display:flex;gap:10px;width:100%}
.btn-register{
  flex:1;border:none;cursor:pointer;background:#ef2b2b;color:#fff;font-family:'Montserrat';
  font-weight:700;font-size:13px;padding:11px;border-radius:10px;
}
.btn-register:hover{background:#c81e1e}
.btn-signin{
  flex:1;border:1px solid #e6e8ec;cursor:pointer;background:#fff;color:#16181d;
  font-family:'Montserrat';font-weight:700;font-size:13px;padding:11px;border-radius:10px;
}
.btn-signin:hover{background:#f4f5f7}

/* ===== CONTÁCTANOS ================================================= */
.contact{max-width:1280px;margin:0 auto;padding:0 32px 80px}
.contact h2{font-family:'Montserrat';font-weight:900;font-size:30px;color:#16181d;text-align:center}
.contact__rule{width:64px;height:4px;border-radius:999px;background:#e11d2b;margin:12px auto 0}
.contact__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:34px}
.contact-card{
  display:flex;align-items:center;gap:16px;background:#ffffff;border:1px solid #e6e8ec;
  border-radius:16px;padding:20px 26px;box-shadow:0 6px 20px rgba(20,20,30,.05);
  transition:transform .15s ease,border-color .15s ease;
}
.contact-card:hover{transform:translateY(-2px)}
.contact-card--wa:hover{border-color:#22c55e}
.contact-card__icon{
  width:54px;height:54px;flex-shrink:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.contact-card__title{font-family:'Montserrat';font-weight:800;font-size:16px;color:#16181d}
.contact-card__data{font-family:'Barlow';font-weight:600;font-size:14px;margin-top:2px}

/* ===== BOTÓN FLOTANTE WHATSAPP ===================================== */
.wa-float{
  position:fixed;right:26px;bottom:26px;display:inline-flex;align-items:center;gap:10px;
  background:#22c55e;color:#fff;font-family:'Montserrat';font-weight:800;font-size:14px;
  padding:14px 20px;border-radius:999px;box-shadow:0 10px 26px rgba(34,197,94,.4);z-index:50;
}
.wa-float:hover{filter:brightness(1.05);color:#fff}
.wa-float .short{display:none}

/* ===== MODAL LOGIN / REGISTRO ===================================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,10,20,.55);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:20px;
}
.modal-overlay[hidden]{display:none}
.modal{
  width:400px;max-width:100%;background:#fff;border-radius:20px;padding:30px;
  box-shadow:0 30px 70px rgba(10,10,20,.35);
}
.modal h3{font-family:'Montserrat';font-weight:900;font-size:24px;color:#16181d}
.modal__sub{font-family:'Barlow';font-weight:500;font-size:14px;color:#6b7280;margin-top:4px}
.modal label{display:block;font-family:'Montserrat';font-weight:700;font-size:12px;color:#16181d;margin-top:20px}
.modal label + input{margin-top:6px}
.modal input{
  width:100%;border:1px solid #e6e8ec;background:#fff;border-radius:12px;padding:12px 14px;
  font-family:'Barlow';font-size:14px;color:#16181d;outline:none;
}
.modal input:focus{border-color:#e11d2b}
.modal__error{font-family:'Barlow';font-weight:600;font-size:13px;color:#e11d2b;margin-top:12px}
.modal__cta{
  width:100%;margin-top:20px;border:none;cursor:pointer;background:#ef2b2b;color:#fff;
  font-family:'Montserrat';font-weight:800;font-size:15px;padding:14px;border-radius:12px;
}
.modal__cta:hover{background:#c81e1e}
.modal__switch{font-family:'Barlow';font-size:13px;color:#6b7280;text-align:center;margin-top:16px}
.modal__switch a{color:#e11d2b;font-weight:700}

/* ===================================================================
   RESPONSIVE / MÓVIL  (diseño aprobado: Inicio Movil.dc.html)
   =================================================================== */
@media (max-width:820px){
  .banner{height:190px;background-image:var(--banner-movil, url('../assets/banner-movil.png'))}
  /* En móvil se ocultan los controles de la esquina; se usa la barra flotante */
  .banner__controls{display:none}
  .banner__mobilebar{
    position:absolute;left:0;right:0;bottom:0;transform:translateY(50%);
    padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .banner__mobilebar .live-pill{padding:7px 14px;gap:8px}
  .banner__mobilebar .live-tag{font-size:11px;letter-spacing:.08em}
  .banner__mobilebar .live-dot{width:8px;height:8px}

  .main{
    display:flex;flex-direction:column;gap:20px;
    padding:44px 16px 26px;max-width:520px;
  }
  .player{padding:20px;border-radius:20px;background-image:var(--radio-movil, url('../assets/radio-movil.png'));background-position:center top}
  .player__title{font-size:32px;margin-top:12px}
  .player__subtitle{font-size:13px}
  .player__controls{gap:14px;margin-top:0}
  .btn-play{font-size:13px;padding:12px 22px}
  .volume{flex:1}
  .volume input[type=range]{width:100%;flex:1}

  .chat{height:420px;border-radius:20px}

  .contact{padding:0 16px 26px;max-width:520px;margin:0 auto}
  .contact h2{font-size:22px}
  .contact__rule{width:52px}
  .contact-card{padding:16px 18px}

  .wa-float{right:16px;bottom:16px;padding:12px 18px;font-size:13px}
  .wa-float .long{display:none}
  .wa-float .short{display:inline}
}