@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/*
Receteo
quita margen
recetea padding
quita lineas de los enlaces
quita las viñetas de las listas
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Poppins', sans-serif;
}
/*Anchura maxima de 1200
margin 0 arriba
el contenido no se desborda
ni a la derecha ni a la izquierda
*/

/* Estilo para el login*/

.login {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display:flex;
    font-family: 'Poppins', sans-serif;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url('../images/fondo.jpg') no-repeat ;
}
.registro {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display:flex;
    font-family: 'Poppins', sans-serif;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url('../images/FondoNegro.jpg') no-repeat ;
}

.wrapper{

    width:420px;
    background:transparent;
    color:#fff;
    border-radius: 10px;
    padding: 30px 40px;
}

.wrapper h1{
    font-size:36px;
    text-align: center;
}

.wrapper .input-box{
    position: relative;
    width:100%;
    height:50px;

    margin: 30px 0;
}

.registro .input-box input{
    width: 100%;
    height: 100%;
    background:transparent;
    border:none;
    outline:none;
    border:2px solid rgba(255, 255, 255, .2);
    border-radius: 40px;
    font-size: 16px;
    color:#fff;
    padding: 20px 45px 20px 20px;

}


.input-box input{
    width: 100%;
    height: 100%;
    background:#A1887F;
    border:none;
    outline:none;
    border:2px solid rgba(255, 255, 255, .2);
    border-radius: 40px;
    font-size: 16px;
    color:#fff;
    padding: 20px 45px 20px 20px;

}

.input-box input::placeholder {
    color:#fff;
    }

    .input-box i{
        position:absolute;
        right:20px;
        top:50%;
        transform:translateY(-50%);
        font-size:20px;

    }

.container {

    max-width: 1200px;
    margin: 0 auto;
}

.wrapper .remember-forgot{
display:flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}

.remember-forgot label input {
    accent-color: #fff;
    margin-right: 3px;
}

.wrapper .btn{
    width: 100%;
    height: 45px;
    background: #fff;
    border:none;
    outline: none;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0,0,0, .1);
    cursor: pointer;
    font-size: 16px;
    color:#333;
    font-weight: 600;

}

.wrapper .register-link{
    font-size:14.5px ;
    text-decoration: none;
    margin: 20px 0 15px;
}

.wrapper .register-link p a{
 color:#fff;
 text-decoration: none;
 font-weight: 600;
}

.wrapper .register-link p a:hover{
   text-decoration: underline;
   }


/*Ajusta la imagne de fondo*/
.header{
    background-image: url("../images/bg.svg") ;
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    min-height: 70vh;
    padding: 80px 0 0 0;

}




/*Imagen de fondo de la cabecera*/


.menu{
position: absolute;
top: 0;
left: 0;
right: 0;
display:flex; /*Los emenetos del menu se coloquen de forma horizontal*/
align-items: center;
justify-content: space-between; /*Separacion entre elementos*/
}

/*Cambios Aplicados a la etiqueta <A> con nombre de clase "logo"*/
.logo {

    color:goldenrod;
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
}

.menu .navbar ul li {
position: relative;
float:left;
}

.menu .navbar ul li a{
font-size: 18px;
padding: 20px;
color:#FFB40B;
display:block;
font-weight: 600;
    
    }


    .menu .navbar ul li a:hover{
     color:white;
            
            }

            #menu {
                display:none;
            }

            .menu-icono{
                width: 25px;
            }
/*Aparece la manita en el menu pointer*/
            .menu label{
                
                cursor: pointer;
                display: none;
            }
            

            .header-content{

                display: flex;
            }

            .header-txt{
                width: 50%;
            }


            .header-txt h1{
                font-size: 70px;
                line-height: 85px;
                color:white;
                margin-bottom: 20px;
            }

            .header-txt span{

                font-size: 90px;
                color:greenyellow;

            }

            /*margin-bottom separacion hacia abajo*/
            .header-txt p{
                font-size: 16px;
                color:#c4c4ce;
                margin-bottom:30px;
            }

            .header-img{

                width: 50%;
                text-align: center;
                
            }

            /*Modifica el tamaño del logo*/
            .header-img img {
                width: 550px;
            }


            /*Inicia formato y estilo del menu secundario*/
            .buttons{
                display: flex;

            }

            .btn-1{

                display:inline-block;
                padding: 13px 20px;
                /* da grosor al borde,redondea y asigna el color*/
                border:1px solid #f3d202;
                color:#FFB40B;
                border-radius: 15px;/*Redondea las esquinas*/
                margin-right: 30px;
                font-size: 16px;
                text-transform: capitalize; /*La primer letra en mayuscula*/
            }
            .btn-1:hover{

                background-color:#FFB40B;
                color:#fbfcff;
            }

            .menu-pl{

                padding: 0 0 100 px 0; /*arriba,derecha,abajo,izq*/
            }

            /*Todos los h2 tendran el mismo estio*/
            h2{
                font-size: 50px;
                color:#292933;
                margin-bottom: 40px; /*Separacion hacia abajo*/
            }

            span{
                color:#FFB40B
            }

            .general-content {
                
               display: grid;
               
                grid-template-columns: repeat(3,1fr);
gap:20px;
              
            }

            .general-txt{
                border-radius: 25px;
                box-shadow: 0 0 20px rgba(0,0,0,0.2);
                padding-bottom: 35px;
            }
            .general-txt img {
                border-radius:25px 25px 0 0;
                width: 100% ;
                height: 250px;
            }

            .general-txt h3 {

                font-size: 18px;
                color:#292933;
                padding: 25px 25px 10px 25px;

            }

            .general-txt p{

                font-size:16px;
                color:#3a3a48;
                padding: 0px 25px 20px 25px;

            }

            .prices{
                padding: 0 25px 10px 25px ;
                display: flex;
                justify-content: space-between;
            }

            .prices{

                color:#FFB40B;
                font-size: 18px;
                font-weight: 600;
            }

            /*Da formato a los botones de Agregar*/
            .btn-2{

                display:inline-block;
                background-color: #FFB40B;
                font-size: 14px;
                padding: 7px 15px;
                color:#fbfcff;
                /*redondea esquinas*/
                border-radius: 10px;
            }
            .about {

                padding: 100px 0;
                margin-bottom: 100px;
                background-color: #292933;

            }
            .about-content {
                display:flex;
            }
            .about-txt {
                width: 50%;
            }

            .about-txt h2{
               
                color:#fbfcff;
            }


.about-txt p {

    font-size: 16px;
    color:#c4c4ce;
    margin-bottom: 30px;
}

.promo {

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.promo span {
    font-size: 80px;
    font-weight: 800;
}



.about-img {
    width:50%;
    text-align: right;
}

.about-img img{

    width: 500px;
    height: 500px;
}


.info {
    padding-bottom: 100px;
    display: flex;
}

.info-img{
    width: 50%;

}

.info-img img{
    border-radius: 25px;
    width: 600px;

}

.info-txt {

    width: 50%;
    padding-left: 55px;
}

.info-txt p { 
    font-size: 16px;
    color:#3a3a48;
    margin-bottom: 35px;

}

.footer{
    padding: 50px 0;
background-color: #292933;

}

.footer-content {
    display: flex;
    justify-content: space-between;

}

.link h3{

    color:#fbfcff;
    font-size: 18px;
    margin-bottom: 15px;
}

.link a{

    color:#c4c4ce;
    font-size: 16px;
    display: block;
    margin: 10px;
}

.link a:hover{

    color:#FFB40B;
}

.servicio{
    font-size: 22px;
    font:bold;
    text-align: center;
    color:navy;}




@media screen and (min-width:360px) and (max-width:640px){

    .menu{
        padding:35px;   
     }

     .menu label {
        display:initial;
     }

     .menu .navbar{

        position:absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: color #303030;
        display:none;
    }

     .menu .navbar ul li{
        width: 100%;

     }

     #menu:checked ~ .navbar{

        display:initial;
     }

     .header{
        min-height: 0vh;
     }
     .header-content{
        flex-direction: column;
        padding: 30px 30px 50px 50px;
        text-align: center;
     }

     .header-txt{
        width: 100%;
     }

     .header-txt span{
        font-size: 70px;
     }
     .header-img {
        width: 100%;
     }

     .header-img img {
        width:100%;
     }

     .buttons{
        display: inline-block;
        justify-content: center;

     }
     .btn-1{
        margin: 0 10px;
     }

     .menu-pl{

        padding: 0 30px 30px 30 px;
     }
     .general-content{
        width: 350px;
        height: 635px;
        display:inline-block;
        grid-template-columns: repeat(2,1ft);
     }

     .promo{
        width: 350px;
        height: 635px;
        display:inline-block;
     }
     .about{
        padding: 30px;
        margin-bottom: 30px;
        text-align: center;
     }


 
     .about-content{
        flex-direction: column;
     }
     .about-txt{
        width: 100%;
     }

     .about-txt p {
        margin-bottom: 0 ;
     }

     .about-img{
        width: 100%;
        text-align: center;
     }

     .about-img img{
        width: 100%;
     }

     .info{
        padding: 30px ;
        flex-direction: column;
     }
     .info-img{
        width: 100%;
     }
     .info-img img {
        width: 100%;
     }
     .info-txt{
        width:100%;
        padding-left: 0;
        text-align: center;
     }
.footer{

    padding: 30px;
    text-align: center;

}
.footer-content{
    flex-direction: column;
}

    }