/* Evitar el desbordamiento de contenido horizontal */
body {
  overflow-x: hidden;
}


/*PANTALLA DE CARGA*/
.preloader {
  background: #fff;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}

.preloader-img {
  background-image: url(../img/loading.gif);
  background-position: center;
  background-repeat: no-repeat;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  position: absolute;
  top: 50%;
  width: 200px;
}



/* AJUSTES PARA EL SIDEBAR*/
.custom-navbar {
  height: 90px;
  /* Cambia este valor según lo que necesites */
  padding: 0 1rem;
  /* Ajusta el espaciado interno */
}

/* Alinea verticalmente los elementos */
.custom-navbar .navbar-brand img {
  /* margin-top: 3px; */
  margin-bottom: 8px;
  max-height: 77px;
  /* Controla el tamaño del logo */
  width: auto;
}

.custom-navbar .navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  /* Reduce el espaciado interno de los enlaces */
  line-height: 1;
  /* Ajusta la alineación del texto */
}


/* Fondo sólido para el menú desplegable en pantallas pequeñas */
.custom-navbar .navbar-collapse {
  padding: 1rem;
  /* Espaciado interno para mejorar la estética */
}



@media (max-width: 991px) {
  .custom-navbar .navbar-collapse {
    position: absolute;
    top: 89px;
    /* Ajusta según la altura del navbar */
    left: -15px;
    /* Asegura que comience desde el borde izquierdo */
    right: 0;
    /* Asegura que termine en el borde derecho */
    width: auto;
    /* Deja que el ancho se ajuste automáticamente */
    min-width: 100vw;
    /* Garantiza que ocupe al menos todo el ancho de la ventana */
    z-index: 1050;
    /* Asegura que el menú se muestre sobre otros elementos */
    background-color: #0A2640;
    /* Fondo sólido */
  }
}

.custom-navbar .navbar-toggler {
  border: none;
  /* Elimina el borde del botón */
  color: white;
  /* Asegúrate de que el ícono sea visible */
}

.navcontent {
  width: 100%;
  /* Ocupa el ancho completo de la pantalla */
  max-width: 100%;
  /* Asegúrate de que no tenga un ancho máximo restringido */
  padding-left: 20;
  /* Elimina el padding por defecto en los lados izquierdo y derecho */
  padding-right: 20;
  margin: 0;
  /* Elimina el margen por defecto */
}



/* PAGINA PRINCIPAL*/
.logo-img {
  width: 200px;
  height: 90px;
  object-fit: contain;
  /* Ajusta el contenido sin distorsionarlo */
}

/* Estilo para el contenedor del video */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  /* Asegura que el video esté detrás del contenido */
  overflow: hidden;
}

.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa de superposición azul */
.video-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 255, 0.082);
  /* Azul con opacidad */
  z-index: 1;
}

/* Opcional: capa de superposición para oscurecer un poco el fondo */
.video-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  /* Capa oscura */
  z-index: 1;
}

.contenedor {
  padding-top: 140px;
  /* Añadir más espacio arriba */
  padding-bottom: 60px;
  /* Añadir más espacio abajo */
}

.swiper-position {
  position: relative;
  top: 50px;
  /* Ajusta el desplazamiento hacia abajo */
}






/* ------------Botón Flotante de Radio -----------------------------------------*/
.btn-radio {
  position: fixed;
  bottom: 40px;
  /* Lo subimos más en la pantalla */
  right: 20px;
  width: 100px;
  /* Aseguramos un tamaño fijo */
  height: 100px;
  /* Igual al ancho para que sea circular */
  background-color: transparent;
  /* Fondo transparente */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* Esto lo hace redondo */
  z-index: 100;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease-in-out;
}

.btn-radio:hover {
  background-color: #0A2640;
  /* Cambia el fondo cuando se pasa el mouse */
  text-decoration: none;
}

.radio-logo {
  width: 100px;
  /* Ajustamos el tamaño de la imagen */
  height: 100px;
  /* Aseguramos que la imagen sea circular */
  object-fit: contain;
  /* No distorsiona la imagen */
}










/* REDES SOCIALES FOOOOOOTER*/
.footer-section {
  background-color: #f3f3f3;
  /* Fondo gris claro */
  padding: 40px 0;
}

.footer-section h3 {
  color: #333;
  font-weight: bold;
}

.footer-section p {
  color: #666;
}

.footer-section .social-icons {
  gap: 15px;
  margin-top: 10px;
}

.footer-section .social-icon {
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-section .social-icon.facebook {
  background-color: #3b5998;
}

.footer-section .social-icon.instagram {
  background: radial-gradient(circle at 30% 30%, #f58529, #dd2a7b, #8134af, #515bd4);
}

.footer-section .social-icon.youtube {
  background-color: #ff0000;
}

.footer-section .social-icon.tiktok {
  background: linear-gradient(45deg, #25f4ee, #ff004f);
}

.footer-section .social-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.footer-section ul {
  padding: 0;
  list-style: none;
}

.footer-section ul li {
  color: #333;
  font-size: 1rem;
}

.footer-section ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section ul li a:hover {
  color: #007bff;
}

.footer-section ul li i {
  color: #007bff;
}





/*###################################################################################################*/
/*###################################################################################################*/
/*###################################################################################################*/






/* -------LETRAS DE ESCUDO DE FE Y UN LUGAR PARA TODA LA FAMILIA Y SOY PARTE ----------------------------------*/

.responsive-title {
  font-family: 'Century Gothic', sans-serif;
  color: white;
  font-size: 90px; /* Tamaño por defecto en pantallas grandes */
  font-weight: 1000;
  margin-left: -350px;
}

/* Ajustes progresivos desde 1600px hacia abajo */
@media (max-width: 1600px) {
  .responsive-title {
    font-size: 80px;
    margin-left: -250px;
  }
}

@media (max-width: 1500px) {
  .responsive-title {
    font-size: 70px;
    margin-left: -200px;
  }
}

@media (max-width: 1400px) {
  .responsive-title {
    font-size: 60px;
    margin-left: -150px;
  }
}

@media (max-width: 1300px) {
  .responsive-title {
    font-size: 55px;
    margin-left: -100px;
  }
}

@media (max-width: 1200px) {
  .responsive-title {
    font-size: 50px;
    margin-left: -80px;
  }
}

@media (max-width: 1024px) {
  .responsive-title {
    font-size: 45px;
    margin-left: -50px;
  }
}

@media (max-width: 768px) {
  .responsive-title {
    font-size: 40px;
    margin-left: 0px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .responsive-title {
    font-size: 35px;
    text-align: center;
  }
}

/* Estilos para el subtítulo con ajustes progresivos */
.responsive-subtitle {
  font-family: 'Century Gothic', sans-serif;
  color: white;
  font-size: 30px;
  margin-left: -200px;
}

@media (max-width: 1600px) {
  .responsive-subtitle {
    font-size: 28px;
    margin-left: -100px;
    text-align: center;
  }
}

@media (max-width: 1400px) {
  .responsive-subtitle {
    font-size: 26px;
    margin-left: -50px;
    text-align: center;
  }
}

@media (max-width: 1200px) {
  .responsive-subtitle {
    font-size: 24px;
    margin-left: 0px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .responsive-subtitle {
    font-size: 22px;
    margin-left: 0px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .responsive-subtitle {
    font-size: 20px;
    text-align: center;
  }
}

/* Estilos para el texto dinámico */
#typed-output {
  color: white;
  font-family: 'Century Gothic', sans-serif;
  font-size: 40px;
  margin-left: -500px;
}

@media (max-width: 1600px) {
  #typed-output {
    font-size: 35px;
    margin-left: -400px;
    text-align: center;
  }
}

@media (max-width: 1400px) {
  #typed-output {
    font-size: 36px;
    margin-left: -100px;
    text-align: center;
  }
}

@media (max-width: 1200px) {
  #typed-output {
    font-size: 34px;
    margin-left: -100px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  #typed-output {
    font-size: 32px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
  }
}

@media (max-width: 480px) {
  #typed-output {
    font-size: 20px;
    text-align: center;
  }
}

/* ------------------LETRAS DE ESCUDO DE FE Y UN LUGAR PARA TODA LA FAMILIA Y SOY PARTE ----------------------------------*/


.btn-custom {
  margin-left: -200px; /* Separa el botón del borde en pantallas grandes */
  display: inline-block; /* Mantiene el tamaño natural del botón */
}


/* Tamaños de pantalla medianos */

@media (max-width: 1600px) {
  .btn-custom {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 768px) {
  .btn-custom {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }
}

/* Tamaños de pantalla pequeños */
@media (max-width: 480px) {
  .btn-custom {
    width: 100%;
    max-width: 800px; /* Ajusta el tamaño máximo del botón */
  }
}







.navbar {
  background-color: rgba(33, 37, 41, 0);
  /* Transparente */
}

.nav-link {
  color: white !important;
}

.dropdown {
  position: relative;
}

.menu-ministerios {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  display: none;
  /* Oculto por defecto */
  background-color: rgba(10, 38, 64, 0.9);
  /* Fondo transparente */
  border: none;
  padding: 10px 0;
  transition: all 0.5s ease-in-out;
  /* Animación suave */
  z-index: 1000;
  border-radius: 0;
  /* Eliminar bordes redondeados */
}

.menu-ministerios.show {
  display: block;
  /* Visible al activarse */
}

.menu-ministerios a {
  color: white;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.menu-ministerios a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  /* Fondo claro al pasar */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
  .menu-ministerios {
    position: static;
    /* Evita problemas con el posicionamiento */
    width: 100%;
    /* Asegura que el menú ocupe toda la pantalla */
    display: none;
    /* Oculto inicialmente */
  }

  .menu-ministerios.show {
    display: block;
    /* Se muestra al activar la clase 'show' */
  }

  .dropdown-toggle {
    cursor: pointer;
    /* Asegura que sea fácil de tocar en móviles */
  }
}

/* Estilo para las imágenes */
.swiper-slide img {
  width: 150px;
  /* Ajusta el tamaño inicial */
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Efecto de suavidad */
  cursor: pointer;
  /* Cambia el cursor al pasar el puntero */
}

/* Efecto al pasar el puntero sobre la imagen */
.swiper-slide img:hover {
  transform: scale(1.2);
  /* Agranda la imagen al 120% */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /* Sombra para resaltar la imagen */
  border-radius: 8px;
  /* Bordes redondeados (opcional) */
}


/*////////////////////////////////////////////////////RADIO////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////RADIO////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////RADIO////////////////////////////////////////////////////*/


.radio-background {
  background: url('../img/EscudodeFe/radioPage.png') no-repeat center center;
  background-size: auto auto;
  /* Estira la imagen para ocupar todo el contenedor */
  width: 100%;
  height: 100vh;
  /* Reduce la altura para que no ocupe toda la pantalla */
  min-height: 400px;
  /* Asegura que no sea demasiado pequeño en pantallas pequeñas */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  /* Espaciado arriba y abajo */
}


.contenedor-radio {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  /* Mueve el botón más abajo */
  justify-content: flex-start;
  /* Mueve el botón a la izquierda */
  padding-bottom: 40px;
  /* Ajusta la distancia desde abajo */
  padding-left: 20px;
  /* Ajusta la distancia desde la izquierda */
}

.btn-custom-radio {

  position: absolute;
  left: 20px;
  /* Ajusta la distancia hacia la izquierda */
  bottom: 20px;
  /* Ajusta la distancia hacia abajo */
}

/* Estilos para el botón */
.btn-custom-radio button {
  padding: 12px 12px;
  /* Tamaño del botón */
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Ajustes en modo celular */
@media (max-width: 768px) {
  .btn-custom-radio {
    left: 10px;
    /* Más a la izquierda en móviles */
    bottom: 10px;
    /* Más abajo en móviles */
  }

  .btn-custom-radio button {
    font-size: 14px;
    /* Hace el texto más pequeño */
    padding: 8px 16px;
  }
}

/* Responsivo */
@media (max-width: 768px) {
  .radio-background {
    height: 50vh;
    /* Ajuste para tablets */
    min-height: 300px;
    background: url('../img/EscudodeFe/responsiveRadio.png') no-repeat center center;
  }

  .contenedor-radio {
    
    width: 90%;
  }

  .btn-custom-radio button {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .radio-background {
    height: 40vh;
    /* Ajuste para móviles */
    min-height: 250px;
    background: url('../img/EscudodeFe/responsiveRadio2.png') no-repeat center center;
  }

  .btn-custom-radio button {
    font-size: 14px;
  }
}

/*////////////////////////////////////////////////////RADIO////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////RADIO////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////RADIO////////////////////////////////////////////////////*/



/*////////////////////////////////////////////CONOCENOS/////////////////////////////////////////////*/

/* Contenedor principal */
.conocenos-contenedor-imagenes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px; /* Espaciado entre las imágenes */
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap; /* Permite apilarlas en móviles */
}

/* Caja contenedora de cada imagen y texto */
.conocenos-imagen-contenedor {
  text-align: center;
  width: 100%; /* Hacemos que ocupe el 100% en pantallas pequeñas */
  max-width: 450px; /* Tamaño máximo de la caja */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff; /* Fondo blanco */
  padding: 0; /* Eliminar espacio dentro del contenedor */
  margin: 10px;
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de transición */
}

.conocenos-imagen-contenedor:hover {
  transform: scale(1.05); /* Efecto al pasar el ratón */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Imagen con recorte ligero */
.conocenos-img-responsive {
  width: 100%;
  height: 800px; /* Altura constante */
  object-position: center top; /* Desplazamos la imagen ligeramente hacia abajo */
  border-radius: 15px; /* Bordes redondeados para la imagen */
  margin-bottom: 15px; /* Espacio entre la imagen y el texto */
}

/* Caja de texto debajo de la imagen */
.conocenos-descripcion-conoce-mas {
  margin-top: 10px;
  padding: 10px; /* Espacio para separar el texto de la imagen */
  background-color: #fff; /* Fondo blanco */
}

/* Texto debajo de la imagen */
.conocenos-descripcion-conoce-mas h4 {
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
}

.conocenos-descripcion-conoce-mas h3 {
  font-size: 16px;
  font-weight: normal;
  color: #333;
}

.parrafo-escudo {
  font-family: 'Century Gothic', sans-serif;
  color: black;
  font-size: 16px;
  text-align: justify;
  max-width: 90%;
  margin: 0 auto;
  line-height: 1.6;
}

/* Responsivo para pantallas medianas (Tablets, 1024px hacia abajo) */
@media (max-width: 1024px) {
  .conocenos-title {
    font-size: 40px;
  }
  .conocenos-imagen-contenedor {
    width: 45%;
  }
}

/* Responsivo para pantallas pequeñas (Móviles, 768px hacia abajo) */
@media (max-width: 768px) {
  .conocenos-title {
    font-size: 35px;
  }

  .conocenos-contenedor-imagenes {
    flex-direction: column; /* Apilar las imágenes verticalmente */
    align-items: center;
  }

  .conocenos-imagen-contenedor {
    width: 80%; /* Reducir tamaño de las cajas en móviles */
  }

  .conocenos-descripcion-conoce-mas h4 {
    font-size: 14px;
  }

  .conocenos-descripcion-conoce-mas h3 {
    font-size: 12px;
  }
}

/* Responsivo para pantallas muy pequeñas (Celulares, 480px hacia abajo) */
@media (max-width: 480px) {
  .conocenos-title {
    font-size: 30px;
  }

  .conocenos-imagen-contenedor {
    width: 90%; /* Reducir tamaño aún más en pantallas muy pequeñas */
  }

  .conocenos-img-responsive {
    height: 100%; /* Asegura que la imagen se ajuste bien */
  }

  .parrafo-escudo {
    font-size: 14px;
    text-align: center;
  }
}


/*////////////////////////////////////////////CONOCENOS/////////////////////////////////////////////*/






/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/

/* Contenedor principal */
.anunciosescudodefe-container {
  text-align: center;
  padding: 20px;
  position: relative;
}

/* Estilo del botón "Ver todos" */
.anunciosescudodefe-boton-todos {
  background-color: #002d72;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  float: right; /* Alineado a la derecha por defecto */
  margin-bottom: 20px; /* Espacio debajo del botón */
}

/* Título de la sección */
.anunciosescudodefe-titulo {
  font-size: 35px;
  color: #002d72;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Subtítulo de la sección */
.anunciosescudodefe-subtitulo {
  color: #666;
  margin-bottom: 20px;
}

/* Contenedor del carrusel */
.anunciosescudodefe-carrusel {
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
}

/* Contenedor de los slides */
.anunciosescudodefe-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Estilo de cada slide */
.anunciosescudodefe-slide {
  flex: 0 0 33.33%; /* Cada slide ocupará un 33% del ancho */
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: black;
  padding: 0 10px; /* Espaciado entre las imágenes */
}

.anunciosescudodefe-slide img {
  width: 100%; /* Hace que las imágenes ocupen el 100% del contenedor */
  height: auto; /* Mantiene la proporción de las imágenes */
  border-radius: 10px; /* Bordes redondeados */
}

/* Responsividad para pantallas medianas (Tablets, 1024px hacia abajo) */
@media (max-width: 1024px) {
  .anunciosescudodefe-slide {
    flex: 0 0 50%; /* En pantallas medianas, cada slide ocupará el 50% */
  }
  .anunciosescudodefe-titulo {
    font-size: 30px; /* Ajustar el tamaño del título */
  }
}

/* Responsividad para pantallas pequeñas (Móviles, 768px hacia abajo) */
@media (max-width: 768px) {
  .anunciosescudodefe-slide {
    flex: 0 0 100%; /* En pantallas pequeñas, cada slide ocupará el 100% */
  }
  .anunciosescudodefe-boton-todos {
    float: none;           /* Elimina el float */
    display: block;        /* Hace que el botón ocupe toda la línea */
    margin-left: auto;     /* Centra el botón horizontalmente */
    margin-right: auto;    /* Centra el botón horizontalmente */
    width: max-content;    /* Ajusta el tamaño del botón al contenido */
  }
  .anunciosescudodefe-titulo {
    font-size: 25px; /* Ajustar el tamaño del título en móviles */
  }
}

/* Responsividad para pantallas muy pequeñas (Celulares, 480px hacia abajo) */
@media (max-width: 480px) {
  .anunciosescudodefe-titulo {
    font-size: 22px; /* Ajuste de título en pantallas muy pequeñas */
  }

  .anunciosescudodefe-slide img {
    width: 100%; /* Las imágenes se ajustan completamente al ancho */
    height: auto;
  }

  .anunciosescudodefe-boton-todos {
    font-size: 14px; /* Ajustar tamaño de fuente del botón en pantallas pequeñas */
    padding: 8px 12px; /* Reducir el tamaño del botón */
  }
}


/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/
/*////////////////////////////////////////////ANUNCIOS/////////////////////////////////////////////*/




/*////////////////////////////////////////////PREDICAS/////////////////////////////////////////////*/
/*////////////////////////////////////////////PREDICAS/////////////////////////////////////////////*/
/*////////////////////////////////////////////PREDICAS/////////////////////////////////////////////*/
/*////////////////////////////////////////////PREDICAS/////////////////////////////////////////////*/
/*////////////////////////////////////////////PREDICAS/////////////////////////////////////////////*/

#predicas {
  background-color: blue; /* Fondo más suave */
  padding: 20px;
}