/* =====================================================================
   Tokens — mismo sistema de gramática visual que altezza-presentacion
   (glass cards, indicador de fase, cue-scroll, easing warm/deliberate)
   pero nombres propios, para poder swapear valores por proyecto sin
   tocar el resto del CSS. --fondo/--superficie quedan aparte porque el
   manual de marca no define un fondo de pantalla oscuro, solo blanco/
   negro puro.

   --acento: se probó pasarlo de azul de marca a la paleta cromática por
   programa (Terracota/Áreas comunes, luego Circulaciones oscuro por
   contraste — ver historial), pero a Ariel no le gustó ese rojo/vinotinto
   en la línea de progreso del cue-scroll ni en el hover del menú de
   fases — volvió a pedir el azul de marca (var(--reifer-azul), machote/
   marca-reifer.css) que había al principio. El subtítulo de cada lámina
   no usa --acento (ver --subtitulo más abajo), así que este color queda
   solo para acentos de UI (línea de progreso, hover de menú, paneles de
   apoyo), no para texto — el contraste sobre fondo claro importa menos
   ahí que en el subtítulo.

   --subtitulo: a Ariel no le gustó el acento de color en el subtítulo
   de cada lámina — lo pidió en escala de grises, sutilmente distinto
   del título (ver .fase-indicador-subtitulo más abajo). Es --texto con
   alpha en vez de un color aparte, así queda emparentado con el título
   en vez de competir con él.

   --fuente-display/--fuente-texto eran Fraunces (serif) + Inter — ahora
   son la misma familia Helvetica, por el "Sistema Tipográfico" del
   estándar gráfico interno (ESTÁNDAR GRÁFICO INTERNO - REIFER
   ARQUITECTOS.pdf, lámina 03/03): Helvetica Light para títulos
   principales y cuerpo, Bold para encabezados/categorías, Regular para
   datos técnicos — aplica también a presentaciones, no solo a láminas
   de diagramas. Sin @import de Google Fonts: Helvetica es fuente de
   sistema (macOS) con Arial como fallback métricamente compatible en
   Windows — no hay una versión web-safe con licencia para cargar. Se
   mantienen dos variables (en vez de una sola) porque el resto del CSS
   ya las usa para separar "display" de "texto" en tamaño/uso, aunque
   ahora compartan la misma familia. */
:root {
  /* Alto del pie de la portada (línea + ubicación/logo, ver .hero-portada-pie en css/hero.css). */
  --pie-alto: 56px;
  --fondo: #14181A;
  --superficie: #1D2326;
  --texto: var(--reifer-blanco);
  --texto-tenue: var(--reifer-gris);
  --acento: var(--reifer-azul);
  --subtitulo: rgba(255, 255, 255, 0.68);
  --linea: rgba(242, 240, 234, 0.35);
  --vidrio-fondo: rgba(29, 35, 38, 0.4);

  --fuente-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fuente-texto: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease-warm: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-deliberate: cubic-bezier(0.33, 0, 0.2, 1);

  /* "Franja informativa" — receta estándar para la fila de datos que va debajo de la cinta de
     diagramas (Fase 02 "grupos", Fase 05 "cifras", y cualquier fase nueva que sume una franja
     así). Un solo lugar para el margen contra el cuadrante de arriba, para que no se reinvente un
     número distinto cada vez que se agrega una. El gap entre datos NO es esta misma variable en
     los dos tipos de franja: depende de qué tan ancho es cada ítem (cifras = número suelto,
     angosto; grupos = ícono + texto, mucho más ancho), así que cada bloque lo ajusta por su lado
     para que el conjunto se siga viendo centrado y sin saltar de línea. */
  --franja-margin-top: clamp(28px, 4.5vh, 40px);
  --franja-gap: 10rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: var(--fondo);
}

img { max-width: 100%; display: block; }

/* ===== Panel de avance (?avance=1) ===== */
#avance-panel {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow-y: auto;
  padding: 4rem 2rem;
  background: rgba(20, 24, 26, 0.97);
}

#avance-panel h2 {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  font-family: var(--fuente-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.8rem;
}

#avance-panel ul { list-style: none; max-width: 720px; margin: 0 auto; }

#avance-panel li {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--texto-tenue);
}

.avance-bar { background: rgba(242, 240, 234, 0.12); border-radius: 4px; height: 6px; overflow: hidden; }
.avance-bar span { display: block; height: 100%; background: var(--acento); }

/* ===== Estructura de fases: paginado hijackeado idéntico al de altezza-presentacion — cada
   fase ocupa toda la pantalla (position:fixed) y se desliza sobre la siguiente/anterior según
   la dirección, el wheel/touch está secuestrado y el mecanismo vive en la IIFE de paginado al
   final de js/main.js (ver irAFase/manejarGesto ahí). ===== */
#fases {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

/* Sin barra de scroll visible (no hay overflow real: el "scroll" lo maneja el paginado
   hijackeado a través del wheel/touch, ver js/main.js). */
html,
body,
#fases {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#fases::-webkit-scrollbar {
  display: none;
}

.fase {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 80px) clamp(60px, 8vh, 100px);
  overflow: hidden;
  border-top: 1px solid rgba(242, 240, 234, 0.08);
}

/* Fases "claras" (storyboard de referencia: 02-05 y 07 llevan fondo claro — el "estándar gráfico
   interno" de diagramación, ver machote/paleta-programa.css — a diferencia de 00/01/06/08 que son
   oscuras). "clara": true en content.json activa esta clase (ver renderFase en js/main.js) e
   invierte los tokens de texto localmente, sin tocar el resto del CSS. --acento se mantiene (ver
   comentario en :root — Circulaciones oscuro ya contrasta bien sobre el fondo claro). --subtitulo
   usa el verde de "sistema-paisaje" (paleta-programa.css) a pedido de Ariel — revierte la decisión
   anterior documentada en el comentario de :root (escala de grises, sin acento) solo para estas
   fases claras; las oscuras (01, 06) se quedan con el subtítulo en gris como antes. */
.fase-clara {
  --texto: #1B1D1E;
  --texto-tenue: #5C564C;
  --subtitulo: var(--sistema-paisaje-oscuro);
  --linea: rgba(27, 29, 30, 0.15);
  --vidrio-fondo: rgba(255, 255, 255, 0.55);
}

/* La sombra oscura de .fase-con-fondo (para texto claro sobre foto) no aplica con texto oscuro
   sobre fondo claro — sin esto se ve como una mancha sucia debajo de las letras. */
.fase-clara.fase-con-fondo .fase-indicador-titulo,
.fase-clara.fase-con-fondo .fase-indicador-subtitulo,
.fase-clara.fase-con-fondo .fase-indicador-descripcion,
.fase-clara .cue-scroll-indice,
.fase-clara .cue-scroll-destino {
  text-shadow: none;
}

/* Láminas con foto o mapa de fondo (01, 06): el gris de marca de la etiqueta y del "/08" casi no
   contrasta sobre la imagen — ahí van en blanco con una sombra más marcada. */
.fase-con-fondo:not(.fase-clara) .cue-scroll-destino,
.fase-con-fondo:not(.fase-clara) .cue-scroll-indice small { color: rgba(255, 255, 255, 0.88); }
.fase-con-fondo:not(.fase-clara) .cue-scroll-indice,
.fase-con-fondo:not(.fase-clara) .cue-scroll-destino { text-shadow: 0 1px 3px rgba(11, 13, 14, 0.9), 0 2px 14px rgba(11, 13, 14, 0.8); }
.fase-con-fondo:not(.fase-clara) .cue-scroll-barra { background: rgba(255, 255, 255, 0.4); }

.fase-clara .cue-scroll-barra {
  background: rgba(27, 29, 30, 0.15);
}

/* ===== Paginado en pantalla completa: cada fase se fija a toda la ventana y se desliza sobre
   la siguiente/anterior — misma dinámica que altezza-presentacion (ver fijarFases/irAFase en
   js/main.js). 100dvh en vez de 100vh: en mobile la barra de direcciones tapa contenido pegado
   al fondo (como la etiqueta de abajo del cue-scroll) mientras sigue visible. ===== */
body.paginado-fijo {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.fase-paginado {
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden;
  will-change: transform;
  transition: transform 1.35s var(--ease-deliberate);
}

/* Guiño breve de vidrio que marca el corte entre fases, sin ser el movimiento principal — eso
   lo hace el deslizamiento de .fase-paginado. Mismo material que la inundación del hero. */
.fase-transicion {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  background: rgba(242, 240, 234, 0.1);
  backdrop-filter: blur(0px) saturate(140%);
  -webkit-backdrop-filter: blur(0px) saturate(140%);
  transition: opacity 0.32s ease-out, backdrop-filter 0.32s ease-out;
}

.fase-transicion.activa {
  opacity: 1;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

/* ===== Fase con fondo de imagen: la imagen se ve tal cual (sin capa oscura encima) — ver
   renderFondoFase en js/main.js. Queda en z-index 0; el indicador y el cuerpo suben a 1. ===== */
.fase-fondo-imagen {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* Fondo con enfoque ("fondoEnfoque" en content.json — Fase 01): la imagen cubre su área (a la derecha
   del panel del mapa) al tamaño MÍNIMO que la llena — sin franjas y recortando solo lo indispensable —
   y se corre para que el punto --fx/--fy (el terreno) quede lo más centrado posible. Como el panel
   toma justo el espacio que la imagen no usa, en pantallas más anchas que 16:9 la imagen se ve entera. */
.fase-con-mapa .fase-fondo-imagen { left: var(--panel-mapa); }
.fase-fondo-enfocado {
  --aw: calc(100vw - var(--panel-mapa, 0px));
  --ah: calc(100vh - var(--panel-mapa-alto, 0px));
  --w: max(var(--aw), calc(var(--ah) * 1.7778));
  --h: calc(var(--w) * 0.5625);
  background-repeat: no-repeat;
  background-size: var(--w) var(--h);
  background-position:
    clamp(calc(var(--aw) - var(--w)), calc(var(--aw) / 2 - var(--fx) * var(--w)), 0px)
    clamp(calc(var(--ah) - var(--h)), calc(var(--ah) * 0.55 - var(--fy) * var(--h)), 0px);
}

/* Oscurecido parejo muy leve — opt-in por fase ("mascara": true), solo para fotos muy claras
   donde el texto cuesta leer (ver renderFondoFase en js/main.js). No es el default. */
.fase-fondo-mascara {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(11, 13, 14, 0.20);
  /* Puramente decorativo — sin esto tapaba el toque sobre la vista activa de la Fase 06 (ver
     activarArrastreVistas en js/main.js) porque se pinta encima en el orden del DOM. */
  pointer-events: none;
}

/* ===== Vistas (Fase 06 — ver renderVistas en js/main.js): varios fondos apilados, uno visible a
   la vez con fundido lento; el subtítulo acompaña el cambio. Con foto real son <img> (no divs con
   background-image), para poder arrastrarlas — object-position con --pan-x/--pan-y en vez de
   background-position (ver activarArrastreVistas, js/main.js). ===== */
/* Entrante (.activa): se funde de 0 a 1. Saliente (.debajo): sigue entera debajo hasta que la
   entrante la cubrió y recién ahí se apaga de golpe, ya tapada — así nunca se ve lo que hay detrás
   (la portada). Ver mostrarVista en js/main.js. */
.vista-fondo { opacity: 0; }
.vista-fondo.debajo { opacity: 1; }
.vista-fondo.activa { opacity: 1; transition: opacity 0.9s var(--ease-deliberate); }
img.vista-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pan-x, 50%) var(--pan-y, 50%);
  -webkit-user-select: none;
  user-select: none;
}
/* Solo la vista visible (no las apiladas atrás, invisibles pero en el mismo lugar) se puede
   arrastrar — a pedido de Ariel, ya no abre nada aparte: en el dispositivo donde el recorte a
   pantalla completa (cover) no deja ver alguna parte de la foto, se corre con el dedo/el mouse sin
   salir de la lámina. touch-action:none le pasa el gesto entero a nuestro propio JS en vez de que
   el navegador intente hacer scroll de la página con el mismo toque. */
.vista-fondo { pointer-events: none; }
.vista-fondo.activa:not(.vista-placeholder) { pointer-events: auto; cursor: grab; touch-action: none; }
.vista-fondo.activa:not(.vista-placeholder):active { cursor: grabbing; }

/* Vista sin render todavía: fondo oscuro del sitio con la leyenda "en producción" al centro. */
.vista-placeholder {
  background: radial-gradient(ellipse at 50% 40%, var(--superficie) 0%, var(--fondo) 75%);
}
.vista-fondo.vista-placeholder {
  display: grid;
  place-items: center;
}
.vista-fondo.vista-placeholder span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.fase-indicador-subtitulo { transition: opacity 0.25s ease, transform 0.25s ease; }
.fase-indicador-subtitulo.cambiando { opacity: 0; transform: translateY(4px); }

/* Selector de vistas (Fase 06): tira horizontal de miniaturas dentro del indicador, debajo del
   subtítulo (ver renderVistasSelector en js/main.js) — a pedido de Ariel, en vez del riel vertical
   a la derecha, así las flechas de los costados quedan simétricas. Una línea fina une las
   miniaturas redondas por detrás; el nombre de la vista activa ya se lee en el subtítulo. */
.vistas-selector {
  --vista-tam: clamp(24px, 3.2vw, 30px);
  position: relative;
  z-index: 4;
  display: flex;
  /* Solo lo que ocupan las miniaturas: si no, se estira al ancho del título (el indicador es una
     columna flex) y la línea sigue de largo después de la última. */
  align-self: flex-start;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
  margin-top: clamp(10px, 1.6vh, 16px);
  /* margen para la miniatura activa agrandada (scale 1.18) y su aro, que no queden cortados */
  padding: 3px;
  margin-left: -3px;
}
/* La línea: une las miniaturas de la primera a la última, por detrás. */
.vistas-selector::before {
  content: "";
  position: absolute;
  left: calc(3px + var(--vista-tam) / 2);
  right: calc(3px + var(--vista-tam) / 2);
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
  pointer-events: none;
}
.vista-boton {
  position: relative;
  display: block;
  width: var(--vista-tam);
  height: var(--vista-tam);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.vista-boton-miniatura {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #14181A;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(11, 13, 14, 0.35);
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-deliberate), box-shadow 0.3s ease;
}
.vista-boton:hover .vista-boton-miniatura { opacity: 1; }
.vista-boton.activa .vista-boton-miniatura {
  opacity: 1;
  transform: scale(1.18);
  box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(11, 13, 14, 0.45);
}
/* Sin nombre al lado de la miniatura (a pedido de Ariel): ya se lee en el subtítulo, bajo el título. */
.vista-boton:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Flechas de carrusel (Fase 06): una a cada lado, a media altura — misma cápsula de vidrio que el
   botón del menú, a la misma distancia del borde las dos. */
.vista-flecha {
  --flecha-tam: 44px;
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--flecha-tam);
  height: var(--flecha-tam);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(11, 13, 14, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.3s ease, transform 0.3s var(--ease-warm);
}
.vista-flecha svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 4px rgba(11, 13, 14, 0.5)); }
.vista-flecha:hover { background: rgba(11, 13, 14, 0.32); transform: translateY(-50%) scale(1.08); }
.vista-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.vista-flecha-anterior { left: clamp(20px, 4vw, 48px); }
.vista-flecha-siguiente { right: clamp(20px, 4vw, 48px); }

/* Boceto de la portada ("boceto" en content.json — Fase 08, Cierre): misma posición que
   .hero-portada-imagen en css/hero.css, así la lámina de cierre retoma la portada. */
.fase-boceto {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  bottom: clamp(66px, 11vh, 120px);
  z-index: 0;
  width: min(82vw, 1400px);
  max-height: 83vh;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

/* ===== Lámina de cierre (bloque "cierre", Fase 08) — columna izquierda, como la portada: frase
   grande, pasos numerados y contacto; logo de Reifer abajo a la derecha, donde está en la
   portada. Posicionado contra la .fase (no contra el contenedor centrado de 1040px) para
   alinearse con el título. ===== */
.bloque-cierre {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 4vw, 48px);
  /* Arriba, cerca del subtítulo: debajo pasan las líneas de las montañas del boceto. */
  top: clamp(118px, 17vh, 210px);
  width: max-content;
  max-width: 60vw;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vh, 40px);
  text-align: left;
}
.cierre-frase {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--texto);
}
.cierre-pasos { list-style: none; display: flex; flex-direction: column; }
.cierre-paso {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--linea);
}
.cierre-paso:last-child { border-bottom: 1px solid var(--linea); }
.cierre-paso-numero {
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--programa-residencial-oscuro);
}
.cierre-paso-cuerpo { display: flex; flex-direction: column; gap: 3px; }
.cierre-paso-titulo {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto);
}
.cierre-paso-texto { font-size: 0.85rem; color: var(--texto-tenue); }
/* Contacto con el mismo estilo gráfico que las cifras de la Fase 00 (.hero-cifras, css/hero.css). */
.cierre-contacto { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.7vh, 26px); }
.cierre-contacto-item { display: flex; flex-direction: column; gap: 6px; }
.cierre-contacto-valor {
  font-family: var(--fuente-display);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--texto);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
a.cierre-contacto-valor:hover { border-bottom-color: currentColor; }
.cierre-contacto-etiqueta {
  font-family: var(--fuente-texto);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.cierre-contacto-divisor {
  align-self: stretch;
  height: 1px;
  background: color-mix(in srgb, var(--texto-tenue) 45%, transparent);
}

/* ===== Mapa de ubicación (Fase 01 — renderMapaFase en js/main.js): círculo grande debajo del
   título, alineado con él, sobre la imagen de ubicación a pantalla completa. Se probó también como
   panel a todo lo alto del costado izquierdo, pero competía con la imagen del mapeo de fondo — a
   pedido de Ariel vuelve al círculo, con el mismo funcionamiento: gris oscuro invertido (se funde
   con la foto), satelital al pasar el mouse (primer toque en pantallas táctiles) y clic/segundo
   toque abre el recuadro grande. Los iframes son más grandes que el círculo y van centrados, así la
   interfaz de Google queda fuera de vista y el marcador del lote cae en el centro. ===== */
.fase-con-mapa {
  --panel-mapa: 0px;
  --mapa-circulo: clamp(170px, 19vw, 280px);
}
.fase-mapa {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  top: calc(clamp(20px, 4vh, 40px) + 92px);
  width: var(--mapa-circulo);
  height: var(--mapa-circulo);
  z-index: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #14181A;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 30px rgba(11, 13, 14, 0.35);
  cursor: zoom-in;
  /* Safari: sin esto el iframe se sale del recorte redondo mientras hace la transición. */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transition: transform 0.5s var(--ease-deliberate, ease), border-color 0.5s ease;
}
.fase-mapa:hover,
.fase-mapa.activo { transform: scale(1.04); border-color: rgba(255, 255, 255, 0.7); }
/* Arrastrable (ver activarArrastreMapa en js/main.js): touch-action:none para que el dedo mueva el
   círculo en vez de hacer scroll; mientras se arrastra, sin transición (sigue al dedo/mouse al
   instante) y un poco más grande, como "levantado". */
.fase-mapa { touch-action: none; }
.fase-mapa.arrastrando {
  cursor: grabbing;
  transition: none;
  transform: scale(1.06);
  box-shadow: 0 16px 40px rgba(11, 13, 14, 0.45);
}
.fase-mapa-vista { position: absolute; inset: 0; }
/* Velo para leer el título (mismo recurso que .diagrama-item-sombra en los diagramas): degradado
   oscuro arriba a la izquierda, que se desvanece hacia abajo y hacia la derecha. Encima del mapa y de
   la imagen, debajo del título; no captura clics. */
.fase-con-mapa::before,
.fase-con-mapa::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 480px;
  height: clamp(170px, 26vh, 240px);
  background: linear-gradient(180deg, rgba(11, 13, 14, 0.9) 0%, rgba(11, 13, 14, 0.6) 50%, rgba(11, 13, 14, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  pointer-events: none;
}
/* Sin capa propia (z-index auto): así los velos quedan encima del mapa. Sigue pintándose sobre la imagen porque va después en el HTML. */
.fase-con-mapa .fase-mapa { z-index: 2; }
/* Igual abajo, detrás del "01/08". */
.fase-con-mapa::after {
  top: auto;
  bottom: 0;
  height: clamp(190px, 28vh, 260px);
  background: linear-gradient(0deg, rgba(11, 13, 14, 0.95) 0%, rgba(11, 13, 14, 0.7) 50%, rgba(11, 13, 14, 0) 100%);
}
.fase-con-mapa::before,
.fase-con-mapa::after { z-index: 1; }
/* Título, norte y botón de scroll por encima de los velos. */
.fase-con-mapa.fase-con-fondo .fase-indicador,
.fase-con-mapa.fase-con-fondo .cue-scroll { z-index: 2; }
.fase-mapa-vista iframe {
  position: absolute;
  left: -100%;
  top: -100%;
  width: 300%;
  height: 300%;
  border: 0;
  pointer-events: none;
  background: #14181A;
  filter: grayscale(1) invert(0.92) contrast(0.95);
  opacity: 0.88;
  transition: filter 0.5s ease, opacity 0.5s ease;
}
.fase-mapa-vista .fase-mapa-satelite { filter: none; opacity: 0; }
.fase-mapa:hover .fase-mapa-satelite,
.fase-mapa:focus-visible .fase-mapa-satelite { opacity: 1; }
.fase-mapa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Visor del mapa: recuadro grande centrado sobre un velo oscuro (la lámina se sigue viendo detrás);
   clic en el velo, la X o Escape lo cierran y se vuelve a la lámina. */
.visor-diagrama.visor-mapa {
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 14, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.visor-mapa-caja {
  display: flex;
  flex-direction: column;
  width: min(1100px, 86vw);
  height: min(700px, 80vh);
  background: #F2F0EA;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(11, 13, 14, 0.45);
  cursor: default;
  transform: scale(0.97);
  transition: transform 0.35s var(--ease-deliberate);
}
.visor-mapa.abierto .visor-mapa-caja { transform: scale(1); }
.visor-mapa .visor-diagrama-lienzo { margin: 0; }
.visor-mapa .visor-mapa-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visor-mapa-enlace {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1B1D1E;
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(27, 29, 30, 0.35);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.visor-mapa-enlace:hover { background: #1B1D1E; color: #fff; }

/* Logo de Reifer en todas las láminas (renderLogoFase, js/main.js): mismo tamaño, recorte y lugar
   que el pie de la portada (css/hero.css, .hero-portada-pie-logo). */
.fase-logo {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vh, 40px);
  width: clamp(80px, 7.5vw, 110px);
  aspect-ratio: 348 / 127;
  overflow: hidden;
}
.fase-con-fondo:not(.fase-clara) .fase-logo { filter: drop-shadow(0 1px 6px rgba(11, 13, 14, 0.45)); }

/* Leyenda legal sutil ("leyenda" en content.json — Fase 07, renders: "Imágenes con fines
   ilustrativos…", a pedido de Ariel): abajo al centro, a la altura del logo y del "07/08", chica y
   semitransparente para que no compita con el render. */
.fase-leyenda {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(11, 13, 14, 0.8);
  pointer-events: none;
}
.fase-clara .fase-leyenda { color: rgba(11, 13, 14, 0.5); text-shadow: none; }
/* Celular: entre el "07/08" y el logo no entra — sube, centrada, por encima de esa fila. */
@media (max-width: 760px) {
  .fase-leyenda { bottom: calc(clamp(20px, 4vh, 40px) + 56px); }
}
.fase-logo img {
  position: absolute;
  top: -79.5%;
  left: -41.1%;
  width: 177%;
  height: 275%;
  max-width: none;
  object-fit: contain;
}

.fase-con-fondo .fase-indicador,
.fase-con-fondo .fase-cuerpo,
.fase-con-fondo .cue-scroll {
  z-index: 1;
}

/* Norte (machote/norte/NORTE.svg): arriba a la derecha, a la izquierda del botón de menú — mismo
   offset que .hero-inundacion-btn-volver (el botón "volver al inicio" de la Fase 00, ver
   css/hero.css), así queda alineado con el resto de los botones de esa esquina. Solo aparece si la
   fase trae "norte": true en content.json (láminas de mapa/plano). */
.fase-norte {
  position: absolute;
  /* +2px: centra los 36px del ícono contra los 40px del botón de menú, que están a la misma
     distancia del borde (mismo "top" base). */
  top: calc(clamp(20px, 4vh, 40px) + 2px);
  right: calc(clamp(20px, 4vw, 48px) + 40px + 12px);
  z-index: 2;
  width: 36px;
  filter: drop-shadow(0 2px 10px rgba(11, 13, 14, 0.6));
}

/* NORTE.svg viene con fill claro (#F4F1EC, pensado para foto oscura) — invert lo vuelve oscuro
   para leerse sobre el fondo claro de .fase-clara (ver Fase 03 y siguientes). */
.fase-clara .fase-norte { filter: invert(1); }

/* Sin título grande centrado sobre la foto (ver renderFase en js/main.js): el indicador de la
   esquina ya identifica la fase — solo necesita algo de sombra para no perderse contra zonas
   claras de la imagen. */
.fase-con-fondo .fase-indicador-titulo,
.fase-con-fondo .fase-indicador-subtitulo,
.fase-con-fondo .fase-indicador-descripcion {
  text-shadow: 0 2px 12px rgba(11, 13, 14, 0.6);
}

/* ===== Indicador de fase (esquina superior izquierda) ===== */
.fase-indicador {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  left: clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

/* ===== Indicador de fase — número + nombre en un solo título, más subtítulo y una descripción
   corta. Mismo formato en las nueve fases (00-08, incluido el hero — ver index.html y renderFase
   en js/main.js): "tiene que ir siempre amarrado". Subtítulo y descripción son opcionales y solo
   aparecen cuando la fase los trae. Pesos por la jerarquía tipográfica del estándar gráfico
   interno (lámina 03/03): título = Light (300, "Título principal"), subtítulo = Bold (700,
   "Categoría/subtítulo"), descripción = Regular ("Descriptor/apoyo"). ===== */
/* Formato del título por lámina de la lámina 03/03 del estándar gráfico interno: número grande
   + línea vertical fina + nombre, no el "NN · Nombre" del mockup inicial (ese separador con
   punto medio ya no se usa — a pedido de Ariel). */
.fase-indicador-titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--fuente-texto);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--texto);
}
.fase-indicador-titulo-numero {
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1;
}
.fase-indicador-titulo-separador {
  width: 1px;
  height: clamp(1.3rem, 2.6vw, 1.8rem);
  background: currentColor;
  opacity: 0.35;
}
.fase-indicador-titulo-nombre {
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.15;
}

.fase-indicador-subtitulo {
  margin-top: 2px;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--subtitulo);
}

/* Descripción de cada fase en un solo renglón siempre (pedido de Ariel) — el ancho angosto que
   tenía antes (300px) partía la frase en dos líneas y, en las fases con diagramas, la segunda
   línea quedaba pisada por el diagrama activo al crecer (ver .diagrama-item.activo). El ancho
   máximo (900px) y el tamaño de letra dejan lugar de sobra a la descripción más larga del sitio
   (Fase 06) dentro de .fase-cuerpo (1040px) en pantallas de escritorio. */
.fase-indicador-descripcion {
  margin-top: 8px;
  max-width: 900px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--texto);
  white-space: nowrap;
}

/* ===== Contenido de la fase ===== */
.fase-cuerpo {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ===== Bloques de contenido genéricos (mismo vocabulario para todos
   los proyectos: parrafo, cifras, lista, imagen, tarjetas, pendiente) ===== */
.bloque-parrafo { max-width: 680px; font-weight: 300; font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.7; color: var(--texto-tenue); text-align: justify; }

.bloque-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; }
.bloque-cifras-item { display: flex; flex-direction: column; gap: 4px; }
.bloque-cifras-valor { font-family: var(--fuente-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--texto); }
.bloque-cifras-etiqueta { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-tenue); }

/* "Franja informativa" (ver Fase 05, referencia de Ariel): cada cifra queda dividida de la
   siguiente por una línea vertical fina — sin línea superior. Compacta y centrada (no estirada
   de punta a punta): el ancho de referencia sigue siendo el full-bleed de la cinta de diagramas
   de arriba, pero acá es solo el marco para centrar el grupo de cifras adentro — ya no son
   columnas 1fr que se separan solas al estirarse. */
.bloque-cifras {
  width: calc(100vw - clamp(20px, 4vw, 48px) * 2);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: var(--franja-gap);
  /* Margen contra el desborde del cuadrante activo (115% de alto, ver .diagrama-item.activo):
     sin este aire, en pantallas altas el cuadrante llega a pisar la franja. */
  margin-top: var(--franja-margin-top);
}
.bloque-cifras-item {
  flex: 0 0 auto;
  align-items: center;
  text-align: center;
}
.bloque-cifras-item .bloque-cifras-valor { white-space: nowrap; }
.bloque-cifras-item:not(:first-child) {
  border-left: 1px solid var(--linea);
  padding-left: var(--franja-gap);
}
.bloque-cifras-nota {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--texto-tenue);
}

/* Franja de grupos (ícono + título + datos) — ver Fase 02, referencia de Ariel: 3 categorías
   ("Base del ejercicio" / "Cálculo derivado" / "Verificación necesaria") separadas por línea
   vertical, mismo ancho full-bleed y mismo margen contra el cuadrante activo que .bloque-cifras
   (ver comentario de ".bloque-diagramas:has(+ *)" más arriba). */
.bloque-grupos {
  width: calc(100vw - clamp(20px, 4vw, 48px) * 2);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  /* El gap no usa la misma variable --franja-gap que .bloque-cifras: acá cada ítem ya es ancho
     (ícono + 2 líneas de texto, ancho fijo de 232px — ver .bloque-grupo-cuerpo), así que el mismo
     número no entra igual de holgado en el ancho full-bleed. Sin flex-wrap: igual que
     .bloque-cifras, si en una pantalla angosta no entra de sobra, que se salga unos px del ancho
     "nominal" (hay margen de aire alrededor, clamp(20px,4vw,48px), antes de tocar el borde real
     de la ventana) en vez de saltar a una segunda línea y romper el layout. */
  gap: var(--grupos-gap, 8rem);
  margin-top: clamp(30px, 4.8vh, 42px);
}
/* La fila queda a la altura del cue-scroll (abajo a la izquierda): el padding le reserva ese lugar
   y corre el centro de la fila a la derecha (ver Fase 05). En tablet/celular se anula. */
.bloque-grupos { padding-left: 120px; }
.bloque-grupo {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.bloque-grupo:not(:first-child) {
  border-left: 1px solid var(--linea);
  padding-left: var(--grupos-gap, 8rem);
}
.bloque-grupo-icono {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--acento);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloque-grupo-icono svg { width: 26px; height: 26px; }
/* Un tono "oscuro" distinto de machote/paleta-programa.css por ícono (pedido de Ariel, ver
   referencia). El verde de sistema-paisaje solo se usa para el ícono de "terreno" (Fase 05) —
   es justo el caso reservado para eso según la lámina de la paleta; para cualquier otro
   significado (construido, estacionamientos, comercial) se usa dorado/gris/terracota. */
.bloque-grupo-icono-dorado { border-color: var(--programa-residencial-oscuro); color: var(--programa-residencial-oscuro); }
.bloque-grupo-icono-terracota { border-color: var(--programa-comercial-oscuro); color: var(--programa-comercial-oscuro); }
.bloque-grupo-icono-gris { border-color: var(--programa-estacionamientos-oscuro); color: var(--programa-estacionamientos-oscuro); }
.bloque-grupo-icono-verde { border-color: var(--sistema-paisaje-oscuro); color: var(--sistema-paisaje-oscuro); }
/* Neutro (sistema-neutros): indicadores que no son un programa ni un sistema — p. ej. la
   eficiencia vendible/construido de la Fase 07, una relación entre dos cifras, no un área. */
.bloque-grupo-icono-neutro { border-color: var(--sistema-neutros-oscuro); color: var(--sistema-neutros-oscuro); }
/* Ancho fijo para el cuerpo de texto (no el ancho intrínseco del contenido): así "etiqueta" y
   "valor" quedan en dos columnas (izquierda/derecha) que coinciden entre la primera y la segunda
   línea de cada grupo, en vez de un espacio que varía según lo larga que sea cada etiqueta —
   pedido de Ariel, que se vea "ordenado" como la referencia. */
.bloque-grupo-cuerpo { display: flex; flex-direction: column; gap: 3px; width: 232px; }
.bloque-grupo-titulo {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--texto);
}
.bloque-grupo-linea { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; white-space: nowrap; }
.bloque-grupo-etiqueta { color: var(--texto-tenue); }
.bloque-grupo-valor { color: var(--texto); font-weight: 600; }
.bloque-grupo-linea-texto { color: var(--texto-tenue); white-space: normal; justify-content: flex-start; }

/* Variante "cifra" del grupo (ver Fase 04: niveles/sótano/huella/área vendible/parqueos,
   referencia de Ariel) — ícono + número grande + etiqueta, en vez de ícono + título + líneas de
   texto chico. Centrada verticalmente contra el ícono (align-items:flex-start en .bloque-grupo
   sirve para el título+líneas más alto de la Fase 02, acá la cifra es una sola línea corta). */
.bloque-grupo-cifra { align-items: center; }
.bloque-grupo-cifra-cuerpo { display: flex; flex-direction: column; gap: 2px; }
.bloque-grupo-cifra-valor {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--texto);
  white-space: nowrap;
}
.bloque-grupo-cifra-etiqueta {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.bloque-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.bloque-lista li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--vidrio-fondo);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  font-size: 0.85rem;
}

.bloque-imagen { border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); }
.bloque-imagen img { width: 100%; }
.bloque-imagen figcaption { padding: 0.6rem 1rem; font-size: 0.75rem; color: var(--texto-tenue); }

.bloque-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.bloque-tarjeta {
  padding: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--vidrio-fondo);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.25);
}
.bloque-tarjeta-titulo { font-family: var(--fuente-display); font-style: italic; margin-bottom: 0.5rem; }
.bloque-tarjeta-texto { font-size: 0.85rem; color: var(--texto-tenue); line-height: 1.6; text-align: justify; }

/* ===== Diagramas (cinta horizontal expandible: masterplan/volumetría) — ver renderDiagramaItem
   e inicializarDiagramas en js/main.js. Layout base para fases de diagramación (03-05, 07) salvo
   que Ariel pida otra cosa. Mismo concepto que la cinta de "Servicios" de web-reifer-arquitectos
   que compartió de referencia: franjas angostas lado a lado, clickear una la expande y colapsa el
   resto. Sin fondo propio en el grid (a diferencia del primer intento con grid 2x2, que le ponía
   var(--linea) de fondo detrás y se veía como un recuadro gris encima de la textura de la fase —
   acá se deja transparente para que se siga viendo el fondo de la fase). */
.bloque-diagramas {
  /* Se sale del contenedor centrado de 1040px (.fase-cuerpo) para no quedar angosta, pero sin
     llegar al borde de la ventana — el mismo offset lateral clamp(20px, 4vw, 48px) que usa
     .fase-indicador, así el encuadre de la cinta queda alineado con el título/nota en vez de
     pegado al límite de la pantalla. */
  width: calc(100vw - clamp(20px, 4vw, 48px) * 2);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(320px, 56vh, 560px);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: clamp(16px, 2.5vh, 32px);
}

.diagrama-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  /* Encuadre sutil — misma línea fina que el resto del sitio (var(--linea)), como en el
     storyboard de referencia: cada lámina/panel queda enmarcada, no suelta. */
  border: 1px solid var(--linea);
  border-radius: 6px;
  cursor: pointer;
  transition: flex-grow 0.6s var(--ease-deliberate), height 0.6s var(--ease-deliberate),
    border-color 0.6s var(--ease-deliberate);
}
/* El activo crece en ancho (flex-grow) y también un poco en alto — align-items:center en el
   padre hace que ese extra de altura se reparta hacia arriba y hacia abajo por igual, en vez de
   solo ensancharse, para darle más énfasis al diagrama que se está mirando. Borde en el mismo
   verde del subtítulo de la fase (--sistema-paisaje-oscuro), en vez de la línea neutra por
   defecto, para reforzar cuál es el activo. */
.diagrama-item.activo { flex-grow: var(--crecimiento-activo); height: 115%; border-color: var(--sistema-paisaje-oscuro); }
/* Cuánto crece el panel abierto frente a los demás (js/main.js lo lee en calcularCentroActivo).
   Con solo 2 diagramas (Fase 07: escenarios a comparar), 4:1 dejaba el abierto casi a todo el
   ancho y el otro como una tira — a pedido de Ariel, ahí queda ~60/40. */
.bloque-diagramas { --crecimiento-activo: 4; }
.bloque-diagramas:has(> .diagrama-item:nth-child(2):last-child) { --crecimiento-activo: 1.6; }

/* ".fase-indicador" es position:absolute (no entra en el centrado vertical de .fase-cuerpo), así
   que cuando .fase-cuerpo lleva un bloque más abajo (la franja de cifras/grupos de las Fases 02
   y 05, que las demás fases de diagramas no tienen), el centrado empuja el grid entero hacia
   arriba y le come el margen contra el indicador. Este empujón extra — en cualquier
   ".bloque-diagramas" seguido de otro bloque, no solo en el "-relleno" de la Fase 05 — compensa
   exactamente esa diferencia para que el cuadrante quede en la misma posición/tamaño que en
   03/04/07 — no había razón real para que fueran distintos, era un efecto secundario del bloque
   nuevo. */
.bloque-diagramas:has(+ *) { margin-top: clamp(34px, 4.6vh, 50px); }
/* La franja de "grupos" (Fase 02) pesa un poco más que la de "cifras" (Fase 05) — el centrado de
   .fase-cuerpo empuja el grid un poco más arriba en consecuencia; este ajuste fino lo compensa
   para llegar al mismo margen contra el indicador que en 03/04/05/07. */
.bloque-diagramas:has(+ .bloque-grupos) { margin-top: calc(clamp(34px, 4.6vh, 50px) + 14px); }
/* Con franja-resumen (Fases 03 y 07) el cuadrante quedaba 12px más arriba que en 04/05, casi
   tocando el subtítulo — este extra lo alinea con el resto. */
.bloque-diagramas:has(+ .bloque-diagramas-resumen) { margin-top: calc(clamp(34px, 4.6vh, 50px) + 24px); }

.diagrama-item-foto {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Colapsados en blanco y negro, a color solo el que está activo — mismo recurso que la
     sección de proyectos de reifer-arquitectos.com, para que el que se está mirando resalte
     todavía más frente a la cinta. */
  filter: grayscale(1);
  transition: transform 0.6s var(--ease-deliberate), filter 0.6s var(--ease-deliberate);
}
.diagrama-item:not(.activo):hover .diagrama-item-foto { transform: scale(1.04); }
.diagrama-item.activo .diagrama-item-foto { filter: grayscale(0); transform: scale(var(--zoom-imagen, 1)); }
/* --zoom-imagen ("zoomImagen" en content.json): agranda la imagen dentro del cuadrante abierto,
   siempre centrada — las plantas de la Fase 05 (sin cotas ni ejes) tenían mucho margen vacío.
   Escala las dos capas por igual, así que siguen alineadas. */

/* Imagen de fondo opcional (ver imagenFondo en renderDiagramaItem): ocupa el mismo recuadro,
   detrás de la imagen principal — mismo tamaño en píxeles, así que con el mismo object-fit
   quedan calzadas. La principal pasa a position:relative solo para pintarse encima. */
.diagrama-item-foto-fondo { position: absolute; inset: 0; }
.diagrama-item-foto-fondo + .diagrama-item-foto { position: relative; }

/* ===== Capas (prender/apagar cada imagen de un diagrama con imagenFondo) =====
   La de adelante usa --opacidad-imagen (content.json: opacidadImagen) solo cuando se ven las dos;
   sola va al 100%. Apagar = opacity 0 con la misma transición que el resto del panel. */
.diagrama-item-foto,
.visor-diagrama .diagrama-item-foto { transition: transform 0.6s var(--ease-deliberate), filter 0.6s var(--ease-deliberate), opacity 0.35s ease; }
.diagrama-item-foto-fondo + .diagrama-item-foto-frente { opacity: var(--opacidad-imagen, 1); }
.sin-fondo .diagrama-item-foto-frente { opacity: 1; }
.sin-fondo .diagrama-item-foto-fondo,
.sin-frente .diagrama-item-foto-frente { opacity: 0; }

.diagrama-capas {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(27, 29, 30, 0.12);
  border-radius: 999px;
  /* Cápsula de vidrio claro (mismo recurso que los paneles de la lámina) con los dos botones
     adentro, tipo control segmentado. */
  background: rgba(244, 241, 236, 0.72); /* --sistema-neutros-claro */
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 18px rgba(27, 29, 30, 0.12);
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-deliberate);
}
.diagrama-item.activo .diagrama-capas { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.2s; }
.diagrama-capa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 700 0.6rem/1 var(--fuente-texto);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem 0.5rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sistema-neutros-oscuro);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.diagrama-capa svg { width: 14px; height: 14px; flex: none; transition: opacity 0.25s ease; }
/* Áreas: manchas en el dorado de la paleta (construido/residencial); apagada, solo el contorno. */
.diagrama-capa .icono-relleno {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.2;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.diagrama-capa:hover { color: #5C564C; }
.diagrama-capa[aria-pressed="true"] {
  background: #fff;
  color: #1B1D1E;
  box-shadow: 0 1px 3px rgba(27, 29, 30, 0.14), inset 0 0 0 1px rgba(27, 29, 30, 0.06);
}
.diagrama-capa[aria-pressed="true"] .icono-relleno { fill: var(--programa-residencial-medio); stroke: var(--programa-residencial-oscuro); }
.diagrama-capa[aria-pressed="true"] .icono-relleno-2 { fill: var(--sistema-paisaje-claro); stroke: var(--sistema-paisaje-oscuro); }
.diagrama-capa[aria-pressed="true"][data-capa="fondo"] svg { color: var(--sistema-paisaje-oscuro); }
.diagrama-capa:focus-visible { outline: 2px solid var(--sistema-paisaje-oscuro); outline-offset: 2px; }

/* Click sobre el diagrama ya abierto → pantalla completa (ver abrirVisor en js/main.js). */
.diagrama-item.activo { cursor: zoom-in; }

/* ===== Visor a pantalla completa =====
   Mismo fondo de la lámina (la textura de fondo-general, copiada de la fase en abrirVisor — el
   color es solo el respaldo mientras carga): con una capa apagada, la imagen con transparencia
   queda sobre el mismo fondo que en la cinta. Imagen completa (contain), a color, sin recorte. */
.visor-diagrama {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  background: #F2F0EA center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.visor-diagrama.abierto { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
/* overflow:hidden recorta la imagen cuando el pellizco la agranda más allá del cuadro (ver
   activarZoomPan en js/main.js); touch-action:none le pasa el gesto entero (pellizco/arrastre) a
   nuestro propio JS en vez de dejar que el navegador intente hacer scroll o su zoom nativo de
   página con el mismo toque. */
.visor-diagrama-lienzo { position: relative; flex: 1; min-height: 0; margin: 1.5rem 1.5rem 0; overflow: hidden; touch-action: none; }
/* Envuelve las imágenes: es ESTE elemento el que se escala/mueve con el pellizco (ver
   activarZoomPan), no el lienzo — así el lienzo se queda quieto marcando el recorte y el
   contenido adentro es lo único que responde al gesto. */
.visor-diagrama-zoom { position: absolute; inset: 0; }
.visor-diagrama .diagrama-item-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  cursor: default;
  /* --zoom-visor ("zoomVisor" en content.json, copiado del cuadrante con su style): las plantas de
     la Fase 05 tienen mucho margen vacío en la imagen — sin esto, a pantalla completa se veían casi
     del mismo tamaño que en el cuadrante. El pellizco/zoom del visor escala el contenedor
     (.visor-diagrama-zoom), no las imágenes, así que se suma a esto. */
  transform: scale(var(--zoom-visor, 1));
}
.visor-diagrama-barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem 1.25rem;
}
.visor-diagrama-titulo {
  flex: 1;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #1B1D1E;
}
.visor-diagrama .diagrama-capas { position: static; opacity: 1; transform: none; pointer-events: auto; }
.visor-diagrama-cerrar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(27, 29, 30, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #1B1D1E;
  cursor: pointer;
}
.visor-diagrama-cerrar svg { width: 16px; height: 16px; }
.visor-diagrama-cerrar:hover { background: #1B1D1E; color: #fff; }
.visor-diagrama-cerrar:focus-visible { outline: 2px solid var(--sistema-paisaje-oscuro); outline-offset: 2px; }
/* Pantalla completa de un diagrama: la X va arriba a la derecha, en el mismo lugar que el botón
   del menú (a pedido de Ariel), no al final de la barra de abajo. El visor del mapa (recuadro, no
   pantalla completa) la deja en su barra. */
.visor-diagrama:not(.visor-mapa) .visor-diagrama-cerrar {
  position: fixed;
  top: clamp(20px, 4vh, 40px);
  right: clamp(20px, 4vw, 48px);
  z-index: 1;
  width: 40px;
  height: 40px;
  background: rgba(242, 240, 234, 0.85);
}
.visor-diagrama:not(.visor-mapa) .visor-diagrama-cerrar:hover { background: #1B1D1E; }
/* Botones de capas (Áreas / Planta) arriba también, a la izquierda de la X y centrados con ella. */
.visor-diagrama:not(.visor-mapa) .diagrama-capas {
  position: fixed;
  top: calc(clamp(20px, 4vh, 40px) + 20px);
  right: calc(clamp(20px, 4vw, 48px) + 40px + 12px);
  transform: translateY(-50%);
  z-index: 1;
}
/* El lienzo deja lugar arriba para la X. */
.visor-diagrama:not(.visor-mapa) .visor-diagrama-lienzo { margin-top: calc(clamp(20px, 4vh, 40px) + 52px); }

/* Colapsado: recortada a propósito, como vista previa (igual que la referencia). Expandido: se
   ve completa, siempre el 100% de la imagen sin recortar nada — object-fit:contain en vez de
   cover (se probó "cover" también expandido para que la imagen pegara contra los 4 bordes del
   recuadro, pero recorta los costados cuando la imagen es panorámica — Ariel prefiere ver la
   imagen completa aunque quede aire a los lados). */
.diagrama-item.activo .diagrama-item-foto { object-fit: contain; }
/* "fotoCompleta" en el bloque (Fase 06, secciones — a pedido de Ariel): también el cuadrante
   cerrado muestra el dibujo entero en vez de recortarlo para llenar — las secciones son muy
   anchas y el recorte las dejaba como un pedazo ampliado, desproporcionado. */
.bloque-diagramas.foto-completa .diagrama-item-foto { object-fit: contain; }

/* Sombra/degradado detrás del título colapsado (ver Ariel: en algunos diagramas el fondo de la
   foto es claro o texturado ahí abajo y el título oscuro se pierde). Un degradado oscuro fijo, en
   vez de depender del tono de cada imagen, para que el título se lea siempre, sea cual sea la
   foto. Solo el 45% inferior — no le pone una capa encima al diagrama entero. */
.diagrama-item-sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(11, 13, 14, 0.75) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Expandido: la imagen se ve 100% tal cual, sin máscara — a pedido de Ariel. La sombra existe
   solo para que el título se lea sobre la vista previa colapsada y recortada. */
.diagrama-item.activo .diagrama-item-sombra { opacity: 0; }

.diagrama-item-titulo {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
  right: 0.75rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.3s ease;
}
/* Expandido: sin la sombra de abajo (ver .diagrama-item-sombra), el blanco puede perder
   contraste según qué caiga justo ahí en la imagen — pasa a oscuro, más seguro sobre el fondo
   claro de estas fases ("clara": true) que suele haber alrededor de la pieza dibujada. */
.diagrama-item.activo .diagrama-item-titulo { color: #0b0d0e; }
/* Raya vertical divisoria dentro del título (" | " en content.json) — misma que separa número y
   nombre en el indicador (.fase-indicador-titulo-separador). */
.diagrama-item-titulo-separador {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin: 0 0.7em;
  vertical-align: -0.2em;
  background: currentColor;
  opacity: 0.35;
}

/* Cifras/proporción/norte/etiquetas: ocultas mientras está colapsado (no entran en una franja
   angosta), aparecen al expandir. */
.diagrama-item-detalle {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.diagrama-item.activo .diagrama-item-detalle { opacity: 1; transition-delay: 0.2s; }

/* Norte dentro del cuadrante (Fases 02 y 03, "norte" en el bloque — ver renderDiagramaItem):
   arriba a la derecha, solo con el cuadrante abierto. NORTE.svg es claro — invert lo oscurece
   para el fondo claro del diagrama (mismo criterio que .fase-clara .fase-norte). */
.diagrama-item-norte {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  /* Escala con la pantalla: 40px en la compu, ~24px en el celular (donde el cuadrante es chico). */
  width: clamp(22px, 3vw, 40px);
  filter: invert(1);
  pointer-events: none;
}

.diagrama-item-kicker {
  position: absolute;
  top: 0.75rem;
  left: 2.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(11, 13, 14, 0.6);
}

/* Panel de datos dentro del cuadrante (Fase 07, "datosEnDiagrama" — ver renderDatosPanel en
   js/main.js): arriba a la izquierda, en la misma cápsula de vidrio claro que el selector de
   capas (.diagrama-capas) — mismo fondo, borde, blur y sombra — para que se lea como parte del
   mismo sistema de controles sobre el diagrama. Cifras en fila (valor grande + etiqueta chica,
   separadas por la línea fina), atributos abajo con su ícono en círculo. Aparece solo con el
   cuadrante abierto (está dentro de .diagrama-item-detalle). */
.diagrama-datos {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid rgba(27, 29, 30, 0.12);
  border-radius: 10px;
  background: rgba(244, 241, 236, 0.78); /* --sistema-neutros-claro */
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 18px rgba(27, 29, 30, 0.12);
  cursor: default;
}
.diagrama-datos-cifras { display: flex; gap: 1.1rem; }
.diagrama-datos-cifra { display: flex; flex-direction: column; gap: 3px; }
.diagrama-datos-cifra:not(:first-child) { padding-left: 1.1rem; border-left: 1px solid rgba(27, 29, 30, 0.15); }
.diagrama-datos-valor {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.05;
  color: #1B1D1E;
  white-space: nowrap;
}
.diagrama-datos-etiqueta {
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #5C564C;
  white-space: nowrap;
}
.diagrama-datos-atributos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(27, 29, 30, 0.12);
}
.diagrama-datos-atributo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #5C564C;
  white-space: nowrap;
}
.diagrama-datos-atributo-icono {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.diagrama-datos-atributo-icono svg { width: 13px; height: 13px; }
/* Mismo criterio de color que las franjas de grupos (paleta por programa): dorado = construido /
   producto; verde de paisaje solo para lo que habla de terreno libre / vegetación. */
.diagrama-datos-atributo-icono-dorado { color: var(--programa-residencial-oscuro); }
.diagrama-datos-atributo-icono-verde { color: var(--sistema-paisaje-oscuro); }

/* Cifras/proporción/franja de un diagrama: ya no van pegadas a una esquina del cuadrante — ver
   renderDiagramaResumen (js/main.js) — viven abajo, en .bloque-diagramas-resumen, como una fila
   centrada más grande. */
.diagrama-cifras {
  display: flex;
  gap: 2.5rem;
}

.diagrama-cifras-item { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.diagrama-cifras-valor { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; color: var(--texto); white-space: nowrap; }
.diagrama-cifras-etiqueta { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-tenue); white-space: nowrap; }

.diagrama-proporcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.diagrama-proporcion-cifras {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 1.4rem;
}
/* Dorado de "programa" (construido) y verde de "sistema-paisaje" (libre) — paleta oficial de
   machote/paleta-programa.css, no colores inventados para esta pieza. */
.diagrama-proporcion-izq { color: var(--programa-residencial-oscuro); }
.diagrama-proporcion-der { color: var(--sistema-paisaje-oscuro); }
.diagrama-proporcion-sep { color: var(--texto-tenue); font-weight: 400; }

/* La "pista" (con overflow:hidden, para redondear las puntas de la barra) queda separada del
   punto: si el punto viviera dentro de la pista, sus 8px de alto quedarían recortados por los
   4px de la barra y se vería achatado/descentrado en vez de un círculo completo sobre el
   quiebre de color. */
.diagrama-proporcion-barra {
  position: relative;
  width: 280px;
  height: 6px;
}
.diagrama-proporcion-barra-pista {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
}
.diagrama-proporcion-barra-izq { display: block; height: 100%; background: var(--programa-residencial-oscuro); }
.diagrama-proporcion-barra-der { display: block; height: 100%; background: var(--sistema-paisaje-oscuro); }
.diagrama-proporcion-barra-punto {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--reifer-blanco, #fff);
  border: 2px solid #0b0d0e;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Franja de color de las láminas sin proporción a dos bandas (ver comentario en
   renderDiagramaItem, js/main.js) — mismo formato que .diagrama-proporcion (cifras arriba,
   barra abajo), en la misma esquina, para que las cuatro láminas compartan una sola firma
   visual y la barra nunca quede sin explicación. */
.diagrama-franja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Las etiquetas de la franja van SIEMPRE en una sola línea (pedido de Ariel: "Penthouse" no puede
   caer abajo de "Típica 1 / Típica 2") — si en algún tamaño no entra, se achica la letra o se
   reacomoda el resto de la franja (ver sincronizarResumen en js/main.js), nunca se corta. */
.diagrama-franja-cifras {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 1.4rem;
}
/* Separador + etiqueta como un solo bloque (ver renderDiagramaResumen, js/main.js): si la fila
   envuelve en más de una línea, el "/" nunca queda solo al final de una — se queda pegado a la
   etiqueta que sigue, como debe leerse. */
.diagrama-franja-etiqueta-grupo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.diagrama-franja-etiqueta-dorado { color: var(--programa-residencial-oscuro); }
.diagrama-franja-etiqueta-estacionamiento { color: var(--programa-estacionamientos-oscuro); }
.diagrama-franja-etiqueta-verde { color: var(--sistema-paisaje-oscuro); }
.diagrama-franja-sep { color: var(--texto-tenue); font-weight: 400; }

.diagrama-franja-barra {
  position: relative;
  width: 280px;
  height: 6px;
}
.diagrama-franja-barra-pista {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
}
.diagrama-franja-segmento { display: block; height: 100%; }
.diagrama-franja-dorado { background: var(--programa-residencial-oscuro); }
.diagrama-franja-estacionamiento { background: var(--programa-estacionamientos-oscuro); }
.diagrama-franja-verde { background: var(--sistema-paisaje-oscuro); }
/* Fase 04 (Conjunto): reparto de niveles con los tres tonos de "Residencial" de la paleta
   oficial (claro/medio/oscuro = Típica 1 / Típica 2 / Penthouse). El claro no se lee como color
   de texto sobre el fondo claro, así que acá la etiqueta va en gris oscuro con un cuadrito del
   tono exacto delante. */
/* Acá las etiquetas (con su cuadrito) son más largas que los 280px fijos de la barra: la barra
   toma el ancho del renglón de etiquetas, así los dos quedan del mismo largo. */
.diagrama-franja:has(.diagrama-franja-residencial-claro) { align-items: stretch; }
.diagrama-franja:has(.diagrama-franja-residencial-claro) .diagrama-franja-barra { width: auto; }
.diagrama-franja-residencial-claro { background: var(--programa-residencial-claro); }
.diagrama-franja-residencial-medio { background: var(--programa-residencial-medio); }
.diagrama-franja-residencial-oscuro { background: var(--programa-residencial-oscuro); }
.diagrama-franja-etiqueta-residencial-claro,
.diagrama-franja-etiqueta-residencial-medio,
.diagrama-franja-etiqueta-residencial-oscuro { display: inline-flex; align-items: center; gap: 6px; color: #5C564C; }
.diagrama-franja-etiqueta-residencial-claro::before,
.diagrama-franja-etiqueta-residencial-medio::before,
.diagrama-franja-etiqueta-residencial-oscuro::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(27, 29, 30, 0.12);
}
.diagrama-franja-etiqueta-residencial-claro::before { background: var(--programa-residencial-claro); }
.diagrama-franja-etiqueta-residencial-medio::before { background: var(--programa-residencial-medio); }
.diagrama-franja-etiqueta-residencial-oscuro::before { background: var(--programa-residencial-oscuro); }

/* Punto en el quiebre entre tramos — mismo recurso que .diagrama-proporcion-barra-punto, para
   que Cobertura no sea la única lámina con esa marca. Borde negro fijo (no del tono del tramo):
   así resalta parejo contra cualquier color de fondo y se lee la transición, en vez de mimetizarse
   con uno de los dos tramos. Cuando la franja es un solo tramo (Terreno), cae al final de la
   barra en vez de en un quiebre — marca "acá llega el 100%" en lugar de una división. */
.diagrama-franja-barra-punto {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--reifer-blanco, #fff);
  border: 2px solid #0b0d0e;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Etiquetas de sol/viento/vistas/accesos, etc. — posicionadas por porcentaje (x/y en
   content.json) sobre la imagen. La línea corta arriba marca el punto de referencia, no una
   flecha exacta a lo que señala (ver comentario en renderDiagramaItem, js/main.js). */
.diagrama-etiqueta {
  position: absolute;
  transform: translate(-50%, -100%);
  padding-top: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--texto);
}
.diagrama-etiqueta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--acento);
  transform: translateX(-50%);
}

/* Franja-resumen de un diagrama (ver Fase 03: Terreno/Cobertura/Orientación/Habitar la montaña) —
   cifras/proporción/franja de lo que esté activo en la cinta de arriba, reubicadas desde la
   esquina del cuadrante a esta franja, más grandes y en el mismo lugar/estilo que las franjas
   de íconos de las otras fases (mismo full-bleed y --franja-margin-top). Un solo
   ".diagrama-resumen" persistente (no uno por diagrama con display:none) cuyo contenido se
   reemplaza al cambiar de cuadrante — ver sincronizarResumen en js/main.js: así "left" tiene un
   punto de partida real de dónde animar, en vez de aparecer de golpe cada vez. */
.bloque-diagramas-resumen {
  /* Mismo ancho y mismo origen de coordenadas (left:50% + translateX(-50%)) que .bloque-diagramas
     — así el "left" en px que sincronizarResumen (js/main.js) calcula para cada
     ".diagrama-resumen" (el centro real del cuadrante activo) cae en el mismo lugar en los dos
     contenedores, y la franja queda centrada bajo el cuadrante en vez de bajo toda la fila. */
  width: calc(100vw - clamp(20px, 4vw, 48px) * 2);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--franja-margin-top);
  min-height: 64px;
}
.diagrama-resumen {
  display: flex;
  position: absolute;
  top: 0;
  /* left lo pone sincronizarResumen en línea (centro del cuadrante activo); sin JS todavía
     (primer paint) cae centrado como respaldo. */
  left: 50%;
  align-items: center;
  gap: 3.5rem;
  /* Sin "width" explícito, un position:absolute con solo "left" (sin "right") calcula su ancho
     por shrink-to-fit usando el espacio disponible SOLO hacia la derecha de "left" — sin enterarse
     de que translateX(-50%) después lo corre también hacia la izquierda. En una pantalla angosta,
     donde "left" cae más a la derecha en proporción, ese espacio "hacia la derecha" puede ser
     menor que lo que el contenido necesita en una sola línea y el texto se envolvía de más aunque
     sobrara aire de sobra a la izquierda (ver Fase 04, "Conjunto": las etiquetas de la franja se
     partían con el separador "/" huérfano al final de cada línea). width:max-content lo mide por
     su propio contenido en cambio, y deja el wrap de sus hijos (ver breakpoints más abajo) como lo
     que realmente es: un respaldo para cuando el cuadrante angosto no da abasto, no la regla. */
  width: max-content;
  max-width: min(92vw, 900px);
  transform: translateX(-50%);
  /* El valor de "left" que pone sincronizarResumen (js/main.js) es el centro FINAL del
     cuadrante, calculado al instante (no medido a mitad de una transición) — esta transition lo
     anima en paralelo con la del cuadrante (misma duración/easing que .diagrama-item, ver más
     abajo), en vez de aparecer de golpe en el lugar nuevo. */
  transition: left 0.6s var(--ease-deliberate);
}
/* El contenido (template.diagrama-resumen-plantilla) es inerte — no se pinta ni ocupa espacio;
   sincronizarResumen (js/main.js) copia su innerHTML dentro de ".diagrama-resumen" cuando toca. */
template.diagrama-resumen-plantilla { display: none; }

/* Versión compacta en una fila (la pone sincronizarResumen en iPad/tablet cuando la normal no entra
   centrada bajo el cuadrante): menos aire entre bloques y etiquetas de la franja un poco más chicas. */
.diagrama-resumen.compacta { gap: 1.75rem; }
.diagrama-resumen.compacta .diagrama-cifras { gap: 1.5rem; }
.diagrama-resumen.compacta .diagrama-franja-cifras { font-size: 1.1rem; }
.diagrama-resumen.compacta .diagrama-atributos { padding-left: 1.75rem; }

/* Versión en dos filas (la pone sincronizarResumen solo cuando en una fila no entra centrada bajo
   el cuadrante): la barra arriba y las cifras abajo. El ::after es un salto de línea invisible que
   va justo después de la barra, así la barra conserva su ancho natural y queda centrada. */
.diagrama-resumen.envuelta { flex-wrap: wrap; justify-content: center; column-gap: 3rem; row-gap: 6px; }
.diagrama-resumen.envuelta > .diagrama-franja,
.diagrama-resumen.envuelta > .diagrama-proporcion { order: -1; }
.diagrama-resumen.envuelta:has(> .diagrama-franja, > .diagrama-proporcion)::after { content: ""; order: -1; flex-basis: 100%; height: 0; }
/* Sin barra (cifras + atributos, o solo atributos): cada bloque en su fila, sin la línea divisoria
   vertical, que apilados ya no separa nada. */
.diagrama-resumen.envuelta { row-gap: 12px; }
.diagrama-resumen.envuelta:has(> .diagrama-franja, > .diagrama-proporcion) { row-gap: 6px; } /* el salto invisible suma una fila más */
.diagrama-resumen.envuelta .diagrama-atributos { padding-left: 0; border-left: 0; align-items: center; }
.diagrama-resumen.envuelta .diagrama-atributos:only-child { flex-wrap: wrap; justify-content: center; row-gap: 8px; }

/* Atributos cualitativos (Fase 07) — a la derecha de las cifras, separados por la misma línea
   fina que el resto de las franjas; ícono en círculo chico, igual al de las franjas de grupos. */
.diagrama-atributos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 3.5rem;
  border-left: 1px solid var(--linea);
}
.diagrama-atributo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.diagrama-atributo-icono {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--sistema-paisaje-oscuro);
  border-radius: 50%;
  color: var(--sistema-paisaje-oscuro);
}
.diagrama-atributo-icono svg { width: 14px; height: 14px; }
/* Solo atributos, sin cifras (Fase 03: las decisiones de estrategia, las cifras viven en la 02):
   en fila y sin la línea divisoria, que acá no separa nada. */
.diagrama-atributos:only-child {
  flex-direction: row;
  gap: 2.5rem;
  padding-left: 0;
  border-left: 0;
}

/* Nota al pie de una franja de grupos (Fase 07: variables críticas) — centrada bajo la franja. */
.bloque-grupos-nota {
  margin-top: clamp(14px, 2.4vh, 24px);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  color: var(--texto-tenue);
}

/* Mismo full-bleed que .bloque-diagramas, pero con el mismo offset lateral que .fase-indicador
   (clamp(20px, 4vw, 48px), no el padding de .fase que es otro valor — clamp(20px, 6vw, 80px)) —
   así el texto arranca exactamente en la misma columna que el título, en vez de en el borde
   izquierdo del contenedor centrado de 1040px (.fase-cuerpo), que no coincide con ninguno de los
   dos salvo por casualidad de ancho de ventana. */
.bloque-diagramas-nota {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 clamp(20px, 4vw, 48px);
  /* A medio camino entre la cinta de diagramas y el cue-scroll de abajo a la izquierda, en vez
     de pegada al borde inferior de la cinta (pedido de Ariel). */
  margin-top: clamp(28px, 6vh, 64px);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--texto-tenue);
}


/* ===== cue-scroll (botón de paginado, esquina inferior izquierda) — índice de posición ("NN/09")
   + barra horizontal fina que se va llenando con el scroll acumulado dentro de la fase (ver
   actualizarBarra en js/main.js) + la etiqueta de la acción. Sin ícono ni cápsula de vidrio: menos
   masa visual sobre la foto de fondo. Esquina inferior izquierda — la única de las cuatro que
   ninguna otra pieza fija ocupa (indicador arriba-izquierda, menú y norte arriba-derecha). ===== */
.cue-scroll {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border: none;
  background: none;
  font-family: var(--fuente-texto);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.cue-scroll-indice {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 20px;
  color: var(--texto);
  text-shadow: 0 2px 10px rgba(11, 13, 14, 0.6);
}

.cue-scroll-indice small {
  margin-left: 2px;
  font-family: var(--fuente-texto);
  font-style: normal;
  font-size: 11px;
  color: var(--texto-tenue);
}

.cue-scroll-barra {
  width: 64px;
  height: 2px;
  background: rgba(242, 240, 234, 0.25);
}

.cue-scroll-barra-relleno {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-warm);
}

.cue-scroll-destino {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-shadow: 0 2px 10px rgba(11, 13, 14, 0.6);
}

/* ===== Menú de fases: colapsado en un botón hamburguesa, salto directo a cualquier fase sin
   pasar por las del medio. El widget entero solo se muestra a partir de la Fase 00 — nunca en
   la portada, antes de "Descubre el proyecto" — mismo criterio que altezza-presentacion (ver
   villavento:paginado-activar/-reiniciar en js/main.js). ===== */
.fase-menu-widget {
  position: fixed;
  top: clamp(20px, 4vh, 40px);
  right: clamp(20px, 4vw, 48px);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.fase-menu-widget.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-menu-fases {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--vidrio-fondo);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s var(--ease-warm);
}

.btn-menu-fases:hover {
  background: rgba(242, 240, 234, 0.28);
  transform: scale(1.08);
}

.btn-menu-fases-icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.btn-menu-fases-icono span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--texto);
  transition: transform 0.3s var(--ease-warm), opacity 0.3s ease;
}

.btn-menu-fases[aria-expanded="true"] .btn-menu-fases-icono span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.btn-menu-fases[aria-expanded="true"] .btn-menu-fases-icono span:nth-child(2) {
  opacity: 0;
}

.btn-menu-fases[aria-expanded="true"] .btn-menu-fases-icono span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.fase-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  width: min(70vw, 420px);
  padding: 96px 40px 32px;
  background: rgba(20, 24, 26, 0.9);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-left: 1px solid var(--linea);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-deliberate);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.fase-menu-widget.abierto .fase-menu {
  transform: translateX(0);
}

.fase-menu-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border: none;
  border-bottom: 1px solid rgba(242, 240, 234, 0.08);
  background: none;
  text-align: left;
  cursor: pointer;
}

.fase-menu-item-numero {
  min-width: 22px;
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--texto-tenue);
  transition: color 0.3s ease;
}

.fase-menu-item-nombre {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 15px;
  color: var(--texto);
  transition: color 0.3s ease;
}

.fase-menu-item:hover .fase-menu-item-numero,
.fase-menu-item.activo .fase-menu-item-numero {
  color: var(--acento);
}

.fase-menu-item:hover .fase-menu-item-nombre,
.fase-menu-item.activo .fase-menu-item-nombre {
  color: var(--acento);
}

.fase-menu-velo {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(11, 13, 14, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.fase-menu-widget.abierto ~ .fase-menu-velo {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .fase { padding-left: 20px; padding-right: 20px; }
  .fase-indicador-descripcion { display: none; }
}

/* El cue-scroll solo se achica en celular angosto: en iPad ya entra cómodo con su tamaño normal
   — mismo umbral que altezza-presentacion. */
@media (max-width: 767px) {
  .cue-scroll {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    gap: 6px;
  }

  .cue-scroll-indice {
    font-size: 17px;
  }

  .cue-scroll-barra {
    width: 48px;
  }
}

@media (max-height: 420px) and (orientation: landscape) {
  .fase-indicador-titulo {
    font-size: 1.1rem;
  }

  .cue-scroll {
    gap: 4px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .cue-scroll-indice {
    font-size: 16px;
  }
}

/* =====================================================================
   Celular y tablet — ajustes para que ninguna lámina quede cortada ni con textos encimados.
   ===================================================================== */

/* Pantallas táctiles: sin "pasar el mouse" — el mapa de la Fase 01 queda en gris oscuro (en iPad el
   toque dejaba activo el hover y mostraba la capa satelital a medio cargar, una tira blanca). El
   primer toque ahora hace ese mismo adelanto a propósito, con la clase ".activo" (ver
   inicializarDiagramas en js/main.js: primer toque = adelanto, segundo toque = abre el recuadro
   grande) — mismo criterio que ".diagrama-item.activo" en la cinta de diagramas. */
@media (hover: none) {
  .fase-mapa:hover .fase-mapa-satelite { opacity: 0; }
  .fase-mapa.activo .fase-mapa-satelite { opacity: 1; }
}

/* Pantallas verticales (celular, iPad parado): el círculo del mapa de la Fase 01 sigue debajo del
   título, un poco más chico; la imagen de ubicación ocupa toda la pantalla con el terreno centrado. */
@media (orientation: portrait) {
  .fase-con-mapa { --mapa-circulo: clamp(140px, 30vw, 240px); }
  .fase-con-mapa::before { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .fase-con-mapa::after { width: 100%; height: clamp(120px, 16vh, 170px); -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 760px) {
  /* Título: el norte baja debajo del botón de menú, así no se encima con el nombre de la fase. */
  .fase-norte {
    top: calc(clamp(20px, 4vh, 40px) + 52px);
    right: calc(clamp(20px, 4vw, 48px) + 2px);
    width: 32px;
  }
  .fase-indicador { right: 72px; }
  .fase-indicador-titulo-numero { font-size: 2rem; }
  .fase-indicador-titulo-nombre { font-size: 1rem; }
  .fase-indicador-subtitulo { font-size: 0.78rem; letter-spacing: 0.6px; }

  /* Cinta de diagramas: sigue horizontal (el abierto grande, los demás como tiras); más baja, y las
     tiras angostas sin título para que no se amontone el texto. */
  .bloque-diagramas { height: clamp(220px, 34vh, 340px); gap: 3px; --crecimiento-activo: 8; }
  .bloque-diagramas:has(> .diagrama-item:nth-child(2):last-child) { --crecimiento-activo: 3; }
  .bloque-diagramas:has(+ *),
  .bloque-diagramas:has(+ .bloque-grupos),
  .bloque-diagramas:has(+ .bloque-diagramas-resumen) { margin-top: clamp(40px, 7vh, 70px); }
  .diagrama-item:not(.activo) .diagrama-item-titulo { opacity: 0; }
  .diagrama-item-titulo { font-size: 0.62rem; }
  .diagrama-capas { top: 0.5rem; right: 0.5rem; }
  .diagrama-capa { padding: 0.4rem 0.6rem 0.4rem 0.5rem; font-size: 0.56rem; }

  /* Franja del diagrama abierto: centrada en la pantalla (no bajo el panel) y en varias líneas si
     hace falta, en vez de salirse por los costados. */
  .bloque-diagramas-resumen { min-height: 0; margin-top: 22px; }
  /* width:auto/max-width:none pisan el "width:max-content" de escritorio: acá la franja toma el
     ancho de la pantalla y envuelve adentro, así ningún gráfico queda más ancho que el celular. */
  .diagrama-resumen {
    position: static;
    left: auto !important;
    width: auto;
    max-width: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
    padding: 0 8px;
  }
  .diagrama-resumen > * { max-width: 100%; }
  .diagrama-proporcion-barra { width: min(260px, 70vw); }
  .diagrama-cifras { flex-wrap: wrap; justify-content: center; gap: 12px 1.4rem; }
  .diagrama-cifras-valor { font-size: 1.3rem; }
  /* Una sola línea también en el celular: la letra baja con el ancho de la pantalla para entrar. */
  .diagrama-franja-cifras { font-size: min(1rem, 3.9vw); justify-content: center; }
  .diagrama-franja-barra { width: min(260px, 70vw); }
  .diagrama-proporcion { transform: none; }
  .diagrama-atributos { padding-left: 0; border-left: 0; align-items: center; }
  .diagrama-atributos:only-child { flex-direction: column; gap: 8px; }
  .diagrama-atributo { white-space: normal; text-align: left; }

  /* Franja de datos fija (Fase 05): 2 × 2 en vez de una fila que no entra. */
  .bloque-grupos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 18px 28px;
  }
  .bloque-grupo:not(:first-child) { border-left: 0; padding-left: 0; }
  .bloque-grupo-icono { width: 38px; height: 38px; }
  .bloque-grupo-icono svg { width: 19px; height: 19px; }
  /* Etiquetas largas (Fase 07: "Eficiencia de plantas típicas") en dos líneas, no más anchas que la pantalla. */
  .bloque-grupo-cifra-etiqueta { white-space: normal; max-width: 120px; line-height: 1.35; }

  /* Fase 08: el contacto entra a lo ancho. */
  .bloque-cierre { max-width: calc(100vw - 40px); top: 118px; }
  .cierre-contacto-valor { font-size: 18px; }
  .fase-boceto { width: 118vw; right: -6vw; bottom: 90px; max-height: 50vh; }

  /* Panel de datos dentro del cuadrante (Fase 07): más compacto y sin salirse del cuadrante —
     letra más chica, etiquetas que pueden partirse en dos líneas. */
  .diagrama-datos { top: 0.5rem; left: 0.5rem; max-width: calc(100% - 1rem); gap: 0.5rem; padding: 0.6rem 0.7rem 0.65rem; border-radius: 8px; }
  .diagrama-datos-cifras { gap: 0.7rem; }
  .diagrama-datos-cifra:not(:first-child) { padding-left: 0.7rem; }
  .diagrama-datos-valor { font-size: 1rem; }
  .diagrama-datos-etiqueta,
  .diagrama-datos-atributo { font-size: 7.5px; letter-spacing: 0.8px; white-space: normal; }
  .diagrama-datos-atributos { gap: 4px; padding-top: 0.5rem; }
  .diagrama-datos-atributo { gap: 0.4rem; }
  .diagrama-datos-atributo-icono { width: 18px; height: 18px; }
  .diagrama-datos-atributo-icono svg { width: 10px; height: 10px; }

  /* Logo: un poco más chico, sigue en el mismo lugar. */
  .fase-logo { width: 78px; }
}

/* Tablet (iPad parado y acostado) y celular: lo que en escritorio va en una sola fila ancha pasa a
   ocupar el ancho disponible sin salirse. También por (hover:none)+(pointer:coarse) — no solo por
   ancho — porque un iPad Pro acostado (1194/1366px) es más ancho que 1100px pero sigue siendo un
   dedo tocando una pantalla chica, no un mouse en un monitor grande: sin esto, un iPad landscape
   caía en el layout de escritorio (fila sin wrap) y el conjunto de franjas/etiquetas se veía
   amontonado o pisaba el cue-scroll — ver hallazgos de Ariel ("subtítulos atravez de los
   cuadrantes", "conjunto de la Fase 04 desordenado"). */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  /* La franja del diagrama abierto sigue centrada BAJO el cuadrante activo (como en la compu,
     sincronizarResumen en js/main.js) hasta acá — a partir de 760px (ver ese breakpoint más abajo)
     pasa a centrarse en toda la pantalla, ya sin espacio para seguir al cuadrante. A pedido de
     Ariel: en iPad y pantallas grandes se ve mejor siguiendo al cuadrante, como en la compu. Lo
     que sigue solo evita que el CONTENIDO de la franja se salga de la pantalla (envolviendo en
     más de una línea), no cambia dónde se centra. */
  .diagrama-cifras { flex-wrap: wrap; justify-content: center; }
  .diagrama-proporcion { transform: none; }
  /* Etiquetas de la franja (Fase 04, Conjunto): mismo tamaño que en la compu y en una sola línea. */
  .diagrama-franja-cifras { justify-content: center; }

  /* Franja de datos fija (Fase 05): menos separación y, si no entra, segunda línea. */
  .bloque-grupos { flex-wrap: wrap; row-gap: 20px; --grupos-gap: 2.5rem !important; padding-left: 0; }
  .bloque-grupos { margin-top: clamp(18px, 3vh, 28px); }
  .bloque-grupo-icono { width: 40px; height: 40px; }
  .bloque-grupo-icono svg { width: 20px; height: 20px; }

  /* Más aire contra el cue-scroll fijo (abajo a la izquierda): en un diagrama con cifras Y
     atributos juntos (Fase 02, "Altura y densidad") el resumen puede quedar a un par de px del
     "NN/08" — este colchón extra evita que lleguen a tocarse en pantallas táctiles más bajas. */
  .fase { padding-bottom: clamp(90px, 12vh, 150px); }
}