/* Minimal, modern one-page radio landing */
:root {
  /* Radio To Be — Cuban flag inspired palette */
  --bg: #050a12;
  /* near-black navy */
  --card: #081426;
  /* deep navy */
  --text: #f8fbff;
  --muted: #b8c7d9;
  --accent: #1d4ed8;
  /* Cuba blue */
  --accent2: #cf142b;
  /* Cuba red */
  --accent3: #ffffff;
  /* white */
  --border: rgba(255, 255, 255, .14);
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1100px 760px at 20% 0%, rgba(29, 78, 216, .34), transparent 56%), radial-gradient(900px 700px at 88% 22%, rgba(207, 20, 43, .22), transparent 54%), radial-gradient(900px 700px at 55% 92%, rgba(255, 255, 255, .06), transparent 58%), linear-gradient(180deg, rgba(8, 20, 38, .0), rgba(8, 20, 38, .45) 55%, rgba(5, 10, 18, 1) 100%), var(--bg);
  color: var(--text)
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px
}

.nav {
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(11, 16, 32, .65);
  border-bottom: 1px solid var(--border);
  z-index: 10
}

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 0;
  gap: 18px
}

.nav__links {
  justify-self: start
}

.brand {
  justify-self: center
}

@media (max-width: 520px) {
  .nav__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }

  /* Add a little breathing room so first/last link don't touch screen edges */
  .nav__links {
    width: 100%;
    justify-content: space-between;
    padding: 0 10px
  }

  .nav__links a {
    font-size: 13px;
    padding: 6px 0
  }
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center
}

.brand--center {
  justify-content: center
}

.brand__logo {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center
}

.brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: contrast(1.15) brightness(1.08);
  transform: scale(1.02)
}

.brand__dot {
  display: none
}

.brand__name {
  font-weight: 900;
  letter-spacing: .02em
}

.brand__name--color {
  font-weight: 950;
  letter-spacing: .01em
}

.brand__name1 {
  background: linear-gradient(135deg, var(--accent), rgba(255, 255, 255, .92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.brand__name2 {
  background: linear-gradient(135deg, var(--accent2), rgba(255, 255, 255, .92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.brand__tag {
  color: var(--muted);
  font-size: 13px
}

.nav__links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.nav__links a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  opacity: .9
}

.nav__links a:hover {
  opacity: 1;
  text-decoration: underline
}

.hero {
  padding: 34px 0 22px
}

/* News ticker */
.ticker {
  position: sticky;
  top: 93px;
  z-index: 9;
  background: rgba(11, 16, 32, .55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border)
}

.ticker__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0
}

.ticker__label {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(207, 20, 43, .48);
  background: rgba(207, 20, 43, .14)
}

.ticker__item {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .25s ease
}

.ticker__item.is-fading {
  opacity: .15
}

.ticker__item:hover {
  text-decoration: underline;
  opacity: 1
}

@media (max-width: 520px) {
  .ticker {
    top: 120px
  }

  .ticker__label {
    font-size: 10px
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px
}

.hero__title {
  font-size: 44px;
  line-height: 1.03;
  margin: 0 0 10px;
  color: rgba(248, 251, 255, .98);
  text-shadow: 0 14px 45px rgba(0, 0, 0, .35);
}

/* subtle Cuba accent line under the title */
.hero__title::after {
  content: "";
  display: block;
  height: 4px;
  width: 72px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(29, 78, 216, .95), rgba(255, 255, 255, .9), rgba(207, 20, 43, .95));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.hero__subtitle {
  color: rgba(248, 251, 255, .78);
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.35
}

.pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px
}

.pill {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px
}

.player {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.player__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.btn {
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700
}

.btn:hover {
  background: rgba(255, 255, 255, .10)
}

.btn--primary {
  border-color: rgba(29, 78, 216, .55);
  background: linear-gradient(135deg, rgba(29, 78, 216, .26), rgba(207, 20, 43, .16))
}

.btn--primary:hover {
  background: linear-gradient(135deg, rgba(29, 78, 216, .34), rgba(207, 20, 43, .22))
}

.btn--sm {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px
}

.article-bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.65
}

.article-bullets li {
  margin: 0 0 8px
}

.muted {
  color: var(--muted)
}

.section {
  padding: 18px 0
}

.section__title {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .02em
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px
}

.section__head .section__title {
  margin: 0
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr
  }
}

/* Form */
.form {
  display: grid;
  gap: 12px
}

.form__row {
  display: grid;
  gap: 6px
}

.form__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase
}

.form__input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: var(--text)
}

.form__input:focus {
  outline: 2px solid rgba(34, 211, 238, .35);
  outline-offset: 2px
}

.form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

/* Modal (SPA pages) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none
}

.modal.is-open {
  display: block
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55)
}

.modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  /* Blue/navy modal to match site */
  background: linear-gradient(180deg, rgba(8, 20, 38, .98), rgba(5, 10, 18, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .50)
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  position: sticky;
  top: 0;
  background: linear-gradient(90deg, rgba(29, 78, 216, .20), rgba(8, 20, 38, .88), rgba(207, 20, 43, .16));
  backdrop-filter: blur(10px)
}

.modal__body {
  padding: 14px
}

.news-item a {
  color: var(--text);
  text-decoration: none
}

.news-item a:hover {
  text-decoration: underline
}

.news-item__img {
  display: block;
  margin: -6px -6px 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border)
}

.news-item__img img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: rgba(0, 0, 0, .2)
}

.news-item__meta {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px
}

.footer {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  padding: 18px 0 calc(110px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .15)
}

@media (max-width: 520px) {
  .footer {
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
  }
}

/* Now playing card (in hero) */
.nowcard {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04)
}

.nowcard__art {
  width: 160px;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, .25)
}

.nowcard__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.nowcard__kicker {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 900
}

.nowcard__title {
  font-weight: 950;
  font-size: 22px;
  line-height: 1.12;
  max-width: 720px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nowcard__artist {
  font-size: 14px;
  max-width: 720px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

@media (max-width: 520px) {
  .nowcard {
    align-items: flex-start
  }

  .nowcard__art {
    width: 110px;
    height: 110px
  }

  .nowcard__title {
    max-width: 240px
  }

  .nowcard__artist {
    max-width: 240px
  }
}

/* Sticky bottom player */
.playerbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Light (soft white) player over dark site */
  background: rgba(255, 255, 255, .86);
  color: #0b1320;
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .35);
  z-index: 50
}

.playerbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0
}

.playerbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px
}

/* Tiny equalizer animation (shows activity when playing) */
.eq {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 18px;
  width: 30px;
  opacity: .78
}

.eq span {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(29, 78, 216, .95), rgba(207, 20, 43, .90));
  box-shadow: 0 0 0 1px rgba(11, 19, 32, .10);
  transform-origin: bottom;
  animation: eqBounce 1100ms ease-in-out infinite;
}

.eq span:nth-child(2) {
  animation-duration: 920ms;
  height: 12px
}

.eq span:nth-child(3) {
  animation-duration: 1200ms;
  height: 10px
}

.eq span:nth-child(4) {
  animation-duration: 840ms;
  height: 14px
}

/* When actually playing, make it pop a bit more */
.playerbar.is-playing .eq {
  opacity: 1
}

.playerbar.is-playing .eq span {
  animation-duration: 650ms
}

@keyframes eqBounce {

  0%,
  100% {
    transform: scaleY(.35)
  }

  50% {
    transform: scaleY(1.0)
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq span {
    animation: none
  }
}

.playerbar__badge {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(29, 78, 216, .35);
  background: linear-gradient(135deg, rgba(29, 78, 216, .12), rgba(207, 20, 43, .10));
  color: #0b1320;
}

.playerbar__title {
  font-weight: 950;
  line-height: 1.1
}

.playerbar__status {
  font-size: 12px
}

.playerbar__np {
  font-size: 12px;
  color: #0b1320;
  opacity: .88;
  margin-top: 2px;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.playerbar__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.playerbar__vol {
  display: flex;
  align-items: center
}

#volRange {
  width: 160px
}

/* Make buttons readable on the light playerbar */
.playerbar .btn {
  border: 1px solid rgba(11, 19, 32, .18);
  background: rgba(11, 19, 32, .06);
  color: #0b1320
}

.playerbar .btn:hover {
  background: rgba(11, 19, 32, .10)
}

.playerbar .btn--primary {
  border-color: rgba(29, 78, 216, .35);
  background: linear-gradient(135deg, rgba(29, 78, 216, .16), rgba(207, 20, 43, .10))
}

.playerbar .btn--primary:hover {
  background: linear-gradient(135deg, rgba(29, 78, 216, .22), rgba(207, 20, 43, .14))
}

/* Override muted color inside playerbar */
.playerbar .muted {
  color: rgba(11, 19, 32, .72)
}

/* Range (volume) nicer on light background */
.playerbar input[type="range"] {
  accent-color: var(--accent);
}

@media (max-width: 520px) {
  .playerbar__inner {
    flex-direction: column;
    align-items: stretch
  }

  .playerbar__left {
    min-width: unset
  }

  #volRange {
    width: 100%
  }

  .playerbar__np {
    max-width: 100%
  }
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.footer__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.footer__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px
}

.footer__links a:hover {
  color: var(--text)
}

.floating-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .45);
  color: var(--text);
  text-decoration: none;
  font-weight: 800
}

.floating-whatsapp:hover {
  background: rgba(34, 197, 94, .25)
}

.gotop {
  position: fixed;
  right: 18px;
  bottom: 120px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 900;
  border: 1px solid rgba(34, 211, 238, .45);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease
}

.gotop:hover {
  background: rgba(255, 255, 255, .12)
}

.gotop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}

@media (max-width: 520px) {
  .gotop {
    bottom: 160px
  }
}

/* App Buttons */
.app-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.btn--app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  padding: 10px 16px;
  transition: all .2s ease;
  text-decoration: none !important;
  color: var(--text);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600
}

.btn--app:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .4);
  transform: translateY(-2px)
}

.btn--app svg {
  opacity: .9
}

.header-apps {
  display: flex;
  gap: 8px;
  justify-self: end
}

.btn--app-sm {
  padding: 8px;
  border-radius: 50%;
  aspect-ratio: 1;
  justify-content: center
}

@media (max-width: 520px) {
  .header-apps {
    display: none
  }
}
/* Social Icons */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--text);
  transition: all .2s ease;
  padding: 0
}
.social-icon:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-2px);
  color: #fff
}