/* CFCDD – estilos base (2025-11-16) */
:root{
  --cd-brand:   #0B2B60;
  --cd-brand-2: #0A1E46;
  --cd-primary:#0b2a66;
  --cd-glass-bg: rgba(11,42,102,.82);
  --cd-glass-blur: 10px;
}
html,body{scroll-behavior:smooth}
body.bg-body{background:#f7f9fc;color:#192132}

/* Header pegado */
.header-sticky{position:sticky;top:0;z-index:1050}

/* Topbar */
.topbar{
  background: linear-gradient(90deg,var(--cd-brand),var(--cd-brand-2));
  color:#fff
}

/* Navbar (glass) */
.cd-navbar{
  background: var(--cd-glass-bg);
  backdrop-filter: blur(var(--cd-glass-blur));
  -webkit-backdrop-filter: blur(var(--cd-glass-blur));
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: all .25s ease;
}
.cd-navbar .nav-link{color:rgba(255,255,255,.9)}
.cd-navbar .nav-link:hover,
.cd-navbar .nav-link.active{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.35)}
.cd-navbar .navbar-toggler{border-color:rgba(255,255,255,.35)}
.cd-navbar .navbar-toggler:focus{box-shadow:0 0 0 .1rem rgba(255,255,255,.35)}

/* Shrink */
.cd-navbar.cd-shrink{
  background: rgba(11,42,102,.95);
  padding-top:.2rem!important; padding-bottom:.2rem!important;
  box-shadow:0 6px 20px rgba(0,0,0,.25)
}

/* Logo ancho + cuadrado */
.brand-logo-wide{display:block;height:52px;max-width:340px;width:auto;object-fit:contain}
@media (min-width:1400px){.brand-logo-wide{height:60px}}
.brand-logo-square{height:48px;width:48px;border-radius:8px}

/* Subrayado bonito */
.nav-underline{position:relative;padding-bottom:.25rem}
.nav-underline::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:linear-gradient(90deg,#79c3ff,#fff);transition:width .25s ease
}
.nav-underline:hover::after,.nav-underline.active::after{width:100%}

/* Botón En vivo */
.live-pill{border-radius:999px;padding:.5rem 1rem}
.live-dot{
  width:.55rem;height:.55rem;margin-right:.5rem;display:inline-block;border-radius:999px;
  background:#ff4d4d; box-shadow:0 0 0 0 rgba(255,77,77,.7);
  animation: livepulse 1.7s infinite
}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,77,.7)}
  70%{box-shadow:0 0 0 12px rgba(255,77,77,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}
}

/* Hero video (si lo usas en home) */
.hero-video{position:relative;isolation:isolate;min-height:clamp(360px,55vh,720px);overflow:hidden}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.hero-video .content{position:relative;z-index:2;color:#fff;padding:clamp(2rem,6vw,5rem) 0}

/* Footer */
.footer{background:var(--cd-primary);color:#fff}
.footer .text-white-50{color:rgba(255,255,255,.75)!important}

/* Mobile ajustes */
@media (max-width:991.98px){.brand-logo-wide{display:none}}
@media (min-width:992px){.brand-logo-square{display:none}}
/* Botón info (mini-FAB) junto al FAB de play */
#radio-info-fab{
  position: fixed; bottom: 90px; right: 20px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #111; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:9999; cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}
#radio-info-fab:hover{ transform: translateY(-2px); }
@media (max-width: 575.98px){
  #radio-info-fab{ bottom: 85px; right: 90px; }
}
/* Mini-FAB negro (info) */
#radio-info-fab{
  position: fixed; bottom: 90px; right: 20px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #111; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:9999; cursor:pointer;
  transition:transform .2s ease, opacity .2s ease; border:0;
}
#radio-info-fab:hover{ transform: translateY(-2px); }
#radio-info-fab i{ font-size:18px; line-height:1; }

/* Evitar que tape al FAB de play: en móviles lo movemos a la izquierda */
@media (max-width: 575.98px){
  #radio-info-fab{ bottom: 85px; right: 90px; }
}
<style>
  /* Botón play existente (id=radio-fab) ya lo tienes */
  /* Segundo FAB: info del radio */
  #radio-info-fab{
    position: fixed;
    bottom: 15px;
    right: 90px; /* separa del play */
    width: 60px; height:60px; border-radius:50%;
    background: linear-gradient(135deg, #0B1440, #1e5fff);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:22px; box-shadow: 0 4px 14px rgba(0,0,0,.4);
    cursor:pointer; z-index: 9998; transition: transform .25s ease;
  }
  #radio-info-fab:hover{ transform: scale(1.06) }
  #radio-info-fab span{
    position:absolute; bottom: 72px; background:#0b1440; color:#fff;
    padding:4px 8px; border-radius:8px; font-size:12px; opacity:0; pointer-events:none; transition:.2s;
  }
  #radio-info-fab:hover span{ opacity:1 }
  
/* Tarjetas con imagen + velo azul y hover a color */
.promo-grid .promo-card{
  position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
  height:220px; border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  background-size:cover; background-position:center; box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.promo-grid .promo-card::before{
  content:""; position:absolute; inset:0; background:rgba(11,43,96,.55); /* azul translúcido */
  transition:background .25s ease;
}
.promo-grid .promo-card:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(0,0,0,.16); }
.promo-grid .promo-card:hover::before{ background:rgba(11,43,96,0); } /* sin velo al hover */

.promo-badge{
  position:absolute; top:16px; left:16px; width:56px; height:56px; border-radius:999px;
  background:#fff; color:#0b2b60; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 6px 14px rgba(0,0,0,.15); z-index:2;
}
.promo-title{
  position:relative; z-index:2; margin:16px; font-weight:800; line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.45); font-size:28px;
}

/* Responsive tweaks */
@media (max-width: 575.98px){
  .promo-grid .promo-card{ height:190px; }
  .promo-badge{ width:52px; height:52px; font-size:20px; }
  .promo-title{ font-size:24px; }
}


</style>