/* ============================================================
   Stablecoin Global Solution — sections.css
   Composición de cada sección. Todo sale de tokens; ni un color
   ni una medida en crudo.
   ============================================================ */

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* La punta es el gesto de LLEGADA del sistema: la barra dice «hay
   camino» y la punta dice «aquí desemboca». Va en coral en las dos
   superficies; la barra se queda en tinta, que es la que tiene que
   sostener la legibilidad del diagrama. */
#pt-v path { fill: var(--senal); }
#pt-p path { fill: var(--senal); }

/* ---------- Aparición ---------- */
.js .rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.js .rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
}

/* ---------- Piezas compartidas ---------- */
/* El tablero mide lo que mide (width: fit-content): sin align-items
   se quedaba pegado al margen izquierdo de su caja. */
.board-hold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-2);
}

/* El cierre de sección va centrado de verdad: `margin-inline: auto`.
   Antes llevaba solo `margin-left: auto`, que no centra —empuja a la
   derecha— y obligaba a una excepción en móvil para devolverlo al eje. */
.closing {
  margin-top: var(--stack-4);
  margin-inline: auto;
  max-width: 34ch;
  color: var(--acento);
  text-align: center;
  text-wrap: balance;
}

/* ---------- El remate: el módulo de la marca cierra el tramo ----------
   La frase de cierre es donde el argumento LLEGA. No se colorea —sobre
   papel el coral no es texto— así que la llegada la marca el cuadrado
   del que está hecho el isologo, puesto al final de la frase como el
   remate de un artículo. No abre una lista ni separa nada: cierra. Uno
   por sección, y solo en la frase que cierra la sección. */
.closing::after,
.close__line::after {
  content: "";
  display: inline-block;
  width: 0.44em;
  height: 0.44em;
  margin-left: 0.36em;
  vertical-align: 0.04em;
  border-radius: var(--r-unit);
  background: var(--senal);
}

/* Columna de apoyo del encabezado: puede llevar varios párrafos */
.head__lead > * + * { margin-top: var(--stack-1); }

/* ============================================================
   PRIMITIVA · LA FICHA DE CAPACIDAD
   Un bloque relleno del sistema —la misma caja que un nodo del
   tablero— sacado del campo y puesto en línea de lectura. Debajo,
   solo cuando la fuente lo trae, el dato que la matiza.
   La usan «Global One Card» y «Formas de mover tu dinero».
   ============================================================ */
/* Una sola declaración: antes había dos bloques `.caps` en este archivo
   peleándose (flex arriba, grid abajo). Manda la columna: el inventario
   se lee como una pila sobre el eje, no como una nube de fichas. */
.caps {
  display: grid;
  justify-items: center;
  gap: var(--stack-1);
  margin: var(--stack-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-body);
  color: var(--fg-soft);
}
.caps li { line-height: 1.35; }
.cap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  text-align: center;
}
.cap-item__tile,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--cell) * 0.72);
  padding: 0.55rem 1.1rem;
  background: var(--node-cap-bg);
  color: var(--node-cap-fg);
  border-radius: var(--r-node);
  font-size: clamp(0.625rem, calc(var(--cell) * 0.165), 0.9375rem);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.cap-item__note {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--fg-soft);
  padding-inline: 0.15rem;
}

/* Contorno: lo que pertenece al lado del cliente, no al sistema */
.tag--ghost {
  background: transparent;
  color: var(--node-ghost-fg);
  box-shadow: inset 0 0 0 2px var(--node-ghost-ln);
}

/* ============================================================
   01 · Portada — el sistema se arma antes del nombre
   ============================================================ */
/* La portada entra de una sola vista: mide la pantalla menos la barra
   y su contenido se centra dentro. El titular se mide también en alto
   (vh) para que nunca empuje el pliegue. */
.hero {
  min-height: calc(100svh - var(--barra));
  display: grid;
  align-content: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}
.hero .t-1.hero__line { font-size: clamp(1.4rem, min(3.1vw, 4.4vh), 2.7rem); }
.hero .alianza { margin-bottom: clamp(1rem, 3vh, 2rem); }
.hero__foot { margin-top: clamp(1rem, 3vh, 2rem); }
.hero .shell { position: relative; }

/* ---------- El campo del hero ----------
   Con el contenido a registro izquierdo, el campo vuelve a sangrar solo
   por la derecha, como en la portada de espera: el texto ocupa el flanco
   izquierdo y la infraestructura, el derecho. */
/* La alianza dicha como una operación: dos casas dan una solución.
   Solo isotipos: los nombres ya están en el titular y en el pie. */
.alianza {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  margin: 0 0 var(--stack-3);
}
.alianza__casa {
  position: relative;
  display: inline-flex;
  border-radius: var(--r-node);
}
/* Al pasar el ratón, cada casa se muestra en sus colores: la versión a
   color se revela encima de la blanca, sin mover nada de sitio. */
.alianza__color {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.alianza__casa:hover .alianza__color,
.alianza__casa:focus-visible .alianza__color { opacity: 1; }
.alianza__casa:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.alianza img {
  height: clamp(20px, 2vw, 26px);
  width: auto;
  display: block;
}
.alianza img.es-flou { height: clamp(31px, 3.1vw, 41px); }
.alianza img.alianza__sgs { height: clamp(30px, 3vw, 40px); }
.alianza__op {
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  color: var(--fg-soft);
}

/* La portada es la excepción de la página: va a registro izquierdo.
   El contenido ocupa el flanco de la lectura y el campo, el otro. */
.hero__claim {
  display: grid;
  justify-items: start;
  gap: var(--stack-2);
  text-align: left;
  max-width: 40rem;
}
/* El nombre ya no se compone: es el logo. Se mide por ancho, que es
   como está dibujado el lockup. */
.hero__logo {
  display: block;
  width: clamp(260px, 38vw, 520px);
  height: auto;
  margin: 0 0 var(--stack-1);
}
.hero__line {
  display: block;
  max-width: 32ch;
  font-weight: var(--w-light);
}
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-2);
  margin-top: var(--stack-3);
  text-align: left;
  max-width: 40rem;
}
.hero__foot .measure { margin-inline: 0; }
@media (max-width: 767px) {
  .hero__claim, .hero__foot { max-width: none; }
}

/* ============================================================
   02 · Los dos caminos — uno detrás del otro sobre el mismo eje
   Ya no se comparan en paralelo: se recorren. Cada camino es un
   bloque completo (pieza, condición, promesa, capacidades) y el
   aire entre los dos es lo que los separa, no una reja.
   ============================================================ */
/* Los dos caminos son la única comparación de la página, y una
   comparación se lee en paralelo: aquí sí van en dos columnas. Cada
   camino conserva su eje centrado dentro de su columna. */
.paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: var(--stack-4) var(--stack-3);
  margin-top: var(--stack-3);
}
.path {
  max-width: 30rem;
  text-align: center;
}
@media (max-width: 767px) {
  .paths { grid-template-columns: 1fr; }
}
.path__claim + p { margin-top: var(--stack-1); }

/* ============================================================
   03 / 04 · La placa de producto — el nombre a escala de titular
   y, en la caja del sistema, la nomenclatura que lo califica
   ============================================================ */
.plate { margin-bottom: var(--stack-3); text-align: center; }
.plate__name { max-width: 14ch; margin-inline: auto; }
.plate__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: var(--stack-2);
}

/* ============================================================
   03 · Global One Card — la tarjeta y el inventario de capacidades
   ============================================================ */
/* La tarjeta primero, el inventario debajo: se ve el producto y luego
   se lee de qué está hecho. Ya no se enfrentan en dos columnas. */
.answer {
  display: grid;
  justify-items: center;
  gap: var(--stack-3);
  text-align: center;
}
.answer__card {
  width: 100%;
  max-width: 46rem;
}
.answer__card img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}
.answer__copy { padding-block: var(--stack-2); }
.answer__copy > * + * { margin-top: var(--stack-3); }

/* ============================================================
   05 · Cómo fluye el dinero — la única secuencia numerada
   ============================================================ */
/* El paso se apila sobre el eje: número, cuerpo y medidor uno debajo
   de otro. El medidor cierra cada paso y, al ir centrado, la barra
   que crece de 01 a 06 se lee como una sola columna que se llena. */
/* Los seis pasos bajan uno debajo de otro, pero cada paso se lee en
   horizontal: numeral · nombre · qué es · con qué · medidor. Las cuatro
   columnas son las mismas para todos (subgrid), así los renglones quedan
   a plomo y la secuencia se recorre de arriba abajo. */
.steps {
  display: grid;
  grid-template-columns: auto minmax(0, 10rem) minmax(0, 1fr) auto;
  /* El paso vertical se mide en pantalla, no en píxeles fijos: los seis
     renglones y su cabecera tienen que caber de una sola vista. */
  gap: clamp(0.3rem, 0.9vh, 0.9rem) var(--stack-3);
  align-items: center;
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  text-align: left;
}
.step {
  display: grid;
  grid-column: span 4;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--stack-1) var(--stack-3);
  padding-block: clamp(0.15rem, 0.7vh, 0.55rem);
}
/* Sin subgrid cada renglón se reparte solo; pierde el plomo, no la
   lectura. */
@supports not (grid-template-columns: subgrid) {
  .steps { grid-template-columns: 1fr; }
  .step { grid-column: auto; grid-template-columns: auto minmax(0, 10rem) minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; text-align: center; }
  .step {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-block: var(--stack-2);
  }
}
/* En fila, el nombre del paso no puede ir a escala de titular: se sale
   de su columna. Baja de cuerpo y conserva el peso. */
.step__nombre {
  margin: 0;
  font-size: var(--t-3);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
}
/* El numeral es AVANCE: dice por dónde vas de los seis pasos. Va en
   coral porque esta sección vive sobre negro (6,72:1, AA). En las
   secciones claras el numeral se queda en tinta —ahí el coral no es
   texto— y el avance lo dice otra pieza. */
.step__n {
  font-size: var(--t-2);
  font-weight: var(--w-medium);
  color: var(--senal-texto);
  font-variant-numeric: tabular-nums;
}
/* «Qué es» y «con qué» comparten celda: uno encima del otro dentro de
   la tercera columna, para no abrir una quinta. */
.step__sub { margin: 0; }
.step__nota { margin: 0.15rem 0 0; }
.step__texto { display: grid; }
.step__sub { font-weight: var(--w-light); }

/* El medidor es el AVANCE dibujado: seis módulos, uno más encendido en
   cada paso. Los dos estados salen del mismo color —coral lleno contra
   coral al 26 %— para que se lea como UN medidor que se llena, y no
   como dos colores distintos puestos uno al lado del otro. */
.meter { display: flex; gap: calc(var(--gap) * 0.5); }
.meter i {
  width: clamp(10px, 1.2vw, 16px);
  aspect-ratio: 1;
  border-radius: var(--r-unit);
  background: var(--senal-pista);
}
.meter i.on { background: var(--senal); }

/* La secuencia se carga sola: cada renglón entra cuando le toca —lo
   reparte js/pasos.js— y su medidor se enciende casilla a casilla. Con
   JS el renglón parte invisible; sin JS salen los seis completos, que
   es el dato. */
@media (prefers-reduced-motion: no-preference) {
  .js .steps .step {
    opacity: 0;
    transform: translateY(calc(var(--cell) * 0.16));
    transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  }
  .js .steps .step.es-visible { opacity: 1; transform: none; }

  .js .steps .meter i.on {
    background: var(--senal-pista);
    transition: background-color 220ms var(--ease-out);
  }
  .js .steps .step.es-visible .meter i.on {
    background: var(--senal);
    transition-delay: calc(var(--j) * 90ms + 160ms);
  }
}

/* ------------------------------------------------------------
   05 · La ruta — el recorrido concreto, al centro de la sección

   Es el mismo nodo del sistema, pero relleno de mundo real: cada
   estación es un cuadrado de dos celdas con una foto en el duotono
   de marca. USDC no tiene foto porque la stablecoin no tiene objeto
   que fotografiar: es el mismo dólar descompuesto en la unidad de
   marca. Entre estaciones va el conector del sistema —barra y una
   punta— porque aquí hay avance, no relación.

   La señal coral aparece UNA vez y aparece al final: el valor llega
   y la estación de destino se enciende. Es el remate de la animación.

   La medida no cuelga de --cell a propósito: --cell crece por debajo
   de 860 px (el campo pasa a 6 columnas) y la fila reventaría. En su
   tope, --est son dos celdas más el gap.
   ------------------------------------------------------------ */
.ruta {
  --est:  clamp(88px, 13.5vw, 188px);   /* 2 celdas + gap en el tope */
  --paso: clamp(40px, 6.5vw, 100px);    /* el tramo entre estaciones */
  --beat: calc(var(--dur-ui) * 2.2);    /* el pulso de la secuencia */

  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: var(--stack-4);
}

.ruta__est {
  display: grid;
  grid-template-columns: var(--est) auto;
  grid-template-rows: var(--est) auto;
}

.ruta__foto {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-node);
}
.ruta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La llegada va en dos capas: el recorrido debajo, la señal encima. */
.ruta__senal { position: absolute; inset: 0; }

.ruta__nombre {
  grid-area: 2 / 1;
  justify-self: center;
  white-space: nowrap;
  margin-top: var(--stack-1);
  font-size: var(--t-3);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-wide);
}

/* El conector del sistema, en el eje de la estación */
.ruta__hilo {
  grid-area: 1 / 2;
  align-self: center;
  display: flex;
  align-items: center;
  width: var(--paso);
}
/* Aquí el conector SÍ es coral, y es el único diagrama donde lo es: la
   ruta no explica una estructura, mide un recorrido con destino. El
   tramo por recorrer va en coral tenue y el ya recorrido en coral
   pleno —el mismo par que el medidor de los pasos—, y desemboca en la
   estación que se enciende. Los conectores de los tableros se quedan
   en tinta: ahí el trazo sostiene la lectura del diagrama y no puede
   bajar de contraste. */
.ruta__traza {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--senal-pista);
  border-radius: var(--r-unit);
}
.ruta__traza::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--senal);
  border-radius: var(--r-unit);
  transform-origin: left center;
}
.ruta__pt { fill: var(--senal); margin-left: -1px; }

/* ---------- La secuencia: el valor pasa de una estación a la otra ----------
   Estado base visible: sin JS la ruta está completa y encendida.
   Con JS, cada pieza arranca oculta y la clase .is-in —la misma que
   ya reparte el IntersectionObserver— dispara la secuencia. Nada usa
   `backwards`: el estado previo lo pone la regla, no el fill-mode. */
.js .ruta .ruta__foto,
.js .ruta .ruta__nombre,
.js .ruta .ruta__pt,
.js .ruta .ruta__senal { opacity: 0; }
.js .ruta .ruta__traza::after { transform: scaleX(0); }

/* La ruta usa .rise solo como disparador: el movimiento lo llevan las
   piezas de dentro, así que su propia aparición se anula. */
.js .ruta.rise { opacity: 1; transform: none; transition: none; }

.js .ruta.is-in .ruta__foto {
  animation: ruta-foto calc(var(--dur-ui) * 2) var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--beat));
}
.js .ruta.is-in .ruta__nombre {
  animation: ruta-texto calc(var(--dur-ui) * 2) var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--beat) + var(--dur-press));
}
.js .ruta.is-in .ruta__traza::after {
  animation: ruta-traza calc(var(--dur-ui) * 1.2) var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--beat) + var(--dur-ui));
}
.js .ruta.is-in .ruta__pt {
  animation: ruta-punta var(--dur-ui) var(--ease-out) forwards;
  animation-delay: calc(var(--i) * var(--beat) + var(--beat));
}
/* El remate: la señal se enciende cuando el valor ya llegó. */
.js .ruta.is-in .ruta__senal {
  animation: ruta-punta calc(var(--dur-ui) * 2.4) var(--ease-out) forwards;
  animation-delay: calc(var(--beat) * 3 + var(--dur-ui) * 1.5);
}

@keyframes ruta-foto {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes ruta-texto {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ruta-traza {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ruta-punta {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- El eje pasa a vertical: la ruta se apila ----------
   Apilada, el nombre se pone al lado de la foto y no debajo: con el
   nombre debajo la pieza pasaba de mil píxeles de alto y dejaba de
   leerse como un recorrido. La columna del nombre es fija para que
   las cuatro fotos queden a plomo pese a que «COLOMBIA» mide el
   triple que «USD». */
@media (max-width: 767px) {
  .ruta {
    --est: min(32vw, 160px);
    --paso: clamp(34px, 9vw, 56px);
    flex-direction: column;
    align-items: center;
  }
  .ruta__est {
    grid-template-columns: var(--est) 9ch;
    grid-template-rows: var(--est) auto;
  }
  .ruta__nombre {
    grid-area: 1 / 2;
    align-self: center;
    justify-self: start;
    margin: 0 0 0 var(--stack-2);
  }
  .ruta__hilo {
    grid-area: 2 / 1;
    justify-self: center;
    flex-direction: column;
    width: auto;
    height: var(--paso);
  }
  .ruta__traza { width: 6px; height: auto; }
  .ruta__traza::after { transform-origin: center top; }
  .ruta__pt { transform: rotate(90deg); margin: -1px 0 0; }

  .js .ruta .ruta__traza::after { transform: scaleY(0); }
  .js .ruta.is-in .ruta__traza::after { animation-name: ruta-traza-v; }
  @keyframes ruta-traza-v {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
}

/* Movimiento reducido: la ruta se muestra entera, sin esperar su turno.
   Sin esto los `animation-delay` dejarían la pieza en blanco casi dos
   segundos, porque el bloque global solo acorta la duración. */
@media (prefers-reduced-motion: reduce) {
  .js .ruta .ruta__foto,
  .js .ruta .ruta__nombre,
  .js .ruta .ruta__pt,
  .js .ruta .ruta__senal,
  .js .ruta.is-in .ruta__foto,
  .js .ruta.is-in .ruta__nombre,
  .js .ruta.is-in .ruta__pt,
  .js .ruta.is-in .ruta__senal { opacity: 1; animation: none; }

  .js .ruta .ruta__traza::after,
  .js .ruta.is-in .ruta__traza::after { transform: none; animation: none; }
}

/* ============================================================
   06 · Casos de uso — el nombre y, debajo, la cadena de la fuente
   ============================================================ */
.cases { display: grid; justify-items: center; }
.case {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding-block: clamp(1.25rem, 2.6vw, 2.4rem);
  text-align: center;
}
.case__n {
  font-size: var(--t-2);
  font-weight: var(--w-light);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.case__name {
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
/* 58ch y no 44: con el destino marcado como bloque, una cadena que se
   parte deja el nodo colgado en un renglón propio en unos casos sí y
   en otros no. A 58ch las cuatro cadenas caben de un tirón en
   escritorio y las cuatro se parten igual en teléfono. */
.case__flow {
  max-width: 58ch;
  margin-inline: auto;
  font-size: var(--t-3);
  font-weight: var(--w-light);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg-soft);
}

/* ---------- El destino de cada cadena ----------
   Los cuatro casos son cadenas y toda cadena termina en algún sitio:
   ese último eslabón es donde el valor LLEGA. Se marca como se marca
   un nodo de llegada en los diagramas —relleno coral, tinta encima,
   7,04:1 AAA— y con el radio del módulo (2 px), no con el de una
   pastilla: es una pieza del sistema puesta dentro de una frase.
   Es la aparición del coral en las secciones claras, donde no puede
   ser texto. */
.destino {
  display: inline-block;
  padding: 0.06em 0.38em;
  background: var(--senal);
  color: var(--senal-sobre);
  border-radius: var(--r-unit);
  font-weight: var(--w-medium);
  /* El destino no se parte: un nodo partido en dos deja de ser un
     nodo. La cadena rompe antes, en una de sus flechas. */
  white-space: nowrap;
}

/* ============================================================
   07 · Cobertura — el mapa, la cifra y las formas de mover el dinero
   ============================================================ */
.map { margin-block: var(--stack-3); }
.map img { width: 100%; height: auto; }

/* Cobertura en una sola columna: primero las dos cifras, después las
   formas de mover el dinero. Todo sobre el mismo eje. */
.reach {
  display: grid;
  justify-items: center;
  gap: var(--stack-4);
  text-align: center;
}
/* Las dos cifras de cobertura, una debajo de otra: comparten eje y se leen
   como un par, no como dos bloques sueltos. */
.reach__datos { display: grid; gap: var(--stack-2); justify-items: center; }
.reach__datum {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  margin: 0;
}
/* Cifras tabulares: al contar, el número no debe bailar de ancho. */
.reach__n {
  font-weight: var(--w-black);
  line-height: 0.82;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
}
.reach__label {
  font-size: var(--t-3);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-wide);
  color: var(--fg-soft);
}
/* Las formas de mover el dinero se leen como una columna: las fichas van
   centradas entre sí, no colgadas del margen izquierdo. El centrado de
   las fichas lo pone ya `.caps`; aquí solo el aire del bloque. */
.reach__ways { display: grid; justify-items: center; gap: var(--stack-2); }

/* Las dos regiones, una al lado de la otra: América ocupa lo que
   necesitan sus seis columnas y Europa, lo que necesitan sus dos. */
.regions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  align-items: start;
  gap: var(--stack-3) var(--stack-4);
  margin-top: var(--stack-4);
  text-align: center;
}
@media (max-width: 1023px) {
  .regions { grid-template-columns: 1fr; }
}
/* La región ya no es un párrafo de países sino un panel de fichas:
   necesita todo el ancho de la columna. */
.region { width: 100%; }
.region__list { margin-top: var(--stack-1); color: var(--fg-soft); }

.legal {
  margin-top: var(--stack-3);
  margin-inline: auto;
  max-width: 62ch;
  text-align: center;
}

@media (max-width: 859px) {
  .reach, .regions { gap: var(--stack-3); }
}

/* ============================================================
   07 · Cierre — una sola frase. Sin la acción, la reja de dos
   columnas no tenía qué repartir y dejaba la frase descolgada:
   el bloque se compone solo, con el ritmo de sección.
   ============================================================ */
.close__line {
  max-width: 26ch;
  margin: var(--stack-4) auto 0;
  color: var(--acento);
  text-align: center;
  text-wrap: balance;
}

/* ---------- Pie: dos bloques y una barra ----------
   Arriba, quién es y por dónde se sigue; abajo, la firma de la alianza.
   Los logos llevan a la web de cada empresa: el enlace no añade
   decoración, hereda la caja del logo y solo marca foco y hover. */
/* El pie vuelve a ser horizontal: la marca a la izquierda y la
   navegación a la derecha. Es el cierre del documento, no una sección
   más de la columna. */
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--stack-3);
  align-items: start;
}
.foot__logo {
  height: clamp(30px, 3.2vw, 40px);
  width: auto;
  display: block;
}
/* 32ch y no 24: centrada y a tres renglones, la interlínea cerrada del
   titular apelmazaba la frase. Más ancho, dos líneas y aire normal. */
.foot__claim {
  margin: var(--stack-2) 0 0;
  max-width: 28ch;
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
}
/* La única acción del pie: escribirnos. El pie va sobre negro, así que
   aquí el coral sí puede ser texto (6,72:1). Es la marca de la señal
   en el cierre de las tres páginas. */
.foot__mail {
  display: inline-block;
  margin-top: var(--stack-2);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--senal-texto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color var(--dur-ui) var(--ease-out);
}
.foot__mail:hover { color: var(--senal-press); }

.foot__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--stack-3);
  width: 100%;
}
.foot__col { display: grid; align-content: start; gap: 0.55rem; }
.foot__tit {
  margin: 0 0 0.35rem;
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-wide);
  color: var(--fg-soft);
}
.foot__col a {
  font-size: var(--t-small);
  color: var(--fg);
  text-decoration: none;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.foot__col a:hover { opacity: 0.62; }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-2);
  margin-top: var(--stack-4);
}
.foot__legal {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-soft);
}

/* En teléfono sí se apila, centrado, como el resto de la página. */
@media (max-width: 767px) {
  .foot__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__claim { margin-inline: auto; }
  .foot__nav { justify-items: center; }
  .foot__col { justify-items: center; }
  .foot__bar { justify-content: center; text-align: center; }
}

.foot__logos a {
  display: inline-flex;
  border-radius: var(--r-node);
  transition: opacity var(--dur-ui) var(--ease-out);
}
.foot__logos a:hover { opacity: 0.62; }
.foot__logos a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}

/* ---------- 19 · Foto en los dos caminos ----------
   La imagen entra antes del claim: se ve el uso real, y después se lee
   qué es. Va tratada en duotono de marca, no en color original, para que
   no se lea como una foto de stock pegada sobre el sistema. */
/* ---------- La pieza de cada vía ----------
   Hecha con el sistema, no recortada del deck: tipografía, tokens y radio
   propios. El icono sale de la gramática del logotipo —un nodo con ramas—
   en vez de un set genérico. */
.via {
  margin: 0 auto var(--stack-2);
  max-width: 24rem;
  padding: var(--stack-3) var(--stack-2);
  border-radius: var(--r-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-1);
  min-height: 15rem;
}
.via--claro {
  background: var(--c-over);
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 8%, transparent);
}
.via--oscuro {
  background: var(--c-brand);
  color: var(--c-over);
}
.via__ico {
  width: 76px;
  height: auto;
  display: block;
  margin-bottom: var(--stack-1);
}
.via--claro .via__ico { color: var(--tinta); }
.via--oscuro .via__ico { color: var(--blanco); }
/* Dentro de cada icono, el coral marca EL NODO —Stablecoin Global
   Solution— y lo demás se queda en el color del bloque: lo que es del
   cliente. Antes el coral pintaba un icono entero y el otro no, lo que
   convertía la señal en una distinción entre productos; ahora dice lo
   mismo en los dos, que es lo que significa. */
.via__nodo { fill: var(--senal); }
.via__t {
  font-size: var(--t-3);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-wide);
  margin: 0 0 var(--stack-1);
}
.via__d {
  font-size: var(--t-body);
  line-height: 1.45;
  margin: 0;
  opacity: .78;
}

/* La condición de partida de cada camino. Estaba dentro del diagrama;
   al retirar esos nodos pasa aquí, para no perder el texto del deck. */
.path__cond {
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-wide);
  color: var(--fg-soft);
  margin: 0 0 var(--stack-1);
}

/* ---------- 21 y 23 · La cabecera ----------
   Vivía repartida entre este archivo y base.css. La usan las tres
   páginas, así que ahora está entera en base.css, bajo «CABECERA». */

/* ============================================================
   08 · Contacto — la primera configuración

   El formulario no se compone como un formulario: se compone con
   la gramática del sistema (§3.2 del manual).

     · Campo vacío  → casilla (--slot): el sustrato sobre el que
                      se ensambla, igual que en el tablero.
     · Campo válido → contorno (ghost): tu lado del diagrama.
     · Elección     → los dos programas como bloques; el elegido
                      se rellena como una capacidad colocada.
     · Acción       → el destino: el conector BAJA por el eje y entra
                      en el botón. Flecha = avance.

   El ledger ya no reparte rótulo a la izquierda y casilla a la
   derecha: la pila entera baja por el eje, con el rótulo encima de
   su casilla. La proximidad sigue diciendo a quién pertenece cada
   rótulo, ahora por vertical en vez de por horizontal.
   ============================================================ */
.forma {
  display: grid;
  justify-items: center;
  gap: var(--stack-2);
  margin-top: var(--stack-3);
  /* La columna del formulario: estrecha a propósito. Un campo de
     ancho de página obliga a barrer la vista de un margen al otro
     para volver al rótulo siguiente. */
  max-width: 34rem;
  margin-inline: auto;
}

/* ---------- El rótulo: minúscula y atenuado ----------
   Ni mayúsculas ni versalitas: aquí nombra un campo, no etiqueta
   un bloque del sistema. */
.rotulo {
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--fg-soft);
}

/* ---------- La elección: la bifurcación de la página ----------
   Es lo más importante que se contesta aquí, así que ocupa el
   ancho entero y va primero: elegir el programa da contexto a
   todo lo demás. */
.eleccion {
  width: 100%;
  margin: 0 0 var(--stack-3);
  padding: 0;
  border: 0;
  min-width: 0;
  text-align: center;
}
.eleccion__t { padding: 0; margin-bottom: var(--stack-1); width: 100%; }
.eleccion__vias {
  display: grid;
  justify-items: center;
  gap: var(--gap);
}

.via-op { position: relative; display: block; width: 100%; cursor: pointer; }
/* El control nativo se retira de la vista, no de la accesibilidad:
   el estado lo dice la caja, que es la pieza del sistema. */
.via-op__in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.via-op__caja {
  --op-fg: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  height: 100%;
  min-height: calc(var(--cell) * 1.4);
  padding: var(--stack-2);
  color: var(--op-fg);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--node-ghost-ln);
  border-radius: var(--r-node);
  transition: background-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.via-op__n {
  font-size: var(--t-3);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-wide);
}
.via-op__d {
  font-size: var(--t-small);
  line-height: 1.45;
  color: color-mix(in srgb, var(--op-fg) 72%, transparent);
}
.via-op:hover .via-op__caja { background: var(--senal-velo); }
.via-op:active .via-op__caja { transform: scale(0.99); }
/* Elegido = CONTACTO: no es «una capacidad colocada», es la respuesta
   que diste tú. Relleno coral con tinta encima (7,04:1, AAA). El velo
   del hover sale del mismo color, así que acercarse y elegir son dos
   grados de un mismo gesto. Y el conector baja de aquí al botón: tu
   elección y la acción quedan cosidas por la señal. */
.via-op__in:checked ~ .via-op__caja {
  --op-fg: var(--senal-sobre);
  background: var(--senal);
  box-shadow: none;
}
.via-op__in:checked ~ .via-op__caja .via-op__d {
  color: color-mix(in srgb, var(--senal-sobre) 78%, var(--senal));
}
.via-op__in:focus-visible ~ .via-op__caja {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* La tercera no es un tercer programa: es la salida para quien aún
   no ha decidido. Por eso ni comparte ancho ni comparte peso. */
.via-op--abierta { width: auto; }
.via-op--abierta .via-op__caja {
  /* 44 px: es el mínimo con el que un dedo acierta sin pelearse. */
  min-height: 44px;
  padding: 0.7rem 1.15rem;
}
.via-op--abierta .via-op__n {
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
}

/* ---------- La fila: el rótulo encima de su casilla ---------- */
.f-row {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  text-align: center;
}

.f-c {
  width: 100%;
  min-height: max(52px, calc(var(--cell) * 0.78));
  padding: 0.75rem 1rem;
  background: var(--slot);
  color: var(--fg);
  border: 0;
  box-shadow: inset 0 0 0 2px transparent;
  border-radius: var(--r-node);
  font-family: var(--font);
  font-size: var(--t-3);
  font-weight: var(--w-light);
  /* El rótulo va al eje; lo que se escribe, no. Un campo con el texto
     centrado mueve el cursor a cada tecla y deja el valor bailando
     dentro de la casilla: se escribe desde el filo izquierdo. */
  text-align: left;
  transition: box-shadow var(--dur-ui) var(--ease-out),
              background-color var(--dur-ui) var(--ease-out);
}
.f-c--area {
  min-height: calc(var(--cell) * 2.2);
  padding-top: 0.9rem;
  font-size: var(--t-body);
  font-weight: var(--w-book);
  line-height: var(--lh-body);
  resize: vertical;
}
/* El velo de contacto, el mismo de la cabecera y de las opciones. */
.f-c:hover { background: var(--senal-velo); }
/* Contestado = módulo colocado: la casilla deja de ser sustrato y
   pasa a contorno, que en el sistema es «tu lado». */
.f-c:valid {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--node-ghost-ln);
}
/* El error solo después de que la persona intentó algo: :user-invalid,
   no :invalid, que marcaría el formulario vacío nada más entrar. La
   segunda vía es el intento de envío. Sin color: el coral significa
   Stablecoin Global Solution y la acción, no una alarma. */
.f-c:user-invalid,
.forma.es-intento .f-c:invalid {
  background: var(--slot);
  box-shadow: inset 0 0 0 2px var(--fg);
}

.f-err {
  display: none;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--fg);
}
.f-c:user-invalid ~ .f-err,
.forma.es-intento .f-c:invalid ~ .f-err,
.eleccion.es-err .eleccion__err { display: block; }
.eleccion__err { margin: var(--stack-1) 0 0; }
.eleccion.es-err .via-op__caja { box-shadow: inset 0 0 0 2px var(--fg); }
.eleccion.es-err .via-op__in:checked ~ .via-op__caja { box-shadow: none; }

/* ---------- El pie: el conector baja por el eje y entra en la acción ----------
   Con la página en una columna, el conector deja de entrar de lado:
   cae en vertical, que es el sentido en el que se ha leído todo, y
   remata en la única punta de flecha del sistema. Mismo grosor que
   los conectores del tablero. Sin gap entre el hilo y el botón: el
   conector ENTRA en el bloque, no se queda cerca. */
.f-row--pie { margin-top: var(--stack-2); }
.forma__pie {
  display: grid;
  justify-items: center;
}
.hilo {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--pitch);
}
/* El conector que entra en la acción va entero en coral: la sección de
   contacto vive sobre negro, donde el coral da 6,72:1. Nace en la
   elección que hiciste —que también está en coral— y desemboca en el
   botón. Es el único tramo del sitio donde la señal se ve de principio
   a fin en una sola línea de lectura. */
.hilo::before {
  content: "";
  flex: 1;
  width: 5px;
  border-radius: var(--r-unit);
  background: var(--senal);
}
.hilo__pt { fill: var(--senal); transform: rotate(90deg); margin-top: -1px; }

.forma__nota,
.forma__aviso {
  margin: var(--stack-2) 0 0;
  font-size: var(--t-small);
  line-height: 1.45;
  max-width: 46ch;
  text-align: center;
}
.forma__nota { color: var(--fg-soft); }
.forma__aviso { margin-top: var(--stack-1); }
.forma__aviso:empty { display: none; }

/* El bloque «MÓVIL — el eje pasa al centro» que vivía aquí se retiró:
   centraba a mano en pantalla pequeña lo que ahora está centrado en
   todas. Ni una excepción por ancho: el eje es el mismo siempre. */


/* ---------- Iconos de las capacidades de cada camino ----------
   Los del deck, redibujados como línea: la misma lectura, pero con la
   retícula y el grosor del sistema. Van en coral, como en el deck.
   Sobre papel el coral solo vale como GRAFISMO, nunca como texto: el
   icono es trazo y el nombre de la capacidad va al lado en tinta, así
   que el color no carga ningún dato que no esté ya escrito. El trazo
   sube de 1,6 a 2 para que la señal tenga cuerpo. */
.caps--ico { gap: var(--stack-2); }
.caps--ico li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cap-ico {
  width: 1.55em;
  height: 1.55em;
  flex: none;
  fill: none;
  stroke: var(--senal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Las rutas del mapa ----------
   Se dibujan encima del mapamundi, en la misma caja: el SVG comparte
   viewBox con la imagen, así cada nodo cae sobre su ciudad. */
.map { position: relative; }
.map__red {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.map__ruta {
  fill: none;
  stroke: var(--senal);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.85;
}
.map__nodo { fill: var(--senal); }
/* Las plazas que cuelgan de un concentrador van más pequeñas: la malla
   tiene jerarquía, no todos los puntos pesan igual. */
.map__nodo--menor { fill: var(--senal); opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
  .map__ruta {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .map__nodo, .map__nodo--menor { opacity: 0; }
  .map.is-in .map__ruta {
    animation: trazar 1100ms var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 140ms);
  }
  .map.is-in .map__nodo,
  .map.is-in .map__nodo--menor {
    animation: surgir 420ms var(--ease-out) forwards;
    animation-delay: calc(240ms + var(--i) * 120ms);
  }
  @keyframes trazar { to { stroke-dashoffset: 0; } }
  @keyframes surgir { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
}


/* ---------- La secuencia ocupa la pantalla entera ----------
   La sección mide una pantalla y su contenido se centra en ella: la
   cabecera y los seis pasos se leen de una sola vista, con aire
   alrededor. La ruta de USD → COP viene después, en su propio tramo. */
.flujo {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}
.flujo > .shell > .head { margin-bottom: clamp(2rem, 6vh, 4.5rem); }
/* Con la pantalla entera para repartir, los renglones respiran. */
.flujo .steps { gap: clamp(0.5rem, 1.8vh, 1.4rem) var(--stack-3); }
.flujo .step { padding-block: clamp(0.3rem, 1.1vh, 0.9rem); }
.flujo > .shell > .head .head__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.ruta { margin-top: 0; }


/* ---------- Los mercados, con su bandera ----------
   Cada país es una ficha: la bandera arriba, a tamaño de verse, y el
   nombre debajo. La reja se reparte sola y todas las fichas miden lo
   mismo, así el bloque se lee como un panel de cobertura. */
.paises {
  display: grid;
  /* Seis columnas, no «las que quepan»: 18 mercados en tres filas
     exactas, sin huecos al final. Los cortes también son divisores. */
  grid-template-columns: repeat(var(--cols, 6), minmax(4.5rem, 7.5rem));
  justify-content: center;
  gap: var(--stack-2) var(--stack-1);
  width: 100%;
  margin: var(--stack-2) auto 0;
  padding: 0;
  list-style: none;
  color: var(--fg);
}
.pais {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.55rem;
  text-align: center;
  font-size: var(--t-small);
}
.pais__bandera {
  width: clamp(34px, 3.4vw, 46px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-unit);
  /* Un filo tenue para que las banderas con blanco no se fundan con el
     papel. */
  box-shadow: inset 0 0 0 1px var(--linea);
}
@media (max-width: 1023px) { .paises { --cols: 3; } }
@media (max-width: 559px)  { .paises { --cols: 2; } }

/* ---------- La imagen de cada vía ----------
   Renders generados con Gemini (originales en herramientas/fotos-origen).
   La imagen se funde con su tarjeta sin que se vea su rectángulo: el
   borde se desvanece en elipse y el fondo del render se mezcla con el de
   la tarjeta (darken en la clara, lighten en la oscura). */
.via__img {
  display: block;
  width: 112%;
  max-width: none;
  height: auto;
  margin: calc(var(--stack-2) * -1) -6% 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 58%, transparent 100%);
}
.via--claro .via__img { mix-blend-mode: darken; }
.via--oscuro .via__img { mix-blend-mode: lighten; }