/* =====================================================
	 Mini Framework CSS - v1
	 Autor: Jaime
	 Descripción: Micro framework CSS ligero inspirado en Bootstrap y Tailwind
	 ===================================================== */

/* =========================
	 1. Variables (Root)
	 ========================= */
:root {
	/* 🎨 Paleta de colores */
	--c-primary: 52, 152, 219;   /* Azul */
	--c-secondary: 155, 89, 182; /* Púrpura */
	--c-tertiary: 75, 20, 110;
	--c-success: 106, 199, 90;   /* Verde */
	--c-danger: 231, 76, 60;     /* Rojo */
	--c-warning: 241, 196, 15;   /* Amarillo */
	--c-info: 103, 186, 241;      /* Turquesa */
	--c-dark: 44, 62, 80;        /* Gris oscuro */
	--c-text: 20, 23, 40;
	--c-light: 236, 240, 241;    /* Gris claro */
	/* 🔤 Tipografía */
	--font-family-base: Tahoma, Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;
	/* 📏 Espaciados */
	--spacer-0: 0;
	--spacer-1: 0.25rem;
	--spacer-2: 0.5rem;
	--spacer-3: 1rem;
	--spacer-4: 1.5rem;
	--spacer-5: 3rem;
	/* 🔲 Bordes */
	--border-radius: 0.375rem;
	--border-width: 1px;

	/* ✨ Sombras */
	--box-shadow: 0 0.5rem 1rem rgba(var(--c-dark), 0.15);
}

html {
	font-size: 16px;
  scroll-behavior: smooth;
}
html.dark-scheme {
	--c-text: 245, 245, 245;
	--c-background: 33, 33, 33;
}

[x-cloak] { display: none !important; }
/*********************** SCROLLBAR ***********************/

::-webkit-scrollbar {
	width: .5rem;
	height: .5rem;
	background-color: var(--c-background);
}
::-webkit-scrollbar-thumb {
	border-radius: .5rem;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	/*border: 1px solid var(--c-background);*/
	background-color: rgb(var(--c-primary));
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-corner {
	background-color: var(--c-background);
}

@media (max-width: 768px) {
	::-webkit-scrollbar {
		width: .2rem;
		height: .2rem;
	}
}

/* =========================
	 2. Tipografía global
	 ========================= */
body {
	font-family: var(--font-family-base);
	/*font-size: var(--font-size-base);*/
	/*line-height: var(--line-height-base);*/
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	margin: 0;
	overflow-x: hidden;
	overflow-x: auto;
}

/* =========================
	 3. Reset básico
	 ========================= */
* {
	/*margin: 0;*/
	/*padding: 0;*/
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: all 0.3s ease 0s;
}
/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

img, video {
/*	max-width: 100%;
	height: auto;*/
}

/* ========================================
	 ELEMENTOS BASE - ENLACES
	 ======================================== */

a {
	color: rgba(var(--c-primary), .75);
	text-decoration: none;
}

a:hover,
a:focus {
	color: rgba(var(--c-primary), 1);
	text-decoration: none;
	outline: none;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none;
}

a:active {
	color: var(--secondary);
}

a[disabled],
a.disabled {
	pointer-events: none;
	color: var(--light);
	text-decoration: none;
	cursor: default;
}

/* =========================
	 Tipografía semántica
	 ========================= */

/* Encabezados */
h1, .h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; }
h2, .h2 { font-size: 2rem;   font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; }
h3, .h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; }
h4, .h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem; }
h5, .h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem; }
h6, .h6 { font-size: 1rem; font-weight: 500; line-height: 1.5; margin-bottom: 0.5rem; }

hr {
	border: 1px solid rgb(var(--c-primary), .5);
	margin: 1rem 0;
}
/* Párrafos */
p {
	margin-bottom: 1rem;
	color: rgb(var(--c-text));
}

/* Texto pequeño */
small, .text-small {
	font-size: 0.875rem;
	color: rgb(var(--c-text));
	opacity: 0.8;
}

/* Citas */
blockquote {
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	border-left: 4px solid rgb(var(--c-primary));
	color: rgb(var(--c-dark));
	font-style: italic;
	background: rgba(var(--c-primary), 0.05);
}

/* Listas */
ul, ol {
	margin: 1rem 0 1rem 1.5rem;
	padding: 0;
}
li {
	margin-bottom: 0.5rem;
}

/* Código inline */
code {
	font-family: monospace, monospace;
	background: rgba(var(--c-dark), 0.1);
	padding: 0.125rem 0.25rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
}

/* Bloques de código */
pre {
	font-family: monospace, monospace;
	background: rgba(var(--c-dark), 0.1);
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

/* ========================================
	 UTILIDADES TIPOGRÁFICAS
	 ======================================== */

/* Alineación de texto */
.text-start   { text-align: left; }
.text-center  { text-align: center; }
.text-end     { text-align: right; }
.text-justify { text-align: justify; }

/* Transformación de texto */
.text-lowercase  { text-transform: lowercase; }
.text-uppercase  { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

/* Peso y estilo de fuente */
.fw-light   { font-weight: 300; }
.fw-normal  { font-weight: 400; }
.fw-medium  { font-weight: 500; }
.fw-bold    { font-weight: 700; }
.fw-bolder  { font-weight: 900; }
.fst-italic { font-style: italic; }
.fst-normal { font-style: normal; }

/* Truncamiento de texto */
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tamaños de fuente */
.fs-1 { font-size: 2.5rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }
.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }
.fs-7 { font-size: .85rem; }
.fs-8 { font-size: .7rem; }
.fs-9 { font-size: .55rem; }

/* Colores de texto */




/* =====================================================
	 Mini Framework CSS - Fase 2: Utilidades rápidas
	 Autor: Jaime
	 Descripción: Clases rápidas de espaciado, colores y display
	 ===================================================== */

/* =========================
	 1. Espaciados (Margin / Padding)
	 ========================= */

/* Margen general */
.m-0 { margin: var(--spacer-0) !important; }
.m-1 { margin: var(--spacer-1) !important; }
.m-2 { margin: var(--spacer-2) !important; }
.m-3 { margin: var(--spacer-3) !important; }
.m-4 { margin: var(--spacer-4) !important; }
.m-5 { margin: var(--spacer-5) !important; }

/* Padding general */
.p-0 { padding: var(--spacer-0) !important; }
.p-1 { padding: var(--spacer-1) !important; }
.p-2 { padding: var(--spacer-2) !important; }
.p-3 { padding: var(--spacer-3) !important; }
.p-4 { padding: var(--spacer-4) !important; }
.p-5 { padding: var(--spacer-5) !important; }

/* Margen en un solo lado */
.mt-0 { margin-top: var(--spacer-0) !important; }
.mt-1 { margin-top: var(--spacer-1) !important; }
.mt-2 { margin-top: var(--spacer-2) !important; }
.mt-3 { margin-top: var(--spacer-3) !important; }
.mt-4 { margin-top: var(--spacer-4) !important; }
.mt-5 { margin-top: var(--spacer-5) !important; }

.mb-0 { margin-bottom: var(--spacer-0) !important; }
.mb-1 { margin-bottom: var(--spacer-1) !important; }
.mb-2 { margin-bottom: var(--spacer-2) !important; }
.mb-3 { margin-bottom: var(--spacer-3) !important; }
.mb-4 { margin-bottom: var(--spacer-4) !important; }
.mb-5 { margin-bottom: var(--spacer-5) !important; }

.ms-0 { margin-left: var(--spacer-0) !important; }
.ms-1 { margin-left: var(--spacer-1) !important; }
.ms-2 { margin-left: var(--spacer-2) !important; }
.ms-3 { margin-left: var(--spacer-3) !important; }
.ms-4 { margin-left: var(--spacer-4) !important; }
.ms-5 { margin-left: var(--spacer-5) !important; }

.me-0 { margin-right: var(--spacer-0) !important; }
.me-1 { margin-right: var(--spacer-1) !important; }
.me-2 { margin-right: var(--spacer-2) !important; }
.me-3 { margin-right: var(--spacer-3) !important; }
.me-4 { margin-right: var(--spacer-4) !important; }
.me-5 { margin-right: var(--spacer-5) !important; }

.mx-0 { margin: 0 var(--spacer-0) !important; }
.mx-1 { margin: 0 var(--spacer-1) !important; }
.mx-2 { margin: 0 var(--spacer-2) !important; }
.mx-3 { margin: 0 var(--spacer-3) !important; }
.mx-4 { margin: 0 var(--spacer-4) !important; }
.mx-5 { margin: 0 var(--spacer-5) !important; }

.my-0 { margin: var(--spacer-0) 0 !important; }
.my-1 { margin: var(--spacer-1) 0 !important; }
.my-2 { margin: var(--spacer-2) 0 !important; }
.my-3 { margin: var(--spacer-3) 0 !important; }
.my-4 { margin: var(--spacer-4) 0 !important; }
.my-5 { margin: var(--spacer-5) 0 !important; }

/* Padding en un solo lado */
.pt-0 { padding-top: var(--spacer-0) !important; }
.pt-1 { padding-top: var(--spacer-1) !important; }
.pt-2 { padding-top: var(--spacer-2) !important; }
.pt-3 { padding-top: var(--spacer-3) !important; }
.pt-4 { padding-top: var(--spacer-4) !important; }
.pt-5 { padding-top: var(--spacer-5) !important; }

.pb-0 { padding-bottom: var(--spacer-0) !important; }
.pb-1 { padding-bottom: var(--spacer-1) !important; }
.pb-2 { padding-bottom: var(--spacer-2) !important; }
.pb-3 { padding-bottom: var(--spacer-3) !important; }
.pb-4 { padding-bottom: var(--spacer-4) !important; }
.pb-5 { padding-bottom: var(--spacer-5) !important; }

.ps-0 { padding-left: var(--spacer-0) !important; }
.ps-1 { padding-left: var(--spacer-1) !important; }
.ps-2 { padding-left: var(--spacer-2) !important; }
.ps-3 { padding-left: var(--spacer-3) !important; }
.ps-4 { padding-left: var(--spacer-4) !important; }
.ps-5 { padding-left: var(--spacer-5) !important; }

.pe-0 { padding-right: var(--spacer-0) !important; }
.pe-1 { padding-right: var(--spacer-1) !important; }
.pe-2 { padding-right: var(--spacer-2) !important; }
.pe-3 { padding-right: var(--spacer-3) !important; }
.pe-4 { padding-right: var(--spacer-4) !important; }
.pe-5 { padding-right: var(--spacer-5) !important; }

.px-0 { padding: 0 var(--spacer-0) !important; }
.px-1 { padding: 0 var(--spacer-1) !important; }
.px-2 { padding: 0 var(--spacer-2) !important; }
.px-3 { padding: 0 var(--spacer-3) !important; }
.px-4 { padding: 0 var(--spacer-4) !important; }
.px-5 { padding: 0 var(--spacer-5) !important; }

.py-0 { padding: var(--spacer-0) 0 !important; }
.py-1 { padding: var(--spacer-1) 0 !important; }
.py-2 { padding: var(--spacer-2) 0 !important; }
.py-3 { padding: var(--spacer-3) 0 !important; }
.py-4 { padding: var(--spacer-4) 0 !important; }
.py-5 { padding: var(--spacer-5) 0 !important; }

/* =========================
	 2. Colores de texto
	 ========================= */
.text-primary   { color: rgb(var(--c-primary)) !important; }
.text-secondary { color: rgb(var(--c-secondary)) !important; }
.text-success   { color: rgb(var(--c-success)) !important; }
.text-danger    { color: rgb(var(--c-danger)) !important; }
.text-warning   { color: rgb(var(--c-warning)) !important; }
.text-info      { color: rgb(var(--c-info)) !important; }
.text-light     { color: rgb(var(--c-light)) !important; }
.text-dark      { color: rgb(var(--c-dark)) !important; }
.text-body      { color: rgb(var(--c-text)) !important; }

/* =========================
	 3. Colores de fondo
	 ========================= */
.bg-primary   { background-color: rgb(var(--c-primary)) !important; }
.bg-secondary { background-color: rgb(var(--c-secondary)) !important; }
.bg-success   { background-color: rgb(var(--c-success)) !important; }
.bg-danger    { background-color: rgb(var(--c-danger)) !important; }
.bg-warning   { background-color: rgb(var(--c-warning)) !important; }
.bg-info      { background-color: rgb(var(--c-info)) !important; }
.bg-dark      { background-color: rgb(var(--c-dark)) !important; }
.bg-light     { background-color: rgb(var(--c-light)) !important; }

/* =========================
	 4. Display y alineación
	 ========================= */
/* ========================================
	 UTILIDADES DE DISPLAY Y ALINEACIÓN
	 ======================================== */

/* Display */
.d-none        { display: none !important; }
.d-inline      { display: inline !important; }
.d-inline-block{ display: inline-block !important; }
.d-block       { display: block !important; }
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid        { display: grid !important; }

/* Flex dirección */
.flex-row       { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column    { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.flex-wrap      { flex-wrap: wrap !important; }
.flex-nowrap    { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justificación de contenido */
.justify-start    { justify-content: flex-start !important; }
.justify-center   { justify-content: center !important; }
.justify-end      { justify-content: flex-end !important; }
.justify-between  { justify-content: space-between !important; }
.justify-around   { justify-content: space-around !important; }
.justify-evenly   { justify-content: space-evenly !important; }

/* Alineación en eje vertical (cross-axis) */
.align-start   { align-items: flex-start !important; }
.align-center  { align-items: center !important; }
.align-end     { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }
.align-baseline{ align-items: baseline !important; }

/* Alineación de contenido en grid/flex (multi-line) */
.align-content-start   { align-content: flex-start !important; }
.align-content-center  { align-content: center !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

/* Auto-alineación de items */
.align-self-start   { align-self: flex-start !important; }
.align-self-center  { align-self: center !important; }
.align-self-end     { align-self: flex-end !important; }
.align-self-stretch { align-self: stretch !important; }

/* Grid helpers */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

.grid-rows-1 { grid-template-rows: repeat(1, 1fr) !important; }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr) !important; }
.grid-rows-3 { grid-template-rows: repeat(3, 1fr) !important; }
.grid-rows-4 { grid-template-rows: repeat(4, 1fr) !important; }
.grid-rows-5 { grid-template-rows: repeat(5, 1fr) !important; }
.grid-rows-6 { grid-template-rows: repeat(6, 1fr) !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.vh25 { height: 25vh !important; } 
.vh50 { height: 50vh !important; } 
.vh75 { height: 75vh !important; } 
.vh100 { height: 100vh !important; } 

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

.text-gradient {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 1
}
.text-gradient.text-primary {
	background-image: linear-gradient(310deg, rgb(var(--c-secondary)), rgb(var(--c-primary)));
}
.text-gradient.text-info {
	background-image: linear-gradient(310deg, #2152ff, #21d4fd)
}
.text-gradient.text-success {
	background-image: linear-gradient(310deg, #17ad37, #c1e823)
}
.text-gradient.text-warning {
	background-image: linear-gradient(310deg, #f53939, #fbcf33)
}
.text-gradient.text-danger {
	background-image: linear-gradient(310deg, #d60808, #ff6690)
}
.text-gradient.text-dark {
	background-image: linear-gradient(310deg, #141727, #3a416f)
}
/* =====================================================
	 Mini Framework CSS - Fase 3: Componentes base
	 Autor: Jaime
	 Descripción: Botones, Grid y Tarjetas
	 ===================================================== */

/* =========================
	 1. Botones
	 ========================= */

.btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 0.375rem;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	color: rgb(var(--c-text));
	cursor: pointer;
	font-family: var(--body-font-family);
	font-size: 1rem;
	overflow: hidden;
	font-weight: 500;
	line-height: 1.5;
}
/* Variantes de color */
.btn-primary   { background-color: rgb(var(--c-primary)); border-color: rgb(var(--c-primary)); }
.btn-secondary { background-color: rgb(var(--c-secondary)); border-color: rgb(var(--c-secondary)); }
.btn-success   { background-color: rgb(var(--c-success)); border-color: rgb(var(--c-success)); }
.btn-danger    { background-color: rgb(var(--c-danger)); border-color: rgb(var(--c-danger)); }
.btn-warning   { background-color: rgb(var(--c-warning)); border-color: rgb(var(--c-warning)); color: #000; }
.btn-info      { background-color: rgb(var(--c-info)); border-color: rgb(var(--c-info)); }
.btn-light     { background-color: rgb(var(--c-light)); border-color: rgb(var(--c-light)); color: #000; }
.btn-dark      { background-color: rgb(var(--c-dark)); border-color: rgb(var(--c-dark)); }

/* Botones contorneados (outline) */
.btn-outline-primary   { color: var(--primary); background-color: transparent; border-color: var(--primary); }
.btn-outline-secondary { color: var(--secondary); background-color: transparent; border-color: var(--secondary); }
.btn-outline-success   { color: var(--success); background-color: transparent; border-color: var(--success); }
.btn-outline-danger    { color: var(--danger); background-color: transparent; border-color: var(--danger); }
.btn-outline-warning   { color: var(--warning); background-color: transparent; border-color: var(--warning); }
.btn-outline-info      { color: var(--info); background-color: transparent; border-color: var(--info); }
.btn-outline-light     { color: var(--light); background-color: transparent; border-color: var(--light); }
.btn-outline-dark      { color: var(--dark); background-color: transparent; border-color: var(--dark); }

.btn-outline-primary:hover   { background-color: rgb(var(--primary)); color: #fff; }
.btn-outline-secondary:hover { background-color: rgb(var(--secondary)); color: #fff; }
.btn-outline-success:hover   { background-color: rgb(var(--success)); color: #fff; }
.btn-outline-danger:hover    { background-color: rgb(var(--danger)); color: #fff; }
.btn-outline-warning:hover   { background-color: rgb(var(--warning)); color: #000; }
.btn-outline-info:hover      { background-color: rgb(var(--info)); color: #fff; }
.btn-outline-light:hover     { background-color: rgb(var(--light)); color: #000; }
.btn-outline-dark:hover      { background-color: rgb(var(--dark)); color: #fff; }

/* Tamaños */
.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

.btn-lg {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	border-radius: 0.5rem;
}

/* Bloque completo */
.btn-block {
	display: block;
	width: 100%;
}

/* Variantes de color */
.btn-primary:hover {
	background-color: rgba(var(--c-primary), 0.75);
}
.btn-secondary:hover {
	background-color: rgba(var(--c-secondary), 0.75);
}
.btn-tertiary:hover {
	background-color: rgba(var(--c-tertiary), 0.75);
}

.btn.active { background: rgb(var(--c-primary), .1); }
.btn:hover, .btn:focus-visible {/*filter: brightness(80%);*/ outline: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled {	opacity: 0.6;	pointer-events: none; }
.btn:hover { background: rgb(var(--c-text), .15); }
.btn>.tki { vertical-align: middle; }


.btn.new {
	font-weight: 400;
	font-size: .85rem;
	letter-spacing: 1px;
	border: 2px solid rgb(var(--c-primary));
	color: rgb(var(--c-primary));
	background: rgb(var(--c-background), .75);
	margin: .25rem;
	box-shadow: 0 2px 4px 2px rgba(var(--c-primary), .15);
}
.btn.new:hover {
	box-shadow: 0 2px 4px 2px rgba(var(--c-primary), .5);
}
.btn.new:before, .btn.new:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.btn.new:before {
	/*border: 1px solid blue;*/
}
.btn.new:after {
	/*border: 1px solid red;*/
	/*background-color: red;*/
	z-index: -1;
}

.btn.glow {
	position: relative;
	overflow: hidden;
	border: 2px solid rgba(var(--c-primary));
	background: linear-gradient(to right, rgba(var(--c-primary), 0.1) 1%, transparent 40%,transparent 60% , rgba(var(--c-primary), 0.1) 100%);
	color: rgba(var(--c-primary));
	box-shadow: inset 0 0 10px rgba(var(--c-primary), 0.4), 0 0 9px 3px rgba(var(--c-primary), 0.1);
}
.btn.glow:hover {
	color: rgba(var(--c-primary), .85);
	box-shadow: inset 0 0 10px rgba(var(--c-primary), 0.6), 0 0 9px 3px rgba(var(--c-primary), 0.2);
}
.btn.glow:before {
	content: "";
	position: absolute;
	left: -4em;
	width: 4em;
	height: 100%;
	top: 0;
	transition: transform .4s ease-in-out;
	background: linear-gradient(to right, transparent 1%, rgba(var(--c-primary), 0.5) 40%,rgba(var(--c-primary), 0.1) 60% , transparent 100%);
}
.btn.glow:hover:before {
	transform: translateX(15em);
}


.btn.flyball {
	position: relative;
	--fb-color: var(--c-text);
	background: rgb(var(--c-background), .85);
	border: 2px solid rgba(var(--fb-color));
	overflow: hidden;
	color: rgba(var(--fb-color), .85);
	transition: all 0.5s ease-in-out;
}
.btn.flyball::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: .5rem;
	height: .5rem;
	transition: all 0.5s ease-in-out;
	background-color: rgba(var(--fb-color)) !important;
	border-radius: 50%;
	visibility: hidden;
	z-index: 0;
}
.btn.flyball>span {
	position: relative;
	z-index: 10;
}
.btn.flyball.primary {
	--fb-color: var(--c-primary);
}
.btn.flyball.secondary {
	--fb-color: var(--c-secondary);
}
.btn.flyball.tertiary {
	--fb-color: var(--c-tertiary);
}
.btn.flyball:hover {
	box-shadow: 1px 1px 5rem rgb(var(--fb-color));
	color: rgb(var(--c-background));
}
.btn.flyball:hover::after {
	visibility: visible;
	transform: scale(100) translateX(2px);
}



/* =========================
	 2. Grid (Sistema de columnas)
	 ========================= */

/* Contenedores */
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	max-width: 1200px;
}
@media (min-width: 576px) {
	.container { max-width: 540px; }
}
@media (min-width: 768px) {
	.container { max-width: 720px; }
}
@media (min-width: 992px) {
	.container { max-width: 960px; }
}
@media (min-width: 1200px) {
	.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
	.container { max-width: 1320px; }
}

.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

/* Filas */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.75rem;
	margin-left: -0.75rem;
}

[class*="col-"] {
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

/* Columnas básicas (12 columnas) */
.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Offsets */
.offset-1 { margin-left: 8.333%; }
.offset-2 { margin-left: 16.666%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333%; }
.offset-5 { margin-left: 41.666%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333%; }
.offset-8 { margin-left: 66.666%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333%; }
.offset-11 { margin-left: 91.666%; }

/* Breakpoints */
@media (min-width: 576px) {
	.col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; }
	.col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; }
	.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
	.col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
	.col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; }
	.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	.col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; }
	.col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; }
	.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
	.col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
	.col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Medium devices (md) >= 768px */
@media (min-width: 768px) {
	.col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-9 { flex: 0 0 75%; max-width: 75%; }
	.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Large devices (lg) >= 992px */
@media (min-width: 992px) {
	.col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
/* Extra large devices (xl) >= 1200px */
@media (min-width: 1200px) {
	.col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
	.col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-xl-6 { flex: 0 0 50%; max-width: 50%; }
	.col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-xl-9 { flex: 0 0 75%; max-width: 75%; }
	.col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}



/* Ejemplo: en el futuro podemos extender a col-1...col-12 */

/* =========================
	 3. Tarjetas (Cards)
	 ========================= */

.card {
	border: 1px solid rgb(var(--c-text), .1);
	border-radius: 0.5rem;
	background: rgb(var(--c-background));
	color: rgb(var(--c-text));
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Variantes */
.card-primary {
	border-color: var(--primary);
}

.card-secondary {
	border-color: var(--secondary);
}
.card-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
}

.card-header, .card-footer {
	padding: 0.75rem 1rem;
	background: rgb(var(--c-background));
	font-weight: 500;
	border-bottom: 1px solid rgb(var(--c-text),.25);
}

.card-footer {
	border-top: 1px solid rgb(var(--c-text),.25);
	border-bottom: none;
}

.card-body {
	padding: 1rem;
	flex: 1;
}

.card-title {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.card-text {
	font-size: 1rem;
	color: #212529;
}

.card-img-top {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #dee2e6;
}

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

form {
	width: 100%;
	display: block;
}

/*form > *:first-child {
	margin-top: 0;
}
form > *:not(:first-child) {
	margin-top: 1rem;
}
form > *:last-child {
	margin-bottom: 0;
}*/
/* Labels */
label {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-family: var(--font-family-base);
	font-weight: 500;
	color: rgb(var(--c-primary));
	font-size: 0.9rem;
	cursor: pointer;
}

/* Inputs generales */
input,
select,
textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-family: var(--font-family-base);
	font-size: 1rem;
	line-height: 1.5;
	color: rgb(var(--c-dark));
	background-color: rgb(var(--c-light));
	background-clip: padding-box;
	border: 1px solid rgb(var(--c-light), .1);
	border-radius: var(--radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado focus */
input:focus,
select:focus,
textarea:focus {
	border-color: rgb(var(--c-primary));
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(var(--c-primary), 0.25);
}

/* Placeholder */
::placeholder {
	color: rgb(var(--c-background), .5);
	opacity: 1;
}

/* Disabled */
input:disabled,
select:disabled,
textarea:disabled {
	background-color: rgb(var(--c-light), .1);
	opacity: 0.65;
	cursor: not-allowed;
}

/* Select */
select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(100,100,100)' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	padding-right: 2rem;
}

/* Checkboxes y Radios */
input[type="checkbox"],
input[type="radio"] {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	cursor: pointer;
	accent-color: rgb(var(--c-primary));
	box-shadow: unset;
}

/* File input */
input[type="file"] {
	padding: 0.3rem;
	border: none;
}

/* Textarea */
textarea {
	min-height: 100px;
	resize: vertical;
}

/* Validación */
.is-valid {
	border-color: rgb(var(--c-success));
	box-shadow: 0 0 0 0.2rem rgba(var(--c-success), 0.25);
}

.is-invalid {
	border-color: rgb(var(--c-danger));
	box-shadow: 0 0 0 0.2rem rgba(var(--c-danger), 0.25);
}

.invalid-feedback {
	width: 100%;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: rgb(var(--c-danger));
}

/* ================================
	 FORMULARIOS NORMALIZADOS
	 Basados en Bootstrap form-floating
	 ================================ */

/* --- Contenedor base --- */
.form-floating {
	position: relative;
	width: 100%;
	margin: .5rem 0;
}

/* --- Inputs comunes (text, email, password, number, date, time, etc.) --- */
.form-floating > .form-control,
.form-floating > .form-select {
	height: calc(3.5rem + 2px);
	line-height: 1.25;
	padding: 1rem 1rem .25rem;
	background-color: rgb(var(--c-background));
	color: rgb(var(--c-text));
	border: 1px solid rgb(var(--c-text), .25);
	border-radius: 1rem;
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
	border-color: rgb(var(--c-primary)) !important;
}

/* --- Label flotante --- */
.form-floating > label {
	position: absolute;
	top: 1rem;
	left: 1rem;
	color: rgba(var(--c-text), 0.65);
	font-size: .875rem;
	transition: all .2s ease;
	pointer-events: none;
}

.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

.form-select:open::picker-icon {
  /*rotate: 180deg;*/
  /*transform: rotate(30deg);*/
}
.form-select:focus {
	outline: 0;
}

/* --- Animación de label flotante --- */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label {
	top: .5rem;
	left: 1.1rem;
	font-size: .75rem;
	opacity: .8;
}

/* --- Textarea --- */
.form-floating > textarea {
	height: auto;
	min-height: 100px;
	padding: 1.5rem .75rem .25rem .75rem !important;
	resize: vertical;
}

/* --- Select --- */
.form-floating > .form-select {
	padding: 1.625rem 1rem .625rem;
}

/* --- File input --- */
.form-floating > input[type="file"] {
	height: calc(3.5rem + 2px);
	padding: 1.5rem .75rem .25rem;
}
.form-floating > input[type="file"] ~ label {
	top: -0.5rem;
	font-size: .75rem;
	opacity: .8;
}

/* --- Color input --- */
.form-floating > input[type="color"] {
	height: calc(5rem + 2px);
	padding: 1.5rem .75rem .25rem;
}
.form-floating > input[type="color"] ~ label {
	top: -0.5rem;
	font-size: .75rem;
	opacity: .8;
}

/* --- Range input --- */
.form-floating-range {
	position: relative;
	padding-top: 1.5rem;
}
.form-floating-range > input[type="range"] {
	width: 100%;
}
.form-floating-range > label {
	position: absolute;
	top: 0;
	left: 0;
	font-size: .75rem;
	color: rgba(var(--c-text), 0.65);
}

/* --- Checkbox / Radio --- */
.form-floating-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem 0;
	margin: .5rem 0;
}
.form-floating-check>input {
	position: relative;
	visibility: hidden;
	/*margin-right: 1.5rem;*/
}
.form-floating-check>input:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
	height: 1rem;
	background-color: rgb(var(--color, var(--c-text)), 0);
	border: 1px solid rgb(var(--color, var(--c-text)), 1);
	border-radius: .25rem;
	cursor: pointer;
	transition-duration: .2s;
	visibility: visible;
}
.form-floating-check>input[type="radio"]:before {
	border-radius: .5rem;
}
.form-floating-check>input:after {
	content: "";
	position: absolute;
	height: 1rem;
	width: 1rem;
	top: 0;
	left: 0;
	transition-duration: .2s;
	visibility: visible;
}
.form-floating-check>input:checked::before {
	background-color: rgb(var(--color, var(--c-dark)), .85);
}
.form-floating-check>input:checked[type="checkbox"]::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-floating-check>input:checked[type="radio"]::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-floating-check>label {
	color: rgb(var(--c-text));
	margin: 0;
}
.form-floating-check.primary {
	--color: var(--c-primary);
}
.form-floating-check.secondary {
	--color: var(--c-secondary);
}
.form-floating-check.tertiary {
	--color: var(--c-tertiary);
}
.form-floating-check.success {
	--color: var(--c-success);
}
.form-floating-check.danger {
	--color: var(--c-danger);
}
.form-floating-check.warning {
	--color: var(--c-warning);
}
.form-floating-check.info {
	--color: var(--c-info);
}
.form-floating-check.dark {
	--color: var(--c-dark);
}
.form-floating-check.light {
	--color: var(--c-light);
}

/* este es con animacion y svg */
.form-floating-check.svg {
	position: relative;
}
.form-floating-check.svg>label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
}
.form-floating-check.svg>label>input {
	display: none;
}

.form-floating-check.svg>label>svg {
	overflow: visible;
}
.form-floating-check.svg>label>svg>.path {
	fill: rgba(var(--c-text), .2);
	stroke: rgba(var(--c-primary));
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
	stroke-dasharray: 241 9999999;
	stroke-dashoffset: 0;
}
.form-floating-check.svg>label>input:checked ~ svg .path {
	stroke-dasharray: 70.5096664428711 9999999;
	stroke-dashoffset: -262.2723388671875;
}




.form-floating-check > input[type="checkbox"],
.form-floating-check > input[type="radio"] {
	margin-top: 0;
	flex-shrink: 0;
}
.form-floating-check > label {
	font-size: .875rem;
	color: rgba(var(--c-text), 0.8);
	cursor: pointer;
	margin: 0;
}

/* --- Search input (se comporta como text) --- */
.form-floating > input[type="search"] {
	padding: 1rem 1rem .25rem;
}

/* --- Tipos de fecha/tiempo --- */
.form-floating > input[type="date"],
.form-floating > input[type="time"],
.form-floating > input[type="datetime-local"],
.form-floating > input[type="month"],
.form-floating > input[type="week"] {
	padding: 1rem 1rem .25rem;
}

/* --- URL & Teléfono --- */
.form-floating > input[type="url"],
.form-floating > input[type="tel"],
.form-floating > input[type="number"] {
	padding: 1rem 1rem .25rem;
}

/* --- Estados de validación --- */
.form-floating .invalid-feedback,
.form-floating-check .invalid-feedback,
.form-floating-range .invalid-feedback {
	font-size: .75rem;
	color: rgba(var(--c-danger), 1);
	margin-top: .25rem;
	display: none;
}

/* Mostrar feedback al validar */
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated input[type="file"]:invalid ~ .invalid-feedback,
.was-validated input[type="color"]:invalid ~ .invalid-feedback,
.was-validated textarea:invalid ~ .invalid-feedback {
	display: block;
}

/* Colores de borde en validación */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated input[type="file"]:invalid,
.was-validated input[type="color"]:invalid,
.was-validated textarea:invalid {
	border-color: rgba(var(--c-danger), 1);
}
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated textarea:valid {
	border-color: rgba(var(--c-success), 1);
}

.form-switch {
	position: relative;
	display: block;
	padding: .25rem 0;
	margin: .5rem 0;
}
.form-switch>input {
	position: relative;
	visibility: hidden;
	margin-right: 1.5rem;
}
.form-switch>input:before {
	content: "";
	position: absolute;
	top: .25rem;
	left: .25rem;
	width: 2rem;
	height: 1rem;
	background-color: rgb(var(--color, var(--c-dark)),.25);
	border-radius: 1rem;
	cursor: pointer;
	transition-duration: .2s;
	visibility: visible;
}
.form-switch>input:after {
	content: "";
	position: absolute;
	height: 1rem;
	width: 1rem;
	top: .25rem;
	left: .25rem;
	background-color: rgb(var(--c-light),.5);
	border-radius: 50%;
	transition-duration: .2s;
	visibility: visible;
}
.form-switch>input:checked::before {
	background-color: rgb(var(--color, var(--c-dark)), .85);
}
.form-switch>input:checked::after {
	transform: translateX(100%);
	background-color: rgb(var(--c-light));
}
.form-switch>label {
	color: rgb(var(--c-text));
	margin: 0;
}
.form-switch.primary {
	--color: var(--c-primary);
}
.form-switch.secondary {
	--color: var(--c-secondary);
}
.form-switch.tertiary {
	--color: var(--c-tertiary);
}
.form-switch.success {
	--color: var(--c-success);
}
.form-switch.danger {
	--color: var(--c-danger);
}
.form-switch.warning {
	--color: var(--c-warning);
}
.form-switch.info {
	--color: var(--c-info);
}
.form-switch.dark {
	--color: var(--c-dark);
}
.form-switch.light {
	--color: var(--c-light);
}

/* Contenedor */
.input-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	margin: .5rem 0;
}
.input-group > * {
	border-radius: 0.375rem;
}
.input-group > label {
	margin: 0;
}

.input-group>::placeholder {
	color: rgb(var(--c-text), .5);
	opacity: 1;
}

.input-group > *:first-child {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.input-group > *:not(:first-child):not(:last-child) {
	border-left: unset;
	border-right: unset;
	border-radius: 0;
}
.input-group > *:last-child {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
/* Elementos dentro */
.input-group > .form-control,
.input-group > .form-select {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	background-color: rgb(var(--c-background));
	border: 1px solid rgb(var(--c-text), .1);
	color: rgb(var(--c-text));
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
	border-color: rgb(var(--c-primary));
	z-index: 3;
}

/* Texto o label (prepend/append) */
.input-group-text {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	background-color: rgb(var(--c-background));
	border: 1px solid rgb(var(--c-text), .1);
	color: rgb(var(--c-text));
	text-align: center;
	white-space: nowrap;
	border-radius: 0.375rem;
}

/* Botón */
.input-group .btn {
	position: relative;
	z-index: 2;
	border-radius: 0.375rem;
	background-color: rgb(var(--c-primary));
	border: 1px solid rgb(var(--c-text), .1);
	color: rgb(var(--c-background));
	padding: 0.375rem 0.75rem;
	cursor: pointer;
	line-height: 0;
}
.input-group .btn:hover {
	background-color: rgb(var(--c-primary), .85);
}

/* Quitar bordes dobles entre elementos */
.input-group > :not(:first-child):not(.dropdown-menu) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.input-group > :not(:last-child):not(.dropdown-menu) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}







.password-toggle {
	position: relative;
}
.password-toggle input[type="password"] {
	padding-right: 3rem;
}
.password-toggle .toggle-password {
	position: absolute;
	top: 1.8rem;
	right: 2.5rem;
	padding: .5rem;
	cursor: pointer;
	opacity: .5;
	transform: translateY(-50%);
	transition: all 0.3s ease 0s;
	background: rgb(var(--c-text), .1);
	border-radius: 50%;
}

.password-toggle .toggle-password.active {
	background: rgb(var(--c-primary), .5);
	opacity: 1;
}

.badge {
	padding: .25rem .25rem .15rem;
	font-size: .6rem;
	border-radius: .5rem;
	color: rgb(var(--c-light));
	background-color: rgb(var(--bg-color, var(--c-dark)), .5);
}
.badge.primary {
	--bg-color: var(--c-primary);
}
.badge.secondary {
	--bg-color: var(--c-secondary);
}
.badge.tertiary {
	--bg-color: var(--c-tertiary);
}
.badge.success {
	--bg-color: var(--c-success);
}
.badge.danger {
	--bg-color: var(--c-danger);
}
.badge.warning {
	--bg-color: var(--c-warning);
}
.badge.info {
	--bg-color: var(--c-info);
}

.brand {
	width: auto;
	max-width: 15rem;
	margin: auto;
}
.brand.brand-h {
	aspect-ratio: 3 / 1;
}
.brand.brand-v {
	aspect-ratio: 1 / 1;
}

.dark-scheme .brand-h-p {
	content: url("/static/logo/brand-h-s.png");
}
.dark-scheme .brand-h-s {
	content: url("/static/logo/brand-h-p.png");
}
.dark-scheme .brand-h-w {
	content: url("/static/logo/brand-h-b.png");
}
.dark-scheme .brand-h-b {
	content: url("/static/logo/brand-h-w.png");
}

.dark-scheme .brand-v-p {
	content: url("/static/logo/brand-v-s.png");
}
.dark-scheme .brand-v-s {
	content: url("/static/logo/brand-v-s.png");
}
.dark-scheme .brand-v-w {
	content: url("/static/logo/brand-v-b.png");
}
.dark-scheme .brand-v-b {
	content: url("/static/logo/brand-v-w.png");
}
/*.danger {
	--n-color: #CC0000;
}
.warning {
	--n-color: #FF8800;
}
.success {
	--n-color: #007E33;
}
.info {
	--n-color: #0099CC;
}*/

.social-network {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-network>li>a {
	text-decoration: none;
}/* open-sans-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('/assets/fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('/assets/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src: url('/assets/fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('/assets/fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
	--c-primary: 0, 217, 163;
	--c-seccondary: 55, 50, 135;
	--c-tertiary: 231, 187, 65;
	--c-light: 245, 245, 245;
	--c-dark: 0, 0, 0;
	--c-text: 20, 23, 40;
	--c-background: 255, 255, 255;
	--font-family-base: 'Open Sans', Tahoma, Arial, sans-serif;
}
/* nunito-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/nunito-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/nunito-sans-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/nunito-sans-v18-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html.dark-scheme {
	--c-text: 245, 245, 245;
	--c-background: 20, 23, 40;
}

:root {
	--h-w: 65vh;
}

.landing-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	/*height: var(--h-w);*/
	font-family: "Nunito Sans";
  font-size: clamp(14px, 1.5vw, 20px) !important;
	height: var(--v-h, 100dvh);
	padding: 2rem;
	border: 1px solid rgba(var(--c-primary), 0.5);
	scroll-snap-align: start;
}
.landing-hero h1, .landing-hero h2, .landing-hero h3, .landing-hero p, .landing-hero .btn {
	font-family: 'Nunito Sans';
}
.landing-hero h1 {
	color: rgb(var(--c-primary));
	/*font-size: clamp(2rem, 2vw + 1.5rem, 3.5rem);*/
  font-size: clamp(2rem, 5vw, 3rem) !important;
	font-weight: 900;
	text-align: center;
	letter-spacing: -1px;
	margin: 0;
  animation: fadeSlideDown 3s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
	z-index: 145;
}
.landing-hero h2 {
	color: rgb(var(--c-primary));
	/*font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);*/
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
	font-weight: 800;
	text-align: start;
	padding: 1rem;
  animation: fadeSlideDown 3s ease forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 50%;
}
.landing-hero h3 {
	/*font-size: clamp(1.2rem, 1vw + 0.8rem, 1.6rem);*/
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
	font-weight: 100;
	font-size: 1rem;
	height: auto;
	text-align: start;
}
.landing-hero p {
	/*font-size: clamp(0.9rem, 0.8vw + 0.6rem, 1rem);*/
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
	font-style: unset;
	height: auto;
}
.landing-hero .btn {
	font-size: 1.2rem;
	font-style: unset;
	font-weight: 800;
	letter-spacing: 1px;
}
.landing-hero .img-landing {
	width: 100%;
	height: auto;
}
.landing-hero>.content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
	width: 730px;
	margin: 0 auto;
	z-index: 5;
}
.landing-hero>.content.card {
	background: rgb(var(--c-seccondary), .1);
	padding: 2rem;
	border-radius: 2rem;
}
.landing-hero>.description {
	float: right;
}
.landing-hero .item {
	position: relative;
	width: 20rem;
}
.landing-hero .item>.thumb {
	position: absolute;
	top: -4rem;
	left: 0;
}
.landing-hero .btn.hero {
	margin: 2rem 0 .5rem;
	padding: 1rem 2rem;
	border-radius: 2rem;
	width: max-content;
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100px) scale(.75);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/************ ONE ************/
.landing-hero.one {
	--v-h: clamp(35rem, 85dvh, 85dvh);
	overflow: clip;
}
.landing-hero.one>.bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(/images/waves1.svg);
	/*background-attachment: fixed;*/
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;

	animation-delay: 0s;

	animation: bgfx;
	animation-timing-function: ease;
	animation-timeline: scroll();
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-range: 0 65vh;
	will-change: transform;
	transform-style: preserve-3d;
	transform-origin: center center;

	z-index: 0;
}
@keyframes bgfx {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(2) translate(0, 3rem); }
}

.landing-hero.one>.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(var(--c-background), .5);
	z-index: 1;
}


.landing-hero.two {
	--v-h: 75dvh;
	/*background: rgb(var(--c-primary), .1);*/
}
.landing-hero.tree {
	--v-h: 75dvh;
	/*background: rgb(var(--c-primary), .1);*/
}
.landing-hero.four {
	--v-h: 75dvh;
	/*background: rgb(var(--c-primary), .1);*/
}
.landing-hero.five {
	--v-h: 75dvh;
	/*background: rgb(var(--c-primary), .1);*/
}
.landing-hero.six {
	--v-h: 75dvh;
	/*background: rgb(var(--c-primary), .1);*/
}
.landing-hero.seven {
	height: unset;
	/*--v-h: 35dvh;*/
	/*background: rgb(var(--c-primary), .1);*/
}
.landing-hero.eight {
	height: unset;
	/*--v-h: 35dvh;*/
	/*background: rgb(var(--c-primary), .1);*/
}



.landing-hero>.dyn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	align-content: space-between;
	padding: 3rem 2rem;

	overflow: clip;
	pointer-events: none;

	max-height: 26rem;
	margin: calc((var(--v-h) - 26rem) / 2) 0;
}
.landing-hero>.dyn>.box {
	flex: 0 0 5rem;
	width: 10rem;
	height: 10rem;

	display: flex;
	align-items: center;
	justify-content: center;

	transform-origin: center center;

	background: rgba(var(--c-background));
	border-radius: .5rem;
	border: 1px solid rgba(var(--c-primary), 0.5);
	color: rgba(var(--c-primary));
}
.landing-hero>.dyn>.box:nth-child(1) {
	--b-i: 1;
	animation-name: ak-box-1;
}
.landing-hero>.dyn>.box:nth-child(2) {
	--b-i: 2;
	animation-name: ak-box-2;
}
.landing-hero>.dyn>.box:nth-child(3) {
	--b-i: 3;
	animation-name: ak-box-3;
}
.landing-hero>.dyn>.box:nth-child(4) {
	--b-i: 4;
	animation-name: ak-box-4;
}
.landing-hero>.dyn>.box:nth-child(5) {
	--b-i: 5;
	animation-name: ak-box-5;
}
.landing-hero>.dyn>.box:nth-child(6) {
	--b-i: 6;
	animation-name: ak-box-6;
}
.anikay {
	animation-timing-function: ease;
	animation-timeline: scroll();
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-range: 0 65vh;
}

@keyframes ak-box-1 {
	from {
		transform:
			translateX(0rem)
			rotate(10deg);
		;
		opacity: 1;
	}
	to {
		transform:
			translateX(-15rem)
			translateY(-5rem)
			rotate(-45deg);
		;
		opacity: 0;
	}
}
@keyframes ak-box-2 {
	from {
		transform:
			translateX(0rem)
			rotate(-5deg);
		;
		opacity: 1;
	}
	to {
		transform:
			translateX(-20rem)
			rotate(-25deg);
		;
		opacity: 0;
	}
}
@keyframes ak-box-3 {
	from {
		transform:
			translateX(0rem)
			rotate(5deg);
		;
		opacity: 1;
	}
	to {
		transform:
			translateX(-15rem)
			translateY(4rem)
			rotate(25deg);
		;
		opacity: 0;
	}
}
@keyframes ak-box-4 {
	from {
		transform:
			translateX(0rem)
			rotate(-5deg);
		;
		opacity: 1;
	}
	to {
		transform:
			translateX(15rem)
			translateY(-5rem)
			rotate(45deg);
		;
		opacity: 0;
	}
}
@keyframes ak-box-5 {
	from {
		transform:
			translateX(1rem)
			rotate(15deg);
		;
		opacity: 1;
	}
	to {
		transform:
			translateX(15rem)
			rotate(-25deg);
		;
		opacity: 0;
	}
}
@keyframes ak-box-6 {
	from {
		transform:
			translateX(0rem)
			rotate(-5deg);
		;
		opacity: 1;
	}
	to {
		transform:
			translateX(15rem)
			translateY(4rem)
			rotate(25deg);
		;
		opacity: 0;
	}
}

.land {
	margin: -6rem 0 0;
}

@media (min-width: 1920px) and (max-width: 2559px) {
	.landing-hero>.dyn {
		padding: 2.5rem 25rem;
	}
}

@media (max-width: 768px) {
	.landing-hero>.content {
		width: 100%;
	}
	.landing-hero>.dyn {
		display: none;
	}
}.modal {
	border: 0;
	background: transparent;
	padding: 0;
	width: 80%;
	max-width: 30rem;
	color: rgb(var(--c-text));
	box-shadow: 0 .25rem .5rem rgba(var(--c-dark), 0.1);
	opacity: 0;
	outline: none;
	transform: translateY(-3rem) scale(0.75);
	transition: all 0.3s ease 0s;
}
.modal.show {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.modal::backdrop {
	background: rgb(var(--c-text), 0);
	transition: all 0.3s ease 0s;
}
.modal.show::backdrop {
	background: rgb(var(--c-background), .85);
}
.modal.show::focus-visible {
	border: 0;
}
/* Modal styles usando dialog */
.modal-dialog {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	/*max-width: 500px;*/
	border-color: rgb(var(--c-primary));
	border-radius: .5rem;
	border-style: solid;
	border-width: 1px;
	padding: .5rem;
	background: rgb(var(--c-background));
	margin: 0;
}

@media (max-width: 767px) {
	.modal-dialog {
		/*height: calc(100% - 6.5rem);*/
	}
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid rgb(var(--c-primary), .25);
}
.modal-header>.btn.close {
	background: rgb(var(--c-secondary));
	color: rgb(var(--c-text));
	padding: .5rem;
	width: 2rem;
	height: 2rem;
}
.modal-header>.btn.close>.tki {
	vertical-align: unset;
}
.modal-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
}
.modal-body {
	padding: 1rem;
	flex: 1;
	overflow-y: auto;
}
.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1rem;
	border-top: 1px solid rgb(var(--c-primary), .25);
}
/* Tamaños */
.modal.modal-sm {
	max-width: 20rem;
}
.modal.modal-lg {
	max-width: 800px;
}
.modal.modal-xl {
	max-width: 1140px;
}
.modal.modal-fullscreen {
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	border-radius: 0;
}
.modal.offcanvas {
	position: fixed;
	top: 0;
	margin: 0;
	max-width: unset;
	border-width: 0;
	border-radius: 0;
	box-shadow: unset;
	transform: unset;
	z-index: 99999;
}
.modal.offcanvas>.modal-dialog {
	border-radius: 0;
}
.modal.offcanvas>.ghost {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	background: rgb(var(--c-background), .85);
	z-index: -1;
}
.modal.offcanvas.oc-top {
	width: 100vw;
	height: 20rem;
	top: -20rem;
}
.modal.offcanvas.oc-top>.modal-dialog {
	border-width: 0 0 1px;
}
.modal.offcanvas.oc-right {
	width: 20rem;
	height: 100vh;
	left: unset;
	right: -20rem;
}
.modal.offcanvas.oc-right>.modal-dialog {
	border-width: 0 0 0 1px;
}
.modal.offcanvas.oc-bottom {
	width: 100vw;
	height: 20rem;
	top: unset;
	bottom: -20rem;
}
.modal.offcanvas.oc-bottom>.modal-dialog {
	border-width: 1px 0 0;
}
.modal.offcanvas.oc-left {
	width: 20rem;
	height: 100vh;
	left: -20rem;
}
.modal.offcanvas.oc-left>.modal-dialog {
	border-width: 0 1px 0 0;
}
.modal.offcanvas.oc-top.show {
	top: 0;
}
.modal.offcanvas.oc-right.show {
	right: 0;
}
.modal.offcanvas.oc-bottom.show {
	bottom: 0;
}
.modal.offcanvas.oc-left.show {
	left: 0;
}/************************ PAGE PROGRESS ************************/
.page-progress {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgb(var(--c-background));
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(var(--c-light));
	z-index: 99999;
}
.page-progress>.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background-color: rgb(var(--c-light));
	width: 0%;
	z-index: 9999;
	transition: width 0.2s ease;
}
/************************ DIALOG MODAL ************************/
div[x-data="Modal"] {
	position: relative;
	display: inline-block;
}



.switch-scheme {
	position: relative;
	display: block;
	/*--width-of-switch: 2.5rem;
	--height-of-switch: 1.5rem;
	--size-of-icon: 1.2rem;
	--scheme-offset: 0.25rem;*/
	width: var(--width-of-switch, 2.5rem);
	height: var(--height-of-switch, 1.25rem);
	margin: 0 auto;
}

.switch-scheme.name {
	display: flex;
	justify-content: center;
	align-items: center;
	/*margin: unset;*/
	width: auto;
}

.switch-scheme>input {
	opacity: 0;
	width: 0;
	height: 0;
}
.switch-scheme>.graphic {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: var(--width-of-switch, 100%);
	height: var(--height-of-switch, 100%);
	background-color: #4DA6FF;
	border: 1px solid rgb(var(--c-light), .5);
	border-radius: 1.5rem;
}
.switch-scheme>.graphic:before {
	position: absolute;
	content: "";
	height: var(--size-of-icon, 1rem);
	width: var(--size-of-icon, 1rem);
	border-radius: 20px;
	left: var(--scheme-offset, 0.25rem);
	top: 50%;
	transform: translateY(-50%);
	background: linear-gradient(135deg, #fff, #ff8c00 70%);
	transition: .4s;
}
.switch-scheme>.title {
	display: none;
	cursor: pointer;
	padding: 0 0 0 .5rem;
	/*text-transform: uppercase;*/
	font-size: .75rem;
	flex: 0 0 7rem;
	align-self: center;
}
.switch-scheme>input:checked+.graphic {
	background-color: #303136;
}
.switch-scheme>input:checked+.graphic:before {
	left: calc(100% - (var(--size-of-icon, 1.2rem) + var(--scheme-offset, 0.25rem)));
	background: #303136;
	box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
.switch-scheme.name>.graphic {
	position: relative;
	flex: 0 0 2.5rem;
}
.switch-scheme.name>.title {
	display: block;
}
.spinner {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	--c: var(--c-primary);
	border: .25rem solid rgba(var(--c));
	border-left-color: transparent;
	border-radius: 50%;
	animation: spinner 1s linear infinite;
}

@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}.advertising {
	padding: 0;
}
.advertising>.content {
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem .5rem .5rem 2.5rem ;
	background-color: rgb(var(--c-primary),1);
	text-align: center;
	z-index: 999;
}
.advertising>.content>a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: rgb(var(--c-dark));
	width: max-content;
}
.advertising>.content>.btn-close {
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	padding: .5rem;
	line-height: 0;
	cursor: pointer;
	color: rgb(var(--c-background));
}
@media (max-width: 768px) {
	.advertising>.content>a {
		flex-direction: column;
		gap: 0;
	}
	.advertising>.content>.btn-close {
		top: 1rem;
	}
}
@keyframes fadeOutScale {
	0%   { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.9); }
}
.animate-hide {
	animation: fadeOutScale 0.3s ease forwards;
}

@keyframes collapseOut {
	0%   { opacity: 1; max-height: 200px; }
	100% { opacity: 1; max-height: 0; }
}

.animate-collapse {
	overflow: hidden;
	animation: collapseOut 0.4s ease forwards;
}


.navbar {
	position: sticky;
	top: 0;
	width: 100%;
	height: 5rem;
	/*background-color: rgb(var(--c-background), .1);*/
	z-index: 1000;
}
.navbar.sticky {
	background-color: rgb(var(--c-background));
}
.navbar>.container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 90vw;
	height: 100%;
	max-width: 1568px;
	padding: .5rem 1rem .5rem .5rem;
	margin: 1rem auto 0;
	background-color: rgb(var(--c-background), .8);
	border-radius: 2.5rem;
}
.navbar.sticky>.container {
	margin: 0 auto;
	background-color: unset;
	border-radius: 0;
}
.navbar>.container>.home {
	line-height: 0;
}
.navbar>.container>.navigation {
	flex: 1;
}
.navbar>.container>.navigation>.shortcuts {
	display: flex;
	gap: .5rem;
}
.navbar>.container>.navigation>.shortcuts>a {
	padding: .65rem 1rem;
	font-weight: 600;
	color: rgba(var(--c-primary), 1);
	border-radius: 1.5rem;
}
.navbar>.container>.navigation>.shortcuts>a:hover {
	color: rgba(var(--c-background), 1);
	background: rgb(var(--c-text), 1);
}

.navbar>.container>.navigation>.backdrop,
.navbar>.container>.navigation>.ghost {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	pointer-events: none;
	z-index: -1;
	inset: 0;
}
.navbar>.container>.navigation>.ghost {
	left: 20rem;
	width: calc(100% - 20rem);
	z-index: 1;
}
.navbar>.container>.navigation>.backdrop {
	opacity: 0;
	background: rgb(var(--c-background), .85);
}





.navbar>.container>.auth {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
}
.navbar>.container>.auth>.btn {
	border-radius: 1.5rem;
	font-weight: 600;
	/*color: rgb(var(--c-background));*/
	padding: .75rem 1.5rem;
}
.navbar>.container>.auth>.signin {

}
.navbar>.container>.auth>.signup {

}
.navbar>.container>.toggle {
	flex-basis: 4rem;
	height: 4rem;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	--c: var(--c-text);
	border-radius: 2rem;
	color: rgb(var(--c), .85);
	cursor: pointer;
	z-index: 1;
}
.navbar>.container>.toggle::before {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(-5px);
	box-shadow: 0 10px 0 rgb(var(--c));
	transition: all 0.5s ease 0s;
}
.navbar>.container>.toggle::after {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(0px);
	transition: all 0.5s ease 0s;
}
.navbar>.container>.toggle.open::before {
	transform: translateY(0px) rotate(45deg);
	box-shadow: 0 0 0 rgba(var(--c), 0);
}
.navbar>.container>.toggle.open::after {
	transform: translateY(0px) rotate(-45deg);
}
@media (max-width: 768px) {
	.navbar>.container {
		width: 100%;
		padding: .5rem;
		justify-content: space-evenly;
		gap: 1rem;
	}
	.navbar>.container>.home>img {
		object-fit: cover;
		width: 6rem;
	}
	.navbar>.container>.navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		pointer-events: none;
		z-index: 100;
	}
	.navbar>.container>.navigation>.shortcuts {
		flex-direction: column;
		gap: 1rem;
		padding: 2rem;
		width: 20rem;
		height: 100dvh;
		background: rgb(var(--c-background));
		transform: translateX(-20rem);
		border-right: 1px solid rgb(var(--c-primary));
	}
	.navbar>.container>.navigation.open>.shortcuts {
		pointer-events: auto;
		transform: translateX(0);
	}
	.navbar>.container>.navigation.open>.ghost {
		pointer-events: auto;
		cursor: unset;
	}
	.navbar>.container>.navigation.open>.backdrop {
		opacity: 1;
	}




	.navbar>.container>.auth {
		gap: .25rem;
		flex: 1;
	}
	.navbar>.container>.auth>.btn {
		border-radius: 1rem;
		padding: .5rem 1rem;
	}
	.navbar>.container>.toggle {
		display: flex;
	}
}


section.page {
	display: flex;
	flex-direction: column;
	height: 100dvh;
}
section.page>.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
section.page>.content>img{
	/*flex: 1;*/
}
section.page>.content>h3 {
	margin: 1rem;
	text-align: center;
}
section.page>.content>p {
	max-width: unset;
	margin: 1rem;
}
section.page>.footer {
	width: 100%;
	text-align: center;
	background: rgb(var(--c-dark));
	color: rgb(var(--c-light), .75);
	font-size: .8rem;
	padding: 1rem;
}









/*app-pages.css*/
app-page {
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	/*justify-content: center;*/
/*	width: 100dvw;
	height: 100dvh;
	background: rgb(var(--c-background));
	overflow-x: hidden;
	overflow-y: auto;*/
}

tk-header {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .25rem;

	width: 100%;
	height: 5rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1rem 2rem;

	transition: all 0.25s ease 0s;
	overflow: hidden;
	z-index: 999;
	--bs-dropdown-border-width: 0;
	--bs-dropdown-bg: unset;
	--bs-dropdown-item-padding-x: 2.25rem;
	--bh: 4rem;
}
tk-header:before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--bh);
	background: rgb(var(--c-background), 0);
	transition: all 0.3s ease 0s;
	z-index: -1;
}

tk-header.modal-fullscreen {
	display: none;
}

tk-header.fixed {
	position: sticky;
	top: 0;
	height: var(--bh);
}
tk-header>.toggle {
	flex-basis: 4rem;
	height: 4rem;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	--c: var(--c-text);
	color: rgb(var(--c), .85);
	cursor: pointer;
	z-index: 1;
}
tk-header>.toggle::before {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(-5px);
	box-shadow: 0 10px 0 rgb(var(--c));
	transition: all 0.5s ease 0s;
}
tk-header>.toggle::after {
	content: "";
	position: absolute;
	width: 1rem;
	height: .1rem;
	background: rgb(var(--c));
	transform: translateY(0px);
	transition: all 0.5s ease 0s;
}
tk-header>.toggle.open::before {
	transform: translateY(0px) rotate(45deg);
	box-shadow: 0 0 0 rgba(var(--c), 0);
}
tk-header>.toggle.open::after {
	transform: translateY(0px) rotate(-45deg);
}
tk-header>.home {
	flex: 1;
	text-align: center;
	z-index: 1;
}
tk-header>.home>img {
	transition: all 0.3s ease 0s;
	transform-origin: center;
	aspect-ratio: 3 / 1;
}
[data-bs-theme=dark] tk-header>.home>img {
	content: url("/static/logo/brand-h-s.png");
}
tk-header>.space {
	flex: 1;
	display: flex;
	justify-content: center;
}
tk-header>.shortcuts {
	display: flex;
	padding: .5rem .5rem 1rem;
}
tk-header>.shortcuts>.btn {
	position: relative;
	flex-basis: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
tk-header>.shortcuts>.btn>.badge {
	position: absolute;
	top: 0;
	right: 0;
}