/*==================================================
    COLABORAWEB CMS
    BASE CSS
    MCTIRE
    SISTEMA TIPOGRÁFICO GLOBAL
    VERSIÓN 3.0
==================================================*/


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

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

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

}


html{

    font-size:16px;

    scroll-behavior:smooth;

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

}


body{

    min-height:100vh;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*==================================================
    VARIABLES TIPOGRÁFICAS
==================================================*/

:root{

    /*------------------------------------------
        BASE
    ------------------------------------------*/

    --font-body:17px;

    --line-body:1.70;


    /*------------------------------------------
        PÁRRAFOS
    ------------------------------------------*/

    --font-p:17px;

    --line-p:1.70;


    /*------------------------------------------
        TÍTULOS
    ------------------------------------------*/

    --font-h1:52px;

    --font-h2:30px;

    --font-h3:20px;

    --font-h4:14px;

    --font-h5:10px;

    --font-h6:10px;


    /*------------------------------------------
        LINE HEIGHT TÍTULOS
    ------------------------------------------*/

    --line-h1:1.06;

    --line-h2:1.10;

    --line-h3:1.15;

    --line-h4:1.20;

    --line-h5:1.25;

    --line-h6:1.30;


    /*------------------------------------------
        TEXTOS SECUNDARIOS
    ------------------------------------------*/

    --font-lg:19px;

    --font-md:16px;

    --font-sm:14px;

    --font-xs:13px;


    /*------------------------------------------
        LISTAS
    ------------------------------------------*/

    --font-li:16px;


    /*------------------------------------------
        FORMULARIOS
    ------------------------------------------*/

    --font-label:14px;

    --font-input:16px;


    /*------------------------------------------
        PESOS
    ------------------------------------------*/

    --weight-normal:400;

    --weight-medium:500;

    --weight-semibold:600;

    --weight-bold:700;

    --weight-heading:750;

}


/*==================================================
    ELEMENTOS
==================================================*/

img,
picture,
svg,
video,
canvas{

    display:block;

    max-width:100%;

}


img{

    border:none;

}


iframe{

    border:0;

    width:100%;

}


ul,
ol{

    list-style:none;

}


a{

    color:inherit;

    text-decoration:none;

}


button,
input,
select,
textarea{

    font:inherit;

    border:none;

    outline:none;

}


button{

    cursor:pointer;

}


textarea{

    resize:vertical;

}


table{

    border-collapse:collapse;

    border-spacing:0;

}


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

body{

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

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

    line-height:
        var(--line-body);

    font-weight:
        var(--weight-normal);

    color:
        var(--text-color);

    background:
        var(--body-bg);

}


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

p{

    margin-top:0 !important;

    margin-bottom:1.15rem !important;

    font-family:
        "Inter",
        sans-serif !important;

    font-size:
        var(--font-p) !important;

    line-height:
        var(--line-p) !important;

    font-weight:
        var(--weight-normal);

}


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

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

    margin-top:0 !important;

    margin-bottom:.70rem !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-weight:
        var(--weight-heading) !important;

    color:
        var(--title-color);

}


/*==================================================
    H1
==================================================*/

h1{

    font-size:
        var(--font-h1) !important;

    line-height:
        var(--line-h1) !important;

    letter-spacing:
        -1.5px;

}


/*==================================================
    H2
==================================================*/

h2{

    font-size:
        var(--font-h2) !important;

    line-height:
        var(--line-h2) !important;

    letter-spacing:
        -1px;

}


/*==================================================
    H3
==================================================*/

h3{

    font-size:
        var(--font-h3) !important;

    line-height:
        var(--line-h3) !important;

}


/*==================================================
    H4
==================================================*/

h4{

    font-size:
        var(--font-h4) !important;

    line-height:
        var(--line-h4) !important;

}


/*==================================================
    H5
==================================================*/

h5{

    font-size:
        var(--font-h5) !important;

    line-height:
        var(--line-h5) !important;

}


/*==================================================
    H6
==================================================*/

h6{

    font-size:
        var(--font-h6) !important;

    line-height:
        var(--line-h6) !important;

}


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

li{

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

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

    line-height:
        1.55;

    font-weight:
        var(--weight-normal);

}


/*==================================================
    LISTAS DE NAVEGACIÓN
==================================================*/

nav li{

    font-size:
        15px;

    line-height:
        1.4;

}


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

a{

    font-family:
        inherit;

}


/*==================================================
    SMALL
==================================================*/

small{

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

    line-height:
        1.5;

}


/*==================================================
    STRONG
==================================================*/

strong{

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

}


/*==================================================
    LABEL
==================================================*/

label{

    display:block;

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

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

    line-height:
        1.45;

    font-weight:
        var(--weight-semibold);

}


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

td{

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

    font-size:
        15px;

    line-height:
        1.5;

}


th{

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

    font-size:
        14px;

    line-height:
        1.4;

    font-weight:
        var(--weight-semibold);

}


/*==================================================
    BLOCKQUOTE
==================================================*/

blockquote{

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

    line-height:
        1.65;

}


/*==================================================
    FIGCAPTION
==================================================*/

figcaption{

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

    line-height:
        1.5;

}


/*==================================================
    TEXT
==================================================*/

.text{

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

    line-height:
        var(--line-p);

}


.text-lg{

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

    line-height:
        1.65;

}


.text-md{

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

    line-height:
        1.6;

}


.text-sm{

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

    line-height:
        1.55;

}


.text-xs{

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

    line-height:
        1.5;

}


/*==================================================
    ETIQUETA DE SECCIÓN
==================================================*/

.section-label{

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

    font-size:
        14px;

    line-height:
        1.4;

    font-weight:
        800;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

}


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

input,
select,
textarea{

    font-family:
        "Inter",
        sans-serif !important;

    font-size:
        var(--font-input) !important;

    line-height:
        1.4;

}


input::placeholder,
textarea::placeholder{

    font-size:
        15px;

}


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

button,
.btn,
a.btn{

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

}


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

.container{

    width:
        min(
            calc(100% - 40px),
            var(--container)
        );

    margin-inline:auto;

}


.container-fluid{

    width:100%;

    padding-inline:20px;

}


/*==================================================
    TABLET
==================================================*/

@media(max-width:992px){

    :root{

        --font-body:16px;

        --font-p:16px;

        --font-h1:46px;

        --font-h2:36px;

        --font-h3:28px;

        --font-h4:23px;

        --font-h5:19px;

        --font-h6:17px;

        --font-lg:18px;

        --font-md:15px;

        --font-sm:14px;

        --font-li:15px;

    }


    p{

        font-size:
            var(--font-p) !important;

    }


    h1{

        font-size:
            var(--font-h1) !important;

    }


    h2{

        font-size:
            var(--font-h2) !important;

    }


    h3{

        font-size:
            var(--font-h3) !important;

    }


    h4{

        font-size:
            var(--font-h4) !important;

    }


    h5{

        font-size:
            var(--font-h5) !important;

    }


    h6{

        font-size:
            var(--font-h6) !important;

    }


    li{

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

    }

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:768px){

    :root{

        --font-body:16px;

        --font-p:16px;

        --font-h1:38px;

        --font-h2:32px;

        --font-h3:26px;

        --font-h4:21px;

        --font-h5:18px;

        --font-h6:16px;

        --font-lg:18px;

        --font-md:15px;

        --font-sm:14px;

        --font-xs:12px;

        --font-li:15px;

        --font-label:13px;

        --font-input:16px;

    }


    body{

        font-size:
            16px;

        line-height:
            1.7;

    }


    p{

        font-size:
            16px !important;

        line-height:
            1.7 !important;

    }


    h1{

        font-size:
            38px !important;

        line-height:
            1.08 !important;

    }


    h2{

        font-size:
            32px !important;

        line-height:
            1.10 !important;

    }


    h3{

        font-size:
            26px !important;

        line-height:
            1.15 !important;

    }


    h4{

        font-size:
            21px !important;

    }


    h5{

        font-size:
            18px !important;

    }


    h6{

        font-size:
            16px !important;

    }


    li{

        font-size:
            15px;

        line-height:
            1.55;

    }


    nav li{

        font-size:
            14px;

    }


    label{

        font-size:
            13px;

    }


    td{

        font-size:
            14px;

    }


    th{

        font-size:
            13px;

    }


    .text-lg{

        font-size:
            18px;

    }


    .text-md{

        font-size:
            15px;

    }


    .text-sm{

        font-size:
            14px;

    }

}


/*==================================================
    MOBILE PEQUEÑO
==================================================*/

@media(max-width:480px){

    :root{

        --font-p:16px;

        --font-h1:34px;

        --font-h2:29px;

        --font-h3:24px;

        --font-h4:20px;

        --font-h5:18px;

        --font-h6:16px;

        --font-lg:17px;

        --font-md:15px;

        --font-sm:13px;

        --font-xs:12px;

        --font-li:15px;

        --font-label:12px;

    }


    p{

        font-size:
            16px !important;

        line-height:
            1.68 !important;

    }


    h1{

        font-size:
            34px !important;

    }


    h2{

        font-size:
            29px !important;

    }


    h3{

        font-size:
            24px !important;

    }


    h4{

        font-size:
            20px !important;

    }


    h5{

        font-size:
            18px !important;

    }


    h6{

        font-size:
            16px !important;

    }


    li{

        font-size:
            15px;

    }


    label{

        font-size:
            12px;

    }

}
/*==================================================
    BARRA DE DESPLAZAMIENTO
    MCTIRE / COLABORAWEB
==================================================*/

/*------------------------------------------
    CHROME / EDGE / SAFARI
------------------------------------------*/

html{

    scrollbar-width:thin;

    scrollbar-color:
        var(--primary)
        #eeeeee;

}


/* Barra completa */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}


/* Fondo de la barra */

::-webkit-scrollbar-track{

    background:#eeeeee;

}


/* Barra que se desplaza */

::-webkit-scrollbar-thumb{

    background:
        var(--primary);

    border-radius:20px;

    border:
        2px solid
        #eeeeee;

    transition:
        background .3s ease;

}


/* Al pasar el mouse */

::-webkit-scrollbar-thumb:hover{

    background:#b9151c;

}


/* Esquinas */

::-webkit-scrollbar-corner{

    background:#eeeeee;

}

/*==================================================
    ACCESIBILIDAD
==================================================*/

:focus-visible{

    outline:
        3px solid var(--primary);

    outline-offset:
        3px;

}


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

::selection{

    background:
        var(--primary);

    color:
        #fff;

}


/*==================================================
    FIN BASE CSS
==================================================*/