/* ==========================================================================
   AlegriaPlay Hub -- units.css
   Capa layout: contenedor, topbar, menu movil, footer, estructura de
   secciones, horizontal-rail, mapa interactivo, tabla comparativa.
   ========================================================================== */

@layer layout {

	/* ------------------------------------------------------------
	   contenedor
	   ------------------------------------------------------------ */
	.container {
		width: 100%;
		max-width: var(--container-w);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--container-pad);
		padding-right: var(--container-pad);
	}

	.container--narrow {
		max-width: 760px;
	}

	/* ------------------------------------------------------------
	   topbar
	   ------------------------------------------------------------ */
	.topbar {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: var(--z-header);
		background-color: var(--c-white);
		border-bottom: 1px solid var(--c-line);
	}

	.topbar__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 78px;
	}

	.topbar__wordmark {
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: var(--f-display);
		font-size: 1.15rem;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	.topbar__wordmark img {
		width: 34px;
		height: 34px;
	}

	.topbar__nav {
		display: flex;
		align-items: center;
		gap: 30px;
	}

	.topbar__nav ul {
		display: flex;
		gap: 26px;
	}

	.topbar__nav a {
		font-family: var(--f-display);
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.topbar__nav-button {
		display: none;
		width: 44px;
		height: 44px;
		position: relative;
	}

	.topbar__nav-button span,
	.topbar__nav-button span::before,
	.topbar__nav-button span::after {
		position: absolute;
		left: 10px;
		right: 10px;
		height: 2px;
		background-color: var(--c-ink);
		content: "";
	}

	.topbar__nav-button span {
		top: 21px;
	}

	.topbar__nav-button span::before {
		top: -8px;
	}

	.topbar__nav-button span::after {
		top: 8px;
	}

	@media (max-width: 900px) {

		.topbar__nav > ul {
			display: none;
		}

		.topbar__nav-button {
			display: block;
		}

	}

	/* ------------------------------------------------------------
	   menu movil pantalla completa (siempre despues de </header>)
	   ------------------------------------------------------------ */
	.site-menu {
		position: fixed;
		inset: 0;
		z-index: 60;
		background-color: var(--c-ink);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 32px;
		transform: translateY(-100%);
		transition: transform 0.28s ease;
	}

	.site-menu.is-open {
		transform: translateY(0);
	}

	.site-menu__close {
		position: absolute;
		top: 24px;
		right: 24px;
		width: 44px;
		height: 44px;
		color: var(--c-white);
		font-size: 1.8rem;
	}

	.site-menu ul {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	.site-menu a {
		font-family: var(--f-display);
		text-transform: uppercase;
		font-size: 1.9rem;
		color: var(--c-white);
	}

	.site-menu__contact {
		margin-top: 40px;
		color: var(--c-mute);
		font-family: var(--f-body);
	}

	/* ------------------------------------------------------------
	   footer
	   ------------------------------------------------------------ */
	.footer {
		background-color: var(--c-ink);
		color: var(--c-fog);
		padding-top: 64px;
		padding-bottom: 32px;
	}

	.footer__grid {
		display: grid;
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 40px;
		padding-bottom: 40px;
		border-bottom: 1px solid var(--c-ink-soft);
	}

	.footer__col h4 {
		color: var(--c-accent);
		margin-bottom: 16px;
	}

	.footer__col ul {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.footer__bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 24px;
		flex-wrap: wrap;
		gap: 12px;
		font-size: 0.82rem;
		color: var(--c-mute);
	}

	@media (max-width: 760px) {

		.footer__grid {
			grid-template-columns: 1fr;
			gap: 28px;
		}

	}

	/* ------------------------------------------------------------
	   ritmo de secciones (variado a proposito, no monotono)
	   ------------------------------------------------------------ */
	.section {
		padding-top: 88px;
		padding-bottom: 88px;
	}

	.section--roomy {
		padding-top: 128px;
		padding-bottom: 112px;
	}

	.section--tight {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.section--flush-top {
		padding-top: 0;
	}

	.section--fog {
		background-color: var(--c-fog);
	}

	.section--ink {
		background-color: var(--c-ink);
		color: var(--c-fog);
	}

	.section__head {
		display: flex;
		align-items: baseline;
		gap: 18px;
		margin-bottom: 44px;
	}

	@media (max-width: 620px) {

		.section {
			padding-top: 56px;
			padding-bottom: 56px;
		}

		.section--roomy {
			padding-top: 72px;
			padding-bottom: 64px;
		}

	}

	/* ------------------------------------------------------------
	   hero (front)
	   ------------------------------------------------------------ */
	.front {
		position: relative;
		background-color: var(--c-ink);
		color: var(--c-white);
		overflow: hidden;
	}

	.front__grid {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		min-height: 640px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.front__copy {
		position: relative;
		z-index: 2;
		max-width: 620px;
	}

	.front__spotlight {
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.front__spotlight img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(1) contrast(1.05);
		opacity: 0.22;
	}

	.front__spotlight-mask {
		position: absolute;
		inset: 0;
		background-image: var(--spot-img);
		background-size: cover;
		background-position: center;
		-webkit-mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 30%), #000 0%, #000 40%, transparent 78%);
		mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 30%), #000 0%, #000 40%, transparent 78%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.front.has-spotlight .front__spotlight-mask {
		opacity: 1;
	}

	.front.no-hover .front__spotlight-mask {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 1;
	}

	.front.no-hover .front__spotlight img {
		opacity: 0;
	}

	.front__banner {
		position: relative;
		background-color: var(--c-ink);
		color: var(--c-white);
		min-height: 320px;
		display: flex;
		align-items: center;
	}

	.front__banner img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.32;
		filter: grayscale(1);
	}

	.front__banner-copy {
		position: relative;
		z-index: 2;
	}

	@media (max-width: 760px) {

		.front__grid {
			min-height: 520px;
			padding-top: 40px;
			padding-bottom: 40px;
		}

	}

	/* ------------------------------------------------------------
	   horizontal-rail
	   ------------------------------------------------------------ */
	.rail {
		position: relative;
		height: 170vh;
	}

	.rail__pin {
		position: sticky;
		top: 0;
		height: 100vh;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.rail__track {
		display: flex;
		gap: 28px;
		padding-left: var(--container-pad);
		will-change: transform;
	}

	@media (max-width: 720px) {

		.rail {
			height: auto;
		}

		.rail__pin {
			position: static;
			height: auto;
			overflow-x: auto;
			scrollbar-width: thin;
			scrollbar-color: var(--c-accent) transparent;
		}

		.rail__track {
			transform: none !important;
		}

	}

	/* ------------------------------------------------------------
	   mapa interactivo (plano del centro)
	   ------------------------------------------------------------ */
	.map {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.map__stage {
		position: relative;
	}

	.map__plan {
		width: 100%;
		height: auto;
		border: 1px solid var(--c-line);
	}

	.map__point {
		position: absolute;
		transform: translate(-50%, -50%);
	}

	.map__panels {
		margin-top: 32px;
	}

	.map__panel {
		display: none;
	}

	.map__panel.is-active {
		display: block;
	}

	/* ------------------------------------------------------------
	   compare-table (estructura)
	   ------------------------------------------------------------ */
	.compare {
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--c-accent) transparent;
	}

	.compare table {
		width: 100%;
		min-width: 620px;
	}

	/* ------------------------------------------------------------
	   inverted-block
	   ------------------------------------------------------------ */
	.inverted {
		background-color: var(--c-ink);
		color: var(--c-fog);
		border-radius: var(--radius-m);
	}

	.inverted__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
		padding: 56px;
	}

	@media (max-width: 760px) {

		.inverted__grid {
			grid-template-columns: 1fr;
			padding: 32px 24px;
			gap: 28px;
		}

	}

}