/* =====================================
   RADIO EL CAMINO DE LA FE
   STYLE CSS 3.1 PREMIUM
===================================== */


/* ===============================
   VARIABLES
================================ */

:root{

    --gold:#d4af37;

    --dark:#050505;

    --dark-soft:#111;

    --white:#ffffff;

    --text:#dddddd;

    --glass:rgba(255,255,255,.08);

}

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


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

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

    background:#050505;

    color:white;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}






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


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(15px);

}



.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

}



.logo-box img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}



.navbar ul{

    display:flex;

    list-style:none;

    gap:30px;

}



.navbar a{

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}



.navbar a:hover{

    color:var(--gold);

}








/* ===============================
   HERO
================================ */


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    background:

    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.85)
    ),

    url("../assets/background.png");

    background-size:cover;

    background-position:center;

}



.hero-content{

    display:grid;

    grid-template-columns:1fr 450px;

    gap:50px;

    align-items:center;

    padding-top:80px;

}



.live-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(212,175,55,.15);

    border:1px solid var(--gold);

    color:var(--gold);

    margin-bottom:20px;

}



.hero-left h1{

    font-size:5rem;

    line-height:1;

    letter-spacing:2px;

}



.hero-description{

    margin-top:25px;

    font-size:1.2rem;

    color:#ddd;

    max-width:500px;

}








/* ===============================
   REPRODUCTOR PREMIUM
================================ */


.player-premium{

    background:rgba(255,255,255,.08);

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

    backdrop-filter:blur(20px);

    padding:35px;

    border-radius:35px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}



.player-top{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:var(--gold);

    font-weight:600;

}



.player-live-dot{

    width:12px;

    height:12px;

    background:red;

    border-radius:50%;

    animation:pulse 1.5s infinite;

}



@keyframes pulse{


0%{

transform:scale(1);

}


50%{

transform:scale(1.5);

}


100%{

transform:scale(1);

}


}

/* ===============================
   BOTÓN PLAY PREMIUM
================================ */


.player-center{

    display:flex;

    justify-content:center;

    margin:25px 0;

}



.play-button{

    width:100px;

    height:100px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:var(--gold);

    color:#000;

    font-size:2.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

    box-shadow:

    0 0 30px rgba(212,175,55,.5);

}



.play-button:hover{

    transform:scale(1.08);

}



.play-button.playing{

    animation:

    playGlow 1.5s infinite;

}



@keyframes playGlow{


0%{

box-shadow:
0 0 20px rgba(212,175,55,.5);

}



50%{

box-shadow:
0 0 50px rgba(212,175,55,.9);

}



100%{

box-shadow:
0 0 20px rgba(212,175,55,.5);

}


}







/* ===============================
   BARRA DE SONIDO PREMIUM
================================ */


.audio-visualizer{

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    margin:25px 0;

}



.audio-visualizer span{

    width:7px;

    height:20px;

    background:var(--gold);

    border-radius:10px;

    transition:.3s;

}





.audio-visualizer.playing span{

    animation:

    soundWave 1s infinite ease-in-out;

}




.audio-visualizer.playing span:nth-child(2){

    animation-delay:.1s;

}


.audio-visualizer.playing span:nth-child(3){

    animation-delay:.2s;

}


.audio-visualizer.playing span:nth-child(4){

    animation-delay:.3s;

}


.audio-visualizer.playing span:nth-child(5){

    animation-delay:.4s;

}


.audio-visualizer.playing span:nth-child(6){

    animation-delay:.5s;

}


.audio-visualizer.playing span:nth-child(7){

    animation-delay:.6s;

}


.audio-visualizer.playing span:nth-child(8){

    animation-delay:.7s;

}


.audio-visualizer.playing span:nth-child(9){

    animation-delay:.8s;

}


.audio-visualizer.playing span:nth-child(10){

    animation-delay:.9s;

}





@keyframes soundWave{


0%,100%{

    height:20px;

}



50%{

    height:70px;

}



}







/* ===============================
   VOLUMEN
================================ */


.volume-box{

    margin-top:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    color:var(--gold);

}



.volume-box input{

    width:180px;

    cursor:pointer;

    accent-color:var(--gold);

}







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


.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title span{

    color:var(--gold);

    font-weight:600;

    letter-spacing:2px;

}



.section-title h2{

    font-size:2.5rem;

    margin-top:10px;

}







/* ===============================
   TARJETAS DESTACADAS
================================ */


.highlights{

    padding:80px 0;

}



.highlight-grid{

    display:grid;

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

    gap:25px;

}



.highlight-card{

    background:var(--glass);

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

    padding:30px;

    border-radius:25px;

    text-align:center;

    transition:.4s;

}



.highlight-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}



.highlight-icon{

    font-size:3rem;

    margin-bottom:15px;

}



.highlight-card h3{

    color:var(--gold);

    margin-bottom:10px;

}

/* ===============================
   NOSOTROS
================================ */


.section-dark{

    padding:90px 0;

    background:#080808;

}



.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



.about-text p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:20px;

}



.about-box{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.about-item{

    background:rgba(255,255,255,.08);

    padding:25px;

    border-radius:20px;

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

}



.about-item h3{

    color:var(--gold);

    margin-bottom:10px;

}







/* ===============================
   MISIÓN Y VISIÓN
================================ */


.mission-section{

    padding:90px 0;

}



.mission-grid{

    display:grid;

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

    gap:30px;

}



.mission-card{

    background:rgba(255,255,255,.08);

    padding:35px;

    border-radius:25px;

    text-align:center;

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

    transition:.3s;

}



.mission-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

}



.mission-icon{

    font-size:3rem;

    margin-bottom:15px;

}



.mission-card h3{

    color:var(--gold);

    margin-bottom:15px;

}







/* ===============================
   PROGRAMACIÓN
================================ */


.section-program{

    padding:90px 0;

    background:#080808;

}



.program-grid{

    display:grid;

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

    gap:25px;

}



.program-card{

    background:rgba(255,255,255,.08);

    padding:30px;

    border-radius:25px;

    text-align:center;

    transition:.3s;

}



.program-card:hover{

    transform:translateY(-8px);

    border:1px solid var(--gold);

}



.program-icon{

    font-size:3rem;

    margin-bottom:15px;

}



.program-card h3{

    color:var(--gold);

    margin-bottom:10px;

}







/* ===============================
   VERSÍCULO
================================ */


.verse-section{

    padding:90px 0;

}



.verse-card{

    background:

    linear-gradient(
    135deg,
    rgba(212,175,55,.15),
    rgba(255,255,255,.05)
    );

    border:1px solid rgba(212,175,55,.4);

    padding:50px;

    border-radius:35px;

    text-align:center;

}



.verse-label{

    color:var(--gold);

    font-weight:700;

}



.verse-card blockquote{

    margin:30px auto;

    font-size:1.8rem;

    line-height:1.6;

    max-width:800px;

    font-style:italic;

}



.verse-card p{

    color:var(--gold);

    font-weight:600;

}







/* ===============================
   TESTIMONIOS
================================ */


.testimonials{

    padding:90px 0;

    background:#080808;

}



.testimonial-grid{

    display:grid;

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

    gap:25px;

}



.testimonial-card{

    background:rgba(255,255,255,.08);

    padding:30px;

    border-radius:25px;

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

}



.testimonial-card p{

    color:#ddd;

    line-height:1.7;

    margin-bottom:20px;

}



.testimonial-card span{

    color:var(--gold);

    font-weight:600;

}







/* ===============================
   ORACIÓN
================================ */


.prayer-section{

    padding:90px 0;

}



.prayer-form{

    max-width:700px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}



.prayer-form input,

.prayer-form textarea{

    width:100%;

    padding:18px;

    border-radius:15px;

    border:none;

    outline:none;

    background:rgba(255,255,255,.1);

    color:white;

    font-family:inherit;

}



.prayer-form textarea{

    min-height:160px;

    resize:none;

}



.prayer-form button{

    padding:18px;

    border:none;

    border-radius:30px;

    background:var(--gold);

    color:#000;

    font-weight:700;

    cursor:pointer;

    font-size:1rem;

    transition:.3s;

}



.prayer-form button:hover{

    transform:scale(1.03);

}

/* ===============================
   CONTACTO
================================ */


.contact-section{

    padding:90px 0;

    background:#080808;

}



.contact-grid{

    display:grid;

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

    gap:25px;

}



.contact-card{

    background:rgba(255,255,255,.08);

    padding:35px;

    border-radius:25px;

    text-align:center;

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

    transition:.3s;

}



.contact-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

}



.contact-icon{

    font-size:3rem;

    margin-bottom:15px;

}



.contact-card h3{

    color:var(--gold);

    margin-bottom:15px;

}







/* ===============================
   REDES DENTRO DE CONTACTO
================================ */


.contact-social{

    margin-top:60px;

    text-align:center;

    padding:35px;

    background:rgba(255,255,255,.05);

    border-radius:30px;

}



.contact-social h3{

    color:var(--gold);

    font-size:1.8rem;

    margin-bottom:10px;

}



.contact-social p{

    color:#ddd;

    margin-bottom:25px;

}





.social-links-contact{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}



.social-links-contact a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 25px;

    border-radius:30px;

    background:rgba(255,255,255,.1);

    color:white;

    text-decoration:none;

    transition:.3s;

}



.social-links-contact a:hover{

    background:var(--gold);

    color:#000;

}



.social-links-contact i{

    font-size:1.2rem;

}







/* ===============================
   WHATSAPP FLOTANTE
================================ */


.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25d366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    text-decoration:none;

    z-index:999;

    box-shadow:0 0 25px rgba(37,211,102,.5);

    transition:.3s;

}



.whatsapp:hover{

    transform:scale(1.1);

}







/* ===============================
   FOOTER
================================ */


.footer{

    background:#000;

    padding:60px 0 30px;

    text-align:center;

}



.footer-logo img{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:auto;

}



.footer h3{

    color:var(--gold);

    margin:20px 0 10px;

}



.footer p{

    color:#ccc;

}



.footer-mail{

    margin-top:15px;

}



.footer-copy{

    margin-top:35px;

    padding-top:20px;

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

    color:#888;

}







/* ===============================
   ANIMACIONES
================================ */


.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}



.show{

    opacity:1;

    transform:translateY(0);

}







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


@media(max-width:1000px){


.hero-content{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-left h1{

    font-size:3.5rem;

}



.highlight-grid,

.program-grid{

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

}



.mission-grid{

    grid-template-columns:1fr;

}



.contact-grid{

    grid-template-columns:1fr;

}



.about-grid{

    grid-template-columns:1fr;

}



}







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


@media(max-width:600px){



.nav-container{

    flex-direction:column;

}



.navbar ul{

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

}



.hero-left h1{

    font-size:2.5rem;

}



.player-premium{

    padding:25px 15px;

}



.play-button{

    width:80px;

    height:80px;

}



.highlight-grid,

.program-grid{

    grid-template-columns:1fr;

}



.section-title h2{

    font-size:1.8rem;

}



.verse-card{

    padding:30px 20px;

}



.verse-card blockquote{

    font-size:1.3rem;

}



.social-links-contact{

    flex-direction:column;

}



.social-links-contact a{

    justify-content:center;

}



}