body {
	/*Le quitamos los márgenes y el padding al body*/
	margin: 0;
	padding: 0;
	font-family: 'Roboto', 'Montserrat', Arial;
}

main {
	/* background: url(/assets/img/backgrounds/background.svg); */
	background: #f4f4f3;
	background-size: cover;
}

body {
	font-size: 18px;

	@media (max-width: 1199px) {
		font-size: 17px;
	}

	@media (max-width: 767px) {
		font-size: 16px;
	}

	font-size: clamp(14px, 1.5vw, 16px);

}

details {
	interpolate-size: allow-keywords;

	&::details-content {
		transition:
			block-size 0.5s,
			content-visibility 0.5s allow-discrete;
		overflow: hidden;
		block-size: 0;
		/* Or also:  height:0; */
	}

	&[open]::details-content {
		block-size: auto;
		/* Or also:  height:auto; */
	}
}


/* Estilos para pantallas pequeñas */
@media screen and (max-width: 767px) {
	section {
		padding-top: 5em;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}

	.desktop {
		display: none;
	}
}

/* Estilos para pantallas grandes */
@media screen and (min-width: 768px) {
	section {
		padding-top: 10em;
		padding-right: 12%;
		padding-left: 12%;
	}

	.mobile {
		display: none;
	}
}

@media print {
	section {
		break-after: page;
	}
}

a {
	color: #C20F2F;
}

a:hover {
	text-decoration: underline;
}


/*Formatos generales*/
.rojo {
	color: #C20F2F;
}

.negro {
	color: black;
}

.gris {
	color: #808080;
}

.gris666 {
	color: #666666;
}

.blanco {
	color: white;
}

.no-underline {
	text-decoration: none;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

button {
	padding: 1em;
	width: max-content;

	background-color: #c3253c;
	color: white;
	border-radius: 0.25em;
	border: #C20F2F solid;
	cursor: pointer;
	font-family: 'Montserrat', Arial;
	text-align: center;
	align-self: end;
}
/* Los PNG "positivo" del logo tienen fondo blanco opaco: lo fundimos con el fondo claro */
.logo-positivo {
	mix-blend-mode: multiply;
}