:root {
    --bg-dark: #050507;
    --glass-bg: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --accent-cyan: #00E5FF;
    --accent-purple: #7000FF;
    --text-main: #FFFFFF;
    --text-muted: #A1A1AA;
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top: 100px; }
body { background-color:var(--bg-dark); color:var(--text-main); font-family:var(--font-body); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration: none !important; color: inherit; border: none; outline: none; }

.ambient-light { position:fixed; border-radius:50%; filter:blur(120px); z-index:-1; opacity:0.5; animation:float 20s infinite ease-in-out alternate; }
.light-1 { width:40vw; height:40vw; background:var(--accent-purple); top:-10vw; left:-10vw; }
.light-2 { width:30vw; height:30vw; background:var(--accent-cyan); bottom:10vw; right:-5vw; animation-delay:-5s; }
@keyframes float { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(10vw,5vh) scale(1.2);} }

@media(max-width:768px){
    .light-1 { width:80vw; height:80vw; filter:blur(80px); opacity:0.6; }
    .light-2 { width:70vw; height:70vw; filter:blur(80px); opacity:0.5; }
}

nav { position:fixed; top:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.5rem 4rem; background:rgba(5,5,7,0.5); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); z-index:300; }
.logo { font-family:var(--font-display); font-size:1.5rem; font-weight:900; letter-spacing:-1px; color:var(--text-main); text-decoration:none; }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { color:var(--text-muted); text-decoration:none; font-size:0.95rem; font-weight:500; transition:color 0.3s; }
.nav-links a:hover { color:var(--text-main); }
.btn-live { display:flex; align-items:center; gap:0.6rem; background:var(--glass-bg); border:1px solid var(--glass-border); padding:0.6rem 1.2rem; border-radius:2rem; color:var(--text-main); font-family:var(--font-display); font-weight:700; font-size:0.8rem; cursor:pointer; transition:all 0.3s; }
.btn-live:hover { background:rgba(255,255,255,0.1); border-color:var(--accent-cyan); box-shadow:0 0 15px rgba(0,229,255,0.2); }
.pulse-dot { width:8px; height:8px; background:var(--accent-cyan); border-radius:50%; box-shadow:0 0 10px var(--accent-cyan); animation:pulse 1.5s infinite; flex-shrink:0; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(0,229,255,0.7);} 70%{box-shadow:0 0 0 10px rgba(0,229,255,0);} 100%{box-shadow:0 0 0 0 rgba(0,229,255,0);} }

.hero { height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 4rem; }
.eyebrow { color:var(--accent-cyan); font-family:var(--font-display); font-weight:700; letter-spacing:4px; text-transform:uppercase; font-size:0.85rem; margin-bottom:1rem; display:block; }
.hero h1 { font-family:var(--font-display); font-size:clamp(3.5rem,8vw,7.5rem); font-weight:900; line-height:1; letter-spacing:-0.02em; margin-bottom:2rem; }
.hero h1 span { color:transparent; -webkit-text-stroke:1px var(--text-main); }

.marquee-container { width:100%; overflow:hidden; background:var(--glass-bg); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); padding:1.2rem 0; display:flex; white-space:nowrap; }
.marquee-content { display:flex; align-items:center; animation:scrollX 60s linear infinite; }
.marquee-content span { font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:0 1.5rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; transition:color 0.3s; }
.marquee-content span:hover { color:var(--accent-cyan); }
@keyframes scrollX { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* SCHEDULE */
.schedule-section { padding:5rem 4rem; max-width:1400px; margin:0 auto; }
.schedule-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; gap:1rem; flex-wrap:wrap; }
.section-title { font-family:var(--font-display); font-size:2.5rem; font-weight:800; margin-bottom:3rem; letter-spacing:-1px; margin-left:4rem; }
.schedule-tabs { display:flex; flex-wrap:wrap; gap:0.5rem; }
.tab-btn { position:relative; padding:0.65rem 1.2rem; border-radius:999px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.02); color:var(--text-muted); font-family:var(--font-display); font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.25s; letter-spacing:0.5px; }
.tab-btn:hover { color:var(--text-main); border-color:rgba(255,255,255,0.2); }
.tab-btn.active { color:var(--text-main); border-color:rgba(0,229,255,0.5); background:rgba(0,229,255,0.08); box-shadow:0 0 20px rgba(0,229,255,0.12); }
.tab-btn.today::after { content:''; position:absolute; top:6px; right:8px; width:5px; height:5px; background:var(--accent-cyan); border-radius:50%; box-shadow:0 0 6px var(--accent-cyan); }
.day-panel { display:none; animation:fadeIn 0.4s ease; }
.day-panel.visible { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.schedule-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.schedule-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:20px; padding:1.8rem 1.5rem; display:flex; flex-direction:column; gap:0.6rem; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform 0.3s,border-color 0.3s; cursor:pointer; position:relative; overflow:hidden; min-height:180px; }
.schedule-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at top left,rgba(112,0,255,0.08),transparent 60%); opacity:0; transition:opacity 0.4s; }
.schedule-card:hover::before { opacity:1; }
.schedule-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.15); }
.schedule-card, .schedule-card * { text-decoration: none !important; color: var(--text-main); }
.active-card { border-color:rgba(0,229,255,0.3); background:rgba(0,229,255,0.04); box-shadow:0 0 30px rgba(0,229,255,0.08); }
.schedule-status { display:flex; align-items:center; gap:0.4rem; font-family:var(--font-display); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); margin-bottom:0.4rem; }
.active-card .schedule-status { color:var(--accent-cyan); }
.schedule-card h4 { font-family:var(--font-display); font-size:1.05rem; font-weight:800; letter-spacing:-0.3px; color: var(--text-main); }
.schedule-host { font-size:0.85rem; color:var(--text-muted); }
.schedule-time { font-family:var(--font-display); font-size:0.75rem; font-weight:700; color:var(--accent-cyan); text-transform:uppercase; letter-spacing:1px; margin-top:auto; padding-top:0.8rem; border-top:1px solid var(--glass-border); }

/* NUESTRA ESENCIA */
.essence-section { padding:8rem 4rem; max-width:1400px; margin:0 auto; }
.essence-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.essence-left h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); font-weight:900; line-height:1.1; letter-spacing:-1px; margin-bottom:1.5rem; }
.essence-left p { font-size:1.05rem; color:var(--text-muted); line-height:1.8; margin-bottom:2.5rem; }
.app-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.app-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: block;
}
.app-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.9rem 1.6rem;
    border-radius: 16px;
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-display);
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.app-btn:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,229,255,0.15);
    background: rgba(0,229,255,0.05);
}
.app-btn-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.app-btn-sub {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    line-height: 1;
}
.app-btn-name {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1;
    color: var(--text-main);
}
.app-btn:hover .app-btn-name { color: var(--accent-cyan); }
.method-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:30px; padding:3rem; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); position:relative; overflow:hidden; }
.method-card::before { content:''; position:absolute; top:-50%; right:-30%; width:300px; height:300px; background:radial-gradient(circle,rgba(112,0,255,0.15),transparent 70%); pointer-events:none; }
.method-label { display:inline-block; font-family:var(--font-display); font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--accent-cyan); margin-bottom:1.5rem; padding:0.4rem 1rem; border:1px solid rgba(0,229,255,0.3); border-radius:50px; }
.method-card > p { font-size:1rem; color:var(--text-muted); line-height:1.8; margin-bottom:2.5rem; }
.method-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding-top:2rem; border-top:1px solid var(--glass-border); }
.stat-item { display:flex; flex-direction:column; gap:0.3rem; }
.stat-number { font-family:var(--font-display); font-size:2rem; font-weight:900; letter-spacing:-1px; }
.stat-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; font-weight:500; }

/* TODA LA FAMILIA AFIRMA */
.voices-section { padding:2rem 4rem 6rem; max-width:1400px; margin:0 auto; }
.voices-grid-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; gap:1rem; flex-wrap:wrap; }
.day-filter { display:flex; flex-wrap:wrap; gap:0.5rem; }
.filter-btn { padding:0.5rem 1rem; border-radius:999px; border:1px solid var(--glass-border); background:transparent; color:var(--text-muted); font-family:var(--font-display); font-size:0.78rem; font-weight:700; cursor:pointer; transition:all 0.25s; letter-spacing:0.5px; }
.filter-btn:hover { color:var(--text-main); border-color:rgba(255,255,255,0.2); }
.filter-btn.active { color:var(--text-main); border-color:rgba(0,229,255,0.5); background:rgba(0,229,255,0.08); }
.voices-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.voice-card { border-radius:20px; overflow:hidden; background:var(--glass-bg); border:1px solid var(--glass-border); cursor:pointer; transition:transform 0.4s,border-color 0.4s; }
.voice-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,0.2); }
.voice-img { height:260px; position:relative; overflow:hidden; }
.voice-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; display: block; }
.voice-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,5,7,0.95) 0%,rgba(5,5,7,0.2) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; opacity:0; transform:translateY(10px); transition:all 0.4s ease; }
.voice-card:hover .voice-overlay { opacity:1; transform:translateY(0); }
.voice-programa { font-size:0.82rem; color:var(--accent-cyan); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:0.5rem; }
.voice-dia-badge { display:inline-block; font-family:var(--font-display); font-size:0.65rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; border:1px solid var(--glass-border); padding:0.25rem 0.7rem; border-radius:999px; margin-bottom:1rem; }
.voice-name { padding:1rem 1.2rem; }
.voice-name h4 { font-family:var(--font-display); font-size:1rem; font-weight:800; letter-spacing:-0.3px; }
.btn-outline { background:transparent; border:1px solid rgba(255,255,255,0.5); color:var(--text-main); padding:0.5rem 1.2rem; border-radius:50px; font-family:var(--font-body); font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.3s; }
.btn-outline:hover { background:var(--text-main); color:var(--bg-dark); }
.fade-in { animation:fadeIn 0.3s ease; }



/* CONTACT */
.contact-section { padding:8rem 4rem; max-width:1400px; margin:0 auto; }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; align-items:center; }
.contact-left h2 { font-family:var(--font-display); font-size:clamp(2.5rem,4vw,4rem); font-weight:900; line-height:1; letter-spacing:-2px; margin-bottom:1.5rem; }
.contact-left p { font-size:1rem; color:var(--text-muted); line-height:1.8; margin-bottom:2rem; }
.contact-note { display:flex; align-items:center; gap:0.7rem; font-size:0.85rem; color:var(--text-muted); font-weight:500; }
.cabina-form { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:30px; padding:3rem; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:flex; flex-direction:column; gap:2rem; }
.form-group { display:flex; flex-direction:column; gap:0.6rem; }
.form-group label { font-family:var(--font-display); font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); }
.form-group input,.form-group textarea { background:transparent; border:none; border-bottom:1px solid var(--glass-border); color:var(--text-main); font-family:var(--font-body); font-size:1rem; padding:0.8rem 0; outline:none; resize:none; transition:border-color 0.3s; width:100%; }
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(161,161,170,0.4); }
.form-group input:focus,.form-group textarea:focus { border-bottom-color:var(--accent-cyan); }
.btn-send { display:inline-flex; align-items:center; gap:0.8rem; background:var(--text-main); color:var(--bg-dark); border:none; padding:1rem 2rem; border-radius:50px; font-family:var(--font-display); font-weight:800; font-size:0.9rem; letter-spacing:1px; cursor:pointer; transition:all 0.3s; align-self:flex-start; }
.btn-send:hover { background:var(--accent-cyan); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,229,255,0.3); }

/* CTA BUTTONS (CONSOLIDATED) */
.btn-large-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border) !important;
    padding: 1.2rem 2.5rem;
    border-radius: 50px;
    color: var(--text-main) !important;
    text-decoration: none !important;
    font-family: var(--font-display);
    font-weight: 800;
    transition: all 0.3s;
}
.btn-large-cta:hover {
    border-color: var(--accent-purple);
    background: rgba(112, 0, 255, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(112, 0, 255, 0.2);
}

/* LIVE CTA SECTION */
.live-cta-section { 
    text-align: center; 
    padding: 4rem 2rem; 
    background: rgba(255,255,255,0.02); 
    border-top: 1px solid var(--glass-border); 
    border-bottom: 1px solid var(--glass-border); 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.live-cta-section p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}


/* FOOTER */
.monumental-footer { padding:8rem 4rem 12rem 4rem; background:linear-gradient(to bottom,transparent,rgba(5,5,7,0.9)); position:relative; overflow:hidden; text-align:center; }
.footer-content { display:flex; justify-content:space-between; max-width:1400px; margin:0 auto 4rem auto; position:relative; z-index:2; }
.footer-links,.footer-social { display:flex; gap:2rem; }
.footer-content a { color:var(--text-muted); text-decoration:none; font-family:var(--font-body); font-weight:500; font-size:0.9rem; text-transform:uppercase; letter-spacing:1px; transition:color 0.3s; }
.footer-content a:hover { color:var(--text-main); }
.footer-massive-text { font-family:var(--font-display); font-size:22vw; font-weight:900; line-height:0.8; color:rgba(255,255,255,0.03); user-select:none; position:absolute; bottom:-5vw; left:50%; transform:translateX(-50%); width:100%; z-index:1; }

/* STICKY PLAYER */
.sticky-player { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); width:calc(100% - 8rem); max-width:1200px; background:rgba(10,10,12,0.7); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:100px; padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; z-index:200; box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.player-info { display:flex; align-items:center; gap:1.2rem; }
.player-thumb {
    width:48px;
    height:48px;
    border-radius:50%;
    background: url('images/logo.png') center/cover no-repeat, linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
    flex-shrink:0;
    border: 1px solid rgba(255,255,255,0.1);
}
.player-text h4 { font-family:var(--font-display); font-weight:700; font-size:1rem; }
.player-text p { font-size:0.85rem; color:var(--text-muted); }
.player-controls { display:flex; align-items:center; gap:1.5rem; }
.play-btn { width:50px; height:50px; border-radius:50%; background:var(--text-main); border:none; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:transform 0.2s; flex-shrink:0; }
.play-btn:hover { transform:scale(1.05); }
.equalizer { display:flex; align-items:flex-end; gap:4px; height:20px; }
.eq-bar { width:4px; background:var(--accent-cyan); border-radius:2px; animation:eq 1s infinite ease-in-out; }
.eq-bar:nth-child(2){animation-duration:0.7s;}
.eq-bar:nth-child(3){animation-duration:1.2s;}
.eq-bar:nth-child(4){animation-duration:0.9s;}
@keyframes eq { 0%,100%{height:5px;} 50%{height:20px;} }

/* RESPONSIVE */
@media(max-width:1200px){.schedule-grid{grid-template-columns:repeat(3,1fr);}.voices-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:992px){
    nav{padding:1.2rem 2rem;}
    .hero,.essence-section,.voices-section,.bento-section,.contact-section{padding-left:2rem;padding-right:2rem;}
    .schedule-section{padding:4rem 2rem;}
    .hero h1{font-size:clamp(3rem,10vw,5rem);}
    .section-title{margin-left:0;}
    .schedule-grid{grid-template-columns:repeat(2,1fr);}
    .voices-grid{grid-template-columns:repeat(2,1fr);}
    .essence-grid{grid-template-columns:1fr;gap:3rem;}
    .bento-grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;gap:3rem;}
    .footer-content{flex-direction:column;gap:1.5rem;align-items:center;}
    .footer-links,.footer-social{gap:1rem;flex-wrap:wrap;justify-content:center;}
    .sticky-player{width:calc(100% - 2rem);border-radius:50px;flex-direction:row;gap:0.8rem;padding:0.7rem 1.2rem;bottom:1.5rem;}
    .player-thumb{width:40px;height:40px;}
    .player-text h4{font-size:0.9rem;}
    .player-text p{font-size:0.75rem;}
    .play-btn{width:42px;height:42px;}
}
@media(max-width:768px){
    .bento-grid{grid-template-columns:1fr;}
    .card-large,.card-wide{grid-column:span 1;grid-row:span 1;}
    .nav-links{display:none;}
    .schedule-grid{grid-template-columns:1fr;}
    .voices-grid{grid-template-columns:repeat(2,1fr);}
    .method-stats{grid-template-columns:repeat(2,1fr);}
    .app-buttons{ flex-direction: column; }
    .cabina-form{padding:2rem;}
    .monumental-footer{padding:4rem 1.5rem 10rem 1.5rem;}
    .footer-massive-text{font-size:30vw;bottom:-2vw;}
    .tab-btn{padding:0.5rem 0.85rem;font-size:0.75rem;}
    .voices-grid-header{flex-direction:column;align-items:flex-start;gap:1.5rem;}
}
@media(max-width:480px){.voices-grid{grid-template-columns:1fr;}}

/* REPRODUCTOR: botón SVG + ecualizador */
.play-btn { display:flex; align-items:center; justify-content:center; }
.play-btn svg { display:block; }

/* ═══════════════════════════════════════
   FRANJA DE NÚMEROS ANIMADOS
   ═══════════════════════════════════════ */
.stats-section {
    padding: 5rem 4rem;
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.stats-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.stat-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    min-width: 140px;
}
.stat-big {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 900;
    letter-spacing: -3px;
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-desc {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
}
.stat-divider {
    width: 1px;
    height: 80px;
    background: var(--glass-border);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   CTA: ÚNETE A AFIRMA RADIO
   ═══════════════════════════════════════ */
.join-section {
    padding: 8rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.join-inner {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    padding: 3rem; /* Espacio uniforme */
    max-width: 860px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.join-bg-img {
    position: relative;
    width: 100%;
    max-width: 400px; /* Tamaño máximo para que no sea gigante en desktop */
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.join-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.join-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(112,0,255,0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}
.join-inner > * { position: relative; z-index: 1; }
.join-inner .eyebrow { display: block; margin-bottom: 1.5rem; }
.join-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 1.5rem;
}
.join-inner h2 span {
    color: transparent;
    -webkit-text-stroke: 1px var(--text-main);
}
.join-inner > p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto 3rem auto;
}
.join-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
    text-align: left;
}
.join-feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: border-color 0.3s, color 0.3s;
}
.join-feature:hover { border-color: rgba(0,229,255,0.3); color: var(--text-main); }
.join-icon { font-size: 1.3rem; flex-shrink: 0; }
.btn-join {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--text-main);
    color: var(--bg-dark);
    border: none;
    padding: 1.1rem 2.5rem;
    border-radius: 50px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-join:hover {
    background: var(--accent-cyan);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,229,255,0.3);
}

/* RESPONSIVE nuevas secciones */
@media (max-width: 992px) {
    .stats-section { padding: 4rem 2rem; }
    .join-section { padding: 4rem 2rem; }
    .join-inner { padding: 3rem 2rem; }
    .stat-divider { display: none; }
    .stats-grid { justify-content: center; gap: 3rem; }
}
@media (max-width: 600px) {
    .join-features { grid-template-columns: 1fr; }
    .stats-grid { gap: 2rem; }
    .stat-block { min-width: 120px; }
}

/* ═══════════════════════════════════════
   MENÚ HAMBURGUESA
   ═══════════════════════════════════════ */

/* Botón hamburguesa — oculto en desktop */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.3s;
    flex-shrink: 0;
    z-index: 400;
}
.hamburger:hover { border-color: var(--accent-cyan); }
.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-main);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s;
    transform-origin: center;
}

/* Animación X al abrir */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel del menú móvil */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5,5,7,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 350;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mobile-menu.open .mobile-menu-inner {
    transform: translateY(0);
}

.mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.mobile-nav-links li {
    width: 100%;
    text-align: center;
}
.mobile-link {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.6rem 0;
    transition: color 0.2s, letter-spacing 0.3s;
    border-bottom: 1px solid var(--glass-border);
}
.mobile-link:hover {
    color: var(--text-main);
    letter-spacing: 1px;
}

.mobile-menu-footer {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.mobile-app-btn {
    padding: 0.75rem 1.8rem;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}
.mobile-app-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Bloquea scroll del body cuando el menú está abierto */
body.menu-open { overflow: hidden; }

/* Mostrar hamburguesa en móvil */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links  { display: none; }
    .btn-live   { display: none; }
    nav { padding: 1.2rem 1.5rem; }
}

/* Botón cerrar menú móvil */
.mobile-close {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    align-self: flex-end;
    transition: all 0.3s;
}
.mobile-close:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* ═══════════════════════════════════════
   CARRUSEL DE RESEÑAS
   ═══════════════════════════════════════ */
.reviews-section {
    padding: 6rem 4rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}
.reviews-top {
    margin-bottom: 3rem;
}

/* Viewport del carrusel */
.reviews-carousel-wrapper {
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
    padding-top: 12px;
    margin-top: -12px;
}
.reviews-carousel {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Tarjeta individual */
.rcard {
    flex: 0 0 calc((100% - 3rem) / 3);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.3s, border-color 0.3s;
}
.rcard:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.15);
}
.rcard--featured {
    border-color: rgba(0,229,255,0.2);
    background: rgba(0,229,255,0.03);
}
.rcard--featured:hover {
    border-color: rgba(0,229,255,0.4);
}

.rcard-stars {
    color: #FFD700;
    font-size: 1rem;
    letter-spacing: 3px;
}
.rcard-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.75;
    font-style: italic;
    flex: 1;
}
.rcard-name {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-main);
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

/* Dots */
.reviews-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
}
.rdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--glass-border);
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}
.rdot.active {
    background: var(--accent-cyan);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0,229,255,0.5);
}

/* Responsive */
@media (max-width: 1200px) {
    .rcard { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 992px) {
    .reviews-section { padding: 4rem 2rem 3rem; }
}
@media (max-width: 768px) {
    .rcard { flex: 0 0 100%; }
}

/* ============================================
   PÁGINAS DE PROGRAMA
   ============================================ */

.prog-hero {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10rem 4rem 4rem;
    position: relative;
    border-bottom: 1px solid var(--glass-border);
}
.prog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(112,0,255,0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(0,229,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}
.prog-hero-inner { max-width: 900px; }
.prog-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 1.5rem;
    background: linear-gradient(135deg, #fff 40%, rgba(255,255,255,0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.prog-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.prog-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.45rem 1rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-display);
    letter-spacing: 0.03em;
}
.prog-hero-scroll {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-display);
    animation: bounce-down 2s infinite ease-in-out;
}
@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

.prog-section {
    padding: 5rem 0;
    border-bottom: 1px solid var(--glass-border);
}
.prog-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4rem;
}
.section-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: 1.75rem;
}

/* Sobre el programa: foto + texto */
.prog-about-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3.5rem;
    align-items: start;
}
.prog-locutor-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: sticky;
    top: 7rem;
}
.prog-locutor-foto {
    width: 200px;
    height: 200px;
    border-radius: 1.25rem;
    object-fit: cover;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    display: block;
}
.prog-ver-perfil {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.875rem;
    padding: 0.75rem 1rem;
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: all 0.3s ease;
}
.prog-ver-perfil:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(0,229,255,0.35);
    color: var(--accent-cyan);
    box-shadow: 0 6px 24px rgba(0,229,255,0.1);
}
.prog-ver-perfil:hover .perfil-arrow { transform: translateX(4px); }
.perfil-arrow { margin-left: auto; transition: transform 0.3s; }

.prog-description {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.prog-description p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.75);
}

/* Episodios placeholder */
.episodio-placeholder {
    opacity: 0.4;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem 0;
}

/* Más programas */
.mas-programas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.mas-prog-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mas-prog-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(0,229,255,0.25);
    transform: translateY(-3px);
}
.mas-prog-cat {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}
.mas-prog-nombre {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}
.mas-prog-horario {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: auto;
}

/* Footer de página interna */
.prog-footer {
    padding: 2rem 4rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.prog-footer a { color: var(--accent-cyan); text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
    .prog-hero { padding: 8rem 1.5rem 3rem; }
    .prog-container { padding: 0 1.5rem; }
    .prog-hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
    .prog-about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .prog-locutor-col { position: static; flex-direction: row; align-items: center; }
    .prog-locutor-foto { width: 90px; height: 90px; flex-shrink: 0; border-radius: 0.75rem; }
    .prog-ver-perfil { width: auto; flex: 1; }
    .prog-footer { padding: 2rem 1.5rem; }
}

/* ============================================
   PÁGINAS DE LOCUTOR
   ============================================ */

.loc-hero {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9rem 2rem 5rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--glass-border);
}

.loc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(0,229,255,0.07) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(112,0,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 60px;
    overflow: hidden;
}

.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 90%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-content {
    max-width: 600px;
}

.hero-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

/* NETFLIX STYLE CARD */
.hero-card {
    width: 300px;
    height: 400px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    background: #000;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardEntrance 0.8s ease backwards;
    cursor: pointer;
}

@keyframes cardEntrance {
    0% { transform: scale(0.8) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 0.6s ease;
}

.hero-card:hover .card-img {
    transform: scale(1.05);
    opacity: 0.6;
}

.card-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.7);
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 30%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: white;
}


.card-overlay h4 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--accent-cyan);
    font-family: var(--font-display);
}


.card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    .hero-content {
        margin: 0 auto;
    }
    .hero {
        display: block;
        height: auto !important;
        min-height: auto !important;
        padding-top: 140px;
        padding-bottom: 120px;
        overflow: visible;
    }
    .hero-container {
        display: block;
        width: 100%;
    }
    .hero-showcase {
        margin-top: 40px;
        padding-bottom: 60px;
    }
    .hero-card {
        width: 280px;
        height: 360px;
        margin: 0 auto;
    }
}




.loc-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.loc-avatar-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.loc-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(0,229,255,0.3);
    display: block;
    position: relative;
    z-index: 1;
}

.loc-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(rgba(0,229,255,0.6), rgba(112,0,255,0.6), transparent, rgba(0,229,255,0.6));
    animation: ring-spin 6s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
}

@keyframes ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.loc-nombre {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 40%, rgba(255,255,255,0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    text-align: center;
}

.loc-especialidad {
    font-size: 0.88rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    font-family: var(--font-display);
    text-align: center;
}

.loc-programas-badges {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.loc-prog-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--glass-bg);
    border: 1px solid rgba(0,229,255,0.2);
    padding: 0.45rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
    font-family: var(--font-display);
    text-decoration: none;
    transition: all 0.3s;
    letter-spacing: 0.02em;
}

.loc-prog-badge:hover {
    background: rgba(0,229,255,0.08);
    border-color: rgba(0,229,255,0.45);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,229,255,0.15);
}

.loc-bio {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 720px;
}

.loc-bio p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.75);
}

.loc-programas-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 600px;
}

.loc-programa-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s ease;
    gap: 1rem;
}

.loc-programa-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(0,229,255,0.3);
    transform: translateX(4px);
    box-shadow: 0 6px 24px rgba(0,229,255,0.08);
}

.loc-prog-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

@media (max-width: 768px) {
    .loc-hero { padding: 8rem 1.5rem 4rem; min-height: auto; }
    .loc-avatar-wrap { width: 140px; height: 140px; }
    .loc-avatar { width: 140px; height: 140px; }
}

/* Spotify embed */
.spotify-embed {
    max-width: 720px;
}
.spotify-embed iframe {
    display: block;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}