*{
  margin: 0%;
  padding: 0px;
  box-sizing: border-box;
}


body{
    
    background-color: #414445;
}
header{
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
}

header a, li{
    color: red;
    list-style: none;
    text-decoration: none;
}

header .logo a{
    font-size: 40;
    font-weight: 600;
    padding-left: 20px;
}

header nav{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px;
    margin: 0px 20px;
}

.imagen-a, img{
    width: 30px;
    border-radius: 40px;
}


header ul{
    padding-right: 50px;
    margin: 0%;
    font-size: 30;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}
.titulos{
    align-items: center;
    text-align: center;
    color: black;
    text-decoration:underline;
    background-color: #414445;
    padding: 5px;
    margin: 0%;
}


.article-reciclabe{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 250px;
    background-color: #414445;
}


.Buzos-container-1{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color:#414445;
}

.card-buzo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 20px;
    margin: 20px;
    width: 200px;
}

.card-buzo a img{
    width: 100%;
    margin-bottom: 10px;
    transition: all 2s ease; 
    box-shadow: 12px 14px 5px 0px rgba(130,49,49,0.75);
    -webkit-box-shadow: 12px 14px 5px 0px rgba(130,49,49,0.75);
    -moz-box-shadow: 12px 14px 5px 0px rgba(130,49,49,0.75);
    border: 3px solid #000000;
    border-radius: 20px;
}

.card-buzo a img:hover{
    width: 170px; 
}

.card-buzo h3{
    color: #000000;
    text-align: center;
    align-items: center;
}

.card-buzo p{
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center; 
    color: #000000;

}

.card-buzo button{
    display: flex;
    text-align: center;
    align-items: center; 
    justify-content: center;
    color: red;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 100px;
    background-color: black;
    transition: all;
    transition: all 1s ease;
}

.card-buzo button:hover{
    color: red;
    font-size: 20px;
    width: 21px;
    height: 21px;
}


#search_buzos{
    width: 500px;
    border-radius: 50px;
    color: white;
    background-color: #000000;
    padding: 10px;
}
/*/ Pagina carrito /*/


.carrito-container{
    background-color: #414445;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 40px;
}

.div-carrito{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    margin: 20px;
    gap: 20px;
    color: #000000;
    font-weight: 30px;
}
.div-carrito img{
    width: 50px;
}

.div-carrito .sumar-boton, .restar-boton {
    text-align: center;
    align-items: center;
    color: white;
    background-color: #000000;
    border:none;
    border-radius: 50%;
    width: 20px;
    margin: 10px;
}

.div-carrito .eliminar{
    background-color: #000000;
    color: red;
    border: none;
    border-radius: 100px;
    padding: 5px;
    margin: 5px;
}

.subtotal{
    color: #000000;
}

.total-carrito{
    color: #000000;
}

.opciones{
    padding: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.boton{
    color: white;
    background-color: #000000;
    width: 150px;
    padding: 10px;
    margin: 10px;
    border-radius: 20px;
}

.domicilio{
    background-color: transparent;
    border: none;
    font-size: 40px;
    text-decoration: underline;
}

/* sucursal */
.Buzos-container-2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color:#414445 ;
    padding: 10px 50px;
    margin: 50px;  
    color: black;
    .formulario{
        display: grid;
        grid-template-areas: 
        "nombre nombre dni dni"
        "nombre_input nombre_input dni_input dni_input"
        "calle calle localidad localidad"
        "calle_input calle_input localidad_input localidad_input"
        "tel1 tel1 tel2 tel2"
        "tel1_input tel1_input tel2_input tel2_input"
        "correo correo correo2 correo2"
        "correo_input correo_input correo2_input correo2_input"
        ;
        grid-template-columns:repeat(4, 25%);
        grid-template-rows: repeat(7, 30px);
        justify-content: center;
        align-items: center;
        gap: 0px 50px;
            .nombre{
                grid-area: nombre;
            }
            .nombre_input{
                grid-area: nombre_input;
            }
            .dni{
                grid-area: dni;
            }
            .dni_input{
                grid-area: dni_input;
            }
            .calle{
                grid-area: calle;
            }
            .calle_input{
                grid-area: calle_input;
            }
            .localidad{
                grid-area: localidad;
            }
            .localidad_input{
                grid-area: localidad_input;
            }
            .tel1{
                grid-area: tel1;
            }
            .tel1_input{
                grid-area: tel1_input;
            }
            .tel2{
                grid-area:tel2;
            }
            .tel2_input{
                grid-area:tel2_input;
            }
            .correo{
                grid-area: correo;
            }
            .correo_input{
                grid-area: correo_input;
            }
            .correo2{
                grid-area: correo2;
            }
            .correo2_input{
                grid-area: correo2_input;
            }
            input{
                background-color: rgba(128, 128, 128, 0.658);
                border: none;
                border-radius: 30px;
                padding: 5px;
                cursor: pointer;
            }
            textarea{
                background-color: rgba(128, 128, 128, 0.658);
                border: none;
                border-radius: 30px;
                padding: 5px;
                cursor: pointer;
                max-width:350px;
            }
    }
}

.Buzos-container-3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color:#414445 ;
    padding: 10px 50px;
    margin: 50px;  
    color: black;
    .formulario{
        display: grid;
        grid-template-areas: 
        "nombre nombre dni dni"
        "nombre_input nombre_input dni_input dni_input"
        "tarjeta tarjeta cod cod"
        "tarjeta_input tarjeta_input cod_input cod_input"
        "fecha fecha tel tel"
        "fecha_input fecha_input tel_input tel_input"
        "correo correo correo2 correo2"
        "correo_input correo_input correo2_input correo2_input"
        ;
        grid-template-columns:repeat(4, 25%);
        grid-template-rows: repeat(7, 30px);
        justify-content: center;
        align-items: center;
        gap: 0px 50px;
            .nombre{
                grid-area: nombre;
            }
            .nombre_input{
                grid-area: nombre_input;
            }
            .dni{
                grid-area: dni;
            }
            .dni_input{
                grid-area: dni_input;
            }
            .tarjeta{
                grid-area: tarjeta;
            }
            .tarjeta_input{
                grid-area: tarjeta_input;
            }
            .cod{
                grid-area: cod;
            }
            .cod_input{
                grid-area: cod_input;
            }
            .fecha{
                grid-area: fecha;
            }
            .fecha_input{
                grid-area: fecha_input;
            }
            .tel{
                grid-area:tel;
            }
            .tel_input{
                grid-area:tel_input;
            }
            .correo{
                grid-area: correo;
            }
            .correo_input{
                grid-area: correo_input;
            }
            .correo2{
                grid-area: correo2;
            }
            .correo2_input{
                grid-area: correo2_input;
            }
            input{
                background-color: rgba(128, 128, 128, 0.658);
                border: none;
                border-radius: 30px;
                padding: 5px;
                cursor: pointer;
            }
            textarea{
                background-color: rgba(128, 128, 128, 0.658);
                border: none;
                border-radius: 30px;
                padding: 5px;
                cursor: pointer;
                max-width:350px;
            }
    }
}


/* metodo pago */

.Buzos-container-4{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #414445;
    padding: 10px;
    
    justify-content: space-around;
    align-items: center;
}
.container-product-pago{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.div-pago{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    gap: 20px;

}

.total-carrito{
    display: flex;
    align-items: center;
    justify-content: center;
}


.img-buzo-pago{
    width: 100px;
    margin: 10px;
}

.info-cliente{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    gap: 10px;
    font-size: 20px;
    font-weight: 20px;
    color: #000000;
}

/*/ footer /*/
 footer {
    padding-top: 200px;
    font-size: 15px;
    font-family: "Bebas Neue";
    font-style: normal;
    text-decoration: none;
}

 footer img {
    cursor: pointer;
    border: none;
    height: 20px;
    width: 20px;
}

 footer a {
    height: 20px;
    width: 20px;
}

 .lucas {
    text-decoration: underline;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

 .lucas {
    transition: all 0, 3s ease;
}

 .lucas:hover {
    color: rgb(169, 40, 40);
}

 footer {
    display: flex;
    justify-content: space-between;
    background-color: gray;
    padding: 50px;
    margin: auto;
}