/**
 * Página Contacto - CEBEPA SAS.
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.cebe-contact-hero {
	padding: 88px 0 64px;
	background:
		linear-gradient(135deg, rgba(31, 51, 71, 0.98), rgba(20, 35, 51, 0.96)),
		var(--cebe-color-primary);
	color: var(--cebe-color-white);
}

.cebe-contact-hero__title {
	max-width: 940px;
	margin: 0;
	color: var(--cebe-color-white);
	font-family: var(--cebe-font-title);
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1.02;
}

.cebe-contact-hero__text {
	max-width: 780px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.7;
}

/* ==========================================================================
   Layout principal
   ========================================================================== */

.cebe-contact-main {
	padding: 82px 0;
	background-color: var(--cebe-color-bg);
}

.cebe-contact-main__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: start;
}

.cebe-contact-info {
	display: grid;
	gap: 18px;
}

.cebe-contact-info__card {
	padding: 28px;
	border: 1px solid var(--cebe-color-border);
	border-radius: var(--cebe-radius-lg);
	background-color: var(--cebe-color-white);
	box-shadow: var(--cebe-shadow-card);
}

.cebe-contact-info__title {
	margin: 0 0 14px;
	color: var(--cebe-color-primary);
	font-family: var(--cebe-font-title);
	font-size: 1.25rem;
	font-weight: 850;
	line-height: 1.25;
}

.cebe-contact-info__text {
	margin: 0;
	color: var(--cebe-color-text);
	font-size: 1rem;
	line-height: 1.7;
}

.cebe-contact-info__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cebe-contact-info__list li {
	color: var(--cebe-color-text);
	font-size: 0.98rem;
	line-height: 1.55;
}

.cebe-contact-info__list a {
	color: var(--cebe-color-primary);
	font-weight: 800;
	text-decoration: none;
}

.cebe-contact-info__list a:hover,
.cebe-contact-info__list a:focus {
	color: var(--cebe-color-accent);
	text-decoration: underline;
}

/* ==========================================================================
   Formulario
   ========================================================================== */

.cebe-contact-form {
	padding: 32px;
	border: 1px solid var(--cebe-color-border);
	border-radius: var(--cebe-radius-lg);
	background-color: var(--cebe-color-white);
	box-shadow: var(--cebe-shadow-soft);
}

.cebe-contact-form__title {
	margin: 0 0 12px;
	color: var(--cebe-color-primary);
	font-family: var(--cebe-font-title);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.cebe-contact-form__text {
	margin: 0 0 28px;
	color: var(--cebe-color-text);
	font-size: 1.02rem;
	line-height: 1.7;
}

/* Ajustes visuales para Fluent Forms */

.cebe-contact-form .fluentform {
	margin: 0;
}

.cebe-contact-form .ff-el-group {
	margin-bottom: 18px;
}

.cebe-contact-form .ff-el-input--label label,
.cebe-contact-form .ff-el-form-check-label {
	color: var(--cebe-color-primary);
	font-weight: 800;
}

.cebe-contact-form input[type="text"],
.cebe-contact-form input[type="email"],
.cebe-contact-form input[type="tel"],
.cebe-contact-form textarea,
.cebe-contact-form select {
	border: 1px solid var(--cebe-color-border);
	border-radius: var(--cebe-radius-sm);
	background-color: var(--cebe-color-white);
	color: var(--cebe-color-text);
	font-size: 1rem;
}

.cebe-contact-form input[type="text"]:focus,
.cebe-contact-form input[type="email"]:focus,
.cebe-contact-form input[type="tel"]:focus,
.cebe-contact-form textarea:focus,
.cebe-contact-form select:focus {
	border-color: var(--cebe-color-primary);
	box-shadow: 0 0 0 3px rgba(31, 51, 71, 0.12);
	outline: none;
}

.cebe-contact-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 24px;
	border: 1px solid var(--cebe-color-primary);
	border-radius: var(--cebe-radius-sm);
	background-color: var(--cebe-color-primary);
	color: var(--cebe-color-white);
	font-family: var(--cebe-font-body);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

.cebe-contact-form .ff-btn-submit:hover,
.cebe-contact-form .ff-btn-submit:focus {
	background-color: var(--cebe-color-primary-dark);
	border-color: var(--cebe-color-primary-dark);
	color: var(--cebe-color-white);
	transform: translateY(-1px);
}

.cebe-contact-form .ff-message-success {
	border: 1px solid rgba(31, 51, 71, 0.18);
	border-radius: var(--cebe-radius-md);
	background-color: var(--cebe-color-bg-soft);
	color: var(--cebe-color-primary);
	font-weight: 750;
}

/* ==========================================================================
   CTA alternativo
   ========================================================================== */

.cebe-contact-direct {
	padding: 64px 0;
	background-color: var(--cebe-color-primary);
	color: var(--cebe-color-white);
}

.cebe-contact-direct__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

.cebe-contact-direct__title {
	margin: 0;
	color: var(--cebe-color-white);
	font-family: var(--cebe-font-title);
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.08;
}

.cebe-contact-direct__text {
	max-width: 720px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.05rem;
	line-height: 1.72;
}

.cebe-contact-direct__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.cebe-contact-direct .cebe-button--primary {
	background-color: var(--cebe-color-white);
	color: var(--cebe-color-primary);
}

.cebe-contact-direct .cebe-button--primary:hover,
.cebe-contact-direct .cebe-button--primary:focus {
	background-color: var(--cebe-color-accent);
	color: var(--cebe-color-primary-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 960px) {
	.cebe-contact-main__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 48px;
	}

	.cebe-contact-info {
		position: sticky;
		top: 110px;
	}

	.cebe-contact-direct__grid {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.cebe-contact-direct__actions {
		justify-content: flex-end;
	}
}

@media (max-width: 639px) {
	.cebe-contact-hero {
		padding: 56px 0 44px;
	}

	.cebe-contact-main {
		padding: 48px 0;
	}

	.cebe-contact-form,
	.cebe-contact-info__card {
		padding: 22px;
	}

	.cebe-contact-direct {
		padding: 48px 0;
	}

	.cebe-contact-direct__actions,
	.cebe-contact-direct__actions .cebe-button {
		width: 100%;
	}

	.cebe-contact-form .ff-btn-submit {
		width: 100%;
	}
}