* {
  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{
 /* 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 {
 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 {
 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;
}

    /*-----------------------------------------home-------------------------------------------------------*/

    /*-------------------------------------------main------------------------------------------------*/
  main{
    background-color:#FF7F5A ;
    background-image: url(../imagenes/Vector.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 10%;
    padding: 1em;
}
 /* ------------------------------------------------usuario-Aciertos------------------------------------------*/
    .usuario{
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      gap: 0.5em;
      padding: 0.5em;
    }

    .usuario img{
      width: 30%;
    }

    .usuario h2 {
      font-size:20px;
      display: block;
      background-color: black;
      border-radius: 6%;
      color: white;
      padding: 20px 15px;
      margin: 15px 0px;
      }

    .usuario h4{
      display: none;
    }

    /*------------------------------------------------Primer-puesto-------------------------------------------*/
     
    .primer-puesto{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1em;
      padding: 0.5em;
    }

    .primer-puesto h3{
      font-size:20px;
      display: block;
      background-color:#E9E774;
      border-radius: 6%;
      color: black;
      padding: 20px;
      margin: 15px 0px;
    }
    .primer-puesto img{
      width: 30%;
    }
  
    .primer-puesto h4{
      display: none;
    }
   
   
    /*-------------------------------------------------segundo-puesto-------------------------------------------*/

   .segundo-puesto{
    display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1em;
      padding: 0.5em;
   }

   .segundo-puesto h3{
    font-size:20px;
    display: block;
    background-color:#E9E774;
    border-radius: 6%;
    color: black;
    padding: 20px;
    margin: 15px 0px;
   }

   .segundo-puesto img{
    width: 30%;
   }

  .segundo-puesto h4{
    display: none;
  }

  

  /*---------------------------------------------------tercer puesto------------------------------------------*/
  
  .tercer-puesto{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
    padding: 0.5em;
  }

  .tercer-puesto h3{
    font-size:20px;
    display: block;
    background-color:#E9E774;
    border-radius: 6%;
    color: black;
    padding: 20px;
    margin: 15px 0px;
  }

  .tercer-puesto img{
    width: 30%;
  }
  
  .tercer-puesto h4{
    display: none;
  }

  

  /*------------------------------------------------cuarto-puesto---------------------------------------------*/
  
  .cuarto-puesto{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
    padding: 0.5em;
  }

  .cuarto-puesto h3{
    font-size:20px;
    display: block;
    background-color:#E9E774;
    border-radius: 6%;
    color: black;
    padding: 20px;
    margin: 15px 0px;
  }

  .cuarto-puesto img{
    width: 30%;
  }

  .cuarto-puesto h4{
    display: none;
  }



  /*------------------------------------------------quinto-puesto---------------------------------------------*/
  
  .quinto-puesto{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
    padding: 0.5em;
  }

  .quinto-puesto h3{
    font-size:20px;
    display: block;
    background-color:#E9E774;
    border-radius: 6%;
    color: black;
    padding: 20px;
    margin: 15px 0px;
  }

  .quinto-puesto img{
    width: 30%;
  }

  .quinto-puesto h4{
    display: none;
  }
  

  /*-------------------------------------------sexto-puesto------------------------------------------------*/

   .sexto-puesto{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
    padding: 0.5em;
   }

   .sexto-puesto h3{
    font-size:20px;
    display: block;
    background-color:#E9E774;
    border-radius: 6%;
    color: black;
    padding: 20px;
    margin: 15px 0px;
   }

   .sexto-puesto img{
    width: 30%;
   }

  .sexto-puesto h4{
    display: none;
  }
  

  /*----------------------------------------------footer--------------------------------------------------*/
  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;
   }
     
      
  /* Estilos para pantallas móviles (menos de 450px de ancho) */
  @media (max-width: 450px) {
    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: 20px; /* Tamaño de fuente más pequeño */
    }
  
    footer p {
      display: none;
    }
  }
  

   /*--------------------------------------pantallas ordenadores-----------------------------------------------*/


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

         main{
          padding: 2em;
          background-position: left center;
         }
/*-------------------------------------------usuario------------------------------------------------------*/
.usuario{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3em;
  margin-bottom: 0;
}

.usuario img{
  width: 10%;
}
.usuario h2 {
  font-size:20px;
  display: block;
  background-color: black;
  border-radius: 6%;
  color: white;
  font-size: 20px;
  padding: 20px;
  margin: 15px 0px;
  }
         .usuario h4{  
          font-size:20px;
          display: block;
          background-color: black;
          border-radius: 6%;
          color: white;
          font-size: 20px;
          padding: 20px;
          margin: 15px 0px;
        }
 /*-------------------------------------------primer puesto---------------------------------------------------*/  
 .primer-puesto{
  display: flex;
  justify-content:center ;
  gap: 3em;
  padding: 0;
  }

  .primer-puesto img{
    width: 9%;
  }
  

 .primer-puesto h3{
  display: block;
  background-color: #E9E774;
  border-radius: 6%;
  color: black;
  font-size: 20px;
  padding: 20px;
  margin: 15px 0px;
  }

        .primer-puesto h4{
          display: block;
          background-color: #E9E774;
          border-radius: 6%;
          color: black;
          font-size: 20px;
          padding: 20px;
          margin: 15px 0px;
     }

/*-------------------------------------------------segundo_puesto---------------------------------------------*/
.segundo-puesto{
  display: flex;
  justify-content:center ;
  gap: 3em;
  padding: 0;
  
  }
  .segundo-puesto img{
    width: 9%;
  }

.segundo-puesto h3{
  display: block;
  background-color: #E9E774;
  border-radius: 6%;
  color: black;
  font-size: 20px;
  padding: 20px;
  margin: 15px 0px;
}

     .segundo-puesto h4{
      display: block;
      background-color: #E9E774;
      border-radius: 6%;
      color: black;
      font-size: 20px;
      padding: 20px;
      margin: 15px 0px;
     }
  /*------------------------------------tercer_puesto-------------------------------------------------------*/
  .tercer-puesto{
    display: flex;
    justify-content:center;
    gap: 3em;
    padding: 0;
    }

  .tercer-puesto img{
   width: 9%;
  }
   
  .tercer-puesto h3{
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .tercer-puesto h4{
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  /*-------------------------------------cuarto_puesto---------------------------------------------*/
  .cuarto-puesto{
    display: flex;
    justify-content:center ;
    gap:3em;
    padding: 0;
  }

  .cuarto-puesto img{
    width: 9%;
  }

   .cuarto-puesto h3{
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .cuarto-puesto h4{
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
   }
  
   /*----------------------------------------quinto_puesto---------------------------------------------------*/
   .quinto-puesto{
    display: flex;
    justify-content:center;
    gap: 3em;
    padding: 0;
   }
   .quinto-puesto img{
    width: 9%;
   }

 .quinto-puesto h3{
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .quinto-puesto h4{
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
}

/*---------------------------------------------sexto_puesto-------------------------------------------------*/

.sexto-puesto{
  display: flex;
  justify-content:center ;
  gap: 3em;
  padding: 0;
 }

 .sexto-puesto img{
  width: 9%;
 }

.sexto-puesto h3{
  display: block;
  background-color: #E9E774;
  border-radius: 6%;
  color: black;
  font-size: 20px;
  padding: 20px;
  margin: 15px 0px;
}

.sexto-puesto h4{
  display: block;
  background-color: #E9E774;
  border-radius: 6%;
  color: black;
  font-size: 20px;
  padding: 20px;
  margin: 15px 0px;
}

}

/*--------------------------------------------@medias----------------------------------------------------*/

@media (min-width: 768px) {
  .menu-hamburguesa {
    display: none;
  }

  header nav ul {
    display: flex;
    position: relative;
    opacity: 1;
    visibility: visible;
    translate: none;
    transition: none;
  }

  .contenedora {
    max-width: 65rem;
    margin-inline: auto;
    padding: 1rem;
  }

  header nav ul {
    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;
    margin-right: 10px;
  }

  header nav a {
    display: block;
    width: 5em;
    padding-block: 0.25em .5em;
    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;
  }

  header {
    background-color: black;
  }

  main {
    padding: 2em;
    background-position: left center;
  }

  .usuario {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 3em;
  }

  .usuario img {
    width: 10%;
  }

  .usuario h2 {
    font-size: 20px;
    display: block;
    background-color: black;
    border-radius: 6%;
    color: white;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .usuario h4 {
    font-size: 20px;
    display: block;
    background-color: black;
    border-radius: 6%;
    color: white;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .primer-puesto,
  .segundo-puesto,
  .tercer-puesto,
  .cuarto-puesto,
  .quinto-puesto,
  .sexto-puesto {
    display: flex;
    justify-content: center;
    gap: 3em;
    padding: 0;
  }

  .primer-puesto img,
  .segundo-puesto img,
  .tercer-puesto img,
  .cuarto-puesto img,
  .quinto-puesto img,
  .sexto-puesto img {
    width: 9%;
  }

  .primer-puesto h3,
  .segundo-puesto h3,
  .tercer-puesto h3,
  .cuarto-puesto h3,
  .quinto-puesto h3,
  .sexto-puesto h3 {
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .primer-puesto h4,
  .segundo-puesto h4,
  .tercer-puesto h4,
  .cuarto-puesto h4,
  .quinto-puesto h4,
  .sexto-puesto h4 {
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }
}

@media (min-width: 1024px) {
  .menu-hamburguesa {
    display: none;
  }

  header nav ul {
    display: flex;
    position: relative;
    opacity: 1;
    visibility: visible;
    translate: none;
    transition: none;
  }

  .contenedora {
    max-width: 65rem;
    margin-inline: auto;
    padding: 1rem;
  }

  header nav ul {
    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;
    margin-right: 10px;
  }

  header nav a {
    display: block;
    width: 5em;
    padding-block: 0.25em .5em;
    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;
  }

  header {
    background-color: black;
  }

  main {
    padding: 2em;
    background-position: left center;
  }

  .usuario {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2.9em;
  }

  .usuario img {
    width: 10%;
  }

  .usuario h2 {
    font-size: 20px;
    display: block;
    background-color: black;
    border-radius: 6%;
    color: white;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .usuario h4 {
    font-size: 20px;
    display: block;
    background-color: black;
    border-radius: 6%;
    color: white;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .primer-puesto,
  .segundo-puesto,
  .tercer-puesto,
  .cuarto-puesto,
  .quinto-puesto,
  .sexto-puesto {
    display: flex;
    justify-content: center;
    gap: 3em;
    padding: 0;
  }

  .primer-puesto img,
  .segundo-puesto img,
  .tercer-puesto img,
  .cuarto-puesto img,
  .quinto-puesto img,
  .sexto-puesto img {
    width: 9%;
  }

  .primer-puesto h3,
  .segundo-puesto h3,
  .tercer-puesto h3,
  .cuarto-puesto h3,
  .quinto-puesto h3,
  .sexto-puesto h3 {
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }

  .primer-puesto h4,
  .segundo-puesto h4,
  .tercer-puesto h4,
  .cuarto-puesto h4,
  .quinto-puesto h4,
  .sexto-puesto h4 {
    display: block;
    background-color: #E9E774;
    border-radius: 6%;
    color: black;
    font-size: 20px;
    padding: 20px;
    margin: 15px 0px;
  }
}