/* ============================================================
   ATLA — automatizacion.css
   Universo propio: carbón cálido y oro.

   ------------------------------------------------------------
   POR QUÉ OSCURA, SI CONTABILIDAD YA LO ES

   El oro es el color de Automatización en todo el sitio (píldora, fila del
   Home) y **ninguna otra página lo usa de universo**. Y el oro pertenece al
   fondo oscuro: sobre papel claro da 2,41:1 y hay que reemplazarlo por un
   dorado profundo (§7octies); sobre este carbón da **8,04:1** tal cual, sin
   retocarlo. Llevar esta página a fondo claro sería desperdiciar el único
   color que le queda propio.

   La distinción con Contabilidad es deliberada y está en la temperatura:

     Contabilidad   #08090B   negro con una gota de AZUL, sin un tono cálido
     Automatización #0B0A08   negro con una gota de MARRÓN, y oro encima

   Y en todo lo demás son opuestas: Contabilidad va con foto, alineada a la
   izquierda y con luz dura; ésta no tiene ni una imagen, va centrada y su
   materia es geometría.

   ------------------------------------------------------------
   LA IDEA, QUE SALE DE LAS TRES REFERENCIAS

   Toolkit, Figr y Basedash no se parecen en nada salvo en una cosa: **el
   fondo es un sistema trabajando, atenuado, y el titular encima**. Que es,
   literalmente, lo que esta página vende — que las cosas pasen solas atrás
   para que nadie tenga que mirarlas.

   Por eso el hero no tiene un fondo decorativo sino una **grilla de cubos**
   que se mueve sola y reacciona al cursor: cada cubo es una parte del
   negocio, y el titular dice "conectá cada parte de tu negocio en un solo
   lugar". El fondo no ilustra la frase: es la frase.
   ============================================================ */

.pag-automatizacion {
  /* Tipografía propia (24/08/2026). Times New Roman, pedida por el cliente.
     Está en Windows y en Mac, pero NO en Android ni en Linux, así que va
     Tinos detrás: es métricamente idéntica —mismo ancho letra por letra—,
     así que donde no haya Times el renglón ocupa exactamente lo mismo y la
     maqueta no se mueve. Solo los titulares: el cuerpo sigue en Inter,
     porque una página entera en Times se lee como un documento de Word y
     esta es la página del sitio que habla de automatizar el trabajo. */
  --font-display: "Times New Roman", Tinos, Times, serif;
  --peso-display:  400;
  --track-display: -0.01em;
  --font-cifras:  var(--font-display);   /* las cifras 01–05 siguen al titular */

  --carbon:   #0B0A08;   /* negro con una gota de marrón, no negro puro */
  --carbon-2: #131110;   /* segunda superficie, para las bandas alternas */
  --carbon-3: #17140F;   /* la más cálida: solo el bloque del flujo */
  --oro:      #C9971F;

  background: var(--carbon);
  color: var(--ink-on-dark);

  /* Los roles semánticos dados vuelta: todo lo de base.css se adapta solo. */
  --ink: var(--ink-on-dark);
  --ink-muted: rgba(243, 236, 224, 0.66);
  --line: rgba(201, 151, 31, 0.22);
  --line-soft: rgba(201, 151, 31, 0.10);
  --accent: var(--oro);
  /* Sobre carbón el oro llega a 8,04:1: acá NO hace falta el dorado
     profundo de `--accent-texto`, que sobre oscuro no se vería (§7octies). */
  --accent-texto: var(--oro);

  /* El isotipo se calienta: la barra marino se pierde sobre el carbón. */
  --logo-1: rgba(243, 236, 224, 0.40);
  --logo-2: #8A6A2C;
  --logo-3: var(--oro);
  --logo-4: var(--ink-on-dark);
  --logo-diamond: var(--oro);
  --logo-rule: rgba(243, 236, 224, 0.72);
}

/* Barra sólida, sin `backdrop-filter`: en un elemento fijo obliga a
   redesenfocar la franja de atrás en cada cuadro de scroll, y detrás hay
   una grilla de cubos animándose. (Lección de Consultoría, §7ter.) */
.pag-automatizacion .topbar.is-scrolled {
  background: #0E0C0A;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}

/* ============================================================
   Hero
   Sangra bajo la cabecera (§6) para que la grilla de cubos llegue al borde
   de arriba y la barra flote sobre ella, igual que en Diseño Web. Si el
   hero arrancara debajo, quedaría una franja de carbón muerto de 226px.
   ============================================================ */
.hero-auto {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  /* Alto = pantalla, sin topes en px. Los topes de antes
     (clamp(620px, 100svh, 900px)) rompían el zoom: al alejar, el viewport
     crece en px CSS pero el techo de 900px lo cortaba, así que el hero
     dejaba de llenar la pantalla y la foto —al ser `cover`— se achicaba
     con él. Con 100svh a secas el bloque siempre mide exactamente la
     pantalla física, a cualquier zoom, y `cover` reencuadra igual porque
     la proporción del viewport no cambia. `min-` y no `height` para que
     pueda crecer si el contenido no entra en pantallas bajas. */
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: var(--sp-7);
  text-align: center;
}

/* Capa 1 — la grilla de cubos.
   Cuadrada y centrada: los cubos son cuadrados y una grilla de cubos
   estirada deja de leerse como cubos. */
.hero-auto__cubos {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -3;
  width: min(112vh, 96vw);
  aspect-ratio: 1 / 1;
  /* La grilla NO recibe punteros: está detrás del titular y del CTA, y si
     los recibiera se los comería. Por eso `cubos.js` escucha el
     `pointermove` en el hero (`data-host`) y convierte coordenadas — es la
     misma solución que `rejilla.js` (§7sexies). Enganchado en sí mismo el
     efecto no se enteraba nunca de que el mouse se movía. */
  pointer-events: none;
}

/* Capa 2 — el velo.
   Va ENTRE los cubos y el texto, nunca encima de todo: su trabajo es
   proteger el titular del fondo, no apagar el efecto. Es la regla que
   costó encontrar en el hero de Contabilidad (§7quater). */
.hero-auto__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    var(--ruido),
    radial-gradient(58% 46% at 50% 52%, rgba(11, 10, 8, 0.94) 0%, rgba(11, 10, 8, 0.55) 55%, transparent 78%),
    linear-gradient(180deg, rgba(11, 10, 8, 0.88) 0%, transparent 26%, transparent 74%, var(--carbon) 100%);
  background-size: var(--ruido-tam) var(--ruido-tam), auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.hero-auto__inner {
  position: relative;
  /* En rem y NO en `ch`: la unidad `ch` se resuelve contra la fuente de ESTE
     elemento (el cuerpo, 17px), no contra la serif de 86px del titular. Con
     `22ch` el titular quedaba en una columna de 190px, una palabra por
     renglon. Es una trampa facil de repetir. */
  max-width: 54rem;
  margin-inline: auto;
}

.hero-auto__titulo {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin-top: var(--sp-3);
  text-wrap: balance;
}

.hero-auto__lead {
  max-width: 54ch;
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-lead);
  color: var(--ink-muted);
}

.hero-auto__cta { margin-top: var(--sp-5); }

/* ============================================================
   Las palabras que entran desenfocadas (`borroso.js`)
   ============================================================ */
.borroso__palabra { display: inline-block; }

/* Antes de que la sección entre en pantalla, las palabras están puestas
   pero invisibles. `[data-borroso="listo"]` lo pone el JS: si el JS no
   corre, esta regla no aplica y el titular se lee normal. */
[data-borroso="listo"] .borroso__palabra {
  opacity: 0;
  filter: blur(10px);
  translate: 0 -50px;
}

/* 700ms = `stepDuration` 0.35 por los dos tramos del original, y easing
   LINEAL, que es el `easing = t => t` que trae por defecto. La forma del
   movimiento no la da la curva: la dan los tres fotogramas, y en especial
   el sobrepaso del medio.

   `will-change` solo mientras anima. Puesto siempre reservaria una capa de
   GPU por palabra para toda la vida de la pagina (leccion del eco, 7ter). */
[data-borroso="visto"] .borroso__palabra {
  animation: borroso-entra 700ms linear both;
  will-change: filter, opacity, transform;
}

/* El recorrido del original, textual: el paso del medio SOBREPASA
   (y: +5px) y por eso la palabra se asienta en vez de solo aparecer. */
@keyframes borroso-entra {
  0%   { opacity: 0;   filter: blur(10px); translate: 0 -50px; }
  50%  { opacity: 0.5; filter: blur(5px);  translate: 0 5px; }
  100% { opacity: 1;   filter: blur(0);    translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-borroso] .borroso__palabra {
    opacity: 1 !important;
    filter: none !important;
    translate: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Los cubos (`cubos.js`)
   El original va con `--cube-perspective: 99999999px`, o sea CASI SIN
   perspectiva: proyección ortográfica. Eso es lo que hace que se lean como
   los cubos isométricos de la referencia de Figr y no como un pasillo en
   fuga — que además es justo el efecto que mareaba en GridScan (§7sexies).
   ============================================================ */
/* El contenedor del efecto NO declara su propio tamano: lo pone el
   anfitrion (`.hero-auto__cubos`). Es la regla 1 de la 5bis, y aca hizo
   falta de verdad — las dos clases van en el MISMO elemento, tienen la
   misma especificidad, y `.cubos` esta despues: su `width: 100%` le ganaba
   al `min(112vh, 96vw)` cuadrado y la grilla salia estirada. */

.cubos__escena {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 6%;
  perspective: 99999999px;
}

.cubo {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  /* `--dur-cubo` lo escribe el JS antes de cada cambio: la entrada es mas
     rapida que la salida, igual que el original (300ms contra 600ms).
     NO se llama `--dur` a proposito: ese nombre ya existe como token global
     en base.css, asi que el respaldo del `var()` nunca se aplicaria y la
     duracion caeria en los 320ms del sitio. Es la trampa del :root (§6bis). */
  transition: transform var(--dur-cubo, 600ms) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.cubo__cara {
  position: absolute;
  inset: 0;
  background: #100E0B;
  border: 1px solid rgba(201, 151, 31, 0.30);
}

/* CINCO caras desde el 25/08/2026. Eran tres, y alcanzaba mientras el cubo
   se inclinaba siempre para el mismo lado; ahora mira HACIA el cursor, así
   que también muestra la de abajo y la derecha. Sin ellas se le ve el hueco.
   La de atrás sigue sin existir: haría falta pasar los 90° para verla. */
.cubo__cara--arriba  { transform: translateY(-50%) rotateX(90deg); }
.cubo__cara--abajo   { transform: translateY(50%) rotateX(-90deg); }
.cubo__cara--izq     { transform: translateX(-50%) rotateY(-90deg); }
.cubo__cara--der     { transform: translateX(50%) rotateY(90deg); }
.cubo__cara--frente  { transform: rotateY(-90deg) translateX(50%) rotateY(90deg); }

/* Las caras que solo se ven al inclinarse van más apagadas: con las cinco
   del mismo tono el cubo se aplana y parece un cuadrado con marco. */
.cubo__cara--arriba,
.cubo__cara--abajo,
.cubo__cara--izq,
.cubo__cara--der { border-color: rgba(201, 151, 31, 0.14); background: #0C0B09; }

/* La onda del clic (`rippleOnClick` del original): los anillos se encienden
   en dorado desde donde tocaste y vuelven solos. En una página sobre
   automatizar un negocio, algo que arranca en un punto y se propaga al
   resto es exactamente la metáfora. */
.cubo__cara {
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}

.cubo--onda .cubo__cara {
  /* Resplandor, no destello. El original manda las caras al blanco puro; acá
     son hasta 49 cubos encendidos a la vez detras del titular, y el dorado a
     pleno seria un flash que pelea con el texto. El borde si va entero: da el
     filo sin subir el brillo de toda la superficie. */
  background: color-mix(in srgb, var(--oro) 42%, var(--carbon));
  border-color: var(--oro);
}

@media (prefers-reduced-motion: reduce) {
  .cubo { transition: none; }
  .cubo__cara { transition: none; }
}

/* Titular de sección. No hay una clase .h2 compartida en base.css: cada
   pagina define la suya, y es a proposito — el tamano del titular es parte
   del universo de cada una. */
.titulo-auto {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: var(--sp-2);
  text-wrap: balance;
}

/* ============================================================
   Ejemplos
   La gramática de siempre (§7ter): el problema en primera persona primero,
   el nombre del producto después. No son tarjetas (§5.1) — son filas
   separadas por filetes, como en el Home.
   ============================================================ */
.ejemplos {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, var(--sp-8));
}

/* ------------------------------------------------------------
   El dibujo, detrás del texto.

   Cubos isométricos con el ícono de cada parte del negocio, unidos por
   punteadas en circuito: el mismo lenguaje que la grilla del hero, pero ya
   concreto. Es "conectá cada parte de tu negocio" dibujado.

   ⚠️ EL BRILLO ESTÁ TOPEADO EN LA IMAGEN, NO TAPADO CON UN VELO.

   El primer intento fue un velo encima, y por dos motivos no servía:

   1. **Un velo levanta los negros.** El negro del dibujo es `#070607`, casi
      igual al carbón de la página; con un velo del 0.86 encima toda la
      sección quedaba con un film gris y se notaba dónde empezaba y terminaba.
      Topeando la imagen, los negros siguen siendo negros.
   2. Para que el velo alcanzara hacía falta 0.86, y a esa altura el dibujo
      casi no se veía: 36 KB para una textura.

   **El techo lo pone el ORO a 14px, no el texto blanco.** Contra el trazo
   más claro del dibujo:

     título blanco 46px .... pasa con cualquier fondo hasta #79
     texto tenue 17px ...... pide fondo ≤ #47
     oro 14px .............. pide fondo ≤ **#3C**  ← el que manda

   Por eso el pico de la imagen se bajó a `#3C` (en luz lineal, que conserva
   mejor la estructura que multiplicar en sRGB). Medido así, todo pasa.

   > Si alguna vez se quiere el dibujo más presente, lo que hay que mover NO
   > es la imagen: es sacar el oro de 14px de encima de él, o aclararlo.
   ------------------------------------------------------------ */
.ejemplos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../../automatizacion-fondo.webp") center / cover no-repeat;

  /* El atenuado se hace ACA, no horneado en el PNG.
     Primero se probo bajarle el brillo a la imagen misma, y se veia pixelada:
     al topear el pico en #3C todo el dibujo pasaba a vivir en 60 niveles de
     255, asi que las punteadas finas y los bordes suavizados perdian
     gradacion — y el WebP con perdida sobre un rango tan angosto remataba el
     destrozo. Con `opacity` el navegador mezcla la imagen entera, a 8 bits
     completos, contra el carbon de la pagina.

     0.16 no es un numero de gusto: deja el trazo mas claro en #32, que es el
     maximo que permite que el ORO de 14px pase 4,5:1 encima (da 4,85). El
     techo lo pone el oro chico, no el texto blanco — el titular aguanta
     fondos mucho mas claros. */
  opacity: 0.16;
}

/* Solo apaga los bordes y la franja del titular. En el medio no apaga nada:
   el nivel seguro ya lo pone la `opacity` de la capa de abajo. El titular si
   necesita su propio respiro, porque el arco superior del anillo le cae
   siempre encima — con `cover` la imagen calza justo en alto y no hay
   posicion que lo evite. En el medio el dibujo va a
   su intensidad real, que ya es segura. El titular necesita su propio
   respiro porque el arco superior del anillo le cae siempre encima: con
   `cover` la imagen calza justo en alto y no hay posición que lo evite. */
.ejemplos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El ruido primero, para ditherar el velo sobre el dibujo. */
  background-image:
    var(--ruido),
    linear-gradient(180deg,
      var(--carbon) 0%,
      rgba(11, 10, 8, 0.70) 16%,
      transparent 32%,
      transparent 88%,
      var(--carbon) 100%);
  background-size: var(--ruido-tam) var(--ruido-tam), auto;
  background-repeat: repeat, no-repeat;
}

/* En 390 el ícono dentro de un cubo queda en 11px con la imagen apaisada:
   ilegible, y el dibujo entero se vuelve una mancha. La versión vertical es
   un recorte con tres piezas encadenadas — mismo concepto, a tamaño que se
   lee. Es el mismo problema que ya habían tenido la nieve y GridScan. */
@media (max-width: 700px) {
  .ejemplos::before { background-image: url("../../automatizacion-fondo-movil.webp"); }
}

/* El encabezado arranca donde arrancan las filas. `.measure` viene con
   `margin-inline: auto` de base.css, y en un contenedor de 1100px eso deja
   el titulo flotando 160px a la derecha del numero 01. */
.ejemplos .measure,
.proceso-auto .measure { margin-inline: 0; }

.ejemplos__lista {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line-soft);
}

/* TRES columnas en escritorio: número │ el problema y el nombre │ el
   detalle. Con el detalle apilado debajo del problema, el contenido ocupaba
   la mitad izquierda de una fila de 1100px y sobraba media fila vacía — el
   mismo "se siente vacía" que el cliente ya había marcado en Diseño Web.
   Y además separa mejor lo que son dos cosas distintas: el problema es el
   gancho, el detalle es el respaldo (§7ter). */
.ejemplo {
  display: grid;
  grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, var(--sp-5));
  border-bottom: 1px solid var(--line-soft);
}

.ejemplo__num {
  font-family: var(--font-cifras, var(--font-mono));
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--oro);
  padding-top: 0.55em;
}

.ejemplo__problema {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ejemplo__nombre {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}

/* Más opaco que el `--ink-muted` del resto de la página (0.66): acá hay un
   dibujo detrás y sobre su trazo más claro 0.66 daba 3,85:1. Con 0.86 da
   5,30:1, y sobre el carbón liso 12,4:1. La jerarquía con la cita en serif
   la sostienen la familia y el tamaño, no el brillo. */
.ejemplo__desc {
  /* Alineada con la primera línea del problema, no con el nombre: son las
     dos entradas de la fila y arrancan juntas. */
  padding-top: 0.35em;
  color: rgba(243, 236, 224, 0.86);
}

/* ============================================================
   Cómo funciona — cuatro pasos
   Sale de la bajada del hero, que ya nombra el recorrido: "relevamos cómo
   funciona tu negocio hoy y diseñamos un sistema a medida".
   ============================================================ */
.proceso-auto {
  padding-block: clamp(3.5rem, 9vw, var(--sp-8));
  background: var(--carbon-2);
}

.proceso-auto__grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.paso-auto {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--line);
}

.paso-auto__num {
  font-family: var(--font-cifras, var(--font-mono));
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--oro);
}

.paso-auto__titulo {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
}

.paso-auto__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .proceso-auto__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .proceso-auto__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ============================================================
   El flujo — los chips del mockup viejo, convertidos en demostración

   En el mockup original esto era un formulario más, con rubro, email y
   detalle. **Se descartó duplicar el formulario**: ya existe uno completo,
   con validación y envío, en Contacto (§7bis), y tener dos formularios
   distintos en el sitio es la clase de incoherencia que rompe el §0.

   Lo que se conserva son los chips, que sí valen: elegir un proceso y ver
   **la cadena que ATLA armaría para ese proceso**. Es el mismo movimiento
   que hizo funcionar a Diseño Web — mostrar el oficio en vez de contarlo —
   y no necesita ni un dato del cliente para ser verdadero.
   ============================================================ */
.flujo {
  padding-block: clamp(3.5rem, 9vw, var(--sp-8));
}

.flujo__intro { text-align: center; margin-inline: auto; }

.flujo__chips {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.chip {
  font: inherit;
  font-size: var(--fs-small);
  padding: 0.7rem 1.15rem;
  min-height: 44px;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.chip:hover { color: var(--ink); border-color: var(--oro); }

.chip[aria-selected="true"] {
  color: var(--carbon);
  background: var(--oro);
  border-color: var(--oro);
}

/* El panel del flujo. Fondo propio y más cálido: es el único bloque de la
   página que se despega del fondo, porque es el único que hay que "usar". */
.flujo__panel {
  margin-top: var(--sp-5);
  /* Acotado y centrado: a todo el ancho del contenedor la cadena quedaba
     pegada a la izquierda con medio panel vacio al lado. */
  max-width: 46rem;
  margin-inline: auto;
  background: var(--carbon-3);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, var(--sp-5));
}

.flujo__cadena {
  display: grid;
  gap: 0;
}

.flujo__paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-2);
}

/* La línea vertical que une los pasos: es lo que convierte una lista en
   una cadena, que es de lo que trata la página. */
.flujo__paso {
  position: relative;
  padding-left: var(--sp-4);
}
.flujo__paso::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
/* La linea arranca y termina en el CENTRO DEL PUNTO, que ya no es la mitad
   del <li>: mismo calculo que el `::after` de abajo. */
.flujo__paso:first-child::before {
  top: calc(var(--sp-2) + 0.825em);
  top: calc(var(--sp-2) + 0.5lh);
}
.flujo__paso:last-child::before {
  bottom: calc(100% - var(--sp-2) - 0.825em);
  bottom: calc(100% - var(--sp-2) - 0.5lh);
}

.flujo__paso::after {
  content: "";
  position: absolute;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--oro);
  background: var(--carbon-3);

  /* ⚠️ NO va con `top: 50%`. El punto tiene que quedar a la altura del
     PRIMER RENGLON, y `50%` lo centra en la altura TOTAL del <li>: en
     cuanto el texto pasa a dos renglones el <li> crece y el punto se
     descuelga hasta el medio, mientras la etiqueta y el primer renglon
     siguen arriba. Medido en "Atencion al cliente", que es el unico
     proceso con tres pasos de dos renglones: 16,5px de desfase.

     El centro del primer renglon es `padding-top + media interlinea`, y
     al punto hay que restarle medio alto propio: 11px + 2 de borde a
     cada lado = 15, o sea 7,5.

     El `- 5px` se CONSERVA del original y no se cambia por el `- 7.5px`
     que centraria el punto exacto: esos 2,5px de diferencia son los que lo
     dejan a la altura de la ETIQUETA —que es lo que tiene al lado— y no del
     texto. O sea que esto hace lo mismo que hacia el `50%` en un paso de un
     renglon, pero medido sobre el primer renglon en vez de sobre el <li>
     entero: los pasos que ya estaban bien no se mueven ni un pixel, y solo
     suben los que el <li> habia descolgado.

     La primera declaracion es el respaldo para navegadores sin la unidad
     `lh` (0.825em = medio interlineado con el 1.65 de la pagina); la
     segunda sigue al interlineado real y gana donde `lh` existe. */
  top: calc(var(--sp-2) + 0.825em - 5px);
  top: calc(var(--sp-2) + 0.5lh - 5px);
}

/* El último paso es el resultado: punto lleno, no hueco. */
.flujo__paso--fin::after { background: var(--oro); }

.flujo__etiqueta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  /* Ancho FIJO, no `min-width`. Cada paso es su propia grilla, asi que una
     columna `auto` se mide por fila: con `min-width` la palabra DISPARADOR
     corria su texto mas a la derecha que las de PASO y los renglones no
     alineaban entre si. Con ancho fijo las cuatro columnas coinciden.

     Y tiene que ENTRAR la palabra mas larga: con 9ch (65px) "DISPARADOR"
     media 91px, se desbordaba y quedaba pegada a su texto. 13ch son 94px.
     Alinear no alcanza si despues no se comprueba que el contenido entra. */
  width: 13ch;
}

.flujo__texto { color: var(--ink); }
.flujo__paso--fin .flujo__texto { font-weight: 500; }

/* Al cambiar de chip, la cadena entra escalonada. Es la única animación
   decorativa de la página y se justifica: hace evidente que la cadena
   CAMBIÓ, que si no el reemplazo pasa desapercibido. */
.flujo__panel[data-cambiando] .flujo__paso {
  animation: flujo-entra 420ms var(--ease) both;
}
.flujo__paso:nth-child(2) { animation-delay: 70ms; }
.flujo__paso:nth-child(3) { animation-delay: 140ms; }
.flujo__paso:nth-child(4) { animation-delay: 210ms; }

@keyframes flujo-entra {
  from { opacity: 0; translate: -10px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flujo__panel[data-cambiando] .flujo__paso { animation: none; }
}

@media (max-width: 560px) {
  .flujo__paso {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  /* Apilado, arriba queda la etiqueta y no el texto: su renglon es el de
     12px (19,8px con el 1.65 de la pagina), que sobre el <li> de 17px son
     0.583em de media interlinea. */
  .flujo__paso::after     { top: calc(var(--sp-2) + 0.583em - 5px); }
  .flujo__paso:first-child::before { top: calc(var(--sp-2) + 0.583em); }
  .flujo__paso:last-child::before  { bottom: calc(100% - var(--sp-2) - 0.583em); }
}

/* ============================================================
   Cierre
   ============================================================ */
.cierre-auto {
  padding-block: clamp(4rem, 10vw, var(--sp-8));
  text-align: center;
  /* El color va en `background-color`: `background-image` no acepta colores
     y meterlo ahi invalida la declaracion entera. */
  background-color: var(--carbon);
  /* El ruido primero. Medido antes: mesetas de 343 px con 8 niveles — la
     misma firma de banding que tenia Contabilidad. */
  background-image:
    var(--ruido),
    radial-gradient(70% 100% at 50% 100%, rgba(201, 151, 31, 0.13) 0%, transparent 70%);
  background-size: var(--ruido-tam) var(--ruido-tam), auto;
  background-repeat: repeat, no-repeat;
}

.cierre-auto__lead { max-width: 44ch; margin-inline: auto; }

.cierre-auto__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ============================================================
   Móvil
   ============================================================ */
/* A dos columnas primero (el detalle baja a lo ancho) y a una después. */
@media (max-width: 1000px) {
  .ejemplo { grid-template-columns: auto minmax(0, 1fr); }
  .ejemplo__desc {
    grid-column: 2;
    padding-top: 0;
    margin-top: var(--sp-2);
  }
}

@media (max-width: 720px) {
  .ejemplo {
    grid-template-columns: 1fr;
    row-gap: var(--sp-1);
  }
  .ejemplo__desc { grid-column: 1; }
  .ejemplo__num { padding-top: 0; }
}

/* Los cubos se agrandan al angostar: con la grilla cuadrada metida en una
   pantalla angosta quedarían diminutos y perderían el volumen. */
@media (max-width: 820px) {
  .hero-auto__cubos { width: 128vw; }
  .hero-auto__velo {
    /* `background-image` y no el atajo `background`: el atajo reseteaba la
       capa de ruido de la regla de arriba y el movil se quedaba sin dither. */
    background-image:
      var(--ruido),
      radial-gradient(72% 40% at 50% 50%, rgba(11, 10, 8, 0.95) 0%, rgba(11, 10, 8, 0.7) 58%, transparent 82%),
      linear-gradient(180deg, rgba(11, 10, 8, 0.9) 0%, transparent 24%, transparent 72%, var(--carbon) 100%);
  }
}