/*
  Las piezas: recreaciones del software, autoradas en HTML y CSS.

  No son capturas. Son el software redibujado a mano para que entre en la página a
  tamaño de afiche: una captura de 1440px estirada a 100vw se ve blanda y pixelada,
  y una captura real arrastra datos de una inmobiliaria de verdad. Acá cada pieza es
  vectorial, nítida a cualquier tamaño, y el contenido es ilustrativo a propósito.

  Todo lo que está adentro de `.pieza` vive en el mundo del producto: near-black y
  verde. Afuera, la página sigue siendo blanco y negro. Esa frontera es el concepto.
*/

/*
  La pieza es un marco de medida fija que la pagina escala entera.

  Esto es lo que hace que se lea como una pantalla y no como una captura
  estirada: adentro del marco todo mide lo que mide en el software de verdad
  (13px de texto, 62px de franja de iconos), y lo unico que cambia segun la
  pantalla del visitante es cuanto se agranda el conjunto. `--marco-n` es ese
  ancho de diseno, sin unidad, porque la escala lo necesita como divisor.
*/
.pieza {
  --marco-n: 1440;
  /* `--u` es UN pixel de diseno. Adentro de la pieza todo se mide en estas
     unidades, asi que el dibujo entero crece o se achica junto: siempre se lee
     como una pantalla de verdad y no como una captura estirada.
     No uso `transform: scale()` porque `scale()` pide un numero y esta cuenta
     da una longitud; la declaracion se descartaba sin avisar. */
  --u: calc(100cqw / var(--marco-n));

  position: absolute;
  inset: 0;
  background: var(--p-fondo);
  color: var(--p-tinta);
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  letter-spacing: normal;
  overflow: hidden;
  user-select: none;
}

/*
  Anchos de diseno por tamano de pantalla.

  Los escalones estan elegidos para que la escala quede siempre entre 0,86 y
  1,22: nunca tan chica que no se lea, nunca tan grande que parezca una captura
  ampliada. El salto es del marco entero, no de cada elemento: a 400 la pieza se
  dibuja como se dibujaria en un telefono, y recien ahi se escala.
*/
@media (max-width: 1239px) {
  .pieza {
    --marco-n: 1180;
  }
}

@media (max-width: 1023px) {
  .pieza {
    --marco-n: 980;
  }
}

@media (max-width: 879px) {
  .pieza {
    --marco-n: 720;
  }
}

@media (max-width: 619px) {
  .pieza {
    --marco-n: 540;
  }
}

@media (max-width: 479px) {
  .pieza {
    --marco-n: 400;
  }
}

/* Mientras el diptico son dos columnas, cada pieza tiene medio ancho. Debajo de
   calc(861 * var(--u)) pasa a una sola columna y vuelven a servir los escalones de arriba. */
@media (min-width: 861px) {
  .diptico__panel .pieza {
    --marco-n: 700;
  }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  .diptico__panel .pieza {
    --marco-n: 540;
  }
}

@media (min-width: 861px) and (max-width: 1023px) {
  .diptico__panel .pieza {
    --marco-n: 460;
  }
}

/* La grilla del producto: franja de íconos a la izquierda, trabajo a la derecha. */
.pz-app {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(62 * var(--u)) 1fr;
}

.pz-rail {
  border-right: var(--u) solid var(--p-linea);
  background: #0f0f0f;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: calc(4 * var(--u));
  padding: calc(14 * var(--u)) 0;
}

.pz-rail__marca {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  display: grid;
  place-items: center;
  margin-bottom: calc(14 * var(--u));
  color: var(--p-verde);
}

.pz-rail__ico {
  width: calc(40 * var(--u));
  height: calc(38 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(7 * var(--u));
  color: var(--p-tinta-3);
}

.pz-rail__ico svg {
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
}

.pz-rail__ico[data-activo] {
  background: var(--p-sup-2);
  color: var(--p-verde);
}

.pz-cuerpo {
  display: grid;
  grid-template-rows: calc(48 * var(--u)) 1fr;
  min-width: 0;
}

/* ── encabezado del producto ── */

.pz-top {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-bottom: var(--u) solid var(--p-linea);
}

.pz-top__volver {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  display: grid;
  place-items: center;
  border: var(--u) solid var(--p-linea-2);
  border-radius: calc(6 * var(--u));
  color: var(--p-tinta-2);
}

.pz-top__volver svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.pz-buscar {
  flex: 1;
  max-width: calc(330 * var(--u));
  height: calc(28 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: var(--u) solid var(--p-linea-2);
  border-radius: calc(6 * var(--u));
  background: var(--p-sup);
  color: var(--p-tinta-3);
  font-size: calc(12 * var(--u));
}

.pz-buscar svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  flex: none;
}

.pz-top__fin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  color: var(--p-tinta-3);
}

.pz-top__fin svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.pz-avatar {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  border-radius: 50%;
  background: var(--p-sup-3);
  color: var(--p-tinta-2);
  display: grid;
  place-items: center;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pz-lienzo {
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: calc(20 * var(--u));
}

/* ── etiquetas y títulos internos ── */

.pz-rotulo {
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase;
  color: var(--p-tinta-3);
}

.pz-h {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: calc(0.2 * var(--u));
}

.pz-mono {
  font-family: var(--p-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* ── KPIs ── */

.pz-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--u);
  background: var(--p-linea);
  border: var(--u) solid var(--p-linea);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}

.pz-kpi {
  background: var(--p-sup);
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  display: grid;
  gap: calc(7 * var(--u));
  align-content: start;
}

.pz-kpi__n {
  font-size: calc(38 * var(--u));
  font-weight: 300;
  line-height: 1;
  color: var(--p-verde);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pz-kpi__n small {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--p-tinta-2);
  margin-left: calc(3 * var(--u));
}

.pz-kpi__pie {
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-3);
}

.pz-delta {
  color: var(--p-verde);
}

/* ── dos columnas de trabajo ── */

.pz-dos {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: calc(18 * var(--u));
  align-items: start;
}

.pz-tarjeta {
  background: var(--p-sup);
  border: var(--u) solid var(--p-linea);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}

.pz-tarjeta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border-bottom: var(--u) solid var(--p-linea);
}

.pz-tarjeta__cuerpo {
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  display: grid;
  gap: calc(12 * var(--u));
}

/* ── embudo de operaciones ── */

.pz-embudo {
  display: grid;
  gap: calc(11 * var(--u));
}

.pz-etapa {
  display: grid;
  grid-template-columns: calc(96 * var(--u)) 1fr calc(38 * var(--u));
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  color: var(--p-tinta-2);
}

.pz-barra {
  height: calc(7 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--p-sup-3);
  overflow: hidden;
}

.pz-barra i {
  display: block;
  height: 100%;
  border-radius: calc(4 * var(--u));
  background: var(--p-verde);
}

.pz-etapa b {
  font-weight: 500;
  color: var(--p-tinta);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── agenda ── */

.pz-agenda {
  display: grid;
  gap: 0;
}

.pz-cita {
  display: grid;
  grid-template-columns: calc(46 * var(--u)) 1fr;
  gap: calc(12 * var(--u));
  padding: calc(11 * var(--u)) 0;
  border-bottom: var(--u) solid var(--p-linea);
  align-items: start;
}

.pz-cita:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pz-cita__hora {
  font-size: calc(12 * var(--u));
  color: var(--p-verde);
  font-variant-numeric: tabular-nums;
}

.pz-cita__que {
  font-size: calc(12.5 * var(--u));
  color: var(--p-tinta);
}

.pz-cita__donde {
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-3);
  margin-top: calc(2 * var(--u));
}

/* ── tablas ── */

.pz-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(12.5 * var(--u));
}

.pz-tabla th {
  text-align: left;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase;
  color: var(--p-tinta-3);
  padding: 0 calc(14 * var(--u)) calc(10 * var(--u));
  border-bottom: var(--u) solid var(--p-linea);
  white-space: nowrap;
}

.pz-tabla td {
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-bottom: var(--u) solid var(--p-linea);
  color: var(--p-tinta-2);
  white-space: nowrap;
}

.pz-tabla td:first-child {
  color: var(--p-tinta);
}

.pz-tabla .der {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pz-chip {
  display: inline-block;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: var(--u);
  text-transform: uppercase;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(48, 217, 138, 0.13);
  color: var(--p-verde);
}

.pz-chip--ambar {
  background: rgba(240, 169, 44, 0.14);
  color: var(--p-ambar);
}

.pz-chip--rojo {
  background: rgba(242, 109, 109, 0.14);
  color: var(--p-rojo);
}

.pz-chip--gris {
  background: var(--p-sup-3);
  color: var(--p-tinta-2);
}

/* ─────────────────────────── pieza: una base por inmobiliaria ─────────────── */

.pz-aisla {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: calc(20 * var(--u));
  padding: clamp(24px, 6vh, 64px) clamp(18px, 5cqw, 56px) clamp(170px, 26vh, 245px);
}

.pz-base {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  background: var(--p-sup);
  border: var(--u) solid var(--p-linea-2);
  border-radius: calc(10 * var(--u));
}

.pz-base__sello {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(8 * var(--u));
  background: rgba(48, 217, 138, 0.1);
  color: var(--p-verde);
}

.pz-base__sello svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.pz-base__quien {
  font-size: calc(14 * var(--u));
  font-weight: 500;
  color: var(--p-tinta);
}

.pz-base__archivo {
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-3);
  margin-top: calc(3 * var(--u));
}

.pz-base__dato {
  text-align: right;
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-2);
}

/* El tajo: deja ver, en el espacio entre dos bases, que no hay paso. */
.pz-tajo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(12 * var(--u));
  color: var(--p-tinta-3);
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase;
}

.pz-tajo::before,
.pz-tajo::after {
  content: '';
  height: var(--u);
  background: repeating-linear-gradient(
    90deg,
    var(--p-linea-2) 0 calc(5 * var(--u)),
    transparent calc(5 * var(--u)) calc(10 * var(--u))
  );
}

/* ─────────────────────────────── pieza: partida doble ────────────────────── */

.pz-libro {
  position: absolute;
  inset: 0;
  padding: clamp(24px, 6vh, 64px) clamp(18px, 5cqw, 56px) clamp(170px, 26vh, 245px);
  display: grid;
  align-content: center;
  gap: calc(18 * var(--u));
}

.pz-asiento {
  background: var(--p-sup);
  border: var(--u) solid var(--p-linea);
  border-radius: calc(10 * var(--u));
  overflow: hidden;
}

.pz-asiento__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border-bottom: var(--u) solid var(--p-linea);
}

.pz-renglon {
  display: grid;
  grid-template-columns: 1fr calc(104 * var(--u)) calc(104 * var(--u));
  gap: calc(10 * var(--u));
  padding: calc(11 * var(--u)) calc(16 * var(--u));
  font-size: calc(12.5 * var(--u));
  border-bottom: var(--u) solid var(--p-linea);
  color: var(--p-tinta-2);
}

.pz-renglon span:first-child {
  color: var(--p-tinta);
}

.pz-renglon i {
  font-style: normal;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pz-renglon--rotulos {
  color: var(--p-tinta-3);
}

.pz-renglon--rotulos span,
.pz-renglon--rotulos i {
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase;
  color: inherit;
}

.pz-renglon--terceros {
  background: rgba(48, 217, 138, 0.055);
  box-shadow: inset 2px 0 0 var(--p-verde);
}

.pz-renglon--suma {
  border-bottom: 0;
  color: var(--p-tinta);
  font-weight: 500;
  background: var(--p-sup-2);
}

.pz-cuadra {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
  color: var(--p-verde);
}

.pz-cuadra svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* ──────────────────────────────── pieza: centro de mando ─────────────────── */

.pz-mando {
  position: absolute;
  inset: 0;
  padding: clamp(20px, 5vh, 56px) clamp(18px, 5cqw, 56px) clamp(180px, 27vh, 250px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
}

.pz-nivel {
  display: flex;
  justify-content: center;
  gap: calc(22 * var(--u));
  flex-wrap: wrap;
}

/* Los tramos verticales entre niveles del organigrama. */
.pz-vara {
  width: var(--u);
  height: calc(28 * var(--u));
  background: var(--p-linea-2);
}

.pz-reparto {
  width: min(calc(760 * var(--u)), 100%);
  height: calc(28 * var(--u));
  border-top: var(--u) solid var(--p-linea-2);
  border-left: var(--u) solid var(--p-linea-2);
  border-right: var(--u) solid var(--p-linea-2);
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  position: relative;
}

.pz-reparto::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: var(--u);
  height: calc(28 * var(--u));
  background: var(--p-linea-2);
  transform: translate(-50%, -100%);
}

.pz-ficha {
  width: calc(162 * var(--u));
  background: var(--p-sup);
  border: var(--u) solid var(--p-linea-2);
  border-radius: calc(9 * var(--u));
  overflow: hidden;
  text-align: left;
}

.pz-ficha--jefe {
  width: calc(232 * var(--u));
}

/* Tiras de colores por proceso: no es un semáforo único, son tres tramos. */
.pz-tiras {
  display: flex;
  height: calc(4 * var(--u));
}

.pz-tiras i {
  flex: 1;
}

.pz-tiras i[data-v='b'] {
  background: var(--p-verde);
}

.pz-tiras i[data-v='a'] {
  background: var(--p-ambar);
}

.pz-tiras i[data-v='r'] {
  background: var(--p-rojo);
}

.pz-ficha__cuerpo {
  padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  display: grid;
  gap: calc(5 * var(--u));
}

.pz-ficha__quien {
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  color: var(--p-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pz-ficha__rol {
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
  color: var(--p-tinta-3);
}

.pz-ficha__dato {
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-2);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────── pieza: mapa ────────────────────────── */

.pz-mapa {
  position: absolute;
  inset: 0;
  background: #101010;
}

/* El damero de manzanas y las avenidas, en degradados: exactos, livianos y
   nítidos a cualquier tamaño. */
.pz-mapa__calles {
  position: absolute;
  inset: -2px;
  background-image:
    repeating-linear-gradient(90deg, #212121 0 var(--u), transparent var(--u) calc(86 * var(--u))),
    repeating-linear-gradient(0deg, #212121 0 var(--u), transparent var(--u) calc(74 * var(--u))),
    repeating-linear-gradient(90deg, #2d2d2d 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(344 * var(--u))),
    repeating-linear-gradient(0deg, #2d2d2d 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(370 * var(--u)));
}

.pz-mapa__avenidas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pz-mapa__avenidas path {
  fill: none;
  stroke: #343434;
  stroke-width: 3;
}

.pz-mapa__avenidas .agua {
  fill: #16201d;
  stroke: none;
}

.pz-chincheta {
  position: absolute;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #101010;
  transform: translate(-50%, -50%);
}

.pz-chincheta[data-c='cliente'] {
  background: var(--p-verde);
}

.pz-chincheta[data-c='marcada'] {
  background: #8a8a8a;
}

.pz-chincheta[data-c='visita'] {
  background: var(--p-azul);
}

.pz-chincheta[data-c='alerta'] {
  background: var(--p-ambar);
}

/* Un pulso lento en una sola chincheta: señala dónde mirar sin animar todo. */
.pz-chincheta--viva::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: var(--u) solid var(--p-verde);
  animation: pz-pulso 2600ms ease-out infinite;
}

@keyframes pz-pulso {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.pz-globo {
  position: absolute;
  width: calc(234 * var(--u));
  background: rgba(20, 20, 20, 0.95);
  border: var(--u) solid var(--p-linea-2);
  border-radius: calc(10 * var(--u));
  padding: calc(13 * var(--u)) calc(14 * var(--u));
  display: grid;
  gap: calc(7 * var(--u));
  backdrop-filter: blur(calc(6 * var(--u)));
}

.pz-globo__dir {
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  color: var(--p-tinta);
}

.pz-globo__precio {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  color: var(--p-verde);
  font-variant-numeric: tabular-nums;
}

.pz-globo__linea {
  display: flex;
  gap: calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-3);
}

.pz-leyenda {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(30 * var(--u));
  background: rgba(16, 16, 16, 0.9);
  border: var(--u) solid var(--p-linea);
  border-radius: calc(9 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  display: grid;
  gap: calc(8 * var(--u));
}

.pz-leyenda div {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: calc(11 * var(--u));
  color: var(--p-tinta-2);
}

.pz-leyenda b {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  flex: none;
}

/* ───────────────────────────────────── pieza: la red ─────────────────────── */

/* La constelacion se encoge para dejarle sitio al titulo: los nodos estan en
   porcentajes, asi que mover este recuadro los acomoda a todos de una. */
.pz-red {
  position: absolute;
  inset: clamp(16px, 4vh, 44px) 0 clamp(180px, 27vh, 250px) 0;
}

.pz-red__trama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pz-red__trama line {
  stroke: #2c2c2c;
  stroke-width: 1;
}

.pz-red__trama line[data-activa] {
  stroke: rgba(48, 217, 138, 0.55);
}

.pz-nodo {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: calc(7 * var(--u));
  width: calc(112 * var(--u));
  text-align: center;
}

.pz-nodo b {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: var(--p-tinta-3);
  box-shadow: 0 0 0 calc(4 * var(--u)) #121212;
}

.pz-nodo span {
  font-size: calc(10.5 * var(--u));
  color: var(--p-tinta-3);
  letter-spacing: calc(0.3 * var(--u));
}

.pz-nodo[data-rol='centro'] {
  width: calc(150 * var(--u));
}

.pz-nodo[data-rol='centro'] b {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  background: var(--p-verde);
}

.pz-nodo[data-rol='centro'] span {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase;
  color: var(--p-tinta);
}

.pz-nodo[data-rol='socia'] b {
  background: var(--p-verde);
}

.pz-nodo[data-rol='socia'] span {
  color: var(--p-tinta-2);
}

/*
  Cortes internos. El ancho de diseno de la pieza es siempre `--marco-n`, asi
  que alcanza con colgarlos de los mismos escalones: a 980 el trabajo pasa a una
  columna, a 720 los indicadores van de a dos, y a 540 la pieza se dibuja como
  se dibujaria en un telefono.
*/
@media (max-width: 1023px) {
  .pz-dos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 879px) {
  .pz-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 619px) {
  .pz-aisla,
  .pz-libro,
  .pz-mando {
    align-content: start;
    padding-top: clamp(22px, 5vh, 44px);
  }

  .pz-red {
    inset: clamp(14px, 3vh, 36px) 0 clamp(214px, 33vh, 272px) 0;
  }

  .pz-app {
    grid-template-columns: calc(50 * var(--u)) 1fr;
  }

  .pz-lienzo {
    padding: calc(16 * var(--u)) calc(14 * var(--u));
    gap: calc(14 * var(--u));
  }

  .pz-top__fin {
    display: none;
  }

  .pz-kpi {
    padding: calc(13 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  }

  .pz-tabla th:nth-child(2),
  .pz-tabla td:nth-child(2),
  .pz-tabla th:nth-child(5),
  .pz-tabla td:nth-child(5) {
    display: none;
  }

  .pz-nodo {
    width: calc(86 * var(--u));
  }

  .pz-nodo span {
    font-size: calc(9 * var(--u));
  }

  .pz-globo {
    width: calc(196 * var(--u));
  }

  .pz-leyenda {
    display: none;
  }

  .pz-ficha {
    width: calc(108 * var(--u));
  }

  .pz-ficha--jefe {
    width: calc(148 * var(--u));
  }

  .pz-nivel:last-child .pz-ficha:nth-child(n + 4) {
    display: none;
  }
}

/* En un telefono angosto, tres tarjetas por fila solo entran si se achican:
   partirlas en dos filas rompe la lectura del organigrama. */
@media (max-width: 479px) {
  .pz-nivel {
    gap: calc(15 * var(--u));
  }

  .pz-ficha {
    width: calc(102 * var(--u));
  }

  .pz-nivel--medio .pz-ficha {
    width: calc(130 * var(--u));
  }

  /* En una tarjeta angosta es mejor un nombre en dos renglones que un nombre
     cortado con puntos suspensivos. */
  .pz-ficha__quien {
    white-space: normal;
  }

  .pz-ficha--jefe {
    width: calc(150 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pz-chincheta--viva::after {
    animation: none;
    opacity: 0;
  }
}