:root{
  --bg0:#0b1220;
  --bg1:#0f172a;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.12);
  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.55);
  --brand:#60a5fa;
  --brand2:#a78bfa;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 22px;
}

body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 500px at 12% 10%, rgba(96,165,250,.25), transparent 55%),
    radial-gradient(800px 500px at 88% 14%, rgba(167,139,250,.20), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #070b14 100%);
  color:var(--text);
  min-height:100vh;
}

/* Topbar */
.topbar{
  position: sticky; top:0; z-index: 100;
  background: rgba(10,16,30,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.brandchip{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brandlogo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(167,139,250,.25));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
  color: #fff;
}
.navbtn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  transition: .25s ease;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.navbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

/* Layout card */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 360px at 20% 15%, rgba(96,165,250,.35), transparent 55%),
    radial-gradient(700px 360px at 85% 10%, rgba(167,139,250,.25), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; }
.hero-title{
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-sub{ color: var(--muted); max-width: 52ch; }
.hero-media{
  border-radius: calc(var(--radius) - 2px);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  height: 100%;
  min-height: 340px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  position:relative;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,16,30,.0), rgba(10,16,30,.55));
}

/* Quick actions */
.quick{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 18px;
}
.qbtn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 700;
  transition: .25s ease;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
}
.qbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.qbtn.primary{
  border: none;
  background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.85));
  color:#081022;
  box-shadow: 0 18px 40px rgba(96,165,250,.22);
}
.qicon{
  width:38px; height:38px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
.qbtn.primary .qicon{
  background: rgba(255,255,255,.35);
  border-color: rgba(255,255,255,.35);
}

/* Section headings */
.section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.section-sub{ color: var(--muted2); }

/* Cards list */
.cardy{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  transition: .25s ease;
}
.cardy:hover{ transform: translateY(-2px); background: rgba(255,255,255,.08); }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: .82rem;
}
.chip.blue{ background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.22); }
.chip.red{ background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.22); }
.chip.green{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.22); }

/* Zoom cards */
.zoomCard{
  display:flex; gap:14px; align-items:flex-start;
}
.zIcon{
  width:48px; height:48px;
  border-radius: 16px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  font-size: 1.25rem;
}
.zMeta small{ color: var(--muted2); }
.zBtns{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.miniBtn{
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  transition:.25s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.miniBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.miniBtn.fill{
  border:none;
  background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.85));
  color:#081022;
}

/* Prayer */
.prayer{
  padding: 18px;
  background: linear-gradient(135deg, rgba(96,165,250,.16), rgba(167,139,250,.14));
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form-control, textarea{
  background: rgba(10,16,30,.55) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}
.form-control::placeholder, textarea::placeholder{ color: rgba(234,240,255,.55) !important; }
.sendBtn{
  border:none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.85));
  color:#081022;
}

/* Map */
.mapwrap{
  overflow:hidden;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

/* Footer */
footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,30,.35);
  color: var(--muted2);
}
footer a{ color: var(--text); text-decoration:none; opacity:.9; }
footer a:hover{ opacity:1; text-decoration:underline; }

@media (max-width: 991px){
  .hero-media{ min-height: 260px; }
}

/* Header acciones */
.sep{
width:1px; height:26px;
background: rgba(255,255,255,.14);
margin: 0 6px;
border-radius: 99px;
}

.navbtn-fill{
border: none;
background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.85));
color:#081022 !important;
box-shadow: 0 14px 35px rgba(96,165,250,.18);
}
.navbtn-fill:hover{
background: linear-gradient(135deg, rgba(96,165,250,.98), rgba(167,139,250,.92));
}

/* Botón menú mobile */
.btnMenu{
width:44px; height:44px;
border-radius: 14px;
border:1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: var(--text);
display:grid;
place-items:center;
transition:.25s ease;
}
.btnMenu:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
}

/* Panel mobile */
.mobilePanel{
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius: 18px;
padding: 10px;
}
.mobileLink{
display:flex;
align-items:center;
gap:10px;
padding: 12px 12px;
border-radius: 14px;
text-decoration:none;
color: var(--text);
font-weight: 800;
border:1px solid transparent;
background: transparent;
transition:.2s ease;
}
.mobileLink i{ opacity:.9; }
.mobileLink:hover{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.12);
transform: translateY(-1px);
}
.mobileDivider{
height:1px;
background: rgba(255,255,255,.12);
margin: 8px 6px;
border-radius: 99px;
}

/* Accesos Rápidos (reemplaza Noticias) */
.quickGrid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.quickCard{
position: relative;
overflow:hidden;
border-radius: 18px;
padding: 16px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
text-decoration:none;
color: var(--text);
transition: .25s ease;
min-height: 98px;
}

.quickCard:hover{
transform: translateY(-2px);
background: rgba(255,255,255,.09);
}

.quickCard::before{
content:"";
position:absolute;
inset:-2px;
background:
radial-gradient(260px 160px at 18% 18%, rgba(96,165,250,.20), transparent 60%),
radial-gradient(260px 160px at 90% 10%, rgba(167,139,250,.16), transparent 60%);
pointer-events:none;
}

.quickInner{
position:relative;
z-index:1;
display:flex;
gap: 12px;
align-items:flex-start;
}

.quickIcon{
width: 46px; height: 46px;
border-radius: 16px;
display:grid; place-items:center;
background: rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
flex:0 0 auto;
font-size: 1.35rem;
}

.quickTitle{
font-weight: 900;
letter-spacing: -0.01em;
margin: 0;
line-height: 1.1;
}

.quickDesc{
margin: 6px 0 0 0;
color: var(--muted2);
font-size: .88rem;
}

.quickBadge{
position:absolute;
right: 12px;
top: 12px;
border-radius: 999px;
padding: 6px 10px;
font-weight: 900;
font-size: .78rem;
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: var(--text);
}

/* Variantes */
.quickCard.radio .quickIcon{
background: rgba(96,165,250,.14);
border-color: rgba(96,165,250,.22);
}
.quickCard.biblia .quickIcon{
background: rgba(34,197,94,.14);
border-color: rgba(34,197,94,.22);
}
.quickCard.fb .quickIcon{
background: rgba(59,130,246,.14);
border-color: rgba(59,130,246,.22);
}
.quickCard.yt .quickIcon{
background: rgba(248,113,113,.14);
border-color: rgba(248,113,113,.22);
}

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

/* Modal Radio (glass) */
.radioModal{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
box-shadow: var(--shadow);
}

/* Backdrop más oscuro */
.modal-backdrop.show { opacity: .75; }

/* Modal MÁS sólido */
.radioModal{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,16,30,.94) !important; /* <-- menos transparente */
backdrop-filter: none !important;
box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

/* Caja interna también un poco más sólida */
.radioBox{
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
}


.radioBox{
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
padding: 16px;
position: relative;
overflow: hidden;
}
.radioBox::before{
content:"";
position:absolute;
inset:-2px;
background:
radial-gradient(320px 200px at 18% 18%, rgba(96,165,250,.22), transparent 60%),
radial-gradient(320px 200px at 88% 20%, rgba(167,139,250,.18), transparent 60%);
pointer-events:none;
}
.radioBox > *{ position:relative; z-index:1; }

.radioRow{
display:flex;
gap: 14px;
align-items:center;
}

.radioArt{
width:58px; height:58px;
border-radius: 20px;
display:grid; place-items:center;
background: rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
font-size: 1.6rem;
flex: 0 0 auto;
}

.radioName{
font-weight: 900;
letter-spacing: -0.02em;
}
.radioNow{
margin-top: 6px;
color: var(--muted);
font-weight: 700;
}
.radioLink{
margin-top: 8px;
color: var(--muted2);
}
.radioLink a{
color: var(--text);
text-decoration:none;
opacity:.9;
}
.radioLink a:hover{ text-decoration:underline; opacity:1; }

.radioControls{
display:flex;
align-items:center;
gap: 12px;
flex-wrap:wrap;
justify-content:space-between;
margin-top: 16px;
}

.radioBtn{
width:54px; height:54px;
border-radius: 18px;
border:none;
background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.85));
color:#081022;
font-size: 1.7rem;
box-shadow: 0 18px 40px rgba(96,165,250,.18);
display:grid; place-items:center;
transition: .25s ease;
}
.radioBtn:hover{ transform: translateY(-2px); }
.radioBtn:active{ transform: translateY(0px) scale(.98); }

.radioVol{
display:flex; align-items:center; gap:10px;
padding: 10px 12px;
border-radius: 999px;
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
}
.radioVol input[type="range"]{ width: 160px; }

@media (max-width: 575px){
.radioVol input[type="range"]{ width: 120px; }
}

/* Evitar líneas/bordes raros en mobile */
.hero-media { background: rgba(255,255,255,.04); }
.hero-media img{
display:block;     /* <- evita espacios/líneas debajo de imágenes */
width:100%;
height:100%;
object-fit: cover;
}

/* En mobile: foto más alta y bien proporcional */
@media (max-width: 991px){
.hero-media{ min-height: 280px; }
}



/* Forzar títulos claros (ganarle a Bootstrap) */
h1, h2, h3, h4, h5, h6,
.section-title,
.fw-bold,
.hero-title,
.quickTitle,
.radioName {
  color: #e4e4e4 !important;
}

/* Por si algún link dentro del título lo oscurece */
.section-title a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #e4e4e4 !important;
}