/* ==========================================================
   BASE.CSS
   Estilos generales del sitio
========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --bg: #f7f7f5;
    --text: #111111;
    --muted: #777777;
    --border: #dddddd;

    --accent: #111111;

    --sidebar-width: 220px;
    --sidebar-width-tablet: 180px;

    --transition: .25s;
    --header-height: 95px;
}


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

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

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


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

html {

    scroll-behavior: smooth;

}


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

body {

    background: var(--bg);

    color: var(--text);

    font-family: "Barlow", sans-serif;

    font-size: 18px;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


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

a {

    color: inherit;

    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);

}

a:hover {

    opacity: .65;

}


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

img {

    display: block;

    max-width: 100%;

    height: auto;

}


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

ul,
ol {

    list-style: none;

}


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

h1 {

    font-size: 2.2rem;

    font-weight: 600;

    letter-spacing: .10em;

}

h2 {

    font-size: 1.8rem;

    font-weight: 500;

    margin-bottom: 25px;

}

h3 {

    font-size: 1.3rem;

    font-weight: 500;

    margin-bottom: 15px;

}


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

p {

    margin-bottom: 20px;

}


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

button {

    font: inherit;

    border: none;

    background: none;

    color: inherit;

    cursor: pointer;

}


/* ==========================================================
   FORMULARIOS
========================================================== */

input,
textarea,
select {

    font: inherit;

}


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

table {

    border-collapse: collapse;

}


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

::selection {

    background: #222;

    color: #fff;

}


/* ==========================================================
   SCROLLBAR (Chrome, Edge)
========================================================== */

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

::-webkit-scrollbar-track {

    background: #efefef;

}

::-webkit-scrollbar-thumb {

    background: #bdbdbd;

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: #999999;

}


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

.hidden {

    display: none !important;

}

.text-center {

    text-align: center;

}

.mt-10 {

    margin-top: 10px;

}

.mt-20 {

    margin-top: 20px;

}

.mt-30 {

    margin-top: 30px;

}

.mb-10 {

    margin-bottom: 10px;

}

.mb-20 {

    margin-bottom: 20px;

}

.mb-30 {

    margin-bottom: 30px;

}


/* ==========================================================
   MENÚ
========================================================== */

.menu-separator {

    margin-top: 25px;

    padding-top: 25px;

    border-top: 1px solid var(--border);

}

.active > a {

    font-weight: 600;

}