/* Nutrofeed - Widget "Sistema por Áreas" */

/* El wrapper que genera Elementor para el widget es un flex-item dentro de
   Containers (display:flex) y no crece por defecto (flex-grow:0), así que se
   queda con el ancho de "contenido" de la grilla en vez de llenar la fila.
   Forzamos que siempre ocupe el 100% disponible, sea el contenedor flex-row,
   flex-column o el sistema clásico de Secciones/Columnas. */
.elementor-widget-nutrofeed-gates {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
	flex-grow: 1;
}

.nf-gates-block {
	--nf-overlay: #101410;
}

.nf-gates {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	width: 100%;
	margin: 0 auto;
}

.nf-gate,
.nf-gate * {
	box-sizing: border-box;
}

.nf-gate {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4.4;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: #dfe2df;
	cursor: pointer;
	padding: 34px 28px;
}

.nf-gate--top {
	justify-content: flex-start;
	padding-top: 24px;
}

.nf-gate-art {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.nf-gate:hover .nf-gate-art {
	transform: scale(1.05);
}

/* Degradado de contraste sobre la imagen: fallback fijo (idéntico al diseño original)
   + mejora progresiva con color-mix() para navegadores modernos que respeta el color elegido. */
.nf-gate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(16, 20, 16, .94) 0%,
		rgba(16, 20, 16, .82) 24%,
		rgba(16, 20, 16, .42) 52%,
		rgba(16, 20, 16, .05) 100%);
	background: linear-gradient(to top,
		color-mix(in srgb, var(--nf-overlay, #101410) 94%, transparent) 0%,
		color-mix(in srgb, var(--nf-overlay, #101410) 82%, transparent) 24%,
		color-mix(in srgb, var(--nf-overlay, #101410) 42%, transparent) 52%,
		color-mix(in srgb, var(--nf-overlay, #101410) 5%, transparent) 100%);
}

.nf-gate--contrast::after {
	background: linear-gradient(to top,
		rgba(16, 20, 16, .97) 0%,
		rgba(16, 20, 16, .90) 30%,
		rgba(16, 20, 16, .55) 55%,
		rgba(16, 20, 16, .10) 100%);
	background: linear-gradient(to top,
		color-mix(in srgb, var(--nf-overlay, #101410) 97%, transparent) 0%,
		color-mix(in srgb, var(--nf-overlay, #101410) 90%, transparent) 30%,
		color-mix(in srgb, var(--nf-overlay, #101410) 55%, transparent) 55%,
		color-mix(in srgb, var(--nf-overlay, #101410) 10%, transparent) 100%);
}

.nf-gate-idx,
.nf-gate-title,
.nf-gate-desc,
.nf-gate-cta {
	position: relative;
	z-index: 2;
}

.nf-gate-idx {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: .28em;
	color: rgba(255, 255, 255, .7);
}

.nf-gate-title {
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 34px);
	letter-spacing: -0.02em;
	margin-top: 12px;
	line-height: 1;
	color: #fff;
}

.nf-gate-desc {
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .9);
	margin-top: 14px;
	max-width: 230px;
	min-height: 60px;
}

.nf-gate-cta {
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	opacity: .85;
	transition: gap .3s, opacity .3s;
}

.nf-gate:hover .nf-gate-cta {
	gap: 18px;
	opacity: 1;
}

.nf-arrow {
	color: #3DAE2B;
}

.nf-thread-dot {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: #3DAE2B;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .6s;
	z-index: 3;
}

.nf-gate:hover .nf-thread-dot {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.nf-gate-art,
	.nf-gate-cta,
	.nf-thread-dot {
		transition: none;
	}
}