/* ==================================================================
   Portada inmersiva: estructura común (escenario, escenas, secciones)
   Cada tema define sus tokens (--cn-*) en style.css.
   ================================================================== */

.cn-home-page { background: var(--cn-bg); }
.cn-home { position: relative; z-index: 1; color: var(--cn-ink-2); }

/* ------------------------------------------------------------------
   Escenario fijo
   ------------------------------------------------------------------ */
.cn-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--cn-bg);
	overflow: hidden;
}
.cn-stage.is-hidden { visibility: hidden; }

.cn-stage__poster,
.cn-stage__canvas,
.cn-stage__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cn-stage__poster { object-fit: cover; opacity: 0; transition: opacity 0.9s var(--cn-ease); }
.cn-stage__poster.is-on { opacity: 1; }
.cn-stage__video { object-fit: cover; opacity: 0; transition: opacity 1.2s var(--cn-ease); }
.cn-stage.has-video .cn-stage__video { opacity: 1; }
.cn-stage__canvas { display: block; opacity: 0; transition: opacity 1.4s var(--cn-ease); }
.cn-stage.is-live .cn-stage__canvas { opacity: 1; }
.cn-stage.is-live .cn-stage__poster,
.cn-stage.is-live .cn-stage__video { opacity: 0; transition-delay: 1.4s; }

/* Velo de lectura: protege el texto sin tapar la escena */
.cn-stage__veil { position: absolute; inset: 0; pointer-events: none; }
.cn-stage__veil::before,
.cn-stage__veil::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: opacity 0.8s var(--cn-ease);
}
.cn-stage__veil::before { background: var(--cn-veil-dark); }
.cn-stage__veil::after { background: var(--cn-veil-light); opacity: 0; }
html[data-cine-tone="light"] .cn-stage__veil::before { opacity: 0; }
html[data-cine-tone="light"] .cn-stage__veil::after { opacity: 1; }

/* Grano de película sobre toda la portada (también sobre el texto) */
.cn-grain {
	position: fixed;
	inset: -50%;
	z-index: 40;
	pointer-events: none;
	background-image: var(--cn-grain-img);
	background-size: 256px 256px;
	opacity: var(--cn-grain, 0.07);
	mix-blend-mode: overlay;
	animation: cn-grain 0.42s steps(5) infinite;
}
@keyframes cn-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-7%, 4%); }
	40% { transform: translate(5%, -9%); }
	60% { transform: translate(-11%, -3%); }
	80% { transform: translate(8%, 10%); }
	100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------------
   Escenas
   ------------------------------------------------------------------ */
.cn-scene {
	position: relative;
	min-height: 118vh;
	display: flex;
	align-items: center;
	padding: 120px var(--cn-gutter);
	max-width: var(--cn-wrap);
	margin: 0 auto;
}
.cn-scene--intro { min-height: 100vh; align-items: flex-end; padding-bottom: 16vh; }
.cn-scene__copy { max-width: 540px; }
.cn-scene--intro .cn-scene__copy { max-width: 760px; }
.cn-scene--right { justify-content: flex-end; }

.cn-eyebrow {
	font-family: var(--cn-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cn-muted);
	margin: 0;
}
.cn-display {
	font-family: var(--cn-display);
	font-weight: var(--cn-display-weight, 400);
	font-style: var(--cn-display-style, normal);
	text-transform: var(--cn-display-transform, none);
	letter-spacing: var(--cn-display-tracking, -0.015em);
	font-size: clamp(2.6rem, 5.6vw, 5rem);
	line-height: var(--cn-display-leading, 1.02);
	margin: 0.3em 0 0.4em;
	color: inherit;
}
.cn-scene--intro .cn-display { font-size: var(--cn-hero-size, clamp(3rem, 7.4vw, 7rem)); }
.cn-lead { font-size: 1.12rem; line-height: 1.65; max-width: 32em; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.cn-scene[data-tone="dark"] { color: rgba(255, 255, 255, 0.84); }
.cn-scene[data-tone="dark"] .cn-eyebrow { color: rgba(255, 255, 255, 0.6); }
.cn-scene[data-tone="dark"] .cn-display { color: #fff; }
.cn-scene[data-tone="light"] { color: var(--cn-ink-2); }
.cn-scene[data-tone="light"] .cn-display { color: var(--cn-ink); }

/* Titulares palabra a palabra (solo con JS) */
.cn-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cn-word > span { display: inline-block; }
.cn-js [data-split] .cn-word > span {
	transform: translateY(108%);
	transition: transform 1.1s var(--cn-ease) calc(var(--i) * 60ms);
}
.cn-js .is-current [data-split] .cn-word > span,
.cn-js .is-in[data-split] .cn-word > span,
.cn-js .is-in [data-split] .cn-word > span { transform: none; }

/* Entrada del resto del texto ligada a la escena activa */
.cn-js .cn-scene__copy > :not(.cn-display),
.cn-js .cn-step {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1s var(--cn-ease) 0.25s, transform 1.2s var(--cn-ease) 0.25s;
}
.cn-js .cn-scene.is-current .cn-scene__copy > :not(.cn-display),
.cn-js .cn-scene.is-current .cn-step { opacity: 1; transform: none; }

/* Revelado de secciones fuera del escenario */
.cn-js [data-reveal]:not([data-split]) { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--cn-ease), transform 1.2s var(--cn-ease); }
.cn-js [data-reveal].is-in { opacity: 1; transform: none; }

.cn-scroll-cue {
	position: absolute;
	right: var(--cn-gutter);
	bottom: 28px;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	writing-mode: vertical-rl;
}
.cn-scroll-cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 54px;
	margin: 14px auto 0;
	background: linear-gradient(currentColor, transparent);
	transform-origin: top;
	animation: cn-cue 2.6s var(--cn-ease) infinite;
}
@keyframes cn-cue {
	0% { transform: scaleY(0); opacity: 1; }
	70% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* Contador de escena */
.cn-index {
	position: fixed;
	left: var(--cn-gutter);
	bottom: 28px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--cn-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.7);
	pointer-events: none;
	transition: opacity 0.5s var(--cn-ease), color 0.6s var(--cn-ease);
}
.cn-index__bar { position: relative; width: 90px; height: 1px; background: currentColor; opacity: 0.35; }
.cn-index__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	transform-origin: left;
	transform: scaleX(calc(var(--cine-s, 0) / var(--cn-scenes, 5)));
}
html[data-cine-tone="light"] .cn-index { color: var(--cn-ink); }
html[data-cine-scene="5"] .cn-index,
html[data-cine-scene="6"] .cn-index,
html.cn-off-stage .cn-index { opacity: 0; }

/* Pasos */
.cn-steps { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.cn-step { min-height: 58vh; padding-top: 6vh; }
.cn-step h3 { font-family: var(--cn-display); font-weight: var(--cn-display-weight, 400); text-transform: var(--cn-display-transform, none); font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0.25em 0 0.3em; color: inherit; }
.cn-step__n { font-family: var(--cn-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--cn-accent-on-dark, var(--cn-accent)); }

.cn-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: inherit;
	text-underline-offset: 4px;
}

/* Variantes */
.cn-variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
.cn-chip {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid currentColor;
	border-radius: var(--cn-chip-radius, 999px);
	background: transparent;
	color: inherit;
	font-family: var(--cn-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.85;
	transition: background 0.25s var(--cn-ease), color 0.25s var(--cn-ease), opacity 0.25s var(--cn-ease), border-color 0.25s var(--cn-ease);
}
.cn-chip:hover, .cn-chip:focus-visible { opacity: 1; }
.cn-chip[aria-pressed="true"] { background: var(--cn-accent); border-color: var(--cn-accent); color: var(--cn-accent-ink); opacity: 1; }
.cn-variant-panel p { margin: 0 0 4px; }
.cn-note { margin-top: 26px; font-size: 12px; opacity: 0.7; }

/* Botones */
.cn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 26px;
	border-radius: var(--cn-radius);
	font-family: var(--cn-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: var(--cn-btn-transform, none);
	transition: background 0.3s var(--cn-ease), color 0.3s var(--cn-ease), border-color 0.3s var(--cn-ease), transform 0.3s var(--cn-ease);
}
.cn-btn:hover, .cn-btn:focus-visible { transform: translateY(-1px); }
.cn-btn--accent { background: var(--cn-accent); color: var(--cn-accent-ink); border: 1px solid var(--cn-accent); }
.cn-btn--accent:hover, .cn-btn--accent:focus-visible { background: #fff; border-color: #fff; color: #111; }
.cn-btn--ink { background: var(--cn-ink); color: var(--cn-paper); border: 1px solid var(--cn-ink); }
.cn-btn--ink:hover, .cn-btn--ink:focus-visible { background: var(--cn-accent); border-color: var(--cn-accent); color: var(--cn-accent-ink); }
.cn-btn--ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.cn-btn--ghost-light:hover, .cn-btn--ghost-light:focus-visible { border-color: #fff; color: #fff; }
.cn-btn--ghost { background: transparent; color: var(--cn-ink); border: 1px solid var(--cn-line-strong, rgba(0, 0, 0, 0.3)); }
.cn-btn--ghost:hover, .cn-btn--ghost:focus-visible { border-color: var(--cn-ink); color: var(--cn-ink); }

/* ------------------------------------------------------------------
   Cinta de texto en movimiento
   ------------------------------------------------------------------ */
.cn-marquee {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding: 22px 0;
	background: var(--cn-accent);
	color: var(--cn-accent-ink);
	white-space: nowrap;
}
.cn-marquee__track { display: inline-flex; animation: cn-marquee var(--cn-marquee-speed, 38s) linear infinite; }
.cn-marquee__track > span {
	font-family: var(--cn-display);
	font-weight: var(--cn-display-weight, 400);
	font-style: var(--cn-display-style, normal);
	text-transform: var(--cn-display-transform, none);
	font-size: clamp(1.6rem, 3.4vw, 2.8rem);
	line-height: 1;
	padding-right: 0.9em;
}
.cn-marquee__track > span::after { content: var(--cn-marquee-sep, "✦"); padding-left: 0.9em; font-size: 0.55em; vertical-align: middle; }
.cn-marquee:hover .cn-marquee__track { animation-play-state: paused; }
@keyframes cn-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------
   Secciones de tienda: opacas, rápidas y sin animaciones que estorben
   ------------------------------------------------------------------ */
.cn-section {
	position: relative;
	z-index: 2;
	background: var(--cn-paper);
	color: var(--cn-ink-2);
	padding: clamp(72px, 10vw, 140px) 0;
}
.cn-section--alt { background: var(--cn-paper-2); }
.cn-section--dark { background: var(--cn-bg); color: rgba(255, 255, 255, 0.82); }
.cn-section--dark .cn-display { color: #fff; }
.cn-section--dark .cn-eyebrow { color: rgba(255, 255, 255, 0.6); }
.cn-wrap { max-width: var(--cn-wrap); margin: 0 auto; padding: 0 var(--cn-gutter); }

.cn-head { max-width: 820px; margin-bottom: clamp(36px, 5vw, 64px); }
.cn-head .cn-display { color: var(--cn-ink); font-size: clamp(2.3rem, 4.8vw, 4rem); margin-bottom: 0; }
.cn-section--dark .cn-head .cn-display { color: #fff; }
.cn-head--split { max-width: none; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.cn-head__aside { margin: 0; font-size: 15px; line-height: 1.65; color: var(--cn-muted); }

/* Rejilla de categorías */
.cn-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cn-cats-cols, 4), minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
}
.cn-cat a { position: relative; display: block; text-decoration: none; color: inherit; }
.cn-cat__media {
	display: block;
	aspect-ratio: var(--cn-cat-ratio, 4 / 5);
	overflow: hidden;
	background: var(--cn-card);
	border-radius: var(--cn-radius);
}
.cn-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--cn-ease), filter 0.6s var(--cn-ease); }
.cn-cat a:hover .cn-cat__media img,
.cn-cat a:focus-visible .cn-cat__media img { transform: scale(1.05); }
.cn-cat__n { display: block; margin-top: 14px; font-family: var(--cn-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--cn-muted); }
.cn-cat__title {
	display: block;
	margin-top: 4px;
	font-family: var(--cn-display);
	font-weight: var(--cn-display-weight, 400);
	font-style: var(--cn-display-style, normal);
	text-transform: var(--cn-display-transform, none);
	font-size: clamp(1.4rem, 2vw, 1.9rem);
	line-height: 1.05;
	color: var(--cn-ink);
}
.cn-cat__desc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--cn-muted); }

/* Índice compacto de enlaces (marcas, ingredientes…) */
.cn-index-list { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 32px 0 0; border-top: 1px solid var(--cn-line); display: flex; flex-wrap: wrap; gap: 8px; }
.cn-index-list .cn-chip { color: var(--cn-ink); border-color: var(--cn-line-strong, rgba(0, 0, 0, 0.25)); }
.cn-index-list .cn-chip:hover, .cn-index-list .cn-chip:focus-visible { border-color: var(--cn-ink); }
.cn-index-title { width: 100%; margin: 0 0 8px; font-family: var(--cn-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cn-muted); }

/* Escaparate horizontal */
.cn-rail {
	list-style: none;
	margin: 0;
	padding: 4px var(--cn-gutter) 24px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(220px, 22vw, 290px);
	gap: clamp(14px, 1.6vw, 22px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--cn-gutter);
	scrollbar-width: thin;
	scrollbar-color: var(--cn-muted) transparent;
}
.cn-product { scroll-snap-align: start; }
.cn-product a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 18px;
	background: var(--cn-card);
	border: 1px solid var(--cn-line);
	border-radius: var(--cn-radius);
	color: var(--cn-ink);
	text-decoration: none;
	transition: border-color 0.3s var(--cn-ease), transform 0.4s var(--cn-ease);
}
.cn-product a:hover, .cn-product a:focus-visible { border-color: var(--cn-ink); transform: translateY(-3px); }
.cn-product__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin-bottom: 16px; background: #fff; border-radius: calc(var(--cn-radius) * 0.6); overflow: hidden; }
.cn-product__media img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.cn-product__title { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.45; }
.cn-product__cta { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cn-accent-text, var(--cn-ink)); }
.cn-rail-note { max-width: var(--cn-wrap); margin: 8px auto 0; padding: 0 var(--cn-gutter); font-size: 12px; color: var(--cn-muted); }

/* Reel de vídeo con grano */
.cn-reel { position: relative; z-index: 2; background: var(--cn-bg); color: #fff; overflow: hidden; }
.cn-reel__frame { position: relative; aspect-ratio: 21 / 9; max-height: 92vh; width: 100%; }
.cn-reel__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-reel__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%); pointer-events: none; }
.cn-reel__caption { position: absolute; left: var(--cn-gutter); right: var(--cn-gutter); bottom: clamp(24px, 5vw, 64px); z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.cn-reel__caption .cn-display { color: #fff; font-size: clamp(2.2rem, 5vw, 4.6rem); margin: 0.2em 0 0; max-width: 14em; }
.cn-reel__caption .cn-eyebrow { color: rgba(255, 255, 255, 0.65); }
.cn-reel__tc { font-family: var(--cn-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.cn-reel__tc::before { content: "●"; color: #ff3b30; margin-right: 8px; animation: cn-rec 1.6s steps(1) infinite; }
@keyframes cn-rec { 50% { opacity: 0; } }

/* Guía original */
.cn-guide__content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.cn-guide__content > .wp-block-table,
.cn-guide__content > .wp-block-columns,
.cn-guide__content > .wp-block-group { max-width: 980px; }
.cn-guide__content h2 { font-family: var(--cn-display); font-weight: var(--cn-display-weight, 400); text-transform: var(--cn-display-transform, none); color: var(--cn-ink); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; margin-top: 1.8em; }
.cn-guide__content h3 { font-family: var(--cn-sans); font-weight: 700; color: var(--cn-ink); }

/* Cierre */
.cn-closing {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 18vh var(--cn-gutter) 14vh;
	text-align: center;
	color: #fff;
}
.cn-closing__copy { position: relative; }
.cn-closing .cn-eyebrow { color: rgba(255, 255, 255, 0.65); }
.cn-closing .cn-display { color: #fff; font-size: clamp(3rem, 8vw, 7.5rem); }
.cn-closing .cn-actions { justify-content: center; }

.cn-home-page .site-footer,
.cn-home-page footer.site-footer,
.cn-home-page .nv-footer,
.cn-home-page footer { position: relative; z-index: 2; }

.screen-reader-text:focus { z-index: 100000; }

/* ------------------------------------------------------------------
   Móvil: texto abajo, escena arriba
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.cn-scene { min-height: 108vh; align-items: flex-end; padding: 90px 16px 12vh; }
	.cn-scene--intro { min-height: 100svh; padding-bottom: 13vh; }
	.cn-scene--right { justify-content: flex-start; }
	.cn-display { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
	.cn-scene--intro .cn-display { font-size: var(--cn-hero-size-m, clamp(2.8rem, 13vw, 4rem)); }
	.cn-lead { font-size: 1rem; }
	.cn-actions .cn-btn { flex: 1 1 100%; }
	.cn-stage__veil::before { background: var(--cn-veil-dark-m, linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 70%)); }
	.cn-stage__veil::after { background: var(--cn-veil-light-m, linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0) 60%)); }
	.cn-scroll-cue, .cn-index { display: none; }
	.cn-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cn-cat__desc { display: none; }
	.cn-head--split { grid-template-columns: 1fr; gap: 14px; }
	.cn-wrap { padding: 0 16px; }
	.cn-rail { grid-auto-columns: 72vw; padding: 4px 16px 20px; }
	.cn-reel__frame { aspect-ratio: 4 / 5; }
	.cn-reel__caption { flex-direction: column; align-items: flex-start; }
	.cn-step { min-height: 52vh; }
}

/* Movimiento reducido: fotogramas fijos y textos visibles */
@media (prefers-reduced-motion: reduce) {
	.cn-js .cn-scene__copy > *, .cn-js .cn-step, .cn-js [data-reveal] { opacity: 1 !important; transform: none !important; }
	.cn-js [data-split] .cn-word > span { transform: none !important; }
	.cn-grain, .cn-marquee__track, .cn-scroll-cue::after, .cn-reel__tc::before { animation: none; }
	.cn-marquee__track { flex-wrap: wrap; white-space: normal; }
}

/* Captura de fotogramas y vídeo */
.cn-capture .cn-home,
.cn-capture .cn-grain,
.cn-capture .cn-index,
.cn-capture .site-header,
.cn-capture #masthead,
.cn-capture header.header,
.cn-capture .site-footer,
.cn-capture footer,
.cn-capture .cn-stage__veil,
.cn-capture .cn-stage__poster,
.cn-capture .cn-stage__video,
.cn-capture #wpadminbar,
.cn-capture .cky-consent-container,
.cn-capture .cky-btn-revisit-wrapper,
.cn-capture #cookie-law-info-bar,
.cn-capture #cookie-law-info-again { display: none !important; }
.cn-capture .cn-stage__canvas { opacity: 1; transition: none; }