body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-image:url(img/fondo_azul_oscuro.webp); 
    background-color: rgb(0, 0, 116);

}

.navegacion {
    display: flex;
    justify-content: center;
    gap: 3em;
    align-items: center;
    
    background-color: rgb(34, 10, 143);
    width: 80%;
    margin: 0 auto;
    
}
img{
    width: 90%;
}

a{
    text-decoration: none;
}



/*menu principal*/
.menu_principal ul{
    display: flex;
    gap: 20px;
    list-style: none;
}


.menu_principal a {
    color: rgb(240, 240, 240);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 6px;
    transition: 1s;
    font-size: 2em;
    
}


.menu_principal .active {
    border: 1px solid rgba(239, 243, 23, 0.842);
    background: rgba(0, 0, 0, 0.884);
    color: rgb(255, 255, 255);
}

/* HOVER */
.menu_principal a:hover {
    background: rgba(193, 235, 6, 0.966);
   
}

@media (max-width: 900px){
    .navegacion{
        display: flex;
        justify-content: center;
        padding: 1em ;

    }

    .menu_principal a{
        font-size: 1em;

    }
}

@media (max-width: 600px){

    .menu_principal a{
        font-size: 0.8em;
    }

}




/* segundo menu */



.menu_dos{
    display: flex;
    justify-content: center; /* centrar texto de forma horizontal*/
    list-style: none;
}

.menu_dos li{
   margin: 0 15px;

}


.menu_dos a{ 
    text-decoration: dotted; /* ninguna decoracion de enlace por defecto */
    color:rgba(255, 255, 255, 0.637); /* color de la letra */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /*tipo de letra */
    font-weight:  bold; /* negrilla */
}

.menu_dos a:hover{
    color:rgb(228, 215, 30); /*cambia color de letra*/
}

.estilo_menu_dos{
    border-radius: 30px;
    box-shadow: 0px 10px 20px rgb(255, 255, 255);
    padding: 30px;
    max-width: 400px;
    margin: 8px auto;  
}

@media (max-width: 600px){

    .menu-tienda{
        margin: 3em;
    }

    .estilo_menu_dos{
        padding: 1.5em 0.8em;
    }

    .menu_dos{
        gap: 2em;
    }

}



  /* tienda */
h1{
    text-shadow: 3px 4px rgb(219, 16, 16);
    color: rgb(250, 249, 255);
    text-align: center;
}

h2{ /* o la clase que tenga tu titulo */
    width: 100%;
    text-align: center; /* Para que quede centrado sobre las fotos */
    margin-bottom: 30px; /* Para darle espacio respecto a los guayos */
    color: white; /* Para que se vea sobre el fondo azul */
    font-size: 3em;
}

#primer_div{
    background-image: url(img/fondo_azul_oscuro.webp);
}

.guayos{
    border-radius: 30px;
    box-shadow: 10px 30px rgba(0, 0, 0, 0.5);
    padding: 30px;
    margin: 20px;
    background-color: white;
    display: flex;
      width: 250px;           /* Esto le da la forma de "cubo" */
    flex-direction: column; /* Alinea imagen y precio uno sobre otro */
    align-items: center;    /* Centra el contenido dentro del cubo */
    text-align: center;
}

@media (max-width: 600px){
    .guayos{
        width: 90%;
    }

    .guayos p{
        font-size: 2em;

    }
}

#primer_div {
    display: flex;
    flex-wrap: wrap;        /* Permite que los cubos pasen a la siguiente fila si no caben */
    justify-content: center; /* Centra los cubos en la pantalla */
    
}

#segundo_div{
    display: flex;
    flex-wrap: wrap ;
    justify-content: center;
}

.camisas{
    border-radius: 30px;
    box-shadow: 10px 30px rgba(0, 0, 0, 0.5);
    padding: 30px;
    margin: 20px;
    background-color: white;
    display: flex;
     width: 250px;           /* Esto le da la forma de "cubo" */
    flex-direction: column; /* Alinea imagen y precio uno sobre otro */
    align-items: center;    /* Centra el contenido dentro del cubo */
    text-align: center;
}
@media (max-width: 600px){
    .camisas{
        width: 90%;
    }

    .camisas p{
        font-size: 2em;
    }
}


#segundo_div{
    background-image: url(img/fondo_azul_oscuro.webp);
}

#tercer_div{
    background-image: url(img/fondo_azul_oscuro.webp);
    display: flex;
    flex-wrap: wrap;        /* Permite que los cubos pasen a la siguiente fila si no caben */
    justify-content: center; /* Centra los cubos en la pantalla */
}

.balones{
    border-radius: 30px;
    box-shadow: 10px 30px rgba(0, 0, 0, 0.5);
    padding: 30px;
    margin: 20px;
    background-color: white;
    display: flex;
    width: 250px;           /* Esto le da la forma de "cubo" */
    flex-direction: column; /* Alinea imagen y precio uno sobre otro */
    align-items: center;    /* Centra el contenido dentro del cubo */
    text-align: center;
}

@media (max-width: 600px){

    .balones{
        width: 90%;
    }

    .balones p{
        font-size: 2em;
    }
}



.precios{
    
    text-decoration: none; /* ninguna decoracion de enlace por defecto */
    color:rgba(211, 248, 3, 0.637); /* color de la letra */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /*tipo de letra */
    font-weight:  bold; /* negrilla */
}

.precios a:hover{
color:rgb(216, 230, 27); /*cambia color de letra*/
}  

.precios{
    border-radius: 30px;
    box-shadow: 0px 10px 30px rgb(15, 15, 155);
    padding: 40px;
    max-width: 800px;
    margin: 20px auto; 
    list-style: none; 
    text-decoration: none
    color black
}

@media (max-width: 600px){
    .precios{
        width: 50%;
        font-size: 1.5em;
        
    }
}

#volver{
    background-color: black;
    padding: 1em;
    color: yellowgreen;
    width: 30px;
    height: 30px;
    text-align: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
}

.nombre_producto{
   color: black;
   text-shadow: 0 0 5px blue;
}