/* =========================
   BLOX BASE CSS
========================= */


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

    padding:0;

    font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

    color:#1f2937;

    background:#ffffff;

}



/* =========================
   CONTENEDORES
========================= */


.container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 25px;

}



section{

    width:100%;

}



/* =========================
   IMAGENES
========================= */


img{

    max-width:100%;

    height:auto;

    display:block;

}



/* =========================
   LINKS
========================= */


a{

    text-decoration:none;

    color:inherit;

}



/* =========================
   BOTONES
========================= */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}



.btn:hover{

    transform:translateY(-2px);

}



/* =========================
   TITULOS
========================= */


h1,
h2,
h3,
h4{

    margin-top:0;

    line-height:1.2;

}



/* =========================
   FLEX
========================= */


.flex{

    display:flex;

}


.center{

    align-items:center;

    justify-content:center;

}



/* =========================
   GRID
========================= */


.grid{

    display:grid;

    gap:30px;

}



/* =========================
   HEADER BASE
========================= */


header{

    width:100%;

}



/* =========================
   SECCIONES
========================= */


.section{

    padding:80px 0;

}





/* =========================
   RESPONSIVE
========================= */


@media(max-width:768px){


    .container{

        padding:0 15px;

    }


    .section{

        padding:50px 0;

    }


    h1{

        font-size:32px;

    }


    h2{

        font-size:26px;

    }


}