/*
Theme Name: Hello Elementor Child - RGS Asociados
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* =========================================================
   RGS HEADER
   Elementor controla el estado inicial.
   CSS controla el estado sticky.
   ========================================================= */

.rgs-header {
	transition:
		background-color 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

/* Estado sticky */
.rgs-header.elementor-sticky--effects {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-color: #dfe3ea;
	box-shadow: 0 4px 20px rgba(16, 18, 33, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   LOGOS
   ========================================================= */

/* Estado inicial */
.rgs-logo-light {
	display: block;
}

.rgs-logo-dark {
	display: none;
}

/* Estado sticky */
.rgs-header.elementor-sticky--effects .rgs-logo-light {
	display: none;
}

.rgs-header.elementor-sticky--effects .rgs-logo-dark {
	display: block;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

/* Estado sticky */
.rgs-header.elementor-sticky--effects
.rgs-header__nav .elementor-item {
	color: #232847 !important;
}

.rgs-header.elementor-sticky--effects
.rgs-header__nav .elementor-item:hover,
.rgs-header.elementor-sticky--effects
.rgs-header__nav .elementor-item:focus {
	color: #b8892b !important;
}

.rgs-header.elementor-sticky--effects
.rgs-header__nav .elementor-item-active {
	color: #b8892b !important;
}


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

/* Estado sticky */
.rgs-header.elementor-sticky--effects
.rgs-header__cta .elementor-button {
	background-color: #232847 !important;
	color: #ffffff !important;
	border-color: #232847 !important;
}

.rgs-header.elementor-sticky--effects
.rgs-header__cta .elementor-button:hover {
	background-color: #101221 !important;
	color: #ffffff !important;
	border-color: #101221 !important;
}


/* =========================================================
   MENU TOGGLE
   Elementor controla estructura y estado inicial.
   CSS cambia los colores en estado sticky.
   ========================================================= */

.rgs-header.elementor-sticky--effects
.rgs-menu-toggle .elementor-icon {
	color: #232847 !important;
	border-color: #dfe3ea !important;
	background-color: transparent !important;
}

.rgs-header.elementor-sticky--effects
.rgs-menu-toggle .elementor-icon svg {
	fill: currentColor !important;
	stroke: currentColor !important;
}


/* =========================================================
   RGS - Botón con flecha animada
   Uso: añadir la clase "rgs-btn-arrow" al widget de botón
   ========================================================= */

.rgs-btn-arrow .elementor-button-text {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.rgs-btn-arrow .elementor-button-text::after {
	content: "→";
	display: inline-block;
	font-size: 0.875rem;
	line-height: 1;
	color: currentColor;
	transition: transform 0.25s ease;
}

.rgs-btn-arrow .elementor-button:hover .elementor-button-text::after {
	transform: translateX(3px);
}

/* =========================================================
   HERO HOME
   Remate dorado bajo "alto valor"
   ========================================================= */

.rgs-hero-highlight {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.rgs-hero-highlight::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.5rem;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		90deg,
		#eac261 0%,
		rgba(234, 194, 97, 0.20) 100%
	);
}

/* =========================================================
   HERO HOME
   Valores inferiores
   ========================================================= */


/* Mobile */
@media (max-width: 767px) {

	.rgs-hero-values .elementor-icon-list-items {
		display: grid;
		grid-template-columns: max-content max-content;
		justify-content: space-between;
		gap: 0.75rem 1rem;
		width: 100%;
	}

	.rgs-hero-values .elementor-icon-list-item {
		white-space: nowrap;
	}
}

/* =========================================================
   SECTION LABEL
   ========================================================= */

.rgs-section-label .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
}

.rgs-section-label .elementor-heading-title::before {
	content: "";
	width: 2rem;
	height: 1px;
	background-color: #b8892b;
	flex-shrink: 0;
}

/* Variante sobre fondo oscuro */
.rgs-section-label--dark .elementor-heading-title::before {
	background-color: #eac261;
}

/* Variante dynamic field */
.rgs-section-label .jet-listing-dynamic-field__content {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.rgs-section-label .jet-listing-dynamic-field__content::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: #B8892B;
    flex: 0 0 auto;
}


/* =========================================================
   CIFRAS - MÉTRICA
   ========================================================= */

.rgs-stat {
	position: relative;
}

.rgs-stat::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 3.5rem;
	height: 1px;
	background-color: #eac261;
	pointer-events: none;
}

/* =========================================================
   HERO HOME
   Recurso visual lateral
   ========================================================= */

.rgs-hero__media {
	position: relative;
	z-index: 1;
	border-radius: 3px;
}

/* Esquina superior derecha */
.rgs-hero__media::before {
	content: "";
	position: absolute;
	top: -20px;
	right: -20px;
	width: 160px;
	height: 160px;
	border-top: 1px solid rgba(234, 194, 97, 0.35);
	border-right: 1px solid rgba(234, 194, 97, 0.35);
	pointer-events: none;
	z-index: -1;
}

/* Esquina inferior izquierda */
.rgs-hero__media::after {
	content: "";
	position: absolute;
	bottom: -20px;
	left: -20px;
	width: 96px;
	height: 96px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	border-left: 1px solid rgba(255, 255, 255, 0.20);
	pointer-events: none;
	z-index: -1;
}

/* Se ocultan fuera de desktop */
@media (max-width: 1024px) {
	.rgs-hero__media::before,
	.rgs-hero__media::after {
		display: none;
	}
}

/* =========================================================
   SERVICIOS DESTACADOS
   Hover de tarjeta
   ========================================================= */

.rgs-service-card {
	position: relative;
}

.rgs-service-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #eac261; /* Global: Énfasis */
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	pointer-events: none;
}

.rgs-service-card:hover::after {
	transform: scaleX(1);
}

/* Al hacer hover en toda la tarjeta, desplaza la flecha del CTA */
.rgs-service-card:hover
.rgs-btn-arrow .elementor-button-text::after {
	transform: translateX(4px);
}

.rgs-service-icon {
	transition: transform 0.4s ease;
}

.rgs-service-card:hover .rgs-service-icon {
	transform: translateY(-2px);
}

/* =========================================================
   SOLUCIONES POR TIPO DE CLIENTE / SERVICIOS
   Hover compartido de tarjeta
   ========================================================= */


/* =========================================================
   ICONO · WIDGET NATIVO DE ELEMENTOR
   Conserva el comportamiento original
   ========================================================= */

/* Caja del icono */
.rgs-client-card:hover
.rgs-client-icon.elementor-widget-icon {
	background-color: #FBF4E2; /* Gold Light */
	border-color: #EAC261;     /* Énfasis */
}


/* Color del icono */
.rgs-client-card:hover
.rgs-client-icon.elementor-widget-icon .elementor-icon {
	color: #B8892B; /* Gold Dark */
}


/* =========================================================
   ICONO · JETENGINE DYNAMIC FIELD
   Caja interna generada por JetEngine
   ========================================================= */

.rgs-client-icon-dynamic
.jet-listing-dynamic-field__inline-wrap {
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.rgs-client-card:hover
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__inline-wrap {
	background-color: #FBF4E2 !important; /* Gold Light */
	border-color: #EAC261 !important;     /* Énfasis */
}


/* =========================================================
   ICONO · JETENGINE DYNAMIC FIELD
   Icono generado mediante etiqueta <i>
   ========================================================= */

.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i {
	color: #232847;
	transition: color 0.3s ease;
}

.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i::before {
	color: inherit;
	transition: color 0.3s ease;
}

.rgs-client-card:hover
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i {
	color: #B8892B !important; /* Gold Dark */
}

.rgs-client-card:hover
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i::before {
	color: #B8892B !important; /* Gold Dark */
}


/* =========================================================
   SERVICIOS · ESTADO DESTACADO
   Borde, línea superior e icono
   ========================================================= */

.rgs-client-card:has(.rgs-service-featured-label) {
	position: relative;
	border-color: #EAC261 !important;
}


/* Línea superior dorada */
.rgs-client-card:has(.rgs-service-featured-label)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #EAC261;
	pointer-events: none;
	z-index: 2;
}


/* Caja del icono destacado en estado normal */
.rgs-client-card:has(.rgs-service-featured-label)
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__inline-wrap {
	background-color: #FBF4E2 !important;
	border-color: #EAC261 !important;
}


/* Icono destacado en estado normal */
.rgs-client-card:has(.rgs-service-featured-label)
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i,
.rgs-client-card:has(.rgs-service-featured-label)
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i::before {
	color: #232847 !important;
}


/* =========================================================
   SERVICIOS · ESTADO DESTACADO · HOVER
   Igual comportamiento que el resto de tarjetas
   ========================================================= */

.rgs-client-card:has(.rgs-service-featured-label):hover
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__inline-wrap {
	background-color: #FBF4E2 !important;
	border-color: #EAC261 !important;
}

.rgs-client-card:has(.rgs-service-featured-label):hover
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i,
.rgs-client-card:has(.rgs-service-featured-label):hover
.rgs-client-icon-dynamic
.jet-listing-dynamic-field__content i::before {
	color: #B8892B !important;
}


/* =========================================================
   CTA · CAMBIO DE COLOR
   ========================================================= */

.rgs-client-card:hover
.rgs-btn-arrow .elementor-button-text {
	color: #B8892B; /* Gold Dark */
}


/* =========================================================
   CTA · MOVIMIENTO Y COLOR DE FLECHA
   ========================================================= */

.rgs-client-card:hover
.rgs-btn-arrow .elementor-button-text::after {
	color: #B8892B; /* Gold Dark */
	transform: translateX(4px);
}

/* =========================================================
   PROCESO DE TRABAJO
   Timeline + animación desktop
   ========================================================= */

.rgs-process__step {
	position: relative;
	padding-top: 40px;

	/* Línea gris base + línea dorada animada */
	background-image:
		linear-gradient(#EAC261, #EAC261),
		linear-gradient(
			rgba(255, 255, 255, 0.15),
			rgba(255, 255, 255, 0.15)
		);

	background-repeat: no-repeat;
	background-position:
		left top,
		left top;

	background-size:
		0% 1px,
		100% 1px;

	transition: background-size 0.7s ease-out;
}


/* Rombo: estado inicial */
.rgs-process__step::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 11px;
	height: 11px;
	box-sizing: border-box;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.30);
	transform: rotate(45deg);
	transition:
		background-color 0.5s ease,
		border-color 0.5s ease;
	z-index: 2;
	pointer-events: none;
}


/* Texto: estado inicial */
.rgs-process__step > .elementor-element {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.7s ease-out,
		transform 0.7s ease-out;
}


/* =========================================================
   ESTADO ACTIVO
   ========================================================= */

.rgs-process.is-visible .rgs-process__step {
	background-size:
		100% 1px,
		100% 1px;
}

.rgs-process.is-visible .rgs-process__step::after {
	background-color: #EAC261;
	border-color: #EAC261;
}

.rgs-process.is-visible .rgs-process__step > .elementor-element {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================================
   SECUENCIA
   ========================================================= */

.rgs-process__step:nth-child(1) {
	transition-delay: 0ms;
}

.rgs-process__step:nth-child(1)::after {
	transition-delay: 0ms;
}

.rgs-process__step:nth-child(1) > .elementor-element {
	transition-delay: 120ms;
}


.rgs-process__step:nth-child(2) {
	transition-delay: 180ms;
}

.rgs-process__step:nth-child(2)::after {
	transition-delay: 180ms;
}

.rgs-process__step:nth-child(2) > .elementor-element {
	transition-delay: 300ms;
}


.rgs-process__step:nth-child(3) {
	transition-delay: 360ms;
}

.rgs-process__step:nth-child(3)::after {
	transition-delay: 360ms;
}

.rgs-process__step:nth-child(3) > .elementor-element {
	transition-delay: 480ms;
}


.rgs-process__step:nth-child(4) {
	transition-delay: 540ms;
}

.rgs-process__step:nth-child(4)::after {
	transition-delay: 540ms;
}

.rgs-process__step:nth-child(4) > .elementor-element {
	transition-delay: 660ms;
}


.rgs-process__step:nth-child(5) {
	transition-delay: 720ms;
}

.rgs-process__step:nth-child(5)::after {
	transition-delay: 720ms;
}

.rgs-process__step:nth-child(5) > .elementor-element {
	transition-delay: 840ms;
}

/* =========================================================
   PROCESO DE TRABAJO
   Timeline vertical — Tablet y móvil
   ========================================================= */

@media (max-width: 1023px) {

	/* =========================================================
	   CONTENEDOR GENERAL
	   ========================================================= */

	.rgs-process__track {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0;
	}


	/* No utilizamos pseudo-elementos en el track */
	.rgs-process__track::before,
	.rgs-process__track::after {
		content: none !important;
		display: none !important;
	}


	/* =========================================================
	   ETAPAS
	   ========================================================= */

	.rgs-process__step {
		position: relative;
		width: 100% !important;

		padding:
			0
			0
			36px
			32px;

		border-top: 0 !important;

		/*
		 * La línea se dibuja directamente
		 * sobre cada etapa:
		 *
		 * Capa 1 = dorada animada
		 * Capa 2 = gris base
		 */
		background-image:
			linear-gradient(#EAC261, #EAC261),
			linear-gradient(
				rgba(255, 255, 255, 0.15),
				rgba(255, 255, 255, 0.15)
			) !important;

		background-repeat:
			no-repeat,
			no-repeat !important;

		background-position:
			5px 0,
			5px 0 !important;

		background-size:
			1px 0,
			1px 100% !important;

		transition:
			background-size 0.45s ease-out;
	}


	/* Primera etapa:
	   la línea empieza en el centro del primer rombo */
	.rgs-process__step:first-child {
		background-position:
			5px 11px,
			5px 11px !important;

		background-size:
			1px 0,
			1px calc(100% - 11px) !important;
	}


	/* Última etapa:
	   la línea solo llega hasta el último rombo */
	.rgs-process__step:last-child {
		padding-bottom: 0;

		background-position:
			5px 0,
			5px 0 !important;

		background-size:
			1px 0,
			1px 11px !important;
	}


	/* =========================================================
	   LÍNEA DORADA ACTIVA
	   ========================================================= */

	.rgs-process.is-visible .rgs-process__step {
		background-size:
			1px 100%,
			1px 100% !important;
	}


	/* Primera etapa activa */
	.rgs-process.is-visible .rgs-process__step:first-child {
		background-size:
			1px calc(100% - 11px),
			1px calc(100% - 11px) !important;
	}


	/* Última etapa activa */
	.rgs-process.is-visible .rgs-process__step:last-child {
		background-size:
			1px 11px,
			1px 11px !important;
	}


	/* =========================================================
	   DESACTIVAR LÍNEA HORIZONTAL DE DESKTOP
	   ========================================================= */

	.rgs-process__step::before {
		content: none !important;
		display: none !important;
	}


	/* =========================================================
	   ROMBOS
	   ========================================================= */

	.rgs-process__step::after {
		content: "";
		position: absolute;

		top: 6px;
		left: 0;

		width: 10px;
		height: 10px;

		box-sizing: border-box;

		background-color: transparent;
		border: 1px solid rgba(255, 255, 255, 0.30);

		transform: rotate(45deg);

		transition:
			background-color 0.5s ease,
			border-color 0.5s ease;

		z-index: 2;
		pointer-events: none;
	}


	/* Rombo activo */
	.rgs-process.is-visible .rgs-process__step::after {
		background-color: #EAC261;
		border-color: #EAC261;
	}


	/* =========================================================
	   TEXTOS
	   ========================================================= */

	.rgs-process__step > .elementor-element {
		opacity: 0;
		transform: translateY(10px);

		transition:
			opacity 0.7s ease-out,
			transform 0.7s ease-out;
	}


	.rgs-process.is-visible
	.rgs-process__step > .elementor-element {
		opacity: 1;
		transform: translateY(0);
	}


	/* =========================================================
	   SECUENCIA MÓVIL
	   150ms entre etapas
	   ========================================================= */

	.rgs-process__step:nth-child(1) {
		transition-delay: 0ms;
	}

	.rgs-process__step:nth-child(1)::after,
	.rgs-process__step:nth-child(1) > .elementor-element {
		transition-delay: 0ms;
	}


	.rgs-process__step:nth-child(2) {
		transition-delay: 150ms;
	}

	.rgs-process__step:nth-child(2)::after,
	.rgs-process__step:nth-child(2) > .elementor-element {
		transition-delay: 150ms;
	}


	.rgs-process__step:nth-child(3) {
		transition-delay: 300ms;
	}

	.rgs-process__step:nth-child(3)::after,
	.rgs-process__step:nth-child(3) > .elementor-element {
		transition-delay: 300ms;
	}


	.rgs-process__step:nth-child(4) {
		transition-delay: 450ms;
	}

	.rgs-process__step:nth-child(4)::after,
	.rgs-process__step:nth-child(4) > .elementor-element {
		transition-delay: 450ms;
	}


	.rgs-process__step:nth-child(5) {
		transition-delay: 600ms;
	}

	.rgs-process__step:nth-child(5)::after,
	.rgs-process__step:nth-child(5) > .elementor-element {
		transition-delay: 600ms;
	}
}

/* =========================================================
   TARJETA DESTACADA
   Hover de título, CTA e imagen
   ========================================================= */


/* Imagen */
.rgs-featured-card
.rgs-featured-card__image img {
	transition: transform 0.5s ease-out;
}


/* Título */
.rgs-featured-card
.rgs-featured-card__title .elementor-heading-title {
	transition: color 0.3s ease;
}


/* =========================================================
   ESTADO HOVER
   ========================================================= */


/* Zoom de imagen */
.rgs-featured-card:hover
.rgs-featured-card__image img {
	transform: scale(1.03);
}


/* Título */
.rgs-featured-card:hover
.rgs-featured-card__title .elementor-heading-title {
	color: #B8892B;
}


/* CTA */
.rgs-featured-card:hover
.rgs-btn-arrow .elementor-button-text {
	color: #B8892B;
}


/* Flecha CTA */
.rgs-featured-card:hover
.rgs-btn-arrow .elementor-button-text::after {
	color: #B8892B;
	transform: translateX(4px);
}

/* =========================================================
   TARJETAS DE CONTACTO
   Hover de dato e icono al pasar sobre toda la card
   ========================================================= */


/* Dato principal: teléfono, WhatsApp o email */
.rgs-contact-card
.rgs-contact-card__link .elementor-heading-title,
.rgs-contact-card
.rgs-contact-card__link a {
	transition: color 0.3s ease;
}


/* Widget del icono */
.rgs-contact-card
.rgs-contact-card__icon {
	transition:
		border-color 0.3s ease,
		background-color 0.3s ease;
}


/* Icono interior */
.rgs-contact-card
.rgs-contact-card__icon .elementor-icon,
.rgs-contact-card
.rgs-contact-card__icon .elementor-icon i {
	transition: color 0.3s ease;
}


/* =========================================================
   ESTADO HOVER
   ========================================================= */


/* Teléfono / email / WhatsApp */
.rgs-contact-card:hover
.rgs-contact-card__link .elementor-heading-title,
.rgs-contact-card:hover
.rgs-contact-card__link a {
	color: #B8892B !important; /* Gold Dark */
}


/* Borde del widget Icono */
.rgs-contact-card:hover
.rgs-contact-card__icon {
	border-color: #EAC261 !important; /* Énfasis */
}


/* Color del icono */
.rgs-contact-card:hover
.rgs-contact-card__icon .elementor-icon,
.rgs-contact-card:hover
.rgs-contact-card__icon .elementor-icon i {
	color: #B8892B !important; /* Gold Dark */
}

/* =========================================================
   JETENGINE · ENCABEZADOS DINÁMICOS
   Elimina márgenes nativos de H1-H6 dentro de Dynamic Field
   ========================================================= */

.jet-listing-dynamic-field__content:is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
}

/* =========================================================
   CRITERIO INMOBILIARIO · TEMARIO ACORDEÓN
   Numeración, apertura, cierre y estados interactivos
   ========================================================= */

.rgs-program-item {
	border-bottom: 1px solid #DFE3EA;
}

.rgs-program-item__header {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 18px;
	padding: 24px 0;
	cursor: pointer;
	outline: none;
}

.rgs-program-item__number {
	flex: 0 0 auto;
	min-width: 20px;
	font-family: "Montserrat", sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	color: #4A5068;
}

.rgs-program-item__title {
	flex: 1 1 auto;
	min-width: 0;
	transition: color 0.3s ease;
}

.rgs-program-item__icon {
	flex: 0 0 auto;
	margin-left: auto;
	color: #B8892B;
	transform-origin: center;
	transition:
		transform 0.3s ease,
		color 0.3s ease;
}

.rgs-program-item.is-open .rgs-program-item__icon {
	transform: rotate(180deg);
}

.rgs-program-item__content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 0.35s ease,
		opacity 0.25s ease;
}

.rgs-program-item.is-open .rgs-program-item__content {
	opacity: 1;
}

.rgs-program-item__content > *:last-child {
	margin-bottom: 24px;
}

.rgs-program-item__header:focus-visible {
	outline: 2px solid #EAC261;
	outline-offset: 4px;
}

.rgs-program-item__header:hover .rgs-program-item__title {
	color: #B8892B;
}


/* =========================================================
   CRITERIO INMOBILIARIO · TEMARIO ACORDEÓN · MÓVIL
   Ajustes de espaciado
   ========================================================= */

@media (max-width: 767px) {

	.rgs-program-item__header {
		gap: 12px;
		padding: 20px 0;
	}

	.rgs-program-item__number {
		min-width: 18px;
		font-size: 0.625rem;
	}

	.rgs-program-item__content > *:last-child {
		margin-bottom: 20px;
	}
}



/* ==========================================================
   RGS JOURNEY
========================================================== */

.rgs-journey {
    position: relative;

    width: 100%;
    height: 1640vh;

    margin: 0 !important;
    padding: 0 !important;

    background: #070c21;
}


/* ==========================================================
   VIEWPORT STICKY
========================================================== */

.rgs-journey-sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #070c21;

    color: #ffffff;
}


/* ==========================================================
   FALLBACK IMAGE
========================================================== */

.rgs-fallback {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;

    transition: opacity .2s ease;
}


/* Se oculta cuando Canvas está funcionando */

.rgs-journey.is-ready .rgs-fallback {
    opacity: 0;
}


/* ==========================================================
   CANVAS
========================================================== */

.rgs-canvas {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* ==========================================================
   OVERLAY
========================================================== */

.rgs-overlay {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 9, 31, .84) 0%,
            rgba(4, 9, 31, .67) 29%,
            rgba(4, 9, 31, .40) 53%,
            rgba(4, 9, 31, .15) 78%,
            rgba(4, 9, 31, .07) 100%
        );
}


/* ==========================================================
   CABECERA
========================================================== */

.rgs-top {
    position: absolute;

    top: 120px;
    left: 6vw;
    right: 6vw;

    z-index: 5;

    display: flex;

    justify-content: space-between;
    align-items: center;
}


.rgs-eyebrow {
    color: rgba(255,255,255,.96);

    font-size: 13px;
    font-weight: 500;

    letter-spacing: .18em;
}

.rgs-eyebrow.is-rgs {
    color: #EAC261;
}

.rgs-counter {
    display: flex;

    gap: 10px;

    align-items: center;

    color: #ffffff;

    font-size: 15px;
    font-weight: 400;
}


.rgs-separator {
    opacity: .42;
}


/* ==========================================================
   COPY
========================================================== */

.rgs-copy {
    position: absolute;

    left: 6vw;
    top: 50%;

    z-index: 5;

    width: min(560px, 42vw);

    transform: translateY(-46%);
}


/* ==========================================================
   ETAPA
========================================================== */

.rgs-stage-label {
    margin-bottom: 18px;

    color: rgba(255,255,255,.96);

    font-size: 13px;
    font-weight: 500;

    letter-spacing: .17em;

    /*
     * Visible como fallback.
     * JS controla después opacity/transform.
     */
    opacity: 1;
    transform: translateY(0);

    will-change:
        opacity,
        transform;
}


.rgs-stage-label strong {
    margin-left: 13px;

    color: #ffffff;

    font-size: 23px;
    font-weight: 600;

    letter-spacing: normal;
}


/* ==========================================================
   TÍTULO
========================================================== */

#rgs-title {
    max-width: 590px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            4.3vw,
            68px
        );

    font-weight: 600;

    line-height: .98;

    letter-spacing: -.04em;

    opacity: 1;
    transform: translateY(0);

    will-change:
        opacity,
        transform;
}


/* ==========================================================
   DESCRIPCIÓN
========================================================== */

#rgs-description {
    max-width: 520px;

    margin: 0;

    color: rgba(255,255,255,.94);

    font-size:
        clamp(
            17px,
            1.2vw,
            21px
        );

    font-weight: 400;

    line-height: 1.55;

    opacity: 1;
    transform: translateY(0);

    will-change:
        opacity,
        transform;
}


/* ==========================================================
   NAVEGACIÓN
========================================================== */

.rgs-nav {
    position: absolute;

    right: 3vw;
    top: 50%;

    z-index: 6;

    display: flex;

    flex-direction: column;
    align-items: center;

    transform: translateY(-50%);
}


.rgs-nav button {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 56px;
    height: 56px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.48);

    border-radius: 50%;

    background:
        rgba(5,10,30,.22);

    color: #ffffff;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-size: 22px;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.rgs-nav button:hover {
    background:
        rgba(255,255,255,.17);

    transform:
        scale(1.05);
}


.rgs-nav button:focus-visible {
    outline:
        2px solid
        rgba(255,255,255,.9);

    outline-offset: 4px;
}


.rgs-nav-line {
    width: 1px;
    height: 44px;

    margin: 9px 0;

    background:
        rgba(255,255,255,.38);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .rgs-copy {
        width: min(520px, 52vw);
    }


    #rgs-title {
        font-size:
            clamp(
                40px,
                6vw,
                62px
            );
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .rgs-journey {
        height: 2200vh;
    }


    .rgs-journey-sticky {
        height: 100vh;
        height: 100dvh;
    }


    .rgs-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(4,9,31,.94) 0%,
                rgba(4,9,31,.79) 32%,
                rgba(4,9,31,.45) 62%,
                rgba(4,9,31,.12) 100%
            );
    }


    .rgs-top {
        top: auto;

        bottom:
            calc(
                24px +
                env(safe-area-inset-bottom, 0px)
            );

        left: 20px;
        right: 20px;

        align-items: center;
    }


    .rgs-eyebrow {
        font-size: 10px;

        letter-spacing: .16em;
    }


    .rgs-counter {
        font-size: 12px;
    }


    .rgs-copy {
        left: 20px;
        right: 66px;

        top: auto;

        bottom:
            calc(
                105px +
                env(safe-area-inset-bottom, 0px)
            );

        width: auto;

        transform: none;
    }


    .rgs-stage-label {
        margin-bottom: 12px;

        font-size: 10px;
    }


    .rgs-stage-label strong {
        margin-left: 8px;

        font-size: 18px;
    }


    #rgs-title {
        max-width: 100%;

        margin-bottom: 14px;

        font-size:
            clamp(
                34px,
                10vw,
                44px
            );

        line-height: .98;
    }


    #rgs-description {
        max-width: 100%;

        font-size: 16px;

        line-height: 1.45;
    }


    .rgs-nav {
        right: 10px;

        top: 50%;
    }


    .rgs-nav button {
        width: 43px;
        height: 43px;

        font-size: 18px;
    }


    .rgs-nav-line {
        height: 30px;

        margin: 7px 0;
    }

}

/* ==========================================================
   RGS · DOCUMENTACIÓN ACORDEÓN
   Solo comportamiento
========================================================== */

.rgs-doc-item__icon {
    transform-origin: center;
    transition: transform 0.3s ease;
}

.rgs-doc-item.is-open .rgs-doc-item__icon {
    transform: rotate(180deg);
}

.rgs-doc-item__content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}

.rgs-doc-item.is-open .rgs-doc-item__content {
    opacity: 1;
}

.rgs-doc-item__summary {
    opacity: 1;
    max-height: 60px;
    overflow: hidden;

    transition:
        opacity 0.2s ease,
        max-height 0.3s ease,
        margin 0.3s ease;
}

.rgs-doc-item.is-open .rgs-doc-item__summary {
    opacity: 0;
    max-height: 0;
    margin-top: 0 !important;
}


/* RGS — Focus de campos JetFormBuilder */
body .jet-form-builder select.jet-form-builder__field:focus-visible,
body .jet-form-builder input.jet-form-builder__field:focus-visible,
body .jet-form-builder textarea.jet-form-builder__field:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: var(--e-global-color-0b695bd) !important;
}


















/* =========================================================
   RGS ASOCIADOS — FORMULARIO MAESTRO
   CSS MÍNIMO
   Wrapper Elementor: rgs-master-form
   ========================================================= */

.rgs-master-form {
  --rgs-navy: #1d254d;
  --rgs-gold: #d5a126;
  --rgs-gold-border: #e6bd57;
  --rgs-gold-soft: #f7efd9;
  --rgs-text: #151c3e;
  --rgs-border: #d7dce6;
}


/* =========================================================
   1. PERFIL COMO CARDS
   ========================================================= */

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__fields-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__field-wrap {
  width: auto !important;
  margin: 0 !important;
}


/* Card completa */

.rgs-master-form
.cb-ypvveogo
label.for-radio {
  display: block !important;

  width: 100%;
  height: 100%;
  box-sizing: border-box;

  padding: 18px 20px !important;

  border: 1px solid var(--rgs-border);
  background: #fff;
  cursor: pointer;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}


/* ---------------------------------------------------------
   IMPORTANTE:
   El radio visible es span::before.

   Creamos:

   [ ○ ] [ Título             ]
         [ Descripción        ]
   --------------------------------------------------------- */

.rgs-master-form
.cb-ypvveogo
label.for-radio > span {
  display: grid !important;

  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;

  column-gap: 12px !important;
  row-gap: 4px !important;

  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--rgs-text);
  font-weight: 600;
  line-height: 1.35;
}


/* Radio visual */

.rgs-master-form
.cb-ypvveogo
label.for-radio > span::before {
  grid-column: 1;
  grid-row: 1 / span 2;

  align-self: start;

  margin: 2px 0 0 0 !important;
}


/* Descripción */

.rgs-master-form
.cb-ypvveogo
label.for-radio > span::after {
  grid-column: 2;
  grid-row: 2;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--rgs-text);
  font-weight: 400;
  line-height: 1.45;
}


/* Propietario */

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__field-wrap:nth-child(1)
label.for-radio > span::after {
  content: "Desea vender, rentar, regularizar o proteger un inmueble.";
}


/* Desarrollador */

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__field-wrap:nth-child(2)
label.for-radio > span::after {
  content: "Necesita estructurar, administrar o revisar un proyecto inmobiliario.";
}


/* Profesional */

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__field-wrap:nth-child(3)
label.for-radio > span::after {
  content: "Busca respaldo para sus operaciones, clientes o equipo comercial.";
}


/* Orientación */

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__field-wrap:nth-child(4)
label.for-radio > span::after {
  content: "No está seguro de qué perfil o servicio corresponde a su caso.";
}


/* Hover */

.rgs-master-form
.cb-ypvveogo
label.for-radio:hover {
  border-color: var(--rgs-gold-border);
  transform: translateY(-1px);
}


/* Card seleccionada */

.rgs-master-form
.cb-ypvveogo
.jet-form-builder__field-wrap:has(input[type="radio"]:checked)
label.for-radio {
  border-color: var(--rgs-gold-border);
  background: var(--rgs-gold-soft);
}


/* =========================================================
   2. PREFERENCIA DE CONTACTO COMO CHIPS
   ========================================================= */

.rgs-master-form
.cb-keymws6l
.jet-form-builder__fields-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.rgs-master-form
.cb-keymws6l
.jet-form-builder__field-wrap {
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.rgs-master-form
.cb-keymws6l
label.for-radio {
  position: relative;
  display: inline-flex !important;
  margin: 0;
  cursor: pointer;
}

.rgs-master-form
.cb-keymws6l
input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
}

.rgs-master-form
.cb-keymws6l
label.for-radio > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 8px 14px;

  border: 1px solid var(--rgs-border);
  border-radius: 999px;
  background: #fff;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background-color .18s ease;
}

.rgs-master-form
.cb-keymws6l
label.for-radio:hover > span {
  border-color: var(--rgs-gold-border);
}

.rgs-master-form
.cb-keymws6l
input[type="radio"]:checked + span {
  border-color: var(--rgs-gold-border);
  background: var(--rgs-gold-soft);
}

/* =========================================================
   3. TELÉFONO INTERNACIONAL
   ========================================================= */

.rgs-master-form .iti {
  width: 100%;
}


/* Bandera integrada */

.rgs-master-form .iti__selected-country,
.rgs-master-form .iti__selected-flag,
.rgs-master-form .iti__selected-country-primary {
  background: #fff !important;
}


/* Hover */

.rgs-master-form .iti__selected-country:hover,
.rgs-master-form .iti__selected-flag:hover,
.rgs-master-form .iti__selected-country-primary:hover {
  background: #f7f8fa !important;
}


/* Quitar focus negro del selector de país */

.rgs-master-form .iti__selected-country:focus,
.rgs-master-form .iti__selected-country:focus-visible,
.rgs-master-form .iti__selected-country-primary:focus,
.rgs-master-form .iti__selected-country-primary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   Buscador del dropdown
   Neutraliza el focus-visible negro de Hello Elementor
   --------------------------------------------------------- */

.rgs-master-form .iti input.iti__search-input:focus,
.rgs-master-form .iti input.iti__search-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;

  border-color: var(--rgs-gold-border) !important;

  box-shadow:
    0 0 0 1px var(--rgs-gold-border) !important;
}


/* Dropdown */

.rgs-master-form .iti__dropdown-content {
  border-color: var(--rgs-border) !important;
}

.rgs-master-form .iti__country:hover,
.rgs-master-form .iti__country.iti__highlight {
  background: #f7f8fa !important;
}


/* =========================================================
   4. BOTONES
   Solo microinteracción.
   ========================================================= */

.rgs-master-form .jet-form-builder__next-page,
.rgs-master-form .jet-form-builder__prev-page,
.rgs-master-form .jet-form-builder__submit {
  transition: transform .18s ease;
}

.rgs-master-form .jet-form-builder__next-page:hover,
.rgs-master-form .jet-form-builder__prev-page:hover,
.rgs-master-form .jet-form-builder__submit:hover {
  transform: translateY(-2px);
}


/* =========================================================
   5. REVIEW FINAL
   ========================================================= */

.rgs-master-form
.rgs-review__section-title {
  text-transform: uppercase;
  letter-spacing: .1em;
}


/* Sin separador por dato */

.rgs-master-form
.rgs-review__row {
  padding: 4px 0;
  border: 0 !important;
}


/* Perfil */

.rgs-master-form
.rgs-review--request {
  border: 0;
}


/* Separador 1 */

.rgs-master-form
.rgs-review--service {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rgs-border);
}


/* Separador 2 */

.rgs-master-form
.rgs-review--contact {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rgs-border);
}


/* Separador 3 */

.rgs-master-form .rgs-review--isr,
.rgs-master-form .rgs-review--affiliation,
.rgs-master-form .rgs-review--developer,
.rgs-master-form .rgs-review--orientation,
.rgs-master-form .rgs-review--general {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rgs-border);
}


/* =========================================================
   6. RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

  .rgs-master-form
  .cb-ypvveogo
  .jet-form-builder__fields-group {
    grid-template-columns: 1fr;
  }

  .rgs-master-form
  .cb-keymws6l
  .jet-form-builder__fields-group {
    flex-wrap: wrap !important;
  }

}