/* ==========================================================
   RUMBA HYPERGLASS 2030
   ========================================================== */

:root {

  --neo-bg:
    #070709;

  --neo-surface:
    rgba(18,18,22,.72);

  --neo-border:
    rgba(255,255,255,.085);

  --neo-muted:
    rgba(255,255,255,.54);

  --neo-red:
    #ff3038;

  --neo-red-soft:
    rgba(255,48,56,.16);

  --neo-gold:
    #ffca57;
}


*,
*::before,
*::after {
  box-sizing:
    border-box;
}


html {
  background:
    var(--neo-bg);
}


html,
body {

  width:
    100%;

  min-height:
    100%;

  margin:
    0;

  padding:
    0;

  overflow-x:
    hidden;
}


body.rumba-neo-body {

  position:
    relative;

  min-height:
    100vh;

  background:

    radial-gradient(
      circle at 50% -20%,
      rgba(255,47,56,.11),
      transparent 38%
    ),

    #070709;

  color:
    white;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}



/* ==========================================================
   AMBIENTE
   ========================================================== */

.neo-ambient {

  position:
    fixed;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  z-index:
    -1;
}


.neo-orb {

  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(90px);

  opacity:
    .16;
}


.neo-orb-one {

  width:
    420px;

  height:
    420px;

  top:
    160px;

  left:
    -180px;

  background:
    #ff1722;
}


.neo-orb-two {

  width:
    460px;

  height:
    460px;

  top:
    540px;

  right:
    -240px;

  background:
    #6f1225;
}


.neo-grid {

  position:
    absolute;

  inset:
    0;

  opacity:
    .025;

  background-image:

    linear-gradient(
      rgba(255,255,255,.4) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.4) 1px,
      transparent 1px
    );

  background-size:
    50px 50px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );
}



/* ==========================================================
   HEADER
   ========================================================== */

.neo-header {

  position:
    sticky;

  top:
    0;

  z-index:
    50;

  border-bottom:
    1px solid var(--neo-border);

  background:
    rgba(7,7,9,.78);

  backdrop-filter:
    blur(26px)
    saturate(150%);
}


.neo-header-inner {

  width:
    min(1180px, 100%);

  min-height:
    80px;

  margin:
    0 auto;

  padding:
    10px 24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}


.neo-bi-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.neo-bi-logo-wrap {

  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--neo-border);

  border-radius:
    17px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08);
}


.neo-bi-logo-wrap img {

  width:
    48px;

  height:
    48px;

  object-fit:
    contain;
}


.neo-bi-copy strong,
.neo-bi-copy span {

  display:
    block;
}


.neo-bi-copy strong {

  font-size:
    15px;

  letter-spacing:
    -.01em;
}


.neo-bi-copy span {

  margin-top:
    2px;

  color:
    var(--neo-muted);

  font-size:
    10px;
}


.neo-live-chip {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(255,55,62,.16);

  border-radius:
    14px;

  background:
    rgba(255,47,55,.055);
}


.neo-live-chip > i {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--neo-red);

  box-shadow:
    0 0 0 6px
    rgba(255,48,56,.09);

  animation:
    neoPulse 1.6s
    infinite;
}


.neo-live-chip strong,
.neo-live-chip span {

  display:
    block;
}


.neo-live-chip strong {

  font-size:
    10px;

  letter-spacing:
    .09em;
}


.neo-live-chip span {

  margin-top:
    1px;

  color:
    #ff777c;

  font-size:
    8px;

  font-weight:
    850;
}


@keyframes neoPulse {

  50% {

    box-shadow:
      0 0 0 11px
      rgba(255,48,56,0);

  }
}



/* ==========================================================
   BANNER DESARROLLO
   ========================================================== */

.neo-build {

  width:
    min(1132px, calc(100% - 48px));

  margin:
    22px auto 0;

  padding:
    13px 15px;

  display:
    grid;

  grid-template-columns:
    auto minmax(0,1fr) auto;

  align-items:
    center;

  gap:
    14px;

  border:
    1px solid var(--neo-border);

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 16px 50px
    rgba(0,0,0,.25);

  backdrop-filter:
    blur(20px);
}


.neo-build-icon {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      #24242b,
      #101014
    );

  color:
    white;

  font-size:
    11px;

  font-weight:
    950;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08);
}


.neo-build-copy {

  min-width:
    0;
}


.neo-build-copy > span {

  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--neo-gold);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.neo-build-copy strong {

  display:
    block;

  font-size:
    12px;
}


.neo-build-copy p {

  margin:
    3px 0 0;

  color:
    var(--neo-muted);

  font-size:
    10px;

  line-height:
    1.4;
}


.neo-build-status {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(255,201,76,.14);

  border-radius:
    999px;

  background:
    rgba(255,201,76,.055);

  color:
    #ffd467;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.neo-build-status i {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    #ffd467;
}



/* ==========================================================
   CONTENEDOR
   ========================================================== */

.neo-main {

  width:
    min(1180px, 100%);

  margin:
    0 auto;

  padding:
    22px 24px 70px;
}



/* ==========================================================
   QUITAR AVISOS ANTIGUOS
   ========================================================== */

.neo-main
.bi-construction-banner,

.neo-main
.bi-construction-notice,

.neo-main
.rumba-construction-banner {

  display:
    none !important;
}



/* ==========================================================
   HERO RUMBA
   ========================================================== */

.rumba-stage,
.rumba-stage-pro {

  position:
    relative !important;

  width:
    100% !important;

  min-height:
    520px !important;

  display:
    grid !important;

  grid-template-columns:
    .82fr 1.18fr !important;

  align-items:
    center !important;

  gap:
    48px !important;

  padding:
    48px !important;

  overflow:
    hidden !important;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    34px !important;

  background:

    radial-gradient(
      circle at 13% 12%,
      rgba(255,50,60,.18),
      transparent 36%
    ),

    radial-gradient(
      circle at 82% 90%,
      rgba(116,20,34,.22),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      rgba(25,13,16,.96),
      rgba(10,10,13,.97)
    ) !important;

  box-shadow:

    0 35px 90px
    rgba(0,0,0,.42),

    inset 0 1px 0
    rgba(255,255,255,.055) !important;
}


.rumba-stage::after {

  content:
    "";

  position:
    absolute;

  width:
    390px;

  height:
    390px;

  right:
    -190px;

  top:
    -200px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:
    50%;

  pointer-events:
    none;
}



/* ==========================================================
   LOGO
   ========================================================== */

.rumba-logo-wrap {

  position:
    relative !important;

  width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;
}


.rumba-main-logo {

  position:
    relative !important;

  z-index:
    2;

  width:
    min(330px, 100%) !important;

  height:
    auto !important;

  max-height:
    330px !important;

  object-fit:
    contain !important;

  filter:

    drop-shadow(
      0 28px 45px
      rgba(0,0,0,.45)
    )

    drop-shadow(
      0 0 32px
      rgba(255,47,55,.12)
    ) !important;
}


.rumba-logo-glow {

  position:
    absolute !important;

  width:
    260px !important;

  height:
    260px !important;

  inset:
    auto !important;

  background:
    rgba(255,39,48,.18) !important;

  filter:
    blur(70px) !important;
}


.rumba-live-badge {

  position:
    relative !important;

  z-index:
    3;

  margin-top:
    18px !important;

  padding:
    8px 14px !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  border-radius:
    999px !important;

  background:
    rgba(255,255,255,.045) !important;

  backdrop-filter:
    blur(14px) !important;

  font-size:
    9px !important;
}



/* ==========================================================
   TITULOS
   ========================================================== */

.rumba-stage-copy {

  position:
    relative;

  z-index:
    3;

  min-width:
    0 !important;
}


.rumba-super {

  margin-bottom:
    12px !important;

  color:
    rgba(255,255,255,.54) !important;

  font-size:
    9px !important;

  font-weight:
    900;

  letter-spacing:
    .18em !important;
}


.rumba-stage-copy h1 {

  margin:
    0 !important;

  font-size:
    clamp(
      62px,
      7vw,
      96px
    ) !important;

  line-height:
    .88 !important;

  letter-spacing:
    -.055em !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #dedee1
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent !important;
}


.rumba-stage-copy h2 {

  margin:
    18px 0 0 !important;

  font-size:
    clamp(
      19px,
      2vw,
      26px
    ) !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -.025em;
}


.rumba-stage-copy > p {

  max-width:
    570px;

  margin:
    13px 0 0 !important;

  color:
    rgba(255,255,255,.58) !important;

  font-size:
    13px !important;

  line-height:
    1.55 !important;
}



/* ==========================================================
   AHORA AL AIRE
   ========================================================== */

.rumba-now-air {

  margin-top:
    24px !important;

  padding:
    13px 15px !important;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    16px !important;

  background:
    rgba(255,255,255,.027) !important;

  backdrop-filter:
    blur(16px);
}


.rumba-now-air span {

  color:
    #ff7075 !important;

  font-size:
    8px !important;
}


.rumba-now-air strong {

  font-size:
    15px !important;
}


.rumba-now-air small {

  font-size:
    10px !important;
}



/* ==========================================================
   PLAYER
   ========================================================== */

.rumba-player-pro {

  margin-top:
    12px !important;

  padding:
    12px !important;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    20px !important;

  background:
    rgba(5,5,7,.54) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.045) !important;

  backdrop-filter:
    blur(24px) !important;
}


.rumba-play-button {

  width:
    62px !important;

  height:
    62px !important;

  border:
    1px solid
    rgba(255,255,255,.08) !important;

  background:
    linear-gradient(
      145deg,
      #ff343c,
      #c51017
    ) !important;

  box-shadow:

    0 12px 30px
    rgba(255,30,40,.24),

    inset 0 1px 0
    rgba(255,255,255,.16) !important;
}


.rumba-track-art {

  border-radius:
    13px !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.30) !important;
}


.rumba-now-playing-text > span {

  color:
    #ff7378 !important;

  font-size:
    8px !important;
}


.rumba-now-playing-text strong {

  font-size:
    13px !important;
}


.rumba-player-header span {

  font-size:
    10px !important;
}


.rumba-reconnect {

  border:
    1px solid var(--neo-border) !important;

  background:
    rgba(255,255,255,.04) !important;
}



/* ==========================================================
   REDES
   ========================================================== */

.rumba-social-row {

  margin-top:
    10px !important;
}


.rumba-social-row a {

  min-height:
    40px;

  padding:
    8px 15px !important;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.033) !important;

  transition:
    transform .18s ease,
    background .18s ease;
}


.rumba-social-row a:hover {

  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.07) !important;
}



/* ==========================================================
   SECCIONES
   ========================================================== */

.bi-section {

  margin-top:
    70px !important;
}


.bi-kicker {

  color:
    #ff5c62 !important;

  font-size:
    8px !important;

  letter-spacing:
    .15em !important;
}


.bi-section-head h2 {

  margin-top:
    6px !important;

  font-size:
    clamp(
      30px,
      4vw,
      44px
    ) !important;

  letter-spacing:
    -.04em;
}



/* ==========================================================
   PROGRAMACION
   ========================================================== */

.rumba-program {

  margin-bottom:
    8px;

  padding:
    15px 16px !important;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    16px !important;

  background:
    rgba(255,255,255,.022) !important;

  transition:
    background .18s ease,
    transform .18s ease;
}


.rumba-program:hover {

  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.045) !important;
}



/* ==========================================================
   PUBLICIDAD
   ========================================================== */

.rumba-campaign-card {

  overflow:
    hidden;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    20px !important;

  background:
    rgba(255,255,255,.025) !important;
}



/* ==========================================================
   CHAT
   ========================================================== */

.rumba-chat-shell {

  overflow:
    hidden;

  border:
    1px solid var(--neo-border) !important;

  border-radius:
    24px !important;

  background:
    rgba(10,10,13,.76) !important;

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.25);

  backdrop-filter:
    blur(18px);
}



/* ==========================================================
   FOOTER
   ========================================================== */

.neo-footer {

  padding:
    35px 20px 50px;

  text-align:
    center;

  color:
    var(--neo-muted);
}


.neo-footer strong,
.neo-footer span,
.neo-footer small {

  display:
    block;
}


.neo-footer strong {

  color:
    white;

  font-size:
    12px;

  letter-spacing:
    .13em;
}


.neo-footer span {

  margin-top:
    5px;

  font-size:
    10px;
}


.neo-footer small {

  margin-top:
    12px;

  opacity:
    .48;

  font-size:
    9px;
}



/* ==========================================================
   LOADER
   ========================================================== */

.neo-loader {

  min-height:
    300px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    14px;

  color:
    var(--neo-muted);

  font-size:
    11px;
}


.neo-loader div {

  width:
    28px;

  height:
    28px;

  border:
    2px solid
    rgba(255,255,255,.10);

  border-top-color:
    var(--neo-red);

  border-radius:
    50%;

  animation:
    neoSpin .7s
    linear infinite;
}


@keyframes neoSpin {

  to {
    transform:
      rotate(360deg);
  }
}



/* ==========================================================
   MOVIL
   ========================================================== */

@media (max-width: 768px) {


  .neo-header-inner {

    min-height:
      66px;

    padding:
      7px 12px;
  }


  .neo-bi-logo-wrap {

    width:
      46px;

    height:
      46px;

    border-radius:
      14px;
  }


  .neo-bi-logo-wrap img {

    width:
      42px;

    height:
      42px;
  }


  .neo-bi-copy strong {

    font-size:
      13px;
  }


  .neo-bi-copy span {

    font-size:
      9px;
  }


  .neo-live-chip {

    padding:
      7px 9px;
  }


  /* AVISO */

  .neo-build {

    width:
      calc(100% - 24px);

    margin-top:
      12px;

    padding:
      11px 12px;

    grid-template-columns:
      34px minmax(0,1fr);

    gap:
      9px;

    border-radius:
      16px;
  }


  .neo-build-icon {

    width:
      34px;

    height:
      34px;

    border-radius:
      11px;

    font-size:
      9px;
  }


  .neo-build-copy > span {

    font-size:
      7px;
  }


  .neo-build-copy strong {

    font-size:
      11px;

    line-height:
      1.25;
  }


  .neo-build-copy p {

    margin-top:
      2px;

    font-size:
      9px;
  }


  .neo-build-status {

    display:
      none;
  }


  .neo-main {

    padding:
      14px 12px
      50px;
  }


  /* HERO */

  .rumba-stage,
  .rumba-stage-pro {

    min-height:
      0 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    gap:
      23px !important;

    padding:
      25px 18px
      22px !important;

    border-radius:
      28px !important;

    background:

      radial-gradient(
        circle at 50% 2%,
        rgba(255,52,60,.17),
        transparent 32%
      ),

      linear-gradient(
        165deg,
        #160b0e,
        #09090c 60%
      ) !important;

    box-shadow:
      0 24px 60px
      rgba(0,0,0,.38) !important;
  }


  .rumba-stage::after {

    display:
      none;
  }


  /* LOGO */

  .rumba-main-logo {

    width:
      158px !important;

    max-width:
      52vw !important;

    max-height:
      158px !important;
  }


  .rumba-logo-glow {

    width:
      160px !important;

    height:
      160px !important;
  }


  .rumba-live-badge {

    margin-top:
      10px !important;

    padding:
      6px 11px !important;
  }


  /* TITULOS */

  .rumba-super {

    margin-bottom:
      8px !important;

    font-size:
      8px !important;
  }


  .rumba-stage-copy h1 {

    font-size:
      clamp(
        45px,
        13vw,
        58px
      ) !important;

    line-height:
      .92 !important;

    letter-spacing:
      -.05em !important;
  }


  .rumba-stage-copy h2 {

    margin-top:
      12px !important;

    font-size:
      20px !important;

    line-height:
      1.12 !important;
  }


  .rumba-stage-copy > p {

    margin-top:
      9px !important;

    font-size:
      12px !important;

    line-height:
      1.48 !important;
  }


  /* AHORA AL AIRE */

  .rumba-now-air {

    margin-top:
      16px !important;

    padding:
      12px 13px !important;

    border-radius:
      14px !important;
  }


  /* PLAYER */

  .rumba-player-pro {

    margin-top:
      10px !important;

    padding:
      13px !important;

    display:
      grid !important;

    grid-template-columns:
      56px minmax(0,1fr) !important;

    align-items:
      start !important;

    gap:
      11px !important;
  }


  .rumba-play-button {

    width:
      56px !important;

    height:
      56px !important;

    min-width:
      56px !important;
  }


  .rumba-player-info {

    min-width:
      0 !important;
  }


  .rumba-now-playing {

    grid-template-columns:
      42px minmax(0,1fr) !important;

    gap:
      8px !important;
  }


  .rumba-track-art {

    width:
      42px !important;

    height:
      42px !important;
  }


  .rumba-now-playing-text strong {

    max-width:
      100% !important;

    font-size:
      12px !important;

    white-space:
      normal !important;

    display:
      -webkit-box;

    -webkit-line-clamp:
      2;

    -webkit-box-orient:
      vertical;

    overflow:
      hidden !important;
  }


  .rumba-player-header {

    gap:
      5px;
  }


  .rumba-player-header strong {

    font-size:
      12px !important;
  }


  .rumba-audio-bars {

    display:
      none !important;
  }


  .rumba-player-bottom {

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      9px !important;
  }


  .rumba-volume {

    display:
      grid !important;

    grid-template-columns:
      20px minmax(0,1fr) 35px !important;
  }


  .rumba-reconnect {

    width:
      100% !important;
  }


  /* REDES */

  .rumba-social-row {

    display:
      grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      7px !important;
  }


  .rumba-social-row a {

    min-height:
      42px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;
  }


  /* SECCIONES */

  .bi-section {

    margin-top:
      45px !important;
  }


  .bi-section-head h2 {

    font-size:
      28px !important;
  }


  .rumba-program {

    padding:
      13px !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;
  }


  .bi-grid,
  .bi-grid-3 {

    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .rumba-chat-messages {

    height:
      360px !important;
  }

}



@media (max-width: 390px) {

  .neo-bi-copy span {

    display:
      none;
  }


  .rumba-main-logo {

    width:
      145px !important;

    max-height:
      145px !important;
  }


  .rumba-stage-copy h1 {

    font-size:
      43px !important;
  }


  .rumba-stage-copy h2 {

    font-size:
      18px !important;
  }


  .rumba-social-row {

    grid-template-columns:
      1fr !important;
  }

}

/* ==========================================================
   RUMBA SHARE BUTTON
   ========================================================== */

.rumba-share-btn {

  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 8px 15px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius: 12px;

  background:
    rgba(255,255,255,.033);

  color: white;

  font: inherit;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.rumba-share-btn svg {

  width: 16px;
  height: 16px;

  flex:
    0 0 16px;
}


.rumba-share-btn:hover {

  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.14);
}


.rumba-share-btn:active {

  transform:
    scale(.97);
}


@media (max-width: 768px) {

  .rumba-social-row {

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }


  .rumba-share-btn {

    width:
      100%;

    min-width:
      0;

    min-height:
      42px;

    padding:
      8px 7px;

    font-size:
      10px;
  }

}


@media (max-width: 420px) {

  .rumba-social-row {

    grid-template-columns:
      1fr 1fr !important;
  }


  .rumba-share-btn {

    grid-column:
      1 / -1;

    min-height:
      44px;

    font-size:
      11px;
  }

}