/*======================================================
                        RESET CSS
======================================================*/

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


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

html{

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


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

body{

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

    font-size:var(--fs-md);

    font-weight:var(--fw-regular);

    color:var(--text-main);

    background:var(--bg);

    line-height:1.6;

    min-height:100vh;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


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

img,
picture{

    display:block;

    max-width:100%;

    height:auto;

}


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

a{

    color:inherit;

    text-decoration:none;

}


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

ul,
ol{

    list-style:none;

}


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

button{

    border:none;

    background:none;

    font:inherit;

    cursor:pointer;

}


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

input,
textarea,
select,
button{

    font:inherit;

    outline:none;

}


/*========== TEXTAREA ==========*/

textarea{

    resize:none;

}


/*========== TABLAS ==========*/

table{

    border-collapse:collapse;

    border-spacing:0;

}


/*========== TÍTULOS ==========*/

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

    font-weight:inherit;

    line-height:1.2;

}


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

p{

    line-height:1.7;

}


/*========== SVG ==========*/

svg{

    display:block;

}


/*========== IFRAME ==========*/

iframe{

    border:0;

}


/*========== SELECTION ==========*/

::selection{

    background:var(--color-primary);

    color:var(--color-white);

}


/*========== SCROLLBAR (CHROME) ==========*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-dark);

}


/*======================================================
                    CLASES UTILITARIAS
======================================================*/

/* Contenedor principal */

.container{

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

    margin-inline:auto;

}


/* Secciones */

section{

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

}


/* Título de sección */

.section-title{

    font-size:var(--fs-2xl);

    font-weight:var(--fw-bold);

    color:var(--text-white);

    margin-bottom:var(--space-6);

}


/* Ocultar elementos */

.hidden{

    display:none !important;

}


/* Centrado rápido */

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}


/* Animaciones suaves */

*{

    transition:

        color var(--transition-fast),

        background-color var(--transition-fast),

        border-color var(--transition-fast);

}