/* Home a todo el ancho, pegado a las orillas (el futuro carrusel en A ocupa el 100%).
   min-height:auto evita el hueco fantasma del .content global (100vh-header-footer)
   debajo del grid cuando el muro ya terminó. */
.content.home,
.home {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding-left: 14px;
	padding-right: 14px;
	box-sizing: border-box;
	min-height: auto;
}

.home__grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.home__row {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: 18px;
	align-items: start;
}

.home__col {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* El centro (L) suele ser un feed infinito. Para que las columnas laterales no
   queden "scroll abajo" y siempre se vean, se fijan (sticky) bajo el header.
   align-self:start evita que el grid las estire a la altura de la fila (eso
   rompería el sticky). En móvil las columnas son display:contents, así que el
   sticky se ignora solo. Si una lateral llega a ser más alta que el viewport,
   se le puede dar scroll propio (ver .home__col--scroll abajo). */
.home__col--left,
.home__col--right {
	position: sticky;
	top: calc(var(--fnc-header-height, 4.75rem) + 14px);
	align-self: start;
}

/* Refuerzo opcional para laterales muy altas: scroll interno discreto. */
.home__col--scroll {
	max-height: calc(100vh - var(--fnc-header-height, 4.75rem) - 28px);
	overflow-y: auto;
}

/* Layout invitado: A full → pares B C / E F / H I → fulls D G (+ J K L reserva).
   En móvil (<900px) los pares pasan a columna. */
.home__stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.home--guest .home__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: stretch;
	width: 100%;
}

.home--guest .home__pair > .home-section,
.home--guest .home__pair > .home-section > .fnc-wgt {
	height: 100%;
}

/* Si solo un lado del par está activo, ocupa todo el ancho. */
.home--guest .home__pair > .home-section:only-child {
	grid-column: 1 / -1;
}

.home--guest .home-section--a {
	margin-left: -6px;
	margin-right: -6px;
}

.home--guest .home-section--a .fnc-wgt--landing-mosaic,
.home--guest .home-section--a .fnc-landing-mosaic {
	border-radius: 18px;
}

.home--guest .home-section__placeholder { min-height: 180px; }
.home--guest .home-section--a .home-section__placeholder { min-height: 280px; }
.home--guest .home-section--d .home-section__placeholder,
.home--guest .home-section--g .home-section__placeholder { min-height: 200px; }
.home--guest .home-section--l .home-section__placeholder { min-height: 260px; }
.home--guest .home__pair .home-section__placeholder { min-height: 200px; }

.home-section { min-width: 0; }

/* Placeholder visible mientras la sección no tiene app configurada:
   azul metálico discreto + borde discontinuo (indica "aquí falta configurar").
   Las secciones crecen dinámicamente en alto según su contenido real. */
.home-section__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	border-radius: 14px;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 1px;
	color: rgba(173, 196, 224, .7);
	background: linear-gradient(135deg, #2b3543, #3a4759 60%, #313c4b);
	border: 2px dashed rgba(126, 160, 200, .45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* A = barra superior (pasarela tipo historia). L = centro principal (más alto). */
.home-section--a .home-section__placeholder { min-height: 260px; }
.home-section--l .home-section__placeholder { min-height: 696px; }

.home-section__title {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
}

.home-section .fnc-wgt { width: 100%; }

@media (max-width: 900px) {
	/* Responsivo: una sola columna. Las columnas se vuelven display:contents
	   para que sus secciones sean items directos de la fila y podamos
	   reordenarlas con order. A va siempre primera (vive fuera de la fila);
	   dentro de la fila priorizamos L (centro principal) con order negativo. */
	.home__row { grid-template-columns: 1fr; }
	.home__col { display: contents; }
	.home-section--l { order: -1; }
	.home-section--l .home-section__placeholder { min-height: 320px; }

	.home--guest .home__pair { grid-template-columns: 1fr; }
}