section.contenedor-folder {
	--ancho-folder: 500px;
	--altura-folder: 400px;
	--color-fondo: #ffffff;
	--amarillo: #f7e999;
	--azul: #b9dcf4;
	--blanco: #f0f0f0;
	--verde: #73ebb7;

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.65rem;
	font-size: 20px;

	background-color: var(--color-fondo);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 2rem;
	margin: 2rem auto;
	padding-bottom: 1rem;
}

section.contenedor-folder .folder {
	position: relative;
	max-width: var(--ancho-folder);
	color: #333;
	display: flex;
	flex: 0 1 350px;
	flex: 0 1 calc(var(--ancho-folder) * 0.8);
	justify-content: space-around;
	align-items: center;
	perspective: 100rem;
	margin: 2rem;
	transition: transform 1s;
	height: min(var(--altura-folder), 100%);
}

section.contenedor-folder .folder .portada {
	position: absolute;
	top: 0;
	left: 0;
	width: 85%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: left;
	transition: transform 1s;
	/* border-bottom: 1px solid; */
	/* border-right: 1px solid; */
	/* outline: 1px solid; */
}

section.contenedor-folder .folder:hover {
	transform: rotate(-10deg);
}

section.contenedor-folder .folder:hover .portada {
	transform: rotateY(-120deg);
	height: 100%;
}

section.contenedor-folder .folder .portada .frente,
section.contenedor-folder .folder .portada .atras {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0 0.625rem 0.625rem 0;
}

section.contenedor-folder .folder .portada .atras {
	transform: rotateY(180deg);
	backface-visibility: hidden;
}

section.contenedor-folder .folder.amarillo .frente,
section.contenedor-folder .folder.amarillo .atras {
	background-color: var(--amarillo);
}

section.contenedor-folder .folder.blanco .frente,
section.contenedor-folder .folder.blanco .atras {
	background-color: var(--blanco);
}

section.contenedor-folder .folder.azul .frente,
section.contenedor-folder .folder.azul .atras {
	background-color: var(--azul);
}

section.contenedor-folder .folder.verde .frente,
section.contenedor-folder .folder.verde .atras {
	background-color: var(--verde);
}

section.contenedor-folder .folder .contenido {
	position: relative;
	height: min(400px, 95%);
	border-radius: 0 0.625rem 0.625rem 0;
	overflow: hidden;
	padding: 1em 4em 1em 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	filter: saturate(0.5);
}

section.contenedor-folder .folder.amarillo .contenido {
	background-color: var(--amarillo);
}

section.contenedor-folder .folder.blanco .contenido {
	background-color: var(--blanco);
}

section.contenedor-folder .folder.azul .contenido {
	background-color: var(--azul);
}

section.contenedor-folder .folder.verde .contenido {
	background-color: var(--verde);
}

section.contenedor-folder .folder .contenido .hueco {
	width: 10%;
	height: min(500px, 60%);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: var(--color-fondo);
	border-radius: 1.25rem 0 0 0;
	padding: 0.3125rem;
}

section.contenedor-folder .folder .contenido .hueco::after {
	width: 1.125rem;
	height: 1.125rem;
	content: '';
	position: absolute;
	background-color: transparent;
	top: -1.125rem;
	right: 0;
	border-bottom-right-radius: 0.625rem;
	box-shadow: 0.375rem 0.375rem var(--color-fondo);
}

section.contenedor-folder .folder .contenido .hueco::before {
	width: 1.125rem;
	height: 1.25rem;
	content: '';
	position: absolute;
	background-color: transparent;
	right: 0.5rem;
	top: -1.75rem;
	border-bottom-right-radius: 0.625rem;
}

section.contenedor-folder .folder.amarillo .contenido .hueco {
	border-top: 0.5rem solid var(--amarillo);
	border-left: 0.5rem solid var(--amarillo);
}

section.contenedor-folder .folder.blanco .contenido .hueco {
	border-top: 0.5rem solid var(--blanco);
	border-left: 0.5rem solid var(--blanco);
}

section.contenedor-folder .folder.azul .contenido .hueco {
	border-top: 0.5rem solid var(--azul);
	border-left: 0.5rem solid var(--azul);
}

section.contenedor-folder .folder.verde .contenido .hueco {
	border-top: 0.5rem solid var(--verde);
	border-left: 0.5rem solid var(--verde);
}

/* section.contenedor-folder .folder .contenido .esquina1, */
section.contenedor-folder .folder .contenido .esquina2 {
	width: 1.25rem;
	height: 1.25rem;
	content: '';
	position: absolute;
}

/* section.contenedor-folder .folder .contenido .esquina1 {
	background-color: transparent;
	left: 72%;
	bottom: 0.5rem;
	border-bottom-right-radius: 0.625rem;
} */

/* section.contenedor-folder .folder.amarillo .contenido .esquina1 {
	box-shadow: 0.375rem 0.375rem var(--amarillo);
}

section.contenedor-folder .folder.blanco .contenido .esquina1 {
	box-shadow: 0.375rem 0.375rem var(--blanco);
}

section.contenedor-folder .folder.azul .contenido .esquina1 {
	box-shadow: 0.375rem 0.375rem var(--azul);
}

section.contenedor-folder .folder.verde .contenido .esquina1 {
	box-shadow: 0.375rem 0.375rem var(--verde);
} */

section.contenedor-folder .folder .contenido .esquina2 {
	background-color: transparent;
	right: 12.5%;
	bottom: 0;
	border-bottom-right-radius: 0.625rem;
	box-shadow: 0.375rem 0.375rem var(--color-fondo);
}

section.contenedor-folder .folder .portada .frente div,
section.contenedor-folder .folder .contenido div {
	display: flex;
	flex-direction: column;
	width: 90%;
	align-items: center;
}

section.contenedor-folder .folder .imagenPie {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	justify-content: center;
	width: 80%;
	margin-top: 0;
	margin-bottom: 1rem;
}

section.contenedor-folder .folder .imagenPie img {
	width: 100%;
}

section.contenedor-folder .folder .imagenPie img+figcaption {
	width: 90%;
	font-size: 0.75rem;
	text-align: center;
	margin-top: 0.5rem;
	overflow-wrap: anywhere;
	line-height: 1rem;
}

section.contenedor-folder .folder p {
	margin: 0;
	margin-bottom: 1rem;
}

section.contenedor-folder .folder ul,
section.contenedor-folder .folder ol {
	margin: 0;
	padding-inline-start: 2rem;
	padding-right: 1rem;
}

section.contenedor-folder .folder ul li,
section.contenedor-folder .folder ol li {
	margin-bottom: 1rem;
}

section.contenedor-folder .folder i.fas.fa-redo.fa-flip-vertical {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	color: #444444;
	transform: rotateX(45deg) rotateY(180deg);
}

@media (max-width: 767px) {
	section.contenedor-folder .folder:hover {
		transform: rotate(0deg);
	}
}