/*
 * Menú de Greening — réplica del widget `nav-menu` de Elementor Pro.
 *
 * Cada valor procede de los ajustes que tenía el widget original en la base de
 * datos; van anotados para que se pueda contrastar uno a uno.
 *
 *   CABECERA (widget e3ab4d0)   Montserrat 16px peso 300 · #FFFFFF
 *                               align_items: justify · text_align: center
 *                               dropdown en móvil · toggle #FFFFFF a la derecha
 *
 *   PIE      (widget 45fc92b)   Montserrat 16px peso 600 · interlineado 12px
 *                               #FFFFFF · hover y activo #C7FCCE
 *                               vertical · relleno 6px/8px · separación 0
 *                               subrayado de 2px en #C7FCCE
 */

:root {
	--greening-menu-color: #ffffff;
	--greening-menu-color-activo: #c7fcce;
	--greening-menu-fuente: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.greening-menu__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.greening-menu__lista a {
	font-family: var( --greening-menu-fuente );
	font-size: 16px;
	color: var( --greening-menu-color );
	text-decoration: none;
	display: block;
	transition: color 0.2s ease;
}

/* ── Cabecera: horizontal, repartido a lo ancho ──────────────────────────── */

.greening-menu--horizontal .greening-menu__lista {
	/* align_items: justify — los elementos se reparten el ancho disponible */
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.greening-menu--horizontal .greening-menu__lista a {
	font-weight: 300;
	text-align: center;
	/* El widget de Pro dejaba la barra en 66 px de alto: se replica con el
	   relleno vertical de los enlaces. */
	padding: 6px 12px;
}

.greening-menu--horizontal .greening-menu__lista a:hover,
.greening-menu--horizontal .greening-menu__lista .current-menu-item > a {
	color: var( --greening-menu-color-activo );
}

/* ── Pie: vertical, con subrayado al pasar por encima ────────────────────── */

.greening-menu--vertical .greening-menu__lista {
	flex-direction: column;
	gap: 0; /* menu_space_between: 0 */
}

.greening-menu--vertical .greening-menu__lista li {
	/* Sin interlineado heredado: el alto lo fija el propio enlace. */
	line-height: 0;
}

.greening-menu--vertical .greening-menu__lista a {
	font-weight: 600;
	line-height: 12px;
	padding: 6px 8px; /* vertical 6 · horizontal 8 */
	position: relative;
}

/* El subrayado va como pseudo-elemento, no como borde: un `border-bottom`
   sumaría 2 px al alto de cada elemento y el menú acabaría midiendo 36 px más
   que el original. Con `::after` el alto no cambia. */
.greening-menu--vertical .greening-menu__lista a::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 0;
	height: 2px; /* pointer_width: 2px */
	background: transparent;
	transition: background 0.2s ease;
}

.greening-menu--vertical .greening-menu__lista a:hover,
.greening-menu--vertical .greening-menu__lista .current-menu-item > a {
	color: var( --greening-menu-color-activo );
}

.greening-menu--vertical .greening-menu__lista a:hover::after,
.greening-menu--vertical .greening-menu__lista .current-menu-item > a::after {
	background: var( --greening-menu-color-activo );
}

/* ── Submenús ────────────────────────────────────────────────────────────── */

.greening-menu__lista .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.greening-menu--horizontal .greening-menu__lista > li {
	position: relative;
}

.greening-menu--horizontal .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: rgba( 0, 0, 0, 0.85 );
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 100;
}

.greening-menu--horizontal > .greening-menu__lista > li:hover > .sub-menu,
.greening-menu--horizontal > .greening-menu__lista > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.greening-menu--horizontal .sub-menu a {
	text-align: left;
	padding: 6px 16px;
}

/* ── Móvil: el menú horizontal se pliega (dropdown: mobile) ──────────────── */

.greening-menu__boton {
	display: none;
	cursor: pointer;
	padding: 10px;
	margin-left: auto; /* toggle_align: right */
}

.greening-menu__boton span {
	display: block;
	width: 24px;
	height: 2px;
	background: var( --greening-menu-color ); /* toggle_color: #FFFFFF */
	margin: 5px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media ( max-width: 767px ) {

	.greening-menu--horizontal {
		display: flex;
		flex-direction: column;
	}

	.greening-menu--horizontal .greening-menu__boton {
		display: block;
	}

	.greening-menu--horizontal .greening-menu__lista {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.greening-menu--horizontal .greening-menu__interruptor:checked ~ .greening-menu__lista {
		display: flex;
	}

	.greening-menu--horizontal .greening-menu__lista a {
		text-align: left;
		padding: 10px 16px;
	}

	/* El botón se convierte en aspa al abrir. */
	.greening-menu__interruptor:checked + .greening-menu__boton span:nth-child( 1 ) {
		transform: translateY( 7px ) rotate( 45deg );
	}

	.greening-menu__interruptor:checked + .greening-menu__boton span:nth-child( 2 ) {
		opacity: 0;
	}

	.greening-menu__interruptor:checked + .greening-menu__boton span:nth-child( 3 ) {
		transform: translateY( -7px ) rotate( -45deg );
	}

	/* En móvil los submenús se despliegan en línea, sin superponerse. */
	.greening-menu--horizontal .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		background: transparent;
		padding-left: 16px;
	}
}

/* ── Cabecera fija ────────────────────────────────────────────────────────────
 *
 * La sección del menú tenía `sticky: top` en Elementor Pro, que la mantiene a la
 * vista al desplazar la página. Sin Pro ese ajuste no hace nada, así que se
 * replica aquí. La clase `greening-sticky` se añade a la propia sección en los
 * datos de Elementor, de modo que sigue siendo visible y editable desde el editor.
 *
 * Se usa `fixed` —no `sticky`— porque es lo que aplicaba Pro: la cabecera no
 * ocupa espacio en el flujo y el contenido empieza justo debajo.
 */
.greening-cabecera .greening-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
}

/* Hueco equivalente al alto de la barra fija.
 *
 * Al fijar la barra, deja de ocupar sitio en el flujo y el resto de la cabecera
 * subiría 66 px. En producción, Elementor Pro reserva ese espacio al aplicar su
 * `sticky`: la cabecera mide 710 px con barra fija incluida. Se replica aquí. */
.greening-cabecera {
	padding-top: 66px;
}

/* ── Tarjetas de «últimas novedades» ──────────────────────────────────────────
 *
 * En el original, la tarjeta entera era UN solo widget (`call-to-action`), de
 * modo que dentro no había separación entre piezas. Aquí son dos widgets —el
 * título y el texto—, así que Elementor aplica su separación entre widgets
 * (20 px) y el navegador su margen de párrafo. Se anulan ambos: la única
 * separación es la de 15 px que el título lleva en sus propios ajustes, igual
 * que en el original.
 */
.greening-tarjeta .elementor-widget:not( :last-child ) {
	/* Elementor usa la propiedad lógica y el selector con `:not`. Hay que igualar
	   ambas cosas, o su regla gana por orden de carga. */
	margin-block-end: 0;
	margin-bottom: 0;
}

.greening-tarjeta .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}