/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Fondo negro para toda la página */
    scroll-behavior: smooth; /* Asegura que el scroll sea suave */
}

/* Estilos para la imagen */
.imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.10s ease; /* Transición suave al hacer scroll */
}

.imagen-centrada {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ajusta la altura al 100% de la ventana del navegador */
  }
  
  .imagen-centrada img {
    max-width: 100%; /* Asegura que la imagen sea responsiva */
    transition: transform 0.5s ease; /* Transición suave al hacer scroll */
  }

/* Estilos para los botones de redes sociales */
.icono-social {
    font-size: 100px; /* Tamaño del ícono */
    margin: 50px;
    color: #000; /* Color del ícono, cambia según tu diseño */
    text-decoration: none; /* Elimina el subrayado del enlace */
}
.centro-social {
    display: flex;
    justify-content: center; /* Centra los ítems horizontalmente */
    align-items: center; /* Centra los ítems verticalmente */
    padding: 20px 0; /* Espaciado superior e inferior */
}

.facebook {
    color: #3b5998; /* Color oficial de Facebook */
}

.instagram {
    color: #C13584; /* Color oficial de Instagram */
}

/* Agrega estilos específicos para otros íconos de redes sociales aquí */

/* Estilos para el video */
video {
    width: 100%;
    max-height: 350px;
}
.centro-footer {
    text-align: center; /* Centra el texto horizontalmente */
    padding: 20px 0; /* Espaciado superior e inferior */
    background-color: #000; /* Color de fondo del footer */
}
.centro-footer p {
    color: #ffffff; /* Cambia este valor al color que prefieras */
    /* Resto de tus estilos */
}
/* Estilos para el contenedor del video responsivo */
.contenedor-video {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Proporción 16:9 */
}

.contenedor-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-responsivo {
    width: 100%;
    height: auto;
}
.contenedor {
    display: flex;
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    background-color: black;
    color: white;
    padding: 20px;
    flex-direction: column; /* Organiza los elementos en una columna */
  }

  .texto {
    font-size: 65px; /* Aumenta el tamaño del texto */
    text-align: center; /* Centra el texto dentro de su contenedor */
    margin: 10px 0; /* Agrega un espacio arriba y abajo del texto */
  }

  .imagen {
    flex: 1;
  }
  .imagen img {
    max-width: 100%; /* Asegura que la imagen sea responsiva */
    height: 100; /* Mantiene la proporción de la imagen */
  }
  img {
  /* Asegúrate de que la imagen no exceda el ancho del contenedor */
  max-width: 100%;
  height: auto;
  transition: transform 0.10s ease; /* Transición suave al hacer scroll */
  }
  .seccion {
    display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  margin-bottom: 20px;
  }
  
  .video {
    flex: 0 0 33%; /* Cada video comienza con un 32% del ancho del contenedor */
    margin: 10px;
    text-align: center;
  }
  
  .video iframe {
    width: 100%; /* El video ocupa el 100% del ancho de su contenedor .video */
    height: auto; /* La altura es automática para mantener la proporción */
    aspect-ratio: 16 / 9; /* Mantiene una proporción de aspecto de 16:9 */
  }
  @media screen and (max-width: 768px) {
    .video {
      flex: 0 0 100%; /* En pantallas pequeñas, cada video ocupa el 48% del ancho del contenedor */
    }
    .texto {
      font-size: 20px; /* Tamaño de Fuente mas pequeño para pantallas medianas*/
    }
  }
  
  @media screen and (max-width: 480px) {
    .video {
      flex: 0 0 100%; /* En pantallas muy pequeñas, cada video ocupa el 100% del ancho del contenedor */
    }
    .texto {
      font-size: 30px; /* Tamaño de Fuente mas pequeño para pantallas medianas*/
    }
  }
  .titulo-video {
    font-weight: bold;
    font-size: 20px;
  }
  .mi-elemento {
    margin-bottom: 30px; /* Agrega un espacio de 20 píxeles debajo del elemento */
    margin-top: 50px;
  }

  /* Banner*/
#banner {
  text-align: center; /* Centra horizontalmente el contenido del contenedor */
}

#banner img {
  display: block;
  margin: 0 auto; /* Centra la imagen horizontalmente */
  max-width: 100%; /* La imagen se ajustará al ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
}

.texto_ {
  font-size: 35px; /* Aumenta el tamaño del texto */
  text-align: center; /* Centra el texto dentro de su contenedor */
  margin: 1px 0; /* Agrega un espacio arriba y abajo del texto */
  color: #ffffff;
}
h2 {
  font-size: 50px ;
  text-align: center;
}

p {
text-align: center;
color: #ffffff;
}

/* Estilo por defecto para la clase texto_b */
.texto_b {
  font-size: 3vw; /* Tamaño de texto adaptable al ancho de la ventana */
}

/* Media query para pantallas de tamaño mediano, como tabletas */
@media screen and (max-width: 600px) {
  .texto_b {
    font-size: 4vw; /* Tamaño más pequeño para pantallas medianas */
  }
}

/* Media query para pantallas pequeñas, como teléfonos móviles */
@media screen and (max-width: 480px) {
  .texto_b {
    font-size: 3vw; /* Tamaño aún más pequeño para pantallas pequeñas */
  }
}