/* ============================================================
   cedares — Sala · Banner (hero de sala individual)
   Figma: 14:1111 (desktop, actualizado) · 83:155 (móvil).
   Foto full-bleed (WebP) + scrim/grain/glows en CSS. Contenido a 1400px.
   Mobile-first; el layout de posición absoluta entra en >=1024px.
   ============================================================ */

.sala-hero {
	position: relative;
	background: var(--ced-azul-oscuro);
	color: var(--ced-text);
}

/* --- Escenario full-bleed (recorta glows y grano rotado) --- */
.sala-hero__stage {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 620px; /* móvil: alto mínimo del banner */
}

.sala-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ced-azul-oscuro); /* respaldo si la foto no carga */
	pointer-events: none;
}

.sala-hero__pic,
.sala-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sala-hero__img {
	object-fit: cover;
	object-position: center;
}

/* Tinte de color sobre la imagen (Figma: fill #03091B sobre la foto).
   #03091B es casi negro: al 80% tapaba la foto. Bajado para que TIÑA (aporte
   el navy) sin ocultar la imagen. Se aplica en CSS para que también afecte a
   fotos subidas por el admin en Fase 3 (la imagen NO debe traer el tinte
   horneado, si no se duplica). */
.sala-hero__tint {
	position: absolute;
	inset: 0;
	background: #03091b;
	opacity: 0.28;
	pointer-events: none;
}

/* Scrim: oscurece a la izquierda (para el título amarillo) y el pie
   (stat + intro), dejando ver la foto en el centro/derecha. */
.sala-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(11, 13, 38, 0.92) 0%,
			rgba(11, 13, 38, 0.6) 30%,
			rgba(11, 13, 38, 0.18) 56%,
			rgba(11, 13, 38, 0) 80%),
		linear-gradient(0deg,
			rgba(11, 13, 38, 0.6) 0%,
			rgba(11, 13, 38, 0) 42%);
}

/* Textura de grano retro (Figma 16:26): rayones/motas NEGROS sobre transparente
   (98% transparente), sobredimensionada y rotada en sentido horario. Va sobre
   los glows y debajo del contenido. Blend `multiply` = equivalente estándar del
   `plus-darker` del Figma: oscurece la foto en los rayones (línea cinematográfica),
   sin afectar las zonas transparentes. */
.sala-hero__grain {
	position: absolute;
	/* Réplica del marco de la diseñadora (Figma 16:26 = 1484×990 en X-80/Y-63):
	   se sobredimensiona y se sale del banner (más por abajo), sin translate. */
	top: -8%;
	left: -5.7%;
	width: 106%;
	height: 125.6%;
	background: url('../img/sala/banner-grain.png') center / 100% 100% no-repeat;
	/* horario, como el marco del Figma, bajado un poco. El grano es ~96%
	   transparente, así que moverlo no deja huecos visibles. */
	transform: translateY(40px) rotate(4.026deg);
	transform-origin: center;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
}

/* Glows difusos: círculos sólidos con blur (Figma Ellipse 2 y 3). */
.sala-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(118.5px);
	pointer-events: none;
}

/* Morado (#733D89) — arriba-derecha (Figma Ellipse 2: 363×355). */
.sala-hero__glow--morado {
	width: 363px;
	height: 355px;
	right: -70px;
	top: -62px;
	background: var(--ced-morado);
	opacity: 0.35;
}

/* Azul medio (#0052A1) — abajo-izquierda (Figma Ellipse 3: 473×463). */
.sala-hero__glow--azul {
	width: 473px;
	height: 463px;
	left: -161px;
	bottom: -136px;
	background: var(--ced-azul-medio);
	opacity: 0.27;
}

/* --- Contenido --- */
.sala-hero__frame {
	position: relative;
	z-index: 1;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	/* Figma móvil (83:155): auto-layout vertical, gap 55, padding 120/40. */
	gap: 55px;
	padding: 120px 40px;
}

.sala-hero__inner {
	display: flex;
	flex-direction: column;
	/* Mismo gap 55 que el frame: título → stat → intro quedan equiespaciados. */
	gap: 55px;
}

.sala-hero__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px; /* móvil (Figma 83:160): badge → título. Desktop lo baja a 14. */
}

.sala-hero__tag {
	margin: 0;
	background: #e3b9f4;
	color: #733d89;
	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-hero__title {
	margin: 0;
	color: var(--ced-amarillo);
	/* Token Figma «Banner Title»: Roboto Black 66 / 110% / 0.
	   66px exactos en el frame de diseño (>=576px) y desktop; el clamp solo lo
	   reduce por debajo de 576px para que no se apile en 3 líneas apretadas. */
	font-family: var(--ced-font-base);
	font-weight: 900;
	font-size: clamp(2.75rem, 11.46vw, 66px);
	line-height: 1.1;
	letter-spacing: 0;
}

/* Subtítulo bajo el título (Figma DACU 162:4733: Roboto Bold 30 / 110% / amarillo).
   Opcional: solo se pinta si la sala tiene subtítulo. */
.sala-hero__subtitle {
	margin: 0;
	color: var(--ced-amarillo);
	font-family: var(--ced-font-base);
	font-weight: var(--ced-fw-bold);
	font-size: clamp(1.375rem, 5.2vw, 30px);
	line-height: 1.1;
	letter-spacing: 0;
}

.sala-hero__stats {
	display: flex;
	gap: 56px;
	margin: 0;
}

.sala-hero__stat {
	display: flex;
	flex-direction: column;
}

.sala-hero__stat-num {
	margin: 0;
	font-weight: var(--ced-fw-semibold);
	font-size: 44px;
	line-height: 1.2;
	letter-spacing: 0.005em;
	color: #fff;
}

.sala-hero__stat-label {
	margin: 0; /* reset del <dd> */
	font-weight: 300;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.8);
}

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

/* ============================================================
   Móvil pequeño (<=480px). El frame de diseño es 576px; por debajo,
   el padding de 40 aprieta y el intro justificado deja huecos, así que
   reducimos el padding lateral y alineamos el intro a la izquierda.
   ============================================================ */
@media (max-width: 480px) {
	.sala-hero__frame {
		padding-inline: 24px;
	}

	.sala-hero__intro {
		text-align: left;
	}
}

/* En móvil el banner es más alto: el grano se baja un poco más que en desktop. */
@media (max-width: 1023px) {
	.sala-hero__grain {
		transform: translateY(100px) rotate(4.026deg);
	}

	/* En móvil el glow morado (superior derecha) no va. */
	.sala-hero__glow--morado {
		display: none;
	}

	/* Glow azul un poco más sutil en móvil. */
	.sala-hero__glow--azul {
		opacity: 0.18;
	}
}

/* ============================================================
   Desktop (>=1024px) — Figma 14:1111 (frame 1400×788)
   Contenido a la izquierda (tag+título arriba, stat abajo) e intro
   anclada abajo-derecha, todo dentro del marco de 1400px.
   ============================================================ */
@media (min-width: 1024px) {
	.sala-hero__stage {
		min-height: 0;
	}

	.sala-hero__frame {
		max-width: 1400px;
		min-height: 788px;
		margin-inline: auto;
		display: block;
		padding: 0;
	}

	.sala-hero__inner {
		position: absolute;
		left: 112px;
		top: 166px;
		bottom: 84px;
		width: 449px;
		justify-content: space-between;
		gap: 0;
	}

	.sala-hero__head {
		gap: 14px; /* desktop (Figma 14:1138) */
	}

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

	.sala-hero__intro {
		position: absolute;
		right: 112px;
		bottom: 98px;
		width: 430px;
	}
}