/*=========================================================
    XALTILOLLI 2.0
    BASE.CSS
=========================================================*/


/*=========================================================
    RESET BÁSICO
=========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/*=========================================================
    HTML
=========================================================*/

html{

    scroll-behavior:smooth;
    font-size:16px;

}


/*=========================================================
    BODY
=========================================================*/

body{

    background:var(--color-background);

    color:var(--color-text);

    font-family:var(--font-family);

    font-size:var(--text-size);

    line-height:1.6;

    overflow-x:hidden;

    min-height:100vh;

}


/*=========================================================
    IMÁGENES
=========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

}


/*=========================================================
    ENLACES
=========================================================*/

a{

    color:inherit;

    text-decoration:none;

}


/*=========================================================
    LISTAS
=========================================================*/

ul,
ol{

    list-style:none;

}


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

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


/*=========================================================
    INPUTS
=========================================================*/

input,
textarea,
select{

    font-family:inherit;

}


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

h1{

    font-size:clamp(2.6rem,5vw,4.2rem);

    font-weight:700;

    line-height:1.1;

}

h2{

    font-size:var(--title-size);

    font-weight:700;

    line-height:1.2;

}

h3{

    font-size:1.4rem;

    font-weight:600;

}


/*=========================================================
    PÁRRAFOS
=========================================================*/

p{

    color:var(--color-text-soft);

}


/*=========================================================
    CONTENEDOR
=========================================================*/

.container{

    width:min(
        100% - 3rem,
        var(--container-width)
    );

    margin-inline:auto;

}


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

section{

    padding-block:var(--space-sm);

}


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

.header{

    min-height:var(--header-height);

    display:flex;

    align-items:center;

}


/*=========================================================
    LOGO
=========================================================*/

.logo{

    display:inline-flex;

    align-items:center;

}


/*=========================================================
    FOOTER
=========================================================*/

.footer{

    padding:4rem 0;

    text-align:center;

}


/*=========================================================
    UTILIDADES
=========================================================*/

.hidden{

    display:none !important;

}


.text-center{

    text-align:center;

}


.flex{

    display:flex;

}


.grid{

    display:grid;

}


/*=========================================================
    ANIMACIONES
=========================================================*/

.fade{

    animation:fade .45s;

}


@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}