/* ==========================================================================
   El Legado Urbano - estilos base

   Todo acotado a .proyecto-urbano, la clase que functions.php pone en <body>
   cuando la ruta empieza por /urbano.

   Motivo: este WordPress sirve también la página de Campestre en producción.
   Nada de acá puede filtrarse hacia ella.

   Los valores salen de tokens.css. No poner colores ni tamaños literales
   en este archivo: si un valor no existe como token, el token es lo que
   falta.
   ========================================================================== */

.proyecto-urbano {
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-base);
	line-height: var(--interlinea-cuerpo);
	color: var(--texto);
	background: var(--fondo);
}

/* Elementor impone su propia tipografía por widget. Estas reglas son la
   base para lo que no la traiga, y el kit global se encarga del resto. */

.proyecto-urbano h1,
.proyecto-urbano h2,
.proyecto-urbano h3,
.proyecto-urbano h4 {
	font-family: var(--fuente-display);
	font-weight: 500;
	line-height: var(--interlinea-display);
	color: var(--texto);
	text-wrap: balance;
}

.proyecto-urbano p {
	max-width: var(--ancho-lectura);
}

.proyecto-urbano a {
	color: var(--acento-enlace);
	text-underline-offset: 0.2em;
}

/* Foco visible. Elementor no lo garantiza y sin esto la página no es
   navegable con teclado. */
.proyecto-urbano a:focus-visible,
.proyecto-urbano button:focus-visible,
.proyecto-urbano input:focus-visible,
.proyecto-urbano textarea:focus-visible {
	outline: 2px solid var(--acento-enlace);
	outline-offset: 3px;
}

/* ---- Clases de utilidad para usar desde el editor ------------------------ */
/* El cliente las aplica desde el campo "Clases CSS" de cualquier widget.
   Es la vía para que use gestos de marca sin tocar código.               */

/* La bajada espaciada del logotipo. El gesto tipográfico que el manual
   repite en toda la marca.

   Sin caja alta: el cliente pidió que nada vaya en mayúsculas sostenidas.
   Lo que hace reconocible el gesto es el espaciado de letra, no la caja —
   en el propio logotipo, «Montenegro, Quindío» va espaciado y con la
   primera en mayúscula. */
.proyecto-urbano .etiqueta,
.proyecto-urbano .elementor-widget-heading.etiqueta .elementor-heading-title {
	font-family: var(--fuente-display);
	font-weight: 300;
	letter-spacing: var(--tracking-etiqueta);
	text-transform: none;
	font-size: var(--escala-base);
	color: var(--texto-suave);
}

/* El filete cobre bajo el logotipo. */
.proyecto-urbano .filete {
	height: 1px;
	background: var(--filete);
	border: 0;
	max-width: 420px;
}

/* Bloque de esquina asimétrica: una recta, tres redondeadas.
   Es la forma más reconocible del manual. */
.proyecto-urbano .bloque-marca {
	border-radius: var(--radio-bloque);
	overflow: hidden;
}

.proyecto-urbano .sobre-profundo {
	background: var(--fondo-oscuro);
	color: var(--texto-inverso);
}

.proyecto-urbano .sobre-profundo h1,
.proyecto-urbano .sobre-profundo h2,
.proyecto-urbano .sobre-profundo h3,
.proyecto-urbano .sobre-profundo h4 {
	color: var(--texto-inverso);
}

.proyecto-urbano .sobre-profundo a {
	color: var(--cobre-sobre-oscuro);
}

/* Cifras alineadas en columna: precios, áreas, metrajes. */
.proyecto-urbano .cifras {
	font-variant-numeric: tabular-nums;
}

/* ---- Formulario de Contact Form 7 --------------------------------------- */
/* Elementor Free no trae widget de formulario, así que CF7 entra por
   shortcode y hay que vestirlo a mano.                                   */

.proyecto-urbano .wpcf7 input[type="text"],
.proyecto-urbano .wpcf7 input[type="email"],
.proyecto-urbano .wpcf7 input[type="tel"],
.proyecto-urbano .wpcf7 textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-base);
	color: var(--texto);
	background: var(--fondo-alt);
	border: 1px solid var(--borde);
	border-radius: var(--radio-suave);
}

.proyecto-urbano .wpcf7 input[type="submit"] {
	font-family: var(--fuente-display);
	font-weight: 500;
	font-size: var(--escala-base);
	letter-spacing: 0.04em;
	color: var(--cta-texto);
	background: var(--cta-fondo);
	border: 0;
	border-radius: var(--radio-bloque);
	padding: 0.9rem 2.25rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.proyecto-urbano .wpcf7 input[type="submit"]:hover {
	background: var(--cta-fondo-hover);
}

@media (prefers-reduced-motion: reduce) {
	.proyecto-urbano *,
	.proyecto-urbano *::before,
	.proyecto-urbano *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Cinco sentidos ------------------------------------------------------ */
/* Las cinco fotos vienen con proporciones distintas (de 1023 a 1364 px de
   alto sobre el mismo ancho), así que las tarjetas quedaban escalonadas.
   Se les impone una relación de aspecto común y se recorta al centro. */

/* El formulario vive dentro de un panel sobre Perfil Profundo, así que las
   etiquetas heredaban el color de texto oscuro y quedaban ilegibles.
   Marfil sobre ese fondo da 7.50:1. */

.proyecto-urbano .wpcf7 label {
	display: block;
	color: var(--texto-inverso);
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: var(--escala-sm);
	letter-spacing: 0.06em;
	margin-bottom: 0.4rem;
}

.proyecto-urbano .wpcf7 p {
	max-width: none;
	margin-bottom: 1.1rem;
}

.proyecto-urbano .wpcf7 ::placeholder {
	color: var(--texto-suave);
	opacity: 1;
}

/* Mensajes de validación y de envío, también sobre fondo oscuro. */
.proyecto-urbano .wpcf7-response-output,
.proyecto-urbano .wpcf7-not-valid-tip {
	color: var(--oro-campo);
	border-color: var(--cobre-sobre-oscuro);
}

/* ---- Hero: overlay en modo multiplicar ----------------------------------- */
/* Elementor 4.2 no expone el modo de fusión del overlay como control en los
   contenedores, así que va acá.

   Multiplicar no tapa el video con una capa verde: lo oscurece conservando
   su luminancia. El cielo sigue leyéndose como cielo y el agua como agua,
   pero todo vira al verde de marca. Con una capa normal al 70% el video
   quedaría plano. */

/* Se apunta por el atributo y no por una clase: Elementor 4.2 no renderiza
   _css_classes en los contenedores, y su clase de elemento (elementor-element-xxxxx)
   cambia en cada generación. El único contenedor con fondo en video es el
   hero, así que el selector es preciso y estable. */

/* Elementor no dibuja el overlay como un div: lo genera con ::before sobre
   el contenedor y sobre el contenedor del video. Apuntar a
   .elementor-background-overlay no encuentra nada. */

.proyecto-urbano .e-con[data-settings*="background_video_link"]::before,
.proyecto-urbano .e-con[data-settings*="background_video_link"] > .e-con-inner > .elementor-background-video-container::before {
	mix-blend-mode: multiply;
}

/* ---- Indicador de desplazamiento del hero -------------------------------- */
/* Anclado al pie del hero, fuera del flujo, para que no empuje el bloque de
   texto que está centrado verticalmente. */

.proyecto-urbano .elementor-widget-html:has(.scroll-abajo) {
	position: absolute;
	bottom: 2rem;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 3;
	pointer-events: none;
	text-align: center;   /* el enlace es inline-flex: sin esto queda a la izquierda */
}

.proyecto-urbano .scroll-abajo {
	pointer-events: auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	color: var(--marfil-natural);
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.25s ease, color 0.25s ease;
}

.proyecto-urbano .scroll-abajo:hover,
.proyecto-urbano .scroll-abajo:focus-visible {
	opacity: 1;
	color: var(--cobre-sobre-oscuro);
}

.proyecto-urbano .scroll-abajo__texto {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: var(--tracking-etiqueta);
}

/* El recorrido es corto y la curva suave: un rebote marcado distrae del
   titular, que es lo que tiene que leerse primero. */
.proyecto-urbano .scroll-abajo__flecha {
	animation: legado-bajar 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes legado-bajar {
	0%, 70%, 100% { transform: translateY(0); }
	35%           { transform: translateY(7px); }
}

/* El bloque de utilidad de arriba ya desactiva las animaciones con
   prefers-reduced-motion; acá se detiene del todo en una posición legible. */
@media (prefers-reduced-motion: reduce) {
	.proyecto-urbano .scroll-abajo__flecha {
		animation: none;
	}
}

/* En pantallas bajas el hero queda justo y el indicador se encima del
   contenido: ahí no aporta y se oculta. */
@media (max-height: 620px) {
	.proyecto-urbano .elementor-widget-html:has(.scroll-abajo) {
		display: none;
	}
}

/* ---- Inversión: fondo fijo ----------------------------------------------- */
/* iOS Safari ignora background-attachment: fixed y, peor, provoca saltos al
   desplazar. Se limita a punteros finos (ratón), que es donde el efecto se
   ve bien; en táctil el fondo simplemente acompaña al scroll. */

@media (hover: none), (max-width: 1024px) {
	.proyecto-urbano .e-con {
		background-attachment: scroll !important;
	}
}

/* ---- Imágenes ampliables ------------------------------------------------- */
/* Las imágenes fijas abren en modal. El estado de hover tiene que anunciar
   que son interactivas: sin señal visual, nadie descubre que se puede
   hacer clic. */

.proyecto-urbano .img-ampliable a,
.proyecto-urbano .img-ampliable img {
	display: block;
	cursor: zoom-in;
}

.proyecto-urbano .img-ampliable img {
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
	            filter 0.4s ease;
	will-change: transform;
}

.proyecto-urbano .img-ampliable:hover img,
.proyecto-urbano .img-ampliable a:focus-visible img {
	transform: scale(1.035);
	filter: brightness(1.05);
}

/* El contenedor recorta el desbordamiento del zoom para que la imagen crezca
   dentro de su marco y no empuje el resto de la maqueta. */
.proyecto-urbano .img-ampliable .elementor-widget-container,
.proyecto-urbano .img-ampliable figure,
.proyecto-urbano .img-ampliable a {
	overflow: hidden;
	border-radius: inherit;
}

/* ---- Modal: fondo difuminado --------------------------------------------- */
/* El difuminado va sobre lo que hay detrás: la página se ve borrosa a través
   del modal, no un color plano. Sin el respaldo semitransparente el texto
   del sitio seguiría legible detrás y competiría con la foto. */

.proyecto-urbano ~ .elementor-lightbox .dialog-widget-content,
.elementor-lightbox .dialog-widget-content {
	background-color: rgba(29, 35, 22, 0.72);
	backdrop-filter: blur(18px) saturate(1.1);
	-webkit-backdrop-filter: blur(18px) saturate(1.1);
}

/* La imagen ocupa el 85% del viewport: deja aire alrededor y evita que un
   render apaisado toque los bordes de la pantalla. */
.elementor-lightbox .elementor-lightbox-image,
.elementor-lightbox .swiper-slide-image {
	max-width: 85vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	border-radius: 0 2rem 0 2rem;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* ---- Flechas del lightbox ------------------------------------------------ */
/* Las pone Elementor, pero su hoja se deja `position` sin declarar: trae
   `left: 0` y `right: 0` para colocarlas a los lados y las flechas se quedan
   en `static`, donde esas dos propiedades no hacen nada. Acaban apiladas
   debajo de la foto, fuera de la pantalla —medían 215x1000 px arrancando en
   y=1000 y y=2000—, así que no había forma de pasar de imagen con el ratón.
   Comprobado en la 4.2.4; esto se puede quitar si una versión posterior lo
   corrige.

   El contenedor `.swiper` ya viene con `position: relative`, así que basta
   con sacarlas del flujo para que sus `left`/`right` surtan efecto. */
.elementor-lightbox .swiper .elementor-swiper-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 4rem;
	height: 4rem;
	justify-content: center;
	cursor: pointer;
	/* 25 px es el tamaño que trae; a pantalla completa se pierde. */
	font-size: 2rem;
	/* Disco de apoyo: las fotos del proyecto tienen cielos muy claros y una
	   flecha marfil sobre ellos desaparece. */
	background: rgba(29, 35, 22, 0.55);
	border-radius: 50%;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.elementor-lightbox .swiper .elementor-swiper-button-prev {
	left: 1.2rem;
}

.elementor-lightbox .swiper .elementor-swiper-button-next {
	right: 1.2rem;
}

@media (max-width: 767px) {
	.elementor-lightbox .swiper .elementor-swiper-button {
		width: 3rem;
		height: 3rem;
		font-size: 1.5rem;
	}

	.elementor-lightbox .swiper .elementor-swiper-button-prev {
		left: 0.5rem;
	}

	.elementor-lightbox .swiper .elementor-swiper-button-next {
		right: 0.5rem;
	}
}

/* Controles del modal en los colores de marca. */
.elementor-lightbox .elementor-swiper-button,
.elementor-lightbox .dialog-lightbox-close-button {
	color: #EAE4DD;
	opacity: 0.85;
	transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.elementor-lightbox .swiper .elementor-swiper-button:hover,
.elementor-lightbox .swiper .elementor-swiper-button:focus-visible {
	background: rgba(29, 35, 22, 0.8);
}

.elementor-lightbox .elementor-swiper-button:hover,
.elementor-lightbox .dialog-lightbox-close-button:hover,
.elementor-lightbox .elementor-swiper-button:focus-visible,
.elementor-lightbox .dialog-lightbox-close-button:focus-visible {
	color: #CFAD8F;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.proyecto-urbano .img-ampliable img {
		transition: none;
	}
	.proyecto-urbano .img-ampliable:hover img {
		transform: none;
	}
}

/* Los textos de los botones van en blanco y negrita en toda la página, por
   petición del cliente. Sobre el cobre el blanco no llega al contraste que
   pide WCAG; queda como decisión suya y no como descuido. */

/* ---- Modal del mapa ------------------------------------------------------ */

.proyecto-urbano .mapa-modal__abrir {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: var(--escala-base);
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--cobre-tierra);
	border: 0;
	border-radius: var(--radio-bloque);
	padding: 0.85rem 2rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.proyecto-urbano .mapa-modal__abrir:hover {
	background: var(--oro-campo);
}

/* <dialog> nativo: Escape, foco atrapado y fondo inerte vienen de serie. */
.proyecto-urbano .mapa-modal__dialogo {
	width: min(92vw, 1040px);
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: var(--radio-bloque);
	background: var(--perfil-profundo);
	color: var(--texto-inverso);
	overflow: hidden;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

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

.proyecto-urbano .mapa-modal__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(234, 228, 221, 0.16);
}

.proyecto-urbano .mapa-modal__titulo {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: var(--escala-sm);
	letter-spacing: var(--tracking-etiqueta);
	color: var(--oro-campo);
}

.proyecto-urbano .mapa-modal__cerrar {
	background: none;
	border: 0;
	color: var(--texto-inverso);
	font-size: 1.9rem;
	line-height: 1;
	padding: 0 0.35rem;
	cursor: pointer;
	transition: color 0.2s ease;
}

.proyecto-urbano .mapa-modal__cerrar:hover {
	color: var(--cobre-sobre-oscuro);
}

.proyecto-urbano .mapa-modal__marco {
	display: block;
	width: 100%;
	height: min(66vh, 560px);
	border: 0;
}

.proyecto-urbano .mapa-modal__externo {
	display: block;
	padding: 0.9rem 1.25rem;
	font-family: var(--fuente-display);
	font-size: var(--escala-sm);
	letter-spacing: 0.04em;
	color: var(--cobre-sobre-oscuro);
	text-decoration: none;
	border-top: 1px solid rgba(234, 228, 221, 0.16);
}

.proyecto-urbano .mapa-modal__externo:hover {
	color: var(--oro-campo);
}

/* ---- Páginas legales ----------------------------------------------------- */
/* La política de datos hereda .proyecto-urbano por su ruta, así que ya trae
   las fuentes y colores de marca. Falta darle ritmo de lectura.

   Se apunta a .page-content y .entry-content: hello-elementor usa el primero
   en las páginas y el segundo en las entradas. */

.proyecto-urbano .page-content,
.proyecto-urbano .entry-content {
	max-width: 74ch;
	margin: 0 auto;
	padding: 3rem 1.25rem 5rem;
}

/* El kit global de Elementor fija h2 en 44 px, que es una medida de titular
   de sección, no de articulado legal. Acá manda la lectura del documento. */
.proyecto-urbano .page-content h2,
.proyecto-urbano .entry-content h2 {
	font-size: 1.45rem;
	line-height: 1.25;
	margin: 3rem 0 0.9rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--borde);
	color: var(--texto);
}

.proyecto-urbano .page-content h2:first-of-type,
.proyecto-urbano .entry-content h2:first-of-type {
	margin-top: 2rem;
}

.proyecto-urbano .page-content h3,
.proyecto-urbano .entry-content h3 {
	font-size: 1.12rem;
	line-height: 1.3;
	margin: 2rem 0 0.5rem;
	color: #546E3D;
}

.proyecto-urbano .page-content p,
.proyecto-urbano .entry-content p,
.proyecto-urbano .page-content li,
.proyecto-urbano .entry-content li {
	max-width: none;
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.proyecto-urbano .page-content ul,
.proyecto-urbano .entry-content ul {
	padding-left: 1.2rem;
	margin: 0 0 1.5rem;
}

.proyecto-urbano .page-content li,
.proyecto-urbano .entry-content li {
	margin-bottom: 0.6rem;
	padding-left: 0.2rem;
}

.proyecto-urbano .page-content li::marker,
.proyecto-urbano .entry-content li::marker {
	color: var(--cobre-tierra);
}

.proyecto-urbano .entradilla {
	font-size: 1.06rem;
	border-left: 2px solid var(--cobre-tierra);
	padding-left: 1.2rem;
	margin-bottom: 2.5rem;
}

.proyecto-urbano .firma {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--borde);
	color: var(--texto-suave);
	font-size: var(--escala-sm);
	line-height: 1.6;
}

/* El título de la página lo imprime el tema padre fuera de .page-content. */
.proyecto-urbano .page-header {
	max-width: 74ch;
	margin: 0 auto;
	padding: 4rem 1.25rem 0;
}

.proyecto-urbano .page-header .entry-title {
	font-size: 2.4rem;
	line-height: 1.1;
}

/* ---- Enlace legal del pie y casilla de autorización ---------------------- */

.proyecto-urbano .enlace-legal {
	text-align: center;
	margin: 0.75rem 0 0;
	font-size: var(--escala-xs);
}

.proyecto-urbano .enlace-legal a {
	color: rgba(234, 228, 221, 0.65);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.proyecto-urbano .enlace-legal a:hover,
.proyecto-urbano .enlace-legal a:focus-visible {
	color: var(--cobre-sobre-oscuro);
}

/* La casilla no viene marcada: una premarcada no constituye autorización
   expresa bajo la Ley 1581. */
.proyecto-urbano .acepto-datos {
	margin: 0.5rem 0 1.4rem;
	font-size: var(--escala-xs);
	line-height: 1.5;
	color: var(--texto-inverso);
}

.proyecto-urbano .acepto-datos .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.proyecto-urbano .acepto-datos input[type="checkbox"] {
	margin-top: 0.2rem;
	width: 1rem;
	height: 1rem;
	accent-color: var(--cobre-tierra);
	flex-shrink: 0;
}

.proyecto-urbano .acepto-datos a {
	color: var(--cobre-sobre-oscuro);
	text-underline-offset: 0.2em;
}

/* ---- Aviso legal del pie ------------------------------------------------- */
/* Tiene que ser legible, no letra chica escondida: si no se puede leer,
   no cumple su función de advertencia. De ahí el contraste suficiente y la
   medida de lectura acotada, aunque el cuerpo sea pequeño. */

.proyecto-urbano .aviso-legal {
	max-width: none;
	width: 100%;
	margin: 1.5rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(234, 228, 221, 0.18);
	font-size: 0.7rem;
	line-height: 1.65;
	text-align: justify;
	text-justify: inter-word;
	/* La página declara lang="es", así que la separación silábica funciona.
	   Sin ella, justificar un cuerpo pequeño abre ríos de espacio entre
	   palabras y el texto se vuelve incómodo de leer. */
	hyphens: auto;
	-webkit-hyphens: auto;
	color: rgba(234, 228, 221, 0.62);
}

/* La última línea de un texto justificado queda suelta a la izquierda.
   En un bloque de una sola pieza como este, estirarla cierra el rectángulo. */
.proyecto-urbano .aviso-legal::after {
	content: "";
	display: inline-block;
	width: 100%;
}

.proyecto-urbano .aviso-legal strong {
	color: var(--oro-campo);
	font-weight: 400;
	letter-spacing: 0.04em;
}

/* ---- Nota sobre cada render ---------------------------------------------- */
/* Va montada en la esquina inferior derecha de la imagen, no debajo. Se sube
   con margen negativo en vez de posicionarla en absoluto, porque el widget
   es hermano de la imagen y no su hijo: asi no depende de la estructura que
   genere Elementor, que cambia entre secciones.

   Lleva fondo propio: el aviso tiene que leerse sobre un cielo claro y sobre
   una sombra oscura por igual. */

.proyecto-urbano .nota-render {
	position: relative;
	z-index: 2;
	margin: -3.8rem 0 0;
	padding: 0 0.9rem;
	text-align: right;
	pointer-events: none;
	line-height: 1;
}

.proyecto-urbano .nota-render a {
	pointer-events: auto;
	display: inline-block;
	background: rgba(29, 35, 22, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: rgba(234, 228, 221, 0.92);
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	padding: 0.4rem 0.75rem;
	border-radius: 0 0.75rem 0 0.75rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.proyecto-urbano .nota-render a:hover,
.proyecto-urbano .nota-render a:focus-visible {
	background: var(--cobre-tierra);
	color: var(--perfil-profundo);
}

/* En la sección de inversión el render es el fondo de toda la sección, no una
   imagen dentro: ahí la nota se ancla abajo a la derecha del bloque. */
.proyecto-urbano .e-con[style*="background-image"] > .e-con-inner > .elementor-widget-html:has(.nota-render) {
	margin-top: 1.5rem;
}

/* ---- Destino de los enlaces internos ------------------------------------- */
/* El encabezado es fijo y mide 99 px, asi que sin margen de desplazamiento
   toda ancla aterriza debajo de el: el titulo de la seccion queda tapado y la
   persona cree que el boton la dejo en mitad de ninguna parte. Le pasaba a las
   siete anclas de la pagina, no solo al aviso legal.

   Va sobre el widget de ancla de Elementor, que es un div vacio con el id, y
   asi cubre las que existen y las que se agreguen despues. Los 120 px son los
   99 del encabezado mas aire. */

.proyecto-urbano .elementor-menu-anchor,
.proyecto-urbano #aviso-legal {
	scroll-margin-top: 120px;
}

/* ---- Modal de la política de datos --------------------------------------- */
/* Se abre desde el formulario. Al cerrarlo, la persona vuelve exactamente
   donde estaba, con lo que ya había escrito intacto. */

.proyecto-urbano .modal-politica {
	width: min(94vw, 820px);
	max-width: none;
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: var(--radio-bloque);
	background: var(--marfil-natural);
	color: var(--texto);
	overflow: hidden;
	display: none;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.proyecto-urbano .modal-politica[open] {
	display: flex;
	flex-direction: column;
}

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

.proyecto-urbano .modal-politica__cabecera,
.proyecto-urbano .modal-politica__pie {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: var(--perfil-profundo);
	color: var(--texto-inverso);
}

.proyecto-urbano .modal-politica__cabecera {
	justify-content: space-between;
}

.proyecto-urbano .modal-politica__pie {
	justify-content: flex-end;
	padding: 0.9rem 1.5rem;
}

.proyecto-urbano .modal-politica__titulo {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: var(--escala-sm);
	letter-spacing: var(--tracking-etiqueta);
	color: var(--oro-campo);
}

.proyecto-urbano .modal-politica__cerrar {
	background: none;
	border: 0;
	color: var(--texto-inverso);
	font-size: 1.9rem;
	line-height: 1;
	padding: 0 0.35rem;
	cursor: pointer;
}

.proyecto-urbano .modal-politica__cerrar:hover {
	color: var(--cobre-sobre-oscuro);
}

/* El cuerpo es lo único que desplaza: cabecera y pie quedan fijos, así el
   botón de volver está siempre a la vista por largo que sea el documento. */
.proyecto-urbano .modal-politica__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.75rem 2rem;
}

.proyecto-urbano .modal-politica__cuerpo h2 {
	font-size: 1.2rem;
	margin: 2rem 0 0.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--borde);
}

.proyecto-urbano .modal-politica__cuerpo h3 {
	font-size: 1.02rem;
	margin: 1.4rem 0 0.4rem;
	color: #546E3D;
}

.proyecto-urbano .modal-politica__cuerpo p,
.proyecto-urbano .modal-politica__cuerpo li {
	font-size: 0.92rem;
	line-height: 1.65;
	max-width: none;
	margin-bottom: 0.8rem;
}

.proyecto-urbano .modal-politica__cuerpo ul {
	padding-left: 1.2rem;
	margin-bottom: 1.2rem;
}

.proyecto-urbano .modal-politica__cargando {
	color: var(--texto-suave);
	font-style: italic;
}

.proyecto-urbano .modal-politica__volver {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: var(--escala-sm);
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--cobre-tierra);
	border: 0;
	border-radius: var(--radio-bloque);
	padding: 0.6rem 1.5rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.proyecto-urbano .modal-politica__volver:hover {
	background: var(--oro-campo);
}

/* ---- Encabezado de las tarjetas de diferenciadores ----------------------- */

.proyecto-urbano .dif-encabezado {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--cobre-sobre-oscuro);
}

.proyecto-urbano .dif-encabezado i {
	font-size: 1.6rem;
	line-height: 1;
}

.proyecto-urbano .dif-numero {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: 2.5rem;
	line-height: 1;
}

/* ---- Pie legal ----------------------------------------------------------- */

.proyecto-urbano .pie-legal {
	text-align: center;
	margin-top: 1.4rem;
}

.proyecto-urbano .pie-legal__linea {
	margin: 0;
	max-width: none;
	font-size: var(--escala-xs);
	color: rgba(234, 228, 221, 0.65);
}

.proyecto-urbano .pie-legal__sep {
	margin: 0 0.6rem;
	opacity: 0.5;
}

.proyecto-urbano .pie-legal__linea a {
	color: rgba(234, 228, 221, 0.65);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.proyecto-urbano .pie-legal__linea a:hover,
.proyecto-urbano .pie-legal__linea a:focus-visible {
	color: var(--cobre-sobre-oscuro);
}

.proyecto-urbano .pie-legal__creditos {
	margin: 0.5rem 0 0;
	max-width: none;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	color: rgba(234, 228, 221, 0.42);
}

.proyecto-urbano .pie-legal__creditos a {
	color: rgba(234, 228, 221, 0.6);
	text-decoration: none;
	border-bottom: 1px solid rgba(234, 228, 221, 0.25);
}

.proyecto-urbano .pie-legal__creditos a:hover,
.proyecto-urbano .pie-legal__creditos a:focus-visible {
	color: var(--cobre-sobre-oscuro);
	border-bottom-color: var(--cobre-sobre-oscuro);
}

/* ---- Pie de la foto aérea ------------------------------------------------ */
/* Es la única imagen real del proyecto, no un render. El pie lo dice, y por
   eso esta foto no lleva la nota de aviso legal. */

.proyecto-urbano .pie-foto {
	max-width: none;
	margin: 0;
	padding: 0.9rem 1.5rem;
	text-align: center;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: rgba(234, 228, 221, 0.62);
	background: var(--perfil-profundo);
}

/* Los widgets HTML de Elementor no siempre estiran a lo ancho de su
   contenedor: sin esto heredan ancho 0 y lo que dibujen no se ve. */
.proyecto-urbano .elementor-widget-html:has(.sentidos-fila),
.proyecto-urbano .elementor-widget-html:has(.sentidos-titular),
.proyecto-urbano .elementor-widget-html:has(.separador-casa) {
	width: 100%;
	align-self: stretch;
	flex: 1 1 100%;
}

/* ---- Franja aérea con parallax ------------------------------------------- */
/* Se abandonó `background-attachment: fixed`. Con `fixed` el fondo se mide y se
   posiciona contra la ventana, no contra la franja: la franja es solo una
   mirilla, y lo que se ve por ella depende de dónde esté la franja en pantalla,
   no del `background-position`. Por eso el encuadre caía siempre en la mitad de
   la foto —cultivos y nada más—, y por eso no se podía corregir: para que la
   franja mostrara el borde superior de la foto estando a media pantalla, la
   imagen tendría que empezar por debajo del borde de la ventana, y entonces al
   terminar el recorrido quedaba hueco.

   Sin `fixed`, el fondo se mide contra la franja y el encuadre es exacto. La
   foto es 4:3 y la franja es 1440x600, así que `cover` la escala a 1440x1080:
   sobran 480 px de alto. Anclada arriba muestra del 0% al 56% de la foto, que
   es cielo, el horizonte con Armenia, y el lote con sus hileras. */

.proyecto-urbano .franja-aerea {
	height: 600px;
	width: 100%;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

/* El parallax se recupera con animación ligada al scroll: la foto recorre parte
   de ese sobrante mientras la franja cruza la ventana. Es CSS puro, sin JS y
   sin listeners de scroll. Donde el navegador no lo soporte, la franja se queda
   en el encuadre de arriba, que es justamente el que interesa: la degradación
   pierde el movimiento, nunca el encuadre.

   El recorrido llega solo al 35% del sobrante (168 px). Más que eso empuja el
   horizonte fuera de cuadro y se pierde el motivo de la foto. */

@supports (animation-timeline: view()) {
	.proyecto-urbano .franja-aerea {
		animation: aerea-recorrido linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}

	@keyframes aerea-recorrido {
		from { background-position: center 0%; }
		to   { background-position: center 35%; }
	}
}

@media (max-width: 1024px) {
	.proyecto-urbano .franja-aerea {
		height: 380px;
	}
}

/* En las secciones donde el render es el fondo no hay imagen sobre la cual
   montar la nota: sin esto, el margen negativo la encima al contenido. */
.proyecto-urbano .nota-render--fondo {
	margin: 1.75rem 0 0;
	padding: 0;
}

/* ---- Página de agradecimiento -------------------------------------------- */
/* Destino del formulario. Es una sola pantalla y su único trabajo es
   confirmar: por eso el contenido se centra vertical y horizontalmente y no
   hay nada que invite a seguir bajando.

   La clase `pagina-gracias` la pone functions.php en el <body>, junto a
   `proyecto-urbano`. Van encadenadas y no anidadas porque ambas caen sobre
   el mismo elemento. */

.proyecto-urbano.pagina-gracias .e-con.e-parent {
	min-height: 100vh;
	min-height: 100dvh;   /* dvh descuenta la barra del navegador en móvil */
	justify-content: center;
}

.proyecto-urbano.pagina-gracias .elementor-widget-image img {
	margin-inline: auto;
}

/* El visto. Círculo de trazo cobre con el icono dentro, sin relleno: el mismo
   gesto de línea fina que usan el filete y los iconos sociales. */

.proyecto-urbano.pagina-gracias .gracias-visto {
	width: 74px;
	height: 74px;
	margin: 0 auto;
	border: 2px solid var(--cobre-sobre-oscuro);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cobre-sobre-oscuro);
	font-size: 30px;
	line-height: 1;
}

/* Sin animación de entrada, a propósito. Llevaba una con `fill-mode: both`
   desde `opacity: 0`, y ese patrón deja el icono invisible en cuanto la
   animación no llega a correr —pestaña en segundo plano al cargar, render
   pausado por el navegador—. En una página cuyo único trabajo es confirmar
   que el envío llegó, un acuse de recibo que puede no dibujarse no compensa
   un efecto de 620 ms. */

.proyecto-urbano.pagina-gracias .gracias-volver {
	margin: 0;
	max-width: none;
	text-align: center;
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-sm);
}

.proyecto-urbano.pagina-gracias .gracias-volver a {
	color: var(--texto-inverso);
	text-decoration: none;
	border-bottom: 1px solid rgba(234, 228, 221, 0.35);
	padding-bottom: 2px;
	transition: border-color 180ms ease, color 180ms ease;
}

.proyecto-urbano.pagina-gracias .gracias-volver a:hover,
.proyecto-urbano.pagina-gracias .gracias-volver a:focus-visible {
	color: var(--cobre-sobre-oscuro);
	border-bottom-color: var(--cobre-sobre-oscuro);
}

@media (max-width: 767px) {
	.proyecto-urbano.pagina-gracias .gracias-visto {
		width: 62px;
		height: 62px;
		font-size: 25px;
	}
}

/* ---- Formulario de MetForm ----------------------------------------------- */
/* Reemplaza a Contact Form 7 en Urbano. El motivo del cambio no fue la
   entrega del correo —los dos usan wp_mail() sobre el mismo servidor sin
   SPF— sino que MetForm guarda cada envío en la base de datos: un correo que
   no llega deja de significar un lead perdido.

   Los estilos repiten los que ya tenía CF7 más arriba. Se mantienen ambos
   bloques porque CF7 sigue activo para Campestre. */

.proyecto-urbano .mf-input-wrapper {
	margin-bottom: 1.1rem;
}

/* Selector deliberadamente pesado. MetForm trae `.mf-input-wrapper
   .mf-input-label` en negro, y Elementor genera para cada campo una regla
   propia del tipo `.elementor-2851 .elementor-element-990eb74
   .mf-input-label`, que son cuatro clases. Para ganarle hacen falta cuatro
   clases y un elemento; de ahi el `body` al frente. */

body.proyecto-urbano .metform-form-content .mf-input-wrapper .mf-input-label {
	display: block;
	color: var(--texto-inverso);
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: var(--escala-sm);
	letter-spacing: 0.06em;
	margin-bottom: 0.4rem;
}

.proyecto-urbano .mf-input-required-indicator {
	color: var(--cobre-sobre-oscuro);
	margin-left: 0.15em;
}

.proyecto-urbano input.mf-input,
.proyecto-urbano textarea.mf-input {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-base);
	color: var(--texto);
	background: var(--fondo-alt);
	border: 1px solid var(--borde);
	border-radius: var(--radio-suave);
}

.proyecto-urbano .mf-input::placeholder {
	color: var(--texto-suave);
	opacity: 1;
}

/* La casilla del consentimiento. El texto lleva el enlace a la política, así
   que necesita el color de enlace sobre fondo oscuro para verse. */

.proyecto-urbano .mf-checkbox-option {
	color: var(--texto-inverso);
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-sm);
	line-height: 1.5;
}

.proyecto-urbano .mf-checkbox-option label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

.proyecto-urbano .mf-checkbox-option a {
	color: var(--cobre-sobre-oscuro);
}

.proyecto-urbano .mf-checkbox-input {
	width: auto;
	margin-top: 0.25rem;
	flex: 0 0 auto;
	accent-color: var(--cobre-tierra);
}

/* El boton no se estiliza aqui. Sus colores, tipografia, padding y radio
   viven en los ajustes del widget (scripts/formulario-metform.py), que es lo
   que Elementor compila en post-2851.css con cuatro clases de especificidad.
   Duplicarlo en esta hoja creaba dos fuentes de verdad y la de aqui perdia
   siempre. */

/* Mensajes de validación y de respuesta, sobre el panel oscuro. */

.proyecto-urbano .mf-error-message,
.proyecto-urbano .mf-response-msg {
	color: var(--oro-campo);
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-sm);
}

.proyecto-urbano .mf-input[aria-invalid="true"] {
	border-color: var(--cobre-sobre-oscuro);
}

/* ==========================================================================
   Ajustes pedidos por el cliente — presentación de agosto de 2026
   ========================================================================== */

/* ---- Separador de casa --------------------------------------------------- */
/* El trazo continuo que el cliente propuso para enlazar secciones. Cierra la
   sección, así que va con aire arriba y pegado al borde inferior. */

.proyecto-urbano .separador-casa {
	margin: 3.5rem auto 0;
	max-width: 870px;
	width: 100%;
	line-height: 0;
}

.proyecto-urbano .separador-casa img {
	width: 100%;
	height: auto;
	opacity: 0.85;
}

@media (max-width: 767px) {
	.proyecto-urbano .separador-casa {
		margin-top: 2.5rem;
	}
}

/* ---- La cifra del manifiesto --------------------------------------------- */
/* El dato duro de la sección. El cliente lo pidió grande y con impacto, así
   que deja de ser una línea de texto: el 34 se lleva el tamaño que admita la
   columna, «fincas» se apoya en su línea base y el rango va debajo separado
   por un filete. La silueta de casa del manual queda de marca de agua. */

.proyecto-urbano .dato-fincas {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: clamp(0.8rem, 1.6vw, 1.6rem);
	max-width: none;
	margin: 0;
	padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.6rem, 3vw, 2.6rem);
	background: var(--perfil-profundo);
	color: var(--texto-inverso);
	border-radius: 0 2.5rem 0 2.5rem;
	overflow: hidden;
}

/* La casa del manual, al 8%: da fondo sin competir con la cifra. Anclada
   abajo a la derecha, que es el cuadrante que el texto deja libre. */
.proyecto-urbano .dato-fincas::after {
	content: "";
	position: absolute;
	right: -1rem;
	bottom: -0.5rem;
	width: 62%;
	height: 60%;
	background: url("../img/separador-casa-arbol-marfil.png") no-repeat right bottom / contain;
	opacity: 0.08;
	pointer-events: none;
}

.proyecto-urbano .dato-fincas__numero {
	position: relative;
	font-family: var(--fuente-display);
	font-weight: 500;
	font-size: clamp(5.5rem, 11vw, 9.5rem);
	line-height: 0.72;
	letter-spacing: -0.04em;
	color: var(--oro-campo);
}

.proyecto-urbano .dato-fincas__glosa {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
}

.proyecto-urbano .dato-fincas__unidad {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 0.9;
	color: var(--oro-campo);
}

.proyecto-urbano .dato-fincas__filete {
	display: block;
	width: 3.5rem;
	height: 1px;
	background: var(--cobre-tierra);
}

.proyecto-urbano .dato-fincas__metraje {
	font-family: var(--fuente-cuerpo);
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	line-height: 1.3;
	color: rgba(234, 228, 221, 0.9);
}

/* Por debajo de 480 px el 34 y su glosa en fila dejan al metraje en dos o
   tres renglones de dos palabras. Apilados respiran. */
@media (max-width: 480px) {
	.proyecto-urbano .dato-fincas {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}
}

/* ---- Titular con cifra (las 34 fincas) ----------------------------------- */
/* «34 fincas» como titular y «Ninguna igual a otra» como bajada. Son tres
   tamaños dentro del mismo título, que un heading de Elementor no da. */

.proyecto-urbano .titulo-cifra {
	max-width: none;
}

.proyecto-urbano .titulo-cifra__cifra {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 500;
	line-height: 0.9;
	color: var(--perfil-profundo);
}

.proyecto-urbano .titulo-cifra__numero {
	font-size: clamp(4.5rem, 9vw, 7rem);
	letter-spacing: -0.02em;
}

.proyecto-urbano .titulo-cifra__unidad {
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 300;
}

.proyecto-urbano .titulo-cifra__bajada {
	margin: 0.4rem 0 0;
	max-width: none;
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.2;
	color: var(--verde-texto);
}

/* ---- Rango de áreas ------------------------------------------------------ */
/* Los dos metrajes salen del párrafo y se leen como el rango que son. */

.proyecto-urbano .rango-areas {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin: 0.4rem 0 0;
	max-width: none;
}

.proyecto-urbano .rango-areas dt {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: var(--escala-sm);
	letter-spacing: var(--tracking-etiqueta);
	color: var(--texto-suave);
}

.proyecto-urbano .rango-areas dd {
	margin: 0.2rem 0 0;
	font-family: var(--fuente-display);
	font-weight: 500;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--cobre-texto);
}

.proyecto-urbano .rango-areas dd span {
	font-size: 1.1rem;
	font-weight: 300;
}

/* ---- Los cinco sentidos -------------------------------------------------- */
/* Rehechos contra la doble página del brochure que mandó el cliente: el «5»
   en cobre pegado al titular, y cinco tarjetas altas con la foto de fondo y
   el texto apoyado al pie sobre un degradado. */

.proyecto-urbano .sentidos-titular {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: none;
}

.proyecto-urbano .sentidos-titular__cifra {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: clamp(6rem, 13vw, 11rem);
	line-height: 0.78;
	color: var(--cobre-tierra);
}

.proyecto-urbano .sentidos-titular__texto {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--texto-inverso);
}

.proyecto-urbano .sentidos-titular__linea1 {
	font-family: var(--fuente-display);
	font-weight: 300;
	font-size: clamp(1.2rem, 2.4vw, 2rem);
	letter-spacing: var(--tracking-etiqueta);
	line-height: 1.2;
}

.proyecto-urbano .sentidos-titular__linea2 {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: clamp(3rem, 7vw, 5.6rem);
	line-height: 0.9;
}

.proyecto-urbano .sentidos-fila {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.2rem;
	width: 100%;
}

.proyecto-urbano .sentido {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	min-height: 30rem;
	padding: 1.6rem 1.3rem;
	background-position: center;
	background-size: cover;
	border-radius: 0 2rem 0 2rem;
	overflow: hidden;
}

/* El degradado va como pseudoelemento y no en el background del <figure>:
   sobre la misma capa, el degradado y la foto no pueden coexistir sin que
   uno pise al otro. Sin él, el texto blanco cae sobre zonas claras de la
   foto —el cielo del ave, los limones— y deja de leerse. */
.proyecto-urbano .sentido::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(29, 35, 22, 0.94) 0%,
		rgba(29, 35, 22, 0.86) 30%,
		rgba(29, 35, 22, 0.34) 58%,
		/* El tope vuelve a cubrirse: ahí va el nombre del sentido, y sobre
		   los limones y el cielo del ave el marfil se perdía. 0.42 basta
		   para leerlo sin apagar la foto. */
		rgba(29, 35, 22, 0.42) 100%
	);
}

.proyecto-urbano .sentido__texto {
	position: relative;
	width: 100%;
}

.proyecto-urbano .sentido__nombre {
	position: relative;
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	line-height: 1;
	color: var(--marfil-natural);
	/* El nombre va sobre la zona clara de la foto, donde el degradado ya
	   casi no cubre. La sombra le da el contraste que ahí falta. */
	text-shadow: 0 2px 10px rgba(29, 35, 22, 0.85);
}

.proyecto-urbano .sentido__titular {
	margin: 0;
	max-width: none;
	font-family: var(--fuente-display);
	font-weight: 300;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.15;
	color: var(--cobre-sobre-oscuro);
}

.proyecto-urbano .sentido__detalle {
	margin: 0.5rem 0 0;
	max-width: none;
	font-family: var(--fuente-cuerpo);
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(234, 228, 221, 0.88);
}

/* Cinco columnas no caben en tableta ni en móvil: 3+2 y luego 2+2+1. La
   altura baja con ellas, si no la fila se vuelve una torre. */
@media (max-width: 1024px) {
	.proyecto-urbano .sentidos-fila {
		grid-template-columns: repeat(3, 1fr);
	}

	.proyecto-urbano .sentido {
		min-height: 24rem;
	}
}

@media (max-width: 600px) {
	.proyecto-urbano .sentidos-fila {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.8rem;
	}

	.proyecto-urbano .sentido {
		min-height: 17rem;
		padding: 1.1rem 0.9rem;
	}
}

/* ---- Logo de Hito Arquitectura ------------------------------------------- */
/* Los otros dos aliados llegan en blanco sobre transparente. El de Hito es
   gris oscuro con el acento verde lima de su marca: sobre el pie profundo
   desaparecía. Se aclara sin tocar el archivo, que no es nuestro y no se
   puede alterar. */

.proyecto-urbano .logo-hito img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

/* ---- Atajos flotantes ---------------------------------------------------- */
/* WhatsApp y el acceso al formulario, disponibles en toda la página. */

.proyecto-urbano .flotantes {
	position: fixed;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 98;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.7rem;
}

.proyecto-urbano .flotantes a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.3rem;
	border-radius: 0 1.6rem 0 1.6rem;
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(29, 35, 22, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.proyecto-urbano .flotantes a:hover,
.proyecto-urbano .flotantes a:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(29, 35, 22, 0.36);
}

.proyecto-urbano .flotantes a i {
	font-size: 1.25rem;
	line-height: 1;
}

/* Verde de WhatsApp, no de la paleta: es el color con el que la gente
   reconoce el canal, y cambiarlo por el verde de marca haría que el botón
   dejara de leerse como WhatsApp.

   Redondo y sin texto en las dos versiones. El icono solo es la forma con la
   que se reconoce el canal de un vistazo; la etiqueta al lado no añadía nada
   y hacía el botón el doble de ancho que el que tiene debajo. */
/* El selector lleva el `a` porque la regla general de los flotantes ya trae
   `border-radius` con el bisel de la marca y le ganaba a `.flotantes__wa` a
   secas: el botón salía con dos esquinas rectas en vez de redondo. */
.proyecto-urbano .flotantes a.flotantes__wa {
	/* #25D366, el verde de la marca WhatsApp. Antes iba con #128C7E, que es
	   el verde oscuro de su interfaz y aquí se confundía con el Perfil
	   Profundo de la paleta. */
	background: #25D366;
	color: #FFFFFF;
	width: 3.1rem;
	height: 3.1rem;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}

.proyecto-urbano .flotantes__wa i {
	font-size: 1.6rem;
}

.proyecto-urbano .flotantes__cta {
	background: var(--cobre-tierra);
	color: #FFFFFF;
	font-weight: 700;
}

/* En móvil solo los iconos: dos botones con texto ocupan media pantalla y
   tapan el contenido. El aria-label del enlace sigue nombrándolos. */
@media (max-width: 767px) {
	.proyecto-urbano .flotantes {
		right: 0.9rem;
		bottom: 0.9rem;
		gap: 0.6rem;
	}

	.proyecto-urbano .flotantes a {
		padding: 0.9rem;
		border-radius: 50%;
	}

	.proyecto-urbano .flotantes__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.proyecto-urbano .flotantes a {
		transition: none;
	}

	.proyecto-urbano .flotantes a:hover,
	.proyecto-urbano .flotantes a:focus-visible {
		transform: none;
	}
}

/* ---- Bajada del hero ----------------------------------------------------- */
/* Va en dos renglones. El <br> pone el corte entre las dos oraciones; el
   ancho evita que la segunda se estire hasta el borde en pantallas anchas. */

.proyecto-urbano .hero-bajada .elementor-widget-container {
	max-width: 62rem;
	margin-inline: auto;
}

/* ---- Piezas con marco propio --------------------------------------------- */
/* El plano de loteo, la tabla de áreas y el mapa de ubicación llegan con su
   marco dibujado: esquinas redondeadas y transparencia alrededor. Todo lo
   que pinte o recorte detrás de ellas lo arruina — un fondo rellena las
   esquinas que deben dejar pasar el color de la sección, y un radio propio
   recorta el marco por fuera. Así que aquí no va ninguna de las dos cosas. */

.proyecto-urbano .img-marco-propio .elementor-widget-container,
.proyecto-urbano .img-marco-propio figure,
.proyecto-urbano .img-marco-propio a {
	background: none;
	border-radius: 0;
	overflow: visible;
}

.proyecto-urbano .img-marco-propio img {
	width: 100%;
	height: auto;
	background: none;
	border-radius: 0;
}

/* ---- Encabezado en móvil ------------------------------------------------- */
/* El logotipo a 210 px y el botón de agenda al lado ocupaban casi un tercio
   de una pantalla de teléfono, y el hero empezaba aplastado contra el borde.
   En móvil el botón se va y el logotipo baja: queda un header normal, de la
   altura que se espera de uno.

   El CTA no se pierde. El botón flotante lo tiene disponible en toda la
   página y ahí sí cabe, así que en móvil hay un solo acceso al formulario en
   vez de dos compitiendo. */

@media (max-width: 767px) {
	.proyecto-urbano .header-urbano {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* El logotipo baja de los 290 px de escritorio: ahí manda la barra
	   entera, aquí se comería media pantalla. El width en línea que pone
	   Elementor va sobre la imagen, así que el límite se pone ahí. */
	.proyecto-urbano .header-urbano__logo img {
		width: 148px;
		max-width: 148px;
		height: auto;
	}
}

/* Por debajo de 380 px el logotipo aún manda demasiado: la bajada
   «Montenegro, Quindío» deja de leerse mucho antes de estorbar, así que se
   puede encoger sin perder nada. */
@media (max-width: 380px) {
	.proyecto-urbano .header-urbano__logo img {
		width: 128px;
		max-width: 128px;
	}
}

/* ---- El hero en móvil ---------------------------------------------------- */
/* Tiene que caber entero en la primera pantalla: titular, bajada, los dos
   botones y la cita, sin obligar a desplazar para descubrir que hay un CTA.
   Lo que sobraba no era el texto sino el aire — nueve hijos con 24 px de
   separación son 192 px de hueco, casi una cuarta parte de la pantalla de un
   teléfono. Se recorta la separación primero y los cuerpos después. */

@media (max-width: 767px) {
	/* `svh` y no `vh`: en móvil `100vh` mide la ventana con la barra del
	   navegador retraída, así que al cargar —cuando la barra está desplegada—
	   el hero es más alto que lo que se ve y el final queda por debajo del
	   borde. `svh` usa el estado desplegado, que es el que el visitante ve
	   primero. El `vh` queda de reserva para navegadores sin `svh`. */
	.proyecto-urbano .hero-urbano {
		/* El padding no se toca aquí: lo pone el control de Elementor
		   —ver `padding_mobile` en construir-pagina.py—, que es el que
		   acierta con `.e-con-inner`. Puesto también aquí se sumaba al
		   suyo y el hueco bajo el header salía doble. */
		min-height: 100vh;
		min-height: 100svh;
	}

	/* La flecha entra en el flujo. En escritorio va en `position: absolute`
	   anclada al pie, y ahí tiene sentido: el hero es alto y el bloque de
	   texto se centra sin que la flecha lo empuje. En una pantalla de
	   teléfono ese mismo truco descuadra el centrado — el texto se reparte
	   como si el tercio inferior estuviera libre, y todo el aire sobrante
	   se acumula bajo el header: eran 100 px arriba contra 28 al pie.
	   Puesta en el flujo, el centrado la cuenta y el reparto sale solo. */
	.proyecto-urbano .elementor-widget-html:has(.scroll-abajo) {
		position: static;
		bottom: auto;
	}

	/* El gap va en `.e-con-inner`, no en el contenedor: con `content_width`
	   en «boxed» Elementor mete ese envoltorio en medio y es él quien
	   reparte a los hijos. Puesto fuera no separa nada y los 24 px por
	   defecto siguen mandando: nueve huecos, 216 px, una cuarta parte de la
	   pantalla en hueco. */
	.proyecto-urbano .hero-urbano,
	.proyecto-urbano .hero-urbano > .e-con-inner {
		gap: 8px;
	}


	.proyecto-urbano .hero-urbano .elementor-element {
		margin-bottom: 0;
	}

	/* El filete trae su propio aire arriba y abajo, que aquí se suma al gap. */
	.proyecto-urbano .hero-urbano .elementor-widget-divider {
		--divider-pattern-height: 1px;
	}

	.proyecto-urbano .hero-urbano .elementor-divider {
		padding-block: 6px;
	}

	/* Los espaciadores de escritorio se anulan: su aire ya lo da el gap. */
	.proyecto-urbano .hero-aire {
		display: none;
	}

	.proyecto-urbano .hero-etiqueta .elementor-heading-title {
		font-size: 0.8rem;
		letter-spacing: 0.12em;
		line-height: 1.35;
	}

	/* El cuerpo del titular lo fija el propio widget —ver `tam_movil` en
	   construir-pagina.py—, que es la unica forma de ganarle al selector de
	   cuatro clases que compila Elementor. Aqui solo el interlineado, que
	   Elementor no emite y por tanto nadie disputa. */
	.proyecto-urbano .hero-titulo .elementor-heading-title {
		line-height: 1.05;
	}

	/* El cuerpo va en el contenedor del widget y no en un `p`: el editor de
	   texto de Elementor deja el contenido suelto ahí cuando es una sola
	   línea sin formato, así que no hay párrafo al que apuntar. */
	.proyecto-urbano .hero-bajada .elementor-widget-container {
		max-width: none;
		font-size: 18px;
		line-height: 1.3;
	}

	/* El corte entre las dos oraciones es para escritorio, donde ahorra una
	   línea larguísima. En móvil el ancho ya parte la frase varias veces y
	   este salto solo añade una línea más de las que caben. */
	.proyecto-urbano .hero-bajada br {
		display: none;
	}

	/* Los dos botones no caben en fila a 375 px sin partir su texto. Se
	   apilan, centrados y estrechos, para que se lean como un par. */
	.proyecto-urbano .hero-botones {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.proyecto-urbano .hero-botones .elementor-button {
		padding: 12px 28px;
		font-size: 1rem;
	}

	.proyecto-urbano .hero-cita .elementor-heading-title {
		font-size: 0.95rem;
		line-height: 1.4;
	}

	/* La flecha se queda —es lo que dice que hay más abajo— pero deja de
	   reservar el alto que tenía en escritorio. */
	.proyecto-urbano .scroll-abajo {
		margin-top: 2px;
	}
}

/* Pantallas cortas de verdad (iPhone SE y similares): el titular es lo único
   que todavía puede ceder sin que el hero deje de decir lo que dice. */
@media (max-width: 767px) and (max-height: 700px) {
	/* Cuatro clases para empatar con Elementor; urbano.css se carga despues,
	   asi que con el empate gana esta. */
	.proyecto-urbano .elementor-element.hero-titulo .elementor-heading-title {
		font-size: 26px;
	}

	.proyecto-urbano .hero-cita {
		display: none;
	}
}

/* ---- Botón de las fichas técnicas ---------------------------------------- */
/* Vive en el manifiesto, bajo el bloque de las 34 fincas, y va sin fondo
   sobre el marfil: el filete es lo que le da cuerpo. Se localiza por el
   enlace al PDF y no por una clase, porque es el único botón de la página
   que apunta a un archivo. */

.proyecto-urbano .elementor-button[href$=".pdf"] {
	border: 1px solid var(--cobre-tierra);
}

/* ---- El plano, de borde a borde ------------------------------------------ */
/* La foto es apaisada 16:9 y lleva rotuladas las 34 fincas: encajonada en
   media columna los rótulos no se leían. Ocupa el ancho de la ventana, que
   es lo que el cliente pidió. */

.proyecto-urbano .plano-ancho img {
	width: 100%;
	height: auto;
	display: block;
}

/* Bajo el plano, el texto y la tabla van a dos columnas en escritorio. En
   móvil se apilan: la tabla es una imagen de texto y a media columna de
   teléfono las cifras dejarían de leerse. */
@media (max-width: 767px) {
	.proyecto-urbano .fincas-pie {
		flex-direction: column;
	}

	.proyecto-urbano .fincas-pie > .e-con {
		width: 100%;
		padding-right: 0;
	}
}

/* ---- Encabezado de las fincas, a dos columnas ---------------------------- */
/* El titular a la izquierda y el rango con los botones a la derecha. En una
   sola columna todo quedaba arrimado al margen y la mitad derecha vacía. */

@media (max-width: 1024px) {
	.proyecto-urbano .fincas-encabezado {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6rem;
	}

	/* Los porcentajes de Elementor son para escritorio: al apilarse, cada
	   bloque necesita el ancho entero o se queda a media caja. */
	.proyecto-urbano .fincas-encabezado > .e-con {
		width: 100%;
		padding-right: 0;
	}
}
/* ---- Galería ------------------------------------------------------------- */
/* La monta el widget de galería de Elementor, para que el cliente pueda
   añadir y reordenar fotos desde el editor. Aquí solo se le da el aspecto:
   el widget trae una cuadrícula de tablas antigua que no se parece al resto
   de la página. */

.proyecto-urbano .galeria-elementor .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0 !important;
}

/* Cada foto va en un `.gallery-item` al que WordPress le pone anchos en
   porcentaje según el número de columnas —`max-width: 33.33%` con tres—.
   Dentro de una celda de cuadrícula eso no reparte nada: encoge la foto a un
   tercio del hueco que ya tenía. Se anulan los cuatro, incluido el
   `max-width`, que es el que de verdad mandaba. */
.proyecto-urbano .galeria-elementor .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	padding: 0 !important;
}

.proyecto-urbano .galeria-elementor .gallery-icon,
.proyecto-urbano .galeria-elementor .gallery-icon a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 0 2rem 0 2rem;
	line-height: 0;
	cursor: zoom-in;
}

.proyecto-urbano .galeria-elementor .gallery-item img {
	width: 100%;
	height: 100%;
	/* Sin esto la última fila se descuadra en cuanto una foto tiene otra
	   proporción: la cuadrícula deja de leerse como cuadrícula. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border: 0 !important;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.proyecto-urbano .galeria-elementor .gallery-icon a:hover img,
.proyecto-urbano .galeria-elementor .gallery-icon a:focus-visible img {
	transform: scale(1.06);
}

/* El velo verde al pasar por encima: dice que la imagen se abre y de paso
   unifica fotos de temperaturas muy distintas. */
.proyecto-urbano .galeria-elementor .gallery-icon a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 35, 22, 0);
	transition: background 0.3s ease;
	pointer-events: none;
}

.proyecto-urbano .galeria-elementor .gallery-icon a:hover::after,
.proyecto-urbano .galeria-elementor .gallery-icon a:focus-visible::after {
	background: rgba(29, 35, 22, 0.18);
}

.proyecto-urbano .galeria-elementor .gallery-icon a:focus-visible {
	outline: 3px solid var(--cobre-tierra);
	outline-offset: 3px;
}

/* El widget reserva sitio para un pie de foto que no se usa. */
.proyecto-urbano .galeria-elementor .gallery-caption {
	display: none;
}

/* Doce en la cuadrícula; el resto solo dentro del lightbox, que las recoge
   del DOM sin mirar si están visibles.

   Es el punto a tocar si algún día deben verse todas: quitando esta regla,
   la cuadrícula muestra tantas como tenga la galería. */
.proyecto-urbano .galeria-elementor .gallery-item:nth-child(n+13) {
	display: none;
}

.proyecto-urbano .galeria-pie {
	margin: 1.4rem 0 0;
	max-width: none;
	text-align: center;
	font-family: var(--fuente-cuerpo);
	font-size: var(--escala-sm);
	color: var(--texto-suave);
}

/* Dos columnas en tableta y en móvil. Con tres, cada foto baja de 110 px de
   ancho y deja de distinguirse qué se está mirando. */
@media (max-width: 900px) {
	.proyecto-urbano .galeria-elementor .gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.proyecto-urbano .galeria-elementor .gallery-item img {
		transition: none;
	}

	.proyecto-urbano .galeria-elementor .gallery-icon a:hover img {
		transform: none;
	}
}