/* ==========================================================
   wallpaper.css — formato publicitario "U invertida" (DEMO)
   Banda superior (billboard) + 2 laterales (rascacielos) que
   rellenan el margen sobrante a los lados del contenido (1200px).
   Pieza de demo aislada (prefijo .lv-wp); NO toca .container/body.
   Se enciende con ?wallpaper=on (DemoPanel).
   ========================================================== */

/* ── Creativo placeholder (común a banda y laterales) ───── */
.lv-wp__ad {
	position: relative;
	display: grid;
	place-content: center;
	gap: var(--sp-2, 8px);
	text-decoration: none;
	color: #fff;
	/* Placeholder de marca: degradado navy con una franja diagonal sutil. */
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 18px, rgba(255, 255, 255, 0) 18px 36px), linear-gradient(135deg, var(--brand-navy) 0%, #0a2f6b 100%);
	border-radius: 0;
	overflow: hidden;
}
.lv-wp__tag {
	justify-self: center;
	font: 600 11px/1 var(--f-sans, system-ui, sans-serif);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 4px 12px;
}
.lv-wp__dims {
	justify-self: center;
	font: 700 22px/1 var(--f-sans, system-ui, sans-serif);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.85);
}

/* ── Banda superior (billboard, en el flujo) ────────────── */
/* Va entre la cabecera/ticker y <main>: queda naturalmente debajo
   de ambos por orden de DOM. Alineada al ancho del contenido (1200px).
   Altura reservada → CLS≈0. */
.lv-wp__top {
	width: 100%;
	max-width: var(--content-max);
	/* margin-top 20px → la banda queda 20px bajo el menú, a la MISMA altura que
	   el borde superior de los laterales (U invertida alineada). */
	margin: 22px auto 0;
	box-sizing: border-box;
	aspect-ratio: 1200 / 250;
	max-height: 250px;
}

/* ── Laterales (rascacielos, fixed sobre el margen) ─────── */
/* Ocultos por defecto; solo aparecen en pantallas anchas (≥1440px),
   donde el margen a los lados del contenido es aprovechable.
   - U invertida CONTINUA, sin espacios: el borde interior toca el del
     contenido/banda y el exterior llega al borde de la ventana.
     width:calc((100% - content-max)/2) → el 100% de un fixed es el
     viewport SIN scrollbar (= el ancho con el que se centra el main),
     así el lateral mide exactamente el margen y queda pegado sin huecos.
   - Verticalmente: borde superior ALINEADO con la banda (20px bajo el
     menú) y 20px del fondo → ocupan toda la altura disponible.
   - z-index < header (50) → al hacer scroll el header opaco los tapa. */
.lv-wp__side {
	display: none;
	position: fixed;
	z-index: 1;
	top: 132px; /* fin del menú (≈112px) + 20px = borde superior de la banda */
	bottom: 20px; /* 20px sobre el fondo de la ventana */
	width: calc((100% - var(--content-max)) / 2);
}
.lv-wp__side--left {
	left: 0;
}
.lv-wp__side--right {
	right: 0;
}

/* Solo desde 1440px (a partir de ahí el margen lateral es aprovechable). */
@media (min-width: 1440px) {
	.lv-wp__side {
		display: grid;
	}
}

/* ── Móvil/tablet: el wallpaper NO se muestra (formato de escritorio). ── */
@media (max-width: 1024px) {
	.lv-wp {
		display: none;
	}
}

/* Sin movimiento para quien lo prefiera (regla del proyecto). */
@media (prefers-reduced-motion: reduce) {
	.lv-wp__ad {
		background-attachment: scroll;
	}
}