/*
Theme Name: Frost Ninakami
Theme URI: https://ninakami.com/
Description: Child theme of Frost para el sitio de Ninakami — estudio de animación 2D desde Lima. Hereda la arquitectura de bloques de Frost e implementa el sistema de diseño Ninakami.
Author: Enchyridiom
Author URI: https://ninakami.com/
Template: frost
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: frost-ninakami
Tags: block-patterns, block-styles, custom-colors, full-site-editing, dark
*/


/* ============================================================
   ALIASES — mapeo de tokens Ninakami a variables cortas
   Las variables --wp--preset--color-- las genera theme.json
   ============================================================ */

:root {
	/* Neutros */
	--ink-000: var(--wp--preset--color--ink-000);
	--ink-100: var(--wp--preset--color--ink-100);
	--ink-200: var(--wp--preset--color--ink-200);
	--ink-300: var(--wp--preset--color--ink-300);
	--ink-400: var(--wp--preset--color--ink-400);
	--ink-500: var(--wp--preset--color--ink-500);
	--ink-600: var(--wp--preset--color--ink-600);
	--ink-700: var(--wp--preset--color--ink-700);

	/* Crema */
	--cream:     var(--wp--preset--color--cream);
	--cream-dim:  #B8AFA3;
	--parchment:  var(--wp--preset--color--parchment);
	--navy-black: var(--wp--preset--color--navy-black);

	/* Acentos primarios */
	--ember:      var(--wp--preset--color--ember);
	--ember-soft: var(--wp--preset--color--ember-soft);
	--blood:      var(--wp--preset--color--blood);
	--ice:        var(--wp--preset--color--ice);

	/* Acentos secundarios */
	--navy:          var(--wp--preset--color--navy);
	--navy-deep:     var(--wp--preset--color--navy-deep);
	--magenta:       var(--wp--preset--color--magenta);
	--teal:          var(--wp--preset--color--teal);
	--burgundy-deep: var(--wp--preset--color--burgundy-deep);

	/* Tipografía */
	--font-display: var(--wp--preset--font-family--display);
	--font-body:    var(--wp--preset--font-family--body);
	--font-serif:   var(--wp--preset--font-family--serif);

	/* Escala tipográfica — fluid via theme.json, aliases cortos aquí */
	--fs-h1:       var(--wp--preset--font-size--h1);
	--fs-h2:       var(--wp--preset--font-size--h2);
	--fs-h3:       var(--wp--preset--font-size--h3);
	--fs-h4:       var(--wp--preset--font-size--h4);
	--fs-h5:       var(--wp--preset--font-size--h5);
	--fs-h6:       var(--wp--preset--font-size--h6);
	--fs-body-lg:  var(--wp--preset--font-size--body-lg);
	--fs-body:     var(--wp--preset--font-size--body);
	--fs-body-sm:  var(--wp--preset--font-size--body-sm);
	--fs-caption:  var(--wp--preset--font-size--caption);
	--fs-helper:   var(--wp--preset--font-size--helper);

	/* Line-heights */
	--lh-heading:    var(--wp--custom--line-height--heading);
	--lh-heading-md: var(--wp--custom--line-height--heading-md);
	--lh-body-lg:    var(--wp--custom--line-height--body-lg);
	--lh-body:       var(--wp--custom--line-height--body);
	--lh-caption:    var(--wp--custom--line-height--caption);

	/* Letter-spacing */
	--ls-h1:      0.012em;
	--ls-h2:      0.010em;
	--ls-h3:      0.010em;
	--ls-caption: 0.030em;

	/* Spacing */
	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  48px;
	--space-2xl: 80px;
	--space-3xl: 120px;

	--max-width: 1280px;
	--gutter:    clamp(16px, 4vw, 48px);
}


/* ============================================================
   BASE — resets y estilos globales
   ============================================================ */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--ink-100);
	color: var(--cream);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* WordPress genera overflow-x:hidden en body cuando useRootPaddingAwareAlignments:true;
	   clip NO crea scroll container y no rompe position:sticky */
	overflow-x: clip !important;
}

/* Asegurar que el overflow del wrapper de WordPress no rompa position:sticky */
.wp-site-blocks {
	overflow-x: clip !important;
}

/* Grain global */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.86   0 0 0 0 0.78   0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

/* Headings — Ernesto */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-heading);
}

h1 { letter-spacing: var(--ls-h1); }
h2 { letter-spacing: var(--ls-h2); }
h3 { letter-spacing: var(--ls-h3); }
h5, h6 { line-height: var(--lh-heading-md); }

/* Variantes de cuerpo */
.body-bold,
strong,
b {
	font-weight: 700;
}

.body-sm {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
}

.body-lg {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
}

/* Italic — solo con Fraunces */
.serif-it,
em.quechua,
em.japanese {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--ember);
}

/* Helper */
.helper {
	font-size: var(--fs-helper);
	line-height: var(--lh-caption);
	font-weight: 400;
}

/* Eyebrow / caption */
.eyebrow {
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	letter-spacing: var(--ls-caption);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cream-dim);
}


/* ============================================================
   BOTONES
   ============================================================ */

.wp-element-button,
.wp-block-button__link {
	border-radius: 999px !important;
	font-family: var(--font-display) !important;
	font-weight: 400;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	transition: transform 80ms ease, filter 80ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(0.9);
	transform: scale(1.03);
}

/* Variante outline / secundario */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-radius: 999px !important;
	border-width: 1.5px;
	border-color: var(--cream);
	color: var(--cream);
	background: transparent;
	transition: background 120ms ease, color 120ms ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--cream);
	color: var(--ink-100);
	filter: none;
	transform: none;
}

/* Link flecha */
.link-arrow::after {
	content: " →";
	display: inline-block;
	transition: transform 120ms ease;
}

.link-arrow:hover::after {
	transform: translateX(4px);
}


/* ============================================================
   FOCO VISIBLE — accesibilidad
   ============================================================ */

*:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 3px;
}


/* ============================================================
   EFECTOS DE FONDO
   ============================================================ */

.splash-ember,
.splash-blood,
.splash-magenta,
.splash-teal {
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(100px);
}

.splash-ember   { background: var(--ember);   opacity: 0.18; }
.splash-blood   { background: var(--blood);   opacity: 0.20; }
.splash-magenta { background: var(--magenta); opacity: 0.15; }
.splash-teal    { background: var(--teal);    opacity: 0.15; }


/* ============================================================
   ANIM — Intersection Observer reveal
   ============================================================ */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(4px);
	transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
	            filter 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Stagger: delay a hermanos consecutivos con reveal */
.reveal.is-visible ~ .reveal.is-visible { transition-delay: 80ms; }
.reveal.is-visible ~ .reveal.is-visible ~ .reveal.is-visible { transition-delay: 160ms; }
.reveal.is-visible ~ .reveal.is-visible ~ .reveal.is-visible ~ .reveal.is-visible { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}
}


/* ============================================================
   HEADER
   ============================================================ */

/* El sticky va en el wrapper exterior que genera WordPress para el template part.
   .site-header (grupo interior) tiene la misma altura que el wrapper — si pusieramos
   sticky ahí, el containing block sería idéntico y sticky se liberaría de inmediato. */
header.wp-block-template-part {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 200;
}

.site-header {
	padding-block: var(--space-md);
	background: transparent;
	transition: background 200ms ease, backdrop-filter 200ms ease;
}

.site-header.is-scrolled {
	background: rgba(17, 0, 6, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-inline: var(--gutter);
	max-width: var(--max-width);
	margin-inline: auto;
}

/* Logo imagen — reemplaza el texto del site-title */
.site-logo .wp-block-site-title a,
.site-logo a {
	display: block;
	width: 154px;
	height: 42px;
	background: url('assets/images/ninakami-logo.png') no-repeat left center / contain;
	font-size: 0 !important;
	color: transparent !important;
	text-decoration: none;
	text-indent: -9999px;
	overflow: hidden;
}

/* Desktop: grid de 3 columnas — logo | nav centrado | tienda */
@media (min-width: 640px) {
	.header-inner {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		gap: 0;
	}
	.header-inner .header-tienda {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
	}
}

/* Móvil: flex; hamburger izquierda, logo derecha, tienda oculto */
@media (max-width: 639px) {
	.header-inner {
		display: flex !important;
		justify-content: space-between;
	}
	.header-inner .site-logo  { order: 2; }
	.header-inner .site-nav   { order: 1; }
	.header-inner .header-tienda { display: none !important; }
}

.site-nav .wp-block-navigation__container {
	gap: var(--space-xl);
}

.site-nav a {
	font-size: var(--fs-body);
	color: var(--cream);
	text-decoration: none;
	transition: color 120ms ease;
}

.site-nav a:hover { color: var(--ember); }

/* Tienda ya existe como botón en desktop — ocultar el link duplicado del nav */
@media (min-width: 640px) {
	.site-nav .nav-link-tienda {
		display: none;
	}
}

/* Botón Tienda — outline cream */
.header-tienda .wp-block-button__link {
	background: transparent !important;
	color: var(--cream) !important;
	border: 1.5px solid var(--cream) !important;
	font-size: 17px !important;
}

.header-tienda .wp-block-button__link:hover {
	background: var(--cream) !important;
	color: var(--ink-100) !important;
	filter: none !important;
	transform: none !important;
}

/* ============================================================
   HAMBURGER — botón de apertura del menú móvil
   ============================================================ */

/* Solo en móvil */
.wp-block-navigation__responsive-container-open {
	background: transparent !important;
	border: none !important;
	color: var(--cream) !important;
	cursor: pointer;
	padding: 4px;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
	fill: var(--cream);
	stroke: var(--cream);
}

@media (min-width: 640px) {
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

@media (max-width: 639px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

/* ============================================================
   MENÚ MÓVIL — overlay al estilo Figma
   ============================================================ */

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--blood) !important;
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: stretch !important;
	overflow: hidden !important;
}

/* Línea lateral izquierda — PNG rotado 90° CW alrededor del corner top-left */
/* rotate(90deg) aplica la matriz (x,y)→(-y,x), lo que deja el strip en x:-h→0
   (fuera de pantalla). translateY(-h) en el sistema rotado lo empuja h px a la
   derecha en pantalla, dejándolo en x:0→h. */
/* Líneas decorativas laterales. El PNG (horizontal) se rota 90° CW.
   La matriz rotate(90deg) deja el strip en x:-h→0, por eso se añade
   translateY(-h) para traerlo al área visible. El margen de 12px aleja
   la línea del borde de pantalla. opacity reduce la intensidad visual. */
.wp-block-navigation__responsive-container.is-menu-open::before,
.wp-block-navigation__responsive-container.is-menu-open::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100dvh;
	height: 40px;
	background: url('assets/images/linea-4.png') repeat-x 0 0 / auto 100%;
	transform-origin: 0 0;
	opacity: 0.45;
	pointer-events: none;
}

/* Lateral izquierdo: 40px (strip) + 12px (margen del borde) */
.wp-block-navigation__responsive-container.is-menu-open::before {
	transform: rotate(90deg) translateY(calc(-40px - 12px));
}

/* Lateral derecho: desplaza (100vw - 12px) → deja 12px de margen al borde */
.wp-block-navigation__responsive-container.is-menu-open::after {
	transform: rotate(90deg) translateY(calc(-100vw + 12px));
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-close {
	width: 100%;
	display: flex;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	height: 100dvh !important;
	padding: 64px var(--space-xl) var(--space-3xl) !important;
	gap: 0 !important;
}

/* Logo dentro del overlay via pseudo-elemento — sección superior */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog::before {
	content: '';
	display: block;
	width: 180px;
	height: 52px;
	background: url('assets/images/ninakami-logo.png') no-repeat center / contain;
	flex-shrink: 0;
}

/* Lista de items */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
	flex-direction: column !important;
	align-items: center !important;
	gap: 36px !important;
	padding: 0 !important;
	width: auto !important;
	list-style: none !important;
}

/* Links del menú */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container a {
	font-size: 22px !important;
	color: var(--ice) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color 120ms ease !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container a:hover {
	color: var(--ember) !important;
}

/* Botón de cierre — abajo al centro.
   WordPress usa position:absolute por defecto, lo que saca el botón del flujo
   flex y rompe el space-between. position:static lo devuelve al flujo. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	color: var(--ice) !important;
	cursor: pointer !important;
	padding: 8px !important;
	order: 99 !important;
	flex-shrink: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close svg {
	width: 36px !important;
	height: 36px !important;
	fill: var(--ice) !important;
	stroke: var(--ice) !important;
}

/* ============================================================
   HEADER SCROLL BEHAVIOR
   ============================================================ */

/* Applied via JS below */


/* ============================================================
   HERO
   ============================================================ */

.nn-hero {
	position: relative;
	min-height: 90vh;
	min-height: 90dvh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* Slideshow containers */
.nn-hero__slides {
	position: absolute;
	inset: 0;
}

.nn-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	will-change: opacity;
}

.nn-hero__slide.is-active {
	opacity: 1;
}

/* Desktop: horizontal images, keep subject in view */
.nn-hero__slides--desktop .nn-hero__slide {
	background-position: center center;
}

/* Mobile: portrait images centered */
.nn-hero__slides--mobile .nn-hero__slide {
	background-position: center top;
}

/* Which set is visible at each breakpoint */
.nn-hero__slides--desktop { display: block; }
.nn-hero__slides--mobile  { display: none;  }

@media (max-width: 640px) {
	.nn-hero__slides--desktop { display: none;  }
	.nn-hero__slides--mobile  { display: block; }
}

/* Subtle Ken Burns on active slide */
@media (prefers-reduced-motion: no-preference) {
	.nn-hero__slide.is-active {
		animation: heroKenBurns 6s ease-out forwards;
	}
}

@keyframes heroKenBurns {
	from { transform: scale(1.06); }
	to   { transform: scale(1.0);  }
}

.nn-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--ink-100) 0%,
		rgba(17, 0, 6, 0.6) 40%,
		rgba(17, 0, 6, 0.1) 100%
	);
}

.nn-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--space-3xl) var(--gutter) var(--space-2xl);
	max-width: var(--max-width);
	margin-inline: auto;
}

.nn-hero__eyebrow {
	color: var(--ember);
	margin-bottom: var(--space-sm);
}

.nn-hero__title {
	margin-bottom: 0;
	max-width: none;
}

/* Lead — Satoshi, 30 px */
.nn-hero__lead {
	display: block;
	font-family: var(--font-body);
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--cream-dim);
	letter-spacing: 0;
	max-width: 26ch;
	margin-bottom: var(--space-sm);
}

/* Highlight — Ernesto, tamaño display */
.nn-hero__highlight {
	display: block;
	font-family: var(--font-display);
	font-style: normal;
	font-size: clamp(56px, 9vw, 116px);
	line-height: 1.0;
	color: var(--ember);
	letter-spacing: 0.01em;
}

.nn-hero__sub {
	font-size: var(--fs-body-lg);
	color: var(--cream-dim);
	margin-bottom: var(--space-xl);
	max-width: 48ch;
}

.nn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
}

.nn-hero__cta {
	background: var(--ember) !important;
	color: var(--ink-100) !important;
}

.nn-hero__cta-sec {
	background: transparent !important;
	border: 1.5px solid var(--cream) !important;
	color: var(--cream) !important;
	transition: background 120ms ease, color 120ms ease !important;
}

.nn-hero__cta-sec:hover {
	background: var(--cream) !important;
	color: var(--ink-100) !important;
}

/* Scroll hint */
.nn-hero__scroll-hint {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.nn-hero__scroll-hint span {
	display: block;
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom, transparent, var(--cream-dim));
	animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
	0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
	50%       { opacity: 1;   transform: scaleY(1); }
}


/* ============================================================
   SOBRE NOSOTROS / FAQ
   ============================================================ */

.nn-sobre {
	padding-block: var(--space-3xl);
	background: var(--ink-200);
}

.nn-sobre__inner {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-2xl);
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nn-sobre__label-wrap {
	display: flex;
	align-items: flex-start;
	padding-top: var(--space-sm);
}

.nn-sobre__label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--ink-600);
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.nn-sobre__content {
	max-width: 720px;
}

.nn-sobre__intro {
	font-size: var(--fs-body-lg);
	color: var(--cream-dim);
	line-height: 1.6;
	margin-bottom: var(--space-2xl);
}

/* FAQ accordion */
.nn-faq {
	border-top: 1px solid var(--ink-600);
}

.nn-faq__item {
	border-bottom: 1px solid var(--ink-600);
}

.nn-faq__question {
	margin: 0;
}

.nn-faq__btn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	padding-block: var(--space-lg);
	background: none;
	border: none;
	color: var(--cream);
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 400;
	text-align: left;
	cursor: pointer;
	transition: color 120ms ease;
}

.nn-faq__btn:hover { color: var(--ember); }

.nn-faq__icon { flex-shrink: 0; transition: opacity 120ms ease; }
.nn-faq__icon--minus { display: none; }

.nn-faq__btn[aria-expanded="true"] .nn-faq__icon--plus  { display: none; }
.nn-faq__btn[aria-expanded="true"] .nn-faq__icon--minus { display: block; }

.nn-faq__answer {
	display: none;
	padding-bottom: var(--space-lg);
	padding-right: var(--space-2xl);
}

.nn-faq__answer p {
	color: var(--cream-dim);
	font-size: var(--fs-body-lg);
	line-height: 1.6;
}

.nn-faq__item.is-open .nn-faq__answer {
	display: block;
}

@media (max-width: 768px) {
	.nn-sobre__inner {
		grid-template-columns: 1fr;
	}
	.nn-sobre__label-wrap { display: none; }
}


/* ============================================================
   PROYECTOS
   ============================================================ */

.nn-proyectos {
	padding-block: var(--space-3xl);
	background: var(--ink-100);
	overflow: hidden;
}

.nn-proyectos__header {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-bottom: var(--space-2xl);
}

.nn-proyectos__title {
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.0;
	color: var(--cream);
	max-width: 14ch;
}

.nn-proyectos__track-wrap {
	padding-inline: var(--gutter);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--ink-600) transparent;
}

.nn-proyectos__track-wrap::-webkit-scrollbar {
	height: 4px;
}

.nn-proyectos__track-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.nn-proyectos__track-wrap::-webkit-scrollbar-thumb {
	background: var(--ink-600);
	border-radius: 2px;
}

.nn-proyectos__track {
	display: flex;
	gap: var(--space-lg);
	width: max-content;
	padding-bottom: var(--space-md);
}

/* Project card */
.nn-card {
	flex-shrink: 0;
	width: 220px;
	cursor: pointer;
}

.nn-card__media {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 2/3;
	background: var(--ink-300);
}

.nn-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.nn-card:hover .nn-card__media img {
	transform: scale(1.04);
}

.nn-card__tag {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	background: var(--blood);
	color: var(--cream);
	padding: 3px 8px;
	border-radius: 4px;
}

.nn-card__info {
	padding-top: var(--space-md);
}

.nn-card__title {
	font-size: var(--fs-h6);
	color: var(--cream);
	margin-bottom: var(--space-xs);
}

.nn-card__studio {
	color: var(--ember);
}

@media (min-width: 1024px) {
	.nn-card { width: 280px; }
}

/* Variante landscape (stills 16:9) */
.nn-card--landscape {
	width: 380px;
}

.nn-card--landscape .nn-card__media {
	aspect-ratio: 16 / 9;
}

@media (min-width: 1024px) {
	.nn-card--landscape { width: 480px; }
}


/* ============================================================
   ESCUELA
   ============================================================ */

.nn-escuela {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #12121C 0%, var(--blood) 100%);
	padding-block: var(--space-3xl);
}

.nn-escuela__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nn-escuela__content {
	max-width: 480px;
}

.nn-escuela .eyebrow {
	color: var(--ember-soft);
	margin-bottom: var(--space-md);
}

.nn-escuela__title {
	font-size: clamp(48px, 6vw, 80px);
	line-height: 1.0;
	color: var(--cream);
	margin-bottom: var(--space-lg);
}

.nn-escuela__desc {
	font-size: var(--fs-body-lg);
	color: rgba(227, 217, 208, 0.8);
	line-height: 1.6;
	margin-bottom: var(--space-xl);
	max-width: 40ch;
}

.nn-escuela__cta {
	background: var(--ember) !important;
	color: var(--ink-100) !important;
}

.nn-escuela__image-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.nn-escuela__img {
	max-height: 600px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5));
}

.nn-escuela__splash {
	right: -100px;
	top: 50%;
	transform: translateY(-50%);
	width: 500px;
	height: 500px;
	opacity: 0.12;
}

@media (max-width: 768px) {
	.nn-escuela__inner {
		grid-template-columns: 1fr;
	}
	.nn-escuela__image-wrap { order: -1; }
	.nn-escuela__img { max-height: 360px; }
}


/* ============================================================
   ESTUDIOS
   ============================================================ */

.nn-estudios {
	padding-block: var(--space-3xl);
	background: var(--ink-300);
}

.nn-estudios__inner {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nn-estudios__header {
	margin-bottom: var(--space-2xl);
}

.nn-estudios__title {
	font-size: clamp(32px, 4vw, 56px);
	color: var(--cream);
	max-width: 16ch;
}

.nn-estudios__logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
	align-items: center;
	margin-bottom: var(--space-2xl);
	padding: var(--space-xl);
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ink-600);
	border-radius: 12px;
}

.nn-estudios__logo {
	height: 48px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.7;
	transition: opacity 200ms ease;
}

.nn-estudios__logo:hover { opacity: 1; }

.nn-estudios__paises-label {
	margin-bottom: var(--space-lg);
}

.nn-estudios__flags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
}

.nn-estudios__flag-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.nn-estudios__flag-item img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--ink-600);
}

.nn-estudios__flag-label {
	font-size: var(--fs-caption);
	color: var(--cream-dim);
	text-align: center;
}


/* ============================================================
   EQUIPO
   ============================================================ */

.nn-equipo {
	padding-block: var(--space-3xl);
	background: var(--ink-200);
}

.nn-equipo__inner {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nn-equipo__header {
	margin-bottom: var(--space-2xl);
	text-align: center;
}

.nn-equipo__title {
	font-size: clamp(36px, 4vw, 56px);
	color: var(--cream);
}

.nn-equipo__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2xl);
}

.nn-equipo__member {
	text-align: center;
}

.nn-equipo__photo-wrap {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto var(--space-lg);
	border: 3px solid var(--ink-600);
	background: var(--ink-300);
}

.nn-equipo__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%) sepia(40%);
	mix-blend-mode: luminosity;
	transition: filter 300ms ease;
}

.nn-equipo__member:hover .nn-equipo__photo {
	filter: grayscale(0%) sepia(0%);
}

.nn-equipo__name {
	font-size: var(--fs-h5);
	color: var(--cream);
	margin-bottom: var(--space-xs);
}

.nn-equipo__role {
	color: var(--ember);
	margin-bottom: var(--space-md);
}

.nn-equipo__bio {
	font-size: var(--fs-body-sm);
	color: var(--cream-dim);
	line-height: 1.6;
	max-width: 28ch;
	margin-inline: auto;
}

@media (max-width: 768px) {
	.nn-equipo__grid {
		grid-template-columns: 1fr;
		max-width: 340px;
		margin-inline: auto;
	}
}


/* ============================================================
   MERCH
   ============================================================ */

.nn-merch {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.nn-merch__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.05);
	transition: transform 600ms ease;
}

.nn-merch:hover .nn-merch__bg {
	transform: scale(1);
}

.nn-merch__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(17, 0, 6, 0.92) 0%,
		rgba(17, 0, 6, 0.6) 60%,
		rgba(17, 0, 6, 0.2) 100%
	);
}

.nn-merch__content {
	position: relative;
	z-index: 1;
	padding: var(--space-3xl) var(--gutter);
	max-width: var(--max-width);
	margin-inline: auto;
	width: 100%;
}

.nn-merch .eyebrow {
	color: var(--magenta);
	margin-bottom: var(--space-md);
}

.nn-merch__title {
	font-size: clamp(48px, 7vw, 96px);
	line-height: 1.0;
	color: var(--cream);
	margin-bottom: var(--space-lg);
}

.nn-merch__desc {
	font-size: var(--fs-body-lg);
	color: var(--cream-dim);
	margin-bottom: var(--space-xl);
	max-width: 36ch;
}


/* ============================================================
   PODCAST
   ============================================================ */

.nn-podcast {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-3xl);
	background: var(--ink-100);
	border-top: 1px solid var(--ink-600);
}

.nn-podcast__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nn-podcast__logo {
	max-width: 320px;
	width: 100%;
	height: auto;
}

.nn-podcast .eyebrow {
	color: var(--teal);
	margin-bottom: var(--space-md);
}

.nn-podcast__desc {
	font-size: var(--fs-body-lg);
	color: var(--cream-dim);
	line-height: 1.6;
	margin-bottom: var(--space-xl);
	max-width: 38ch;
}

.nn-podcast__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.nn-podcast__link {
	font-size: var(--fs-body-sm);
	color: var(--cream);
	border: 1px solid var(--ink-600);
	border-radius: 999px;
	padding: 8px 20px;
	text-decoration: none;
	transition: border-color 120ms ease, color 120ms ease;
}

.nn-podcast__link:hover {
	border-color: var(--teal);
	color: var(--teal);
}

.nn-podcast__splash {
	right: -80px;
	bottom: -80px;
}

@media (max-width: 768px) {
	.nn-podcast__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.nn-podcast__logo-wrap {
		display: flex;
		justify-content: center;
	}
	.nn-podcast__links {
		justify-content: center;
	}
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
	border-top: 1px solid var(--ink-600);
}

.footer-grid {
	gap: var(--space-2xl) var(--space-xl);
	margin-bottom: var(--space-2xl);
}

.footer-logo img {
	height: 32px;
	width: auto;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.footer-links a {
	color: var(--cream-dim);
	text-decoration: none;
	transition: color 120ms ease;
}

.footer-links a:hover { color: var(--cream); }

.footer-links li {
	color: var(--cream-dim);
}


/* ============================================================
   SITE MAIN — eliminar padding heredado del theme para el home
   ============================================================ */

.site-main {
	/* Los patrones de sección manejan su propio padding */
}