/*=========================================================
    HAGAMOS DISEÑO
    RESET.CSS
    Versión 0.1.0

    Reinicio global del navegador
    Configuración base del proyecto
=========================================================*/


/*=============================
    RESET GENERAL
==============================*/

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

    margin:0;
    padding:0;

    box-sizing:border-box;

}


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

html{

    scroll-behavior:smooth;

    font-size:16px;

}


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

body{

    background:var(--bg-body);

    color:var(--text-white);

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

    line-height:1.6;

    overflow-x:hidden;

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


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

img{

    display:block;

    width:100%;

    max-width:100%;

    user-select:none;

}


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

a{

    text-decoration:none;

    color:inherit;

}


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

ul,
ol{

    list-style:none;

}


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

button{

    border:none;

    background:none;

    font:inherit;

    cursor:pointer;

}


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

input,
textarea,
select{

    font:inherit;

    border:none;

    outline:none;

    background:none;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

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

    font-weight:700;

    line-height:1.15;

}


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

p{

    color:var(--text-gray);

}


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

section{

    position:relative;

    padding:120px 0;

}


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

.container{

    width:min(92%, var(--container));

    margin:auto;

}


/*=============================
    SELECCIÓN
==============================*/

::selection{

    background:var(--color-primary);

    color:#fff;

}


/*=============================
    SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090d18;

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-secondary);

}


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

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}


/*=============================
    EFECTO GLASS
==============================*/

.glass{

    background:var(--bg-glass);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:var(--border-glass);

}


/*=============================
    TRANSICIONES
==============================*/

a,
button,
img,
.card{

    transition:var(--transition);

}