* {
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
	font-family: var(--font-p-family);
	text-size-adjust: 100%; /* desactiva el escalado automático */
	-webkit-text-size-adjust: 100%; /* Desactiva el escalado automático */
}





/* #################################################################  BRANDING  ################################################################# */

@font-face {
font-family: 'h1';
src: url(/assets/nexa/TTF/Nexa-Heavy.ttf);
font-display: swap;}

@font-face {
font-family: 'h2';
src: url(/assets/nexa/TTF/Nexa-Bold.ttf);
font-display: swap;}

@font-face {
font-family: 'h3';
src: url(/assets/nexa/TTF/Nexa-Regular.ttf);
font-display: swap;}

@font-face {
font-family: 'h4';
src: url(/assets/nexa/TTF/Nexa-Bold.ttf);
font-display: swap;}

@font-face {
font-family: 'p';
src: url(/assets/nexa/TTF/Nexa-Book.ttf);
font-display: swap;}

@font-face {
font-family: 'p-bold';
src: url(/assets/nexa/TTF/Nexa-Bold.ttf);
font-display: swap;}

@font-face {
font-family: 'p-italic';
src: url(/assets/nexa/TTF/Nexa-BookItalic.ttf);
font-display: swap;}

@font-face {
font-family: 'p-bolditalic';
src: url(/assets/nexa/TTF/Nexa-BoldItalic.ttf);
font-display: swap;}

/* Fondos. */
:root {
	--bg-light-color-1: #FFFFFF;
	--bg-light-color-2: #F5F5F5;
	--bg-dark-color-1: #000000;
	--bg-dark-color-2: #181818;
}

/* Brand. */
:root {
	--brand-color: #FF4739;
	--brand-color-low-contrast: #FF908D;
	--brand-text-color-to-bg-brand-color: #FFFFFF;
}

/* Tipografias. */
:root {
	--font-h1-family: "h1";
	--font-h1-size-1: 2.5rem;
	--font-h1-size-2: 3.5rem;
	--font-h1-size: var(--font-h1-size-1);
	--font-h1-color-bg-light: #000000;
	--font-h1-color-bg-dark: #FFFFFF;
	--font-h2-family: "h2";
	--font-h2-size-1: 1.65rem;
	--font-h2-size-2: 2.3rem;
	--font-h2-size: var(--font-h2-size-1);
	--font-h2-color-bg-light: #181818;
	--font-h2-color-bg-dark: #F5F5F5;
	--font-h3-family: "h3";
	--font-h3-size-1: 1.2rem;
	--font-h3-size-2: 1.6rem;
	--font-h3-size: var(--font-h3-size-1);
	--font-h3-color-bg-light: #FF4739;
	--font-h3-color-bg-dark: #FF4739;
	--font-h4-family: "h4";
	--font-h4-size-1: 1rem;
	--font-h4-size-2: 1.2rem;
	--font-h4-size: var(--font-h4-size-1);
	--font-h4-color-bg-light: #181818;
	--font-h4-color-bg-dark: #F5F5F5;
	--font-p-family: "p";
	--font-p-bold-family: "p-bold";
	--font-p-italic-family: "p-italic";
	--font-p-bolditalic-family: "p-bolditalic";
	--font-text-size-1: 0.9rem;
	--font-text-size-2: 1rem;
	--font-text-size: var(--font-text-size-1);
	--font-text-color-bg-light: #575757;
	--font-textbold-color-bg-light: #000000;
	--font-text-color-bg-dark: #BCBCBC;
	--font-textbold-color-bg-dark: #FFFFFF;
	--font-note-size-1: 0.7rem;
	--font-note-size-2: 0.8rem;
	--font-note-size: var(--font-note-size-1);
	--font-note-color-bg-light: #7C7C7C;
	--font-notebold-color-bg-light: #575757;
	--font-note-color-bg-dark: #7C7C7C;
	--font-notebold-color-bg-dark: #BCBCBC;
	--font-ico-size-1: 16px;
	--font-ico-size-2: 20px;
	--font-ico-size: var(--font-ico-size-1);
	--font-ico-color-bg-light: #181818;
	--font-ico-color-bg-dark: #F5F5F5;
}

/* Forms y buttons. */
:root {
	--border-radius: 5px; /* Si se cambia, el svg del checkbox se descuadra. */
	--form-field-height-1: 45px;
	--form-field-height-2: 53px;
	--form-field-height: var(--form-field-height-1);
	--form-field-height-sm-1: 25px;
	--form-field-height-sm-2: 30px;
	--form-field-height-sm: var(--form-field-height-sm-1);
	--form-bg-color-bg-light: #FFFFFF;
	--form-bg-color-bg-dark: #181818;
	--form-field-padding: 16px;
	--form-text-color-bg-light: #575757;
	--form-text-color-bg-dark: #BCBCBC;
	--form-ico-size-1: 12px;
	--form-ico-size-2: 15px;
	--form-ico-size: var(--form-ico-size-1);
	--form-ico-color-bg-light: #7C7C7C;
	--form-ico-color-bg-dark: #7C7C7C;
	--form-control-height-1: 17px;
	--form-control-height-2: 21px;
	--form-control-height: var(--form-control-height-1);
	--form-border-size: 1px;
	--form-border-color-bg-light: #D9D9D9;
	--form-border-color-bg-dark: #373737;
	--form-border-size-hover: 2px;
	--form-border-color-hover: #FF908D;
	--form-border-size-focus: 2px;
	--form-border-color-focus: #FF4739;
	--form-shadow-size-focus: 8px;
	--form-shadow-color-focus: #FF4739;
	--button-1-text-color: #FFFFFF;
	--button-1-bg-color: #575757;
	--button-1-bg-color-hover: #BCBCBC;
	--button-control-bg-color-hover-bg-light: #F5F5F5;
	--button-control-bg-color-hover-bg-dark: #000000;
}

/* Animaciones. */
:root {
	--transition-resize: 0.5s;
	--transition-interactive: 0.3s;
}

@media (min-width: 600px) {
	:root {
		--font-h1-size: var(--font-h1-size-2);
		--font-h2-size: var(--font-h2-size-2);
		--font-h3-size: var(--font-h3-size-2);
		--font-h4-size: var(--font-h4-size-2);
		--font-text-size: var(--font-text-size-2);
		--font-note-size: var(--font-note-size-2);
		--font-ico-size: var(--font-ico-size-2);
		--form-field-height: var(--form-field-height-2);
		--form-field-height-sm: var(--form-field-height-sm-2);
		--form-ico-size: var(--form-ico-size-2);
		--form-control-height: var(--form-control-height-2);
	}
}


/* ········································ BGS ········································ */

.bg-light-1 {background-color: var(--bg-light-color-1);}
.bg-light-2 {background-color: var(--bg-light-color-2);}
.bg-dark-1 {background-color: var(--bg-dark-color-1);}
.bg-dark-2 {background-color: var(--bg-dark-color-2);}


/* ········································ TEXTS, LOGOS E ICONOS ········································ */

/* Generales */
:where(h1) {font-weight: normal; font-family: var(--font-h1-family); font-size: var(--font-h1-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(h2) {font-weight: normal; font-family: var(--font-h2-family); font-size: var(--font-h2-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(h3) {font-weight: normal; font-family: var(--font-h3-family); font-size: var(--font-h3-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(h4) {font-weight: normal; font-family: var(--font-h4-family); font-size: var(--font-h4-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(a, abbr) {color: inherit; text-decoration: none;}
:where(p:not(.note):not(.note-brand), a, abbr, span) {font-family: var(--font-p-family); font-size: var(--font-text-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(p.note, p.note-brand) {font-family: var(--font-p-family); font-size: var(--font-note-size); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(b, strong) {font-family: var(--font-p-bold-family);}
:where(i, em) {font-family: var(--font-p-italic-family);}
:where(b i, i b, b em, em b, strong i, i strong, strong em, em strong) {font-family: var(--font-p-bolditalic-family);}
:where(.required, .required-brand) {font-family: var(--font-p-bold-family);}
:where(.hover-underline:hover) {text-decoration: underline;}
:where(svg) {overflow: visible; transition: width var(--transition-resize) ease, height var(--transition-resize) ease, min-width var(--transition-resize) ease, min-height var(--transition-resize) ease,fill var(--transition-interactive) ease;}
:where(.ico) {width: var(--font-ico-size); min-width: var(--font-ico-size); height: var(--font-ico-size); min-height: var(--font-ico-size);}


/* Colores sobre blanco */
:where(.light-section h1) {color: var(--font-h1-color-bg-light);}
:where(.light-section h2) {color: var(--font-h2-color-bg-light);}
:where(.light-section h3) {color: var(--font-h3-color-bg-light);}
:where(.light-section h4) {color: var(--font-h4-color-bg-light);}
:where(.light-section p:not(.note):not(.note-brand), .light-section a, .light-section abbr, .light-section span) {color: var(--font-text-color-bg-light);}
:where(.light-section p:not(.note):not(.note-brand) b, .light-section p:not(.note):not(.note-brand) strong) {color: var(--font-textbold-color-bg-light);}
:where(.light-section p.note) {color: var(--font-note-color-bg-light);}
:where(.light-section p.note b, .light-section p.note strong) {color: var(--font-notebold-color-bg-light);}
:where(.light-section .required) {color: var(--font-h1-color-bg-light);}
:where(.light-section h1 .logo, .light-section h1 .ico) {fill: var(--font-h1-color-bg-light);}
:where(.light-section .logo:not(h1 *), .light-section .ico:not(h1 *)) {fill: var(--font-ico-color-bg-light);}
:where(.light-section svg.ico-text) {fill: var(--font-text-color-bg-light);}
:where(.light-section .hoverable:hover p:not(.note):not(.note-brand), .light-section .hoverable:hover a, .light-section .hoverable:hover abbr, .light-section .hoverable:hover span) {color: var(--font-textbold-color-bg-light);}
:where(.light-section .hoverable:hover svg) {fill: var(--font-textbold-color-bg-light);}


/* Colores sobre negro */
:where(.dark-section h1) {color: var(--font-h1-color-bg-dark);}
:where(.dark-section h2) {color: var(--font-h2-color-bg-dark);}
:where(.dark-section h3) {color: var(--font-h3-color-bg-dark);}
:where(.dark-section h4) {color: var(--font-h4-color-bg-dark);}
:where(.dark-section p:not(.note):not(.note-brand), .dark-section a, .dark-section abbr, .dark-section span) {color: var(--font-text-color-bg-dark);}
:where(.dark-section p:not(.note):not(.note-brand) b, .dark-section p:not(.note):not(.note-brand) strong) {color: var(--font-textbold-color-bg-dark);}
:where(.dark-section p.note) {color: var(--font-note-color-bg-dark);}
:where(.dark-section p.note b, .dark-section p.note strong) {color: var(--font-notebold-color-bg-dark);}
:where(.dark-section .required) {color: var(--font-h1-color-bg-dark)}
:where(.dark-section h1 .logo, .dark-section h1 .ico) {fill: var(--font-h1-color-bg-dark);}
:where(.dark-section .logo:not(h1 *), .dark-section .ico:not(h1 *)) {fill: var(--font-ico-color-bg-dark);}
:where(.dark-section svg.ico-text) {fill: var(--font-text-color-bg-dark);}
:where(.dark-section .hoverable:hover p:not(.note):not(.note-brand), .dark-section .hoverable:hover a, .dark-section .hoverable:hover abbr, .dark-section .hoverable:hover span) {color: var(--font-textbold-color-bg-dark);}
:where(.dark-section .hoverable:hover svg) {fill: var(--font-textbold-color-bg-dark);}


/* Branding */
:where(p.note-brand) {color: var(--brand-color-low-contrast);}
:where(.note-brand b, p.note-brand strong) {color: var(--brand-color);}
:where(.required-brand) {color: var(--brand-color) !important;}
:where(.punto-brand) {fill: var(--brand-color); width: 6px; min-width: 6px; height: 6px; min-height: 6px; transition: width var(--transition-resize) ease, height var(--transition-resize) ease;}
:where(.check-brand) {fill: var(--brand-color); width: 12px; min-width: 12px; height: 12px; min-height: 12px; transition: width var(--transition-resize) ease, height var(--transition-resize) ease;}


/* ········································ A HREF | FORM BUTTON TYPE: SUMBIT ········································ */

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: var(--form-field-height);
	min-width: 140px;
	padding: 0px var(--form-field-padding);
	border-radius: var(--border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-h4-size);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		background-color var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.light-section .btn {box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);}
.dark-section .btn {box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);}

.btn.btn-1 {color: var(--button-1-text-color); background-color: var(--button-1-bg-color);}
.btn.btn-1:not(.unselectable):hover {background-color: var(--button-1-bg-color-hover);}

.btn.btn-brand {color: var(--brand-text-color-to-bg-brand-color); background-color: var(--brand-color);}
.btn.btn-brand:not(.unselectable):hover {background-color: var(--brand-color-low-contrast);}

.light-section .btn.control {color: var(--font-textbold-color-bg-light); background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--form-border-size) var(--form-border-color-bg-light), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.light-section .btn.control:not(.unselectable):hover {background-color: var(--button-control-bg-color-hover-bg-light);}
.dark-section .btn.control {color: var(--font-textbold-color-bg-dark); background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--form-border-size) var(--form-border-color-bg-dark), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section .btn.control:not(.unselectable):hover {background-color: var(--button-control-bg-color-hover-bg-dark);}

.btn.unselectable {cursor: not-allowed; opacity: 0.5;}


/* ········································ FORM SELECT ········································ */

select {
	min-width: 150px;
	height: var(--form-field-height);
	padding: 0px calc(var(--form-field-padding) * 2 + var(--form-ico-size)) 0px var(--form-field-padding);
	border-radius: var(--border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease,
		background-image var(--transition-interactive) ease;
	background-repeat: no-repeat;
	background-position: right var(--form-field-padding) top 0px;
	background-size: var(--form-ico-size) var(--form-field-height);
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section select {color: var(--form-text-color-bg-light); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%237C7C7C'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--select-border-size, var(--form-border-size)) var(--select-border-color, var(--form-border-color-bg-light)), 0px 0px var(--select-shadow-size, 0px) 0px var(--select-shadow-color, transparent), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.light-section select option {color: var(--form-text-color-bg-light);}
.dark-section select {color: var(--form-text-color-bg-dark); background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%237C7C7C'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--select-border-size, var(--form-border-size)) var(--select-border-color, var(--form-border-color-bg-dark)), 0px 0px var(--select-shadow-size, 0px) 0px var(--select-shadow-color, transparent), 0px 0px 10px 0px rgba(255,255,255,0.05);}
.dark-section select option {color: var(--form-text-color-bg-dark);}

select:hover {
	--select-border-size: var(--form-border-size-hover);
	--select-border-color: var(--form-border-color-hover);
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%23FF908D'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente. */
}

select:focus {
	--select-border-size: var(--form-border-size-focus);
	--select-border-color: var(--form-border-color-focus);
	--select-shadow-size: var(--form-shadow-size-focus);
	--select-shadow-color: var(--form-shadow-color-focus);
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%23FF4739'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente. */
}


/* ········································ FORM TEXTAREA ········································ */

/* Modifica el estilo del texto del marcador de posición (el texto que aparece dentro de un campo antes de escribir. */
/* textarea::placeholder {color: ;} */

textarea {
	padding: 7px var(--form-field-padding);
	border-radius: var(--border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	transition:
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section textarea {color: var(--form-text-color-bg-light); background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--textarea-border-size, var(--form-border-size)) var(--textarea-border-color, var(--form-border-color-bg-light)), 0px 0px var(--textarea-shadow-size, 0px) 0px var(--textarea-shadow-color, transparent), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section textarea {color: var(--form-text-color-bg-dark); background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--textarea-border-size, var(--form-border-size)) var(--textarea-border-color, var(--form-border-color-bg-dark)), 0px 0px var(--textarea-shadow-size, 0px) 0px var(--textarea-shadow-color, transparent), 0px 0px 10px 0px rgba(255,255,255,0.05);}

textarea:hover {
	--textarea-border-size: var(--form-border-size-hover);
	--textarea-border-color: var(--form-border-color-hover);
}

textarea:focus {
	--textarea-border-size: var(--form-border-size-focus);
	--textarea-border-color: var(--form-border-color-focus);
	--textarea-shadow-size: var(--form-shadow-size-focus);
	--textarea-shadow-color: var(--form-shadow-color-focus);
}


/* ········································ FORM INPUT TYPE: TEXT, PASSWORD, EMAIL, SEARCH, TEL, URL ········································ */

/* Modifica el estilo del texto del marcador de posición (el texto que aparece dentro de un campo antes de escribir. */
/* input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=url]::placeholder {color: ;} */

input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=url] {
	height: var(--form-field-height);
	padding: 0px var(--form-field-padding);
	border-radius: var(--border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section input[type=text], .light-section input[type=password], .light-section input[type=email], .light-section input[type=search], .light-section input[type=tel], .light-section input[type=url] {color: var(--form-text-color-bg-light); background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-bg-light)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section input[type=text], .dark-section input[type=password], .dark-section input[type=email], .dark-section input[type=search], .dark-section input[type=tel], .dark-section input[type=url] {color: var(--form-text-color-bg-dark); background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-bg-dark)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px 10px 0px rgba(255,255,255,0.05);}

input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=url]:hover {
	--input-border-size: var(--form-border-size-hover);
	--input-border-color: var(--form-border-color-hover);
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=url]:focus {
	--input-border-size: var(--form-border-size-focus);
	--input-border-color: var(--form-border-color-focus);
	--input-shadow-size: var(--form-shadow-size-focus);
	--input-shadow-color: var(--form-shadow-color-focus);
}


/* ········································ FORM INPUT TYPE: DATE ········································ */

input[type=date] {
	position: relative;
	height: var(--form-field-height);
	padding: 0px calc(var(--form-field-padding) * 2 + var(--form-ico-size) - 22px) 0px var(--form-field-padding);
	border-radius: var(--border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease,
		background-image var(--transition-interactive) ease;
	background-repeat: no-repeat;
	background-position: right var(--form-field-padding) top 0px;
	background-size: var(--form-ico-size) var(--form-field-height);
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section input[type=date] {color: var(--form-text-color-bg-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5' fill='%237C7C7C'%3E%3Cpath d='M16.75,19.5H2.75c-1.52,0-2.75-1.23-2.75-2.75V2.75C0,1.23,1.23,0,2.75,0h14c1.52,0,2.75,1.23,2.75,2.75v14c0,1.52-1.23,2.75-2.75,2.75ZM2.75,1.5c-.69,0-1.25.56-1.25,1.25v14c0,.69.56,1.25,1.25,1.25h14c.69,0,1.25-.56,1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25H2.75Z'/%3E%3Cpath d='M18.75,6.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h18c.41,0,.75.34.75.75s-.34.75-.75.75Z'/%3E%3Ccircle cx='5.75' cy='9.75' r='.8'/%3E%3Ccircle cx='9.75' cy='9.75' r='.8'/%3E%3Ccircle cx='13.75' cy='9.75' r='.8'/%3E%3Ccircle cx='5.75' cy='13.75' r='.8'/%3E%3Ccircle cx='9.75' cy='13.75' r='.8'/%3E%3C/svg%3E"); background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-bg-light)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section input[type=date] {color: var(--form-text-color-bg-dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5' fill='%237C7C7C'%3E%3Cpath d='M16.75,19.5H2.75c-1.52,0-2.75-1.23-2.75-2.75V2.75C0,1.23,1.23,0,2.75,0h14c1.52,0,2.75,1.23,2.75,2.75v14c0,1.52-1.23,2.75-2.75,2.75ZM2.75,1.5c-.69,0-1.25.56-1.25,1.25v14c0,.69.56,1.25,1.25,1.25h14c.69,0,1.25-.56,1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25H2.75Z'/%3E%3Cpath d='M18.75,6.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h18c.41,0,.75.34.75.75s-.34.75-.75.75Z'/%3E%3Ccircle cx='5.75' cy='9.75' r='.8'/%3E%3Ccircle cx='9.75' cy='9.75' r='.8'/%3E%3Ccircle cx='13.75' cy='9.75' r='.8'/%3E%3Ccircle cx='5.75' cy='13.75' r='.8'/%3E%3Ccircle cx='9.75' cy='13.75' r='.8'/%3E%3C/svg%3E"); background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color-bg-dark)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px 10px 0px rgba(255,255,255,0.05);}

input[type=date]:hover {
	--input-border-size: var(--form-border-size-hover);
	--input-border-color: var(--form-border-color-hover);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5' fill='%23FF908D'%3E%3Cpath d='M16.75,19.5H2.75c-1.52,0-2.75-1.23-2.75-2.75V2.75C0,1.23,1.23,0,2.75,0h14c1.52,0,2.75,1.23,2.75,2.75v14c0,1.52-1.23,2.75-2.75,2.75ZM2.75,1.5c-.69,0-1.25.56-1.25,1.25v14c0,.69.56,1.25,1.25,1.25h14c.69,0,1.25-.56,1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25H2.75Z'/%3E%3Cpath d='M18.75,6.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h18c.41,0,.75.34.75.75s-.34.75-.75.75Z'/%3E%3Ccircle cx='5.75' cy='9.75' r='.8'/%3E%3Ccircle cx='9.75' cy='9.75' r='.8'/%3E%3Ccircle cx='13.75' cy='9.75' r='.8'/%3E%3Ccircle cx='5.75' cy='13.75' r='.8'/%3E%3Ccircle cx='9.75' cy='13.75' r='.8'/%3E%3C/svg%3E");
}

input[type=date]:focus {
	--input-border-size: var(--form-border-size-focus);
	--input-border-color: var(--form-border-color-focus);
	--input-shadow-size: var(--form-shadow-size-focus);
	--input-shadow-color: var(--form-shadow-color-focus);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 19.5' fill='%23FF4739'%3E%3Cpath d='M16.75,19.5H2.75c-1.52,0-2.75-1.23-2.75-2.75V2.75C0,1.23,1.23,0,2.75,0h14c1.52,0,2.75,1.23,2.75,2.75v14c0,1.52-1.23,2.75-2.75,2.75ZM2.75,1.5c-.69,0-1.25.56-1.25,1.25v14c0,.69.56,1.25,1.25,1.25h14c.69,0,1.25-.56,1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25H2.75Z'/%3E%3Cpath d='M18.75,6.5H.75c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h18c.41,0,.75.34.75.75s-.34.75-.75.75Z'/%3E%3Ccircle cx='5.75' cy='9.75' r='.8'/%3E%3Ccircle cx='9.75' cy='9.75' r='.8'/%3E%3Ccircle cx='13.75' cy='9.75' r='.8'/%3E%3Ccircle cx='5.75' cy='13.75' r='.8'/%3E%3Ccircle cx='9.75' cy='13.75' r='.8'/%3E%3C/svg%3E");
}

input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	right: var(--form-field-padding);
	cursor: pointer;
	opacity: 0;
}

/* ········································ FORM INPUT TYPE: NUMBER ········································ */

.number {
	display: inline-flex;
	justify-content: space-between;
	height: var(--form-field-height);
	border-radius: var(--border-radius);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
}
.light-section .number {background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--number-border-size, var(--form-border-size)) var(--number-border-color, var(--form-border-color-bg-light)), 0px 0px var(--number-shadow-size, 0px) 0px var(--number-shadow-color, transparent), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section .number {background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--number-border-size, var(--form-border-size)) var(--number-border-color, var(--form-border-color-bg-dark)), 0px 0px var(--number-shadow-size, 0px) 0px var(--number-shadow-color, transparent), 0px 0px 10px 0px rgba(255,255,255,0.05);}

.number:hover {
	--number-border-size: var(--form-border-size-hover);
	--number-border-color: var(--form-border-color-hover);
}

.number:focus-within {
	--number-border-size: var(--form-border-size-focus);
	--number-border-color: var(--form-border-color-focus);
	--number-shadow-size: var(--form-shadow-size-focus);
	--number-shadow-color: var(--form-shadow-color-focus);
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; margin: 0;}
input[type=number] {
	text-align: center;
	background-color: transparent;
	width: 45px;
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section input[type=number] {color: var(--form-text-color-bg-light);}
.dark-section input[type=number] {color: var(--form-text-color-bg-dark);}

.number button {
	background-color: transparent;
	padding: 0px var(--form-field-padding);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.number button svg {
	width: var(--form-ico-size);
	height: var(--form-field-height);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		fill var(--transition-interactive) ease;
}
.light-section .number button svg {fill: var(--form-ico-color-bg-light);}
.dark-section .number button svg {fill: var(--form-ico-color-bg-dark);}

.number button:hover svg {fill: var(--form-border-color-focus);}


/* ········································ FORM SM ········································ */

.sm {
	height: var(--form-field-height-sm) !important;
	font-size: var(--font-note-size) !important;
	min-width: unset !important;
}

select.sm, input[type=date].sm {
	background-size: var(--form-ico-size) var(--form-field-height-sm) !important;
}

.number.sm button svg {
	height: var(--form-field-height-sm) !important;
}


/* ········································ FORM INPUT TYPE: CHECKBOX ········································ */

.container-checkbox, label.checkbox {
	display: flex;
	align-items: center;
	gap: 7px;
}
label.checkbox {cursor: pointer;}
label.checkbox input[type=checkbox], label.checkbox input[type=checkbox] + svg {
	width: var(--form-control-height);
	min-width: var(--form-control-height);
	height: var(--form-control-height);
	min-height: var(--form-control-height);
}
label.checkbox input[type=checkbox] {
	border-radius: var(--border-radius);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section label.checkbox input[type=checkbox] {background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--checkbox-border-size, var(--form-border-size)) var(--checkbox-border-color, var(--form-border-color-bg-light)), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section label.checkbox input[type=checkbox] {background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--checkbox-border-size, var(--form-border-size)) var(--checkbox-border-color, var(--form-border-color-bg-dark)), 0px 0px 10px 0px rgba(255,255,255,0.05);}

label.checkbox:hover {
	--checkbox-border-size: var(--form-border-size-hover);
	--checkbox-border-color: var(--form-border-color-hover);
}

label.checkbox input[type=checkbox]:checked {
	--checkbox-border-size: var(--form-border-size-focus);
	--checkbox-border-color: var(--form-border-color-focus);
}

label.checkbox input[type=checkbox] + svg {
	position: absolute;
	fill: none;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: var(--form-border-color-focus);
	stroke-dasharray: var(--svg-array, 86.12);
	stroke-dashoffset: var(--svg-offset, 86.12);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		stroke-dasharray var(--transition-interactive) ease,
		stroke-dashoffset var(--transition-interactive) ease;
}

label.checkbox input[type=checkbox]:checked + svg {
	--svg-array: 16.1 86.12;
	--svg-offset: 102.22;
}


/* ········································ FORM INPUT TYPE: CHECKBOX TOGGLE ········································ */

:root {
	--checkbox-toggle-width: 29px;
}

@media (min-width: 600px) {
	:root {
		--checkbox-toggle-width: 36px;
	}
}

.container-checkbox-toggle, label.checkbox-toggle {
	display: flex;
	align-items: center;
	gap: 7px;
}
label.checkbox-toggle {cursor: pointer;}

/* Contenedor */
label.checkbox-toggle input[type=checkbox] {
	position: relative;
	width: var(--checkbox-toggle-width);
	height: var(--form-control-height);
	border-radius: 50px;
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		background-color var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.light-section label.checkbox-toggle input[type=checkbox] {background-color: var(--form-border-color-bg-light); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section label.checkbox-toggle input[type=checkbox] {background-color: var(--form-border-color-bg-dark); box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.05);}

label.checkbox-toggle:hover input[type=checkbox] {
	background-color: var(--form-border-color-hover);
}

/* Bola */
label.checkbox-toggle input[type=checkbox]:before {
	content: "";
	position: absolute;
	width: calc(var(--form-control-height) - 6px);
	height: calc(var(--form-control-height) - 6px);
	top: calc(6px / 2);
	left: 4px;
	border-radius: 50%;
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		left var(--transition-interactive) linear;
}
.light-section label.checkbox-toggle input[type=checkbox]:before {background-color: var(--bg-light-color-1);}
.dark-section label.checkbox-toggle input[type=checkbox]:before {background-color: var(--bg-dark-color-2);}

label.checkbox-toggle input[type=checkbox]:checked {
	background-color: var(--form-border-color-focus);
}

label.checkbox-toggle input[type=checkbox]:checked:before {
	left: calc(var(--checkbox-toggle-width) - (var(--form-control-height) - 6px) - 4px);
}


/* ········································ FORM INPUT TYPE: RADIO ········································ */

.container-radio, label.radio {
	display: flex;
	align-items: center;
	gap: 7px;
}
label.radio {cursor: pointer;}
label.radio input[type=radio] {display: none;}
label.radio input[type=radio] + div {
	width: var(--form-control-height);
	min-width: var(--form-control-height);
	height: var(--form-control-height);
	min-height: var(--form-control-height);
	border-radius: 50%;
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		background-color var(--transition-interactive) ease,
		box-shadow var(--transition-interactive) ease;
}
.light-section label.radio input[type=radio] + div {background-color: var(--form-bg-color-bg-light); box-shadow: inset 0px 0px 0px var(--radio-border-size, var(--form-border-size)) var(--radio-border-color, var(--form-border-color-bg-light)), 0px 0px 10px 0px rgba(0,0,0,0.05);}
.dark-section label.radio input[type=radio] + div {background-color: var(--form-bg-color-bg-dark); box-shadow: inset 0px 0px 0px var(--radio-border-size, var(--form-border-size)) var(--radio-border-color, var(--form-border-color-bg-dark)), 0px 0px 10px 0px rgba(255,255,255,0.05);}

label.radio:hover {
	--radio-border-size: var(--form-border-size-hover);
	--radio-border-color: var(--form-border-color-hover);
}

label.radio input[type=radio]:checked + div {
	background-color: var(--form-border-color-focus);
}
.light-section label.radio input[type=radio]:checked + div {
	box-shadow: inset 0px 0px 0px var(--form-border-size-focus) var(--form-border-color-focus), inset 0px 0px 0px calc(var(--form-border-size-focus) + 3px) var(--form-bg-color-bg-light), 0px 0px 10px 0px rgba(0,0,0,0.05);
}
.dark-section label.radio input[type=radio]:checked + div {
	box-shadow: inset 0px 0px 0px var(--form-border-size-focus) var(--form-border-color-focus), inset 0px 0px 0px calc(var(--form-border-size-focus) + 3px) var(--form-bg-color-bg-dark), 0px 0px 10px 0px rgba(255,255,255,0.05);
}


/* ········································ BADGE ········································ */

.badge {
	height: 24px;
	width: fit-content;
	display: flex;
	align-items: center;
	padding: 0px 10px;
	border-radius: 50px;
	font-family: var(--font-p-bold-family);
	font-size: var(--font-note-size);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		background-color var(--transition-interactive) ease,
		box-shadow var(--transition-interactive) ease;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
.badge.selectable {
	cursor: pointer;
}

.badge.on {
	background-color: #DCFCE7;
	color: #166534;
	box-shadow: inset 0px 0px 0px 1px #86EFAC;
}
.badge.on.selectable:hover {
	background-color: #86EFAC;
}

.badge.off {
	background-color: #FFF0EF;
	color: #FF4739;
	box-shadow: inset 0px 0px 0px 1px #FFC9C4;
}

.badge.off.selectable:hover {
	background-color: #FFC9C4;
}


/* ········································ RESPONSIVE ········································ */

@media (min-width: 600px) {
	.punto-brand {width: 8px; min-width: 8px; height: 8px; min-height: 8px;}
	.check-brand {width: 15px; min-width: 15px; height: 15px; min-height: 15px;}
}