/* =========================================================
   Radio Cristo Vive — Estilos
   ========================================================= */
:root{
  --navy-deep:#0a1220;
  --navy:#101d33;
  --navy-mid:#16233f;
  --navy-soft:#22314f;
  --gold:#f3a73c;
  --orange:#f97316;
  --sky:#6ba3dc;
  --cream:#f7f3e9;
  --cream-dim:#d9d2c1;
  --line: rgba(247,243,233,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-deep);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:92px; /* espacio para el reproductor flotante */
}
body.menu-open{overflow:hidden;}
::selection{background:var(--orange); color:var(--navy-deep);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:'Space Mono',monospace;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:11.5px;
  color:var(--gold);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(249,115,22,.6);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(249,115,22,.55);}
  70%{box-shadow:0 0 0 9px rgba(249,115,22,0);}
  100%{box-shadow:0 0 0 0 rgba(249,115,22,0);}
}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; line-height:1.05;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  padding:16px 0;
  transition:background .35s ease, border-color .35s ease, padding .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(10,18,32,0.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding:11px 0;
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.brandmark{display:flex; align-items:center; gap:12px;}
.brandmark .ring{
  width:50px;height:50px;border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
  background:var(--navy-deep);
}
.brandmark .ring::after{
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(243,167,60,0.35);
}
.brandmark .ring img{width:120px; height:120px; object-fit:contain;}
.brandname{font-family:'Fraunces',serif; font-size:17px; font-weight:600; letter-spacing:0.01em;}
.brandname span{display:block; font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.22em; color:var(--sky); font-weight:700;}

.navlinks{display:flex; align-items:center; gap:8px;}
.navlinks ul{display:flex; gap:6px; list-style:none;}
.navlinks a{
  font-size:13.5px; color:var(--cream-dim); transition:color .2s, background .2s;
  padding:9px 14px; border-radius:100px; display:inline-block;
}
.navlinks a:hover{color:var(--gold); background:rgba(243,167,60,0.08);}
.nav-cta{
  font-family:'Space Mono',monospace !important; font-size:11.5px !important;
  letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(160deg, var(--gold), var(--orange));
  color:var(--navy-deep) !important; font-weight:700;
  padding:10px 18px !important;
}
.nav-cta:hover{color:var(--navy-deep) !important; filter:brightness(1.08); background:linear-gradient(160deg, var(--gold), var(--orange)) !important;}

.burger{
  display:none;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
  position:relative; cursor:pointer; flex-shrink:0;
}
.burger span{
  position:absolute; left:12px; width:18px; height:1.5px; background:var(--cream);
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.burger span:nth-child(1){top:16px;}
.burger span:nth-child(2){top:21px;}
.burger span:nth-child(3){top:26px;}
.burger.open span:nth-child(1){top:21px; transform:rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){top:21px; transform:rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:0; z-index:190;
  background:rgba(10,18,32,0.98);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:32px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.mobile-menu a{
  font-family:'Fraunces',serif; font-size:34px; color:var(--cream);
  padding:10px 0; border-bottom:1px solid var(--line);
}
.mobile-menu .mm-foot{
  margin-top:40px; display:flex; gap:14px;
}
.mobile-menu .mm-foot a{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); border:none; padding:0;
}

@media (max-width:860px){
  .navlinks{display:none;}
  .burger{display:block;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:20px;
  overflow:hidden;
}
.hero-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% 62%, rgba(243,167,60,0.35), transparent 60%),
    linear-gradient(180deg, #050a14 0%, #0d1830 38%, #16264a 62%, #1b2c50 100%);
  z-index:0;
}
.rays{
  position:absolute; left:50%; bottom:29%; width:1400px; height:1400px;
  transform:translate(-50%,0%);
  z-index:1;
  opacity:.55;
}
.rays span{
  position:absolute; left:50%; top:50%; width:2px; height:700px;
  background:linear-gradient(180deg, rgba(243,167,60,0.55), transparent 70%);
  transform-origin:top center;
}
.arcs{
  position:absolute; left:50%; bottom:27%; transform:translateX(-50%);
  z-index:1; width:900px; height:460px; pointer-events:none;
}
.arcs svg{width:100%; height:100%; opacity:.5;}
.arcs path{
  fill:none; stroke:var(--sky); stroke-width:1.4; stroke-dasharray:6 10;
  animation:arcmove 6s linear infinite;
}
@keyframes arcmove{to{stroke-dashoffset:-160;}}

.mountains{
  position:absolute; bottom:0; left:0; width:100%; z-index:2; line-height:0;
}
.mountains svg{width:100%; height:auto; display:block;}

.hero-content{
  position:relative; z-index:5;
  text-align:center;
  padding:0 24px 190px;
}
.hero-content .eyebrow{justify-content:center; margin-bottom:22px;}
.hero h1{
  font-size:clamp(36px, 8vw, 84px);
  color:var(--cream);
  letter-spacing:-0.01em;
}
.hero h1 em{
  font-style:italic; font-weight:500; color:var(--gold);
}
.hero p.lede{
  max-width:520px; margin:22px auto 0;
  color:var(--cream-dim); font-size:16.5px; line-height:1.6;
}

.hero-play{
  margin:44px auto 0;
  width:104px; height:104px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffd98a, var(--gold) 45%, var(--orange) 100%);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15), 0 20px 60px -10px rgba(249,115,22,0.55);
  position:relative;
  transition:transform .25s ease;
}
.hero-play:hover{transform:scale(1.05);}
.hero-play::before{
  content:'';
  position:absolute; inset:-16px; border-radius:50%;
  border:1px solid rgba(243,167,60,0.4);
  animation:ringpulse 2.6s ease-out infinite;
}
@keyframes ringpulse{
  0%{transform:scale(0.9); opacity:.8;}
  100%{transform:scale(1.5); opacity:0;}
}
.hero-play svg{width:34px; height:34px; fill:#0a1220; margin-left:4px;}
.hero-play.playing svg{margin-left:0;}
.hero-caption{
  margin-top:16px; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim);
}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--gold); color:var(--navy-deep);
  overflow:hidden; white-space:nowrap; position:relative; z-index:6;
  border-top:1px solid rgba(10,18,32,0.15);
}
.marquee-track{
  display:inline-flex; gap:48px; padding:12px 0;
  animation:scroll 26s linear infinite;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.marquee-track span{display:flex; align-items:center; gap:14px;}
.marquee-track span::after{content:'✦'; opacity:.5; font-size:10px;}
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---------- SECTIONS ---------- */
section{
    position:relative;
    padding:clamp(80px,9vw,140px) 0;
}

.container{
    width:min(1180px, calc(100% - 48px));
}

@media(max-width:768px){

    .container{
        width:calc(100% - 34px);
    }

}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:56px; flex-wrap:wrap; margin-top:56px;

}
.section-head h2{font-size:clamp(28px,4vw,46px); color:var(--cream);}
.section-head p{color:var(--cream-dim); max-width:340px; font-size:14.5px; line-height:1.6;}

/* Programacion */
.schedule{border-top:1px solid var(--line);}
.slot{
  display:grid; grid-template-columns:120px 1fr auto;
  align-items:center; gap:24px;
  padding:24px 0; border-bottom:1px solid var(--line);
  transition:background .2s;
}
.slot:hover{background:rgba(247,243,233,0.02);}
.slot .time{font-family:'Space Mono',monospace; color:var(--gold); font-size:13px;}
.slot .info h3{font-size:19px; font-weight:600; color:var(--cream); font-family:'Fraunces',serif;}
.slot .info p{font-size:13px; color:var(--cream-dim); margin-top:4px;}
.tag{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; border:1px solid var(--line); color:var(--cream-dim);
  white-space:nowrap;
}
.tag.live{color:var(--navy-deep); background:var(--orange); border-color:var(--orange); font-weight:700;}

/* Sobre / mision */
.about{
  background:var(--navy);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.about-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:center;
}
.about h2{font-size:clamp(28px,4vw,44px); margin-bottom:22px;}
.about h2 em{font-style:italic; color:var(--gold);}
.about p{color:var(--cream-dim); font-size:16px; line-height:1.75; max-width:480px;}
.stat-row{display:flex; gap:44px; margin-top:40px; flex-wrap:wrap;}
.stat b{display:block; font-family:'Fraunces',serif; font-size:36px; color:var(--gold);}
.stat span{font-size:12px; color:var(--cream-dim); letter-spacing:.03em;}
.logo-panel{
  aspect-ratio:1/1; border-radius:28px;
  background:radial-gradient(circle at 50% 40%, rgba(243,167,60,0.18), transparent 65%), var(--navy-mid);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.logo-panel img{width:66%; height:66%; object-fit:contain; position:relative; z-index:2; border-radius:50%;}
.logo-panel .glowline{
  position:absolute; width:180%; height:1px; background:linear-gradient(90deg, transparent, rgba(243,167,60,.5), transparent);
  animation:sweep 5s ease-in-out infinite;
}
@keyframes sweep{ 0%,100%{transform:translateY(-60px);} 50%{transform:translateY(60px);} }

/* Como escuchar / apps */
.listen-ways{border-top:1px solid var(--line);}
.ways-grid{
  margin-bottom:40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.way{background:var(--navy-deep); padding:38px 30px;}
.way .num{font-family:'Space Mono',monospace; color:var(--sky); font-size:12px; letter-spacing:.1em;}
.way h3{font-family:'Fraunces',serif; font-size:22px; margin:14px 0 10px; color:var(--cream);}
.way p{color:var(--cream-dim); font-size:14px; line-height:1.6;}
.way a.btn-inline{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid rgba(243,167,60,0.4); padding-bottom:2px;
}

/* Testimonios */
.voices{background:var(--navy); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.voices-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.voice-card{
  background:var(--navy-mid); border:1px solid var(--line); border-radius:18px; padding:30px;
}
.voice-card p{font-family:'Fraunces',serif; font-style:italic; font-size:18px; line-height:1.55; color:var(--cream);}
.voice-card .who{margin-top:20px; display:flex; align-items:center; gap:10px;}
.voice-card .dot{width:8px;height:8px;border-radius:50%; background:var(--orange);}
.voice-card .who span{font-family:'Space Mono',monospace; font-size:11.5px; color:var(--cream-dim); letter-spacing:.05em;}

/* CTA */
.cta{
  text-align:center; padding:120px 24px 130px;
  position:relative;
}
.cta h2{font-size:clamp(30px,5vw,54px); max-width:680px; margin:0 auto 20px;}
.cta h2 em{font-style:italic; color:var(--gold);}
.cta p{color:var(--cream-dim); max-width:420px; margin:0 auto 36px; font-size:15.5px;}
.social-row{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
.social-pill{
  display:flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:100px; border:1px solid var(--line);
  font-size:13.5px; color:var(--cream); transition:.2s;
}
.social-pill:hover{border-color:var(--gold); color:var(--gold); background:rgba(243,167,60,0.06);}
.social-pill svg{width:15px;height:15px;}

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--navy);
  padding:70px 0 26px;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:48px;
  padding-bottom:50px; border-bottom:1px solid var(--line);
}
.footer-brand p{
  margin-top:16px; color:var(--cream-dim); font-size:14px; line-height:1.7; max-width:280px;
}
.footer-social{display:flex; gap:10px; margin-top:22px;}
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.footer-social a:hover{border-color:var(--gold); background:rgba(243,167,60,0.08);}
.footer-social svg{width:15px; height:15px; fill:var(--cream-dim);}
.footer-social a:hover svg{fill:var(--gold);}

.footer-col h4{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:14px; color:var(--cream-dim); transition:color .2s;}
.footer-col a:hover{color:var(--cream);}
.footer-col .foot-schedule{font-size:14px; color:var(--cream-dim); line-height:1.9;}
.footer-col .foot-schedule b{color:var(--cream); font-weight:600;}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:26px;
}
.footer-bottom p{font-size:12.5px; color:var(--cream-dim);}
.footer-bottom .made{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--cream-dim);}
.footer-bottom .made b{color:var(--gold);}

/* ---------- FLOATING PLAYER ---------- */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; justify-content:center;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.player-bar{
  pointer-events:all;
  width:100%; max-width:640px;
  background:rgba(16,29,51,0.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(247,243,233,0.14);
  border-radius:100px;
  padding:9px 10px 9px 9px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,0.6);
}
.p-play{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(160deg, var(--gold), var(--orange));
  border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.p-play svg{width:16px;height:16px; fill:#0a1220;}
.p-meta{flex:1; min-width:0;}
.p-meta .p-title{font-size:13px; font-weight:600; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.p-meta .p-sub{
  display:flex; align-items:center; gap:6px;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim);
  margin-top:2px;
}
.p-meta .p-sub .liveDot{
  width:6px;height:6px;border-radius:50%; background:var(--orange);
  animation:pulseDot 2s infinite;
}
.wave{display:flex; align-items:flex-end; gap:3px; height:22px; margin-right:2px;}
.wave i{
  width:3px; background:var(--sky); border-radius:2px; display:block;
  animation:wave 1.1s ease-in-out infinite; opacity:.85;
}
.wave i:nth-child(1){height:8px; animation-delay:0s;}
.wave i:nth-child(2){height:16px; animation-delay:.15s;}
.wave i:nth-child(3){height:10px; animation-delay:.3s;}
.wave i:nth-child(4){height:20px; animation-delay:.45s;}
.wave i:nth-child(5){height:7px; animation-delay:.6s;}
.player-bar.paused .wave i{animation-play-state:paused; height:4px !important;}
@keyframes wave{ 0%,100%{transform:scaleY(0.4);} 50%{transform:scaleY(1);} }

.p-vol{display:flex; align-items:center; gap:8px; padding-right:6px;}
.p-vol svg{width:16px;height:16px; fill:var(--cream-dim); flex-shrink:0;}
.p-vol input[type=range]{
  -webkit-appearance:none; width:64px; height:3px; background:rgba(247,243,233,0.2); border-radius:4px; outline:none;
}
.p-vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--cream); cursor:pointer;
}

/* =========================================================
   RESPONSIVE — Tablet (≤1024px)
   ========================================================= */
@media (max-width:1024px){
  section{padding:80px 0;}
  .about-grid{gap:44px;}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr; gap:36px;}
  .footer-col:nth-child(2){display:none;} /* oculta col menos prioritaria en tablet */
}

/* =========================================================
   RESPONSIVE — Tablet/Mobile (≤860px)
   ========================================================= */
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;}
  .voices-grid{grid-template-columns:1fr;}
  .ways-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
  .footer-col:nth-child(2){display:flex; flex-direction:column;}
  .footer-brand{grid-column:1/-1;}
}

/* =========================================================
   RESPONSIVE — Mobile (≤640px)
   ========================================================= */
@media (max-width:640px){
  .container{padding:0 18px;}
  section{padding:64px 0;}
  .hero{min-height:82vh;}
  .hero-content{padding-bottom:150px;}
  .hero-play{width:88px; height:88px;}
  .hero-play svg{width:28px; height:28px;}
  .slot{grid-template-columns:1fr; gap:8px;}
  .slot .time{font-size:12px;}
  .stat-row{gap:28px;}
  .stat b{font-size:28px;}
  .social-row{gap:10px;}
  .footer-grid{grid-template-columns:1fr; row-gap:30px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .p-vol{display:none;}
  .p-meta .p-title{font-size:12px;}
  .mobile-menu a{font-size:26px;}
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}