:root {
	/* Primary (#011F7F) */
	--as-primary: #011F7F;
	--as-primary-rgb: 1, 31, 127;
	--as-primary-05: rgba(var(--as-primary-rgb), 0.05);
	--as-primary-10: rgba(var(--as-primary-rgb), 0.1);
	--as-primary-20: rgba(var(--as-primary-rgb), 0.2);
	--as-primary-50: rgba(var(--as-primary-rgb), 0.5);
	--as-primary-80: rgba(var(--as-primary-rgb), 0.8);
	/* Secondary (#0087E2) */
	--as-secondary: #0087E2;
	--as-secondary-rgb: 0, 135, 226;
	--as-secondary-05: rgba(var(--as-secondary-rgb), 0.05);
	--as-secondary-10: rgba(var(--as-secondary-rgb), 0.1);
	--as-secondary-20: rgba(var(--as-secondary-rgb), 0.2);
	--as-secondary-50: rgba(var(--as-secondary-rgb), 0.5);
	--as-secondary-80: rgba(var(--as-secondary-rgb), 0.8);
	/* Tertiary (#15ADF9) */
	--as-tertiary: #15ADF9;
	--as-tertiary-rgb: 21, 173, 249;
	--as-tertiary-05: rgba(var(--as-tertiary-rgb), 0.05);
	--as-tertiary-10: rgba(var(--as-tertiary-rgb), 0.1);
	--as-tertiary-20: rgba(var(--as-tertiary-rgb), 0.2);
	--as-tertiary-50: rgba(var(--as-tertiary-rgb), 0.5);
	--as-tertiary-80: rgba(var(--as-tertiary-rgb), 0.8);
	/* Fourth (#A3E635) */
	--as-fourth: #A3E635;
	--as-fourth-rgb: 163, 230, 53;
	--as-fourth-05: rgba(var(--as-fourth-rgb), 0.05);
	--as-fourth-10: rgba(var(--as-fourth-rgb), 0.1);
	--as-fourth-20: rgba(var(--as-fourth-rgb), 0.2);
	--as-fourth-50: rgba(var(--as-fourth-rgb), 0.5);
	--as-fourth-80: rgba(var(--as-fourth-rgb), 0.8);
	/* Fifth (#5CCA97) */
	--as-fifth: #5CCA97;
	--as-fifth-rgb: 92, 202, 151;
	--as-fifth-05: rgba(var(--as-fifth-rgb), 0.05);
	--as-fifth-10: rgba(var(--as-fifth-rgb), 0.1);
	--as-fifth-20: rgba(var(--as-fifth-rgb), 0.2);
	--as-fifth-50: rgba(var(--as-fifth-rgb), 0.5);
	--as-fifth-80: rgba(var(--as-fifth-rgb), 0.8);
	
	--bg-section: #C7E3FF;
	--navbar-offset: clamp(90px, 8vh, 120px);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin-bottom: 0;
}

main {
	min-height: 100dvh;
}

/* Espaciado superior */
main.main-content-offset {
	padding-top: var(--navbar-offset);
}

/*
 =======================================
 INICIO BOTONES
 Sobreescritura de MDB: SÍ
 =======================================   
*/
.btn-aw-primary {	
	background-color: var(--as-primary) !important;
	color: white;
	transition: transform 0.3s ease, background-color 0.3s ease;
	box-shadow: none !important;
}
.btn-aw-primary:hover {
	background-color: rgb(1, 43, 167);
	color: white;
}
.btn-aw-primary:active,
.btn-aw-primary.active {
	background-color: rgb(1, 43, 167) !important;
	color: white !important;
	transform: scale(1) !important;
}
.btn-aw-secondary {
	background-color: var(--as-secondary) !important;
	color: white;
	transition: transform 0.3s ease, background-color 0.3s ease;
	box-shadow: none !important;
}
.btn-aw-secondary:hover {
	background-color: rgb(26, 164, 255);
	color: white;
}
.btn-aw-secondary:active,
.btn-aw-secondary.active {
	background-color: rgb(26, 164, 255) !important;
	color: white !important;
	transform: scale(1) !important;
}
.btn-aw-tertiary {
	background-color: var(--as-tertiary) !important;
	color: white;
	transition: transform 0.3s ease, background-color 0.3s ease;
	box-shadow: none !important;
}
.btn-aw-tertiary:hover {
	background-color: rgb(69, 191, 250);
	color: white;
}
.btn-aw-tertiary:active,
.btn-aw-tertiary.active {
	background-color: rgb(69, 191, 250) !important;
	color: white !important;
	transform: scale(1) !important;
}
.btn-aw-fifth {
	background-color: var(--as-fifth) !important;
	color: white;
	transition: transform 0.3s ease, background-color 0.3s ease;
	box-shadow: none !important;
}
.btn-aw-fifth:hover {
	background-color: rgb(114, 209, 164);
	color: white;
}
.btn-aw-fifth:active,
.btn-aw-fifth.active {
	background-color: rgb(114, 209, 164) !important;
	color: white !important;
	transform: scale(1) !important;
}
.btn-aw-white-secondary {
	background-color: white !important;
	color: var(--as-secondary);
	transition: transform 0.3s ease, background-color 0.3s ease;
	box-shadow: none !important;
}
.btn-aw-white-secondary:active,
.btn-aw-white-secondary.active,
.btn-aw-white-secondary:hover {
	background-color: rgb(238, 238, 238) !important;
	color: var(--as-secondary) !important;
}
/*
 =======================================
 FIN BOTONES
 =======================================   
*/

/*
 =======================================
 INICIO BORDES
 Sobreescritura de MDB: NO
 =======================================   
*/
.border-as-primary {
	border-color: var(--as-primary) !important;
}
.border-as-secondary {
	border-color: var(--as-secondary) !important;
}
.border-as-tertiary {
	border-color: var(--as-tertiary) !important;
}
.border-as-fourth {
	border-color: var(--as-fourth) !important;
}
.border-as-fifth {
	border-color: var(--as-fifth) !important;
}
.border-as-purple {
	border-color: #563cb8 !important;
}
/*
 =======================================
 FIN BORDES
 =======================================   
*/

/*
 =======================================
 INICIO TEXTOS
 Sobreescritura de MDB: NO
 =======================================   
*/
.txt-primary {
	color: var(--as-primary);
}
.txt-secondary {
	color: var(--as-secondary);
}
.txt-tertiary {
	color: var(--as-tertiary);
}
.txt-fourth {
	color: var(--as-fourth);
}
.txt-fifth {
	color: var(--as-fifth) !important;
}
/*
 =======================================
 FIN TEXTOS
 =======================================   
*/

/*
 =======================================
 INICIO FONDOS DE COLOR
 Sobreescritura de MDB: NO
 =======================================   
*/
.bg-as-primary {
	background-color: var(--as-primary);
}
.bg-as-secondary {
	background-color: var(--as-secondary);
}
.bg-as-tertiary {
	background-color: var(--as-tertiary);
}
.bg-as-fourth {
	background-color: var(--as-fourth);
}
.bg-as-fifth {
	background-color: var(--as-fifth);
}
.bg-section {
	background-color: var(--bg-section);
}
/*
 =======================================
 FIN FONDOS DE COLOR
 =======================================   
*/

/*
 =======================================
 INICIO CUSTOM BADGES
 Sobreescritura de MDB: NO
 =======================================   
*/
.badge-as-primary {
	background-color: var(--as-primary);
	color: white;
}
.badge-as-secondary {
	background-color: var(--as-secondary);
	color: white;
}
.badge-as-secondary-light {
	background-color: var(--as-secondary-10);
	color: var(--as-secondary);
}
.badge-as-tertiary {
	background-color: var(--as-tertiary);
	color: white;
}
.badge-as-fourth {
	background-color: var(--as-fourth);
	color: white;
}
.badge-as-fifth {
	background-color: var(--as-fifth);
	color: white;
}
.badge-white {
	background-color: white;
	color: var(--as-secondary);
}
/*
 =======================================
 FIN CUSTOM BADGES
 =======================================   
*/

/*
 =======================================
 INICIO TITLE SPLIT (TITULOS DE DOS COLORES)
 Sobreescritura de MDB: NO
 =======================================   
*/
.title-split {
	width: 100%;
	display: block;
	text-align: center;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
}

.title-split span {
	display: inline;
	white-space: normal;
}

.title-split span:first-child {
	color: var(--as-secondary);
}

.title-split span:last-child {
	color: var(--as-fourth);
}

.title-split::before,
.title-split::after {
	content: "";
	display: inline-block; 
	height: 4px;
	width: clamp(1.5rem, 3vw, 3rem);
	border-radius: 50px;
	vertical-align: middle; 
	margin: 0 0.2em;
}

.title-split::before {
	background-color: var(--as-secondary);
}

.title-split::after {
	background-color: var(--as-fourth);
}

.bg-section .title-split span:last-child {
	color: var(--as-fifth);
}

.bg-section .title-split::after {
	background-color: var(--as-fifth);
}
/*
 =======================================
 FIN TITLE SPLIT
 =======================================   
*/