:root {  
    /* Colores */
    --base-background-color: #fff;
    --base-font-color: #000;

    --primary-color: #034C8C;
    --primary-color-rgb: 3,76,140;
    --primary-color-contrast: #fff;
    --primary-color-contrast-rgb: 255,255,255;
    --primary-color-shade: #03437b;
    --primary-color-tint: #1c5e98;

    --secondary-color: #022B3F;
    --secondary-color-rgb: 2,43,63;
    --secondary-color-contrast: #fff;
    --secondary-color-contrast-rgb: 255,255,255;
    --secondary-color-shade: #022637;
    --secondary-color-tint: #1b4052;

    --success-color: #F3FFBD;
    --success-color-rgb: 243,255,189;
    --success-color-contrast: #000;
    --success-color-contrast-rgb: 0, 0, 0;
    --success-color-shade: #d6e0a6;
    --success-color-tint: #f4ffc4;

    --warning-color: #FFC145;
    --warning-color-rgb: 255,193,69;
    --warning-color-contrast: #000;
    --warning-color-contrast-rgb: 0, 0, 0;
    --warning-color-shade: #e0aa3d;
    --warning-color-tint: #ffc758;

    --danger-color: #F64740;
    --danger-color-rgb: 246,71,64;
    --danger-color-contrast: #000;
    --danger-color-contrast-rgb: 0, 0, 0;
    --danger-color-shade: #d83e38;
    --danger-color-tint: #f75953;

    --light-color: #F0F9F9;
    --light-color-rgb: 240,249,249;
    --light-color-contrast: #000;
    --light-color-contrast-rgb: 0, 0, 0;
    --light-color-shade: #d3dbdb;
    --light-color-tint: #f2fafa;

    --dark-color: #060F0F;
    --dark-color-rgb: 6,15,15;
    --dark-color-contrast: #fff;
    --dark-color-contrast-rgb: 255, 255, 255;
    --dark-color-shade: #050d0d;
    --dark-color-tint: #1f2727;

    --alpha-value: 0.9;

    /* Fuente */
    --base-font-size: 16px;
    --base-line-height: 1.6;
    /* --font-family: 'Font-Name', Arial, sans-serif; */
    --font-family: Arial, sans-serif;

    /* Efectos */
    --base-transition-speed: 0.2s;

    /* Iconografía */
    --icon-width: 512px;
    --spritesheet-width: 512px;

    /* Header */
    --header-height: 7rem;
    --portable-header-height: 16rem;
    --mobile-header-height: 14rem;
}

html {
    background-color: var(--base-background-color);
    font-size: var(--base-font-size);
}

body {
    color: var(--base-font-color);
    font-family: var(--font-family);
    line-height: var(--base-line-height);
}

a {
    color: inherit;
}

.interactable {
    cursor: pointer;
}

.primary {
    background-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.font-color-primary {
    color: var(--primary-color);
}

button.primary:hover,
.interactable.primary:hover {
    background-color: var(--primary-color-tint);
    color: var(--primary-color-contrast);
}

button.primary:active,
.interactable.primary:active {
    background-color: var(--primary-color-shade);
    color: var(--primary-color-contrast);
}

.secondary,
.secondary-alphabg {
    color: var(--secondary-color-contrast);
}

.secondary {
    background-color: var(--secondary-color);
}

.secondary-alphabg {
    /* background-color: rgba(var(--secondary-color-rgb), var(--alpha-value)); */
    background-image: linear-gradient(#00000060, #00000060), linear-gradient(rgba(var(--secondary-color-rgb), var(--alpha-value)), rgba(var(--secondary-color-rgb), var(--alpha-value)));
}

.font-color-secondary {
    color: var(--secondary-color);
}

button.secondary:hover,
.interactable.secondary:hover {
    background-color: var(--secondary-color-tint);
    color: var(--secondary-color-contrast);
}

button.secondary:active,
.interactable.secondary:active {
    background-color: var(--secondary-color-shade);
    color: var(--secondary-color-contrast);
}

.success {
    background-color: var(--success-color);
    color: var(--success-color-contrast);
}

.font-color-success {
    color: var(--success-color);
}

button.success:hover,
.interactable.success:hover {
    background-color: var(--success-color-tint);
    color: var(--success-color-contrast);
}

button.success:active,
.interactable.success:active {
    background-color: var(--success-color-shade);
    color: var(--success-color-contrast);
}

.warning {
    background-color: var(--warning-color);
    color: var(--warning-color-contrast);
}

.font-color-warning {
    color: var(--warning-color);
}

button.warning:hover,
.interactable.warning:hover {
    background-color: var(--warning-color-tint);
    color: var(--warning-color-contrast);
}

button.warning:active,
.interactable.warning:active {
    background-color: var(--warning-color-shade);
    color: var(--warning-color-contrast);
}

.danger {
    background-color: var(--danger-color);
    color: var(--danger-color-contrast);
}

.font-color-danger {
    color: var(--danger-color);
}

button.danger:hover,
.interactable.danger:hover {
    background-color: var(--danger-color-tint);
    color: var(--danger-color-contrast);
}

button.danger:active,
.interactable.danger:active {
    background-color: var(--danger-color-shade);
    color: var(--danger-color-contrast);
}

.light {
    background-color: var(--light-color);
    color: var(--light-color-contrast);
}

.font-color-light {
    color: var(--light-color);
}

button.light:hover,
.interactable.light:hover {
    background-color: var(--light-color-tint);
    color: var(--light-color-contrast);
}

button.light:active,
.interactable.light:active {
    background-color: var(--light-color-shade);
    color: var(--light-color-contrast);
}

.dark {
    background-color: var(--dark-color);
    color: var(--dark-color-contrast);
}

.font-color-dark {
    color: var(--dark-color);
}

button.dark:hover,
.interactable.dark:hover {
    background-color: var(--dark-color-tint);
    color: var(--dark-color-contrast);
}

button.dark:active,
.interactable.dark:active {
    background-color: var(--dark-color-shade);
    color: var(--dark-color-contrast);
}

.primary,
.secondary,
.success,
.warning,
.danger,
.light,
.dark {
    transition: background-color var(--base-transition-speed), color var(--base-transition-speed), filter var(--base-transition-speed);
}

.secondary-alphabg h2 {
    color: inherit;
}

main.ctm-mt > section:first-child {
    margin-top: 6rem;
}

h1 {
    color: var(--secondary-color);
}

h2 {
    color: var(--primary-color);
}

p {
    /* font-size: 1.3rem; */
}

p.heading,
p.category-heading {
    color: var(--secondary-color);
}

p.heading {
    font-size: 2rem;
    margin-bottom: 3rem;
}

p.category-heading {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}

b,
strong {
    font-weight: 500;
}

.font-weight-500 {
    font-weight: 500;
}

.text-justify {
    text-align: justify;
}

.preloader {
    align-items: center;
    background-color: var(--base-background-color);
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1031;
}

.preloader .spinner-border {
    --bs-spinner-animation-name: spinner-border;
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-border-width: 1rem;
    --bs-spinner-height: 5rem;
    --bs-spinner-vertical-align: -0.125rem;
    --bs-spinner-width: 5rem;
    
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
    border: var(--bs-spinner-border-width) solid var(--primary-color);
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: var(--bs-spinner-height);
    vertical-align: var(--bs-spinner-vertical-align);
    width: var(--bs-spinner-width);
}

.navbar {
    background-color: var(--base-background-color);
    transition: box-shadow var(--base-transition-speed);
}

.navbar:hover {
    box-shadow: 0 0 8px 0 #000;
}

.fixed-top.scrolled {
    box-shadow: 0 0 8px 0 #000;
}

.navbar .nav-link {
    font-weight: 600;
}

.navbar .nav-link.active {
    background-color: var(--tertiary-color);
    border-radius: 0.8rem 0.8rem 0 0;
    transition: filter var(--base-transition-speed);
}

a,
span.icon,
.navbar-brand {
    transition: filter var(--base-transition-speed);
}

a:hover,
a:hover span.icon,
.navbar-brand:hover {
    filter: brightness(90%);
}

a:active,
a:active span.icon,
.navbar-brand:active {
    filter: brightness(80%);
}

.btn {
    background-color: #f1f1f1;
    /* transition: ; */
}

.btn:hover {
    /* background-color: #fff; */
}

.btn.btn-lg {
    border-radius: 0.8rem;
    height: 3.4rem;
}

span.icon {
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

span.icon- {
    aspect-ratio: 1 / 1;
    background-image: url('/assets/icons/css-sprites.webp');
    background-position: -0 -0;
    background-size: var(--spritesheet-width);
    width: var(--icon-width);
}

span.icon-lg {
    --icon-width: calc(512px / 2);
    --spritesheet-width: calc(512px / 2);
}

span.icon-md {
    --icon-width: calc(512px / 4);
    --spritesheet-width: calc(512 / 4);
}

span.icon-sm {
    --icon-width: calc(512px / 8);
    --spritesheet-width: calc(512 / 8);
}

span.icon-xs {
    --icon-width: calc(512px / 16);
    --spritesheet-width: calc(512 / 16);
}

.footer-heading {
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

/* Dispositivos mÃģviles */
@media only screen and (max-width: 600px) {
    .navbar {
        height: var(--mobile-header-height);
    }

    .navbar .container-xxl {
        height: inherit;
    }

    .navbar-brand,
    .navbar-brand img {
        height: calc(var(--mobile-header-height) - 9rem);
    }

    main {
        padding-top: var(--mobile-header-height);
    }
}

/* Dispositivos Tablets */
@media only screen and (min-width: 601px) and (max-width: 1199px) {
    .navbar {
        height: var(--portable-header-height);
    }

    .navbar .container-xxl {
        height: inherit;
    }

    .navbar-brand,
    .navbar-brand img {
        height: calc(var(--portable-header-height) - 8rem);
    }

    main {
        padding-top: var(--portable-header-height);
    }
}

/* Dispositivos PC */
@media only screen and (min-width: 1200px) {
    .navbar {
        height: var(--header-height);
    }

    .navbar .container-xxl {
        height: inherit;
    }

    .navbar-brand,
    .navbar-brand img {
        height: calc(var(--header-height) - -0.6rem);
    }

    main {
        padding-top: calc(var(--header-height) - 4rem);
    }
}