/* ==========================================================================
   Aviso emergente de El Legado Urbano sobre el home

   Esta hoja se carga únicamente en el home. Aun así, todo cuelga de
   .popup-urbano: el home es la maqueta de Campestre de 2022 y está en
   producción, así que ninguna regla de aquí puede alcanzar nada suyo.
   ========================================================================== */

.popup-urbano {
	/* El arte original mide 336 px de ancho. Se muestra a 560 y el archivo se
	   sirve reescalado a 672 para que el aumento lo haga un Lanczos y no el
	   navegador, pero detalle nuevo no aparece: a este tamaño la tipografía
	   se ve blanda. Se arregla de verdad con un original más grande, o
	   rehaciendo la pieza en HTML con las fuentes de marca. */
	width: min(560px, calc(100vw - 3rem));
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;

	/* El botón de cerrar se sale del recuadro por la esquina, así que el
	   diálogo no puede recortar. El redondeo y la sombra van en la imagen. */
	overflow: visible;

	/* Sin margin:auto el diálogo se pega arriba en algunos navegadores. */
	margin: auto;
}

.popup-urbano::backdrop {
	background: rgba(29, 35, 22, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* El título existe solo para que el modal tenga nombre accesible. El aviso
   visible es la imagen, que ya trae su propio titular. */
.popup-urbano__titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.popup-urbano__imagen {
	display: block;
	width: 100%;
	height: auto;

	/* El gesto de forma del manual: una esquina recta y el resto redondeadas.
	   El token --radio-bloque usa 2rem, pensado para bloques de página; sobre
	   un recuadro de 336 px esa curva se come el borde del arte. Mismo gesto,
	   radio proporcional. */
	border-radius: 0 1.25rem 0 1.25rem;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.popup-urbano__cerrar {
	position: absolute;
	top: -0.85rem;
	right: -0.85rem;

	display: flex;
	align-items: center;
	justify-content: center;

	/* 44 px: el mínimo táctil. El aspa dibujada dentro es más pequeña. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: var(--perfil-profundo, #3D4A2E);
	color: var(--marfil-natural, #EAE4DD);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
	cursor: pointer;

	transition: background-color 0.2s ease, transform 0.2s ease;
}

.popup-urbano__cerrar svg {
	width: 1.05rem;
	height: 1.05rem;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

.popup-urbano__cerrar:hover {
	background: var(--cobre-tierra, #BD8E65);
	transform: scale(1.06);
}

.popup-urbano__cerrar:focus-visible {
	outline: 2px solid var(--oro-campo, #D4C89A);
	outline-offset: 3px;
}

/* ---- Entrada ------------------------------------------------------------- */

@keyframes popup-urbano-entrada {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.popup-urbano[open] {
	animation: popup-urbano-entrada 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.popup-urbano[open] {
		animation: none;
	}

	.popup-urbano__cerrar {
		transition: none;
	}

	.popup-urbano__cerrar:hover {
		transform: none;
	}
}

/* ---- Bloqueo del desplazamiento del fondo -------------------------------- */
/* <dialog> vuelve el fondo inerte, pero no todos los navegadores le impiden
   desplazarse.

   El bloqueo se deriva del atributo [open] del propio diálogo y no de una
   clase que ponga y quite el script. La diferencia importa: con una clase, si
   el evento 'close' no llega —y en algunos motores no llega—, el home se
   queda sin poder desplazarse hasta recargar. Atado a [open] eso no puede
   pasar, porque el navegador quita el atributo al cerrar.

   Los navegadores con <dialog> pero sin :has() (Chrome 105 para atrás) se
   quedan sin el bloqueo: el fondo se desplaza detrás del aviso y ya. */

html:has(#popup-urbano[open]),
html:has(#popup-urbano[open]) body {
	overflow: hidden;
}