/**
 * Ninakami Frost — Block Styles
 *
 * Variantes, tamaños y estados interactivos del sistema de botones.
 * Únicamente var(--wp--preset--*) — sin colores hardcodeados.
 * Cargado en frontend (wp_enqueue_scripts) y editor (add_editor_style).
 *
 * Sistema:
 *   Variantes  → CTA (default), .is-style-outline, .is-style-text-link
 *   Tamaños    → MD (default), .is-style-btn-lg, .is-style-btn-sm
 *   Estados    → default · hover · active/pressed · focus-visible · disabled
 */

/* ══════════════════════════════════════════════════════════
   BASE — transición y focus global
   ══════════════════════════════════════════════════════════ */

.wp-block-button .wp-block-button__link {
	transition:
		background-color 0.15s ease,
		color            0.15s ease,
		border-color     0.15s ease;
}

/* Focus visible — EAA 2025 */
.wp-block-button .wp-block-button__link:focus-visible {
	outline:        2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

/* Disabled — CTA default */
.wp-block-button .wp-block-button__link:disabled,
.wp-block-button .wp-block-button__link[aria-disabled="true"] {
	background-color: var(--wp--preset--color--surface) !important;
	color:            var(--wp--preset--color--muted)   !important;
	cursor:           not-allowed;
	pointer-events:   none;
}


/* ══════════════════════════════════════════════════════════
   TAMAÑOS
   ══════════════════════════════════════════════════════════ */

/* ── Large — 18px · 16px/24px padding ── */
.wp-block-button.is-style-btn-lg .wp-block-button__link {
	font-size:     var(--wp--preset--font-size--body-lg) !important;
	line-height:   1.3 !important;
	padding-top:    1rem   !important;
	padding-bottom: 1rem   !important;
	padding-left:   1.5rem !important;
	padding-right:  1.5rem !important;
}

/* ── Small — 14px · 12px/20px padding ── */
.wp-block-button.is-style-btn-sm .wp-block-button__link {
	font-size:     var(--wp--preset--font-size--body-sm) !important;
	line-height:   1.4 !important;
	padding-top:    0.75rem !important;
	padding-bottom: 0.75rem !important;
	padding-left:   1.25rem !important;
	padding-right:  1.25rem !important;
}


/* ══════════════════════════════════════════════════════════
   VARIANTE: Outline
   base transparente · border 2px secondary · hover → primary
   ══════════════════════════════════════════════════════════ */

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent                           !important;
	border:           2px solid var(--wp--preset--color--text) !important;
	color:            var(--wp--preset--color--text)        !important;
	box-shadow:       none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary)     !important;
	border-color:     var(--wp--preset--color--primary)     !important;
	color:            var(--wp--preset--color--text)        !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: var(--wp--preset--color--surface-raised) !important;
	border-color:     var(--wp--preset--color--surface-raised) !important;
	color:            var(--wp--preset--color--text)           !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: transparent                           !important;
	border-color:     var(--wp--preset--color--text)        !important;
	color:            var(--wp--preset--color--text)        !important;
	outline:          2px solid var(--wp--preset--color--text);
	outline-offset:   3px;
}

.wp-block-button.is-style-outline .wp-block-button__link:disabled,
.wp-block-button.is-style-outline .wp-block-button__link[aria-disabled="true"] {
	background-color: transparent                          !important;
	border-color:     var(--wp--preset--color--surface)   !important;
	color:            var(--wp--preset--color--muted)     !important;
	cursor:           not-allowed;
	pointer-events:   none;
}


/* ══════════════════════════════════════════════════════════
   VARIANTE: Text / Ghost
   sin fondo ni borde · hover → primary-bright
   ══════════════════════════════════════════════════════════ */

.wp-block-button.is-style-text-link .wp-block-button__link {
	background-color: transparent !important;
	border:           none        !important;
	box-shadow:       none        !important;
	color:            var(--wp--preset--color--text) !important;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background-color: transparent !important;
	color:            var(--wp--preset--color--primary-lighten) !important;
}

.wp-block-button.is-style-text-link .wp-block-button__link:active {
	background-color: transparent !important;
	color:            var(--wp--preset--color--primary) !important;
}

.wp-block-button.is-style-text-link .wp-block-button__link:focus-visible {
	background-color: transparent !important;
	color:            var(--wp--preset--color--primary-lighten) !important;
	outline:          2px solid var(--wp--preset--color--secondary);
	outline-offset:   3px;
}

.wp-block-button.is-style-text-link .wp-block-button__link:disabled,
.wp-block-button.is-style-text-link .wp-block-button__link[aria-disabled="true"] {
	background-color: transparent !important;
	color:            var(--wp--preset--color--muted) !important;
	cursor:           not-allowed;
	pointer-events:   none;
}


/* ══════════════════════════════════════════════════════════
   INPUTS & FORMULARIOS
   Estado MVP: default · error · disabled
   Tokens semánticos: --error, --success, --warning y variantes --*-subtle.
   Activar error con [aria-invalid="true"] en el campo
   o .nk-field--error en el wrapper del campo.
   ══════════════════════════════════════════════════════════ */

/* ── Variables locales ──────────────────────────────────── */
:root {
	--nk-input-radius: 12px;
	--nk-input-pad-v:  0.75rem;
	--nk-input-pad-h:  1.0625rem;
	--nk-input-border: 2px;
}


/* ── Base ───────────────────────────────────────────────── */

.wp-block-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wp-block-form textarea,
.wp-block-form select,
.wp-block-search .wp-block-search__input,
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	background-color:   var(--wp--preset--color--text);
	color:              var(--wp--preset--color--background);
	border:             var(--nk-input-border) solid transparent;
	border-radius:      var(--nk-input-radius);
	padding:            var(--nk-input-pad-v) var(--nk-input-pad-h);
	font-family:        var(--wp--preset--font-family--body);
	font-size:          var(--wp--preset--font-size--body);
	font-weight:        400;
	line-height:        1.4;
	width:              100%;
	box-sizing:         border-box;
	outline:            none;
	-webkit-appearance: none;
	appearance:         none;
}

/* ── Placeholder ────────────────────────────────────────── */

.wp-block-form input::placeholder,
.wp-block-form textarea::placeholder,
#respond input::placeholder,
#respond textarea::placeholder {
	color:   var(--wp--preset--color--muted);
	opacity: 1;
}

/* ── Textarea ────────────────────────────────────────────── */

.wp-block-form textarea,
#respond textarea {
	resize:     vertical;
	min-height: 8rem;
}

/* ── Select — flecha custom ──────────────────────────────── */

.wp-block-form select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23260E1B' d='M8 11 2 5h12z'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 1rem center;
	background-size:     1rem;
	padding-right:       2.5rem;
	cursor:              pointer;
}

/* ── Label ───────────────────────────────────────────────── */

.wp-block-form label,
#respond label {
	display:        block;
	font-family:    var(--wp--preset--font-family--body);
	font-size:      var(--wp--preset--font-size--caption);
	font-weight:    700;
	line-height:    1.5;
	letter-spacing: 0.03em;
	color:          var(--wp--preset--color--text);
	padding-left:   var(--nk-input-pad-h);
	margin-bottom:  var(--wp--preset--spacing--xs);
}

/* ── Texto de ayuda / supporting text ───────────────────── */

.nk-field-helper {
	display:        block;
	font-family:    var(--wp--preset--font-family--body);
	font-size:      var(--wp--preset--font-size--caption);
	line-height:    1.5;
	color:          var(--wp--preset--color--text);
	padding-left:   var(--nk-input-pad-h);
	margin-top:     var(--wp--preset--spacing--xs);
}


/* ── Estado: Error ───────────────────────────────────────── */

.wp-block-form input[aria-invalid="true"],
.wp-block-form textarea[aria-invalid="true"],
.wp-block-form .nk-field--error input,
.wp-block-form .nk-field--error textarea,
.wp-block-form .nk-field--error select,
#respond input[aria-invalid="true"],
#respond textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
	color:        var(--wp--preset--color--error);
}

.wp-block-form .nk-field--error .nk-field-helper,
#respond .nk-field--error .nk-field-helper {
	color: var(--wp--preset--color--error);
}


/* ── Estado: Disabled ────────────────────────────────────── */

.wp-block-form input:disabled,
.wp-block-form textarea:disabled,
.wp-block-form select:disabled,
#respond input:disabled,
#respond textarea:disabled {
	border-color: var(--wp--preset--color--muted);
	color:        var(--wp--preset--color--muted);
	cursor:       not-allowed;
	opacity:      1;
}

.wp-block-form input:disabled::placeholder,
.wp-block-form textarea:disabled::placeholder {
	color: var(--wp--preset--color--muted);
}

.wp-block-form .nk-field--disabled label,
#respond .nk-field--disabled label {
	color: var(--wp--preset--color--muted);
}


/* ══════════════════════════════════════════════════════════
   HEADER
   Fixed, transparent con gradiente oscuro superior.
   Desktop: nav horizontal. Mobile: burger + panel slide-in.
   ══════════════════════════════════════════════════════════ */

.nk-header {
	position: fixed;
	top:      0;
	left:     0;
	width:    100%;
	z-index:  100;
	display:  flex;
	align-items:     center;
	justify-content: space-between;
	padding:  0 2rem;
	height:   56px;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--background-deep) 90%, transparent) 0%,
		transparent 100%
	);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.nk-header > * { pointer-events: auto; }

/* Smart nav — oculto al hacer scroll down */
.nk-header.is-hidden {
	opacity:        0;
	transform:      translateY(-12px);
	pointer-events: none;
}
.nk-header.is-hidden > * { pointer-events: none; }

.nk-header__logo {
	display:         flex;
	align-items:     center;
	text-decoration: none;
	height:          32px;
}

.nk-header__logo img {
	height: 32px;
	width:  auto;
}

/* ── Desktop nav ────────────────────────────────────────── */

.nk-header__nav { display: none; }

.nk-header__nav-link {
	font-family:     var(--wp--preset--font-family--body);
	font-size:       14px;
	font-weight:     700;
	line-height:     1.4;
	letter-spacing:  1px;
	text-transform:  uppercase;
	color:           var(--wp--preset--color--text);
	text-decoration: none;
	padding:         0.75rem 1.25rem;
	border-radius:   9999px;
	transition:      color 0.15s ease;
}

.nk-header__nav-link:hover { color: var(--wp--preset--color--primary-lighten); }

.nk-header__nav-cta {
	font-family:      var(--wp--preset--font-family--body);
	font-size:        16px;
	font-weight:      700;
	letter-spacing:   1px;
	text-transform:   uppercase;
	color:            var(--wp--preset--color--text);
	background-color: transparent;
	border:           2px solid var(--wp--preset--color--text);
	text-decoration:  none;
	padding:          0.75rem 1.375rem;
	border-radius:    9999px;
	transition:       background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nk-header__nav-cta:hover {
	background-color: var(--wp--preset--color--primary);
	border-color:     var(--wp--preset--color--primary);
	color:            var(--wp--preset--color--text);
}

/* Desktop cta oculto en mobile hasta que no esté en el panel */
.nk-header__cta-desktop { display: none; }

@media (min-width: 1024px) {
	.nk-header {
		height:  82px;
		padding: 0 3rem;
	}

	.nk-header__nav {
		display:     flex;
		align-items: center;
	}

	.nk-header__burger      { display: none; }
	.nk-header__cta-desktop { display: block; }
}

/* ── Burger ─────────────────────────────────────────────── */

.nk-burger {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             6px;
	width:           36px;
	height:          36px;
	background:      transparent;
	border:          none;
	padding:         0;
	cursor:          pointer;
}

.nk-burger__bar {
	display:          block;
	width:            24px;
	height:           2px;
	background:       var(--wp--preset--color--text);
	border-radius:    2px;
	transition:       transform 0.25s ease, opacity 0.15s ease;
	transform-origin: center;
}

.nk-burger[aria-expanded="true"] .nk-burger__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.nk-burger[aria-expanded="true"] .nk-burger__bar:nth-child(2) {
	opacity:   0;
	transform: scaleX(0);
}
.nk-burger[aria-expanded="true"] .nk-burger__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 1024px) {
	.nk-burger { display: none; }
}


/* ══════════════════════════════════════════════════════════
   NAV PANEL MOBILE
   Slide-in desde la izquierda. 100dvh dinámico.
   ══════════════════════════════════════════════════════════ */

.nk-nav-panel {
	position:        fixed;
	top:             0;
	left:            0;
	width:           100%;
	height:          100vh;   /* fallback */
	height:          100dvh;
	background:      var(--wp--preset--color--surface);
	transform:       translateX(-100%);
	transition:      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index:         200;
	overflow:        hidden;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
}

.nk-nav-panel.is-open { transform: translateX(0); }

.nk-nav-overlay {
	position:       fixed;
	inset:          0;
	background:     rgba(0,0,0,0.5);
	z-index:        190;
	opacity:        0;
	pointer-events: none;
	transition:     opacity 0.3s ease;
}

.nk-nav-overlay.is-visible {
	opacity:        1;
	pointer-events: auto;
}

body.nk-nav-is-open { overflow: hidden; }

/* Botón X — top right del panel (espejo del burger en el header) */
.nk-nav-close {
	position:        absolute;
	top:             0.5rem;            /* alinea verticalmente con la altura del header (56px) */
	right:           2rem;              /* mismo padding-inline que .nk-header */
	z-index:         3;                /* sobre __inner (z:1) y __bottom para captar clics */
	background:      transparent;
	border:          none;
	color:           var(--wp--preset--color--text);
	cursor:          pointer;
	padding:         0.5rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.nk-nav-panel__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	padding:        3rem 1.5rem;
	gap:            2.25rem;          /* 36px Figma */
	width:          100%;
	position:       relative;
	z-index:        1;
}

.nk-nav-panel__logo img {
	height: 2.8125rem; /* 45px */
	width:  auto;
}

.nk-nav-panel__links {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.75rem;          /* ~28px entre items */
	width:          100%;
}

.nk-nav-panel__link {
	font-family:     var(--wp--preset--font-family--body);
	font-size:       0.875rem;        /* 14px */
	font-weight:     700;
	letter-spacing:  1px;
	text-transform:  uppercase;
	color:           var(--wp--preset--color--text);
	text-decoration: none;
	padding:         0.875rem 1.375rem; /* 14 / 22 Figma */
	border-radius:   9999px;
	text-align:      center;
	transition:      color 0.15s ease;
}

.nk-nav-panel__link:hover { color: var(--wp--preset--color--primary-lighten); }

/* CTA Tienda — filled */
.nk-nav-panel__cta {
	font-family:      var(--wp--preset--font-family--body);
	font-size:        1rem;            /* 16px */
	font-weight:      700;
	letter-spacing:   1px;
	text-transform:   uppercase;
	color:            var(--wp--preset--color--background-deep);
	background-color: var(--wp--preset--color--text);
	border:           0;
	text-decoration:  none;
	padding:          0.875rem 1.375rem;
	border-radius:    9999px;
	flex-shrink:      0;
	transition:       background-color 0.15s ease, color 0.15s ease;
}

.nk-nav-panel__cta:hover,
.nk-nav-panel__cta:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color:            var(--wp--preset--color--text);
}

/* ── Bloque inferior — ilustración Nina anclada a la derecha ── */

.nk-nav-panel__bottom {
	position:        relative;
	width:           100%;
	height:          18rem;            /* 288px Figma */
	display:         flex;
	justify-content: flex-end;
	align-items:     flex-start;
	overflow:        hidden;
	pointer-events:  none;
}

.nk-nav-panel__nina {
	display:     block;
	width:       16.0625rem;           /* 257px Figma */
	height:      auto;                 /* aspect-ratio nativo 257×416 → desborda por abajo */
	flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   SLIDER / BANNER HERO
   Crossfade con autoplay. Dots: posición bottom-center.
   ══════════════════════════════════════════════════════════ */

.nk-slider {
	position:   relative;
	overflow:   hidden;
	height:     100dvh;
}

.nk-slider__track {
	position: absolute;
	inset:    0;
}

.nk-slider__slide {
	position:   absolute;
	inset:      0;
	opacity:    0;
	transition: opacity 0.8s ease;
	overflow:   hidden;
}

.nk-slider__slide.is-active {
	opacity: 1;
}

.nk-slider__slide img {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
}

.nk-slider__gradient {
	position: absolute;
	bottom:   0;
	left:     0;
	right:    0;
	height:   40%;
	background: linear-gradient(to top, var(--wp--preset--color--background), transparent);
	pointer-events: none;
}

/* Dots — posición vertical mobile */
.nk-slider__dots {
	position:       absolute;
	bottom:         0;
	left:           50%;
	transform:      translateX(-50%);
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            0.625rem;
	padding:        1rem 1.5rem;
	z-index:        10;
}

@media (min-width: 1024px) {
	.nk-slider {
		aspect-ratio: auto;
		min-height:   100dvh;
	}

	.nk-slider__dots {
		padding: 2rem 1.5rem;
	}
}

.nk-slider__dot {
	width:        10px;
	height:       10px;
	border-radius: 50%;
	border:       2px solid var(--wp--preset--color--gold);
	background:   transparent;
	padding:      0;
	cursor:       pointer;
	flex-shrink:  0;
	transition:   background-color 0.2s ease, border-color 0.2s ease;
}

.nk-slider__dot.is-active,
.nk-slider__dot[aria-current="true"] {
	background:    var(--wp--preset--color--gold);
	border-color:  var(--wp--preset--color--gold);
}

/* ── Caption / overlay de texto sobre el banner ───────────── */

.nk-slider__caption {
	position:       absolute;
	z-index:        5;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.875rem;
	pointer-events: none;
	/* Mobile: centrado en el tercio inferior del banner */
	left:           50%;
	bottom:         3.5rem;
	transform:      translateX(-50%);
	width:          calc(100% - 3rem);
	max-width:      22rem;
	text-align:     center;
}

.nk-slider__caption-text {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.5rem;
}

.nk-slider__eyebrow {
	font-family:    var(--wp--preset--font-family--display);
	font-size:      var(--wp--preset--font-size--2xl);
	font-weight:    400;
	line-height:    1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color:          var(--wp--preset--color--gold);
	margin:         0;
}

.nk-slider__title {
	font-family:    var(--wp--preset--font-family--body);
	font-size:      var(--wp--preset--font-size--body);
	font-weight:    700;
	line-height:    1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--wp--preset--color--text);
	margin:         0;
	/* Marco rectangular en mobile */
	border:         1.5px solid var(--wp--preset--color--secondary);
	padding:        0.625rem 1rem;
}

.nk-slider__diamond {
	width:            14px;
	height:           14px;
	flex-shrink:      0;
	background:       var(--wp--preset--color--gold);
	transform:        rotate(45deg);
}

@media (min-width: 1024px) {
	.nk-slider__caption {
		left:           auto;
		right:          6vw;
		bottom:         28%;
		transform:      none;
		flex-direction: row-reverse;
		align-items:    center;
		gap:            1.5rem;
		width:          auto;
		max-width:      none;
		text-align:     left;
		/* Bracket abierto hacia la derecha */
		border-left:    2px solid var(--wp--preset--color--secondary);
		border-bottom:  2px solid var(--wp--preset--color--secondary);
		padding:        0 0 1.25rem 1.5rem;
	}

	.nk-slider__caption-text { align-items: flex-start; gap: 0.25rem; }

	.nk-slider__eyebrow { font-size: var(--wp--preset--font-size--4xl); }

	.nk-slider__title {
		font-size:      var(--wp--preset--font-size--lg);
		letter-spacing: 0.04em;
		border:         none;
		padding:        0;
	}

	.nk-slider__diamond { width: 22px; height: 22px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION INTRO
   Telares decorativos + borde rugoso + sección crema.
   ══════════════════════════════════════════════════════════ */

.nk-intro {
	position: relative;
	overflow: hidden;
}

/* Zona oscura: telares + texto flotante */
.nk-intro__dark {
	position:    relative;
	z-index:     2;
	min-height:  200px;
	will-change: transform;
}

@media (min-width: 1024px) {
	.nk-intro__dark {
		min-height:    25.1875rem; /* 403px — altura de clip de telares */
		margin-bottom: -17.3125rem; /* -277px — sube el base crema */
		overflow:      hidden;
	}
}

/* Telares desktop — absolutos, ocultos en mobile */
.nk-intro__telares {
	display: none;
}

@media (min-width: 1024px) {
	.nk-intro__telares { display: none; }
}

.nk-intro__telar {
	position:   absolute;
	object-fit: cover;
}

.nk-intro__telar--left {
	left:   -1.4375rem;
	top:    -9.4375rem;
	width:  56.625rem;
	height: auto;
}

.nk-intro__telar--right {
	left:   64.8125rem;
	top:    -13.625rem;
	width:  56.625rem;
	height: auto;
}

.nk-intro__telar--center {
	display:          block;
	left:             23.125rem;
	top:              -9.4375rem;
	width:            64.1875rem;
	height:           auto;
	transform:        rotate(31.81deg);
	transform-origin: center top;
	opacity:          0.5;
}

/* Telares mobile — SVG combinado izq+der, oculto en desktop */
.nk-intro__telares-mobile {
	position:       relative;
	z-index:        1;
	margin-top:     -2rem;
	margin-bottom:  -6rem;
	pointer-events: none;
	line-height:    0;
	will-change:    transform;
}

.nk-intro__telares-mobile img {
	width:   100%;
	height:  auto;
	display: block;
}

@media (min-width: 1024px) {
	.nk-intro__telares-mobile { display: none; }
}

/* Texto flotante */
.nk-intro__floating-text {
	position:   relative;
	z-index:    3;
	text-align: center;
	padding:    6.25rem 1.5rem 0;
	color:      var(--wp--preset--color--text);
}

@media (min-width: 1024px) {
	.nk-intro__floating-text { display: none; }
}

.nk-intro__label {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.3;
	margin:      0 0 0.625rem;
}

/* Literal clamp — var(--wp--preset--font-size--4xl) falla dentro de wp:html
   porque el slug empieza con dígito y el token CSS no resuelve. */
.nk-intro__headline {
	font-family:    var(--wp--preset--font-family--display);
	font-size:      clamp(3rem, 2.586rem + 1.77vw, 4rem);
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: 0.012em;
	text-transform: uppercase;
	margin:         0;
}

@media (min-width: 1024px) {
	.nk-intro__headline { font-size: var(--wp--preset--font-size--4xl); }
}

/* Borde rugoso — solo desktop */
.nk-intro__separator {
	display: none;
}

@media (min-width: 1024px) {
	.nk-intro__separator { display: none; }
}

/* Sección crema — fondo orgánico via CSS custom property */
.nk-intro__base {
	position:            relative;
	background-image:    var(--nk-intro-bg);
	background-repeat:   no-repeat;
	background-position: top left;
	background-size:     100% 100%;
	color:               var(--wp--preset--color--background);
	min-height:          24.625rem;
	padding:             0;
	overflow:            hidden;
	z-index:             3;
	display:             flex;
	justify-content:     space-between;
	align-items:         flex-end;
}

@media (min-width: 1024px) {
	.nk-intro__base {
		display:               grid;
		grid-template-columns: repeat(3, 1fr);
		align-items:           center;
		background-image:      var(--nk-intro-bg);
		background-color:      transparent;
		min-height:            34rem;
		padding:               0;
		overflow:              hidden;
		color:                 var(--wp--preset--color--background);
	}
}

.nk-intro__base-content {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1rem;
	max-width:      18rem;
	min-width:      15rem;
	padding:        1.5rem;
	text-align:     center;
	position:       relative;
	z-index:        1;
}

@media (min-width: 1024px) {
	.nk-intro__base-content {
		max-width:      none;
		padding:        2rem 2rem 4rem;
		gap:            2.0625rem;
		align-items:    center;
		justify-content: center;
		align-self:      end;
	}
}

.nk-intro__base-text {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-sm);
	line-height: 1.4;
	margin:      0;
}

@media (min-width: 1024px) {
	.nk-intro__base-text { font-size: var(--wp--preset--font-size--body-lg); line-height: 1.3; }
}

/* Columna izquierda desktop — label + SUDAMÉRICA en zona crema */
.nk-intro__texto {
	display: none;
}

@media (min-width: 1024px) {
	.nk-intro__texto {
		display:         flex;
		flex-direction:  column;
		align-items:     center;
		justify-content: center;
		align-self:      center;
		gap:             0.625rem;
		padding:         2rem 2rem 4rem;
		text-align:      center;
		color:           var(--wp--preset--color--surface);
	}

	.nk-intro__texto .nk-intro__label {
		color: var(--wp--preset--color--surface);
	}

	.nk-intro__texto .nk-intro__headline {
		color:     var(--wp--preset--color--surface);
		font-size: clamp(3rem, 2.586rem + 1.77vw, 4rem);
	}
}

.nk-intro__cta {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	font-family:      var(--wp--preset--font-family--body);
	font-size:        var(--wp--preset--font-size--body-sm);
	font-weight:      700;
	letter-spacing:   1px;
	text-transform:   uppercase;
	color:            var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--primary-lighten);
	text-decoration:  none;
	padding:          0.75rem 1.25rem;
	border-radius:    9999px;
	flex-shrink:      0;
	transition:       background-color 0.15s ease, color 0.15s ease;
}

.nk-intro__cta:hover {
	background-color: var(--wp--preset--color--background);
	color:            var(--wp--preset--color--text);
}

/* Ilustración Nina */
.nk-intro__illustration--mobile {
	display:        block;
	align-self:     flex-end;
	width:          15.0625rem;
	flex-shrink:    0;
	pointer-events: none;
	z-index:        1;
	margin-left:    -3rem;
}

@media (min-width: 1024px) { .nk-intro__illustration--mobile { display: none; } }

.nk-intro__illustration--desktop { display: none; }

/* Wrapper nina — grid cell, alinea imagen al fondo */
.nk-intro__nina { display: none; }

@media (min-width: 1024px) {
	.nk-intro__nina {
		display:    block;
		overflow:   hidden;
		align-self: end;
	}

	.nk-intro__illustration--desktop {
		display:        block;
		position:       static;
		width:          100%;
		height:         auto;
		pointer-events: none;
	}
}

/* ── Fade-in al scroll (intro.js — local) ───────────────── */

.nk-fade {
	opacity:    0;
	transform:  translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.nk-fade.nk-is-visible {
	opacity:   1;
	transform: translateY(0);
}

/* ── Scroll reveal global (scroll-reveal.js) ────────────── */

.js-reveal .nk-reveal {
	opacity:    0;
	transform:  translateY(28px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.js-reveal .nk-reveal--visible {
	opacity:   1;
	transform: translateY(0);
}

.js-reveal .nk-reveal--d1 { transition-delay: 0.1s; }
.js-reveal .nk-reveal--d2 { transition-delay: 0.2s; }
.js-reveal .nk-reveal--d3 { transition-delay: 0.3s; }
.js-reveal .nk-reveal--d4 { transition-delay: 0.4s; }


/* ══════════════════════════════════════════════════════════
   FOOTER
   Markup unificado para ambos viewports.
   Mobile: grid 2 col → brand · (Acceso+Redes) · Newsletter.
   Desktop: flex row → brand + 4 columnas (Acceso · Legal · Redes · Newsletter).
   ══════════════════════════════════════════════════════════ */

.nk-footer {
	background:            var(--wp--preset--color--surface);
	color:                 var(--wp--preset--color--text);
	padding:               3rem 1.5rem;
	display:               grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"brand brand"
		"acceso redes";
	gap:                   3rem 1.25rem;
	justify-items:         center;
	align-items:           start;
}

/* En mobile, el wrapper .nk-footer__columns desaparece como caja
   para que sus hijos participen del grid del footer. */
.nk-footer__columns { display: contents; }

.nk-footer__brand           { grid-area: brand; }
.nk-footer__col--acceso     { grid-area: acceso;     justify-self: start; width: 100%; max-width: 10.75rem; }
.nk-footer__col--legal      { display: none; }
.nk-footer__col--redes      { grid-area: redes;      justify-self: start; width: 100%; max-width: 10.75rem; }

/* ── Brand: logo + contacto + copyright ──────────────────── */

.nk-footer__brand {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.25rem;
}

.nk-footer__logo img { display: block; height: 2.8125rem; width: auto; } /* 45px mobile */

.nk-footer__brand-info {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.75rem;
	font-family:    var(--wp--preset--font-family--body);
	font-size:      var(--wp--preset--font-size--body-sm);
	line-height:    1.4;
	color:          var(--wp--preset--color--text);
	text-align:     center;
}

.nk-footer__brand-info a {
	color:           inherit;
	text-decoration: none;
	transition:      color 0.15s ease;
}

.nk-footer__brand-info a:hover { color: var(--wp--preset--color--primary-lighten); }

.nk-footer__copy {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-sm);
	line-height: 1.4;
	margin:      0;
	text-align:  center;
}

/* ── Columnas: títulos + links ───────────────────────────── */

.nk-footer__col-title {
	font-family: var(--wp--preset--font-family--display);
	font-size:   1.875rem; /* mobile: 30px H4 */
	font-weight: 400;
	line-height: 1.1;
	margin:      0 0 1rem;
	color:       var(--wp--preset--color--text);
}

.nk-footer__links {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	list-style:     none;
	margin:         0;
	padding:        0;
}

.nk-footer__links a {
	font-family:     var(--wp--preset--font-family--body);
	font-size:       var(--wp--preset--font-size--body-sm);
	line-height:     1.4;
	color:           var(--wp--preset--color--text);
	text-decoration: none;
	transition:      color 0.15s ease;
}

.nk-footer__links a:hover { color: var(--wp--preset--color--primary-lighten); }


/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-footer {
		display:         flex;
		flex-direction:  row;
		flex-wrap:       nowrap;
		align-items:     flex-start;
		justify-content: center;
		align-self:      end;
		gap:             clamp(2.5rem, -6.43rem + 14.73vw, 11.25rem); /* 40px @1024 → 180px @1920 */
		/* Padding-inline fluido: 1.5rem @1024 → 22.25rem @1920.
		   Mantiene el fondo full-bleed (no usamos max-width). */
		padding:         4.5rem clamp(1.5rem, -22.21rem + 37.05vw, 22.25rem);
	}

	/* Reset del grid mobile */
	.nk-footer__brand,
	.nk-footer__col--acceso,
	.nk-footer__col--redes { grid-area: auto; }

	.nk-footer__brand {
		width:       17.75rem;   /* 284px */
		flex-shrink: 0;
		gap:         2.125rem;   /* 34px */
	}

	.nk-footer__logo img { height: 4rem; }                  /* 64px */
	.nk-footer__brand-info { font-size: 0.875rem; }         /* 14px */
	.nk-footer__copy { font-size: 1rem; font-weight: 700; } /* 16px Bold */

	.nk-footer__columns {
		display:        flex;
		flex-direction: row;
		flex-wrap:      nowrap;
		gap:            1.5rem;  /* 24px */
		align-items:    flex-start;
		flex:           1 1 auto;
		min-width:      0;
	}

	.nk-footer__col-title {
		font-size:   1.5rem;     /* 24px H6 */
		line-height: 1.2;
	}

	.nk-footer__col {
		width:     8.125rem;     /* 130px */
		max-width: none;
	}

	.nk-footer__col--legal {
		display:        flex;
		flex-direction: column;
	}

	.nk-footer__legal-mobile { display: none; }

	.nk-footer__col--acceso,
	.nk-footer__col--redes { justify-self: auto; }

	.nk-footer__links a { font-size: 0.875rem; } /* 14px */
}


/* ══════════════════════════════════════════════════════════
   PAGE — PRÓXIMAMENTE
   Template genérico para páginas sin contenido aún.
   ══════════════════════════════════════════════════════════ */

.nk-coming-soon {
	position:        relative;
	min-height:      100svh;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             var(--wp--preset--spacing--md);
	background:      var(--wp--preset--color--background-deep);
	color:           var(--wp--preset--color--text);
	text-align:      center;
	padding:         calc(56px + var(--wp--preset--spacing--3xl)) var(--wp--preset--spacing--md) var(--wp--preset--spacing--3xl);
	overflow:        hidden;
}

@media (min-width: 1024px) {
	.nk-coming-soon {
		padding-top: calc(82px + var(--wp--preset--spacing--3xl));
	}
}

/* Reset de los márgenes de bloque que inyecta el layout-engine de WP */
main.nk-coming-soon > * { margin-top: 0; margin-bottom: 0; }

.nk-coming-soon__eyebrow {
	font-family:    var(--wp--preset--font-family--display);
	font-size:      var(--wp--preset--font-size--md);
	font-weight:    400;
	line-height:    1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:          var(--wp--preset--color--gold);
}

.nk-coming-soon__title {
	font-family:    var(--wp--preset--font-family--display);
	font-size:      var(--wp--preset--font-size--4xl);
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: 0.012em;
	color:          var(--wp--preset--color--text);
	max-width:      18ch;
}

.nk-coming-soon__sub {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-lg);
	line-height: 1.4;
	color:       var(--wp--preset--color--text);
	max-width:   34ch;
}

.nk-coming-soon__actions { margin-top: var(--wp--preset--spacing--xs); }

.nk-coming-soon__mascot {
	width:          clamp(120px, 28vw, 200px);
	height:         auto;
	margin-top:     var(--wp--preset--spacing--lg);
	pointer-events: none;
	user-select:    none;
}


/* ══════════════════════════════════════════════════════════
   SECTION SOBRE NOSOTROS
   Mobile: accordion de filas. Desktop: cards expandidas 2+1.
   ══════════════════════════════════════════════════════════ */

.nk-sobre {
	/* hereda background-deep del sitio */
}

.nk-sobre__header {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         1.5rem;
}

.nk-sobre__title {
	font-family: var(--wp--preset--font-family--display);
	font-size:   2.625rem; /* 42px mobile H2 */
	font-weight: 400;
	line-height: 1.1;
	color:       var(--wp--preset--color--text);
	margin:      0;
	text-align:  center;
}

/* ── Items (filas mobile / cards desktop) ────────────────── */

.nk-sobre__items {
	display:        flex;
	flex-direction: column;
}

.nk-sobre__item--primary       { background: var(--wp--preset--color--primary-darker); }
.nk-sobre__item--primary-light { background: var(--wp--preset--color--primary-dark); }
.nk-sobre__item--error         { background: var(--wp--preset--color--primary-lighten); }

/* ── Trigger: fila con pregunta + icono plus ─────────────── */

.nk-sobre__trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	min-height:      5.0625rem; /* 81px */
	padding:         1rem 1.5rem;
	background:      transparent;
	border:          none;
	color:           #ffffff;
	cursor:          pointer;
	list-style:      none;
	text-align:      left;
}

.nk-sobre__trigger::-webkit-details-marker { display: none; }

.nk-sobre__question {
	font-family: var(--wp--preset--font-family--display);
	font-size:   1.5rem; /* 24px — H5 mobile */
	font-weight: 400;
	line-height: 1.2;
}

.nk-sobre__plus {
	width:       2rem;
	height:      2rem;
	flex-shrink: 0;
	filter:      brightness(0) invert(1);
	transition:  transform 0.2s ease;
}

details[open].nk-sobre__item .nk-sobre__plus {
	transform: rotate(45deg);
}

/* ── Body: cuy + texto (oculto en mobile hasta abrir) ────── */

.nk-sobre__body {
	display:        none;
	flex-direction: column;
	align-items:    center;
	gap:            1rem;
	padding:        1.5rem;
	color:          #ffffff;
}

details[open].nk-sobre__item .nk-sobre__body {
	display: flex;
}

.nk-sobre__cuy {
	width:  clamp(8rem, 15vw, 11.3125rem);
	height: auto;
}

.nk-sobre__text {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-sm);
	line-height: 1.4;
	margin:      0;
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-sobre__header {
		justify-content: flex-start;
		padding:         3rem 8rem 3rem;
	}

	.nk-sobre__title {
		font-size:  3rem; /* 48px desktop */
		text-align: left;
	}

	.nk-sobre__items {
		flex-direction: row;
		flex-wrap:      nowrap;
		gap:            2rem;
		padding:        0 8rem 3rem;
	}

	.nk-sobre__item {
		flex:            1 1 0;
		min-width:       0;
		min-height:      37.5rem; /* 600px */
		border-radius:   3rem;   /* 48px */
		display:         flex;
		flex-direction:  column;
		justify-content: flex-start;
		gap:             2rem;
		padding:         3rem;   /* 48px */
	}

	.nk-sobre__trigger {
		min-height:     auto;
		padding:        0;
		cursor:         default;
		pointer-events: none;
	}

	.nk-sobre__plus { display: none; }

	.nk-sobre__question {
		font-size:      2.5rem; /* 40px H3 */
		line-height:    1.1;
		letter-spacing: 0.01em;
		text-align:     center;
	}

	details[open].nk-sobre__item .nk-sobre__body {
		display:        flex;
		flex-direction: column;
		align-items:    center;
		gap:            2rem;
		padding:        0;
		color:          #ffffff;
	}

	.nk-sobre__cuy {
		width:       11.3125rem; /* 181px */
		flex-shrink: 0;
	}

	.nk-sobre__text {
		font-size:   1.125rem; /* 18px */
		line-height: 1.3;
		text-align:  center;
	}
}


/* ══════════════════════════════════════════════════════════
   SECTION MEMBERS — equipo (team cards)
   ══════════════════════════════════════════════════════════ */

.nk-members {
	padding: 3rem 1.5rem;
}

.nk-members__header {
	margin-bottom: 1rem;
	text-align:    center;
}

.nk-members__eyebrow {
	font-family:    var(--wp--preset--font-family--body);
	font-size:      1rem;
	font-weight:    400;
	color:          var(--wp--preset--color--gold);
	margin:         0 0 0.25rem;
	letter-spacing: 0.02em;
}

.nk-members__title {
	font-family: var(--wp--preset--font-family--display);
	font-size:   2.625rem; /* 42px mobile */
	font-weight: 400;
	line-height: 1.1;
	color:       var(--wp--preset--color--text);
	margin:      0;
}

.nk-members__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size:   0.875rem; /* 14px mobile */
	line-height: 1.5;
	color:       var(--wp--preset--color--text);
	margin:      0 0 1.5rem;
}

.nk-members__flags {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             1rem;
	margin-bottom:   2rem;
}

.nk-members__flag {
	width:  2.125rem; /* 34px mobile */
	height: auto;
}

.nk-members__cards {
	display:        flex;
	flex-direction: column;
}

.nk-members__card {
	display:        flex;
	flex-direction: row;
	gap:            1.25rem; /* 20px */
	padding:        1.5rem 0;
	align-items:    flex-start;
}

.nk-members__card-media {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex-shrink:    0;
	width:          9.5625rem; /* ~153px */
	gap:            0.5rem;
}

.nk-members__card-img-wrap {
	width: 9.5625rem;
}

.nk-members__card-img {
	display:    block;
	width:      100%;
	height:     auto;
	object-fit: contain;
}

.nk-members__card-name {
	font-family: var(--wp--preset--font-family--display);
	font-size:   1.5rem; /* 24px mobile */
	font-weight: 400;
	line-height: 1.1;
	color:       var(--wp--preset--color--gold);
	margin:      0;
	text-align:  center;
}

.nk-members__card-role {
	font-family:    var(--wp--preset--font-family--body);
	font-size:      0.75rem; /* 12px */
	font-weight:    700;
	line-height:    1.3;
	color:          var(--wp--preset--color--text);
	margin:         0;
	text-align:     center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.nk-members__card-text {
	flex:           1 1 0;
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	padding-top:    1.5rem; /* 24px */
}

.nk-members__card-text p {
	font-family: var(--wp--preset--font-family--body);
	font-size:   0.875rem; /* 14px mobile */
	line-height: 1.5;
	color:       var(--wp--preset--color--text);
	margin:      0;
}

@media (min-width: 1024px) {
	.nk-members {
		padding: 5rem 8rem;
	}

	.nk-members__header {
		margin-bottom: 1.25rem;
		text-align:    left;
	}

	.nk-members__eyebrow { font-size: 1.125rem; }

	.nk-members__title { font-size: 4rem; }

	.nk-members__desc {
		font-size:     1.125rem;
		margin-bottom: 2rem;
		max-width:     48rem;
	}

	.nk-members__flags {
		gap:           3rem;
		margin-bottom: 3rem;
	}

	.nk-members__flag { width: 3.5rem; }

	.nk-members__cards {
		flex-direction: row;
		gap:            1.5rem;
	}

	.nk-members__card {
		flex:           1 1 0;
		flex-direction: column;
		gap:            1.5rem;
		padding:        2rem 1.5rem;
		align-items:    center;
		border:         2px solid var(--wp--preset--color--gold);
		border-radius:  2rem;
	}

	.nk-members__card-media {
		width: 100%;
		gap:   0.75rem;
	}

	.nk-members__card-img-wrap { width: 10.625rem; }

	.nk-members__card-name { font-size: 2rem; }

	.nk-members__card-role { font-size: 0.75rem; }

	.nk-members__card-text { padding-top: 0; }

	.nk-members__card-text p { font-size: 1rem; }
}


/* ══════════════════════════════════════════════════════════
   SECTION PROYECTOS
   Título + separador linea-5 + slider horizontal de cards
   (scroll nativo con snap, sin JS).
   ══════════════════════════════════════════════════════════ */

.nk-proyectos {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	padding:        2rem 0 3rem;
	overflow:       hidden;
}

/* ── Título ──────────────────────────────────────────────── */

.nk-proyectos__header {
	display:         flex;
	justify-content: center;
	padding:         1rem 1.5rem;
}

.nk-proyectos__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.1;
	color:       var(--wp--preset--color--text);
	margin:      0;
	text-align:  center;
}

.nk-proyectos__title-main {
	display:   block;
	font-size: 2.625rem; /* 42px mobile H2 */
}

.nk-proyectos__title-sub {
	display:   block;
	font-size: var(--wp--preset--font-size--lg); /* H5 mobile */
}

/* ── Slider ──────────────────────────────────────────────── */

.nk-proyectos__slider {
	display:          flex;
	gap:              1rem;
	overflow-x:       auto;
	scroll-snap-type: x mandatory;
	padding:          0 2rem;
	-webkit-overflow-scrolling: touch;
}

.nk-proyectos__card {
	flex:              0 0 16.75rem; /* 268px */
	display:           flex;
	flex-direction:    column;
	gap:               1rem;
	scroll-snap-align: start;
	scroll-margin-left: 2rem;
	color:             var(--wp--preset--color--text);
}

.nk-proyectos__card picture {
	display: block;
	width:   100%;
}

.nk-proyectos__img {
	display:      block;
	width:        100%;
	aspect-ratio: 268 / 396;
	object-fit:   cover;
}

.nk-proyectos__text {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem; /* 12px */
}

.nk-proyectos__text p,
.nk-proyectos__text h3 {
	margin: 0;
}

.nk-proyectos__meta {
	font-size:   0.6875rem; /* 11px mobile */
	line-height: 1.5;
}

.nk-proyectos__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size:   1.875rem; /* 30px mobile */
	line-height: 1.1;
	color:       inherit;
}

.nk-proyectos__jp {
	font-size:   1rem; /* 16px mobile */
	line-height: 1.3;
}

.nk-proyectos__desc {
	font-size:   0.875rem; /* 14px mobile */
	line-height: 1.4;
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-proyectos {
		gap: 2rem; /* 32px */
	}

	.nk-proyectos__header {
		justify-content: flex-start;
		padding:         3rem 8rem 0;
	}

	.nk-proyectos__title {
		white-space: nowrap;
		text-align:  left;
	}

	.nk-proyectos__title-main,
	.nk-proyectos__title-sub {
		display:        inline;
		font-size:      3rem; /* 48px */
		letter-spacing: 0.012em;
	}

	.nk-proyectos__title-sub::before {
		content: ' '; /* espacio entre "PROYECTOS" y "EN LOS QUE..." */
	}

	.nk-proyectos__slider {
		gap:     1.125rem; /* 18px */
		padding: 0 3rem;
	}

	.nk-proyectos__card {
		flex-basis:         17.75rem; /* 284px */
		scroll-margin-left: 3rem;
	}

	.nk-proyectos__img {
		aspect-ratio: 284 / 420;
	}

	.nk-proyectos__text {
		gap: 0.875rem; /* 14px */
	}

	.nk-proyectos__meta {
		font-size: 0.75rem; /* 12px */
	}

	.nk-proyectos__name {
		font-size:   2rem; /* 32px */
		line-height: 1.2;
	}

	.nk-proyectos__jp {
		font-size: 1.125rem; /* 18px */
	}

	.nk-proyectos__desc {
		font-size: 1rem; /* 16px */
	}
}


/* ══════════════════════════════════════════════════════════
   SECTION COLABORADORES
   Separadores top/bottom + caja azul con logos.
   Fondo: token secondary-light (#93B7FF) = Figma Secondary/Lighten.
   ══════════════════════════════════════════════════════════ */

.nk-colab {
	background: var(--wp--preset--color--background);
	overflow:   hidden;
}

.nk-colab__linea {
	display: block;
	width:   100%;
}

.nk-colab__linea picture,
.nk-colab__linea img {
	display:    block;
	width:      100%;
	height:     auto;
	object-fit: cover;
}

.nk-colab__content {
	background: var(--wp--preset--color--secondary-light);
	padding:    0 0 1.5rem;
}

/* ── Título ──────────────────────────────────────────────── */

.nk-colab__header {
	display:         flex;
	justify-content: center;
	padding:         1.5rem;
}

.nk-colab__title {
	font-family:    var(--wp--preset--font-family--display);
	font-weight:    400;
	line-height:    1.1;
	color:          var(--wp--preset--color--background-deep);
	margin:         0;
	text-align:     center;
}

.nk-colab__title-main {
	display:   block;
	font-size: 2.625rem; /* 42px mobile H2 */
}

.nk-colab__title-sub {
	display:     block;
	font-size:   var(--wp--preset--font-size--lg); /* 2rem / 32px — H5 mobile */
	line-height: 1.2;
}

/* ── Logos ───────────────────────────────────────────────── */

.nk-colab__logos {
	display:           flex;
	flex-wrap:         nowrap;
	align-items:       center;
	gap:               2rem;
	padding:           1rem 2rem 1.5rem;
	overflow-x:        auto;
	overflow-y:        hidden;
	scroll-snap-type:  x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:   none;
}

.nk-colab__logos::-webkit-scrollbar {
	display: none;
}

.nk-colab__logo-wrap {
	flex:              0 0 auto;
	scroll-snap-align: center;
}

.nk-colab__logo-wrap picture {
	display: block;
	height:  100%;
}

.nk-colab__logo-wrap img {
	display: block;
	height:  100%;
	width:   auto;
}

/* Alturas por logo — mobile (80 % del tamaño desktop) */
.nk-colab__logo-wrap--lidenfilms         { height: 5.3125rem; } /* 85px */
.nk-colab__logo-wrap--a1-pictures        { height: 4.625rem;  } /* 74px */
.nk-colab__logo-wrap--good-smile-company { height: 4.0625rem; } /* 65px */
.nk-colab__logo-wrap--actas              { height: 4.75rem;   } /* 76px */
.nk-colab__logo-wrap--zero-g             { height: 4.4375rem; } /* 71px */
.nk-colab__logo-wrap--jc-staff           { height: 3.8125rem; } /* 61px */

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-colab__linea {
		display: none;
	}

	.nk-colab__content {
		padding: 3rem 0;
	}

	.nk-colab__header {
		padding: 0 1rem 2rem;
	}

	.nk-colab__title {
		white-space: nowrap;
	}

	.nk-colab__title-main,
	.nk-colab__title-sub {
		display:        inline;
		font-size:      3rem; /* 48px */
		letter-spacing: 0.01em;
		line-height:    1.1;
	}

	.nk-colab__title-sub::before {
		content: ' '; /* espacio entre "ESTUDIOS" y "CON LOS QUE..." */
	}

	.nk-colab__logos {
		flex-wrap:        wrap;
		justify-content:  center;
		overflow-x:       visible;
		scroll-snap-type: none;
		gap:              4.5rem; /* 72px */
		padding:          0;
		max-width:        75.375rem; /* 1206px */
		margin:           0 auto;
	}

	.nk-colab__logo-wrap {
		flex:              initial;
		scroll-snap-align: none;
	}

	/* Alturas por logo — diseño Figma desktop */
	.nk-colab__logo-wrap--lidenfilms         { height: 6.625rem;  } /* 106px */
	.nk-colab__logo-wrap--a1-pictures        { height: 5.8125rem; } /* 93px */
	.nk-colab__logo-wrap--good-smile-company { height: 5.125rem;  } /* 82px */
	.nk-colab__logo-wrap--actas              { height: 5.9375rem; } /* 95px */
	.nk-colab__logo-wrap--zero-g             { height: 5.5625rem; } /* 89px */
	.nk-colab__logo-wrap--jc-staff           { height: 4.75rem;   } /* 76px */
}


/* ══════════════════════════════════════════════════════════
   SECTION PODCAST
   Fondo oscuro, título dos tamaños, logo SVG, CTA YouTube.
   ══════════════════════════════════════════════════════════ */

.nk-podcast {
	background:      var(--wp--preset--color--background-deep);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             2rem;
	padding:         3rem 1.5rem 4.5rem;
}

/* ── Título ──────────────────────────────────────────────── */

.nk-podcast__title {
	font-family:    var(--wp--preset--font-family--display);
	font-weight:    400;
	color:          var(--wp--preset--color--text);
	text-align:     center;
	margin:         0;
	line-height:    1;
}

.nk-podcast__title-pre {
	display:        block;
	font-family:    var(--wp--preset--font-family--body);
	font-size:      0.875rem; /* 14px */
	font-weight:    400;
	color:          var(--wp--preset--color--gold);
	letter-spacing: 0.18em;
	line-height:    1.5;
}

.nk-podcast__title-main {
	display:     block;
	font-size:   2.625rem; /* 42px mobile H2 */
	line-height: 1.1;
}

/* ── Logo ────────────────────────────────────────────────── */

.nk-podcast__logo-wrap {
	display:         flex;
	justify-content: center;
	width:           100%;
}

.nk-podcast__logo {
	width:     min(22.75rem, 100%); /* 364px en Figma / ancho panel */
	height:    auto;
}

/* ── CTA ─────────────────────────────────────────────────── */

.nk-podcast__cta {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	font-family:      var(--wp--preset--font-family--body);
	font-size:        0.875rem; /* 14px */
	font-weight:      700;
	letter-spacing:   1px;
	text-transform:   uppercase;
	color:            var(--wp--preset--color--background-deep);
	background-color: var(--wp--preset--color--text);
	border:           0;
	border-radius:    9999px;
	padding:          0.875rem 1.375rem;
	text-decoration:  none;
	transition:       background-color 0.15s ease, color 0.15s ease;
}

.nk-podcast__cta:hover,
.nk-podcast__cta:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color:            var(--wp--preset--color--text);
}

/* ── Row y Brand ─────────────────────────────────────────── */

.nk-podcast__row {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            2rem;
	width:          100%;
}

.nk-podcast__video {
	display: none; /* visible solo en desktop */
}

.nk-podcast__brand {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            2rem;
	width:          100%;
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-podcast {
		align-items: flex-start;
		gap:         4rem;        /* 64px entre título y row */
		padding:     4.5rem 8rem; /* 72px vertical / 128px horizontal */
	}

	/* Título: "ESCUCHA NUESTRO PODCAST" como una sola línea H2 */
	.nk-podcast__title {
		text-align: left;
	}

	.nk-podcast__title-pre {
		display:        inline;
		font-family:    var(--wp--preset--font-family--display);
		font-size:      3rem; /* 48px */
		font-weight:    400;
		color:          var(--wp--preset--color--text);
		letter-spacing: 0;
		text-transform: uppercase;
		line-height:    1.1;
	}

	.nk-podcast__title-main {
		display:        inline;
		font-size:      3rem; /* 48px */
		line-height:    1.1;
		letter-spacing: 0;
	}

	/* Row: dos columnas iguales */
	.nk-podcast__row {
		flex-direction: row;
		align-items:    stretch;
		gap:            0;
		width:          100%;
	}

	/* Columna izquierda — iframe YouTube */
	.nk-podcast__video {
		display:          block;
		flex:             1 1 50%;
		min-width:        0;
		background-color: var(--wp--preset--color--surface);
		border-radius:    0.5rem; /* 8px */
		overflow:         hidden;
		position:         relative;
		aspect-ratio:     16 / 9;
	}

	.nk-podcast__video iframe {
		position: absolute;
		inset:    0;
		width:    100%;
		height:   100%;
		border:   0;
	}

	/* Columna derecha — logo + botón */
	.nk-podcast__brand {
		flex:            1 1 50%;
		align-items:     center;
		justify-content: center;
		align-self:      end;
		padding:         3.5rem 3rem; /* 56px 48px */
		gap:             3rem;        /* 48px */
	}

	.nk-podcast__logo-wrap {
		justify-content: center;
		align-self:      end;
		width:           100%;
	}

	.nk-podcast__logo {
		width: min(34.5rem, 100%); /* 552px Figma */
	}

	.nk-podcast__cta {
		padding: 1rem 1.5rem;
	}
}


/* ══════════════════════════════════════════════════════════
   SECTION ESCUELA
   Fondo degradado background-deep → primary. Mobile: flujo
   vertical con imagen intercalada. Desktop: 2 columnas
   (contenido izq / imagen full-height der con overlay).
   ══════════════════════════════════════════════════════════ */

.nk-escuela {
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--background-deep),
		var(--wp--preset--color--primary)
	);
	color: var(--wp--preset--color--text);
}

.nk-escuela__inner {
	display:        flex;
	flex-direction: column;
}

/* ── Contenido ───────────────────────────────────────────── */

.nk-escuela__content {
	display:        flex;
	flex-direction: column;
	padding:        3rem 1.5rem;
	gap:            1.5rem;
	align-items:    center;
	text-align:     center;
}

.nk-escuela__title {
	font-family:  var(--wp--preset--font-family--display);
	font-size:    2.625rem; /* 42px mobile H2 */
	font-weight:  400;
	line-height:  1.1;
	color:        var(--wp--preset--color--text);
	margin:       0;
}

.nk-escuela__linea {
	width: 100%;
}

.nk-escuela__linea img {
	display: block;
	width:   100%;
	height:  auto;
}

/* "Conoce el / MÉTODO NINAKAMI" — visible solo en mobile */

.nk-escuela__label {
	display:        flex;
	flex-direction: column;
	gap:            0.125rem;
}

.nk-escuela__label-pre {
	font-family:    var(--wp--preset--font-family--body);
	font-size:      0.875rem; /* 14px */
	font-weight:    400;
	color:          var(--wp--preset--color--secondary-light);
	letter-spacing: 0.18em;
}

.nk-escuela__label-main {
	font-family: var(--wp--preset--font-family--display);
	font-size:   clamp(1.875rem, 1.719rem + 0.66vw, 2.25rem); /* xl */
	font-weight: 400;
	color:       var(--wp--preset--color--secondary-light);
	line-height: 1.1;
}

/* Imagen — visible solo en mobile */

.nk-escuela__img-wrap {
	width:      calc(100% + 3rem);
	margin-left: -1.5rem;
	overflow:   hidden;
}

.nk-escuela__img-mobile {
	display: block;
	width:   100%;
	height:  auto;
}

/* "Si te gustó…" — mobile: debajo imagen / desktop: subtítulo col izq */

.nk-escuela__subtitle {
	display:        flex;
	flex-direction: column;
	gap:            0.125rem;
}

.nk-escuela__subtitle-pre {
	font-family: var(--wp--preset--font-family--body);
	font-size:   1rem;
	font-weight: 400;
	color:       var(--wp--preset--color--text);
}

.nk-escuela__subtitle-main {
	font-family: var(--wp--preset--font-family--display);
	font-size:   clamp(1.5rem, 1.293rem + 0.88vw, 2rem); /* lg */
	font-weight: 400;
	color:       var(--wp--preset--color--secondary-light);
	line-height: 1.1;
}

.nk-escuela__body {
	font-family: var(--wp--preset--font-family--body);
	font-size:   clamp(0.875rem, 0.823rem + 0.22vw, 1rem); /* body */
	line-height: 1.5;
	color:       var(--wp--preset--color--text);
	margin:      0;
}

.nk-escuela__cta {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	align-self:       center;
	font-family:      var(--wp--preset--font-family--body);
	font-size:        1rem;
	font-weight:      700;
	letter-spacing:   1px;
	text-transform:   uppercase;
	color:            var(--wp--preset--color--background-deep);
	background-color: var(--wp--preset--color--text);
	border:           0;
	border-radius:    9999px;
	padding:          0.875rem 1.375rem;
	text-decoration:  none;
	transition:       background-color 0.15s ease, color 0.15s ease;
}

.nk-escuela__cta:hover,
.nk-escuela__cta:focus-visible {
	background-color: var(--wp--preset--color--background);
	color:            var(--wp--preset--color--text);
}

/* Columna media — oculta en mobile */

.nk-escuela__media {
	display: none;
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	/* Gradiente: to bottom (igual que mobile, no necesita override) */

	.nk-escuela__inner {
		flex-direction: row;
		gap:            4rem; /* 64px entre columnas — Figma */
	}

	/* Columna izquierda — texto */
	.nk-escuela__content {
		flex:            1 0 0;   /* crece, no encoge, sin % fijo */
		padding:         3rem 0 3rem 8rem; /* 128px left = Figma pl-128 */
		gap:             1.875rem; /* 30px entre título / subtítulo / body */
		justify-content: center;
		align-self:      end;
		align-items:     flex-start;
		text-align:      left;
	}

	.nk-escuela__title {
		font-size: 3rem; /* 48px H2 */
	}

	.nk-escuela__subtitle-pre {
		font-size: 1.125rem; /* 18px desktop — Figma */
	}

	.nk-escuela__subtitle-main {
		font-size: 2.5rem; /* 40px desktop — Figma */
	}

	/* Botón separado ~80px del body (gap 30px + margin-top 50px) */
	.nk-escuela__cta {
		align-self:  center;
		margin-top:  3.125rem; /* 50px extra → total ~80px desde body */
	}

	/* Ocultar elementos exclusivos de mobile */
	.nk-escuela__label,
	.nk-escuela__img-wrap,
	.nk-escuela__linea {
		display: none;
	}

	/* Columna derecha — imagen */
	.nk-escuela__media {
		display:         flex;
		position:        relative;
		flex:            0 0 57%;  /* ~Figma 1137/1920 */
		flex-direction:  column;
		justify-content: flex-end;
		align-items:     flex-start;
		overflow:        hidden;
	}

	.nk-escuela__img-desktop {
		display:          block;
		position:         absolute;
		inset:            0;
		width:            100%;
		height:           100%;
		object-fit:       cover;
		object-position:  center;
	}

	.nk-escuela__overlay {
		position:   relative; /* encima de la imagen */
		z-index:    1;
		font-family: var(--wp--preset--font-family--display);
		font-size:   3rem; /* 48px H2 — Figma */
		font-weight: 400;
		color:       var(--wp--preset--color--secondary-light);
		line-height: 1.1;
		margin:      0;
		padding:     2rem 3rem;
		background:  linear-gradient(
			to top,
			rgba(0,0,0,0.65) 0%,
			transparent      100%
		);
	}
}


/* ══════════════════════════════════════════════════════════
   SECTION EQUIPO
   "El corazón de NINAKAMI" — 3 miembros del equipo.
   Mobile: cards apiladas con foto+nombre izq / bio der.
   Desktop: 3 cards en fila, borde gold, foto centrada.
   ══════════════════════════════════════════════════════════ */

.nk-equipo {
	background: var(--wp--preset--color--background-deep);
	color:      var(--wp--preset--color--text);
	padding:    1.5rem;
}

/* ── Header ──────────────────────────────────────────────── */

.nk-equipo__header {
	margin-bottom: 1.5rem;
}

.nk-equipo__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.1;
	margin:      0;
}

.nk-equipo__title-pre {
	display:   block;
	font-size: clamp(1.5rem, 1.293rem + 0.88vw, 2rem); /* lg */
	color:     var(--wp--preset--color--gold);
}

.nk-equipo__title-main {
	display:   block;
	font-size: 2.625rem; /* 42px mobile H2 */
	color:     var(--wp--preset--color--text);
}

/* ── Intro ───────────────────────────────────────────────── */

.nk-equipo__intro {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	margin-bottom:  2rem;
}

.nk-equipo__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size:   clamp(0.875rem, 0.823rem + 0.22vw, 1rem); /* body */
	line-height: 1.5;
	color:       var(--wp--preset--color--text);
	margin:      0;
	max-width:   38rem;
}

.nk-equipo__flags {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.625rem;
	align-items: center;
}

.nk-equipo__flag {
	display: block;
	height:  auto;
}

/* ── Cards ───────────────────────────────────────────────── */

.nk-equipo__cards {
	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
}

.nk-equipo__card {
	display:               grid;
	grid-template-columns: auto 1fr;
	gap:                   1rem;
	border:                2px solid var(--wp--preset--color--gold);
	border-radius:         1rem;
	padding:               1.25rem;
	background:            var(--wp--preset--color--surface);
}

.nk-equipo__card-photo {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.625rem;
	width:          9.5625rem; /* 153px */
}

.nk-equipo__card-img {
	display:       block;
	width:         9.5625rem; /* 153px */
	height:        9.5625rem;
	object-fit:    cover;
	border-radius: 0.75rem;
}

.nk-equipo__card-id {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
	text-align:     center;
}

.nk-equipo__card-name {
	font-family:    var(--wp--preset--font-family--display);
	font-size:      0.875rem; /* body-sm */
	font-weight:    400;
	color:          var(--wp--preset--color--gold);
	line-height:    1.2;
	margin:         0;
	letter-spacing: 0.03em;
}

.nk-equipo__card-role {
	font-family: var(--wp--preset--font-family--body);
	font-size:   0.75rem; /* caption */
	font-weight: 400;
	color:       var(--wp--preset--color--text);
	line-height: 1.4;
	margin:      0;
}

.nk-equipo__card-bio-wrap {
	display:     flex;
	align-items: flex-start;
	padding-top: 0.25rem;
}

.nk-equipo__card-bio {
	font-family: var(--wp--preset--font-family--body);
	font-size:   0.75rem; /* caption */
	font-weight: 400;
	color:       var(--wp--preset--color--text);
	line-height: 1.5;
	margin:      0;
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-equipo {
		padding: 3rem 8rem;
	}

	.nk-equipo__title-main {
		font-size: 3rem; /* 48px */
	}

	.nk-equipo__intro {
		flex-direction: row;
		align-items:    center;
		gap:            3rem;
		margin-bottom:  3rem;
	}

	.nk-equipo__desc {
		max-width: 32rem;
	}

	.nk-equipo__cards {
		flex-direction: row;
		gap:            2rem;
	}

	.nk-equipo__card {
		display:        flex;
		flex-direction: column;
		align-items:    center;
		flex:           1 1 0;
		gap:            1.25rem;
		padding:        2rem 1.5rem;
	}

	.nk-equipo__card-photo {
		width:          auto;
		align-items:    center;
	}

	.nk-equipo__card-img {
		width:  11.25rem; /* 180px */
		height: 11.25rem;
	}

	.nk-equipo__card-id {
		text-align: center;
	}

	.nk-equipo__card-name {
		font-size: 1rem;
	}

	.nk-equipo__card-role {
		font-size: 0.875rem;
	}

	.nk-equipo__card-bio-wrap {
		padding-top: 0;
	}

	.nk-equipo__card-bio {
		font-size:  0.875rem;
		text-align: center;
	}
}


/* ════════════════════════════════════════════════════════════
   MERCH
   ════════════════════════════════════════════════════════════ */

.nk-merch {
	padding:        3rem 1.5rem;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.5rem;
}

.nk-merch__title {
	font-family: var(--wp--preset--font-family--display);
	font-size:   2.625rem; /* 42px — equivalente token 3xl en mobile */
	line-height: 1.1;
	color:       var(--wp--preset--color--text);
	text-align:  center;
	margin:      0;
}

.nk-merch__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   0.75rem;
	width:                 100%;
}

.nk-merch__card {
	display:         flex;
	flex-direction:  column;
	gap:             0.5rem;
	background-color: var(--wp--preset--color--surface);
	border-radius:   0.625rem;
	overflow:        hidden;
	text-decoration: none;
	transition:      opacity 0.2s ease;
}

.nk-merch__card:hover {
	opacity: 0.82;
}

.nk-merch__card-img {
	width:            100%;
	height:           9.375rem; /* 150px */
	background-color: rgba(93, 69, 82, 0.6); /* surface-raised 60% */
	border-radius:    0.625rem;
	flex-shrink:      0;
}

.nk-merch__card-info {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
	padding:        0.625rem;
}

.nk-merch__card-name {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color:       var(--wp--preset--color--text);
	line-height: 1.3;
}

.nk-merch__card-price {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body);
	font-weight: 700;
	color:       var(--wp--preset--color--text);
}

.nk-merch__cta-wrap {
	display:         flex;
	justify-content: center;
}

.nk-merch__cta {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	padding:          0.75rem 1.75rem;
	border-radius:    9999px;
	background-color: var(--wp--preset--color--text);
	color:            var(--wp--preset--color--background);
	font-family:      var(--wp--preset--font-family--body);
	font-size:        var(--wp--preset--font-size--body-sm);
	font-weight:      700;
	letter-spacing:   0.03em;
	text-transform:   uppercase;
	text-decoration:  none;
	transition:       background-color 0.2s ease, color 0.2s ease;
}

.nk-merch__cta:hover {
	background-color: var(--wp--preset--color--primary);
	color:            var(--wp--preset--color--text);
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.nk-merch {
		padding:     5rem 8rem;
		align-items: flex-start;
		gap:         3rem;
	}

	.nk-merch__title {
		font-size:  3rem; /* 48px */
		text-align: left;
	}

	.nk-merch__grid {
		grid-template-columns: repeat(4, 1fr);
		gap:                   1.5rem;
	}

	.nk-merch__card {
		gap:           0.75rem;
		border-radius: 0.75rem;
	}

	.nk-merch__card-img {
		height:        12.5rem; /* 200px */
		border-radius: 0.75rem;
	}

	.nk-merch__card-info {
		gap:     0.375rem;
		padding: 1rem;
	}

	.nk-merch__card-name {
		font-size: var(--wp--preset--font-size--body);
	}

	.nk-merch__card-price {
		font-size: var(--wp--preset--font-size--body-lg);
	}

	.nk-merch__cta-wrap {
		width: 100%;
	}
}


/* ============================================================
   Método Ninakami — Intro
   ============================================================ */

.nk-metodo-intro {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--background-deep),
		var(--wp--preset--color--surface)
	);
	padding: 4.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

/* ── Decorative badges — mobile only ── */
.nk-metodo-intro__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 1rem;
	opacity: 0.5;
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 900;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	margin: 0;
}

/* Banda horizontal superior */
.nk-metodo-intro__badge--top {
	top: 2.3125rem;
	left: 1.625rem;
}

/* Franjas verticales: contenedor estrecho, texto interior rotado */
.nk-metodo-intro__badge--left,
.nk-metodo-intro__badge--right {
	top: 3.875rem;
	width: 10px;
	height: 24rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nk-metodo-intro__badge--left              { left: 2.3125rem; }
.nk-metodo-intro__badge--left-2            { left: 2.3125rem; top: calc(3.875rem + 24rem); }
.nk-metodo-intro__badge--right             { right: 2.3125rem; }
.nk-metodo-intro__badge--right-2           { right: 2.3125rem; top: calc(3.875rem + 24rem); }

.nk-metodo-intro__badge--left .nk-metodo-intro__badge-text {
	transform: rotate(-90deg);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nk-metodo-intro__badge--right .nk-metodo-intro__badge-text {
	transform: rotate(90deg);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nk-metodo-intro__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ── Layout principal ── */
.nk-metodo-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
}

/* ── Columna de texto ── */
.nk-metodo-intro__col-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	text-align: center;
	order: 1;
}

.nk-metodo-intro__heading {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.nk-metodo-intro__h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 2.586rem + 1.77vw, 4rem);
	line-height: 1.1;
	color: var(--wp--preset--color--text);
	letter-spacing: 0.012em;
	margin: 0;
}

.nk-metodo-intro__sub {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 2.146rem + 0.44vw, 2.5rem);
	line-height: 1.1;
	color: var(--wp--preset--color--secondary-light);
	letter-spacing: 0.01em;
	margin: 0;
}

.nk-metodo-intro__tagline {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);
	line-height: 1.3;
	color: var(--wp--preset--color--text);
	margin: 0;
}

.nk-metodo-intro__tagline strong {
	font-weight: 700;
}

/* ── Placeholder de vídeo ── */
.nk-metodo-intro__video {
	background: var(--wp--preset--color--secondary-light);
	width: 15.3125rem;
	height: 7.8125rem;
	flex-shrink: 0;
	order: 2;
}

/* ── Gráfica sostenibilidad ── */
.nk-metodo-intro__grafica {
	position: relative;
	width: 100%;
	order: 3;
}

.nk-metodo-intro__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Bullets ── */
.nk-metodo-intro__bullets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--text);
	width: 100%;
}

.nk-metodo-intro__bullets--d { display: none; }

/* ── Desktop (≥1024px) ── */
@media (min-width: 1024px) {

	.nk-metodo-intro {
		padding: 6.25rem 7.5rem 5rem;
	}

	/* Ocultar badges decorativos */
	.nk-metodo-intro__badge { display: none; }

	/* Fila de 3 columnas */
	.nk-metodo-intro__inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0;
	}

	/* Columna izquierda: texto */
	.nk-metodo-intro__col-text {
		order: 1;
		align-items: flex-start;
		text-align: left;
		flex: 1 1 auto;
		min-width: 0;
		gap: 3rem;
		padding-right: 2rem;
	}

	.nk-metodo-intro__h1,
	.nk-metodo-intro__sub,
	.nk-metodo-intro__tagline { text-align: left; }

	/* Columna central: gráfica */
	.nk-metodo-intro__grafica {
		order: 2;
		width: 30rem;
		height: 27.5rem;
		overflow: hidden;
		flex-shrink: 0;
	}

	/* Columna derecha: vídeo */
	.nk-metodo-intro__video {
		display: none;
	}

	/* Bullets en columna izquierda */
	.nk-metodo-intro__bullets--d {
		display: flex;
		justify-content: flex-start;
		font-size: 0.75rem;
		max-width: 27.4375rem;
	}

	/* Ocultar bullets mobile */
	.nk-metodo-intro__bullets--m { display: none; }

}


/* ============================================================
   Método Ninakami — ¿Cómo generamos ingresos?
   ============================================================ */

/* ---- Sección global ---- */
.nk-ingresos {
	display:   flex;
	flex-direction: column;
}

/* ---- Hero imagen ---- */
.nk-ingresos__hero {
	position: relative;
	height:   14.5rem; /* 232px */
	overflow: hidden;
}

.nk-ingresos__hero-img {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center top;
}

/* Nube de palabras — sobre el gradiente inferior */
.nk-ingresos__tags {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             0.75rem 1.25rem;
	padding:         0.75rem 2.5rem;
	background:      linear-gradient(
		to bottom,
		transparent,
		var(--wp--preset--color--background-deep)
	);
	min-height:      6rem;
}

.nk-ingresos__tag {
	font-family:    var(--wp--preset--font-family--body);
	font-size:      0.6875rem; /* 11px */
	font-weight:    700;
	line-height:    1.5;
	letter-spacing: 0.03em;
	color:          var(--wp--preset--color--text);
	text-align:     center;
}

/* Ítems multi-línea: apila los dos spans en columna */
.nk-ingresos__tag--multi {
	display:        flex;
	flex-direction: column;
	align-items:    center;
}

/* ---- Área de contenido (crema orgánica en mobile) ---- */
.nk-ingresos__content {
	position:            relative;
	background-image:    var(--nk-ingresos-bg);
	background-repeat:   no-repeat;
	background-position: top left;
	background-size:     100% 100%;
	display:             flex;
	flex-direction:      column;
	align-items:         center;
	justify-content:     center;
	gap:                 2.9375rem; /* 47px */
	padding:             7rem 1.5rem 2.5rem;
	margin-top:          -4rem;
}

/* ---- Bloque de texto ---- */
.nk-ingresos__text {
	display:         flex;
	flex-direction:  column;
	gap:             0.8125rem; /* 13px */
	align-items:     center;
	text-align:      center;
}

.nk-ingresos__title {
	font-family:    var(--wp--preset--font-family--display);
	font-size:      clamp(2.25rem, 2.146rem + 0.44vw, 2.5rem); /* 2xl */
	font-weight:    400;
	line-height:    1.1;
	letter-spacing: 0.01em;
	color:          var(--wp--preset--color--background-deep);
	margin:         0;
}

.nk-ingresos__body {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body);
	line-height: 1.4;
	color:       var(--wp--preset--color--background-deep);
	margin:      0;
}

/* ---- Grid de iconos ---- */
.nk-ingresos__icons {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem; /* 12px */
	width:          19.25rem; /* 308px */
}

.nk-ingresos__icons-row {
	display:     flex;
	gap:         0.75rem;
	align-items: center;
}

.nk-ingresos__icon-card {
	background:    var(--wp--preset--color--secondary);
	border-radius: 1rem; /* 16px */
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0.625rem; /* 10px */
	color:         var(--wp--preset--color--text);
	flex-shrink:   0;
}

.nk-ingresos__icon-card svg {
	width:  4.6875rem; /* 75px */
	height: 4.6875rem;
	display: block;
}

/* Tarjeta ancha — audiencia */
.nk-ingresos__icon-card--wide {
	width:   100%;
	height:  7.0625rem; /* 113px */
}

.nk-ingresos__icon-card--wide svg {
	width:  7.3125rem; /* 117px */
	height: 7.1875rem; /* 115px */
}

/* ============================================================
   Desktop ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {

	/* Sección: fila — contenido izq / imagen der */
	.nk-ingresos {
		flex-direction:  row;
		align-items:     stretch;
		background:      var(--wp--preset--color--text); /* crema */
	}

	/* Columna izquierda — título + cuerpo + iconos */
	.nk-ingresos__content {
		flex:                0 0 auto;
		background-image:   none;
		background-color:   transparent;
		align-items:        center;
		justify-content:    space-between;
		padding:            1.5rem 1.5rem 1.5rem 8rem; /* 24px · 128px */
		height:             28rem; /* 448px */
		gap:                0;
	}

	.nk-ingresos__title {
		font-size:   var(--wp--preset--font-size--3xl); /* 48px */
		white-space: nowrap;
	}

	.nk-ingresos__body {
		font-size: var(--wp--preset--font-size--body-lg);
	}

	/* Columna derecha — imagen + tags */
	.nk-ingresos__hero {
		flex:   1 1 auto;
		height: auto;
		min-height: 28rem;
	}

	/* Tags desktop: Ernesto 24px */
	.nk-ingresos__tags {
		min-height: 9.0625rem; /* 145px */
		gap:        0.75rem 1.25rem;
	}

	.nk-ingresos__tag {
		font-family: var(--wp--preset--font-family--display);
		font-size:   var(--wp--preset--font-size--md); /* 24px */
		font-weight: 400;
		line-height: 1.2;
	}

}


/* ══════════════════════════════════════════════════════════
   SECTION FORMA DE CREAR — metodo-forma-crear
   ══════════════════════════════════════════════════════════ */

.nk-crear {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            3rem; /* 48px */
	padding-top:    3rem;
}

/* Icono estrella */
.nk-crear__star {
	color: var(--wp--preset--color--text);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nk-crear__star svg {
	width:   4.5rem;    /* ~72px */
	height:  4.4375rem; /* ~71px */
	display: block;
}

/* Encabezado */
.nk-crear__header {
	display:        flex;
	flex-direction: column;
	gap:            1.5rem; /* 24px */
	align-items:    center;
	text-align:     center;
	color:          var(--wp--preset--color--text);
	padding:        0 1.5rem;
	width:          100%;
}

.nk-crear__title {
	font-family: var(--wp--preset--font-family--display);
	font-size:   clamp(2.625rem, 2.469rem + 0.66vw, 3rem); /* 3xl */
	line-height: 1.1;
	margin:      0;
}

.nk-crear__subtitle {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--body-lg);
	line-height: 1.3;
	margin:      0;
}

/* Contenedor de bandas */
.nk-crear__bands {
	display:        flex;
	flex-direction: column;
	width:          100%;
	overflow:       hidden;   /* recorta desbordamiento lateral */
	padding-top:    1.5rem;   /* espacio para que la primera banda no se corte por arriba */
}

/* Banda individual */
.nk-crear__band {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          10rem;
	padding:         0 8rem;
	/* Rotación -3° (antihorario) — se expande ±4rem para cubrir el ancho completo */
	transform:       rotate(-3deg);
	width:           calc(100% + 8rem);
	margin-inline:   -4rem;
}

.nk-crear__band--darker  { background: var(--wp--preset--color--primary-darker); }
.nk-crear__band--dark    { background: var(--wp--preset--color--primary-dark); }
.nk-crear__band--base    { background: var(--wp--preset--color--primary); }
.nk-crear__band--lighten { background: var(--wp--preset--color--primary-lighten); }

/* Inner — contra-rotación para que el contenido quede recto */
.nk-crear__band-inner {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             1.625rem;
	width:           100%;
	transform:       rotate(3deg);
}

/* Icono en banda */
.nk-crear__band-icon {
	flex-shrink:     0;
	color:           var(--wp--preset--color--text);
	width:           5.6875rem; /* 91px — igual al Figma */
	height:          5.6875rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.nk-crear__band-icon svg {
	width:   100%;
	height:  100%;
	display: block;
}

/* Texto de banda */
.nk-crear__band-text {
	color:     var(--wp--preset--color--text);
	flex:      1 1 0;
	min-width: 0;
}

/* Categoría — oculta en mobile, visible en desktop como título de card */
.nk-crear__band-cat {
	display: none;
}

.nk-crear__band-label {
	font-family:     var(--wp--preset--font-family--body);
	font-size:       var(--wp--preset--font-size--helper); /* ~11px */
	font-weight:     700;
	line-height:     1.5;
	letter-spacing:  0.03em;
	text-transform:  uppercase;
	margin:          0 0 0.125rem;
}

.nk-crear__band-list {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--helper); /* ~11px */
	font-weight: 400;
	line-height: 1.5;
	margin:      0;
	padding-left: 1rem;
}

.nk-crear__band-list li {
	margin: 0;
}

.nk-crear__band-body {
	font-family: var(--wp--preset--font-family--body);
	font-size:   var(--wp--preset--font-size--helper); /* ~11px */
	font-weight: 400;
	line-height: 1.5;
	margin:      0;
}


/* ── Desktop (section_about style) ───────────────────────── */

@media (min-width: 1024px) {

	/* Sección: columna → con espacio para header + cards */
	.nk-crear {
		gap:         0;
		padding-top: 0;
		align-items: stretch;
	}

	/* Estrella decorativa — solo mobile */
	.nk-crear__star {
		display: none;
	}

	.nk-crear__header {
		align-items:     flex-start;
		text-align:      left;
		padding:         3rem 8rem;
	}

	.nk-crear__title {
		font-size:   3rem; /* 48px */
		white-space: nowrap;
	}

	.nk-crear__subtitle {
		font-size: var(--wp--preset--font-size--body-lg);
	}

	/* Cards en fila */
	.nk-crear__bands {
		flex-direction: row;
		flex-wrap:      nowrap;
		gap:            2rem;
		padding:        0 8rem 3rem;
	}

	/* Card individual — reset rotación mobile */
	.nk-crear__band {
		transform:       none;
		width:           auto;
		margin-inline:   0;
		flex:            1 1 0;
		min-width:       0;
		min-height:      37.5rem; /* 600px — igual que section_about */
		height:          auto;
		border-radius:   3rem;
		flex-direction:  column;
		justify-content: flex-start;
		align-items:     center;
		gap:             1.5rem;
		padding:         3rem 2rem;
		text-align:      center;
	}

	/* Sin overflow hidden en desktop — las cards tienen border-radius */
	.nk-crear__bands {
		overflow:    visible;
		padding-top: 0;
	}

	.nk-crear__band-inner {
		transform: none;
		flex-direction: column;
		align-items:    center;
		gap:            1.5rem;
	}

	/* Icono grande en card */
	.nk-crear__band-icon {
		width:  6rem;
		height: 6rem;
	}

	.nk-crear__band-text {
		flex:       0 0 auto;
		text-align: center;
		display:    flex;
		flex-direction: column;
		align-items:    center;
		gap:        0.75rem;
	}

	/* Categoría visible como título de card en desktop */
	.nk-crear__band-cat {
		display:     block;
		font-family: var(--wp--preset--font-family--display);
		font-size:   2.5rem; /* 40px — igual que sobre__question */
		line-height: 1.1;
		margin:      0;
		color:       var(--wp--preset--color--text);
	}

	.nk-crear__band-label {
		font-size:  var(--wp--preset--font-size--body); /* 16px */
		font-weight: 700;
		margin:      0;
	}

	.nk-crear__band-list {
		font-size:  var(--wp--preset--font-size--body); /* 16px */
		text-align: left;
	}

	.nk-crear__band-body {
		font-size:  var(--wp--preset--font-size--body); /* 16px */
		line-height: 1.4;
	}

}