/* Estilos generales */
body { font-family: Arial, sans-serif; 
    background-color: #000; /* Fondo negro para todo el sitio */
    color: #fff; /* Texto en color blanco para contraste */
}
.container { width: 100%; margin: auto; }
header, footer { background-color: #000000; color: white; text-align: center; padding: 1em; }
nav ul { list-style-type: none; }
nav ul li { display: inline; margin-right: 20px; }
nav a { text-decoration: none; color: white; }
.main-image_1 { width: 100%; height: auto; }
/* Estilos para centrar el h2 */
    h2 {
      text-align: center;
    }

.main-image {
    max-width: 100%; /* Hace que la imagen sea tan ancha como su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Evita que la imagen tenga espacio extra debajo */
  }



  /* Estilos para la sección de imágenes y texto */
.seccion-imagenes-texto {
    background-color: #000000; /* Fondo diferente */
    padding: 20px;
    margin-bottom: 20px
  }
  
  .imagen-con-texto {
    display: flex;
    flex-direction: column; /* Alinea la imagen y el texto verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    margin-top: -50px; /* Margen superior configurable */
    margin-bottom: 0px; /* Margen inferior configurable */
  }
  
  .imagen-con-texto img {
    max-width: 75%; /* Responsivo */
    height: auto;
  }
  
  .imagen-con-texto p {
    text-align: center;
    font-size: 50px; /* Ajusta el tamaño del texto */
  font-weight: bold; /* Aplica negritas al texto */

  }
  
  /* Media Queries para dispositivos más pequeños */
  @media (max-width: 768px) {
    .imagen-con-texto p {
      font-size: 30px; /* Reduce el tamaño del texto para dispositivos más pequeños */
    }
    .imagen-con-texto {
      flex-direction: column; /* Mantiene la alineación vertical en dispositivos móviles */
    }
  }
/*redes sociales*/
  .icono-social {
    max-width: 100%; /* Ajusta el ancho máximo al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    margin: 0 10px; /* Espacio horizontal entre iconos */
    margin-top: 30px; /* Margen superior configurable */
    margin-bottom: 50px; /* Margen inferior configurable */
  }
  /* Para dispositivos más grandes */
@media (min-width: 768px) {
    .icono-social {
      width: 50px; /* Tamaño más grande para pantallas grandes */
    }
  }
  
  /* Para dispositivos móviles */
  @media (max-width: 767px) {
    .icono-social {
      width: 50px; /* Tamaño más pequeño para pantallas pequeñas */
    }
  }

  /* Contenedor de los iconos de redes sociales */
.contenedor-iconos {
    display: flex; /* Activa Flexbox */
    justify-content: center; /* Alinea los elementos horizontalmente al centro */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    height: auto; /* Ocupa todo el alto de la ventana del navegador */
  }

  .image-wrapper {
    text-align: center; /* Centra el contenido del div */
    align-items: center;
    max-width: 50%; /* Hace que la imagen sea tan ancha como su contenedor */
    margin-bottom: 5px; /* Añade margen debajo de la imagen */
  }
  
  .centered-image {
    max-width: 100%; /* Asegura que la imagen no sea más ancha que su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
  }
  /* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .image-wrapper {
    text-align: center;
    order: -1; /* La imagen se coloca al principio */
  }

  .responsive-image {
    width: 500%; /* La imagen ocupa todo el ancho disponible */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: 20px; /* Espacio entre la imagen y los videos */
  }
}

/* Estilos para dispositivos más grandes */
@media (min-width: 769px) {
  .videos-container {
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
  }

  .image-wrapper {
    text-align: center;
    order: -1; /* La imagen se coloca al principio */
    max-width: 75%; /* Hace que la imagen sea tan ancha como su contenedor */
    margin-bottom: 5px; /* Añade margen debajo de la imagen */
  }

  .responsive-image {
    width: 50%; /* Tamaño de la imagen en pantallas más grandes */
    height: auto;
    margin: 0 auto 10px; /* Centra la imagen y añade espacio debajo */
  }
}

/*nuevo  sociales*/

.img_social {
  text-align: center; /* Centra el contenido del div */
}

.img_social img {
  width: 50%; /* Hace la imagen responsiva */
  max-height: auto; /* Mantiene la proporción de la imagen */
  margin-top: 20px; /* Margen superior configurable */
  margin-bottom: 20px; /* Margen inferior configurable */
}

/* Media query para tamaños de pantalla pequeños */
@media (max-width: 600px) {
  .img_social img {
    width: 50%; /* Ajusta el tamaño de la imagen en pantallas pequeñas */
  }
}
/*------------------------------------------*/

.contenedor-imagen {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Margen superior configurable */
  margin-bottom: 20px; /* Margen inferior configurable */
  padding: 20px; /* Espacio interno para la imagen */
}

.contenedor-imagen img {
  max-width: 50%;
  height: auto;
}

/* Media Queries para dispositivos más pequeños */
@media (max-width: 768px) {
  .contenedor-imagen img {
    max-width: 60%; /* Ajusta este valor para reducir el tamaño de la imagen en dispositivos más pequeños */
    height: auto;
  }
}


/* Videos */
.contenedor-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.video {
  width: 100%;
  padding: 5px;
}

@media (min-width: 600px) {
  .video {
    width: 48%;
  }
}

@media (min-width: 900px) {
  .video {
    width: 30%;
  }
}

iframe {
  width: 100%;
  height: 500px;
}

.miTexto {
  color: #B8CF33; /* Cambia el color del texto a rojo */
  font-family: Arial, sans-serif; /* Cambia la fuente del texto a Arial */
  text-align: center; /* Centra el texto horizontalmente */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px; /* Aumenta el tamaño de la letra a 24 píxeles */
  margin-top: 40px; /* Margen superior negativo */
  margin-bottom: -10px; /* Margen inferior negativo */
}



@media (min-width: 768px) {
  .miTexto {
    font-size: 24px;
  }
}

@media (min-width: 600px) {
  .miTexto {
    font-size: 24px;
  }
}
/*galeria  imagenes*/
.container_1 {
  width: 100%;
  text-align: center;
  align-items: center;
}
.main-image {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.text-section {
  margin: 20px 0;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.gallery img {
  width: 30%;
  margin-bottom: 10px;
  margin-top: 10px; /* Margen superior negativo */
}
@media (max-width: 600px) {
  .gallery img {
    width: 60%;
  }
}

.gallery-container {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.secondary-image {
  width: 19%;
  margin: 0.5%;
  height: auto;
}
@media screen and (max-width: 600px) {
  .secondary-image {
    width: 19%;
    margin: 0.5%;
  }
}