/* ================================
   INCLUDES SECTION (Qué incluye)
   ================================ */
.includes-section {
	background: var(--color-text);
	padding: 6rem 2rem;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: -20%;
		right: -10%;
		width: 600px;
		height: 600px;
		background: url("data:image/svg+xml,%3Csvg viewBox='0 0 273 157' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M156.09 78.5305C156.102 67.1889 153.616 55.9838 148.81 45.7109C143.049 53.558 139.46 62.7863 138.406 72.464C139.943 86.8494 136.32 101.313 128.183 113.275C120.046 125.237 107.924 133.919 93.9792 137.773C80.0346 141.627 65.1745 140.401 52.0496 134.315C38.9248 128.229 28.3888 117.678 22.3212 104.545C16.2536 91.4114 15.0489 76.5495 18.9222 62.6104C22.7955 48.6712 31.4947 36.5613 43.4681 28.441C55.4414 20.3206 69.9102 16.7178 84.2934 18.2754C98.6766 19.833 112.039 26.4496 121.996 36.9449C124.958 31.8623 128.445 27.1044 132.4 22.7494C119.472 10.2022 102.601 2.51403 84.6505 0.989245C66.6995 -0.535538 48.7737 4.197 33.9147 14.3839C19.0557 24.5708 8.17849 39.5847 3.12868 56.8781C-1.92112 74.1716 -0.832547 92.6795 6.20972 109.262C13.252 125.844 25.8142 139.479 41.765 147.854C57.7157 156.229 76.0727 158.827 93.7212 155.209C111.37 151.59 127.223 141.977 138.591 128.001C149.959 114.025 156.141 96.5461 156.09 78.5305Z' fill='white' fill-opacity='0.03'/%3E%3Cpath d='M193.793 6.26666e-05C180.424 -0.0168342 167.273 3.38347 155.587 9.87815C143.902 16.3728 134.071 25.7464 127.026 37.1088C119.982 48.4713 115.959 61.4457 115.339 74.8001C114.719 88.1546 117.522 101.446 123.482 113.412C129.068 106.1 132.803 97.5462 134.372 88.4794C132.873 79.8357 133.287 70.9684 135.586 62.5024C137.885 54.0363 142.013 46.1774 147.679 39.4795C153.344 32.7815 160.41 27.4075 168.377 23.736C176.344 20.0645 185.02 18.185 193.793 18.2298C203.85 18.2177 213.75 20.7213 222.592 25.5125C231.435 30.3037 238.938 37.2303 244.42 45.662C249.902 54.0936 253.188 63.7624 253.979 73.7883C254.77 83.8141 253.04 93.8785 248.948 103.065C244.856 112.252 238.532 120.27 230.55 126.388C222.568 132.506 213.183 136.531 203.248 138.096C193.314 139.661 183.146 138.717 173.67 135.349C164.193 131.98 155.71 126.296 148.992 118.812C145.94 124.209 142.276 129.237 138.072 133.796C147.175 142.968 158.4 149.751 170.753 153.543C183.106 157.336 196.205 158.02 208.885 155.535C221.566 153.051 233.438 147.474 243.446 139.3C253.455 131.126 261.29 120.608 266.258 108.679C271.226 96.7506 273.172 83.7798 271.924 70.9182C270.676 58.0566 266.273 45.702 259.104 34.9508C251.935 24.1996 242.223 15.3844 230.83 9.28741C219.437 3.19043 206.715 0.00027196 193.793 6.26666e-05Z' fill='white' fill-opacity='0.03'/%3E%3C/svg%3E") no-repeat center;
		background-size: contain;
		pointer-events: none;
	}

	@media (max-width: 768px) {
		padding: 4rem 1.5rem;
	}
}

.includes-container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.includes-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: end;
	margin-bottom: 4rem;

	@media (max-width: 1100px) {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.includes-title {
	font-size: clamp(3rem, 8vw, 5rem);
	font-weight: 800;
	color: var(--color-white);
	letter-spacing: -0.03em;
	line-height: 1;
}

.includes-subtitle {
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	line-height: 1.6;
}

.includes-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;

	> div {
		display: flex;
	}

	@media (max-width: 1100px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (max-width: 768px) {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
}

.includes-item {
	flex: 1;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: 2.5rem 1.75rem;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.15);
		transform: translateY(-8px);
	}

	h3 {
		font-size: 1.15rem;
		font-weight: 700;
		color: var(--color-white);
		margin-bottom: 0.5rem;

		@media (max-width: 768px) {
			font-size: 1rem;
		}
	}

	p {
		font-size: 0.95rem;
		color: rgba(255, 255, 255, 0.5);
		line-height: 1.5;

		@media (max-width: 768px) {
			font-size: 0.85rem;
		}
	}

	@media (max-width: 768px) {
		padding: 1.75rem 1.25rem;
	}
}

.includes-icon {
	width: 52px;
	height: 52px;
	background: var(--color-primary);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;

	.material-symbols-outlined {
		font-size: 26px;
		color: var(--color-white);

		@media (max-width: 768px) {
			font-size: 22px;
		}
	}

	@media (max-width: 768px) {
		width: 44px;
		height: 44px;
		border-radius: 10px;
		margin-bottom: 1rem;
	}
}