:root {
	--rojo: 3.2, 100%, 59.4%;
	--naranja: 26.3, 100%, 48.8%;
	--amarillo: 48, 100%, 50%;
	--verde: 135.1, 58.6%, 49.2%;
	--celeste: 189.1, 61.1%, 48.4%;
	--azul: 211.3, 100%, 50%;
	--violeta: 240.9, 61%, 58.8%;
	--purpura: 279.9, 68%, 59.6%;
	--primary: hsl(131.3, 8.7%, 81.9%);
	--primary-dark: hsl(131.3, 8.7%, 21.9%);
	--space: .25rem;
}

@supports (font-variation-settings: normal) {
  body { font-family: InterVariable, sans-serif; }
}

@font-face {
	font-family: 'Inter Regular';
	src: url('/fonts/inter-regular-webfont.woff2') format('woff2'),
		url('/fonts/inter-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Inter Bold';
	src: url('/fonts/inter-bold-webfont.woff2') format('woff2'),
		url('/fonts/inter-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 11 * ((100vw - 320px) / 680));
  }
}
/*@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}*/

body {
	margin: 0;
	padding: 1.5rem;
	color: var(--primary-dark);
	background: url(../img/pared.webp) no-repeat;
	background-size: cover;
  	font-family: 'Inter Regular', sans-serif;
  	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    letter-spacing: -.025em;
}

body > * {
	z-index: 3;
	position: relative;
}

body:after {
	content: "";
	width: 100%;
    position: fixed;
    height: 100%;
    inset: 0;
}

h1 {
    font-size: 3em;
    line-height: 1.15em;
    font-family: 'Inter Bold';
}

p {
	line-height: 1.5em;
}

.display-flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.gap-4 {
	gap: calc(var(--space) * 4);
}

.text-uppercase {
	text-transform: uppercase;
}

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

.button {
	background-color: hsl(167.1, 100%, 27.9%);
	text-decoration: none;
	color: white;
	padding: .75em 1em;
	border-radius: .5em;
	display: inline-flex;
	align-items: center;
	gap: .25em;
	font-weight: 600;
	box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.24);
	transition: .2s ease-in;
	line-height: 1.5em;
    font-size: inherit;
}

.button:hover {
	color: white;
	background-color: hsl(167.1, 100%, 23.9%);
	box-shadow: none;
}

.dark .button {
	color: #00A884;
	text-decoration: none;
	background-color: hsla(0, 0%, 100%, .95);
}

.dark .button:hover {
	background-color: white;
	color: hsl(167.1, 100%, 23.9%);
	box-shadow: none;
}

.button.-secondary {
	background-color: transparent;
	color: var(--primary-dark);
	border: 1px solid var(--primary-dark);
	box-shadow: none;
}

.button.-secondary:hover {
	background-color: hsla(132, 8.9%, 22%, 0.1);
	color: var(--primary-dark);
	border: 1px solid var(--primary-dark);
	box-shadow: none;
}

.icon {
	width: 1.5rem;
	height: 1.5rem;
}

.avatar {
	max-width: 5rem;
	max-height: 5rem;
	border-radius: .25rem;
}

[hidden] {
	display: none;
}

p {
	margin: 0;
}

.border-none {
	border: 0;
}

.text-balance {
	text-wrap: balance;
}

.p-0 {
	padding: 0;
}

.spacer-tiny > * + * {
	margin-block-start: .5rem;
}

.spacer > * + * {
	margin-block-start: 1rem;
}

.spacer-lg > * + * {
	margin-block-start: 2rem;
}

.pincel {
	width: 3rem;
	height: 3rem;
}

[type=radio] {
	appearance: none;
	cursor: pointer;
	border-radius: 3px;
  	border-width: 14px;
  	border-style: solid;
  	transition: 0.2s all linear;
  	margin: 0;
}

.dark {
	--primary-dark: white;
	color: white;
}

.rojo:after {
	background-color: hsla(var(--rojo), .6);
}

.naranja:after {
	background-color: hsla(var(--naranja), .6);
}

.amarillo:after {
	background-color: hsla(var(--amarillo), .6);
}

.verde:after {
	background-color: hsla(var(--verde), .6);
}

.celeste:after {
	background-color: hsla(var(--celeste), .6);
}

.azul:after {
	background-color: hsla(var(--azul), .6);
}

.violeta:after {
	background-color: hsla(var(--violeta), .6);
}

.purpura:after {
	background-color: hsla(var(--purpura), .6);
}

[type=radio]:first-child {
	border-color: hsla(var(--rojo), 1);
}

[type=radio]:nth-child(2) {
	border-color: hsla(var(--naranja), 1);
}

[type=radio]:nth-child(3) {
	border-color: hsla(var(--amarillo), 1);
}

[type=radio]:nth-child(4) {
	border-color: hsla(var(--verde), 1);
}

[type=radio]:nth-child(5) {
	border-color: hsla(var(--celeste), 1);
}

[type=radio]:nth-child(6) {
	border-color: hsla(var(--azul), 1);
}

[type=radio]:nth-child(7) {
	border-color: hsla(var(--violeta), 1);
}

[type=radio]:last-child {
	border-color: hsla(var(--purpura), 1);
}

input[type=radio]:checked, input[type=radio]:focus-visible {
  	outline: 2px solid white;
}