.module-container{ padding:1rem;display:flex; flex-direction:column;gap:1rem;}

.tag-list {

  margin: 2rem auto;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:1.5rem 3rem;
	padding:1rem;
	
}

.tag {
  display: inline-block;  cursor: pointer;	font-weight:500;	color: #2F373D; border-bottom:3px solid transparent;padding-bottom:8px;
  transition: .3s ease-in-out;
}
.tag:hover {
  font-weight: 700;
  border-bottom:2px solid #df1e02;
}
.tag.selected {
 font-weight:700; border-bottom:2px solid #df1e02;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.card {
  width: calc(25% - 20px); /* 25% de ancho para mostrar 4 tarjetas por fila con un margen de 20px entre ellas */
  height:370px; 
	min-height:370px;
  border: 1px solid #DDE5E9;
  border-radius: 1rem;
  padding: 16px 24px 24px 16px;
  margin: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card .tags{ padding:.5rem; display:flex; font-size:12px;gap:1rem;}
.card .tags .pago{background:#E8F4FB;border:1px solid #47A6DC; border-radius:6px; padding:2px 8px 2px 8px;}
.card .tags .gratis{background:#EAFFF7;border:1px solid #5AEDAF; border-radius:6px; padding:2px 8px 2px 8px;}

.card .imagen{display:flex; justify-content:center; align-items:center; padding:1rem;height:78px;}
.card .imagen img{max-width:150px;}

.card .cabecera{ display:flex;align-items:center; gap:1rem;}
.card .cabecera .nombre{font-weight:700; font-size:20px;color:#2F373D;}
.card .sitio *{font-weight:700; font-size:12px;color:#1473A9;}
.card .sitio :hover{font-weight:900;}

.card .texto { color:#485C66; font-size:12px;margin: 1rem auto;}

.card .saber-mas *{color:#1473A9; font-size:14px;}
.card .saber-mas :hover{font-weight:900;}

.modal {
  display: none; /* Ocultar el modal por defecto */
	align-items:center;
	justify-content:center;
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
}

.modal-content {
	z-index:2;
  background-color: #fefefe;
	width: 550px;
  height: fit-content;
  margin: 0 auto; /* Centrar vertical y horizontalmente */
  padding: 2rem; 
	border: 1px solid #DDE5E9;
  border-radius: 12px;  
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  display:flex;
	flex-direction:column;
	
}

.modal-content .tags{ padding:.5rem; display:flex; font-size:16px;gap:1rem;}
.modal-content .pago{background:#E8F4FB;border:1px solid #47A6DC; border-radius:8px; padding:4px 12px 4px 12px;}
.modal-content .gratis{background:#EAFFF7;border:1px solid #5AEDAF; border-radius:8px; padding:4px 12px 4px 12px;}


.modal-content .imagen{display:flex; justify-content:center; align-items:center; padding:1rem;}
.modal-content .imagen img{max-width:240px;object-fit:cover;width:100%;}

.modal-content .cabecera{ display:flex;align-items:center; gap:1rem;margin-bottom:2rem;}
.modal-content .cabecera .nombre{font-weight:700; font-size:24px;color:#2F373D;}
.modal-content .sitio *{font-weight:600; font-size:14px;color:#1473A9;}
.modal-content .sitio :hover{font-weight:900;}


.modal-content .nombre{font-size:18px}}
.modal-content .sitio{font-size:14px}}
.modal-content .texto{font-size:16px}
.modal-content .saber-mas{display:none;}
/* Estilos para el botón de cerrar */
.close {	
	border:1px solid gray;
	border-radius:3px;
	padding:4px 8px;
  font-size: 12px;
	width:fit-content;
	margin-left:calc(100% - 32px);
	display:flex;
	align-items:center;
	justify-content:center;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width:768px) {
	.tag-list {  margin: 1rem auto;	gap:1rem;	}
	.card-container {flex-direction:column;}
	.card {  width: 100% ; margin:1rem auto;}
	
	.modal-content {

	width: 90%;
 max-height:60vh;
  margin: 0 auto; /* Centrar vertical y horizontalmente */
		margin-top:20vh;
  padding: 1.5rem 1.5rem 2rem 1.5rem; 
	overflow-y:scroll;
 
}
}