/* Conecta On — Layout & Containers */
.conecta-container {
	width: 100%;
	max-width: var(--conecta-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--conecta-gutter, 20px);
	padding-right: var(--conecta-gutter, 20px);
}

.conecta-container-fluid {
	width: 100%;
	padding-left: var(--conecta-gutter, 20px);
	padding-right: var(--conecta-gutter, 20px);
}

.conecta-section {
	padding-top: var(--conecta-space-xl, 60px);
	padding-bottom: var(--conecta-space-xl, 60px);
	position: relative;
}

.conecta-grid {
	display: grid;
	gap: var(--conecta-space-md, 24px);
}

.conecta-grid-2 { grid-template-columns: repeat(2, 1fr); }
.conecta-grid-3 { grid-template-columns: repeat(3, 1fr); }
.conecta-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* === Desktop Specific Grid Component Classes === */
.conecta-plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: stretch;
}

.conecta-mobile-app-grid {
	display: grid;
	grid-template-columns: 0.75fr 1.25fr;
	gap: 40px;
	align-items: center;
}

.conecta-awards-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.conecta-footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.conecta-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.conecta-stack {
	display: flex;
	flex-direction: column;
	gap: var(--conecta-space-sm, 16px);
}

.conecta-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.conecta-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* === Desktop Responsive Intermediate (Tablet / Laptop) === */
@media (max-width: 1024px) {
	.conecta-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.conecta-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.conecta-plans-grid { grid-template-columns: repeat(2, 1fr); }
	.conecta-footer-grid { gap: 40px; }
}

/* === Mobile Smartphone Screen Overrides ONLY (< 768px) === */
@media screen and (max-width: 768px) {
	html, body {
		overflow-x: hidden !important;
		width: 100% !important;
	}

	.conecta-container, .conecta-container-fluid {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.conecta-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.conecta-grid-4, .conecta-grid-3, .conecta-grid-2,
	.conecta-plans-grid,
	.conecta-footer-grid,
	.conecta-mobile-app-grid,
	.conecta-awards-container,
	.conecta-form-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.conecta-plan-card {
		transform: none !important;
		margin-bottom: 16px !important;
		max-width: 100% !important;
	}

	.conecta-card {
		padding: 24px 18px !important;
	}

	.conecta-h2, h2 {
		font-size: 26px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
	}

	h1 {
		font-size: 28px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
	}

	.conecta-apps-block-1,
	.conecta-apps-block-premium-home {
		padding: 28px 18px !important;
		border-radius: 16px !important;
	}

	.conecta-qrcodes-wrapper {
		justify-content: center !important;
		width: 100% !important;
		margin-top: 12px !important;
	}

	.conecta-footer-bottom {
		flex-direction: column !important;
		text-align: center !important;
		gap: 8px !important;
	}

	.conecta-desktop-only-nowrap {
		white-space: normal !important;
	}
}