/* Animaciones principales (pelota y texto) */
@keyframes movimientoPelota{
  from { 
  transform: translateX(0);
  }
  to{
  transform: translateX(220px);
  }
  } 
  /* Transformamos con estas funciones la pelota de un lado a otro en eje X*/
  @keyframes movimientoTexto{
  from {
  transform: translateX(0);
  }
  to{
  transform: translateX(-80px);
  }
  }
  /*Transformamos la posicion del texto*/
   
body, html{
  width:100% ;
  margin: 0; 
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  }


/* Estilos header */
.header {
  align-items: center;
  margin-left: 0px;
  position: fixed;
  display: flex;
  color: white;
  width: 100%; /*100% de altura*/
  height: 14%;
  top: 0;
  color: rgb(0, 0, 0);
  z-index: 100;
  background-color: rgb(136, 136, 136);
  left: 0;
  }

.header a{
  margin: 0px 300px 100px 0px;
  color: #DB6612;
  }
  .header h1{
    font-family: "Bebas Neue", sans-serif;
    display: block;
    font-size: 50px;
    position: fixed;
    margin-top: 10px ;
    animation: movimientoTexto 3s forwards infinite alternate ;
  }
  .header img{
    margin-bottom: 20px;
    image-orientation: initial  ;
    animation: movimientoPelota 3s forwards infinite alternate; /*Vinculamos con variables de movimiento de arriba*/
    max-width: 80px;
  }
  
  .animated-title {
    z-index: 10;
    margin-top: 300px;
    position: relative;
    display: inline-block;
  }
  

  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes moveRight {
    to {
      transform: translateX(100%);
    }
  }
  
  @keyframes moveLeft {
    to {
      transform: translateX(-100%);
    }
  }

/* Estilos del MAIN */
main {
  padding: 5px; /* PADDING DENTRO DEL MAIN*/
  margin-top: 0px; /*Damos espacio para el header (PARTE SUPERIOR)*/
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir toda la pantalla */
  background-position: center center; /* Centra la imagen en la pantalla */
  background-repeat: no-repeat; /* Evita la repetición de la imagen de fondo */
}

.mainbotones ul {
  list-style: none;
  display: flex; /*Centra los elementos horizontalmente */
  margin:200px 0px 150px 63vh;
  padding: 0px;
}

.mainbotones ul li {
  margin: 0px 10px 0px 10px ;
  padding: 0px 0px 50px 40px;
}

.mainbotones ul li a {
  text-decoration: none;
  font-family: "Bebas Neue", sans-serif;
  font-size: 2em; 
  border-radius: 15px;
  margin: 0px 50px 0px -100px;
  padding: 15px 20px 15px 20px;
  border: 2px solid black;/*Aplicamos bordes de los botones (negros)*/
  color: black;
  cursor: pointer;/*DETENCCIÓN DEL MOUSE*/
  box-shadow: inset 0 0 0 0 #DB6612; /*Color de transicion*/
  /*ANIMACIONES CHECKEAR DETECCION DE RATON*/
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.mainbotones ul li a:hover {
  box-shadow: inset 0 0 0 50px #db6612bd; /*color final (hovered)*/
}

/* Estilos de los botones: ("rodeados de rectangulo naranja y este, definido")"" */
a {
  font-family: "Exo 2", sans-serif;
  font-size: 17px;
  margin-left: 5px;
  margin-right: 10px;
}


/*                                           INTEGRANTES                                       */
/* Contenedor principal */
.body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-title-container {
  text-align: left;
  margin-left: 200px;
  
}

.animated-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 150px;
  color: #DB6612; /* Color del texto */
  position: fixed;
  display: inline-table;
  animation: slideIn 5s forwards;
}
.madagascar img{
    border-radius: 40%;
    height: 600px;
    width: 750px;
    margin-left: 58vh;
    margin-bottom: -20vh;
  }
@keyframes slideIn {
  from {
    transform: translateY(-200px); /* Aqui es de donde sale la animacion del texto */
    opacity: 0;
  }
  to {
    transform: translateY(-150px); /* Aqui es hasta donde llega la animacion del texto */
    opacity: 1;
  }
}
.image-container {
  position: relative;
  display: inline-block;
  margin: 300px 150px 0px 100px; /* Margen de las imagenes */
  z-index: 1; /* Asegura que la capa esté por encima de otras capas */
}

/* Estilos para las imagenes de los contenedores (fotos integrantes) */
.image-container img {
  margin-left: 200px;
  width: 400px;
  height: 400px;
  border-radius: 20px 20px 20px 20px; /* Los valores controlan la curvatura de las esquinas (superior izquierda, superior derecha, inferior derecha, inferior izquierda) */ 
}

/* Capa semitransparente que al principio no aparece */
.overlay {
  font-family: "Bebas Neue", sans-serif;
  margin-left: 200px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 67%;
  border-radius:  20px 20px 20px 20px;
  background: rgba(0, 0, 0, 0.7); /* Ajusta el valor del canal alfa (0.7) para hacerla menos transparente */
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; /* Asegura que la capa esté por encima de otras capas */
}


/* Texto en la capa semitransparente */
.overlay p {
  width: 100%;
  color: white;
  text-align: center;
  font-size: 20px;

}

/* Mostrar la capa semitransparente al pasar el ratón */
.image-container:hover .overlay {
  opacity: 1; /* opacidad de la capa*/
}

/* FOOTER */
footer {
  background-color: rgb(136, 136, 136);
  color: #fff;
  padding: 20px 0;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-section-contacto {
  margin-left: -140%;
}
.footer-section-redes {
  margin-right: -5%;
}
.footer-section-menu {
  margin-left: 30%;
  text-align: center;
}
.footer-section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

ul.footer-menu {
  padding: 8px 16px;
  list-style: none;
  color: #fff;
}
ul.footer-menu li {display: inline;}
ul.footer-menu li+li:before {
  padding: 8px;
  color: rgb(255, 255, 255);
  content: "/\00a0";
}
ul.footer-menu a:link, ul.footer-menu a:visited {
  text-decoration:none;
  color: rgb(255, 255, 255);
}

ul.footer-menu li a.active {
  color: #ffffff;
  font-weight: bold;
}
ul.footer-menu li a.active:hover {
  color: #DB6612;
  font-weight: bold;
}

.footer-section p {
  margin: 10px 0;
}

.social-icons img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  transition: transform 0.5s ease-in-out;
  border-radius: 50%;
}

.social-icons img:hover {
  transform: scale(1.2);
}

.social-icons a:last-child img {
  margin-right: 0;
}