/* NODO · layout: encabezado, navegación, pie y estructura de páginas. Móvil primero. */

/* ── Encabezado ────────────────────────────────────────────────────── */
.sitio-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: rgb(255 252 250 / .92);
	border-bottom: 1px solid var(--border-subtle);
	transition: box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
	.sitio-header { background: rgb(255 252 250 / .86); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); }
}
.sitio-header.con-scroll { border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.admin-bar .sitio-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .sitio-header { top: 32px; } }

.sitio-header__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--header-h);
	padding-block: 10px;
}

.sitio-header__logo { display: flex; flex: none; text-decoration: none; }
.nodo-logo { height: 34px; width: auto; }           /* isotipo (< 380 px) */
@media (min-width: 380px) { .nodo-logo { height: 26px; } } /* sin la frase */

.sitio-header__movil { display: flex; align-items: center; gap: 4px; }
.sitio-header__movil .nd-btn { white-space: nowrap; padding-inline: 14px; }

/* Navegación: en móvil es un panel debajo del encabezado. */
.sitio-nav__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sitio-nav__enlace {
	display: flex;
	align-items: center;
	min-height: 52px;
	font: var(--fw-semibold) 18px/1.2 var(--font-body);
	color: var(--text-strong);
	text-decoration: none;
}
.sitio-nav__enlace:hover,
.sitio-nav__enlace[aria-current="page"] { color: var(--rosa-600); }

/* Con JS: panel desplegable que se abre con el botón de menú. */
.js .sitio-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: none;
	padding: 8px var(--page-margin) 20px;
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-lg);
}
.js .sitio-header.menu-abierto .sitio-nav { display: block; }
.sitio-nav__lista > li + li .sitio-nav__enlace { border-top: 1px solid var(--border-subtle); }

/* Sin JS: el menú queda visible debajo de la barra (y el botón de menú no se muestra). */
.no-js .sitio-header__barra { flex-wrap: wrap; }
.no-js .sitio-nav { flex-basis: 100%; }
.no-js .sitio-nav__lista { display: flex; flex-wrap: wrap; gap: 0 20px; }
.no-js .sitio-nav__lista > li + li .sitio-nav__enlace { border-top: 0; }
.no-js .sitio-nav__enlace { min-height: 44px; font-size: 16px; }
.no-js [data-menu-boton] { display: none; }

@media (min-width: 960px) {
	.nodo-logo { height: 34px; }
	.sitio-header__movil { display: none; }
	.sitio-header__barra { gap: 24px; flex-wrap: nowrap; }

	.js .sitio-nav,
	.no-js .sitio-nav {
		position: static;
		display: block;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		flex-basis: auto;
	}
	.sitio-nav__lista,
	.no-js .sitio-nav__lista { display: flex; align-items: center; gap: 32px; }
	.sitio-nav__lista > li + li .sitio-nav__enlace { border-top: 0; }
	.sitio-nav__enlace {
		min-height: 44px;
		padding: 0 2px;
		font-size: 16px;
		white-space: nowrap;
		text-decoration: underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 2px;
		text-underline-offset: 8px;
		transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
	}
	.sitio-nav__enlace:hover,
	.sitio-nav__enlace[aria-current="page"] { color: var(--rosa-600); text-decoration-color: var(--rosa-500); }

	/* En escritorio, «Proponer una idea» se ve como botón secundario. */
	.sitio-nav__enlace--accion {
		padding: 0 22px;
		border-radius: var(--radius-pill);
		background: var(--action-secondary);
		color: var(--text-on-inverse);
		text-decoration: none;
	}
	.sitio-nav__enlace--accion:hover,
	.sitio-nav__enlace--accion[aria-current="page"] { background: var(--action-secondary-hover); color: var(--text-on-inverse); text-decoration: none; }
}

/* ── Contenido ─────────────────────────────────────────────────────── */
.sitio-main { display: block; }
.sitio-main:focus { outline: none; box-shadow: none; }

.nodo-pagina { padding-block: clamp(40px, 7vw, 88px) var(--section-gap); }
.nodo-pagina__cabecera { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.nodo-pagina__bajada { max-width: 640px; font-size: var(--text-lead); color: var(--text-muted); }
.nodo-contenido > * + * { margin-top: 1em; }
.nodo-contenido h2, .nodo-contenido h3 { margin-top: 1.5em; }

/* ── Pie ───────────────────────────────────────────────────────────── */
.sitio-pie { background: var(--surface-inverse); color: var(--text-on-inverse); }
.sitio-pie__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding-block: 28px 36px;
}
.sitio-pie__logo { display: flex; }
.sitio-pie .nodo-logo--horizontal { height: 30px; width: auto; }
.sitio-pie__lista { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.sitio-pie__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: var(--fw-medium) 15px/1.2 var(--font-body);
	color: var(--indigo-100);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.sitio-pie__enlace:hover { color: var(--neutral-0); text-decoration-color: var(--nodo-coral); }