/*
 * /aula-snoezelen/ — v4 "LA INMERSIÓN TOTAL". TODA la página vive sobre el gradiente
 * bosque profundo TEÑIDO por el tema activo (data-luz gobierna la página entera vía las
 * vars --sz-luz). Inmersivo Y calmo: NADA anima por debajo de 0.3s salvo hovers, NADA
 * parpadea; AAA bajo los 4 temas en toda la página. reduced-motion estricto.
 * Depende de sanfelix-main; solo aquí.
 */

/* Fondo del documento: casi-negro coherente (footer y overscroll incluidos). */
body:has( .sf-snoezelen ) {
	background-color: #05130d;
}

/* v6 · UN SOLO MUNDO: el footer también vive sobre el cielo fijo (teñido + olas). No lo tapamos
   con un color plano (eso creaba la costura): un VELO oscuro translúcido cuyo borde superior es
   transparente funde la unión cierre→footer sin salto, deja ver el mar debajo (fundido) y oscurece
   lo justo para que su texto pase AAA. El hairline del footer ya murió en footer.css (sin él, se
   fue también el seam de 1px del borde: lo causaba el box del border-top al componer sobre el cielo). */
main:has( .sf-snoezelen ) + .sf-footer {
	background: linear-gradient( 180deg,
		rgba(3, 12, 9, 0) 0%,
		rgba(3, 12, 9, 0.55) 14%,
		rgba(5, 19, 13, 0.82) 46%,
		rgba(5, 19, 13, 0.9) 100% );
}

.sf-snoezelen {
	position: relative;
	isolation: isolate; /* stacking context propio: sky/waves 0, contenido 1, dock 40, ignition 60 */
	color: var(--wp--preset--color--crema, #f7f5ef);
	overflow: hidden; /* recorta olas/burbujas fijas al ancho de página */
}

.sf-snoezelen-hero__inner,
.sf-snoezelen-que__inner,
.sf-snoezelen-quien__inner,
.sf-snoezelen-cierre__inner,
.sf-snoezelen-encendida__inner {
	max-width: 64rem;
	margin-inline: auto;
}

.sf-snoezelen-dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
	flex: 0 0 auto;
}

/* =========================================================================
 * LAS CUATRO LUCES (temas). Vars <color> registradas con @property para CRUZARLAS en
 * 1.2s cuando cambia data-luz (color-mix las recompone cada frame). verde = base.
 * ========================================================================= */
@property --sz-luz-1 { syntax: "<color>"; inherits: true; initial-value: #00a74d; }
@property --sz-luz-2 { syntax: "<color>"; inherits: true; initial-value: #e1f5ee; }
@property --sz-luz-3 { syntax: "<color>"; inherits: true; initial-value: #ef9f27; }

.sf-snoezelen {
	--sz-luz-1: #00a74d; /* luz principal */
	--sz-luz-2: #cfe8de; /* luz secundaria (clara) */
	--sz-luz-3: #ef9f27; /* acento cálido */
}

.sf-snoezelen[data-luz="azul"]  { --sz-luz-1: #4f88bd; --sz-luz-2: #aacbe4; --sz-luz-3: #6f9fc8; }
.sf-snoezelen[data-luz="lila"]  { --sz-luz-1: #9d8ac2; --sz-luz-2: #cebfdf; --sz-luz-3: #b19bca; }
.sf-snoezelen[data-luz="ambar"] { --sz-luz-1: #c6934e; --sz-luz-2: #dabf8a; --sz-luz-3: #c28f4e; }

/* El crossfade solo se ACTIVA tras la primera pintura (JS añade .is-luz-ready): al
   restaurar la elección guardada no hay fundido en la carga. */
.sf-snoezelen.is-luz-ready {
	transition: --sz-luz-1 1.2s ease, --sz-luz-2 1.2s ease, --sz-luz-3 1.2s ease;
}

/* =========================================================================
 * SKY — gradiente base oscuro TEÑIDO por el tema (fixed, no scrollea).
 * ========================================================================= */
.sf-snoezelen-sky {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* v5: el cielo VIRA con el tema — la mitad alta respira su hue a saturación media
	   (no solo un glow: el propio gradiente base lo lleva). El texto se asienta sobre las
	   franjas oscuras de abajo. */
	background:
		radial-gradient( 130% 88% at 50% -10%, color-mix( in srgb, var(--sz-luz-1) 30%, transparent ) 0%, transparent 58% ),
		radial-gradient( 100% 66% at 80% 112%, color-mix( in srgb, var(--sz-luz-3) 17%, transparent ) 0%, transparent 55% ),
		linear-gradient( 180deg,
			color-mix( in srgb, var(--sz-luz-1) 24%, #0b2e1f ) 0%,
			#0b2e1f 32%,
			#071a12 64%,
			#05130d 100% );
}

/* =========================================================================
 * v6 · CAPA DE LEGIBILIDAD — sombra fija de columna izquierda, CONTINUA de arriba a abajo
 * (una sola capa fija => sin bordes de sección => CERO costuras). Oscurece la izquierda,
 * donde vive el texto (alineado a la izquierda en toda la página), para AAA sobre el cielo
 * vivo; la derecha (imágenes/orbes/dock) queda encendida. Va sobre el mar y bajo el contenido
 * (z-index:0, después de las olas en el DOM). Sustituye las bandas por-sección de v5.
 * ========================================================================= */
.sf-snoezelen-shade {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient( 96deg,
		rgba(3, 12, 9, 0.66) 0%,
		rgba(3, 12, 9, 0.6) 36%,
		rgba(3, 12, 9, 0.36) 54%,
		rgba(3, 12, 9, 0.1) 68%,
		rgba(3, 12, 9, 0) 82% );
}

/* =========================================================================
 * LAS OLAS EN LAS PAREDES — 2 ondas SVG fijas al fondo del viewport, teñidas del tema
 * a .07/.05, moviéndose lentísimo en direcciones opuestas. SOLO transform (capa propia).
 * ========================================================================= */
.sf-snoezelen-waves {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.sf-snoezelen-wave {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 200%;
	height: clamp(160px, 30vh, 340px);
	will-change: transform;
}

.sf-snoezelen-wave--1 {
	fill: color-mix( in srgb, var(--sz-luz-1) 7%, transparent );
	animation: sf-sn-wave1 38s linear infinite;
}

.sf-snoezelen-wave--2 {
	fill: color-mix( in srgb, var(--sz-luz-2) 5%, transparent );
	animation: sf-sn-wave2 55s linear infinite;
}

@keyframes sf-sn-wave1 { from { transform: translateX( 0 ); }      to { transform: translateX( -50% ); } }
@keyframes sf-sn-wave2 { from { transform: translateX( -50% ); }   to { transform: translateX( 0 ); } }

/* =========================================================================
 * v5 · OLAS DE VERDAD — capa de vídeo ambiental fija al fondo del viewport. El mar se
 * INTUYE bajo brightness(.35) + un velo del tema al .5: no compite con el contenido.
 * El JS la reproduce (lazy+IO+guards) y añade .is-playing (fade-in). Oculta hasta entonces
 * (móvil/reduced/save-data: no se reproduce -> no se ve; sin archivo, este bloque no existe).
 * ========================================================================= */
.sf-snoezelen-oceanvid {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.sf-snoezelen-oceanvid.is-playing {
	opacity: 1;
}

.sf-snoezelen-oceanvid__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness( 0.35 );
}

.sf-snoezelen-oceanvid__veil {
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var(--sz-luz-1) 50%, transparent );
}

/* =========================================================================
 * BURBUJAS SUELTAS por toda la página (fixed; muy espaciadas, presencia no feria).
 * ========================================================================= */
.sf-snoezelen-loose {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.sf-snoezelen-loose-bubble {
	position: absolute;
	left: var(--lx, 50%);
	bottom: -6vh;
	width: var(--ls, 16px);
	height: var(--ls, 16px);
	margin-left: calc( var(--ls, 16px) / -2 );
	border-radius: 50%;
	filter: blur( 1px );
	background: radial-gradient( circle at 35% 30%,
		color-mix( in srgb, var(--sz-luz-2) 55%, transparent ),
		color-mix( in srgb, var(--sz-luz-1) 26%, transparent ) 70%, transparent );
	opacity: 0;
	will-change: transform, opacity;
	animation: sf-sn-loose var(--ld, 22s) linear infinite;
	animation-delay: calc( var(--ldelay, 0s) * -1 );
}

@keyframes sf-sn-loose {
	0%   { transform: translateY( 0 ) scale( 0.9 ); opacity: 0; }
	10%  { opacity: var(--lo, 0.3); }
	88%  { opacity: var(--lo, 0.3); }
	100% { transform: translateY( -112vh ) scale( 1.05 ); opacity: 0; }
}

/* =========================================================================
 * IGNITION — la página "enciende" al cargar (casi-negro -> su luz, 1.4s, 1 vez).
 * Sin JS: oculto (opacity 0). Con .sf-js: el fundido corre. reduced-motion: instantáneo.
 * ========================================================================= */
.sf-snoezelen-ignition {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	background-color: #04100b;
	opacity: 0;
}

.sf-js .sf-snoezelen-ignition {
	animation: sf-sn-ignite 1.4s ease both;
}

@keyframes sf-sn-ignite {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* =========================================================================
 * ORBES de luz del hero — radial-gradients difusos que DERIVAN lentísimo (44-58s).
 * ========================================================================= */
.sf-snoezelen-hero__orbs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	/* v6.1 · Los orbes son glows del hero; el overflow:hidden los recortaba en SECO en el borde
	   inferior del hero -> línea dura hero/sección. Se funden a transparente antes del borde
	   (máscara) para que su brillo muera suave: cero costura, un solo mundo. */
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 62%, transparent 92% );
	mask-image: linear-gradient( to bottom, #000 0%, #000 62%, transparent 92% );
}

.sf-snoezelen-orb {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

.sf-snoezelen-orb--1 {
	width: 68vw; height: 68vw; max-width: 900px; max-height: 900px;
	top: -22%; left: -14%;
	background: radial-gradient( circle at center, color-mix( in srgb, var(--sz-luz-1) 30%, transparent ), transparent 68% );
	animation: sf-sn-drift1 52s ease-in-out infinite alternate;
}

.sf-snoezelen-orb--2 {
	width: 58vw; height: 58vw; max-width: 760px; max-height: 760px;
	top: 10%; right: -18%;
	background: radial-gradient( circle at center, color-mix( in srgb, var(--sz-luz-2) 26%, transparent ), transparent 66% );
	animation: sf-sn-drift2 46s ease-in-out infinite alternate;
}

.sf-snoezelen-orb--3 {
	width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
	bottom: -20%; left: 22%;
	background: radial-gradient( circle at center, color-mix( in srgb, var(--sz-luz-3) 27%, transparent ), transparent 64% );
	animation: sf-sn-drift3 58s ease-in-out infinite alternate;
}

.sf-snoezelen-orb--4 {
	width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
	top: -8%; right: 24%;
	background: radial-gradient( circle at center, color-mix( in srgb, var(--sz-luz-1) 28%, transparent ), transparent 62% );
	animation: sf-sn-drift4 44s ease-in-out infinite alternate;
}

@keyframes sf-sn-drift1 { from { transform: translate( 0, 0 ); } to { transform: translate( 5%, 7% ); } }
@keyframes sf-sn-drift2 { from { transform: translate( 0, 0 ); } to { transform: translate( -6%, 4% ); } }
@keyframes sf-sn-drift3 { from { transform: translate( 0, 0 ); } to { transform: translate( 4%, -6% ); } }
@keyframes sf-sn-drift4 { from { transform: translate( 0, 0 ); } to { transform: translate( -4%, -5% ); } }

/* =========================================================================
 * EL MANDO DE VERDAD — dock flotante (radiogroup de luces + toggle de sonido).
 * Fixed: viaja con el scroll por TODA la página. Móvil: dock horizontal inferior.
 * ========================================================================= */
.sf-snoezelen-dock {
	position: fixed;
	right: clamp(0.6rem, 1.6vw, 1.6rem);
	top: 50%;
	transform: translateY( -50% );
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}

.sf-snoezelen-dock__lights {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.55rem;
	border-radius: 999px;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 12%, transparent );
	background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 5%, transparent );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
}

.sf-snoezelen-dock__orb {
	width: 28px; height: 28px;
	flex: 0 0 auto;
	margin: 4px; /* aire para que el activo (36px) no salte el layout */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--orb-c, #00a74d);
	box-shadow: 0 0 12px -2px var(--orb-c, #00a74d);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: width 0.35s ease, height 0.35s ease, margin 0.35s ease, box-shadow 0.35s ease;
}

.sf-snoezelen-dock__orb--verde { --orb-c: #00a74d; }
.sf-snoezelen-dock__orb--azul  { --orb-c: #4f88bd; }
.sf-snoezelen-dock__orb--lila  { --orb-c: #9d8ac2; }
.sf-snoezelen-dock__orb--ambar { --orb-c: #c6934e; }

/* El activo crece a 36px con un halo que respira LENTO (4s). */
.sf-snoezelen-dock__orb[aria-checked="true"] {
	width: 36px; height: 36px;
	margin: 0;
	animation: sf-sn-halo 4s ease-in-out infinite;
}

@keyframes sf-sn-halo {
	0%, 100% { box-shadow: 0 0 14px -2px var(--orb-c), 0 0 0 0 color-mix( in srgb, var(--orb-c) 42%, transparent ); }
	50%      { box-shadow: 0 0 20px -2px var(--orb-c), 0 0 0 7px color-mix( in srgb, var(--orb-c) 0%, transparent ); }
}

.sf-snoezelen-dock__orb:focus-visible {
	outline: 2px solid var(--wp--preset--color--crema, #f7f5ef);
	outline-offset: 3px;
}

/* Tooltip discreto (aparece al hover/foco del dock). */
.sf-snoezelen-dock__hint {
	position: absolute;
	right: calc( 100% + 0.7rem );
	top: 50%;
	transform: translateY( -50% );
	white-space: nowrap;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	background-color: color-mix( in srgb, #04100b 70%, transparent );
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 88%, transparent );
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.sf-snoezelen-dock__lights:hover + .sf-snoezelen-dock__hint,
.sf-snoezelen-dock__lights:focus-within + .sf-snoezelen-dock__hint {
	opacity: 1;
}

.sf-snoezelen-dock__sound {
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 12%, transparent );
	background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 5%, transparent );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 85%, transparent );
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.sf-snoezelen-dock__sound-on  { display: none; }
.sf-snoezelen-dock__sound-off { display: block; width: 1.15rem; height: 1.15rem; }
.sf-snoezelen-dock__sound[aria-pressed="true"] .sf-snoezelen-dock__sound-off { display: none; }
.sf-snoezelen-dock__sound[aria-pressed="true"] .sf-snoezelen-dock__sound-on  { display: block; width: 1.15rem; height: 1.15rem; }

.sf-snoezelen-dock__sound[aria-pressed="true"] {
	color: color-mix( in srgb, var(--sz-luz-1) 70%, var(--wp--preset--color--crema, #f7f5ef) );
	border-color: color-mix( in srgb, var(--sz-luz-1) 45%, transparent );
}

.sf-snoezelen-dock__sound:hover,
.sf-snoezelen-dock__sound:focus-visible {
	background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 12%, transparent );
}

.sf-snoezelen-dock__sound:focus-visible {
	outline: 2px solid var(--wp--preset--color--crema, #f7f5ef);
	outline-offset: 3px;
}

/* =========================================================================
 * 1. HERO SENSORIAL (sobre el mundo oscuro)
 * ========================================================================= */
.sf-snoezelen-hero {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(4rem, 12vh, 8rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.sf-snoezelen-hero__inner {
	position: relative;
	z-index: 1;
}

.sf-snoezelen-hero__eyebrow .sf-snoezelen-dot {
	background-color: color-mix( in srgb, var(--sz-luz-1) 88%, var(--wp--preset--color--crema, #f7f5ef) );
}

.sf-js .sf-snoezelen-hero__inner {
	animation: sf-sn-rise 1.1s ease both;
}

@keyframes sf-sn-rise {
	from { opacity: 0; transform: translateY( 1.2rem ); }
	to   { opacity: 1; transform: none; }
}

/* Eyebrows: en TODA la página son crema (mundo oscuro). */
.sf-snoezelen-hero__eyebrow,
.sf-snoezelen-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 82%, transparent );
}

.sf-snoezelen-eyebrow .sf-snoezelen-dot {
	background-color: color-mix( in srgb, var(--sz-luz-1) 88%, var(--wp--preset--color--crema, #f7f5ef) );
}

.sf-snoezelen-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.04;
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-snoezelen-hero__sub {
	margin: 1.6rem 0 0;
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.18rem;
	line-height: 1.6;
	color: var(--wp--preset--color--crema, #f7f5ef); /* opaco: sobre el mundo oscuro no necesita alpha y así queda AAA */
}

.sf-snoezelen-hero__chips {
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sf-snoezelen-hero__chip {
	padding: 0.4rem 0.9rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 90%, transparent );
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 34%, transparent );
	border-radius: 999px;
}

/* =========================================================================
 * v5 · IGERILEKUA — LA PISCINA DE BOLAS (sección interactiva, canvas). Bolas translúcidas
 * retroiluminadas por el tema (motor en page-snoezelen.js). reduced-motion/sin-JS: un frame
 * estático bello; el aria-label del canvas + el párrafo dan la descripción accesible.
 * ========================================================================= */
.sf-snoezelen-pool__inner {
	max-width: 64rem;
	margin-inline: auto;
}


.sf-snoezelen-pool__title {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.06;
	font-size: clamp(1.8rem, 4.4vw, 2.9rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
	text-wrap: balance;
}

.sf-snoezelen-pool__line {
	margin: 1rem 0 0;
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.12rem;
	line-height: 1.6;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 84%, transparent );
}

.sf-snoezelen-pool__hint {
	margin: 1rem 0 0;
	/* Chip translúcido que ABRAZA el texto (inline-flex): el hint es texto pequeño y el mar en
	   movimiento tiene crestas brillantes -> sin una banda local propia no llega a AAA. El chip
	   escala con el texto (nunca crea costura de sección) y lee como afordancia de la zona de juego. */
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 0.95em;
	border-radius: 999px;
	background: color-mix( in srgb, #030c09 62%, transparent );
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 9%, transparent );
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--sz-luz-1) 20%, var(--wp--preset--color--crema, #f7f5ef) );
}

.sf-snoezelen-pool__figure {
	margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 10%, transparent );
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
}

/* v6.1 · FLIP: la foto REAL de la piscina GIRA y revela el canvas jugable. La vuelta la dispara
   page-snoezelen.js (`.is-flipped` cuando la tarjeta está ~55% a la vista) para verse la foto
   antes de girar. reduced-motion: gira instantáneo (sin animación) al juego. */
.sf-snoezelen-pool__stage {
	margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
	perspective: 1600px;
}

.sf-snoezelen-pool__card {
	position: relative;
	width: 100%;
	height: clamp(340px, 48vh, 460px);
	transform-style: preserve-3d;
	transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.sf-snoezelen-pool__stage.is-flipped .sf-snoezelen-pool__card {
	transform: rotateY( 180deg );
}

.sf-snoezelen-pool__face {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 10%, transparent );
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
}

.sf-snoezelen-pool__face--back { transform: rotateY( 180deg ); }

.sf-snoezelen-pool__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Chip "¡Tócala!": fondo del COLOR ACTIVO, invita a bajar y jugar; late suave. */
.sf-snoezelen-pool__touch {
	position: absolute;
	left: 50%;
	bottom: clamp(1.1rem, 4vh, 2rem);
	transform: translateX( -50% );
	padding: 0.72em 1.5em;
	border-radius: 999px;
	background: var(--sz-luz-1);
	color: #05130d;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-weight: 700;
	font-size: clamp(0.95rem, 1.7vw, 1.15rem);
	letter-spacing: 0.04em;
	box-shadow: 0 0 44px -6px color-mix( in srgb, var(--sz-luz-1) 72%, transparent ), 0 10px 26px -10px rgba(0, 0, 0, 0.7);
	animation: sf-sn-touch 2.4s ease-in-out infinite;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Al girar, el chip (capa compositada con sombra+animación) NO respeta el backface del padre en
   móvil y se veía por detrás ESPEJADO. Lo apagamos al empezar el giro: desaparece antes de que la
   cara frontal quede de espaldas. En reduced-motion (girada al instante) nunca se ve. */
.sf-snoezelen-pool__stage.is-flipped .sf-snoezelen-pool__touch {
	opacity: 0;
	visibility: hidden;
	animation: none;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

@keyframes sf-sn-touch {
	0%, 100% { transform: translateX( -50% ) scale( 1 ); }
	50%      { transform: translateX( -50% ) scale( 1.055 ); }
}

.sf-snoezelen-pool__canvas {
	display: block;
	width: 100%;
	height: clamp(340px, 48vh, 460px);
	touch-action: none; /* área de juego: agarrar/lanzar en táctil sin que la página scrollee */
	cursor: grab;
}
.sf-snoezelen-pool__face--back .sf-snoezelen-pool__canvas { height: 100%; } /* llena la cara */
.sf-snoezelen-pool__canvas:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
	.sf-snoezelen-pool__canvas { cursor: default; }   /* estático: no invita a arrastrar */
	.sf-snoezelen-pool__card { transition: none; }    /* gira instantáneo al juego */
	.sf-snoezelen-pool__touch { animation: none; }
}

/* =========================================================================
 * Secciones de contenido (todas sobre el mundo oscuro, texto crema).
 * ========================================================================= */
.sf-snoezelen-que,
.sf-snoezelen-origen,
.sf-snoezelen-pool,
.sf-snoezelen-sentidos-sec,
.sf-snoezelen-quien,
.sf-snoezelen-aula,
.sf-snoezelen-encendida {
	position: relative;
	z-index: 1;
	padding-block: clamp(3.5rem, 9vh, 6rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
/* El cierre queda FUERA de este grupo: su aire superior lo pone .sf-pre-cta (main.css); aquí
   solo conserva su posición/inline y el padding inferior lo da su regla específica de abajo. */
.sf-snoezelen-cierre { position: relative; z-index: 1; padding-inline: clamp(1.5rem, 6vw, 6rem); }

/* 2. QUÉ ES — definición con wordsplit + foto. */
.sf-snoezelen-que__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.sf-snoezelen-def {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.08;
	font-size: clamp(1.9rem, 4.6vw, 3.2rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-snoezelen-def__w { display: inline-block; }

.sf-js .sf-snoezelen-def.sf-inview { opacity: 1; transform: none; transition: none; }

.sf-js .sf-snoezelen-def__w {
	opacity: 0;
	transform: translateY( 0.3em );
	transition: opacity 1s ease, transform 1s ease;
	transition-delay: calc( var(--i, 0) * 0.11s );
}

.sf-js .sf-snoezelen-def.is-inview .sf-snoezelen-def__w { opacity: 1; transform: none; }

.sf-snoezelen-que__text {
	margin: 1.4rem 0 0;
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.12rem;
	line-height: 1.6;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 84%, transparent );
}

/* Marcos de foto: cristal en la penumbra (borde crema .12). */
.sf-snoezelen-que__media,
.sf-snoezelen-origen__media {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 12%, transparent );
	box-shadow: 0 24px 54px -30px rgba(0, 0, 0, 0.6);
}

/* Reveal IO-SAFE: el gate anterior clipaba a área 0 (clip-path inset(0 100% 0 0)) y
   Chromium calcula intersectionRatio contando el clip -> daba 0, el observer NUNCA
   revelaba la foto (quedaba pegada a opacity 0). Fade-up (como los hermanos, que sí
   se revelan) con especificidad (0,4,0) para ganar a la regla genérica del inview. */
.sf-js .sf-snoezelen .sf-snoezelen-que__media.sf-inview {
	opacity: 0;
	transform: translateY( 1.5rem );
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sf-js .sf-snoezelen .sf-snoezelen-que__media.sf-inview.is-inview {
	opacity: 1;
	transform: none;
}

.sf-snoezelen-que__img,
.sf-snoezelen-origen__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Banda de SENTIDOS. */
.sf-snoezelen-sentidos {
	list-style: none;
	margin: 0;
	max-width: 64rem;
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 2.75rem);
}

.sf-snoezelen-sentidos-sec {
	padding-block: clamp(1rem, 3vh, 2.5rem) clamp(3rem, 7vh, 5rem);
}

.sf-snoezelen-sentidos__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 86%, transparent );
}

.sf-snoezelen-sentidos__item .sf-snoezelen-dot {
	background-color: color-mix( in srgb, var(--sz-luz-1) 85%, var(--wp--preset--color--crema, #f7f5ef) );
}

/* EL ORIGEN. */
.sf-snoezelen-origen__inner {
	max-width: 64rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.sf-snoezelen-origen__title {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.06;
	font-size: clamp(1.7rem, 4vw, 2.7rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
	text-wrap: balance;
}

.sf-snoezelen-origen__text {
	margin: 1.3rem 0 0;
	max-width: 52ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.12rem;
	line-height: 1.65;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 84%, transparent );
}

.sf-snoezelen-origen__inner:not( :has( .sf-snoezelen-origen__media ) ) {
	grid-template-columns: 1fr;
	max-width: 46rem;
}

.sf-snoezelen-origen__media { transform: rotate( -1.5deg ); }

/* Reveal IO-SAFE (misma causa del clip a área 0): fade-up conservando el giro -1.5°.
   (0,4,0) para ganar a la genérica, que además ponía transform:none y perdía el giro. */
.sf-js .sf-snoezelen .sf-snoezelen-origen__media.sf-inview {
	opacity: 0;
	transform: rotate( -1.5deg ) translateY( 1.5rem );
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sf-js .sf-snoezelen .sf-snoezelen-origen__media.sf-inview.is-inview {
	opacity: 1;
	transform: rotate( -1.5deg );
}

/* =========================================================================
 * LA VENTANA AL AULA — vídeo 9:16 en composición editorial (texto | ventana).
 * ========================================================================= */
.sf-snoezelen-encendida__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(2rem, 6vw, 4.5rem);
	align-items: center;
}

.sf-snoezelen-encendida__title {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.06;
	font-size: clamp(1.7rem, 4vw, 2.7rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
	text-wrap: balance;
}

.sf-snoezelen-encendida__line {
	margin: 1.2rem 0 0;
	max-width: 42ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.1rem;
	line-height: 1.6;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 84%, transparent );
}

.sf-snoezelen-encendida__cap {
	margin: 1.4rem 0 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 62%, transparent );
}

/* La VENTANA: marco redondeado, rotada -1.5º, glow del tema, esquina mordida. */
.sf-snoezelen-encendida__window {
	position: relative;
	margin: 0;
	justify-self: center;
	transform: rotate( -1.5deg );
}

.sf-snoezelen-encendida__media {
	position: relative;
	width: clamp(230px, 25vw, 310px);
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
	background-color: #071a12;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 14%, transparent );
	box-shadow:
		0 34px 74px -30px rgba(0, 0, 0, 0.72),
		0 0 74px -8px color-mix( in srgb, var(--sz-luz-1) 62%, transparent );
}

.sf-snoezelen-encendida__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-snoezelen-encendida__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: color-mix( in srgb, var(--sz-luz-1) 20%, transparent );
}

/* Burbuja decorativa que muerde la esquina superior derecha de la ventana. */
.sf-snoezelen-encendida__bite {
	position: absolute;
	top: -16px;
	right: -14px;
	width: 46px; height: 46px;
	border-radius: 50%;
	filter: blur( 0.5px );
	background: radial-gradient( circle at 35% 30%,
		color-mix( in srgb, var(--sz-luz-2) 72%, transparent ),
		color-mix( in srgb, var(--sz-luz-1) 40%, transparent ) 70%, transparent );
	box-shadow: 0 0 26px -4px color-mix( in srgb, var(--sz-luz-1) 70%, transparent );
}

.sf-js .sf-snoezelen-encendida__window.sf-inview {
	opacity: 1;
	transform: rotate( -1.5deg );
	transition: opacity 1s ease;
}
.sf-js .sf-snoezelen-encendida__window.sf-inview:not( .is-inview ) { opacity: 0; }

/* 3. PARA QUIÉN — dos columnas de CRISTAL (crema translúcida + borde). */
.sf-snoezelen-quien__title {
	margin: 0.4rem 0 clamp(2rem, 5vh, 3rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.04;
	font-size: clamp(1.8rem, 4.4vw, 2.9rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-snoezelen-quien__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sf-snoezelen-quien__col {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.2rem);
	border-radius: 16px;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 12%, transparent );
	background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 5%, transparent );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	transition: transform 0.45s ease, border-color 0.45s ease;
}

/* =========================================================================
 * "PARA QUIÉN" en el IDIOMA DE LA LUZ: las tarjetas se ENCIENDEN (aquí no hay
 * doodles de cera; el lenguaje es la luz del tema activo, var(--sz-luz-1), que
 * viravira sola con el crossfade del dock). Glow interior (::before) que pulsa al
 * entrar y respira; boost al hover/foco (::after); y una MOTA de luz derivando.
 * ========================================================================= */
.sf-snoezelen-quien__col::before,
.sf-snoezelen-quien__col::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	/* Concentrado ARRIBA-izquierda (tras el título, que tolera el glow por ser crema 100%);
	   se apaga antes de llegar al cuerpo (crema 84→90%) para que su AAA aguante incluso en
	   el tema ámbar, el más claro. */
	background: radial-gradient( 118% 92% at 26% 10%, var(--sz-luz-1) 0%, transparent 58% );
}

/* Glow BASE: apagado; al entrar (tras aparecer la tarjeta) hace un PULSO visible —bloom
   que sube a ~.34 y ASIENTA a .15— y luego respira. El pulso empieza con un pequeño
   retardo para que se lea "se enciende" y no se confunda con el fade-in de la tarjeta. */
.sf-snoezelen-quien__col::before { opacity: 0; }

.sf-js .sf-snoezelen-quien__col.is-inview::before {
	animation:
		sf-sn-cardlight 1.5s cubic-bezier(0.33, 0, 0.2, 1) both,
		sf-sn-cardbreathe 7s ease-in-out infinite;
	animation-delay: calc( 0.35s + var(--i, 0) * 0.24s ), calc( 1.85s + var(--i, 0) * 0.24s );
}

@keyframes sf-sn-cardlight {
	0%   { opacity: 0; }
	42%  { opacity: 0.30; } /* bloom */
	100% { opacity: 0.15; } /* asienta */
}
@keyframes sf-sn-cardbreathe { 0%, 100% { opacity: 0.13; } 50% { opacity: 0.18; } }

/* Glow HOVER/FOCO: suma un segundo velo (centro ≈ .35) + borde y elevación — encender
   desde dentro, como las bolas de la piscina. */
.sf-snoezelen-quien__col::after { opacity: 0; transition: opacity 0.4s ease; }

@media (hover: hover) {
	.sf-snoezelen-quien__col:hover {
		transform: translateY( -3px );
		border-color: color-mix( in srgb, var(--sz-luz-1) 36%, transparent );
	}
	.sf-snoezelen-quien__col:hover::after { opacity: 0.16; }
	.sf-snoezelen-quien__col:hover .sf-snoezelen-quien__name {
		text-shadow: 0 0 18px color-mix( in srgb, var(--sz-luz-1) 60%, transparent );
	}
}

.sf-snoezelen-quien__col:focus-within {
	border-color: color-mix( in srgb, var(--sz-luz-1) 36%, transparent );
}
.sf-snoezelen-quien__col:focus-within::after { opacity: 0.16; }

/* El contenido, por encima de los glows y la mota. */
.sf-snoezelen-quien__name,
.sf-snoezelen-quien__text {
	position: relative;
	z-index: 2;
}

.sf-snoezelen-quien__name { transition: text-shadow 0.45s ease; }

/* MOTA de luz (aria-hidden): puntito del tema derivando por su trayectoria (~22s). */
.sf-snoezelen-quien__mote {
	position: absolute;
	top: 20%;
	left: 12%;
	z-index: 1;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sz-luz-1);
	filter: blur( 1.4px );
	opacity: 0.9;
	box-shadow: 0 0 11px 2px color-mix( in srgb, var(--sz-luz-1) 55%, transparent ); /* halo: polvo de luz */
	pointer-events: none;
	animation: sf-sn-mote 22s ease-in-out infinite;
	animation-delay: calc( var(--i, 0) * -7.5s ); /* desincroniza las dos motas */
	will-change: top, left;
}

@keyframes sf-sn-mote {
	0%   { top: 20%; left: 12%; }
	20%  { top: 40%; left: 82%; }
	45%  { top: 80%; left: 60%; }
	65%  { top: 58%; left: 22%; }
	85%  { top: 28%; left: 48%; }
	100% { top: 20%; left: 12%; }
}

.sf-snoezelen-quien__name {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-snoezelen-quien__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.06rem;
	line-height: 1.6;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 90%, transparent );
}

/* EL AULA DE VERDAD — tira de fotos con zoom FLIP. */
.sf-snoezelen-aula__inner { max-width: 64rem; margin-inline: auto; }

.sf-snoezelen-aula__title {
	margin: 0.4rem 0 clamp(1.75rem, 4vh, 2.5rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.04;
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-snoezelen-aula__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.sf-snoezelen-aula__item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 12%, transparent );
	border-radius: 14px;
	overflow: hidden;
	cursor: zoom-in;
	background: none;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.6);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sf-snoezelen-aula__item:hover,
.sf-snoezelen-aula__item:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.7), 0 0 30px -12px color-mix( in srgb, var(--sz-luz-1) 40%, transparent );
}

.sf-snoezelen-aula__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--crema, #f7f5ef);
	outline-offset: 3px;
}

.sf-snoezelen-aula__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 4. CIERRE CTA (sobre el mismo mundo oscuro). */
/* El aire pre-CTA lo da .sf-pre-cta--flush (main.css); sin costura (mundo oscuro continuo). */
.sf-snoezelen-cierre {
	text-align: center;
	padding-block-end: clamp(4rem, 10vh, 6.5rem);
}

.sf-snoezelen-cierre__title {
	margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.04;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-snoezelen-cierre__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.9rem 2.2rem;
	border-radius: 999px;
	background-color: var(--sf-boton);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.sf-snoezelen-cierre__cta:hover,
.sf-snoezelen-cierre__cta:focus-visible {
	transform: translateY( -2px );
	background-color: var(--sf-boton-hover);
}

.sf-snoezelen-cierre__cta-labels { position: relative; display: grid; }

.sf-snoezelen-cierre__cta-es,
.sf-snoezelen-cierre__cta-eu {
	grid-area: 1 / 1;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.sf-snoezelen-cierre__cta-eu { opacity: 0; transform: translateY( 0.6em ); }

@media (hover: hover) {
	.sf-snoezelen-cierre__cta:hover .sf-snoezelen-cierre__cta-es,
	.sf-snoezelen-cierre__cta:focus-visible .sf-snoezelen-cierre__cta-es { opacity: 0; transform: translateY( -0.6em ); }
	.sf-snoezelen-cierre__cta:hover .sf-snoezelen-cierre__cta-eu,
	.sf-snoezelen-cierre__cta:focus-visible .sf-snoezelen-cierre__cta-eu { opacity: 1; transform: translateY( 0 ); }
}

.sf-snoezelen-cierre__trust {
	margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 62%, transparent );
}

/* Foco visible calmado. */
.sf-snoezelen a:focus-visible,
.sf-snoezelen-cierre__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--crema, #f7f5ef);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =========================================================================
 * LA LUZ QUE TE SIGUE (page-snoezelen.js, solo >=1024 + hover + no reduced-motion).
 * ========================================================================= */
.sf-snoezelen-cursorlight {
	position: absolute;
	top: 0;
	left: 0;
	width: 720px;
	height: 720px;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient( circle at center, color-mix( in srgb, var(--sz-luz-1) 15%, transparent ), transparent 60% );
	opacity: 0;
	transition: opacity 1.5s ease;
	will-change: transform, opacity;
}

/* =========================================================================
 * VISOR (lightbox) accesible con zoom FLIP.
 * ========================================================================= */
.sf-snoezelen-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
}

.sf-snoezelen-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(4, 16, 11, 0.9);
	opacity: 0;
	transition: opacity 0.35s ease;
	cursor: zoom-out;
}

.sf-snoezelen-lightbox.is-open .sf-snoezelen-lightbox__backdrop { opacity: 1; }

.sf-snoezelen-lightbox__fig {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
}

.sf-snoezelen-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.sf-snoezelen-lightbox__cap {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 82%, transparent );
	opacity: 0;
	transition: opacity 0.4s ease 0.15s;
}

.sf-snoezelen-lightbox.is-open .sf-snoezelen-lightbox__cap { opacity: 1; }

.sf-snoezelen-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 16%, transparent );
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.sf-snoezelen-lightbox__close:hover,
.sf-snoezelen-lightbox__close:focus-visible { background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 28%, transparent ); }

.sf-snoezelen-lightbox__close:focus-visible { outline: 2px solid var(--wp--preset--color--crema, #f7f5ef); outline-offset: 2px; }

/* =========================================================================
 * Golden rule: fade-up CALMADO (.sf-js gatea; .is-inview revela; utilidad inview).
 * ========================================================================= */
.sf-js .sf-snoezelen .sf-inview {
	opacity: 0;
	transform: translateY( 1.1rem );
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.sf-js .sf-snoezelen .sf-inview.is-inview { opacity: 1; transform: none; }

.sf-js .sf-snoezelen-sentidos__item,
.sf-js .sf-snoezelen-quien__col {
	transition-delay: calc( var(--i, 0) * 0.1s );
}

/* =========================================================================
 * Responsive.
 * ========================================================================= */
@media (max-width: 767px) {
	.sf-snoezelen-que__inner,
	.sf-snoezelen-quien__grid,
	.sf-snoezelen-origen__inner,
	.sf-snoezelen-encendida__inner,
	.sf-snoezelen-aula__grid {
		grid-template-columns: 1fr;
	}

	.sf-snoezelen-que__media,
	.sf-snoezelen-origen__media { order: 2; }

	/* La ventana del vídeo: apilada, centrada, ANCLADA por su glow + caption. */
	.sf-snoezelen-encendida__inner { justify-items: center; text-align: center; }
	.sf-snoezelen-encendida__line,
	.sf-snoezelen-encendida__cap { margin-inline: auto; }
	.sf-snoezelen-encendida__window { margin-top: clamp(2rem, 6vh, 3rem); }
	.sf-snoezelen-encendida__media { width: min(340px, 78vw); }

	/* EL MANDO: dock HORIZONTAL inferior (safe-area). */
	.sf-snoezelen-dock {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		transform: none;
		flex-direction: row;
		justify-content: center;
		gap: 0.75rem;
		padding: 0.5rem 0.75rem calc( 0.5rem + env(safe-area-inset-bottom, 0px) );
	}
	.sf-snoezelen-dock__lights { flex-direction: row; }
	.sf-snoezelen-dock__hint { display: none; } /* en móvil no cabe el tooltip lateral */
}

/* =========================================================================
 * MOVIMIENTO REDUCIDO (estricto): todo QUIETO, todo pre-mostrado, sin barridos.
 * La página sigue oscura y teñida; solo se apaga el movimiento.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.sf-snoezelen-orb,
	.sf-snoezelen-wave--1,
	.sf-snoezelen-wave--2,
	.sf-snoezelen-loose-bubble,
	.sf-snoezelen-dock__orb[aria-checked="true"] {
		animation: none !important;
	}

	/* Encendido instantáneo (sin fundido). */
	.sf-js .sf-snoezelen-ignition { animation: none; opacity: 0; }

	.sf-js .sf-snoezelen-hero__inner { animation: none; }

	.sf-js .sf-snoezelen .sf-inview,
	.sf-js .sf-snoezelen .sf-inview.is-inview {
		opacity: 1; transform: none; transition: none;
	}

	.sf-js .sf-snoezelen-def__w,
	.sf-js .sf-snoezelen-def.is-inview .sf-snoezelen-def__w { opacity: 1; transform: none; transition: none; }

	/* Media IO-safe (fade-up): en reduced-motion, visibles ya, sin animación. (0,4,0)
	   para ganar a los gates opacity:0 de arriba; el origen conserva su giro. */
	.sf-js .sf-snoezelen .sf-snoezelen-que__media.sf-inview,
	.sf-js .sf-snoezelen .sf-snoezelen-que__media.sf-inview.is-inview {
		opacity: 1; transform: none; transition: none;
	}
	.sf-js .sf-snoezelen .sf-snoezelen-origen__media.sf-inview,
	.sf-js .sf-snoezelen .sf-snoezelen-origen__media.sf-inview.is-inview {
		opacity: 1; transform: rotate( -1.5deg ); transition: none;
	}

	.sf-js .sf-snoezelen-encendida__window.sf-inview,
	.sf-js .sf-snoezelen-encendida__window.sf-inview:not( .is-inview ) { opacity: 1; transition: none; }

	/* Tarjetas "para quién": ENCENDIDAS fijas al .15, sin pulso ni respiración; sin motas. */
	.sf-js .sf-snoezelen-quien__col::before,
	.sf-js .sf-snoezelen-quien__col.is-inview::before {
		animation: none;
		opacity: 0.15;
	}
	.sf-snoezelen-quien__mote { display: none; }

	/* Burbujas sueltas de página: invisibles (bottom fuera), sin movimiento. */
	.sf-snoezelen-loose-bubble { opacity: 0; }

	/* Cambio de luz casi instantáneo (.2s), sin coreografía. */
	.sf-snoezelen.is-luz-ready {
		transition: --sz-luz-1 0.2s ease, --sz-luz-2 0.2s ease, --sz-luz-3 0.2s ease;
	}
}