/* ==========================
RESET
========================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:#050816;

color:white;

overflow-x:hidden;

}


/* ==========================
APP
========================== */

.app{

width:100%;

max-width:1400px;

margin:auto;

background:#0b1120;

min-height:100vh;

padding-bottom:130px;

}


/* ==========================
HEADER
========================== */

.header{

position:relative;

height:430px;

overflow:hidden;

background:
linear-gradient(
180deg,
#111827,
#0b1120
);

}

.banner{

width:100%;

height:100%;

object-fit:cover;

opacity:.30;

filter:blur(1px);

}

.overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to top,
#0b1120,
rgba(0,0,0,.10)
);

}


/* ==========================
LOGO CENTRAL
========================== */

.logo-box{

position:absolute;

top:58%;

left:50%;

transform:
translate(-50%,-50%);

}

.logo{

width:230px;

height:230px;

border-radius:40px;

object-fit:cover;

box-shadow:
0 0 45px rgba(37, 100, 235, 0);

transition:.4s;

}


/* ==========================
PLAYER
========================== */

.player{

max-width:900px;

margin:40px auto;

padding:35px;

background:#111827;

border-radius:35px;

box-shadow:
0 12px 35px rgba(0,0,0,.45);

transition:.3s;

}

.radio-player{

text-align:center;

}

.radio-status{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:40px;

background:#1f2937;

font-weight:600;

margin-bottom:25px;

}

.live-dot{

width:12px;

height:12px;

border-radius:50%;

background:red;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

opacity:1;

}

50%{

opacity:.35;

}

100%{

opacity:1;

}

}

audio{

width:100%;

height:65px;

border-radius:15px;

}


/* ==========================
SECCIONES
========================== */

.section{

padding:25px;

}

.section-title{

font-size:34px;

font-weight:700;

margin-bottom:25px;

}


/* ==========================
PROGRAMAS PRESENCIALES NUEVO
========================== */

.program-card{

display:flex;

align-items:center;

gap:25px;

background:
linear-gradient(
135deg,
#111827,
#1e293b
);

padding:25px;

border-radius:35px;

text-decoration:none;

color:white;

overflow:hidden;

position:relative;

transition:.4s;

box-shadow:
0 12px 35px rgba(0,0,0,.35);

}

.program-card:hover{

transform:
translateY(-6px)
scale(1.01);

box-shadow:
0 20px 40px rgba(37,99,235,.25);

}

.program-image{

width:240px;

height:180px;

object-fit:cover;

border-radius:25px;

}

.program-content{

flex:1;

}

.program-content h2{

font-size:32px;

margin-bottom:10px;

}

.program-content p{

font-size:16px;

color:#cbd5e1;

margin-bottom:18px;

}

.program-btn{

display:inline-block;

padding:12px 22px;

background:#2563eb;

border-radius:15px;

font-weight:600;

transition:.3s;

}

.program-card:hover .program-btn{

background:#3b82f6;

}


/* ==========================
REDES
========================== */

.socials{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:20px;

}

.social-btn{

height:90px;

border-radius:28px;

background:#111827;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:white;

text-decoration:none;

transition:.3s;

box-shadow:
0 6px 20px rgba(0,0,0,.35);

}

.social-btn:hover{

background:#2563eb;

transform:
translateY(-5px);

}


/* ==========================
BOTONES DESCARGA
========================== */

.download-buttons{

display:flex;

flex-direction:column;

gap:18px;

margin-top:10px;

}

.download-btn{

display:flex;

align-items:center;

gap:20px;

padding:24px;

border-radius:30px;

text-decoration:none;

color:white;

transition:.35s;

position:relative;

overflow:hidden;

box-shadow:
0 10px 25px rgba(0,0,0,.35);

}

.download-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.15),
transparent
);

transition:.7s;

}

.download-btn:hover::before{

left:120%;

}

.download-btn:hover{

transform:
translateY(-5px)
scale(1.01);

}

.download-btn i{

font-size:48px;

}


/* ANDROID */

.android-btn{

background:
linear-gradient(
135deg,
#16a34a,
#15803d
);

}


/* IPHONE */

.iphone-btn{

background:
linear-gradient(
135deg,
#374151,
#111827
);

}

.download-btn h3{

font-size:24px;

margin-bottom:5px;

}

.download-btn p{

font-size:15px;

color:#e5e7eb;

}


/* ==========================
MENU INFERIOR
========================== */

.bottom-menu{

position:fixed;

bottom:15px;

left:50%;

transform:
translateX(-50%);

width:92%;

max-width:760px;

padding:15px;

display:flex;

justify-content:space-around;

align-items:center;

background:
rgba(10, 77, 231, 0.795);

backdrop-filter:
blur(12px);

border-radius:32px;

border:
1px solid rgba(255,255,255,.08);

z-index:999;

box-shadow:
0 0 25px rgba(9, 8, 58, 0.123);

}

.menu-btn{

text-decoration:none;

color:#cbd5e1;

text-align:center;

font-size:13px;

transition:.3s;

}

.menu-btn i{

display:block;

font-size:24px;

margin-bottom:6px;

}

.menu-btn:hover{

color:white;

transform:
translateY(-4px);

}

.menu-btn.active{

color:#ffffff;

}


/* ==========================
RESPONSIVE
========================== */

@media(max-width:900px){

.player{

margin:20px;

padding:25px;

}

.socials{

grid-template-columns:
repeat(2,1fr);

}

}


@media(max-width:750px){

.program-card{

flex-direction:column;

text-align:center;

}

.program-image{

width:100%;

height:220px;

}

.program-content h2{

font-size:24px;

}

}


@media(max-width:650px){

.header{

height:340px;

}

.logo{

width:170px;

height:170px;

}

.section-title{

font-size:28px;

}

.download-btn{

padding:20px;

border-radius:24px;

}

.download-btn i{

font-size:38px;

}

.download-btn h3{

font-size:20px;

}

.download-btn p{

font-size:13px;

}

.bottom-menu{

width:95%;

}

.menu-btn{

font-size:11px;

}

.menu-btn i{

font-size:20px;

}

}