.biblioteca{

	width:100%;

	padding:1em;

	display:grid;

	grid-template-columns:1fr 1fr 1fr;

	gap:1em;

	@media screen and (max-width:1200px){

		grid-template-columns:1fr 1fr;

	}

	@media screen and (max-width:680px){

		grid-template-columns:1fr;

	}

}

.cardBase, .cardDos, .cardCinco{

	display:block;

	background:var(--clr-back);

	box-shadow:

		3px 15px 30px -3px rgba(0, 0, 0, 35%),

		0px 12px 6px -6px rgba(0, 0, 0, 15%);

	border-radius:1em;

}

.cardBase{

	width:100%;

	padding:2em 1em 1em;

	overflow:hidden;

	& .cardBase__titulo{

		height:3em;

		margin-bottom:1em;

		text-align:center;

	}

	& .cardBase__banner{

		--altoImage:130px;

		width:100%;

		height:var(--altoImage);

		margin-bottom:1em;

		& picture{

			width:var(--altoImage);

			height:var(--altoImage);

			padding:.9em;

			border:6px solid var(--clr-primary);

			border-radius:50%;

			& img{

				height:100%;

				object-fit:contain;

			}

		}

	}

	& .cardBase__content{

		width:100%;

		padding:.5em;

		background:rgba(0 0 0/10%);

		border-radius:.5em;

		margin-bottom:1em;

		& .cardBase__item{

			margin-bottom:10px;

			gap:10px;

			& .botonBase{

				padding:.25em 1em;

				flex:0 0 auto;

			}

		}

	}

}

.cardDos{

	width:100%;

	padding:min(3em, 10%);

	& .cardDos__titulo{

		margin-bottom:1em;

		text-align:center;

		color: #ec7600;

	}

	& .cardDos__items{

		gap:1em 3em;

		& h3{

			display:block;

			position:relative;

			font-weight:600;

			color:var(--clr-gray);

		}

		& h3::before{

			content:'';

			width:.6em;

			height:.6em;

			position:absolute;

			top:50%;

			left:-1.3em;

			transform:translateY(-50%);

			background:var(--clr-gray);

			border-radius:50%;

		}

		& h3:first-child:before{

			display:none;

		}

	}

	@media screen and (max-width:695px){

		& .cardDos__items{

			& h3{

				width:max-content;

			}

			& h3:before{

				display:none;

			}

		}

	}

}

.cardTres{

	padding:min(3em, 10%);

	border-radius:1em;

	& .cardTres__title{

		margin-bottom:1em;

		font-size:1.5em;

		& h3{

			font-weight:600;

		}

	}

	@media screen and (max-width:480px){

		& .cardTres__title{

			& h3{

				font-size:1.2em;

			}

		}

	}

}

.cardCuatro{

	height:100%;

	padding:min(3em, 10%);

}

.cardCinco{

	--maxHeihgt:40dvh;

	max-height:var(--maxHeihgt);

	margin-block:3em;

	overflow:hidden;

	& picture{

		width:100%;

		max-height:var(--maxHeihgt);

		& img{

			width:100%;

			height:100%;

			object-fit:cover;

		}

	}

	& article{

		max-height:var(--maxHeihgt);

	}

	@media screen and (max-width:540px){

		--maxHeihgt:60dvh;

	}

}



.cajas-2{

	display:grid;

	grid-template-columns:1fr 1fr;

	gap:1em;

	@media screen and (max-width:600px){

		grid-template-columns:1fr;

	}

}

.cajas-2-no-gap{

	gap:0;

}

.cajas-3{

	display:grid;

	grid-template-columns:1fr 1fr 1fr;

	gap:1em;

	@media screen and (max-width:600px){

		grid-template-columns:1fr;

	}

}



.tarjetas{

	position:relative;

	&::before{

		content:'';

		width:6px;

		height:100%;

		position:absolute;

		top:0;

		left:calc(50% - 3px);

		background:var(--clr-primary-dark);

		border-radius:3px;

		z-index:1;

	}

	& .tarjeta{

		width:50%;

		padding:0em 2em;

		position:relative;

		background:transparent;

		z-index:2;

		&:nth-child(odd){

			padding-inline:0em 3.5em;

			left:0;

		}

		&:nth-child(odd) .tarjeta__numero{

			right:calc(0% - 20px);

		}

		&:nth-child(odd) .tarjeta__content::before{

			right:-15px;

		}

		&:nth-child(even){

			padding-inline:3.5em 0em;

			left:50%;

		}

		&:nth-child(even) .tarjeta__numero{

			left:calc(0% - 20px);

		}

		&:nth-child(even) .tarjeta__content::before{

			left:-30px;

			border-left:15px solid transparent;

    		border-right:15px solid var(--clr-white);

		}



		& .tarjeta__numero{

			width:40px;

			height:40px;

			position:absolute;

			top:50%;

			transform:translateY(-50%);

			background:var(--clr-primary);

			color:var(--clr-white);

			border-radius:50%;

			box-shadow:

				3px 15px 30px -3px rgba(0, 0, 0, 35%),

				0px 12px 6px -6px rgba(0, 0, 0, 15%);

			font-family:var(--font-title);

			font-size:1.3em;

			font-weight:600;

		}

		& .tarjeta__content{

			padding:min(1.5em, 9%);

			position:relative;

			background:var(--clr-white);

			border-radius:1em;

			box-shadow:

				3px 15px 30px -3px rgba(0, 0, 0, 35%),

				0px 12px 6px -6px rgba(0, 0, 0, 15%);

			& h3{

				font-weight:600;

				color:var(--clr-primary-dark);

			}

			&::before{

				content:'';

				width:0;

				height:0;

				position:absolute;

				top:50%;

				transform:translateY(-50%);

				border-top:15px solid transparent;

    			border-bottom:15px solid transparent;

    			border-left:15px solid var(--clr-white);

			}

		}

	}

	@media screen and (max-width:600px){

		&::before{

			left:31px;

		}

		& .tarjeta{

			width:100%;

			padding-block:1em;

			padding-inline:3em 1em !important;

			left:0 !important;

			& .tarjeta__numero{

				left:calc(0% - 20px) !important;

			}

			& .tarjeta__content{

				&::before{

					left:-30px !important;

            		border-left:15px solid transparent !important;

            		border-right:15px solid var(--clr-white) !important;

				}

			}

		}

	}

}