/* Nutrofeed - Widget "Hero animado" */

/* Ver nota en gates-widget.css: el wrapper que genera Elementor para el
   widget es un flex-item y no crece ni se estira por defecto. Aquí además
   necesitamos que llene la ALTURA del contenedor (p.ej. un Container de
   100vh) — pero si ese Container usa flex-direction:column (habitual en
   los Containers "boxed" de Elementor, con un .e-con-inner intermedio), la
   altura que el widget recibe por flex-grow NO cuenta como "definida" para
   que sus descendientes puedan heredarla con height:100% (así lo dice la
   spec de flexbox: solo el eje "stretch"/cruzado se considera definido).
   Por eso NO usamos height:100% en la cadena interna: en su lugar,
   encadenamos display:flex + flex:1 1 auto en cada nivel, que sí propaga
   el alto real sea cual sea la orientación del contenedor exterior. */
.elementor-widget-nutrofeed-hero {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
	flex-grow: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.elementor-widget-nutrofeed-hero > .elementor-widget-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.nf-hero {
	--nf-hero-word-color: #1B211C;
	--nf-hero-accent: #3DAE2B;
	position: relative;
	width: 100%;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.nf-hero-stage {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nf-hero-field {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nf-hero-word {
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 200;
	letter-spacing: -0.02em;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, -50%);
	will-change: transform, opacity;
	color: var(--nf-hero-word-color);
}

.nf-hero-threadbox {
	position: absolute;
	left: 50%;
	top: 56%;
	transform: translate(-50%, -50%);
	width: min(760px, 72%);
	pointer-events: none;
}

.nf-hero-threadbox svg {
	width: 100%;
	height: auto;
	overflow: visible;
	display: block;
}

.nf-hero-thread {
	fill: none;
	stroke: var(--nf-hero-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	opacity: 0;
}

.nf-hero-title1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(32px, 6.4vw, 90px);
	letter-spacing: -0.035em;
	text-align: center;
	line-height: 1.02;
	opacity: 0;
	width: 92%;
	will-change: opacity, transform;
	pointer-events: none;
}

.nf-hero-morph {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nf-hero-ch {
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 6.4vw, 90px);
	letter-spacing: -0.035em;
	opacity: 0;
	transform: translate(-50%, -50%);
	will-change: transform, opacity;
	white-space: pre;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.nf-hero-word,
	.nf-hero-ch,
	.nf-hero-title1 {
		transition: opacity .3s;
	}
}