/* ============================================================
   cedares — Sala · Banner de galería (variante con carrusel)
   Figma: 36:1119 (desktop, frame 1400) · 86:436 (móvil, frame 430).
   Móvil: una columna (texto arriba, carrusel abajo).
   Desktop (>=1024px): dos columnas (texto izquierda · carrusel derecha).
   La textura de grano (misma del hero de sala) va POR ENCIMA del contenido base
   pero por DEBAJO del texto y la tarjeta.
   ============================================================ */

.sala-galeria {
	position: relative;
	/* Figma: overlay negro 25% sobre el navy de fondo (#121E42). */
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
		var(--ced-bg);
	color: var(--ced-text);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Escenario: recorta glows y el grano rotado/sobredimensionado. */
.sala-galeria__stage {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* --- Glows difusos (Figma Ellipse azul + Ellipse magenta) --- */
.sala-galeria__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

/* Azul medio — izquierda, detrás de la esquina superior-izquierda de la tarjeta
   (Figma 86:438: elipse 473×463, blur 237, 27%, #0052A1). PNG horneado con
   dithering (glow-gen.php); la opacidad va en el alfa (NO se aplica `opacity`).
   El canvas 1000×980 contiene toda la caída: left/bottom preservan el centro
   de la posición aprobada (antes 473×463 en left:-161/bottom:400). */
.sala-galeria__glow--azul {
	width: 1000px;
	height: 980px;
	left: -424px;
	bottom: 142px;
	background: url('../img/sala/glow-galeria-azul.png') no-repeat center / 100% 100%;
}

/* Magenta — derecha, a la altura de la tarjeta. Solo desktop (en móvil no va). */
.sala-galeria__glow--magenta {
	display: none;
	width: 363px;
	height: 355px;
	right: -60px;
	bottom: 300px;
	border-radius: 50%;
	filter: blur(118px);
	background: var(--ced-magenta);
	opacity: 0.32;
}

/* Textura de grano retro (misma del hero: banner-grain.png). Sobredimensionada,
   invertida en Y y rotada como en el marco de Figma. Va sobre los glows y el
   fondo, debajo del contenido. `multiply` = equivalente del plus-darker de Figma:
   oscurece en los rayones, transparente en el resto. */
.sala-galeria__grain {
	position: absolute;
	z-index: 0;
	/* Móvil (Figma 86:906): rotado -25.4°, muy sobredimensionado y centrado. */
	top: 50%;
	left: 50%;
	width: 2056px;
	height: 1783px;
	transform: translate(-50%, -50%) scaleY(-1) rotate(25.4deg);
	transform-origin: center;
	background: url('../img/sala/banner-grain.png') center / 100% 100% no-repeat;
	mix-blend-mode: multiply;
	opacity: 0.7;
	pointer-events: none;
}

/* --- Contenido --- */
.sala-galeria__inner {
	position: relative;
	z-index: 1; /* por encima de glows + grano */
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 90px; /* móvil: bloque de texto → carrusel (Figma 86:436) */
	padding: 120px 40px; /* móvil */
}

/* Columna de texto */
.sala-galeria__intro-col {
	display: flex;
	flex-direction: column;
	gap: 44px; /* móvil: head → intro (Figma 86:891) */
}

.sala-galeria__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px; /* móvil: badge → título (Figma 86:440) */
}

/* Badge unificado con el banner clásico (.sala-hero__tag): mismo tamaño (14px),
   mayúsculas y padding en todas las plantillas de sala, para no tener dos
   tamaños distintos entre vistas. */
.sala-galeria__tag {
	margin: 0;
	background: #e3b9f4;
	color: #733d89;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-bold);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 30px;
}

.sala-galeria__title {
	margin: 0;
	color: var(--ced-amarillo);
	font-family: var(--ced-font-base);
	font-weight: 900; /* Roboto Black */
	font-size: clamp(2rem, 9.7vw, 42px); /* móvil: 42px en el frame de 430 */
	line-height: 1.24;
	letter-spacing: 0.01em;
}

.sala-galeria__text {
	margin: 0;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-regular);
	/* Fluido: 20px en el frame de 430 (Figma), baja a ~16.5px en 360. */
	font-size: clamp(1rem, 4.6vw, 20px);
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-align: justify;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Carrusel --- */
.sala-galeria__carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 35px; /* móvil: tarjeta → paginación (Figma 86:878) */
	width: 100%;
}

.sala-galeria__viewport {
	width: 100%;
	max-width: 490px;
	overflow: hidden;
	border-radius: 14px;
}

.sala-galeria__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/* Animación del carrusel: desplazamiento horizontal (JS setea --i). */
	transform: translateX(calc(var(--i, 0) * -100%));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.sala-galeria__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* Tarjeta de pieza */
.sala-galeria__card {
	position: relative;
	margin: 0;
	height: 416px;
	border-radius: 14px;
	overflow: hidden;
	/* Respaldo OSCURO (no blanco) para que no asome un filo claro alrededor de
	   la foto ni destelle blanco durante el desplazamiento del carrusel. */
	background: var(--ced-azul-oscuro);
}

.sala-galeria__pic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Gradiente + título de pieza (Figma «titulo pieza»): degradado lineal negro
   de abajo hacia arriba (0.85 → 0). En móvil el título va abajo-izquierda; en
   desktop se suma el botón «ver» a la derecha. */
.sala-galeria__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 28px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none; /* la tarjeta no captura; el botón sí (ver abajo) */
}

.sala-galeria__piece {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: #fff;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-bold);
	font-size: 20px;
	line-height: 1.04;
}

.sala-galeria__eye {
	/* Único disparador del modal de pieza; visible también en móvil (táctil no
	   tiene hover, y sin él la pieza no se puede abrir en el teléfono). */
	display: inline-flex;
	flex: 0 0 auto;
	pointer-events: auto;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 0;
	border-radius: 50px;
	background: var(--ced-magenta);
	box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sala-galeria__eye:hover,
.sala-galeria__eye:focus-visible {
	background: #c50d5b;
}

.sala-galeria__eye:active {
	transform: translateY(1px);
}

/* Paginación (flechas + contador «Galería 1: 01/04») */
.sala-galeria__nav {
	display: flex;
	align-items: center;
	gap: 45px; /* móvil (Figma 86:882) */
}

.sala-galeria__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; /* móvil */
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ced-amarillo); /* flechas amarillas (icono del diseño) */
	cursor: pointer;
	border-radius: 50%;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.sala-galeria__arrow svg {
	width: 60%;
	height: 60%;
}

.sala-galeria__arrow:hover,
.sala-galeria__arrow:focus-visible {
	transform: scale(1.12);
}

/* Extremo del carrusel: flecha deshabilitada al 45% (Figma). */
.sala-galeria__arrow:disabled {
	opacity: 0.45;
	cursor: default;
	transform: none;
}

.sala-galeria__counter {
	margin: 0;
	font-family: var(--ced-font-base);
	font-weight: 300; /* Roboto Light */
	/* Fluido: 22px en 430 (Figma), ~18px en 360 (evita apretar las flechas). */
	font-size: clamp(1.125rem, 5.2vw, 22px);
	line-height: 1.3;
	letter-spacing: 0.15em;
	color: #fff;
	white-space: nowrap;
}

.sala-galeria__counter-cur {
	font-weight: var(--ced-fw-semibold);
	color: var(--ced-amarillo);
}

/* ============================================================
   Móvil pequeño (<=480px): padding lateral 24 (como el resto de secciones).
   ============================================================ */
@media (max-width: 480px) {
	.sala-galeria__inner {
		padding-inline: 24px;
	}
}

/* ============================================================
   Desktop (>=1024px) — Figma 36:1119 (frame 1400).
   Dos columnas: texto (izquierda) · carrusel (derecha), centradas.
   ============================================================ */
@media (min-width: 1024px) {
	.sala-galeria__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		padding: 120px 112px;
	}

	.sala-galeria__intro-col {
		flex: 1 1 577px;
		max-width: 577px;
		gap: 26px; /* head → intro (Figma 36:1123) */
	}

	.sala-galeria__head {
		gap: 20px; /* badge → título (Figma 36:1124) */
	}

	.sala-galeria__tag {
		padding: 5px 10px;
		letter-spacing: 0.05em;
	}

	.sala-galeria__title {
		font-size: 32px; /* desktop: columna más angosta */
		line-height: 1.1;
		letter-spacing: 0;
	}

	.sala-galeria__text {
		font-size: 14px;
		letter-spacing: 0.01em;
	}

	/* Grano desktop (Figma 36:1122): imagen a 6.5° con flip vertical. El marco
	   del Figma se inclina en sentido ANTIHORARIO (lado derecho arriba). */
	.sala-galeria__grain {
		top: -110px;
		left: -224px;
		width: 1848px;
		height: 1341px;
		transform: scaleY(-1) rotate(6.5deg);
	}

	/* Desktop: el azul inferior-izquierdo (Figma 36:1120) sigue como blur CSS,
	   así que se re-especifica (la base ahora es el PNG móvil). */
	.sala-galeria__glow--azul {
		bottom: -220px;
		left: -212px;
		width: 651px;
		height: 637px;
		border-radius: 50%;
		filter: blur(118px);
		background: var(--ced-azul-medio);
		opacity: 0.22;
	}

	/* Magenta superior-derecho (Figma Ellipse E41069, 473×463, blur 237, 30%):
	   PNG horneado con dithering (glow-gen.php). La opacidad va en el alfa, así
	   que aquí NO se aplica `opacity` ni `filter`. Centro ~esquina sup-derecha. */
	.sala-galeria__glow--magenta {
		display: block;
		top: -320px;
		right: -467px;
		bottom: auto;
		left: auto;
		width: 1000px;
		height: 980px;
		border-radius: 0;
		filter: none;
		opacity: 1;
		background: url('../img/sala/glow-galeria-magenta.png') no-repeat center / 100% 100%;
	}

	.sala-galeria__carousel {
		flex: 0 0 490px;
		gap: 20px; /* tarjeta → paginación (Figma 36:1727) */
	}

	/* Desktop: título de pieza a la izquierda + botón «ver» a la derecha. */
	.sala-galeria__caption {
		align-items: flex-end;
	}

	.sala-galeria__eye {
		display: inline-flex;
	}

	.sala-galeria__nav {
		gap: 26px; /* Figma 36:1720 */
	}

	.sala-galeria__arrow {
		width: 18px;
		height: 18px;
	}

	.sala-galeria__arrow svg {
		width: 100%;
		height: 100%;
	}

	.sala-galeria__counter {
		font-size: 14px;
		letter-spacing: 0.15em;
	}
}

/* Respeta reduce-motion: sin transición de desplazamiento. */
@media (prefers-reduced-motion: reduce) {
	.sala-galeria__track {
		transition: none;
	}
}

/* El botón «ojo» abre el modal de pieza (componente `modal-pieza`,
   assets/css/modal-pieza.css + assets/js/modal-pieza.js). Sin estilos aquí. */

/* ============================================================
   Variante INFOGRAFÍA (Sala 06 · DACU · «Elencos Artísticos PUCP»).
   Figma 162:4741 (desktop). Reutiliza stage/glows/grano/intro-col del
   banner de galería; el lado derecho es una imagen sola (sin carrusel)
   y la columna de texto suma un bloque de meta + un CTA magenta.
   ============================================================ */

/* --- Meta: «Tipo de documento» / «Unidad responsable» (Figma 163:504) --- */
.sala-galeria__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 52px; /* 52px entre columnas (Figma) */
}

.sala-galeria__meta-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sala-galeria__meta-label {
	margin: 0;
	color: var(--ced-amarillo);
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-bold);
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sala-galeria__meta-value {
	margin: 0;
	color: #fff;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-semibold);
	font-size: 20px;
	line-height: 1.2;
}

/* --- CTA magenta «Ver infografía completa →» (Figma btn_ver_coleccion, 212×48) --- */
.sala-galeria__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 26px;
	border-radius: 50px;
	background: var(--ced-magenta);
	color: #fff;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-semibold);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sala-galeria__cta:hover,
.sala-galeria__cta:focus-visible {
	background: #c50d5b;
}

.sala-galeria__cta:active {
	transform: translateY(1px);
}

.sala-galeria__cta svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* --- Card de la infografía: imagen sola con título (Figma 162:4765, 490×416) --- */
.sala-galeria__infografia {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 490px;
	aspect-ratio: 490 / 416;
	border-radius: 14px;
	overflow: hidden;
	/* Respaldo oscuro para no dejar un filo claro alrededor de la imagen. */
	background: var(--ced-azul-oscuro);
}

.sala-galeria__infografia-pic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Mismo tratamiento que el caption del carrusel: gradiente inferior + título
   blanco (`.sala-galeria__piece`), para leer sobre cualquier zona de la imagen. */
.sala-galeria__infografia-cap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 28px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0) 55%
	);
	pointer-events: none;
}

/* Desktop (>=1024px): dos columnas, la imagen fija a 490 como el carrusel. */
@media (min-width: 1024px) {
	.sala-galeria--infografia .sala-galeria__infografia {
		flex: 0 0 490px;
	}

	.sala-galeria--infografia .sala-galeria__meta-label {
		font-size: 12px;
	}

	.sala-galeria--infografia .sala-galeria__meta-value {
		font-size: 18px;
	}
}