/* ==========================================================================
   Módulo Torres — Diaspora BV
   --------------------------------------------------------------------------
   DOS DECISIONES DE DISEÑO QUE IMPORTAN:

   1. TODO está scopeado bajo .torres-seccion / .torre-detalle / .torre-lightbox.
      Nada de selectores globales. Este CSS entra en un sitio con Elementor y
      un tema que ya tiene sus reglas: si escribo `ul { }` o `h2 { }` a pelo,
      rompo el sitio del cliente. Además reseteo dentro de mi scope lo que el
      tema pudo haber ensuciado (list-style, margins, colores de enlace).

   2. NO hay `prefers-color-scheme: dark` automático. Si el tema del banco es
      solo claro, activar dark mode por cuenta propia produce texto invisible.
      Para modo oscuro: añade la clase .torres-tema-oscuro al contenedor.

   PARA APLICAR LA MARCA: cambia únicamente los 3 primeros valores de :root.

   TRAMPA DE ESPECIFICIDAD - LEER ANTES DE TOCAR ESPACIADOS
   El reset de abajo usa `.torres-seccion ul` (0,1,1), que le GANA a cualquier
   regla de una sola clase (0,1,0). Como `.torres-grid`, `.torre-specs`,
   `.torre-lista` y `.torre-amenidades` son todos listas, cualquier `margin` o
   `padding` que les pongas con un selector de clase suelto NO SE APLICA - y
   falla en silencio, sin error en consola.
   Para darles espaciado hay que anteponer el ancestro, por ejemplo
   `.torres-seccion .torre-specs`, que sube a 0,2,0 y gana.
   El reset se mantiene fuerte a propósito: tiene que ganarle también a las
   reglas del tema del sitio, que suelen ser del tipo `.elementor ul`.
   ========================================================================== */

:root {
	/* ---- MARCA — Banco Vimenca brand kit v1.0.0 ----------------------
	   Valores tomados de banco-vimenca-brand.css, no estimados a ojo.
	   Se pueden cambiar desde Ajustes → Torres Diaspora sin tocar este
	   archivo (se inyectan como <style> inline).                        */
	--torre-accent: #307fe2;        /* --bv-color-primary   */
	--torre-accent-hover: #003da5;  /* --bv-color-secondary */
	--torre-accent-soft: #e6f0fb;   /* --bv-blue-soft       */
	--torre-titulo: #003da5;        /* el brand kit fija h1..h6 en el azul
	                                   institucional secundario          */

	/* ---- Neutros del brand kit --------------------------------------- */
	--torre-ink: #333333;      /* --bv-gray-900 */
	--torre-ink-2: #5b5b5b;    /* --bv-gray-700, texto de párrafo */
	--torre-muted: #7a7e8f;    /* --bv-gray-600, texto secundario */
	--torre-line: #e7e7e7;     /* --bv-gray-200, separadores suaves */
	--torre-surface: #ffffff;
	--torre-surface-2: #f5f7fa; /* --bv-gray-50 */

	/* ---- Tipografía --------------------------------------------------
	   El brand kit documenta «Avenir Next LT Pro», pero el sitio carga de
	   hecho AvenirLTStd en TRES familias separadas (Book / Roman / Black).
	   Declarar el nombre del kit hacía caer el fallback a Roboto.

	   Al ser familias separadas y no pesos de una misma familia, la negrita
	   se obtiene CAMBIANDO DE FAMILIA (--torre-font-titulo), no subiendo el
	   font-weight: 700 sobre la Book produce un falso negrita sintético.

	   Ambas se configuran en Ajustes → Torres Diaspora.                  */
	--torre-font: 'AvenirLTStd-Book', 'AvenirLTStd-Roman', 'Avenir Next LT Pro',
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--torre-font-titulo: 'AvenirLTStd-Black', 'AvenirLTStd-Roman', 'AvenirLTStd-Book',
		'Avenir Next LT Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--torre-peso-bold: 700;

	/* ---- Sistema ----------------------------------------------------- */
	--torre-radius: 16px;      /* --bv-radius-card  */
	--torre-radius-sm: 8px;    /* --bv-radius-input */
	--torre-radius-pill: 9999px;
	--torre-gap: clamp(1rem, 2.5vw, 1.75rem);
	--torre-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 8px 24px rgba(16, 24, 32, .06);
	--torre-shadow-hover: 0 2px 4px rgba(16, 24, 32, .08), 0 16px 40px rgba(16, 24, 32, .12);
	--torre-ease: cubic-bezier(.22, .61, .36, 1);
}

.torres-tema-oscuro {
	--torre-ink: #f2f5f7;
	--torre-ink-2: #cbd3da;
	--torre-muted: #96a1ab;
	--torre-line: #2a3238;
	--torre-surface: #171c20;
	--torre-surface-2: #1f252a;
	--torre-accent-soft: #1e1840;
	--torre-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
	--torre-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   Escalas configurables (Ajustes → Torres Diaspora)

   El tamaño NO se aplica con un zoom global: escala el ancho máximo de la
   tarjeta, la proporción de la imagen, la tipografía y el espaciado como un
   conjunto coherente. Un `transform: scale()` habría desdibujado el texto y
   roto los espaciados relativos.
   ========================================================================== */

.torres-seccion,
.torre-detalle {
	/* Defaults = mediano. Los data-attributes de abajo los sobrescriben. */
	--torre-card-max: 380px;
	--torre-card-ratio: 16 / 10;
	--torre-card-pad: 1.1rem 1.15rem 1.25rem;
	--torre-card-titulo: 1.12rem;
	--torre-card-precio: 1.24rem;
	--torre-card-spec: .88rem;
	--torre-peso-titulo: 600;
}

[data-torres-tamano="compacto"] {
	--torre-card-max: 296px;
	--torre-card-ratio: 16 / 10;
	--torre-card-pad: .85rem .95rem 1rem;
	--torre-card-titulo: .98rem;
	--torre-card-precio: 1.06rem;
	--torre-card-spec: .8rem;
}

[data-torres-tamano="mediano"] {
	--torre-card-max: 380px;
	--torre-card-ratio: 16 / 10;
	--torre-card-pad: 1.1rem 1.15rem 1.25rem;
	--torre-card-titulo: 1.12rem;
	--torre-card-precio: 1.24rem;
	--torre-card-spec: .88rem;
}

[data-torres-tamano="grande"] {
	--torre-card-max: 520px;
	--torre-card-ratio: 3 / 2;
	--torre-card-pad: 1.35rem 1.45rem 1.55rem;
	--torre-card-titulo: 1.35rem;
	--torre-card-precio: 1.5rem;
	--torre-card-spec: .95rem;
}

[data-torres-esquinas="rectas"] {
	--torre-radius: 2px;
	--torre-radius-sm: 2px;
}

/* «Suaves» = los radios del brand kit: tarjeta 16px, input 8px. */
[data-torres-esquinas="suaves"] {
	--torre-radius: 16px;
	--torre-radius-sm: 8px;
}

[data-torres-esquinas="redondeadas"] {
	--torre-radius: 26px;
	--torre-radius-sm: 14px;
}

/* Valores que las fuentes tienen de verdad. 550 y 650 no existen en ninguna
   familia: el navegador los redondeaba o los sintetizaba. */
[data-torres-peso="normal"] { --torre-peso-titulo: 400; }
[data-torres-peso="medio"]  { --torre-peso-titulo: 600; }
[data-torres-peso="fuerte"] { --torre-peso-titulo: 700; }

/* ==========================================================================
   Reset defensivo, solo dentro del módulo
   ========================================================================== */

.torres-seccion,
.torre-detalle,
.torre-lightbox {
	color: var(--torre-ink);
	font-family: var(--torre-font);
	-webkit-font-smoothing: antialiased;
}

.torres-seccion *,
.torre-detalle *,
.torre-lightbox * {
	box-sizing: border-box;
}

.torres-seccion ul,
.torre-detalle ul,
.torres-seccion ol,
.torre-detalle ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.torres-seccion img,
.torre-detalle img,
.torre-lightbox img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* El brand kit fija h1..h6 en --bv-color-secondary. La familia sale de
   --torre-font-titulo porque la negrita de AvenirLTStd es otra familia. */
.torres-seccion h2,
.torres-seccion h3,
.torre-detalle h1,
.torre-detalle h2,
.torre-panel__titulo {
	margin: 0;
	color: var(--torre-titulo);
	font-family: var(--torre-font-titulo);
	line-height: 1.2;
	text-wrap: balance;
}

.torres-seccion p,
.torre-detalle p,
.torre-detalle dl,
.torre-detalle dd,
.torre-detalle dt {
	margin: 0;
}

.torre-icon {
	flex: 0 0 auto;
}

/* ==========================================================================
   Sección + grid
   ========================================================================== */

.torres-seccion {
	--torres-cols: 2;
	container-type: inline-size;
}

.torres-seccion[data-torres-columnas="1"] { --torres-cols: 1; }
.torres-seccion[data-torres-columnas="3"] { --torres-cols: 3; }
.torres-seccion[data-torres-columnas="4"] { --torres-cols: 4; }

/* El encabezado comparte el ancho del grid para que su borde izquierdo quede
   alineado con la primera tarjeta, ahora que el grid se centra. */
.torres-seccion__head {
	margin-bottom: calc(var(--torre-gap) * 1.25);
	margin-inline: auto;
	max-width: calc(
		var(--torre-card-max) * var(--torres-cols) +
		var(--torre-gap) * (var(--torres-cols) - 1)
	);
}

.torres-seccion__titulo {
	font-size: clamp(1.6rem, 3.4vw, 2.35rem);
	font-weight: var(--torre-peso-bold);
	letter-spacing: -.02em;
}

/* Alineación del encabezado (Ajustes → Torres Diaspora). Centrado por
   defecto: el resto de las secciones de la portada van centradas. */
[data-torres-alineacion="centro"] .torres-seccion__head {
	text-align: center;
}

[data-torres-alineacion="centro"] .torres-seccion__subtitulo {
	margin-inline: auto;
}

.torres-seccion__subtitulo {
	margin-top: .6rem;
	max-width: 62ch;
	color: var(--torre-muted);
	font-size: 1.02rem;
	line-height: 1.6;
}

/* El ancho máximo del grid = (ancho máx. de tarjeta × columnas) + huecos.
   Así el ajuste «Compacto» produce tarjetas realmente pequeñas incluso a 2
   columnas dentro de un contenedor ancho, en vez de estirarlas a la mitad del
   ancho disponible. Si sobra espacio, el grupo queda centrado. */
.torres-seccion .torres-grid {
	display: grid;
	gap: var(--torre-gap);
	grid-template-columns: repeat(var(--torres-cols), minmax(0, 1fr));
	max-width: calc(
		var(--torre-card-max) * var(--torres-cols) +
		var(--torre-gap) * (var(--torres-cols) - 1)
	);
	/* OJO: el reset `.torres-seccion ul { margin: 0 }` pesa 0,1,1 y le ganaba a
	   `.torres-grid` (0,1,0), matando este auto y dejando el grid sin centrar
	   mientras el encabezado sí se centraba. De ahí el ancestro: sube a 0,2,0. */
	margin-inline: auto;
}

/* Se colapsa por el ancho del CONTENEDOR, no de la ventana. Esto importa
   porque en Elementor la sección puede vivir dentro de una columna estrecha. */
/* Se cambia --torres-cols y no grid-template-columns directamente: así el
   max-width calculado arriba también se recalcula a una sola tarjeta. */
/* OJO con la especificidad: `.torres-seccion[data-torres-columnas="3"]` pesa
   0,2,0 y las container queries NO aportan especificidad. Hay que igualarla
   con el selector de atributo para que gane por orden de aparición. */
@container (max-width: 720px) {
	.torres-seccion[data-torres-columnas] { --torres-cols: 1; }
}

/* Fallback para navegadores sin container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 720px) {
		.torres-seccion[data-torres-columnas] { --torres-cols: 1; }
	}
}

/* ==========================================================================
   Card
   ========================================================================== */

.torre-card {
	height: 100%;
	background: var(--torre-surface);
	border: 1px solid var(--torre-line);
	border-radius: var(--torre-radius);
	overflow: hidden;
	box-shadow: var(--torre-shadow);
	transition: transform .35s var(--torre-ease), box-shadow .35s var(--torre-ease),
		border-color .35s var(--torre-ease);
}

.torre-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--torre-shadow-hover);
	border-color: var(--torre-accent);
}

.torre-card__link,
.torre-card__link:hover,
.torre-card__link:focus {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.torre-card__link:focus-visible {
	outline: 3px solid var(--torre-accent);
	outline-offset: 3px;
}

.torre-card__media {
	position: relative;
	aspect-ratio: var(--torre-card-ratio);
	overflow: hidden;
	background: var(--torre-surface-2);
}

.torre-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--torre-ease);
}

.torre-card:hover .torre-card__img { transform: scale(1.05); }

/* Scrim arriba y abajo. Sin esto la legibilidad del pill de ubicación y del
   badge «Destacada» depende de que la foto sea oscura justo donde caen: sobre
   un cielo claro o una pared blanca se pierden. */
.torre-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(10, 14, 20, .34) 0%, rgba(10, 14, 20, 0) 26%),
		linear-gradient(to top, rgba(10, 14, 20, .30) 0%, rgba(10, 14, 20, 0) 28%);
}

.torre-card__pill {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .4em .7em;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	backdrop-filter: blur(6px);
}

.torre-card__pill--loc {
	inset-inline-start: .75rem;
	inset-block-start: .75rem;
	background: rgba(16, 24, 32, .62);
	color: #fff;
}

.torre-card__pill--dest {
	inset-inline-end: .75rem;
	inset-block-end: .75rem;
	background: var(--torre-accent);
	color: var(--torre-btn-texto, #fff);
	text-transform: uppercase;
	font-size: .7rem;
	letter-spacing: .06em;
}

.torre-card__body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: var(--torre-card-pad);
	flex: 1 1 auto;
}

.torre-card__titulo {
	font-size: var(--torre-card-titulo);
	font-weight: var(--torre-peso-titulo);
	letter-spacing: -.01em;
	/* Un nombre largo no debe descuadrar la altura de la card frente a las
	   demás del grid: se corta a dos líneas con elipsis. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.torre-card__precio {
	color: var(--torre-accent);
	font-size: var(--torre-card-precio);
	font-weight: 700;
	letter-spacing: -.015em;
}

/* «Ver detalles» es un BOTÓN, no un enlace de texto: mismo componente que los
   botones del sitio (píldora, borde 2px, relleno azul, hover que invierte).
   Va dentro del <a> que envuelve la tarjeta completa, así que es un <span> con
   aspecto de botón — la zona clicable sigue siendo toda la tarjeta. */
.torre-card__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .62em 1.85em;
	border: 2px solid var(--torre-accent);
	border-radius: var(--torre-radius-pill);
	background: var(--torre-accent);
	color: var(--torre-btn-texto, #fff);
	font-size: var(--torre-card-spec);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Sin scale en el hover: la tarjeta ya se eleva y la foto ya hace zoom. Un
   tercer movimiento sobre el botón resultaba en animaciones compitiendo. */
.torre-card:hover .torre-card__cta,
.torre-card__link:focus-visible .torre-card__cta {
	background: var(--torre-surface);
	color: var(--torre-accent);
}

.torre-card--sin-enlace { opacity: .95; }

.torre-card__aviso {
	margin-top: auto;
	padding: .5rem .65rem;
	border-radius: var(--torre-radius-sm);
	background: #fff4e5;
	color: #7a4a00;
	font-size: .82rem;
	line-height: 1.4;
}

.torre-card__aviso code {
	font-size: .95em;
	background: rgba(0, 0, 0, .07);
	padding: .05em .3em;
	border-radius: 4px;
}

/* ==========================================================================
   Fila de specs (compartida entre card y detalle)
   ========================================================================== */

/* El aire de ARRIBA de la línea lo pone el `gap` del contenedor flex de la
   tarjeta; el de ABAJO es este padding-top. Estaba en .6rem y la línea quedaba
   pegada a los iconos: los separadores necesitan más aire del lado del
   contenido que agrupan que del que dejan atrás. */
/* Sin línea separadora: la fila de specs se apoya solo en el espacio en blanco.
   El ancestro (0,2,0) es obligatorio para ganarle al reset `.torres-seccion ul`
   (0,1,1); sin él estos márgenes tampoco se aplicarían y todo quedaría pegado. */
.torres-seccion .torre-specs,
.torre-detalle .torre-specs {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 1.1rem;
	margin-top: .5rem;
	margin-bottom: .7rem;
	color: var(--torre-ink-2);
}

.torre-specs__item {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: var(--torre-card-spec);
	line-height: 1.3;
	white-space: nowrap;
}

.torre-specs__item .torre-icon { color: var(--torre-muted); }
.torre-specs__valor { font-weight: 650; }
.torre-specs__label { color: var(--torre-muted); }

/* La variante del detalle no lleva línea ni espaciado propio. Sube a 0,2,0
   igual que la regla base, o heredaría el padding-top de arriba. */
.torre-detalle .torre-specs--grande {
	gap: .75rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.torre-specs--grande .torre-specs__item {
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	padding: .7rem .95rem;
	border: 1px solid var(--torre-line);
	border-radius: var(--torre-radius-sm);
	background: var(--torre-surface-2);
	min-width: 7.5rem;
}

.torre-specs--grande .torre-specs__valor { font-size: 1.05rem; }

.torre-specs--grande .torre-specs__label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ==========================================================================
   Contenedor de la página de detalle

   El tema del sitio puede o no envolver el contenido en un container. Esta
   capa garantiza un ancho de lectura y padding propios sin depender de eso.
   Si el tema YA aporta el container, pon --torre-page-max: none.
   ========================================================================== */

.torre-page {
	--torre-page-max: 1180px;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.torre-page__inner {
	max-width: var(--torre-page-max);
	margin-inline: auto;
}

.torre-page__extra {
	margin-top: calc(var(--torre-gap) * 1.5);
	padding-top: calc(var(--torre-gap) * 1.25);
	border-top: 1px solid var(--torre-line);
	color: var(--torre-ink-2);
	line-height: 1.7;
}

/* ==========================================================================
   Galería del detalle
   ========================================================================== */

/* Hero arriba, tira de miniaturas debajo.
   NO se usa una columna lateral de miniaturas: acoplar la altura de la tira a
   la fila del hero se rompe en cuanto cambia la cantidad de fotos (con 3 se
   desborda, con 1 deja hueco). Así funciona con 1, 4 o 12 fotos igual. */
.torre-galeria {
	display: grid;
	gap: .5rem;
	margin-bottom: calc(var(--torre-gap) * 1.5);
}

.torre-galeria__principal { margin: 0; min-width: 0; }

.torre-galeria__trigger {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: zoom-in;
	background: var(--torre-surface-2);
	border-radius: var(--torre-radius-sm);
	overflow: hidden;
	appearance: none;
}

.torre-galeria__trigger:focus-visible {
	outline: 3px solid var(--torre-accent);
	outline-offset: 3px;
}

.torre-galeria__principal .torre-galeria__trigger { aspect-ratio: 16 / 9; }

.torre-galeria__trigger img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--torre-ease), opacity .3s var(--torre-ease);
}

.torre-galeria__trigger:hover img { transform: scale(1.03); }

.torre-galeria__contador {
	position: absolute;
	inset-inline-start: .8rem;
	inset-block-end: .8rem;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .45em .75em;
	border-radius: 999px;
	background: rgba(16, 24, 32, .7);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
}

.torre-galeria__tiras {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	min-width: 0;
}

.torre-galeria__mini { aspect-ratio: 16 / 10; }

/* En móvil la tira pasa a scroll horizontal con snap: 4 miniaturas apiladas
   en una pantalla de 380px empujarían el contenido fuera del pliegue. */
@media (max-width: 600px) {
	.torre-galeria__tiras {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 45%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: .25rem;
	}

	.torre-galeria__mini { scroll-snap-align: start; }
}

/* ==========================================================================
   Layout del detalle
   ========================================================================== */

.torre-detalle__grid {
	display: grid;
	gap: calc(var(--torre-gap) * 1.5);
	grid-template-columns: minmax(0, 1fr) 22rem;
	align-items: start;
}

/* Panel desactivado en ajustes: el contenido ocupa todo el ancho en vez de
   dejar una columna vacía de 22rem. */
.torre-detalle--sin-panel .torre-detalle__grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 980px) {
	.torre-detalle__grid { grid-template-columns: 1fr; }
}

.torre-detalle__main {
	display: flex;
	flex-direction: column;
	gap: calc(var(--torre-gap) * 1.35);
	min-width: 0;
}

.torre-detalle__head {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.torre-detalle__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: .85rem;
	color: var(--torre-muted);
}

.torre-chip {
	display: inline-flex;
	padding: .32em .7em;
	border-radius: 999px;
	background: var(--torre-accent-soft);
	color: var(--torre-accent-hover);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.torre-detalle__precio {
	color: var(--torre-accent);
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}

.torre-detalle__titulo {
	font-size: clamp(1.75rem, 4.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.025em;
}

.torre-detalle__tagline {
	max-width: 58ch;
	color: var(--torre-ink-2);
	font-size: 1.05rem;
	line-height: 1.6;
}

.torre-detalle__ubicacion {
	display: flex;
	align-items: center;
	gap: .45em;
	padding: .7rem .9rem;
	border-radius: var(--torre-radius-sm);
	background: var(--torre-surface-2);
	color: var(--torre-ink-2);
	font-size: .93rem;
}

.torre-detalle__ubicacion .torre-icon { color: var(--torre-accent); }

/* ---- bloques de contenido ------------------------------------------- */

.torre-bloque {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding-top: calc(var(--torre-gap) * 1.1);
	border-top: 1px solid var(--torre-line);
}

.torre-bloque__titulo {
	font-size: 1.28rem;
	font-weight: var(--torre-peso-titulo);
	letter-spacing: -.015em;
}

.torre-bloque__texto {
	max-width: 68ch;
	color: var(--torre-ink-2);
	font-size: 1rem;
	line-height: 1.7;
}

.torre-lista {
	display: grid;
	gap: .55rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.torre-lista__item {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	color: var(--torre-ink-2);
	font-size: .97rem;
	line-height: 1.5;
}

.torre-icon--check {
	margin-top: .18em;
	color: var(--torre-accent);
	stroke-width: 2.4;
}

.torre-amenidades {
	display: grid;
	gap: .6rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.torre-amenidades__item {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .75rem .9rem;
	border: 1px solid var(--torre-line);
	border-radius: var(--torre-radius-sm);
	background: var(--torre-surface);
	color: var(--torre-ink-2);
	font-size: .95rem;
	line-height: 1.35;
	transition: border-color .3s var(--torre-ease), background .3s var(--torre-ease);
}

.torre-amenidades__item:hover {
	border-color: var(--torre-accent);
	background: var(--torre-accent-soft);
}

.torre-amenidades__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--torre-accent-soft);
	color: var(--torre-accent-hover);
}

/* ---- bloque de cierre ------------------------------------------------
   Mensaje de disponibilidad y financiamiento al final de la página. Usa el
   patrón .bv-card--info del brand kit: fondo azul suave con barra de acento.
   La barra va con border-inline-start (no border-left) para que se coloque
   sola del lado correcto si el sitio se sirve alguna vez en RTL. */

.torre-cierre {
	margin-top: calc(var(--torre-gap) * .5);
	padding: 1.15rem 1.4rem;
	border-radius: var(--torre-radius-sm);
	border-inline-start: 4px solid var(--torre-accent);
	background: var(--torre-accent-soft);
	color: var(--torre-accent-hover);
	font-size: 1.04rem;
	font-weight: 500;
	line-height: 1.6;
	text-wrap: pretty;
}

/* ---- panel lateral --------------------------------------------------- */

.torre-detalle__side {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--torre-gap);
}

/* Logo del aliado. Mismo lenguaje visual que el panel para que lea como parte
   de la columna y no como una imagen suelta. Las variantes de fondo blanco del
   logo se funden con esta superficie. */
.torre-aliado {
	display: grid;
	place-items: center;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--torre-line);
	border-radius: var(--torre-radius);
	background: var(--torre-surface);
	box-shadow: var(--torre-shadow);
}

.torre-aliado img {
	width: 100%;
	max-width: 15rem;
	height: auto;
}

.torre-aliado a {
	display: block;
	line-height: 0;
	transition: opacity .2s var(--torre-ease);
}

.torre-aliado a:hover { opacity: .78; }

.torre-aliado a:focus-visible {
	outline: 3px solid var(--torre-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 980px) {
	.torre-detalle__side { position: static; }
}

.torre-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.35rem;
	border: 1px solid var(--torre-line);
	border-radius: var(--torre-radius);
	background: var(--torre-surface);
	box-shadow: var(--torre-shadow);
}

.torre-panel__titulo {
	font-size: 1.12rem;
	font-weight: var(--torre-peso-titulo);
	letter-spacing: -.01em;
}

.torre-panel__datos {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.torre-panel__fila {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--torre-line);
	font-size: .93rem;
}

.torre-panel__fila:last-child { border-bottom: 0; }
.torre-panel__fila dt { color: var(--torre-muted); }

.torre-panel__fila dd {
	font-weight: 650;
	text-align: end;
}

.torre-panel__nota {
	padding: .6rem .75rem;
	border-radius: var(--torre-radius-sm);
	background: var(--torre-accent-soft);
	color: var(--torre-accent-hover);
	font-size: .86rem;
	line-height: 1.45;
}

/* Botón del brand kit: forma píldora, borde de 2px y hover que INVIERTE
   los colores con un leve scale. No es un hover de oscurecer: así está
   definido el componente Button del sitio. */
.torre-btn {
	display: block;
	padding: .8rem 2rem;
	border: 2px solid var(--torre-accent);
	border-radius: var(--torre-radius-pill);
	background: var(--torre-accent);
	color: var(--torre-btn-texto, #fff) !important;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease,
		transform .15s ease;
}

.torre-btn:hover {
	background: var(--torre-surface);
	border-color: var(--torre-accent);
	color: var(--torre-accent) !important;
	transform: scale(1.03);
}

.torre-btn:focus-visible {
	outline: 3px solid var(--torre-accent);
	outline-offset: 3px;
}

.torre-panel__pie {
	color: var(--torre-muted);
	font-size: .82rem;
	line-height: 1.45;
	text-align: center;
}

/* ---- aviso de error, solo visible para editores ---------------------- */

.torre-error {
	padding: 1rem 1.15rem;
	border: 1px solid #f0c36d;
	border-radius: var(--torre-radius-sm);
	background: #fff8e8;
	color: #6b4700;
	font-size: .95rem;
	line-height: 1.55;
}

.torre-error code {
	background: rgba(0, 0, 0, .07);
	padding: .1em .35em;
	border-radius: 4px;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.torre-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	/* minmax(0, 1fr), NO 1fr. El mínimo implícito de un track `1fr` es `auto`,
	   así que el track crece hasta el tamaño natural del contenido y una foto
	   vertical de 1800px se desborda del viewport. */
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: rgba(10, 14, 18, .94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s var(--torre-ease), visibility .28s var(--torre-ease);
}

.torre-lightbox[data-abierto="true"] {
	opacity: 1;
	visibility: visible;
}

.torre-lightbox__barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	color: rgba(255, 255, 255, .85);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

/* Flex y no grid: en flex el `max-height: 100%` del hijo se resuelve contra la
   altura DEFINIDA del contenedor (el track minmax(0,1fr) de arriba). Con grid
   se resolvía contra un grid area auto-dimensionado por la propia imagen. */
.torre-lightbox__escena {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 clamp(.5rem, 4vw, 4.5rem);
	min-height: 0;
	overflow: hidden;
}

.torre-lightbox__escena img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
}

.torre-lightbox__pie {
	padding: 1rem 1.5rem 1.4rem;
	color: rgba(255, 255, 255, .72);
	font-size: .88rem;
	line-height: 1.5;
	text-align: center;
	text-wrap: pretty;
}

.torre-lightbox__btn {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	transition: background .22s var(--torre-ease), border-color .22s var(--torre-ease);
}

.torre-lightbox__btn:hover {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .45);
}

.torre-lightbox__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.torre-lightbox__btn[hidden] { display: none; }

.torre-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.torre-lightbox__nav--prev { inset-inline-start: clamp(.4rem, 2vw, 1.5rem); }
.torre-lightbox__nav--next { inset-inline-end: clamp(.4rem, 2vw, 1.5rem); }

/* Bloquea el scroll del fondo mientras el lightbox está abierto. */
body.torre-lightbox-abierto { overflow: hidden; }

/* ==========================================================================
   Accesibilidad y preferencias del usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.torres-seccion *,
	.torre-detalle *,
	.torre-lightbox * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.torre-card:hover { transform: none; }
	.torre-card:hover .torre-card__img { transform: none; }
	.torre-galeria__trigger:hover img { transform: none; }
}

@media print {
	.torre-lightbox,
	.torre-detalle__side,
	.torre-galeria__contador { display: none !important; }

	.torre-card,
	.torre-panel { box-shadow: none; }
}