/*
 * Super Ferretería — contacto 1.0
 * Scope: body.sf-contact-page and semantic sf-contact component only.
 */

.sf-contact-page {
	--sf-contact-primary: #ff6b00;
	--sf-contact-primary-hover: #e85f00;
	--sf-contact-graphite: #202a30;
	--sf-contact-muted: #657179;
	--sf-contact-surface: #ffffff;
	--sf-contact-page-bg: #f3f5f2;
	--sf-contact-border: #dce2df;
	--sf-contact-focus: #ffb27a;
	background: var(--sf-contact-page-bg);
}

.sf-contact-page .page-title {
	display: none;
}

.sf-contact-page .wf-container-main > .sidebar {
	display: none;
}

.sf-contact-page .wf-container-main > .content {
	width: 100%;
}

.sf-contact {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1280px;
	padding: 28px 20px 64px;
	color: var(--sf-contact-graphite);
}

.sf-contact__intro {
	max-width: 760px;
	margin: 0 0 28px;
}

.sf-contact__eyebrow {
	margin: 0 0 10px;
	color: var(--sf-contact-primary);
	font-size: 14px;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sf-contact__title {
	margin: 0;
	color: var(--sf-contact-graphite);
	font-size: clamp(34px, 7vw, 58px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.sf-contact__lead {
	margin: 18px 0 0;
	color: var(--sf-contact-muted);
	font-size: clamp(17px, 2.4vw, 21px);
	line-height: 1.55;
}

.sf-contact__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

.sf-contact__card {
	box-sizing: border-box;
	min-width: 0;
	padding: 24px;
	background: var(--sf-contact-surface);
	border: 1px solid var(--sf-contact-border);
	border-radius: 12px;
	box-shadow: 0 5px 20px rgba(32, 42, 48, 0.07);
}

.sf-contact__card--primary {
	border-top: 4px solid var(--sf-contact-primary);
}

.sf-contact__card-title {
	margin: 0;
	color: var(--sf-contact-graphite);
	font-size: 22px;
	font-weight: 750;
	line-height: 1.25;
}

.sf-contact__card-text {
	margin: 12px 0 0;
	color: var(--sf-contact-muted);
	font-size: 16px;
	line-height: 1.55;
}

.sf-contact__action {
	display: inline-flex;
	min-height: 48px;
	margin-top: 20px;
	padding: 0 20px;
	align-items: center;
	justify-content: center;
	background: var(--sf-contact-primary);
	border-radius: 8px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 750;
	line-height: 1.2;
	text-decoration: none;
}

.sf-contact__action:hover {
	background: var(--sf-contact-primary-hover);
	color: #ffffff;
}

.sf-contact__action:focus-visible,
.sf-contact__email:focus-visible {
	outline: 3px solid var(--sf-contact-focus);
	outline-offset: 3px;
}

.sf-contact__email {
	display: inline-block;
	margin-top: 14px;
	color: var(--sf-contact-graphite);
	font-size: 16px;
	font-weight: 700;
	overflow-wrap: anywhere;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.sf-contact {
		padding: 52px 32px 80px;
	}

	.sf-contact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sf-contact__card--primary {
		grid-row: span 2;
	}
}

@media (min-width: 1100px) {
	.sf-contact__grid {
		gap: 20px;
		grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 0.85fr));
	}

	.sf-contact__card--primary {
		grid-row: auto;
	}
}