/* =========================================================
   REALTOR CENTER — SERVICIOS INMOBILIARIOS
   Versión de producción
========================================================= */

:root {
	--rcs-black: #070707;
	--rcs-dark: #111111;
	--rcs-gold: #dda93d;
	--rcs-gold-dark: #a87417;
	--rcs-cream: #f6f2ea;
	--rcs-white: #ffffff;
	--rcs-text: #171717;
	--rcs-muted: #69645d;
	--rcs-border: rgba(174, 126, 31, 0.20);
	--rcs-shadow: 0 24px 65px rgba(24, 19, 11, 0.13);
}

.rc-services-page {
	background: var(--rcs-cream);
	color: var(--rcs-text);
}

.rc-services-container {
	width: min(1380px, calc(100% - 64px));
	margin-inline: auto;
}

.rc-services-eyebrow {
	margin: 0 0 14px;
	color: var(--rcs-gold);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* =========================================================
   HERO CON NUEVA IMAGEN
========================================================= */

.rc-services-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 720px;
	overflow: hidden;

	background-image:
		linear-gradient(
			90deg,
			rgba(5, 5, 5, 0.94) 0%,
			rgba(5, 5, 5, 0.82) 38%,
			rgba(5, 5, 5, 0.42) 68%,
			rgba(5, 5, 5, 0.18) 100%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.08) 0%,
			rgba(0, 0, 0, 0.48) 100%
		),
		url("../img/servicios/desarrollo-inmobiliario-pachuca.png");

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.rc-services-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	height: 180px;
	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(0, 0, 0, 0.38)
		);
}

.rc-services-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.rc-services-hero__content {
	display: grid;
	grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.62fr);
	gap: clamp(65px, 8vw, 140px);
	align-items: center;

	padding-top: 94px;
	padding-bottom: 94px;
}

.rc-services-hero__copy {
	max-width: 800px;
}

.rc-services-hero h1 {
	max-width: 800px;
	margin: 0;

	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(50px, 5.5vw, 82px);
	font-weight: 700;
	line-height: 0.99;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.rc-services-hero__lead {
	max-width: 690px;
	margin: 28px 0 0;

	color: rgba(255, 255, 255, 0.80);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.7;
}

.rc-services-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.rc-services-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 56px;
	padding: 0 26px;

	border-radius: 11px;

	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;

	transition:
		transform 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease;
}

.rc-services-button:hover {
	transform: translateY(-2px);
}

.rc-services-button--gold {
	background: linear-gradient(135deg, #e6b84f, #d39b2f);
	color: #090909;
	box-shadow: 0 17px 38px rgba(218, 165, 57, 0.23);
}

.rc-services-button--gold:hover {
	color: #090909;
	box-shadow: 0 22px 45px rgba(218, 165, 57, 0.32);
}

.rc-services-button--outline {
	border: 1px solid rgba(255, 255, 255, 0.38);
	background: rgba(255, 255, 255, 0.045);
	color: #ffffff;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.rc-services-button--outline:hover {
	border-color: rgba(255, 255, 255, 0.8);
	color: #ffffff;
}

.rc-services-hero__summary {
	padding: 34px;

	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 22px;

	background: rgba(10, 10, 10, 0.58);
	box-shadow: 0 32px 82px rgba(0, 0, 0, 0.32);

	backdrop-filter: blur(17px);
	-webkit-backdrop-filter: blur(17px);
}

.rc-services-hero__summary-label {
	margin: 0 0 18px;

	color: var(--rcs-gold);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rc-services-hero__summary-item {
	display: grid;
	gap: 6px;

	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.rc-services-hero__summary-item strong {
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	line-height: 1.2;
}

.rc-services-hero__summary-item span {
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
	line-height: 1.55;
}

/* =========================================================
   CATÁLOGO DE SERVICIOS
========================================================= */

.rc-services-catalog {
	padding: 105px 0 115px;

	background-image:
		linear-gradient(
			rgba(248, 245, 239, 0.92),
			rgba(248, 245, 239, 0.92)
		),
		url("../img/nosotros/planos-casa.jpg");

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.rc-services-section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.65fr);
	gap: 50px;
	align-items: end;

	margin-bottom: 50px;
}

.rc-services-section-heading h2 {
	max-width: 760px;
	margin: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(40px, 4vw, 62px);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.rc-services-section-heading > p {
	margin: 0;

	color: var(--rcs-muted);
	font-size: 16px;
	line-height: 1.7;
}

.rc-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.rc-service-card {
	position: relative;
	display: flex;
	flex-direction: column;

	min-height: 390px;
	padding: 28px;
	overflow: hidden;

	border: 1px solid rgba(176, 127, 29, 0.22);
	border-radius: 20px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.98),
			rgba(255, 255, 255, 0.90)
		);

	box-shadow: var(--rcs-shadow);

	transition:
		transform 190ms ease,
		box-shadow 190ms ease,
		border-color 190ms ease;
}

.rc-service-card::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;

	width: 100%;
	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--rcs-gold),
			transparent 72%
		);
}

.rc-service-card:hover {
	transform: translateY(-6px);
	border-color: rgba(176, 127, 29, 0.42);
	box-shadow: 0 32px 80px rgba(27, 21, 12, 0.17);
}

.rc-service-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.rc-service-card__number {
	color: #ae7612;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.rc-service-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	min-height: 29px;
	padding: 0 11px;

	border-radius: 999px;

	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rc-service-status__dot {
	width: 7px;
	height: 7px;

	border-radius: 50%;
	background: currentColor;
}

.rc-service-status--active {
	background: rgba(44, 133, 89, 0.11);
	color: #257349;
}

.rc-service-status--appointment {
	background: rgba(211, 156, 47, 0.14);
	color: #9c6805;
}

.rc-service-status--request {
	background: rgba(42, 87, 136, 0.11);
	color: #315f91;
}

.rc-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 62px;
	height: 62px;
	margin-top: 34px;

	border: 1px solid rgba(183, 129, 24, 0.25);
	border-radius: 17px;

	background: #f7f2e8;
	color: #af7610;
}

.rc-service-card__icon svg {
	width: 29px;
	height: 29px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rc-service-card h3 {
	margin: 25px 0 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 27px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.rc-service-card > p {
	margin: 16px 0 24px;

	color: var(--rcs-muted);
	font-size: 15px;
	line-height: 1.65;
}

.rc-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin-top: auto;

	color: #97640d;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.rc-service-card__link:hover {
	color: #111111;
}

/* =========================================================
   PROCESO
========================================================= */

.rc-services-process {
	padding: 105px 0 110px;
	background: #080808;
	color: #ffffff;
}

.rc-services-section-heading--light h2 {
	color: #ffffff;
}

.rc-services-section-heading--light > p {
	color: rgba(255, 255, 255, 0.63);
}

.rc-services-process__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.rc-services-process__grid article {
	min-height: 230px;
	padding: 28px;

	border: 1px solid rgba(220, 167, 59, 0.26);
	border-radius: 18px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.018)
		);
}

.rc-services-process__grid article > span {
	color: var(--rcs-gold);
	font-size: 12px;
	font-weight: 900;
}

.rc-services-process__grid h3 {
	margin: 35px 0 12px;

	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 25px;
	line-height: 1.1;
}

.rc-services-process__grid p {
	margin: 0;

	color: rgba(255, 255, 255, 0.63);
	font-size: 14px;
	line-height: 1.65;
}

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

.rc-services-cta {
	padding: 84px 0;
	background: #eee8dc;
}

.rc-services-cta__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 50px;
	align-items: center;

	padding: 52px 58px;

	border: 1px solid var(--rcs-border);
	border-radius: 24px;

	background: #ffffff;
	box-shadow: var(--rcs-shadow);
}

.rc-services-cta h2 {
	max-width: 800px;
	margin: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(36px, 3.6vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.rc-services-cta p:not(.rc-services-eyebrow) {
	max-width: 730px;
	margin: 18px 0 0;

	color: var(--rcs-muted);
	font-size: 16px;
	line-height: 1.7;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 1700px) {
	.rc-services-container {
		width: min(1500px, calc(100% - 100px));
	}

	.rc-services-hero {
		min-height: 780px;
	}
}

@media (max-width: 1100px) {
	.rc-services-hero__content {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.rc-services-hero__summary {
		max-width: 720px;
	}

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

	.rc-services-process__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.rc-services-container {
		width: min(100% - 36px, 620px);
	}

	.rc-services-hero {
		min-height: auto;
		background-position: 62% center;
	}

	.rc-services-hero__content {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.rc-services-hero h1 {
		font-size: clamp(42px, 13vw, 61px);
	}

	.rc-services-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rc-services-button {
		width: 100%;
	}

	.rc-services-hero__summary {
		padding: 25px;
	}

	.rc-services-catalog,
	.rc-services-process {
		padding-top: 72px;
		padding-bottom: 76px;
		background-attachment: scroll;
	}

	.rc-services-section-heading {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 34px;
	}

	.rc-services-grid,
	.rc-services-process__grid {
		grid-template-columns: 1fr;
	}

	.rc-service-card {
		min-height: 350px;
	}

	.rc-services-cta {
		padding: 60px 0;
	}

	.rc-services-cta__panel {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 34px 27px;
	}
}