/* ==========================================================================
   Nutrición de Precisión — el hero del corredor.

   Dos carriles de láminas que vienen desde el fondo hacia el lector. Lo que
   parecen dos animaciones —crecer y abrirse— es una sola: al aumentar la
   profundidad, la perspectiva escala a la vez el tamaño y la posición en
   pantalla, así que la lámina se agranda mientras se aleja del centro.

   Tres decisiones sostienen el efecto, y cada una arregla un defecto
   concreto:

   1. La profundidad se compone por TAMAÑO APARENTE, en progresión
      geométrica: cada lámina se ve una razón fija más grande que la de
      atrás. Repartiendo la z a intervalos iguales, las láminas de delante se
      despegan unas de otras y la cinta se rompe.
   2. Los carriles abren de golpe al principio y luego se sostienen. Esa
      apertura compensa el crecimiento —todavía lento— del fondo, de modo que
      la cinta sale del centro plana, dobla una vez y sólo entonces se va en
      diagonal. Con carriles paralelos saldría un cono recto, sin quiebre.
   3. Ningún extremo del ciclo se ve. La lámina muere con su borde interior
      más allá del 50 % del ancho, y NACE cruzada: el desplazamiento inicial
      es negativo, así que la nueva empieza al otro lado del eje y vuelve
      barriendo por el centro. Eso tapona la garganta —el eje queda cubierto
      en todo momento— y la recién nacida aparece detrás de otras que ya la
      ocultan, así que no necesita entrar con un fundido.

   Todas las medidas van en cqw (porcentaje del ancho del contenedor), así que
   el corredor conserva sus proporciones a cualquier tamaño. Los fotogramas
   clave los escribe PHP: es geometría fija, no hace falta JavaScript.
   ========================================================================== */

.nut-hero {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	min-height: clamp(560px, 90vh, 940px);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Marfil, el mismo suelo claro que ya usan Terapias IV y las páginas de
	   documento. */
	background: #FCFBF8;
	color: #0A0A0B;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding-top: clamp(60px, 7vh, 92px);
	/* Por encima del campo de biomarcadores, que es fijo a la ventana: el
	   corredor ya es el efecto de este tramo y dos redes superpuestas se
	   estorban. El campo aparece en cuanto se pasa el hero. */
	z-index: 2;
}

.nut-hero__corredor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	perspective: var(--nut-persp);
	perspective-origin: 50% var(--nut-eje);
}

.nut-hero__plano {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.nut-hero__lam {
	position: absolute;
	left: 50%;
	top: var(--nut-eje);
	width: var(--nut-w);
	height: var(--nut-h);
	margin-left: calc(var(--nut-w) / -2);
	margin-top: calc(var(--nut-h) / -2);
	border-radius: 0.4cqw;
	overflow: hidden;
	backface-visibility: hidden;
	/* El retraso negativo suelta cada lámina a media travesía: el corredor ya
	   está lleno en el primer fotograma, sin arranque vacío. */
	animation: var(--nut-dur) linear infinite both;
	box-shadow: 0 2cqw 5cqw rgba(10, 10, 11, 0.16);
}

.nut-hero__lam img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Oscurecidas, como se pidió: sobre marfil, bajarlas un punto es lo que
	   les da cuerpo y las separa del fondo. */
	filter: brightness(0.82) contrast(1.06) saturate(0.94);
}

/* El velo. Sin él la cinta pasa por encima del titular y no se lee: aclara el
   centro sin apagar los extremos, que es donde el corredor tiene su fuerza. */
.nut-hero__velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 48% at 50% var(--nut-eje), rgba(252, 251, 248, 0.97) 0%, rgba(252, 251, 248, 0.9) 34%, rgba(252, 251, 248, 0.5) 68%, rgba(252, 251, 248, 0) 100%),
		linear-gradient(180deg, rgba(252, 251, 248, 0.9) 0%, rgba(252, 251, 248, 0) 26%, rgba(252, 251, 248, 0) 74%, rgba(252, 251, 248, 0.92) 100%);
}

.nut-hero__contenido {
	position: relative;
	z-index: 2;
	width: min(1180px, 90vw);
	text-align: center;
}

.nut-hero__isotipo {
	display: block;
	width: clamp(48px, 4.6vw, 74px);
	height: auto;
	margin: 0 auto clamp(16px, 2vw, 26px);
	opacity: 0.95;
}

.nut-hero__eyebrow {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.66rem, 0.86vw, 0.78rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #8A7856;
	margin: 0 0 clamp(18px, 2.2vw, 30px);
}

.nut-hero__titulo {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(2rem, 5.9vw, 5.8rem);
	line-height: 0.96;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #0A0A0B;
	margin: 0;
	overflow-wrap: break-word;
}

.nut-hero__sub {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.94rem, 1.15vw, 1.12rem);
	font-weight: 300;
	line-height: 1.6;
	color: rgba(10, 10, 11, 0.62);
	max-width: 48ch;
	margin: clamp(20px, 2.4vw, 32px) auto 0;
}



/* En pantalla estrecha el corredor se estrecha con ella —todo va en cqw—,
   pero conviene bajarle presencia para que el titular mande. */
@media (max-width: 760px) {
	.nut-hero { min-height: clamp(480px, 76vh, 660px); }
	.nut-hero__lam img { filter: brightness(0.78) contrast(1.06) saturate(0.94); }
	/* En pantalla estrecha el velo, con el mismo porcentaje, se come casi todo
	   el corredor. Se estrecha para que las láminas conserven presencia. */
	.nut-hero__velo {
		background:
			radial-gradient(46% 30% at 50% var(--nut-eje), rgba(252, 251, 248, 0.96) 0%, rgba(252, 251, 248, 0.8) 40%, rgba(252, 251, 248, 0) 100%),
			linear-gradient(180deg, rgba(252, 251, 248, 0.88) 0%, rgba(252, 251, 248, 0) 24%, rgba(252, 251, 248, 0) 76%, rgba(252, 251, 248, 0.9) 100%);
	}
}

/* Pausar y no desactivar: cada lámina ya está soltada a media travesía por su
   retraso negativo, así que se queda como una composición terminada en vez de
   amontonarse en el eje. */
@media (prefers-reduced-motion: reduce) {
	.nut-hero__lam { animation-play-state: paused; }
}

/* ==========================================================================
   El cuerpo de la página. Claro, como el hero, con una sola banda oscura.

   El vocabulario de movimiento es el mismo en toda la página y se apoya en
   tres piezas, no más:

   1. LA TANDA. Un bloque de texto no aparece de golpe: aparecen sus líneas,
      escalonadas. El ojo lee en el orden en que se escribió.
   2. LA CORTINA. Ninguna imagen se funde: se descubre. Una máscara se abre
      de arriba abajo mientras la lámina, que arranca ampliada, se asienta a
      su tamaño. Las dos cosas duran distinto a propósito —la máscara acaba
      antes— y ese desfase es lo que hace que la imagen parezca entrar en el
      papel en vez de encenderse encima.
   3. LA DERIVA. Cada lámina viaja a una velocidad distinta de la del texto
      mientras se baja. Es lo que separa los planos.

   Nada de lo anterior decide si algo se ve: el estado oculto sólo existe
   bajo la clase .nut--anim, que pone el JS al arrancar.
   ========================================================================== */

/* Las propiedades registradas se pueden interpolar; sin registrar, saltan.
   Es lo que permite que el díptico vuelva a su sitio con suavidad cuando el
   ratón sale, sin que el JS tenga que animar nada a mano. */
@property --nut-mx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --nut-my { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --nut-rx { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --nut-ry { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
/* El desplazamiento de entrada. Va en una propiedad y no directamente en
   `transform` porque la deriva del scroll escribe sobre el MISMO elemento: si
   las dos usaran `transform`, la regla de después borraría a la de antes y se
   perdería una de las dos. Compuestas en un solo `transform`, conviven. */
@property --nut-iny { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* El corte de la cortina. Registrado como porcentaje para que la máscara sea
   siempre interpolable; ver la nota en el bloque .nut-foto. */
@property --nut-corte { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

.nut {
	--nut-tinta: #0A0A0B;
	--nut-tinta-baja: rgba(10, 10, 11, 0.64);
	--nut-beige: #8A7856;
	--nut-hilo: rgba(138, 120, 86, 0.24);
	--nut-marfil: #FCFBF8;
	--nut-e: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	background: var(--nut-marfil);
	color: var(--nut-tinta);
}

.nut__bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.nut__section {
	position: relative;
	z-index: 1;
	padding: clamp(76px, 11vh, 168px) clamp(24px, 6vw, 104px);
}

.nut__inner { max-width: 1500px; margin: 0 auto; }

/* Al saltar desde el índice, el encabezado fijo tapaba el rótulo de la
   sección. Este margen de anclaje lo compensa. */
.nut__section[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   El grano

   Una trama fija sobre toda la página. Al 3,5 % no se lee como textura: se
   nota como papel, y es la diferencia entre un fondo marfil plano y una
   superficie impresa. Va por encima del contenido para que también granule
   las fotos, y por eso no puede interceptar el puntero.
   -------------------------------------------------------------------------- */
.nut-grano {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	/* El grano no se mueve, así que se queda: no es movimiento, es materia. */
}

/* --------------------------------------------------------------------------
   El índice lateral

   Dice en qué escena va el lector y cuánto queda. Es navegación de verdad
   —cada marca es un enlace al ancla—, así que se queda visible aunque el JS
   no llegue; lo único que aporta el JS es saber cuál está activa.
   -------------------------------------------------------------------------- */
.nut-indice {
	position: fixed;
	left: clamp(18px, 2.2vw, 34px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: stretch;
	gap: 16px;
	pointer-events: none;
}

.nut-indice ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(18px, 2.6vh, 30px);
	pointer-events: auto;
}

/* El riel y su barra de avance. La barra la escala el JS. */
.nut-indice__riel {
	position: relative;
	width: 1px;
	background: var(--nut-hilo);
	flex: none;
}

.nut-indice__riel i {
	position: absolute;
	inset: 0 0 auto 0;
	height: 100%;
	background: var(--nut-beige);
	transform: scaleY(var(--nut-avance, 0));
	transform-origin: top;
	transition: transform 180ms linear;
}

.nut-indice a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: rgba(10, 10, 11, 0.34);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color 420ms ease;
}

/* El rótulo vive FUERA DEL FLUJO, no encogido a cero.

   Antes se cerraba con `max-width: 0` y se abría animando esa medida: el
   ancho del índice cambiaba en cada fotograma y había que recalcular la
   geometría. Sacándolo del flujo con `position: absolute` el problema
   desaparece de raíz — el rótulo no ocupa sitio NUNCA, ni abierto ni
   cerrado, así que el índice tiene un ancho fijo (sólo el número) y lo único
   que se anima es pintura: escala y opacidad.

   Y de paso arregla lo que motivó todo esto: con el rótulo fuera del flujo,
   el índice en reposo mide lo que mide su número y no puede invadir el texto
   ni por accidente. */
.nut-indice__r {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-50%) scaleX(0.94);
	transform-origin: left center;
	transition: opacity 420ms ease, transform 620ms var(--nut-e);
}

.nut-indice a:hover,
.nut-indice a:focus-visible,
.nut-indice li.es-activo a { color: var(--nut-beige); }

/* La marca activa se distingue con un filete que crece a su lado, no
   desplegando el rótulo: así el estado se lee sin invadir el texto. */
.nut-indice__n { position: relative; }

/* El filete crece por `transform`, no por `width`. Animar el ancho obliga al
   navegador a recalcular la geometría en cada fotograma; escalando un filete
   de altura fija el resultado es idéntico —es una barra de 1 px— y el trabajo
   se queda en la capa de composición. */
.nut-indice__n::after {
	content: "";
	position: absolute;
	left: calc(100% + 7px);
	top: 50%;
	width: 16px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 520ms var(--nut-e);
}

.nut-indice li.es-activo .nut-indice__n::after { transform: scaleX(1); }

/* El rótulo se despliega SÓLO al apuntar, nunca por estar activo.

   Desplegándolo también en la marca activa, el índice ocupaba de 51 px a
   153 px con el contenido empezando en 89 px: 64 px de solape permanente
   sobre el texto, medidos en una ventana de 1600 px. Al apuntar, en cambio,
   el solape es momentáneo y deliberado, y el fondo de debajo lo hace legible.
   En reposo el índice es una columna de cuatro números, que es lo que debe
   ser. */
.nut-indice a:hover .nut-indice__r,
.nut-indice a:focus-visible .nut-indice__r {
	opacity: 1;
	transform: translateY(-50%) scaleX(1);
}

.nut-indice__r::before {
	content: "";
	position: absolute;
	inset: -6px -10px;
	z-index: -1;
	border-radius: 2px;
	background: var(--nut-marfil);
	opacity: 0;
	transition: opacity 320ms ease;
}



.nut-indice a:hover .nut-indice__r::before,
.nut-indice a:focus-visible .nut-indice__r::before { opacity: 0.96; }

.nut-indice.es-sobre-oscuro .nut-indice__r::before { background: #0A0A0B; }

/* Sobre la banda oscura el índice invierte su tinta. La clase la pone el JS
   cuando la banda cruza el centro de la pantalla. */
.nut-indice.es-sobre-oscuro a { color: rgba(247, 245, 240, 0.42); }
.nut-indice.es-sobre-oscuro .nut-indice__riel { background: rgba(247, 245, 240, 0.18); }
.nut-indice.es-sobre-oscuro a:hover,
.nut-indice.es-sobre-oscuro li.es-activo a { color: #C9B98F; }
.nut-indice.es-sobre-oscuro .nut-indice__riel i { background: #C9B98F; }

@media (max-width: 1300px) {
	.nut-indice { display: none; }
}

/* --------------------------------------------------------------------------
   Tipografía común
   -------------------------------------------------------------------------- */
.nut__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.68rem, 0.86vw, 0.78rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--nut-beige);
	margin: 0 0 clamp(18px, 2.4vw, 32px);
}

/* El filete que se dibuja detrás del rótulo. Entra con retraso sobre el
   texto: primero se lee la palabra, después se traza la línea. */
.nut__eyebrow::after {
	content: "";
	height: 1px;
	flex: 1 1 auto;
	max-width: 130px;
	background: currentColor;
	opacity: 0.42;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1100ms 300ms var(--nut-e);
}

.nut--anim .nut-tanda.es-visible .nut__eyebrow::after { transform: scaleX(1); }
.nut__eyebrow--claro { color: #B8A890; }

.nut__title {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.96;
	letter-spacing: 0.015em;
	font-size: clamp(2.1rem, 5.4vw, 5rem);
	text-wrap: balance;
	margin: 0 0 clamp(26px, 3.2vw, 48px);
}

.nut__title--claro { color: #F7F5F0; }
.nut__title--medio { font-size: clamp(1.9rem, 4vw, 3.6rem); }
.nut__title--cierre { font-size: clamp(2.2rem, 6.4vw, 6rem); }

.nut__lead {
	font-size: clamp(1.02rem, 1.28vw, 1.3rem);
	line-height: 1.66;
	font-weight: 300;
	color: var(--nut-tinta-baja);
	margin: 0 0 1.2em;
	max-width: 56ch;
}

.nut__lead--claro { color: rgba(247, 245, 240, 0.72); }

/* El remate de "Qué es" no es un párrafo más: es la frase que cierra el
   argumento, y va con el peso del titular. */
.nut__lead--remate {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.3rem, 2.1vw, 2.1rem);
	line-height: 1.3;
	color: var(--nut-tinta);
	margin-top: clamp(22px, 2.6vw, 34px);
}

/* --------------------------------------------------------------------------
   El campo de biomarcadores

   Un lienzo fijo detrás de toda la página con partículas unidas por hilos.
   El cursor las aparta y vuelven a tejerse solas. Lo dibuja el JS; aquí sólo
   se le da sitio y se le pone por debajo de todo el contenido.
   -------------------------------------------------------------------------- */
.nut-campo {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.nut-campo canvas { display: block; width: 100%; height: 100%; }

/* Sin cursor no hay nada que apartar. */
@media (hover: none), (pointer: coarse) {
	.nut-campo { display: none; }
}

/* --------------------------------------------------------------------------
   La cortina — el revelado común de TODAS las láminas

   La máscara se abre de arriba abajo en 1,1 s y la imagen, que entra al
   112 %, se asienta en 1,9 s. Que la imagen siga moviéndose después de que
   la máscara haya terminado es justo lo que se busca: la lámina acaba de
   posarse dentro de un marco que ya está quieto.
   -------------------------------------------------------------------------- */
.nut-foto {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(138, 120, 86, 0.07);
}

.nut-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La misma corrección para las siete láminas: es lo que hace que se lean
	   como un solo rodaje y no como siete imágenes sueltas. */
	filter: brightness(0.95) saturate(0.94) contrast(1.04);
}

/* Lo que se anima NO es el `clip-path` entero, sino el corte: una sola
   propiedad registrada como porcentaje, y el `clip-path` se construye con
   ella. Transitando la función completa, `inset(0 0 100% 0)` e
   `inset(0 0 0 0)` serializan con distinto número de componentes
   —`inset(0px 0px 100%)` frente a `inset(0px)`—, el navegador no las
   interpola y la transición se queda clavada en el valor inicial: la máscara
   no se abría nunca y la lámina no llegaba a verse. Con un porcentaje
   registrado los dos extremos son siempre del mismo tipo. */
.nut-foto { clip-path: inset(0 0 var(--nut-corte, 0%) 0); }

.nut--anim .nut-foto {
	--nut-corte: 100%;
	transition: --nut-corte 1100ms var(--nut-e);
}

.nut--anim .nut-foto img {
	transform: scale(1.12);
	transition: transform 1900ms var(--nut-e);
}

.nut--anim .nut-foto.es-visible { --nut-corte: 0%; }
.nut--anim .nut-foto.es-visible img { transform: scale(1); }

/* --------------------------------------------------------------------------
   01 · Qué es — texto y díptico
   -------------------------------------------------------------------------- */
.nut-que .nut__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(34px, 5vw, 96px);
	align-items: center;
}

.nut-diptico {
	position: relative;
	aspect-ratio: 1 / 1;
	perspective: 1000px;
}

.nut-diptico__lam {
	position: absolute;
	margin: 0;
	/* La sombra y el recorte viven en .nut-foto, no aquí: la figura tiene que
	   dejar salir su rótulo, que va por fuera del marco. */
	transform:
		translate3d(var(--nut-mx, 0px), calc(var(--nut-my, 0px) + var(--nut-sy, 0px)), 0)
		rotateY(var(--nut-ry, 0deg))
		rotateX(var(--nut-rx, 0deg));
	/* Sólo se interpolan las propiedades del ratón. La deriva del scroll
	   (--nut-sy) se reescribe en cada fotograma y una transición encima la
	   dejaría siempre un paso por detrás. */
	transition:
		--nut-mx 700ms var(--nut-e), --nut-my 700ms var(--nut-e),
		--nut-rx 700ms var(--nut-e), --nut-ry 700ms var(--nut-e);
	will-change: transform;
}

.nut-diptico__lam .nut-foto {
	box-shadow: 0 34px 80px rgba(10, 10, 11, 0.26);
}

.nut-diptico__lam:first-of-type {
	left: 0;
	top: 0;
	width: 62%;
	aspect-ratio: 4 / 5;
	z-index: 2;
}

.nut-diptico__lam--baja {
	right: 0;
	bottom: 0;
	width: 52%;
	aspect-ratio: 4 / 5;
	z-index: 1;
}

/* Los dos rótulos. Nombran lo que se está viendo —"suponer" frente a
   "saber"— y son la razón de que el díptico sea un argumento y no dos
   fotos juntas. */
.nut-diptico__rot {
	position: absolute;
	left: 0;
	top: -1.9em;
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(0.95rem, 1.35vw, 1.35rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nut-beige);
	white-space: nowrap;
}

.nut-diptico__rot--baja {
	top: auto;
	left: auto;
	right: 0;
	bottom: -1.9em;
	text-align: right;
}

.nut-diptico__pie {
	position: absolute;
	left: 0;
	bottom: -30px;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.34);
}

/* --------------------------------------------------------------------------
   02 · Cómo lo hacemos — tres tarjetas

   En reposo la tarjeta es tipografía y filete, que es como mejor se lee un
   argumento; la lámina llega al apuntarla, creciendo desde el borde de
   abajo, que es de donde viene el gesto.
   -------------------------------------------------------------------------- */
.nut-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 26px);
	margin: clamp(30px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.nut-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(360px, 38vw, 480px);
	display: flex;
	border: 1px solid var(--nut-hilo);
	border-radius: 3px;
	background: rgba(138, 120, 86, 0.04);
	transition:
		transform 620ms var(--nut-e),
		box-shadow 620ms ease,
		border-color 620ms ease;
}

/* La elevación al apuntar. Tres píxeles: lo justo para que la tarjeta se
   despegue del papel sin que parezca que salta. */
.nut-card:hover,
.nut-card:focus-within {
	transform: translateY(-3px);
	border-color: rgba(138, 120, 86, 0.5);
	box-shadow: 0 30px 64px rgba(10, 10, 11, 0.22);
}

.nut-card__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	/* Recortada a nada por abajo hasta que se apunta la tarjeta. */
	clip-path: inset(100% 0 0 0);
	transition: clip-path 700ms var(--nut-e);
}

.nut-card:hover .nut-card__foto,
.nut-card:focus-within .nut-card__foto { clip-path: inset(0 0 0 0); }

.nut-card__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0.42) 0%, rgba(10, 10, 11, 0.76) 58%, rgba(10, 10, 11, 0.93) 100%);
}

.nut-card__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 34%;
	filter: brightness(0.95) saturate(0.94) contrast(1.04);
	transform: scale(1.08);
	transition: transform 1400ms var(--nut-e);
}

.nut-card:hover .nut-card__foto img,
.nut-card:focus-within .nut-card__foto img { transform: scale(1); }

.nut-card__cuerpo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 1.2vw, 15px);
	padding: clamp(24px, 2.6vw, 40px);
	margin-top: auto;
	transition: color 520ms ease;
}

.nut-card__n {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.6rem, 2.2vw, 2.3rem);
	line-height: 1;
	color: var(--nut-beige);
	transition: color 520ms ease;
}

/* El filete bajo el numeral se estira al apuntar la tarjeta. Es el único
   sitio de la página donde algo crece hacia los lados, y por eso se nota. */
/* Igual que el del índice: el filete mide siempre 72 px y lo que se anima es
   su escala horizontal, de 0,361 (los 26 px de reposo) a 1. Animando `width`
   había que rehacer la geometría de la tarjeta en cada fotograma, y sobre una
   barra de 1 px el resultado en pantalla es exactamente el mismo. */
.nut-card__filete {
	display: block;
	width: 72px;
	height: 1px;
	background: currentColor;
	color: var(--nut-beige);
	opacity: 0.5;
	transform: scaleX(0.361);
	transform-origin: left center;
	transition: transform 620ms var(--nut-e), opacity 520ms ease, color 520ms ease;
}

.nut-card:hover .nut-card__filete,
.nut-card:focus-within .nut-card__filete {
	transform: scaleX(1);
	opacity: 0.9;
	color: #C9B98F;
}

.nut-card__t {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(1.24rem, 1.7vw, 1.8rem);
	line-height: 1.14;
	margin: 0;
	transition: color 520ms ease;
}

.nut-card__d {
	font-size: clamp(0.94rem, 1.02vw, 1.05rem);
	line-height: 1.62;
	font-weight: 300;
	color: var(--nut-tinta-baja);
	margin: 0;
	transition: color 520ms ease;
}

.nut-card:hover .nut-card__t,
.nut-card:focus-within .nut-card__t { color: #F7F5F0; }
.nut-card:hover .nut-card__d,
.nut-card:focus-within .nut-card__d { color: rgba(247, 245, 240, 0.82); }
.nut-card:hover .nut-card__n,
.nut-card:focus-within .nut-card__n { color: #C9B98F; }

.nut-cards__pie {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.34);
}

/* --------------------------------------------------------------------------
   03 · Por qué — la única banda oscura

   La lámina va en un panel a su tamaño, no de fondo a pantalla completa: el
   fondo fijo pedía una fuente de 3000 px de ancho para no verse blanda, y
   además obligaba a tapar la foto con un velo casi opaco para poder leer
   encima. Con el panel, el texto tiene obsidiana limpia debajo y la imagen
   se ve entera.
   -------------------------------------------------------------------------- */
.nut-porque {
	position: relative;
	overflow: hidden;
	background: #0A0A0B;
	color: #F7F5F0;
	margin-block: clamp(20px, 3vw, 48px);
}

/* El resplandor detrás del panel: da profundidad a la banda y evita que el
   obsidiano se lea como un rectángulo plano. */
.nut-porque__brillo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(58% 76% at 78% 46%, rgba(184, 168, 144, 0.16) 0%, rgba(184, 168, 144, 0.05) 42%, rgba(10, 10, 11, 0) 72%),
		radial-gradient(40% 60% at 8% 90%, rgba(138, 120, 86, 0.1) 0%, rgba(10, 10, 11, 0) 70%);
}

/* El barrido: una luz que cruza la banda en diagonal, una vez cada nueve
   segundos y sólo mientras la banda está a la vista. Fuera de pantalla no
   se paga: la clase la quita el observador. */
.nut-porque__barrido {
	position: absolute;
	top: -60%;
	left: -35%;
	width: 45%;
	height: 220%;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(232, 223, 200, 0.07) 46%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(14deg);
}

.nut-porque.es-dentro .nut-porque__barrido {
	animation: p7nutBarrido 9s cubic-bezier(0.42, 0, 0.24, 1) infinite;
}

@keyframes p7nutBarrido {
	0%   { opacity: 0; transform: translateX(0) rotate(14deg); }
	12%  { opacity: 1; }
	62%  { opacity: 1; }
	78%, 100% { opacity: 0; transform: translateX(260%) rotate(14deg); }
}

.nut-porque__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
	gap: clamp(40px, 5vw, 100px);
	align-items: center;
}

.nut-porque__panel {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
}

/* El marco de oro. Un filete a un píxel, separado de la lámina: es el gesto
   más barato que existe para que una foto se lea como una pieza montada y
   no como una imagen pegada al fondo. */
.nut-porque__panel::before {
	content: "";
	position: absolute;
	inset: clamp(-18px, -1.4vw, -10px);
	border: 1px solid rgba(184, 168, 144, 0.3);
	border-radius: 3px;
	pointer-events: none;
}

.nut-porque__panel .nut-foto {
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.nut-porque__panel figcaption,
.nut-quien__foto figcaption {
	position: absolute;
	left: 0;
	bottom: clamp(-40px, -2.6vw, -30px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.34);
}

.nut-quien__foto figcaption { color: rgba(10, 10, 11, 0.34); }

/* --------------------------------------------------------------------------
   04 · Para quién es
   -------------------------------------------------------------------------- */
.nut-quien__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
	gap: clamp(30px, 4.4vw, 80px);
	align-items: center;
}

.nut-quien__foto {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
}

.nut-quien__foto .nut-foto {
	box-shadow: 0 34px 80px rgba(10, 10, 11, 0.24);
}

/* --------------------------------------------------------------------------
   Botones y cierre
   -------------------------------------------------------------------------- */
.nut-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 42px);
	padding: 17px 34px;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: #B8A890;
	text-decoration: none;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	transition: color 420ms ease, border-color 420ms ease;
}

.nut-cta svg { width: 17px; height: 17px; flex: none; position: relative; z-index: 1; transition: transform 420ms var(--nut-e); }
.nut-cta span { position: relative; z-index: 1; }

.nut-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #B8A890;
	transform: translateY(101%);
	transition: transform 520ms var(--nut-e);
}

.nut-cta:hover { color: #0A0A0B; }
.nut-cta:hover::before { transform: translateY(0); }
.nut-cta:hover svg { transform: translateX(5px); }

.nut-cta--solido { color: var(--nut-beige); }
.nut-cta--solido::before { background: var(--nut-beige); }
.nut-cta--solido:hover { color: var(--nut-marfil); }

.nut-cierre { text-align: center; }
.nut-cierre .nut__lead { margin-inline: auto; }
.nut-cierre .nut__eyebrow { justify-content: center; }
.nut-cierre__nota { color: rgba(10, 10, 11, 0.5); }

/* --------------------------------------------------------------------------
   Aparición

   Dos formas, y la clase .nut--anim que pone el JS es la única que enciende
   el estado oculto: sin JavaScript no queda nada invisible.

   · .nut-in         — el bloque entero entra de una pieza.
   · .nut-in.nut-tanda — el bloque no se mueve; entran sus líneas, en orden.
   -------------------------------------------------------------------------- */
/* Un solo `transform` por elemento, que suma la entrada y la deriva. Ambas
   son desplazamientos verticales y por eso caben en la misma suma. */
.nut-in {
	transform: translate3d(0, calc(var(--nut-iny, 0px) + var(--nut-sy, 0px)), 0);
}

.nut--anim .nut-in {
	opacity: 0;
	--nut-iny: 28px;
	transition: opacity 900ms var(--nut-e), --nut-iny 900ms var(--nut-e);
}

.nut--anim .nut-in.es-visible { opacity: 1; --nut-iny: 0px; }

/* Un bloque escalonado no se desvanece él: se desvanecen sus hijos. Si
   hiciera las dos cosas, el texto entraría dos veces. */
.nut--anim .nut-in.nut-tanda {
	opacity: 1;
	transform: none;
	transition: none;
}

.nut--anim .nut-tanda > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 860ms var(--nut-e), transform 860ms var(--nut-e);
}

.nut--anim .nut-tanda.es-visible > * { opacity: 1; transform: none; }

.nut--anim .nut-tanda.es-visible > *:nth-child(1) { transition-delay: 0ms; }
.nut--anim .nut-tanda.es-visible > *:nth-child(2) { transition-delay: 110ms; }
.nut--anim .nut-tanda.es-visible > *:nth-child(3) { transition-delay: 200ms; }
.nut--anim .nut-tanda.es-visible > *:nth-child(4) { transition-delay: 280ms; }
.nut--anim .nut-tanda.es-visible > *:nth-child(5) { transition-delay: 350ms; }
.nut--anim .nut-tanda.es-visible > *:nth-child(6) { transition-delay: 410ms; }
.nut--anim .nut-tanda.es-visible > *:nth-child(n+7) { transition-delay: 460ms; }

/* Las tarjetas entran una tras otra, de izquierda a derecha. */
.nut--anim .nut-card.nut-in { transition-delay: calc(var(--nut-card-i, 0) * 130ms); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.nut-que .nut__inner,
	.nut-quien__grid,
	.nut-porque__grid { grid-template-columns: 1fr; }
	.nut-cards { grid-template-columns: 1fr; }
	.nut-card { min-height: 320px; }
	.nut-diptico { aspect-ratio: 4 / 3; }
	.nut-porque__panel { max-width: 460px; }
	.nut-quien__foto { max-width: 520px; }
	/* En una sola columna el panel va después del texto, que es el orden en
	   que se lee; en dos columnas manda la rejilla. */
	.nut-quien__grid .nut-quien__foto { order: 2; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido

   Se apaga el movimiento, no el contenido: todo queda en su estado final y
   visible. La cortina se abre del todo, las láminas se quedan a su tamaño y
   el barrido no corre.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nut--anim .nut-in,
	.nut--anim .nut-tanda > * { opacity: 1; transform: none; transition: none; }
	.nut--anim .nut-foto { --nut-corte: 0%; transition: none; }
	.nut--anim .nut-foto img { transform: none; transition: none; }
	.nut__eyebrow::after { transform: scaleX(1); transition: none; }
	.nut-diptico__lam { transition: none; }
	.nut-card, .nut-card__foto, .nut-card__foto img { transition: none; }
	.nut-card__filete, .nut-indice__n::after { transition: none; }
	.nut-porque.es-dentro .nut-porque__barrido { animation: none; }
	.nut-porque__panel, .nut-quien__foto, .nut-diptico__lam { --nut-sy: 0px; }
}

/* --------------------------------------------------------------------------
   SIN RATÓN: la lámina de las tres tarjetas se descubre al entrar en pantalla

   El revelado de estas tres tarjetas colgaba de :hover, y en un teléfono no
   hay hover que llegue nunca: `clip-path: inset(100% 0 0 0)` se quedaba
   puesto para siempre y las tres fotografías —la del comité, la de la balanza
   y la del analizador— no se veían jamás. No es que "no cargaran": cargaban y
   estaban recortadas a cero.

   El efecto NO se retira, se traduce: donde no hay puntero, lo que descubre
   la lámina es entrar en pantalla, que es el mismo gesto que ya revela el
   resto de la página. El estado recortado sigue existiendo sólo bajo
   .nut--anim, así que sin JavaScript la fotografía se ve entera.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
	.nut-card__foto { clip-path: inset(0 0 0 0); }
	.nut-card__foto img { transform: scale(1); }

	.nut--anim .nut-card__foto { clip-path: inset(100% 0 0 0); }
	.nut--anim .nut-card__foto img { transform: scale(1.08); }

	.nut--anim .nut-card.es-visible .nut-card__foto { clip-path: inset(0 0 0 0); }
	.nut--anim .nut-card.es-visible .nut-card__foto img { transform: scale(1); }

	/* Con la lámina siempre a la vista, la tarjeta ya no necesita el alto
	   mínimo que reservaba el hueco del despliegue. */
	.nut-card { min-height: clamp(300px, 76vw, 420px); }
}

/* Y con el puntero fino todo sigue exactamente igual que antes: la lámina
   llega al apuntar la tarjeta. */