/* ============================================================
   cedares — Home · Las 6 salas
   Figma: 161:291 (desktop) · 324:4237 (móvil).
   Móvil: 1 columna. Desktop (>=1024px): grilla de 2 columnas.
   ============================================================ */

.salas {
	position: relative;
	/* Sin overflow:hidden: el recorte horizontal lo asume .home-page
	   (overflow-x: clip), para no cortar el glow ni generar scroll. */
}

/* Glow morado difuso (Figma Ellipse, blur CSS 162.5px). PNG con dithering y
   opacidad (0.41) ya horneada: evita el banding que produce filter:blur() en
   8-bit sobre el fondo oscuro.
   Móvil (Figma 324:4116): centrado en el borde DERECHO (desborda hacia fuera),
   a la altura entre el 1.er y 2.º card. Desktop lo lleva a la izquierda (abajo). */
.salas__glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	left: 100%;
	top: 26%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	background: url('../img/salas/glow-morado.png') no-repeat center / contain;
}

.salas__inner {
	position: relative;
	z-index: 1;
	max-width: 1664px;
	margin-inline: auto;
	padding: 64px 24px; /* móvil */
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* --- Encabezado --- */
.salas__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	word-break: break-word;
}

.salas__eyebrow {
	margin: 0;
	font-family: var(--ced-font-mono);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	font-variant: all-small-caps;
	color: var(--ced-label);
}

.salas__title {
	margin: 0;
	font-weight: var(--ced-fw-bold);
	font-size: 28px; /* móvil */
	line-height: 1.24;
	color: #fff;
}

.salas__intro {
	margin: 0;
	font-size: 15px; /* móvil */
	line-height: 1.8;
	letter-spacing: 0.02em;
	text-align: justify;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Grilla --- */
.salas__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr; /* móvil: 1 columna */
	gap: 28px;
}

/* --- Tarjeta --- */
.sala-card {
	position: relative; /* ancla del stretched link (::after del botón) */
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Tarjeta con enlace: toda su superficie es clicable. El overlay pertenece al
   propio botón-enlace (un solo <a>, sin anidar enlaces): el botón rosado sigue
   clicable y, además, lo es toda la tarjeta. */
.sala-card--link {
	cursor: pointer;
}

.sala-card--link .sala-card__btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 26px;
}

.sala-card--link .sala-card__btn:focus-visible {
	outline: 2px solid var(--ced-magenta);
	outline-offset: 3px;
}

.sala-card--link:focus-within .sala-card__img {
	transform: scale(1.04);
}

.sala-card__media {
	position: relative;
	aspect-ratio: 574 / 409;
	border-radius: 26px;
	overflow: hidden;
}

.sala-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.sala-card:hover .sala-card__img {
	transform: scale(1.04);
}

.sala-card__desc {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-inline: 6px;
}

.sala-card__meta {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	word-break: break-word;
}

.sala-card__count {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: var(--ced-label);
}

.sala-card__name {
	margin: 0;
	font-weight: 900;
	font-size: 22px; /* móvil */
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: #fff;
}

/* --- CTA (botón magenta con flecha) --- */
.sala-card__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 22px;
	border-radius: 24px;
	color: #fff;
	background: var(--ced-magenta);
	box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
	transition: transform 0.18s ease, filter 0.18s ease;
}

.sala-card__btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.sala-card__btn:active {
	transform: translateY(0);
}

/* Sala aún sin página: botón visible pero atenuado y no interactivo. */
.sala-card__btn--soon {
	opacity: 0.45;
	cursor: default;
}

.sala-card__btn--soon:hover {
	filter: none;
	transform: none;
}

.sala-card__arrow {
	display: block;
}

/* ============================================================
   Tablet / móvil grande (>=640px) — 2 columnas.
   En 1 columna la tarjeta se estira demasiado (a ~1000px la imagen
   574:409 crece a ~680px de alto). Desde 640px cada tarjeta mide
   ~280px+, mantiene la proporción y se ve compacta.
   ============================================================ */
@media (min-width: 640px) {
	.salas__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Desktop (>=1024px) — Figma 161:291
   ============================================================ */
@media (min-width: 1024px) {
	.salas__inner {
		padding: 20px 112px;
		gap: 52px;
	}

	/* Glow a tamaño real (disco ~485px) asomando por la izquierda,
	   centrado a la altura de la 2.ª fila (Figma left -210 · bottom 2562). */
	.salas__glow {
		left: 35px;
		top: 56%;
		width: 1200px;
		height: 1200px;
	}

	.salas__title {
		font-size: 42px;
	}

	.salas__intro {
		font-size: 16px;
	}

	.sala-card__name {
		font-size: 25px;
	}
}