main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	width: clamp(300px, 90%, 1200px);
	height: auto;
	padding: clamp(1.5rem, 3vw, 3rem) 0 0 0;

	/* Sección izquierda: imagen de la idea */
	.idea-section {
		position: relative;
		min-height: clamp(300px, 70vh, 600px);

		&.fade-in {
			opacity: 0;
			animation: fadeIn 1s ease forwards;
		}

		/* Imagen de fondo */
		.service-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			object-fit: cover;
		}

		/* Texto superpuesto */
		.idea-text {
			position: relative;
			z-index: 1; /* Por encima de la imagen */
			width: clamp(200px, 90%, 600px);
			margin: 0 auto;
			text-align: justify;
			top: 55%;
			transform: translateY(-50%);
			color: #fff;

			p {
				line-height: 1.6;
				margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
				font-size: clamp(0.75rem, 1.4vw, 0.9rem);
			}

			.btn-light {
				display: inline-block;
				color: #fff;
				border: 2px solid #fff;
				padding: clamp(0.25rem, 0.5vw, 0.5rem) clamp(0.5rem, 1vw, 1rem);
				border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
				transition: background-color 0.3s ease, color 0.3s ease;

				&:hover {
					background-color: #fff;
					color: #333;
				}
			}
		}
	}

	/* Sección derecha: servicios y bloque de clientes */
	.services-info {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(0.5rem, 1vw, 1rem);

		&.fade-in {
			opacity: 0;
			animation: fadeIn 1s ease forwards;
		}

		.service-block {
			h3 {
				margin-bottom: clamp(0.5rem, 1vw, 1rem);
				font-size: clamp(1.2rem, 2vw, 1.5rem);
				color: #333;
			}

			p {
				line-height: 1.4;
				color: #555;
				font-size: clamp(0.75rem, 1.4vw, 0.9rem);
			}
		}

		/* Para que la imagen final abarque las dos columnas en la tercera fila */
		.clients-img {
			grid-column: 1 / -1; /* O 1 / span 2 */
			max-width: 100%;
			height: auto;
			border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
			justify-self: center;
		}
	}
}

@media screen and (max-width: 600px) {
	main {
		.idea-section {
			.idea-text {
				top: 45%;
			}
		}

		.services-info {
			margin-top: -200px;
		}
	}
}

/* Keyframes para la animación */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}