/* Variables
  **********************************/
@import url("variables.css");
/* ******************************* */

/* Enlaces, iconos y botones
***********************/

.btn {
	display: inline-block;
	color: var(--barro);
	background-color: transparent;
	text-decoration: none;
	transition: all 0.2s;
	text-align: center;
	font-size: var(--text-general-small);
	font-family: var(--overpass) !important;
	font-weight: var(--light);
	text-transform: uppercase;
	line-height: 50px;
	border: var(--border-base);
	padding: 1em 1.2em 0.8em;
	line-height: 1;
	cursor: pointer;
	margin: 0;
	text-shadow: none;
	box-shadow: none;
	border-radius: 0 !important;
	-webkit-appearance: none;
	width: auto;
}

.btn:hover {
	background-color: var(--barro);
	border: 1px solid var(--barro);
	color: var(--linea);
	text-decoration: none !important;
}

.btn-light {
	border: 0;
	color: var(--amarillo);
	background: rgba(217, 157, 111, 0.3);
}

.btn-light:hover {
	border: 0;
	color: var(--base-fondo) !important;
	background: rgba(217, 157, 111, 1);
}

.btn-simple {
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 1rem;
}

.btn-simple::before,
.btn-simple::after {
	background: var(--barro);
	content: "";
	width: 30px;
	height: 1px;
}

.btn-simple:hover {
	background: transparent;
	border: 0;
	color: var(--rosa);
}

.btn-icon {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--linea);
}

.btn-icon:hover {
	background: var(--linea);
}

.btn-icon img {
	width: 28px;
	height: 28px;
}

.icon-svg {
	width: 40px;
	height: 40px;
}

.icon-svg path,
.icon-svg polygon,
.icon-svg rect {
	fill: var(--barro);
	transition: all 0.2s;
}

.icon-svg circle {
	stroke: var(--barro);
	stroke-width: 1;
	transition: all 0.2s;
}

.icon-svg:hover path,
.icon-svg:hover polygon,
.icon-svg:hover rect {
	fill: var(--barro);
}

.icon-svg:hover circle {
	stroke: var(--barro);
}

.icon-left {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-flow: nowrap;
	gap: 0.5em;
	font-weight: var(--thin);
	font-family: var(--overpass);
	line-height: 1.3em;
	color: var(--rosa);
	white-space: nowrap;
}

.icon-left::before {
	background-repeat: no-repeat;
	background-size: contain;
	background-color: transparent;
	background-position: center;
	content: "";
	width: 22px;
	aspect-ratio: 1/1;
}

.time::before {
	background-image: url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.6 23.6" fill="%23D99D6F"><path d="M11.8,0C5.29,0,0,5.29,0,11.8s5.29,11.8,11.8,11.8,11.8-5.29,11.8-11.8S18.31,0,11.8,0ZM11.8,21.6c-5.4,0-9.8-4.4-9.8-9.8S6.4,2,11.8,2s9.8,4.4,9.8,9.8-4.4,9.8-9.8,9.8Z"/><polygon points="11.8 12.39 8.81 9.4 7.4 10.81 11.8 15.21 18.53 8.49 17.11 7.08 11.8 12.39"/></svg>');
}

.person::before {
	background-image: url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.58 60.82" fill="%23D99D6F"><path d="M27.29,34.16c6.35,0,11.28-6.79,12.25-16.89.54-5.59-.74-10.42-3.62-13.59-2.19-2.41-5.17-3.68-8.63-3.68s-6.45,1.27-8.63,3.68c-2.88,3.17-4.16,8-3.62,13.59.98,10.1,5.9,16.89,12.25,16.89ZM21.62,6.37c1.43-1.57,3.34-2.37,5.67-2.37s4.24.8,5.67,2.37c2.08,2.29,3.03,6.12,2.6,10.51-.76,7.82-4.16,13.27-8.27,13.27s-7.52-5.46-8.27-13.27c-.43-4.39.52-8.22,2.6-10.51Z"/><path d="M48.91,38s-.08-.05-.12-.07l-9.05-4.77c-.98-.51-2.19-.14-2.7.83-.52.98-.14,2.19.84,2.7l8.99,4.74c2.4,1.5,3.82,4.04,3.71,6.63,0,.19-.01.41-.02.64,0,.49-.02,1.52-.19,1.81-.64,1.08-2.81,3.15-10.14,4.84-8.47,1.96-17.42,1.96-25.89,0-7.32-1.69-9.49-3.76-10.14-4.84-.17-.29-.18-1.31-.19-1.81,0-.23,0-.44-.02-.64-.11-2.59,1.31-5.12,3.71-6.63l8.99-4.74c.98-.51,1.35-1.72.84-2.7-.52-.98-1.73-1.35-2.7-.83l-9.05,4.77s-.08.04-.12.07C2.01,40.27-.16,44.19,0,48.24c0,.16,0,.34.01.53.02,1.09.04,2.59.75,3.79,1.75,2.93,5.89,5.12,12.67,6.69,4.53,1.05,9.19,1.57,13.85,1.57,4.66,0,9.32-.52,13.84-1.57,6.78-1.57,10.93-3.75,12.67-6.69.71-1.2.74-2.7.75-3.79,0-.19,0-.37.01-.53.17-4.05-2-7.97-5.66-10.24Z"/></svg>');
}


@media all and (max-width: 480px) {
	.btn {
		font-size: var(--text-general);
	}

	.link-icon {
		font-size: var(--text-general);
	}

	.only-icon {
		gap: 0.4rem;
	}

	.only-icon span {
		opacity: 1;
	}

	.btn-icon-top {
		border-radius: 4vw;
	}
}