/* ==========================================================
   NAZAN v3 — Primitivas compartidas de la reestructura 1.4.0
   ----------------------------------------------------------
   Se carga DESPUÉS de nazan.css. Todo lo de acá usa prefijos
   nuevos (nz-band, nz-shead, nz-phero, nz-convo, nz-pnav,
   nz-steps, nz-bento, nz-split) para no pisar nada anterior.

   Vocabulario común de las páginas. Si una página necesita
   algo propio, va en assets/css/pages/<pagina>.css.
   ========================================================== */

:root {
  --ink-2: #141416;              /* superficie elevada sobre --ink */
  --ink-3: #1D1D21;              /* borde/estado sobre --ink */
  --cream-mid: rgba(250, 247, 242, 0.72);
  --cream-soft: rgba(250, 247, 242, 0.55);
  --cream-faint: rgba(250, 247, 242, 0.32);
  --line-dark: rgba(250, 247, 242, 0.12);
  --accent-2: #0891B2;           /* cian ya presente en la tarjeta CTA de IT */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --band-y: clamp(72px, 9vw, 132px);
  --header-h: 69px;   /* alto del header en reposo (logo 36 + 16px de padding x2) */
}

/* ----------------------------------------------------------
   BANDAS — ritmo vertical y alternancia clara/oscura.
   Regla de diseño: nunca más de dos bandas seguidas del
   mismo fondo. La alternancia es lo que da ritmo a la página.
   ---------------------------------------------------------- */
.nz-band {
  padding: var(--band-y) var(--gutter);
  position: relative;
}
.nz-band--tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.nz-band--dark {
  background: var(--ink);
  color: var(--cream);
}
.nz-band--dark h1, .nz-band--dark h2, .nz-band--dark h3, .nz-band--dark h4 { color: var(--cream); }
.nz-band--dark p { color: var(--cream-mid); }
/* Lavado de color: solo en bandas oscuras, siempre sutil y sin bordes duros. */
.nz-band--wash::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 82% 0%, rgba(124, 58, 237, 0.28), transparent 62%),
    radial-gradient(50% 70% at 8% 100%, rgba(8, 145, 178, 0.16), transparent 60%);
}
.nz-band > * { position: relative; z-index: 1; }
.nz-band__inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ----------------------------------------------------------
   ENCABEZADO DE SECCIÓN
   Alineado a la izquierda por defecto: el centrado permanente
   era una de las causas de la monotonía de la v2.
   ---------------------------------------------------------- */
.nz-shead { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.nz-shead--center { margin-left: auto; margin-right: auto; text-align: center; }
.nz-shead__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.nz-band--dark .nz-shead__eyebrow { color: rgba(167, 139, 250, 0.95); }
.nz-shead__title {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
}
.nz-shead__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.nz-shead__lede {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 20px 0 0;
  max-width: 62ch;
}
.nz-band--dark .nz-shead__lede { color: var(--cream-mid); }

/* ----------------------------------------------------------
   HERO DE PILAR
   Oscuro, a dos columnas, con el número del pilar como marca
   de agua. El numeral es real: 01-04 es la posición del pilar
   en el sitio, la misma que usa la navegación.
   ---------------------------------------------------------- */
.nz-phero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(56px, 9vw, 110px)) var(--gutter) clamp(64px, 8vw, 104px);
}
.nz-phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 74% at 78% 4%, rgba(124, 58, 237, 0.34), transparent 62%),
    radial-gradient(46% 62% at 4% 96%, rgba(8, 145, 178, 0.18), transparent 60%);
  pointer-events: none;
}
.nz-phero__num {
  position: absolute;
  left: clamp(8px, 2vw, 28px);
  bottom: -0.16em;
  font-family: var(--font-serif);
  font-size: clamp(170px, 23vw, 330px);
  line-height: 1;
  color: rgba(250, 247, 242, 0.058);
  pointer-events: none;
  user-select: none;
}
.nz-phero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.nz-phero--split .nz-phero__inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .nz-phero--split .nz-phero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.nz-phero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(167, 139, 250, 0.95);
  margin: 0 0 22px;
}
.nz-phero__title {
  font-size: clamp(38px, 6vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0;
  color: var(--cream);
}
.nz-phero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #C4B5FD;
}
.nz-phero__desc {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--cream-mid);
  margin: 26px 0 0;
  max-width: 54ch;
}
.nz-phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
/* Enlaces dentro de la bajada del hero: el color de link del tema es oscuro
   y sobre la banda negra resultaba ilegible. */
.nz-phero__desc a {
  color: #C4B5FD;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease-out);
}
.nz-phero__desc a:hover { color: var(--cream); }

/* Botones sobre fondo oscuro */
.nz-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.nz-btn:hover { transform: translateY(-1px); }
.nz-btn--solid { background: var(--cream); color: var(--ink); }
.nz-btn--solid:hover { background: #fff; }
.nz-btn--ghost { background: transparent; color: var(--cream); border-color: var(--line-dark); }
.nz-btn--ghost:hover { border-color: rgba(250, 247, 242, 0.4); background: rgba(250, 247, 242, 0.06); }
/* Variantes sobre fondo claro */
.nz-btn--ink { background: var(--ink); color: var(--cream); }
.nz-btn--ink:hover { background: #000; }

/* ----------------------------------------------------------
   CONVERSACIÓN — el componente firma del sitio.
   Es DOM real (una lista ordenada de mensajes), no una imagen:
   se lee con lector de pantalla, se traduce y no pesa.
   ---------------------------------------------------------- */
.nz-convo { margin: 0; }
.nz-convo__frame {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.nz-band:not(.nz-band--dark) .nz-convo__frame,
.nz-phero ~ * .nz-convo__frame { box-shadow: 0 24px 60px -32px rgba(10, 10, 10, 0.45); }
.nz-convo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(250, 247, 242, 0.03);
}
.nz-convo__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34D399;
  flex: none;
}
.nz-convo__who {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
}
.nz-convo__channel {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.nz-convo__log {
  list-style: none;
  margin: 0;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nz-convo__msg { display: flex; }
.nz-convo__msg--agente { justify-content: flex-end; }
.nz-convo__bubble {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.nz-convo__msg--cliente .nz-convo__bubble {
  background: rgba(250, 247, 242, 0.08);
  color: var(--cream);
  border-bottom-left-radius: 5px;
}
.nz-convo__msg--agente .nz-convo__bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.nz-convo__text { margin: 0; }
.nz-convo__msg--agente .nz-convo__text { color: #fff; }
.nz-convo__time {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.55;
}
.nz-convo__caption {
  margin: 16px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream-faint);
}
.nz-band:not(.nz-band--dark) .nz-convo__caption { color: var(--ink-faint); }

/* Revelado escalonado. Sin JS los mensajes ya están visibles. */
html.js .nz-convo[data-nz-convo] .nz-convo__msg {
  opacity: 0;
  transform: translateY(10px);
}
html.js .nz-convo[data-nz-convo].is-on .nz-convo__msg {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 260ms);
}

/* ----------------------------------------------------------
   PASOS NUMERADOS — para procesos reales, donde el orden
   es información. No usar como decoración de listas.
   ---------------------------------------------------------- */
.nz-steps { display: grid; gap: 1px; background: var(--line); }
.nz-band--dark .nz-steps { background: var(--line-dark); }
@media (min-width: 980px) {
  .nz-steps--5 { grid-template-columns: repeat(5, 1fr); }
}
.nz-step {
  background: var(--cream);
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nz-band--dark .nz-step { background: var(--ink); }
.nz-step__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.nz-step__title {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0;
}
.nz-step__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}
.nz-band--dark .nz-step__desc { color: var(--cream-soft); }
.nz-tile {
  background: rgba(10, 10, 10, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out),
              transform 0.25s var(--ease-out);
}
.nz-tile:hover { border-color: rgba(124, 58, 237, 0.35); transform: translateY(-2px); }
.nz-band--dark .nz-tile {
  background: var(--ink-2);
  border-color: var(--line-dark);
}
.nz-band--dark .nz-tile:hover { border-color: rgba(167, 139, 250, 0.45); }

/* Pastillas de etiqueta reutilizables */
.nz-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.nz-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.nz-band--dark .nz-tag { border-color: var(--line-dark); color: var(--cream-soft); }

/* ----------------------------------------------------------
   SPLIT — dos columnas asimétricas. La izquierda sostiene el
   encabezado mientras la derecha desplaza; en la v2 esa
   columna quedaba vacía y se veía como un hueco.
   ---------------------------------------------------------- */
.nz-split { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .nz-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .nz-split__aside { position: sticky; top: 104px; }
}

/* ----------------------------------------------------------
   NAVEGADOR DE PILARES — pie de cada página de pilar.
   Muestra los otros tres y por eso el número importa:
   es el mapa del sitio, no un adorno.
   ---------------------------------------------------------- */
.nz-pnav { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 760px) { .nz-pnav { grid-template-columns: repeat(3, 1fr); } }
.nz-pnav__item {
  background: var(--cream);
  padding: clamp(24px, 3vw, 34px);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.25s var(--ease-out);
}
.nz-pnav__item:hover { background: rgba(124, 58, 237, 0.05); }
.nz-pnav__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.nz-pnav__item:hover .nz-pnav__num { color: var(--accent); }
.nz-pnav__title {
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}
.nz-pnav__lede { font-size: 13.5px; line-height: 1.55; color: var(--ink-mid); margin: 0; }

/* ----------------------------------------------------------
   ACCESIBILIDAD Y MOVIMIENTO
   ---------------------------------------------------------- */
.nz-band a:focus-visible,
.nz-phero a:focus-visible,
.nz-btn:focus-visible,
.nz-pnav__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.nz-band--dark a:focus-visible,
.nz-phero a:focus-visible { outline-color: #C4B5FD; }

@media (prefers-reduced-motion: reduce) {
  html.js .nz-convo[data-nz-convo] .nz-convo__msg,
  html.js .nz-convo[data-nz-convo].is-on .nz-convo__msg {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nz-btn:hover, .nz-tile:hover { transform: none; }
}


/* ==========================================================
   NAZAN v1.5 — Sistema de pilares, imágenes y movimiento
   ----------------------------------------------------------
   Se agrega sobre las primitivas de arriba, no las reemplaza.
   ========================================================== */

/* ----------------------------------------------------------
   COLOR POR PILAR
   Cada pilar tiene un tono propio. NO es decoración: es la
   señal de "en cuál de los cuatro frentes estás". Por eso se
   usa sólo en tres lugares — el campo de señal del home, el
   filete/numeral de la tarjeta de pilar y el hero de cada
   página de pilar. En todo el resto el acento sigue siendo
   el violeta de marca, uno solo.
   ---------------------------------------------------------- */
:root {
  --p-ia: #7C3AED;         --p-ia-lit: #A78BFA;
  --p-desarrollo: #0E7490; --p-desarrollo-lit: #67E8F9;
  --p-marketing: #B45309;  --p-marketing-lit: #F3C77C;
  --p-it: #047857;         --p-it-lit: #6EE7B7;
}
/* Scope: cualquier bloque marcado con data-pilar hereda su tono
   en --pilar (fondo claro) y --pilar-lit (fondo oscuro). */
[data-pilar="ia"]         { --pilar: var(--p-ia);         --pilar-lit: var(--p-ia-lit); }
[data-pilar="desarrollo"] { --pilar: var(--p-desarrollo); --pilar-lit: var(--p-desarrollo-lit); }
[data-pilar="marketing"]  { --pilar: var(--p-marketing);  --pilar-lit: var(--p-marketing-lit); }
[data-pilar="it"]         { --pilar: var(--p-it);         --pilar-lit: var(--p-it-lit); }

/* ----------------------------------------------------------
   FIGURA — encuadre común de todas las imágenes del sitio.
   Las fotos son una serie: mismo fondo carbón, misma luz
   violeta/cian. El marco las trata igual en todas las páginas
   y sostiene la relación de aspecto antes de que carguen.
   ---------------------------------------------------------- */
.nz-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  aspect-ratio: 16 / 9;
}
.nz-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velo: baja el contraste de la foto para que el texto que va
   encima o al lado siga siendo lo primero que se lee. */
.nz-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.55) 100%);
}

/* ----------------------------------------------------------
   MOVIMIENTO — utilidades de revelado.
   Regla dura: el estado inicial oculto lo pone SIEMPRE el JS
   (nunca el CSS). Si el JS falla o no corre, todo el contenido
   queda visible. Con prefers-reduced-motion el JS ni siquiera
   oculta: no hay nada que revelar.
   ---------------------------------------------------------- */
.nz-line {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
  transform-origin: left center;
}
.nz-band--dark .nz-line, .nz-phero .nz-line { background: var(--line-dark); }

/* ==========================================================
   HERO VISUALS — el visual animado del hero de cada página
   (template-parts/component-hero-visual.php).

   Cinco mecanismos distintos a propósito. Si las cinco páginas
   usaran el mismo gesto —líneas que convergen, por ejemplo— el
   sistema se leería como decorado repetido en vez de como el
   titular de cada página dibujado.

   Todo lo de acá es el ESTADO EN REPOSO: completo, quieto y
   legible. El estado inicial escondido y el movimiento los pone
   el JS. Sin GSAP, o con "menos movimiento" activado, el visual
   se ve igual, sólo que no se mueve.
   ========================================================== */
.nz-hviz {
  position: relative;
  color: var(--cream);
}

/* ----------------------------------------------------------
   DEV — /desarrollo/: "Lo construimos conectado a tu operación."
   Dos tiempos: el esqueleto de la interfaz se arma, y después
   los sistemas se enchufan por abajo.
   ---------------------------------------------------------- */
.nz-hviz--dev {
  display: grid;
  gap: 0;
}
.nz-hviz__frame {
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(250, 247, 242, 0.055), rgba(250, 247, 242, 0.015));
  padding: 16px 18px 22px;
}
.nz-hviz__chrome {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.nz-hviz__chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.16);
}
.nz-hviz__chrome i:first-child {
  background: color-mix(in srgb, var(--pilar-lit, #67E8F9) 65%, transparent);
}
.nz-hviz__blocks {
  display: grid;
  gap: 12px;
}
.nz-hviz__b {
  height: 10px;
  width: var(--w, 100%);
  border-radius: 3px;
  background: rgba(250, 247, 242, 0.13);
  transform-origin: left center;
}
.nz-hviz__b--split {
  display: flex;
  gap: 12px;
  width: 100%;
  height: auto;
  background: none;
  margin-top: 4px;
}
.nz-hviz__b--split i {
  height: 46px;
  width: var(--w);
  border-radius: 6px;
  border: 1px solid var(--line-dark);
  background: rgba(250, 247, 242, 0.05);
  transform-origin: left center;
}
/* Los sistemas cuelgan del marco: primero el cordón, después la
   pastilla. El orden importa — enchufar es una acción, no un fade. */
.nz-hviz__ports {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.nz-hviz__port {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nz-hviz__cord {
  width: 1px;
  height: 26px;
  background: var(--line-dark);
  transform-origin: top center;
}
.nz-hviz__chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 7px 13px;
  background: rgba(10, 10, 10, 0.5);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   FUNNEL — /marketing/: "Armamos el funnel entero."
   Las seis etapas reales de la página, angostándose, y un lead
   bajando por ellas. Las barras no son datos: son las etapas.
   ---------------------------------------------------------- */
.nz-hviz--funnel {
  padding: 8px 0 4px;
}
.nz-hviz__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.nz-hviz__stage {
  position: relative;
  width: var(--w, 100%);
  min-width: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nz-hviz__bar {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid var(--line-dark);
  background: rgba(250, 247, 242, 0.05);
}
.nz-hviz__slabel {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  padding: 10px 8px;
  white-space: nowrap;
}
/* El lead que baja. Sin JS no aparece: es un objeto en movimiento,
   quieto no significaría nada. */
.nz-hviz__lead {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--pilar-lit, #F3C77C);
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--pilar-lit, #F3C77C) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* ----------------------------------------------------------
   STATUS — /it/: "Tu stack tecnológico, ordenado."
   Los tres grupos de servicio de la página entrando en orden.
   Sin cifras: no hay telemetría real que mostrar y no se
   inventan métricas de disponibilidad.
   ---------------------------------------------------------- */
.nz-hviz--status {
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 4px 20px;
  background: linear-gradient(180deg, rgba(250, 247, 242, 0.055), rgba(250, 247, 242, 0.015));
}
.nz-hviz__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nz-hviz__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(64px, 9vw, 104px);
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
}
.nz-hviz__row:last-child { border-bottom: 0; }
.nz-hviz__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pilar-lit, #6EE7B7);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--pilar-lit, #6EE7B7) 40%, transparent);
}
.nz-hviz__rname {
  font-size: 14.5px;
  letter-spacing: -0.012em;
  color: var(--cream);
}
.nz-hviz__track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-dark);
  overflow: hidden;
}
.nz-hviz__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--pilar-lit, #6EE7B7);
  transform-origin: left center;
}

/* ----------------------------------------------------------
   EQUIPO — /quienes-somos/: "Cuatro frentes que sostiene la
   misma gente." Cuatro columnas de distinta altura sobre UNA
   base. La base es el argumento; las alturas son distintas
   justamente para que no se lea como un gráfico con datos.
   ---------------------------------------------------------- */
.nz-hviz__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: clamp(76px, 11vh, 124px) auto;
  column-gap: clamp(10px, 1.6vw, 22px);
  align-items: end;
}
/* Columna explícita y no auto-ubicación: la base ocupa toda la fila 1, y un
   ítem con posición definida se coloca ANTES que los automáticos — sin este
   grid-column las cuatro columnas terminaban expulsadas a columnas implícitas
   a la derecha de la base. Acá se superponen a propósito. */
.nz-hviz__pillar {
  grid-row: 1;
  grid-column: var(--col, auto);
  /* Angostas y centradas sobre su etiqueta: el visual cruza todo el ancho
     del hero, y a 1fr de ancho serían cuatro losas, no cuatro frentes. */
  width: clamp(56px, 9vw, 118px);
  justify-self: center;
  height: 100%;
  border-radius: 6px 6px 0 0;
  border: 1px solid color-mix(in srgb, var(--pilar-lit, #A78BFA) 32%, transparent);
  border-bottom: 0;
  /* Las juntas horizontales son lo que las saca del terreno del gráfico:
     una columna con hiladas se lee como algo construido. */
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 23.4%,
      color-mix(in srgb, var(--pilar-lit, #A78BFA) 30%, transparent) 23.4% 25%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pilar-lit, #A78BFA) 26%, transparent),
      color-mix(in srgb, var(--pilar, #7C3AED) 7%, transparent)
    );
  transform-origin: bottom center;
}
.nz-hviz__cname {
  grid-row: 2;
  grid-column: var(--col, auto);
  padding-top: 13px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  text-align: center;
}
/* Una celda más de la misma grilla, cruzando las cuatro columnas:
   así la base queda exactamente al pie de las cuatro, con gaps y
   todo, sin depender de medir la fila de nombres. */
.nz-hviz__base {
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: end;
  height: 1px;
  background: var(--cream-faint);
  transform-origin: left center;
}

/* ----------------------------------------------------------
   SLA — /contacto/: "Respondemos en menos de 24hs hábiles."
   El único dato duro de la página, dibujado. El hero de contacto
   es chico a propósito, así que el visual también.
   ---------------------------------------------------------- */
.nz-hviz--sla {
  width: clamp(148px, 22vw, 184px);
  aspect-ratio: 1;
}
.nz-hviz__dial {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.nz-hviz__dialtrack {
  stroke: var(--line-dark);
  stroke-width: 2;
}
.nz-hviz__dialarc {
  stroke: var(--pilar-lit, #C4B5FD);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  /* Arco de ~78%: es una promesa de plazo, no un porcentaje de nada.
     Dejarlo abierto evita que se lea como una métrica al 100%. */
  stroke-dashoffset: 22;
}
.nz-hviz__slabody {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.nz-hviz__slaval {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0;
}
.nz-hviz__slalabel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-soft);
  margin: 10px 0 0;
}