/**
 * VNM — Wordmark del pie.
 * Es puramente decorativo, pero su caja de texto mide 620 px de alto y con el
 * margen negativo se monta ~30 px sobre la última fila de enlaces y sobre el
 * icono de Facebook: aunque las letras se vean transparentes, el span seguía
 * capturando el cursor y esos dos elementos no se podían pulsar.
 */
#page > footer .elementor-widget-rkit_advanced_heading {
	pointer-events: none;
}

/**
 * VNM — Tarjetas del proceso (sección "Nuestro Proceso" de Servicios).
 * En reposo el overlay blanco tapa la foto; al pasar el ratón aparece bajo un
 * velo de verdes de marca: arriba translúcido para que se lea la imagen y abajo
 * casi opaco, que es donde caen el título y el texto.
 */
.elementor-element.vnm-proceso .rkit-cta:hover .rkit-cta-img__overlay {
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		rgba( 0, 125, 33, 0.72 ) 0%,
		rgba( 0, 68, 30, 0.90 ) 45%,
		rgba( 0, 40, 23, 0.96 ) 100%
	);
	opacity: 1;
}

/* Las ilustraciones ya son verdes, así que un velo verde encima apenas se
   distinguía. Al desaturar la foto (es hermana del velo, no su madre, así que
   el filtro no toca al degradado) el tinte de marca queda inequívoco. */
.elementor-element.vnm-proceso .rkit-cta-img__image {
	transition: filter 0.45s ease;
}

.elementor-element.vnm-proceso .rkit-cta:hover .rkit-cta-img__image {
	filter: grayscale( 1 ) contrast( 1.08 );
}

/* El icono invierte sus colores: de glifo blanco sobre verde a verde sobre blanco. */
.elementor-element.vnm-proceso .rkit-cta:hover .rkit-cta__graphic_element {
	background-color: #ffffff;
}

.elementor-element.vnm-proceso .rkit-cta:hover .rkit-cta-icon__graphic_element {
	color: #007d21;
}

.elementor-element.vnm-proceso .rkit-cta__graphic_element,
.elementor-element.vnm-proceso .rkit-cta-icon__graphic_element {
	transition: background-color 0.4s ease, color 0.4s ease;
}

/**
 * VNM — Encabezado superpuesto.
 * El header flota sobre el hero, como en el demo del tema. Sacándolo del flujo
 * el hero arranca en el borde superior sin importar cuánto mida el logo; con
 * margen negativo quedaba siempre un sobrante (alto del header − margen).
 */
#page > header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

/* Logo un 25 % mayor que su tamaño natural (210 px → 263 px de ancho).
   La medida va sobre la imagen, no sobre el widget: el widget tiene relleno
   propio y su ancho en porcentaje dependía del tamaño de la ventana. */
/* 263 px = 210 naturales × 1.25. Entre 1025 y 1440 px el menú en español deja
   poco sitio libre (medido: 182 px a 1025 y 346 px a 1440), así que el logo baja
   por escalones para no montarse encima. */
#page > header .elementor-widget-site-logo img {
	width: 263px;
	max-width: none;
	height: auto;
}

@media (max-width: 1439px) {
	#page > header .elementor-widget-site-logo img { width: 220px; }
}

@media (max-width: 1279px) {
	#page > header .elementor-widget-site-logo img { width: 170px; }
}

@media (max-width: 1099px) {
	#page > header .elementor-widget-site-logo img { width: 155px; }
}

/* Con el menú plegado en hamburguesa vuelve a haber espacio de sobra. */
@media (max-width: 1024px) {
	#page > header .elementor-widget-site-logo img { width: 175px; }
}

/* En pantallas chicas el encabezado es proporcionalmente más alto y llegaría a
   montarse sobre el título del hero, así que la primera sección reserva sitio. */
@media (max-width: 1024px) {
	#page > header + .elementor > .elementor-element:first-child {
		padding-top: 9em;
	}
}

@media (max-width: 767px) {
	#page > header + .elementor > .elementor-element:first-child {
		padding-top: 8em;
	}
}

/**
 * VNM — Selector de servicios (sección "Nuestros Servicios" del inicio).
 * El menú de la izquierda actúa como pestañas y alterna los paneles de la derecha.
 */

/* Solo el panel activo se muestra. La doble clase iguala la especificidad
   de los selectores que genera Elementor para cada elemento. */
.elementor-element.vnm-svc-panel.vnm-svc-panel {
	display: none;
}

.elementor-element.vnm-svc-panel.vnm-svc-panel.is-active {
	display: flex;
}

/* Dentro del editor todos los paneles quedan visibles para poder editarlos. */
.elementor-editor-active .elementor-element.vnm-svc-panel.vnm-svc-panel {
	display: flex;
}

.vnm-svc-tab {
	cursor: pointer;
}

/* La pestaña activa toma el color de texto, igual que el ítem destacado del
   diseño original. El acento verde queda reservado para hover y foco, de modo
   que "seleccionado" y "apuntado con el ratón" se distinguen entre sí. */
.elementor-element.vnm-svc-tab.vnm-svc-tab.is-active .elementor-icon-box-title,
.elementor-element.vnm-svc-tab.vnm-svc-tab.is-active .elementor-icon-box-title a {
	color: var( --e-global-color-text );
}

.elementor-element.vnm-svc-tab.vnm-svc-tab.is-active .elementor-icon {
	color: var( --e-global-color-text );
	fill: var( --e-global-color-text );
	border-color: var( --e-global-color-text );
}

.elementor-element.vnm-svc-tab.vnm-svc-tab.is-active.elementor-view-stacked .elementor-icon {
	background-color: var( --e-global-color-text );
}

/* Foco visible por teclado sin depender del outline por defecto del navegador. */
.vnm-svc-tab:focus-visible,
.vnm-svc-tab a:focus-visible {
	outline: 2px solid var( --e-global-color-accent );
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-element.vnm-svc-panel.vnm-svc-panel.is-active {
		animation: vnm-svc-fade 260ms ease-out;
	}

	@keyframes vnm-svc-fade {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}