/*
 * Recifemetal — capa de componentes visuales.
 *
 * Los colores y tipografías vienen SIEMPRE de las variables globales del Kit de Elementor
 * (--e-global-color-*, --e-global-typography-*). Así, cambiar un color en
 * Elementor > Ajustes del sitio lo actualiza en todos los componentes.
 *
 * Cada componente se activa poniendo su clase en Elementor > Avanzado > Clases CSS.
 *
 * Índice
 *  0. Tokens
 *  1. Base y accesibilidad
 *  2. Antetítulo (.rm-eyebrow) y enlaces con flecha (.rm-link-arrow)
 *  3. Pétalos (.rm-petal, .rm-petal--alt, .rm-petal--sm)
 *  4. Hero (.rm-hero) y cabecera de página (.rm-page-hero)
 *  5. Contadores (.rm-counter, .rm-stats-inline)
 *  6. Imagen circular con flecha en arco (.rm-arc)
 *  7. Tarjetas (.rm-card) y áreas de negocio (.rm-areas)
 *  8. Método de ejecución / timeline (.rm-steps)
 *  9. Collage de pétalos (.rm-collage)
 * 10. Obras (.rm-obra)
 * 11. Carrusel de logos (.rm-logos)
 * 12. Botones extra (.rm-btn-light, .rm-btn-outline)
 * 13. Cabecera (.rm-header) y menú
 * 14. Footer (.rm-footer)
 * 15. Formularios WPForms
 * 16. FAQ (.rm-faq)
 * 17. Utilidades
 * 18. Movimiento reducido
 */

/* 0. Tokens ---------------------------------------------------------------- */
:root {
	--rm-blue: var(--e-global-color-primary, #1C70AC);
	--rm-night: var(--e-global-color-secondary, #0B2236);
	--rm-text: var(--e-global-color-text, #33383D);
	--rm-green: var(--e-global-color-accent, #64B32E);
	--rm-orange: var(--e-global-color-naranja, #E08409);
	--rm-blue-dark: var(--e-global-color-azulhover, #155A8A);
	--rm-blue-light: var(--e-global-color-azulclaro, #E8F1F7);
	--rm-grey-light: var(--e-global-color-grisclaro, #F4F6F8);
	--rm-border: var(--e-global-color-borde, #D8E1E8);
	--rm-title: var(--e-global-color-titulos, #0F1A24);
	--rm-muted: var(--e-global-color-textosuave, #5F6B76);
	--rm-radius-petal: clamp(48px, 9vw, 160px);
	--rm-ease: cubic-bezier(.22, .61, .36, 1);
	--rm-shadow: 0 18px 40px -18px rgba(11, 34, 54, .35);
	--rm-header-h: 88px;
}

/* 1. Base y accesibilidad -------------------------------------------------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--rm-blue); color: #fff; }
:focus-visible { outline: 3px solid var(--rm-orange); outline-offset: 3px; }
img { height: auto; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* 2. Antetítulo y enlace con flecha ---------------------------------------- */
.rm-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.rm-eyebrow .elementor-heading-title::before {
	content: "";
	width: 28px;
	height: 3px;
	border-radius: 3px;
	background: var(--rm-green);
	flex: none;
}
.rm-eyebrow--center .elementor-heading-title { justify-content: center; }

/* Línea bajo titulares de sección (como la matriz) */
.rm-title-line .elementor-heading-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: .55em;
	background: var(--rm-blue);
	border-radius: 3px;
	transform-origin: left;
	transition: width .6s var(--rm-ease);
}
.rm-title-line--center .elementor-heading-title::after { margin-left: auto; margin-right: auto; }
.rm-title-line--light .elementor-heading-title::after { background: var(--rm-green); }

.rm-link-arrow .elementor-button {
	background: transparent !important;
	color: var(--rm-blue) !important;
	padding: 6px 0 !important;
	border-radius: 0 !important;
	gap: 10px;
}
.rm-link-arrow .elementor-button .elementor-button-icon { transition: transform .35s var(--rm-ease); }
.rm-link-arrow .elementor-button:hover .elementor-button-icon { transform: translateX(6px); }
.rm-link-arrow .elementor-button:hover { color: var(--rm-blue-dark) !important; }
.rm-link-arrow--light .elementor-button { color: #fff !important; }
.rm-link-arrow--light .elementor-button:hover { color: var(--rm-green) !important; }

/* 3. Pétalos ---------------------------------------------------------------- */
/* Esquinas superior-derecha e inferior-izquierda muy redondeadas (forma del logo) */
.rm-petal img,
.rm-petal.e-con,
.rm-petal .elementor-widget-container > video {
	border-radius: 0 var(--rm-radius-petal) 0 var(--rm-radius-petal);
}
.rm-petal--alt img,
.rm-petal--alt.e-con {
	border-radius: var(--rm-radius-petal) 0 var(--rm-radius-petal) 0;
}
.rm-petal--sm { --rm-radius-petal: clamp(28px, 4vw, 64px); }
.rm-petal img { width: 100%; object-fit: cover; }
.rm-petal--cover img { height: 100%; aspect-ratio: var(--rm-ratio, 4 / 3); }
.rm-petal--zoom { overflow: hidden; }
.rm-petal--zoom img { transition: transform 1.2s var(--rm-ease); }
.rm-petal--zoom:hover img { transform: scale(1.04); }

/* 4. Hero ------------------------------------------------------------------ */
.rm-hero {
	border-bottom-left-radius: clamp(56px, 10vw, 180px);
	overflow: hidden;
	isolation: isolate;
}
.rm-hero .elementor-background-video-container { border-bottom-left-radius: inherit; }
.rm-hero::after {
	/* Pétalos decorativos (contorno blanco) en la esquina inferior derecha */
	content: "";
	position: absolute;
	inset: auto -2px -2px auto;
	height: auto;
	width: clamp(120px, 16vw, 260px);
	aspect-ratio: 1;
	background: url("../img/hero-petalos.svg") no-repeat right bottom / contain;
	z-index: 3;
	pointer-events: none;
}
.rm-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 28px;
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 14px;
	transform: translateX(-50%);
}
.rm-hero__scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #fff;
	animation: rm-scroll 1.8s infinite;
}
@keyframes rm-scroll {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(14px); }
}

.rm-page-hero {
	border-bottom-left-radius: clamp(48px, 8vw, 140px);
	overflow: hidden;
}

/* Breadcrumbs de Yoast sobre fondo oscuro */
.rm-breadcrumbs,
.rm-breadcrumbs a { color: rgba(255, 255, 255, .85); font-size: .9rem; text-decoration: none; }
.rm-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.rm-breadcrumbs .breadcrumb_last { color: #fff; font-weight: 700; }

/* 5. Contadores ------------------------------------------------------------- */
.rm-counter .elementor-counter { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
.rm-counter .elementor-counter-number-wrapper { justify-content: flex-start; }
.rm-counter .elementor-counter-title {
	position: relative;
	padding-top: 16px;
	justify-content: flex-start;
	text-align: left;
}
.rm-counter--center .elementor-counter { align-items: center; }
.rm-counter--center .elementor-counter-number-wrapper,
.rm-counter--center .elementor-counter-title { justify-content: center; text-align: center; }
.rm-counter .elementor-counter-title::before {
	content: "";
	position: absolute;
	top: 0;
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background: var(--rm-blue);
}
.rm-counter--center .elementor-counter-title::before { left: 50%; transform: translateX(-50%); }
.rm-counter--light .elementor-counter-title::before { background: var(--rm-green); }

/* Cifras en línea con separadores verticales (página de servicio) */
.rm-stats-inline > .e-con-inner > .e-con,
.rm-stats-inline > .e-con { position: relative; }
@media (min-width: 768px) {
	.rm-stats-inline > .e-con-inner > .e-con:not(:first-child)::before,
	.rm-stats-inline > .e-con:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 10%;
		bottom: 10%;
		width: 2px;
		background: var(--rm-blue);
		opacity: .85;
	}
}

/* 6. Imagen circular con flecha en arco ------------------------------------ */
.rm-arc { position: relative; }
.rm-arc img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}
.rm-arc::before {
	content: "";
	position: absolute;
	inset: -6%;
	background: url("../img/arco-flecha.svg") no-repeat center / contain;
	pointer-events: none;
	transition: transform 1.4s var(--rm-ease);
}
.rm-arc:hover::before,
.rm-areas .e-n-tab-title:hover ~ * .rm-arc::before { transform: rotate(-24deg); }

/* 7. Tarjetas ---------------------------------------------------------------- */
.rm-card {
	transition: transform .5s var(--rm-ease), box-shadow .5s var(--rm-ease);
	overflow: hidden;
}
.rm-card:hover { transform: translateY(-6px); box-shadow: var(--rm-shadow); }
.rm-card img { transition: transform 1.1s var(--rm-ease); }
.rm-card:hover img { transform: scale(1.05); }
.rm-card .elementor-widget-image { overflow: hidden; }

/* Áreas de negocio: tabs anidados verticales */
.rm-areas { --n-tabs-heading-width: 32%; --n-tabs-title-white-space: normal; }
.rm-areas .e-n-tabs { gap: clamp(32px, 5vw, 80px) !important; }
.rm-areas .rm-arc { max-width: 440px; margin-inline: auto; }
@media (max-width: 767px) {
	.rm-areas .rm-arc { max-width: 300px; }
}
.rm-areas .e-n-tabs-heading { gap: 0 !important; }
.rm-areas .e-n-tab-title,
.rm-areas .e-n-tab-title .e-n-tab-title-text {
	font-family: var(--e-global-typography-secondary-font-family, "Open Sans"), sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(1rem, .95rem + .25vw, 1.15rem) !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.rm-areas .e-n-tab-title {
	position: relative;
	justify-content: flex-start !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rm-border) !important;
	background: transparent !important;
	padding: 18px 44px 18px 0 !important;
	transition: color .3s, padding .4s var(--rm-ease);
	text-align: left;
}
.rm-areas .e-n-tab-title::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: currentColor;
	-webkit-mask: url("../img/flecha.svg") no-repeat center / contain;
	mask: url("../img/flecha.svg") no-repeat center / contain;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .3s, transform .4s var(--rm-ease);
}
.rm-areas .e-n-tab-title[aria-selected="true"],
.rm-areas .e-n-tab-title:hover { padding-left: 14px !important; }
.rm-areas .e-n-tab-title[aria-selected="true"]::after,
.rm-areas .e-n-tab-title:hover::after { opacity: 1; transform: none; }
.rm-areas .e-n-tab-title[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--rm-blue); }
.rm-areas .e-n-tabs-content > .e-con { animation: rm-fade-in .6s var(--rm-ease); }
@keyframes rm-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 8. Método de ejecución (timeline) --------------------------------------- */
/* El número y la línea se dibujan en el titular del paso (el ::before de .e-con lo usa Elementor). */
.rm-steps { counter-reset: rm-step; }
.rm-step { counter-increment: rm-step; }
.rm-step .elementor-widget-heading .elementor-heading-title { position: relative; }
.rm-step .elementor-widget-heading .elementor-heading-title::before {
	content: counter(rm-step, decimal-leading-zero);
	display: block;
	font-family: var(--e-global-typography-primary-font-family, "Open Sans"), sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
	line-height: 1;
	letter-spacing: -1px;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--rm-blue);
	margin-bottom: 18px;
	transition: color .4s;
}
.rm-step:hover .elementor-heading-title::before { color: var(--rm-blue); }
.rm-step .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 92px;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--rm-border), transparent);
}
.rm-steps--dark .rm-step .elementor-heading-title::before { -webkit-text-stroke-color: var(--rm-green); }
.rm-steps--dark .rm-step:hover .elementor-heading-title::before { color: var(--rm-green); }
.rm-steps--dark .rm-step .elementor-heading-title::after { background: linear-gradient(90deg, rgba(255,255,255,.25), transparent); }

/* 9. Collage de pétalos ---------------------------------------------------- */
.rm-collage { --gap: clamp(8px, 1.2vw, 18px); }
.rm-collage .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-collage .elementor-widget-image,
.rm-collage .elementor-widget-image .elementor-widget-container { height: 100%; }

/* 10. Obras (carrusel) ------------------------------------------------------ */
.rm-obra { overflow: hidden; }
.rm-obra img { transition: transform 1.2s var(--rm-ease); }
.rm-obra:hover img { transform: scale(1.05); }
.rm-obra__meta .elementor-heading-title { color: var(--rm-blue); }
.rm-carousel .swiper-pagination-bullet-active { background: var(--rm-blue); }
.rm-carousel .elementor-swiper-button {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--rm-border);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s, color .3s, border-color .3s;
}
.rm-carousel .elementor-swiper-button:hover { background: var(--rm-blue); border-color: var(--rm-blue); color: #fff; }
.rm-carousel .elementor-swiper-button:hover svg { fill: #fff; }
@media (max-width: 767px) { .rm-carousel .elementor-swiper-button { display: none !important; } }

/* 11. Logos de clientes (marquee continuo) -------------------------------- */
.rm-logos .swiper-wrapper { transition-timing-function: linear !important; }
.rm-logos .swiper-slide { display: flex; align-items: center; justify-content: center; height: 110px; }
.rm-logos .swiper-slide-image {
	max-height: 64px;
	width: auto !important;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .4s, opacity .4s;
}
.rm-logos .swiper-slide-image:hover { filter: none; opacity: 1; }

/* 12. Botones extra --------------------------------------------------------- */
.rm-btn-light .elementor-button { background: #fff !important; color: var(--rm-blue) !important; }
.rm-btn-light .elementor-button:hover { background: var(--rm-green) !important; color: #fff !important; }
.rm-btn-outline .elementor-button {
	background: transparent !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.rm-btn-outline .elementor-button:hover { background: #fff !important; color: var(--rm-blue) !important; }
.rm-btn-outline--dark .elementor-button { color: var(--rm-blue) !important; box-shadow: inset 0 0 0 2px var(--rm-blue); }
.rm-btn-outline--dark .elementor-button:hover { background: var(--rm-blue) !important; color: #fff !important; }
.elementor-button { transition: background-color .3s, color .3s, box-shadow .3s, transform .3s var(--rm-ease); }
.elementor-button:active { transform: scale(.98); }

/* 13. Cabecera y menú ------------------------------------------------------- */
/* Cabecera fija y transparente sobre el hero; al hacer scroll (.is-scrolled, ver recifemetal.js)
   pasa a fondo blanco translúcido con sombra y oculta la barra superior. */
.rm-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	transition: background-color .35s, box-shadow .35s, transform .35s var(--rm-ease);
}
body.admin-bar .rm-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .rm-header { top: 46px; } }
.rm-header .rm-logo img { transition: max-height .35s var(--rm-ease), width .35s var(--rm-ease); }
.rm-header .rm-logo--dark { display: none; }
.rm-header.is-scrolled,
.rm-header.is-open {
	background-color: rgba(255, 255, 255, .97) !important;
	backdrop-filter: saturate(160%) blur(10px);
	box-shadow: 0 6px 24px -12px rgba(11, 34, 54, .25);
}
.rm-header.is-scrolled .rm-logo--dark,
.rm-header.is-open .rm-logo--dark { display: block; }
.rm-header.is-scrolled .rm-logo--light,
.rm-header.is-open .rm-logo--light { display: none; }
.rm-header.is-scrolled .rm-topbar { display: none !important; }
@media (min-width: 1025px) {
	.rm-header.is-scrolled .rm-logo img { width: 180px !important; }
}

/* Estado transparente: textos en blanco */
.rm-header:not(.is-scrolled):not(.is-open) .rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a,
.rm-header:not(.is-scrolled):not(.is-open) .rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a .sub-arrow { color: #fff; }
.rm-header:not(.is-scrolled):not(.is-open) .rm-nav .elementor-menu-toggle { color: #fff; }
.rm-header:not(.is-scrolled):not(.is-open) .rm-nav .elementor-menu-toggle svg { fill: #fff; }
.rm-header:not(.is-scrolled):not(.is-open) .rm-topbar,
.rm-header:not(.is-scrolled):not(.is-open) .rm-topbar .elementor-icon-list-text,
.rm-header:not(.is-scrolled):not(.is-open) .rm-topbar .elementor-icon-list-icon i,
.rm-header:not(.is-scrolled):not(.is-open) .rm-topbar .elementor-icon-list-icon svg { color: rgba(255, 255, 255, .9) !important; fill: rgba(255, 255, 255, .9) !important; }
.rm-header:not(.is-scrolled):not(.is-open) .rm-topbar { border-color: rgba(255, 255, 255, .22) !important; }
/* Botón de presupuesto: en transparente, contorno blanco */
.rm-header:not(.is-scrolled):not(.is-open) .rm-header-cta .elementor-button { background: transparent !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.rm-header:not(.is-scrolled):not(.is-open) .rm-header-cta .elementor-button:hover { background: #fff !important; color: var(--rm-blue) !important; }

.rm-nav .elementor-menu-toggle { background: transparent !important; }

.rm-logo-wrap { flex-shrink: 0 !important; }
.rm-logo-wrap .elementor-widget-image img { width: 100% !important; height: auto; }

/* Menú móvil desplegable a pantalla completa bajo la cabecera */
@media (max-width: 1024px) {
	.rm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		top: var(--rm-header-bottom, 72px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		max-height: calc(100vh - var(--rm-header-bottom, 72px));
		overflow-y: auto;
		box-shadow: 0 20px 40px -20px rgba(11, 34, 54, .35);
	}
	.rm-nav .elementor-nav-menu--dropdown a { border-bottom: 1px solid var(--rm-border); }
	.rm-nav .elementor-nav-menu--dropdown .sub-menu a { padding-left: 34px !important; font-size: .95em; }
}

/* Subrayado animado de los elementos del menú */
.rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a { position: relative; }
.rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: var(--e-nav-menu-horizontal-menu-item-margin, 16px);
	right: var(--e-nav-menu-horizontal-menu-item-margin, 16px);
	bottom: 6px;
	height: 2px;
	background: var(--rm-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--rm-ease);
}
.rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover::after,
.rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a::after,
.rm-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Desplegable "Áreas de negocio" en 3 columnas (escritorio). La apertura/cierre la gestiona Elementor. */
@media (min-width: 1025px) {
	.rm-nav .elementor-nav-menu--main .menu-item.rm-mega > .sub-menu {
		column-count: 3;
		column-gap: 12px;
		width: min(880px, 78vw) !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 22px !important;
		border-radius: 0 28px 0 28px;
		box-shadow: 0 30px 60px -20px rgba(11, 34, 54, .35);
		border-top: 3px solid var(--rm-blue);
		left: 50% !important;
		margin-left: calc(min(880px, 78vw) / -2) !important;
	}
	.rm-nav .elementor-nav-menu--main .menu-item.rm-mega > .sub-menu > li { break-inside: avoid; }
	.rm-nav .elementor-nav-menu--main .menu-item.rm-mega > .sub-menu a {
		border-radius: 8px;
		white-space: normal !important;
		line-height: 1.3;
	}
	.rm-nav .elementor-nav-menu--main .menu-item.rm-mega > .sub-menu a:hover { background: var(--rm-blue-light) !important; }
}
.rm-nav .sub-menu .menu-item-external > a::after {
	content: "↗";
	margin-left: 6px;
	font-size: .85em;
	opacity: .7;
}

/* Botón "Solicitar presupuesto" dentro del menú: solo en el desplegable móvil */
.rm-nav .elementor-nav-menu--main .rm-menu-cta { display: none !important; }
.rm-nav .elementor-nav-menu--dropdown .rm-menu-cta { padding: 16px 18px 20px; }
.rm-nav .elementor-nav-menu--dropdown .rm-menu-cta > a {
	justify-content: center;
	background: var(--rm-blue) !important;
	color: #fff !important;
	border-radius: 0 22px 0 22px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: .85rem !important;
	border: 0 !important;
}

/* Barra superior */
.rm-topbar a { text-decoration: none; transition: color .25s; }
.rm-topbar a:hover { color: var(--rm-green) !important; }

/* 14. Footer ---------------------------------------------------------------- */
.rm-footer { position: relative; overflow: hidden; }
.rm-footer > .e-con { position: relative; z-index: 1; }
.rm-footer::after {
	content: "";
	position: absolute;
	inset: -60px -60px auto auto;
	width: clamp(200px, 26vw, 420px);
	height: auto;
	aspect-ratio: 1;
	z-index: 0;
	background: url("../img/petalos-footer.svg") no-repeat center / contain;
	opacity: .5;
	pointer-events: none;
}
.rm-footer a { text-decoration: none; transition: color .25s; }
.rm-footer .elementor-icon-list-item a:hover,
.rm-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--rm-green) !important; }
.rm-footer .elementor-nav-menu a { padding-left: 0 !important; padding-right: 0 !important; }
.rm-footer-legal .elementor-nav-menu { gap: 6px 24px; flex-wrap: wrap; }
@media (max-width: 767px) { .rm-footer-legal .elementor-nav-menu { justify-content: flex-start !important; } }
.rm-nowrap .elementor-button { white-space: nowrap; }

/* 15. Formularios WPForms -------------------------------------------------- */
.rm-form .wpforms-container { margin: 0 !important; }
.rm-form .wpforms-field { padding: 0 0 18px !important; }
.rm-form .wpforms-field-label {
	font-family: var(--e-global-typography-secondary-font-family, "Open Sans"), sans-serif;
	font-weight: 600 !important;
	font-size: .9rem !important;
	color: var(--rm-title) !important;
	margin-bottom: 6px !important;
}
.rm-form input[type=text],
.rm-form input[type=email],
.rm-form input[type=tel],
.rm-form select,
.rm-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	border: 1px solid var(--rm-border) !important;
	border-radius: 6px !important;
	padding: 14px 16px !important;
	font-size: 1rem !important;
	height: auto !important;
	background: #fff !important;
	color: var(--rm-title) !important;
	transition: border-color .25s, box-shadow .25s;
}
.rm-form textarea { min-height: 130px !important; }
.rm-form input:focus,
.rm-form select:focus,
.rm-form textarea:focus {
	border-color: var(--rm-blue) !important;
	box-shadow: 0 0 0 4px rgba(28, 112, 172, .15) !important;
	outline: none !important;
}
.rm-form .wpforms-field-gdpr-checkbox label,
.rm-form .wpforms-field-checkbox label { font-size: .9rem !important; color: var(--rm-muted) !important; }
.rm-form button[type=submit] {
	background: var(--rm-blue) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 22px 0 22px !important;
	padding: 17px 34px !important;
	height: auto !important;
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-size: .875rem !important;
	cursor: pointer;
	transition: background .3s;
}
.rm-form button[type=submit]:hover { background: var(--rm-blue-dark) !important; }
.rm-form--dark .wpforms-field-label { color: #fff !important; }
.rm-form--dark .wpforms-field-gdpr-checkbox label { color: rgba(255,255,255,.75) !important; }
.rm-form--dark .wpforms-field-gdpr-checkbox a { color: #fff; }


/* Los estilos globales de campos del Kit afectan a todos los input: se neutralizan en casillas y radios */
input[type=checkbox], input[type=radio] { padding: 0 !important; border: 0 !important; width: auto !important; height: auto !important; box-shadow: none !important; }
@media (max-width: 600px) {
	.rm-form .wpforms-field.wpforms-one-half { width: 100% !important; margin-left: 0 !important; float: none !important; }
}

/* 16. FAQ ------------------------------------------------------------------- */
.rm-faq .elementor-accordion-item { border: 0 !important; border-bottom: 1px solid var(--rm-border) !important; }
.rm-faq .elementor-tab-title { padding: 22px 0 !important; transition: color .3s; }
.rm-faq .elementor-tab-title.elementor-active { color: var(--rm-blue); }
.rm-faq .elementor-tab-content { padding: 0 0 24px !important; border: 0 !important; }

/* Foto en blanco y negro que recupera el color al pasar el ratón */
.rm-bw img { filter: grayscale(1) contrast(1.05); transition: filter .8s var(--rm-ease); }
.rm-bw:hover img { filter: none; }
/* Enlace "anterior" con flecha a la izquierda */
.rm-link-back .elementor-button:hover .elementor-button-icon { transform: translateX(-6px); }

/* Los iconos SVG de los botones heredan siempre el color del texto */
.elementor-button .elementor-button-icon svg { fill: currentColor !important; }
/* Tarjetas de obra a la misma altura dentro de su fila */
.e-con > .rm-obra { flex-grow: 1; }

/* 17. Utilidades ------------------------------------------------------------ */
.rm-shadow { box-shadow: var(--rm-shadow); }
.rm-round-tl { border-top-left-radius: var(--rm-radius-petal); overflow: hidden; }
.rm-round-br { border-bottom-right-radius: var(--rm-radius-petal); overflow: hidden; }
.rm-round-bl { border-bottom-left-radius: var(--rm-radius-petal); overflow: hidden; }
.rm-round-tr { border-top-right-radius: var(--rm-radius-petal); overflow: hidden; }
.rm-overlap-up { margin-top: calc(-1 * clamp(40px, 6vw, 96px)) !important; position: relative; z-index: 4; }
.rm-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Placeholder de páginas en preparación */
.rm-placeholder-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--rm-blue-light);
	color: var(--rm-blue);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* 18. Movimiento reducido --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.elementor-invisible { visibility: visible !important; }
}

/* Hero: degradado superior para que la cabecera transparente siempre sea legible */
.rm-hero > .elementor-background-video-container::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 240px;
	background: linear-gradient(rgba(11, 34, 54, .65), rgba(11, 34, 54, 0));
	z-index: 1;
}
.rm-hero > .e-con { position: relative; z-index: 2; }