* {
    box-sizing: border-box;
    font-family: "vt323", sans-serif;
    font-weight: normal;

  }
  
  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{
  line-height: 1;
  text-wrap: balance;
 }
 
 img {
   max-width: 100%;
 }
 
 /* "TODOS" los vinculos */
 a {
   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;
    inset: 0;
    z-index: 8000;
    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" */
    
    translate: 0;
    margin: 0;
  }
 
  .menuVisible ul li:last-of-type :is(a:hover, a:active)::before {
   content: "otra página ";
 }
 

 dialog {
  background-color:#FF7F5A;
  inline-size: min(20em, 80%);
  border-radius: .5em;
  box-shadow: 0 0 0 0 hsl(0 0% 10%);
  padding: .5em;

  position: fixed;
  inset: 0;
  margin: auto;

  transform: translateY(-100vh);
  transition: .5s;
}

dialog.visible {
  box-shadow: 0 10px 10px 0 hsl(0 0% 0% / 20%);
  transform: translateY(0);
  transition: .5s;
  transition-delay: .5s;
}

dialog::backdrop {
  opacity: 0;
}

dialog.visible::backdrop {

  opacity: 1;

  transition: 1s;

  background-image: 
    linear-gradient(
      135deg,
      rgba(255, 77, 31, 0.75),
      rgba(255, 255, 113, 0.737),
      rgba(10, 10, 10, 0.75));
}

form {
  display: grid;
  gap: 1em;
  padding: 1em;
}

.form__grupo {
  position: relative;
  color: hsla(0, 0%, 5%, 0.5);
}

.form__input {
   width: 100%;
   background: white;
   color: hsl(0 0% 50%);
   font-size: 1rem;
   padding: 1em .5em;
   border: solid 1px #000000;
   border-radius: .25em;
   outline: none;
   font-family: inherit;
   transition: 1s;
}

.form__input:focus {
  color: #000000;
  font-weight: 700;
}

.form__label {
  color: #000000;
  position: absolute;
  top: 0;
  left: .5em;
  transform: translateY(.5em);
  transition:
    transform .5s,
    color .3s,
    padding .5s;
  padding: 0;
  background-color: white;
}

:is(.form__input:not(:placeholder-shown),
    .form__input:focus) {
  color: #000000;
}

:is(.form__input:not(:placeholder-shown),
    .form__input:focus) + .form__label {
  transform: translateY(-.6em) scale(.7);
  transform-origin: left top;
  padding: 4px;
  color: #000000;
}

.form__submit {
  background-color: #010101;
  color:#E9E774;
  font-family: inherit;
  font-size: x-large;
  padding: .25em 1em;
  inline-size: max-content;
  border: none;
  border-radius: 1rem;
  outline: none;
  justify-self: center;
  transition: .5s;
}

.form__submit:focus,
.form__submit:hover {
  background-color: #000000;
}

/*-----------------------------------------------------------------------------------------*/
   
 

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



  
/*------------------------------ Encabezado JUGAR AHORAAAA -----------------------*/

.contenedora_pregunta {
  text-align: center;
  margin-bottom: 2rem;
}

.contenedora_jugar {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.contenedora_pregunta h1 {
  font-size: 50px;
}

/* Jugar en EQUIPO y SOLO */
 
.equipo, .solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #E9E774;
  border-radius: 1rem;
  text-align: center;
}

.equipo img, .solo img {
  width: 15em;
}

.equipo h2, .solo h2 {
  background-color: rgba(255, 127, 90, 1);
  margin: 0;
  font-size: 1.5rem;
  color: white;
  padding: 20px;
  border-radius: 1rem 1rem 0 0;
  margin-top: 1rem;
  display: block;
  width:25em;
  text-align: center;
  margin-block-start: 0;
  font-weight: normal;
}

.equipo a, .solo a {
  font-size: 1.5rem;
  color: white;
  background-color: black;
  padding: 10px;
  border-radius: 1rem;
  margin-top: 1rem;
  display: block;
  width: 10em;
  text-align: center;
}


/* Jugar ESPERA */

.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 */
}
footer .redes{
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  margin-left: 2em;
  margin-right:2em
}

 footer img{
  width:15%;
 }

 footer h2{
  font-size: 25px;
  text-align: center;
  color:rgba(255, 127, 90, 1) ;
 }

 footer p{
  font-size: 10x;
  text-align: center;
 }
        

/* Para pantallas min de ancho */
@media(min-width:1024px){

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

   .menu-hamburguesa{
       display: none;
   }

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

   header nav ul {
       /* caja flexible para menu horizontal*/
       display: none;
     /* 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;
     }

     /*------------------------caja modal de diálog0--------------------------*/

dialog {
  background-color:#FF7F5A;
  inline-size: min(20em, 80%);
  border-radius: .5em;
  box-shadow: 0 0 0 0 hsl(0 0% 10%);
  padding: .5em;

  position: fixed;
  inset: 0;
  margin: auto;

  transform: translateY(-100vh);
  transition: .5s;
}

dialog.visible {
  box-shadow: 0 10px 10px 0 hsl(0 0% 0% / 20%);
  transform: translateY(0);
  transition: .5s;
  transition-delay: .5s;
}

dialog::backdrop {
  opacity: 0;
}

dialog.visible::backdrop {

  opacity: 1;

  transition: 1s;

  background-image: 
    linear-gradient(
      135deg,
      rgba(255, 77, 31, 0.75),
      rgba(255, 255, 113, 0.737),
      rgba(10, 10, 10, 0.75));
}

form {
  display: grid;
  gap: 1em;
  padding: 1em;
}

.form__grupo {
  position: relative;
  color: hsla(0, 0%, 5%, 0.5);
}

.form__input {
   width: 100%;
   background: white;
   color: hsl(0 0% 50%);
   font-size: 1rem;
   padding: 1em .5em;
   border: solid 1px #000000;
   border-radius: .25em;
   outline: none;
   font-family: inherit;
   transition: 1s;
}

.form__input:focus {
  color: #000000;
  font-weight: 700;
}

.form__label {
  color: #000000;
  position: absolute;
  top: 0;
  left: .5em;
  transform: translateY(.5em);
  transition:
    transform .5s,
    color .3s,
    padding .5s;
  padding: 0;
  background-color: white;
}

:is(.form__input:not(:placeholder-shown),
    .form__input:focus) {
  color: #000000;
}

:is(.form__input:not(:placeholder-shown),
    .form__input:focus) + .form__label {
  transform: translateY(-.6em) scale(.7);
  transform-origin: left top;
  padding: 4px;
  color: #000000;
}

.form__submit {
  background-color: #010101;
  color:#E9E774;
  font-family: inherit;
  font-size: x-large;
  padding: .25em 1em;
  inline-size: max-content;
  border: none;
  border-radius: 1rem;
  outline: none;
  justify-self: center;
  transition: .5s;
}

.form__submit:focus,
.form__submit:hover {
  background-color: #000000;
}

/*-----------------------------------------------------------------------------------------*/

  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;
       }
  }

/* Para pantallas max de ancho */
@media (max-width: 1024px) {

  footer .redes {
    flex-direction: column; /* Cambia la dirección del flexbox a columna */
    align-items: center; /* Centra los elementos */
    margin: 1em; /* Reducir el margen */
  }

  footer img {
    width: 20%; /* Ajusta el ancho de las imágenes */
    margin-bottom: 1em; /* Espacio entre las imágenes */
  }

  footer h2 {
    font-size: 15px; /* Tamaño de fuente más pequeño */
  }

  footer p {
    display: none;
  }

  .equipo img, .solo img {
    width: 10em;
  }

  .equipo h2, .solo h2 {
    font-size: 1.2rem;
    padding: 10px;
    width: 18em;
  }

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

  .contenedora_espera img {
    width: 8em;
  }

  .contenedora_espera h2 {
    font-size: 2rem;
  }

  .contenedora_espera p {
    font-size: 8rem;
  }

  .contenedora_pregunta h1 {
    font-size: 40px;
}

  .contenedora_pregunta1 h1 {
    font-size: 2rem;
  }

  .opcion {
    font-size: 1rem;
    padding: 10px;
    width: 100%;
  }

}