* {
    box-sizing: border-box;
    font-family: "vt323", sans-serif;
  }
  
  body {
    font-family: "vt323", sans-serif;
    margin: 0;
 
   /* color general de los textos */
   color: white;
 
   /* color de fondo */
   background-color: black;
   min-height: 100dvh;
   
 }
 
 /* selector multiple: parrafos e items de listas  */
 p,
 li {
   /* se evitan "viudas" y "huerfanos" */
   text-wrap: pretty;
 }
 
 /* selector multiple: los titulos */
 h1,h2,h3,h4,h5{
  /* mas oscuros que los otros textos */
 
  /* parecido a interlineado, valor 1 equivaldria a interlineado igual al tamaño de la tipografia */
  line-height: 1;
  /* en web, generalmente, el interlineado en titulos es menor que el interlineado en parrafos */
 
  /* si ocupa más de una linea,
  se equilibran los anchos de esas lineas */
  text-wrap: balance;
 }
 
 /* para que "TODAS" las imagenes NO sean
    mayores que las cajas que las contienen
    para evitar "scroll" horizontal */
 img {
   /* mediran, como maximo, el tamaño
      del bloque html que las contiene */
   max-width: 100%;
 }
 
 /* "TODOS" los vinculos */
 a {
   /* no estaran subrayados */
   text-decoration: none;
 }
 
 ul
 {
   /* elimina bullets, numeros etc. */
   list-style: none;
 
   /* retira el relleno izquierdo predeterminado */
   padding: 0;
 }

 /*-----------------------------------------------header= menu-------------------------------------------------*/

 header {
   box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); /* sombra difusa  */
   background-color: black;
 
   /* "pegado" al borde superior de la ventana */
   position: sticky;
   /* distancia 0 del borde */
   top: 0;
   /* capa superior arriba de casi todo */
   z-index: 8000;
 }
 
 /* caja que "limita" al logo y al menu */
 header .contenedora {
   display: flex; /* caja flexible */
   /* si los elementos "hijos" no caben en una fila,
      van a la fila siguiente */
   flex-wrap: wrap;
   
   /* elementos "hijos" separados en la horizontal */
   justify-content: center;
   
   /* elementos "hijos" centrados en la vertical */
   align-items: baseline;
 }
 
 header nav ul{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   -ms-flex-direction: column;
 }
 header nav ul li a{
   font-size: 50px;
   width: 100%;
   height: 100%;
   background-color: orange;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   padding:0.5em 1.5em;
 }
 
 header nav ul li a:hover{
   color: black;
   background-color:rgba(255, 127, 90, 1) ;
   transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
 }

 /*--------------------------------- menu hamburguesa*--------------------------------*/

  .menu-hamburguesa{
  padding: .49rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 9000;}

 /*las tres lineas del menu hamburguesa*/     

 .menu-hamburguesa .linea {
   width: 25px;
   height: 3px;
   background-color: rgba(255, 127, 90, 1);;
   margin: 5px;
   transition: all 0.3s ease-out;
   position: relative;
   z-index: 9000;
 }

 
 nav ul {
   background-color: orange;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   position: fixed;
   /* emplazamiento,
   estirado en toda la ventana */
   inset: 0;
   /* capa superior, arriba de casi todo */
   z-index: 8000;
   /* escondido "a la derecha" */
   translate: 100%;
   transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
 }
 
 /*--------------------------- el menu cuando "nav" tiene la clase "menuVisible" -----------------------*/
 
 .menuvisible ul {
   background-color:orange ;
   opacity: 80%;
   transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
   
   /* se muestra */
   translate: 0;
   margin: 0;
 }

 main{
   width: 100%; /* O el ancho deseado */
   overflow-x: hidden;
 }

/*---------------------------fin menu---------------------------*/
  
@media(min-width:450px){

  /*------------------------------------------anula el menu hamburguesa--------------------------------------*/

   .menu-hamburguesa{
       display: none;
   }

/*-------------------------------------anula varias opciones del menu vertical--------------------------------*/

   header nav ul {
       /* caja flexible para menu horizontal*/
       display: flex;
     /* para que esté en capa superior pero que no parezca */
       position: relative;
       opacity: 1;
       visibility: visible;
       translate: none;
       transition: none;
     }
 /*-----------------------------------------navegacion, menu y header------------------------------------*/

     .contenedora {
 
       /* ancho maximo 1040px */
       max-width: 65rem;
     
       /* centrado horizontal (si sobra espacio,
         lo distribuye a izquierda y derecha por igual) */
       margin-inline: auto;
     
       /* espacio entre el borde del elemento y su contenido
       para que este no quede "pegado" a los bordes */
       padding: 1rem;
     }
   
     nav {
       flex-grow: 1;
     }
   
   .menu {
       display: flex;
       justify-content: flex-end;
       padding-right: 1rem; }
   
   .menu li {
       margin: 0 1rem; }
   
   .menu a {  
       color:rgba(255, 127, 90, 1);
       transition: transform 0.3s; /* transicion suave para el efecto */
       font-weight: bold;  
     }
   
     
     header nav ul {
       /* elimina los margenes arriba y abajo que vienen predeterminados */
       margin-block: 0;
       display:flex;
       flex-direction: row;
       gap: .25rem;
       flex-wrap: wrap;
       justify-content: flex-end;
       background-color: black;
     }
   
     header nav ul li {
       width: 5em;
       height: 2em;
       margin-left: .30em;
       
       /* agrega espacio vertical entre la lista del menu*/
       margin-right: 10px;
     
      /*separa los contenedores los cuales envuelven a los link, se les dio separacion
      y tamaño adecuado para que quede prolijos*/
     }
   
     header nav {
       border-radius: 1em;
       gap: 1em;
     }
   
     header nav a {
        
       /* para darle propiedades de caja (ancho, por ejemplo) */
       display: block;
       
       /* ancho igual para todos */
       width: 5em;
       
       /* "relleno" arriba y abajo */
       padding-block: 0.25em .5em;
         
       /* se alineo los textos en el centro, horizontal.*/
       text-align: center;
       }
   
       header .contenedora{
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           text-align: justify;
         } 
     
     header nav ul li a {
       width: 100%;
       height: 100%;
       background-color: rgb(0, 0, 0);
       color:rgba(255, 127, 90, 1);
       border-color:rgba(255, 127, 90, 1) ;
       text-decoration: none;
       font-weight: bold;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 16px;
     }
     
     header nav ul li a:hover{
       color: white;
       background-color: black;
       outline: solid rgba(255, 127, 90, 1);
       transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
     }
       
     header{
         background-color: black;
       }
  }


/* Ajustes adicionales para responsividad (esto no recuerdo que era chicas, asi que no toco jasjjasd -D*/
@media (max-width: 768px) {
  .equipo img, .solo img {
      width: 15em;
  }

  .equipo a, .solo a {
      width: 8em;
      font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .equipo img, .solo img {
      width: 10em;
  }

  .equipo a, .solo a {
      width: 6em;
      font-size: 1rem;
  }
}

/*------------------ Jugar ESPERA-cuenta regresiva (color, posición, etc) -------------------------*/

/*NOTA dany 18/06: habría que modificar lo de imagen del dino, al ser decoración iria en css, o como icon, ¿no?... por el momento dejo así*/

.contenedora_espera{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contenedora_espera img{
  height: auto;
  margin: 0;
  padding: 3px;
  margin: 2rem;
  width: 13em;
}

.contenedora_espera h2{
  width: auto; /* Ajusta automáticamente el ancho del h2 */
  font-size: 3rem;
  font-weight: normal;
  margin: 0.2em 0; /* Añade margen para separación */
}

.contenedora_espera p{
  font-size: 13rem;
  font-weight: normal;
  color: rgba(255, 127, 90, 1);
  margin: 0.2em 0; /* Añade margen para separación */
}
/*------------------ fin jugar-ESPERA-cuenta regresiva -------------------------*/

/*--------------------------footer-----------------------*/

footer {
  background-color: #000000;
  text-align: center;
  padding: 0.1em;
  color: rgb(255, 255, 255);
}