/*.banner-nosotros {
    position: relative;
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: var(--ColorWhite);
    text-align: center;


}



.bloque-texto-nosotros {
    display: flex;
    flex-direction: column;
   align-items: center;
    gap: 20px;
}





.titleNosotros {
    font-size: 44px;
    position: relative;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: var(--ColorWhite);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}*/

.hero-banner {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.hero-banner__container {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-banner__title {
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.container-flex-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.flex-contenedor-contacto{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.contenedor-contacto{
    width: 45%;
}
.contenedor-horario{
    width: 45%;
}


.contenedor-contacto__flexinputs{
    display: flex;
    /*align-items: center;*/
    gap: 10px;
    width: 100%;
}

.contenedor-contacto__inputs{
    width: 50%;

}

.contenedor-contacto__inputs input , textarea{
    width: 100%;
    outline: none;
    border: none;
    border: 1px solid var(--borderForm);
    border-radius: 10px;
    padding: 15px 10px;

    font-family:  var(--font-Lato);


}
input::placeholder,
textarea::placeholder {
  color: var(--borderForm);

}


.contenedor-contacto__textarea textarea{
    height: 100px;        /* alto fijo */
  resize: none;         /* opcional: evita que lo agranden */
  overflow-y: auto;
}

.contenedor-contacto__textarea {
    width: 100%;
}


.container-archivo p{
    padding-bottom: 15px;
    color: var(--plomoOscuro);
    font-weight: 400;
}

.container-archivo input{
    font-size: 16px;
}

.button-enviar a{
    padding: 12px 35px;
    font-size: 15px;
}

.button-form button{
    padding: 10px 50px;
    font-size: 16px;
}

/*CONTENEDOR HORARIO*/
.contenedor-horario{
    background-color: var(--colorCeleste);
    padding: 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contenedor-horario__title{
    padding-bottom: 15px;
    color: var(--AzulSwipper);
    font-weight: 900;
}
.contenedor-horario-atencion__icon{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ColorWhite);
}

.contenedor-horario-contacto ul li a{
    display: flex;
    justify-content: space-between;
    color: var(--ColorWhite);
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.contenedor-horario-contacto ul li a  i{
    padding-right: 15px;
}
.contenedor-horario-contacto ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contenedor-hoario-gmail ul{
    display: flex;
    flex-direction: column;

    gap: 10px;

}
.contenedor-hoario-gmail ul a{
    color: var(--ColorWhite);
    display: flex;
    align-items: center;
}
.contenedor-hoario-gmail ul a i{
    padding-right: 20px;
}


/*MANDMIENTOS*/
.container-img-mandamientos .mandamientos{
    max-height: 500px;
    max-width: 300px;
}
.cart-mandamientos{
   background-color: transparent;
}
.mandamientos-container .mandamientos{
    background-color: transparent;
}



 .mandamientos-container .cart-mandamientos:hover .mandamientos{
            transform: scale(1.03);
   }

   .container-title-mandamientos{
        text-align: center;
        margin-bottom: 40px;
        line-height: 1.6;
   }

   .container-title-mandamientos h2{
        /*padding-top: 25px;*/
        color: var(--colorCeleste);
        font-size: 30px;
        line-height: 1.1;
        padding-top: 20px;
   }
   /*FIN MANDAMIENTOS*/


/*INCIIO INDEX -> ORACION */
   .container-flex-oracion{
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 30px;
     margin-top: 40px;
     flex-wrap: wrap;
   }

   .container-img-oracion{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
   }

   .container-img-oracion img{
    width: 100%;
    max-width: 500px;
    background-color: var(--ColorWhite);
    }
   .container-audio{
    width: 100%;
    max-width: 400px;
   }
   .audio-player{
    width: 100%;
   }
   .container-audio{
    border-radius: 15px;
    background-color: var(--ColorWhite);

   }

   .container-text-icono{
    background: linear-gradient(to right, #0293EE, #00327D);

    border-top-left-radius:15px ;
    border-top-right-radius: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 20px 15px;
    flex-wrap: wrap;
   }

   .container-text{
    color: var(--ColorWhite);
   }

      .container-text h3{
        margin-bottom:5px;
      }


 .container-text p{
    font-size:13px;
 }

   .container-icono{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6EC1F5; /* celeste pastel */

    font-size: 20px;


   }
   .container-icono i{
    color: var(--ColorWhite);
    opacity: 1;
   }

   .container-reproduccion{
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
   }

   .container-reproduccion p{
    color:var(--gray-medio);
   }

   .btn-descarga a{
    background-color: var(--green);
    color: var(--ColorWhite);
    padding: 10px 10px;
    border-radius: 5px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
     transition: background-color 0.3s ease;
   }
   .btn-descarga a:hover{
        background-color: #1f9d57;
    }
/*FIN ORACION*/


/*SALMOS*/
.container-salmos-bg{
    background: linear-gradient(to right, #76D23F, #345C1C);


}
.container-icono-salmo{
    background-color: #B7E7A0;

}
.gap70{
    gap: 70px;
}
/*Fin salmos*/

/*MELODIAS.HTML*/
.container-melodias{
    max-width: 380px;
    width: 100%;
}
.container-melodias-bg{
    background: linear-gradient(to right, #8476F4, #403279);

}
 .container-icono-melodia{
    background-color: #C7C2F9;
}


.container-flex-melodias{

    gap: 20px;
}
/*button reproduccion me lodias*/

.container-button-melodias{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: var(--ColorWhite);
    padding: 20px 20px ;
    border-radius: 10px;
    font-size: 16px;
    flex-wrap: wrap;
}

.button-melodias{
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    background-color: var(--Neutral-Light);
    color: var(--Carbon);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
    cursor: pointer;
}

.button-melodias:hover{
    background: linear-gradient(to right, #8476F4, #403279);
    color: var(--ColorWhite);
}

.button-melodias {
    /* tus estilos actuales */
    transition: all 0.3s ease;
}

.button-melodias.active {
    background-color: var(--AzulFuerte); /* Cambia a morado si quieres */
    color: var(--ColorWhite);

}

/*ESTO IMPORTANTE ME FUNCIONO PARA QUE EL JS NO AFECTE CON MI ESTYLOS YA QUE SIN ESTO SE ROMPIA LOS STYLOS*/
.hidden-hymn {
    display: none !important;
}
/*FIN MELODIAS.HTML*/


/*ESTUDIOS BIBLICOS*/
.button-biclicos.active{
    background-color: var(--colorCeleste);
    color: var(--ColorWhite);
}
.button-biclicos{
    /*padding: 12px 25px;*/
    width: 200px;
    height: 45px;
    border: none;
    border-radius: 25px;
    background-color: var(--Neutral-Light);
    color: var(--Carbon);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
    cursor: pointer;
}
.button-biclicos:hover{
    background-color: var(--colorCeleste);
    color: var(--ColorWhite);
}
.container-flex-biblicos{
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;

}
.container-biblico{
    background-color: var(--ColorWhite);
    display: flex;
    align-items: center;
    /*gap: 20px;*/
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius:20px ;

}

.container-info-biclico{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px ;    WIDTH: 100%;
}
.container-info-biclico h3{
    color: var(--AzulFuerte);
    font-size: 18px;
}
.container-info-biclico p{
    color: var(--plomoOscuro);
    font-size: 14px;
    line-height: 1.6;
}

.title-estudio-biblico h2{
    font-size: 20px;
    color: var(--black);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 20px;
}

.flex-pagina-button-biblico{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.icon-text{
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--plomoOscuro);
}
.icon-text p{
    font-size: 12px;
}

.container-img-biblico{
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    overflow: hidden;
      border-bottom-left-radius: 20px;
}
.container-img-biblico img{
    width: 100%;
    height: auto;


}

.btn-biblico .min-padding{
    font-size: 12px;
    padding: 8px 18px;
}
/*FIN ESTUDIOS BIBLICOS*/


/*INDEX FUNDADOR Y COMPILADOR*/
.contenedor-fundador-compilador{
    margin-top: 30px;
}
.container-img-fundador-compilador {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.container-img-fundador-compilador img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.container-dato-fundador{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 20px 0px;
    line-height: 1.2;
}
.container-dato-fundador span{
    font-weight: 700;
}

/*FIN FUNDADOR Y COMPILADOR*/




@media (max-width: 900px) {
 .flex-contenedor-contacto{
    flex-direction: column;
    gap: 30px;
 }
 .contenedor-contacto{
    width: 100%;
 }
 .contenedor-horario{
    width: 100%;
 }

 .container-flex-oracion{
    flex-direction: column;

 }
 .container-img-oracion{
    width: 80%;
 }
}

@media (max-width:700px ) {
 .container-biblico{
    flex-direction: column;

 }
 .container-img-biblico{
    max-width: 100%;
    max-height: 100%;
 }
}


@media (max-width: 768px) {
    .hero-banner {
        height: 250px;
    }
}


@media (max-width:600px ) {
 .contenedor-contacto__flexinputs{
    flex-direction: column;
    gap: 15px;
 }
 .contenedor-contacto__inputs{
    width: 100%;
 }
}

@media (max-width:530px ) {
    .contenedor-horario-contacto ul li a{
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
@media (max-width:500px ) {
 .contenedor-hoario-gmail ul a{
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
 }
 .container-archivo input{
    font-size: 12px;
 }

 .container-img-fundador-compilador{
    max-width: 100%;
 }
}

@media (max-width:400px ) {
 .container-text-icono{
    padding: 20px 15px;
    gap: 10px;
 }
 .container-reproduccion{
    padding: 20px 15px;
 }
 .container-title-mandamientos h2{
    font-size: 20px;
    text-align: center;
 }
 .title-response{
    font-size: 26px;
 }
}