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

.container-fondo{background: linear-gradient(180deg, #F2F8FA 0%, rgba(242, 248, 250, 0) 100%);
border-radius:1rem;
width:100%;height:fit-content; margin:2rem auto;padding:3rem;}

.selector.active {
  background:rgb(242, 42, 13);
	color:white;
	transition: 0.3s ease-in-out;
}



.selector-container {
  text-align: center;
  background: #F3F6F8;
  border-radius: 48px;
  width: fit-content; /* Ancho máximo */
	max-width:100%;
	margin:0 auto;
  overflow-x: auto; /* Agregar desplazamiento horizontal */
  white-space: nowrap; /* Evitar que los elementos se envuelvan */
}

.selector-container * {
  font-family: "Nunito Sans", "sans-serif";
}

.selector {
  color: #1A4958;
  font-weight: bold;
  font-size: 14px;
  font-family: "Nunito Sans", "sans-seif";
  border-radius: 32px;
  display: inline-block;
  padding: 12px 24px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  margin: 8px 4px; /* Margen entre pestañas */
}



.cabecera-container{display:flex; flex-direction:column; gap:.4rem; justify-content:center; align-items:center;width:100%;margin:1rem auto; text-align:center;}
.cabecera-container h2{font-size:32px;}
.cabecera-container p{font-size:24px; line-height:32.5px}

.integracion-inf{display:flex;width:100%;padding:2rem;gap:3rem;}
.integracion-text{width:50%; padding:2rem;}
.integracion-img{width:50%; display:flex; justify-content:center;align-items:center;border-radius:1rem; overflow:hidden;max-width:427px;}
.integracion-img img{width:100%; object-fit:cover;}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.card-container .renovacion-img{margin:0 auto; width:90vw; max-width:992px;}
.card {
  width: calc(25% - 20px); /* 25% de ancho para mostrar 4 tarjetas por fila con un margen de 20px entre ellas */
  height: fit-content; 
  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;
	background:white;
}

.card-container.container3{width:85%;margin:0 auto;}

.card:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card .tags{ padding:.5rem; display:flex; font-size:12px;gap:1rem; height:42px;}
.card .tags .pago{background:#E8F4FB;border:1px solid #47A6DC; 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: flex-start; gap: 0rem; flex-direction: column;}
.card .cabecera .nombre{font-weight:700; font-size:20px;color:#2F373D;}
.card .cabecera .sitio *{font-weight:700; font-size:12px;color:#1473A9;}
.card .cabecera .sitio :hover{font-weight:900;}

.card .texto { color:#485C66; font-size:12px;margin: 1rem auto;}
.renovacion-bullets{width:100%;padding:0;}
  #cssportal-grid {
	  display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 150px;
    max-width: fit-content;
    height: fit-content;
    justify-items: start;
    margin: 0 auto;
    width: 100%;
}
}
#div1 {
	grid-area: 1/1/2/2;
	
}
#div2 {
	grid-area: 1/2/2/3;
	
}
#div3 {
	grid-area: 2/1/3/2;
	
}
#div4 {
	grid-area: 2/2/3/3;
	
}


@media (max-width:768px) {
	.container-fondo{width:100%;padding:1rem;}
	#cssportal-grid {display:flex; flex-direction:column;gap:.5rem;margin-top:1rem;}
	.card-container {flex-direction:column;}
	.card {  width: 100% ; margin:1rem auto;}	
	
	.integracion-inf{flex-direction:column; padding:0;}
.integracion-text{width:100%; padding:0rem;}
.integracion-img{width:100%; padding:0rem; max-width:427px;}

	
	

}