/* ============================================================
   cedares — Sala · Colecciones de la sala (listado 01–06)
   Figma: 26:730 (desktop, frame 1400) · 80:462 (móvil, frame 576).
   Móvil: una columna (eyebrow, título, intro, listado apilado).
   Desktop (>=1024px): dos columnas (head 363 · body 730) con justify-between.
   ============================================================ */

/* Wrapper del single de sala (colecciones + aviso; el footer va fuera).
   overflow:hidden recorta el glow celeste en los bordes del wrapper: NO invade
   el footer (abajo) ni genera scroll horizontal, pero SÍ lo deja bleedear hacia
   arriba sobre colecciones (que está dentro del wrapper). z-index alto: overlay
   por encima de colecciones, igual que en Figma. */
.sala-page {
	position: relative;
	overflow: hidden;
}

.sala-page__glow {
	display: none; /* solo desktop (en el Figma móvil no existe) */
	position: absolute;
	z-index: 1; /* por encima de colecciones, por debajo del aviso */
	background: url('../img/sala/glow-aviso-celeste.png') no-repeat center / 100% 100%;
	pointer-events: none;
}

/* El aviso debe quedar POR ENCIMA del glow celeste. */
.sala-page .aviso-section {
	position: relative;
	z-index: 2;
}

/* Glow morado a la izquierda del aviso — SOLO móvil (Figma 80:361: X -202
   Y 3684, 435×425, morado 39%, blur 325). En desktop el morado va dentro de
   colecciones. Va detrás de la caja del aviso (primer hijo) y desborda hacia
   arriba (sobre colecciones) y a la izquierda; .sala-page lo recorta. */
.aviso-section__glow {
	position: absolute;
	z-index: -1; /* detrás de la caja del aviso, pero sobre colecciones */
	left: -325px;
	top: -332px; /* centro ~en el límite colecciones/aviso */
	width: 680px;
	height: 665px;
	background: url('../img/sala/glow-colecciones-morado.png') no-repeat center / 100% 100%;
	pointer-events: none;
}

.sala-cols {
	position: relative;
	/* Sin overflow:hidden a propósito: el glow morado debe bleedear hacia abajo
	   sobre la sección del aviso. El recorte (arriba/abajo/lados) lo hace el
	   wrapper .sala-page, que envuelve colecciones + aviso. */
	background: var(--ced-bg); /* #121E42 (Figma Bg_color) */
	isolation: isolate;
}

/* Glows decorativos (Figma Ellipse 4 magenta + Ellipse morado). PNG horneados
   con dithering (_docs/tools/glow-gen.php) para evitar banding 8-bit; la
   opacidad va en el alfa, así que aquí NO se aplica `opacity`. El overflow:hidden
   de la sección los recorta en el borde (igual que el frame en Figma). */
.sala-cols__glow {
	position: absolute;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

/* Magenta (arriba-derecha). Solo desktop (en el Figma móvil no va). */
.sala-cols__glow--magenta {
	display: none;
	background-image: url('../img/sala/glow-colecciones.png');
}

/* Morado (izquierda, a la altura de los ítems 3–6). Solo desktop. */
.sala-cols__glow--morado {
	display: none;
	background-image: url('../img/sala/glow-colecciones-morado.png');
}

.sala-cols__inner {
	position: relative;
	z-index: 1; /* contenido sobre el glow */
	max-width: 1400px;
	margin-inline: auto;
	padding: 60px 40px; /* móvil */
	display: flex;
	flex-direction: column;
	gap: 14px; /* móvil: título → intro (el head queda pegado al body) */
}

/* --- Encabezado (columna izquierda en desktop) --- */
.sala-cols__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sala-cols__eyebrow {
	margin: 0;
	font-family: var(--ced-font-mono);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ced-amarillo);
}

.sala-cols__title {
	margin: 0;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-bold);
	font-size: 42px;
	line-height: 1.24;
	color: #fff;
}

.sala-cols__title span {
	color: var(--ced-amarillo);
}

/* --- Cuerpo (columna derecha en desktop) --- */
.sala-cols__body {
	display: flex;
	flex-direction: column;
	gap: 56px; /* móvil: intro → listado */
}

.sala-cols__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-align: justify;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Listado --- */
.sala-cols__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Divisor centrado entre ítems (Figma: gap 38 arriba/abajo de la línea). */
.sala-cols__item + .sala-cols__item {
	margin-top: 38px;
	padding-top: 38px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Móvil: número arriba, descripción, y botón alineado a la derecha debajo. */
.sala-cols__item {
	display: flex;
	flex-direction: column;
	gap: 34px; /* bloque de contenido → botón */
}

.sala-cols__lead {
	display: flex;
	flex-direction: column;
	gap: 12px; /* número → descripción */
}

.sala-cols__num {
	font-family: var(--ced-font-mono);
	font-weight: var(--ced-fw-bold);
	font-size: 40px;
	line-height: 1.07;
	letter-spacing: 0.05em;
	color: var(--ced-amarillo);
}

.sala-cols__desc {
	display: flex;
	flex-direction: column;
	gap: 12px; /* head → texto */
	min-width: 0;
}

.sala-cols__desc-head {
	display: flex;
	flex-direction: column;
	gap: 4px; /* categoría → nombre */
}

.sala-cols__cat {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ced-amarillo);
}

.sala-cols__name {
	margin: 0;
	font-family: var(--ced-font-base);
	font-weight: 900; /* Roboto Black */
	font-size: 24px;
	line-height: 1.3;
	color: #fff;
}

/* Descripción recortada a 3 líneas con elipsis (Figma: caja con overflow). */
.sala-cols__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-align: justify;
	color: rgba(255, 255, 255, 0.85);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* --- CTA circular «Ver colección» --- */
.sala-cols__btn {
	align-self: flex-end; /* móvil: botón a la derecha */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 14px 20px;
	border-radius: 24px;
	background: var(--ced-magenta);
	box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
	color: #fff;
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-semibold);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.005em;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sala-cols__btn:hover,
.sala-cols__btn:focus-visible {
	background: #c50d5b; /* magenta un poco más oscuro */
}

.sala-cols__btn-ico {
	flex: 0 0 auto;
}

/* Móvil pequeño (<=480px): mismo criterio que el banner (padding lateral 24). */
@media (max-width: 480px) {
	.sala-cols__inner {
		padding-inline: 24px;
	}

	.sala-cols__title {
		font-size: clamp(2rem, 9vw, 42px);
	}

	.sala-cols__intro,
	.sala-cols__text {
		text-align: left;
	}
}

/* ============================================================
   Desktop (>=1024px) — Figma 26:730 (frame 1400×…)
   Dos columnas: head (363) a la izquierda, body (730) a la derecha.
   ============================================================ */
@media (min-width: 1024px) {
	.sala-cols__glow--magenta {
		display: block;
		left: auto;
		right: -437px; /* centro del glow ~113px dentro del borde (Figma X 1070/1400) */
		top: -444px;
		width: 1100px;
		height: 1080px;
	}

	/* Morado: centro ~x51/y1834 en frame 1400 (Figma X -281 Y 1510, 665×649). */
	.sala-cols__glow--morado {
		display: block;
		left: -560px; /* centro ~x40: mayormente desborda por la izquierda */
		top: 57%;
		transform: translateY(-50%); /* centrado vertical en la sección, ligeramente hacia abajo */
		width: 1200px;
		height: 1176px;
	}

	/* Celeste: esquina inferior-derecha de la última sección (Figma X 991 Y 2264,
	   479×469, blur 325). Anclado al fondo del wrapper .sala-page. */
	.sala-page__glow {
		display: block;
		right: -451px; /* centro ~169px dentro del borde derecho */
		bottom: -580px;
		width: 1240px;
		height: 1215px;
	}

	/* En desktop el morado va en colecciones, no junto al aviso. */
	.aviso-section__glow {
		display: none;
	}

	.sala-cols__inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 48px;
		padding: 130px 112px;
	}

	.sala-cols__head {
		flex: 0 0 363px;
		max-width: 363px;
	}

	.sala-cols__body {
		flex: 1 1 730px;
		max-width: 730px;
		gap: 34px; /* intro → listado */
	}

	/* Ítem: número + descripción en fila; botón al final, alineado al pie. */
	.sala-cols__item {
		flex-direction: row;
		align-items: flex-end;
		gap: 48px;
	}

	.sala-cols__item + .sala-cols__item {
		margin-top: 38px;
		padding-top: 38px;
	}

	.sala-cols__lead {
		flex: 1 1 0;
		flex-direction: row;
		align-items: flex-start;
		gap: 30px; /* número → descripción */
		min-width: 0;
	}

	.sala-cols__btn {
		align-self: auto;
		padding: 12px 20px;
	}
}