@layer reset {
	@-webkit-viewport {
		width: device-width;
	}
	@-moz-viewport {
		width: device-width;
	}
	/* @-ms-viewport{width:device-width} */
	@-o-viewport {
		width: device-width;
	}
	@viewport {
		width: device-width;
	}

	:root {
		/* Fonts */
		--main-font: "Roboto", sans-serif;

		--f-w-regular: 400;
		--f-w-medium: 500;
		--f-w-semibold: 600;
		--f-w-bold: 700;
		--f-w-extrabold: 800;
		--f-w-black: 900;

		/* COLORS */
		--white: rgba(255, 255, 251, 1);
		--salmon: rgba(255, 17, 58, 1);
		--salmon-light: rgba(247, 209, 199, 1);
		--red: rgba(237, 86, 90, 1);
		--paragraph: rgba(99, 101, 135, 1);
		--green: rgba(115, 191, 141, 1);
		--warning: rgba(255, 194, 0, 1);
		--light-gray: rgba(246, 248, 249, 1);
		--dark-gray: rgba(163, 163, 163, 1);
		--headers: rgba(36, 41, 84, 1);
		--lavanda: #586fe0;
		--lavanda-05: rgba(113, 131, 255, 0.5);
		--lavanda-light: rgba(217, 224, 251, 1);
		--w-negro: rgba(27, 33, 43, 1);
		--error: rgba(255, 17, 58, 1);
		--background: rgba(249, 249, 244, 1);
		--text: rgba(137, 140, 152, 1);
		--gris: rgba(222, 223, 226, 1);

		/* GLOBALS */
		--row-default: 144rem;
	}

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	font,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	main,
	article,
	aside,
	figure,
	footer,
	header,
	nav,
	section,
	details,
	summary,
	figcaption {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		vertical-align: baseline;
		background: transparent;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	sup {
		font-size: 0.6em;
		line-height: 1em;
		vertical-align: super;
	}
	sub {
		font-size: 0.6em;
		line-height: 1em;
		vertical-align: sub;
	}

	main,
	article,
	aside,
	figure,
	footer,
	header,
	nav,
	section,
	details,
	summary,
	figcaption {
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	textarea,
	select,
	input,
	option,
	button {
		background: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		border: none;
		padding: 0;
		background: none;
		color: var(--headers);
		font: normal 400 2em / 1.5em var(--main-font);
	}
	option {
		font-size: inherit;
	}
	::placeholder {
		color: var(--white);
		transition: opacity 0.3s linear;
	}
	:focus::placeholder {
		opacity: 0;
	}
	select::-ms-expand,
	::-ms-clear {
		display: none;
	} /* X en campos */

	select::-ms-expand,
	::-ms-clear {
		display: none;
	} /* X en campos */
	::placeholder {
		color: var(--headers);
		transition: opacity 0.3s linear;
	}
	:focus::placeholder {
		opacity: 0;
	}

	html {
		/* Se resetea el texto para que este en 10px */
		color: var(--headers);
		font: 62.5% var(--main-font);
		line-height: 1;
		margin: 0px;
		padding: 0px;
		-webkit-font-smoothing: antialiased;
		/*overflow-wrap: break-word;  Probar
	word-wrap: break-word;
	hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;*/
	}
	ol,
	ul {
		list-style: none;
	}
	ol li {
		list-style: decimal inside none;
	}
	blockquote,
	q {
		quotes: none;
	}
	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: "";
		content: none;
	}
	*::after,
	*::before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* remember to define focus styles! */
	:focus {
		outline: 0;
		border: 0px none;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	a {
		text-decoration: none;
	}
	* {
		-webkit-tap-highlight-color: transparent;
	}

	@media only screen and (min-width: 961px) and (max-width: 1439px) {
		html {
			font-size: calc(7px + (10 - 5) * ((100vw - 961px) / (1439 - 961)));
		}
	}
	@media only screen and (min-width: 0) and (max-width: 429px) {
		html {
			font-size: calc(7px + (10 - 7) * ((100vw - 300px) / (429 - 300)));
		}
	}
}