/* Orinoco Labs — /flow
   Componentes que sólo usa flow.html. Se apoya en styles.css y en tokens.css.
   Dos agregados al sistema, acotados a esta página hasta que se aprueben:
   la fuente monoespaciada (fragmentos técnicos) y el modo oscuro. Si la
   página pasa a ser la home, ambos se mudan a tokens.css. */

:root {
  --fuente-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

  /* Geometría del lienzo del hero, con nombre para no dejar números sueltos */
  --lienzo-tramo: var(--esp-24);
  --lienzo-tramo-largo: var(--esp-40);
  --lienzo-marca: 6px;
}

/* ---------- Modo oscuro ----------
   Mismo sistema invertido: el granito pasa a ser el papel y viceversa.
   Contraste verificado sobre --papel #111518: granito 15.0:1, niebla 7.9:1,
   agua-profunda 8.9:1, hierro-texto 7.2:1 (todos AA o mejor, también sobre
   --papel-alto y --marco). Las sombras se oscurecen: sobre fondo oscuro una
   sombra granito no se ve, y la regla hairline + sombra sigue valiendo. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papel:         #111518;
    --papel-alto:    #181D21;
    --marco:         #1F2529;
    --linea:         #2B3237;
    --granito:       #ECE8E1;
    --niebla:        #A2ABAF;
    --agua-profunda: #5EC4C1;
    --agua:          #2CA6A4;
    --hierro:        #C0653A;
    --hierro-texto:  #E38D63;
    --sombra-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.20);
    --sombra-2: 0 2px 4px rgba(0,0,0,0.30), 0 6px 12px rgba(0,0,0,0.30);
    --sombra-3: 0 4px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.40);
  }
}

/* Logo: dos <img> en vez de <picture>, porque <picture> no vuelve a elegir
   fuente si el sistema cambia de tema con la página abierta (el logo claro
   quedaba sobre papel claro). La versión oscura es lazy: en modo claro, al
   estar oculta, no se descarga. */
.wordmark .logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  .wordmark .logo-claro { display: none; }
  .wordmark .logo-oscuro { display: block; }
}

/* ---------- Monoespaciada ---------- */

code, .mono {
  font-family: var(--fuente-mono);
  font-size: 0.88em;
  font-weight: var(--peso-body);
}
code {
  color: var(--granito);
  background: var(--marco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tag);
  padding: 0 0.3em;
  overflow-wrap: anywhere;
}

/* Las listas y bloques de abajo arrancan sin margen, pero con especificidad 0
   (:where) para que las utilidades .mt-* de styles.css les ganen aunque esta
   hoja cargue después. Con un `margin: 0` común, el .mt-40 se perdía y los
   títulos quedaban pegados a las tarjetas. */
:where(.preguntas, .filas, .puntos, .niveles, .pasos, .principios) { margin: 0; }

/* ---------- Nav ----------
   Con «Agenda una sesión técnica», logo + enlaces + CTA necesitan ~820px en
   una sola línea: no entran a 900px (donde corta styles.css) y el texto se
   partía en dos renglones. Hamburguesa hasta 999px, y nada se parte. */

.nav__links a, .nav__cta { white-space: nowrap; }
@media (max-width: 999px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- Hero ---------- */

.hero__prueba { margin-top: var(--esp-24); }
.sin-corte { white-space: nowrap; }

/* ---------- Lienzo del hero ----------
   El recorrido de un turno, dibujado en HTML: el texto es texto y se lee
   igual a 320px que a 1440px. Cajas con hairline + sombra, conectores en
   --agua, como el resto del sitio. */

.lienzo { margin: 0; }

.lienzo__area {
  position: relative;
  margin-top: var(--esp-16);
  padding: var(--esp-20) var(--esp-16);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tag);
  overflow: hidden;
}
@media (min-width: 720px) {
  .lienzo__area { padding: var(--esp-24); }
}

/* La grilla de puntos es un <pattern> SVG: sin gradientes. */
.lienzo__grilla { position: absolute; inset: 0; width: 100%; height: 100%; }
.lienzo__punto { fill: var(--linea); }

.lienzo__flujo { position: relative; display: flex; flex-direction: column; align-items: center; }

.nodo {
  width: 100%;
  max-width: 300px;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-1);
  padding: var(--esp-10) var(--esp-12);
}
.nodo--agente { border-color: var(--agua-profunda); box-shadow: var(--sombra-2); }

.nodo__tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-10);
  font-size: var(--tipo-tag);
  font-weight: var(--peso-ui);
  line-height: 1.4;
  color: var(--niebla);
}
.nodo__tipo::before {
  content: '';
  flex: 0 0 auto;
  width: var(--lienzo-marca);
  height: var(--lienzo-marca);
  border-radius: 1px;
  background: var(--agua);
}
.nodo__tipo--agente { color: var(--hierro-texto); }
.nodo__tipo--agente::before { background: var(--hierro); }
.nodo__tipo--api::before { background: var(--granito); }

.nodo__titulo {
  display: block;
  margin-top: 2px;
  font-size: var(--tipo-nodo);
  font-weight: var(--peso-titulo);
  line-height: 1.35;
  color: var(--granito);
}

/* Conector vertical, con pulso y etiqueta opcional a la derecha */
.lienzo__link {
  position: relative;
  width: 0;
  height: var(--lienzo-tramo);
  border-left: 1px solid var(--agua);
}
.lienzo__link--largo { height: var(--lienzo-tramo-largo); }
.lienzo__etiqueta {
  position: absolute;
  left: var(--esp-12);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--fuente-mono);
  font-size: var(--tipo-tag);
  color: var(--niebla);
}
.lienzo__pulso {
  position: absolute;
  left: -3px;
  top: 0;
  width: var(--lienzo-marca);
  height: var(--lienzo-marca);
  border-radius: 50%;
  background: var(--agua-profunda);
  animation: lienzo-pulso 2.4s linear infinite;
}
.lienzo__pulso--2 { animation-delay: 1.2s; }
@keyframes lienzo-pulso {
  from { top: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { top: 100%; opacity: 0; }
}

/* Canales de entrada: tres cajas que se juntan en una línea. La línea va
   de centro a centro de la primera y la última columna. */
.lienzo__canales {
  --gap-canales: var(--esp-10);
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-canales);
  padding-bottom: var(--lienzo-tramo);
}
.lienzo__canales::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: calc((100% - 2 * var(--gap-canales)) / 6);
  right: calc((100% - 2 * var(--gap-canales)) / 6);
  border-top: 1px solid var(--agua);
}
.lienzo__canal { position: relative; min-width: 0; display: flex; }
.lienzo__canal::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  height: var(--lienzo-tramo);
  border-left: 1px solid var(--agua);
}
.lienzo__canal .nodo { flex: 1 1 auto; padding: var(--esp-10); text-align: center; }
.lienzo__canal .nodo__titulo { margin-top: 0; }

/* ---------- 01 · El problema ---------- */

.preguntas { list-style: none; padding: 0; counter-reset: pregunta; }
.preguntas li {
  position: relative;
  padding: var(--esp-16) 0 var(--esp-16) var(--esp-40);
  border-top: 1px solid var(--linea);
  font-size: var(--tipo-body);
  line-height: 1.55;
  color: var(--granito);
  text-wrap: pretty;
  counter-increment: pregunta;
}
.preguntas li:last-child { border-bottom: 1px solid var(--linea); }
.preguntas li::before {
  content: counter(pregunta, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--esp-16);
  font-size: var(--tipo-numero);
  font-weight: var(--peso-titulo);
  line-height: 2;
  color: var(--agua);
}

.remate {
  margin-top: var(--esp-40);
  font-size: var(--tipo-claim);
  line-height: 1.3;
  font-weight: var(--peso-enfasis);
  color: var(--granito);
  max-width: var(--medida-l);
  text-wrap: balance;
}

/* ---------- 02 · Cómo funciona / 05 · Bajo el capó ----------
   Filas de definición: nombre a la izquierda, descripción a la derecha.
   Siete ítems no entran parejos en ninguna grilla; en filas sí. */

.fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-10) var(--gap-grid);
  padding: var(--esp-24) 0;
  border-top: 1px solid var(--linea);
}
.fila:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 760px) {
  .fila { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ---------- 03 · Casos de uso ---------- */

.casos { display: flex; flex-direction: column; gap: var(--gap-grid); }

.caso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-24) clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
  .caso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* En celular el padding grande de card--lg le come un tercio al texto. */
@media (max-width: 599px) {
  .caso.card--lg { padding: var(--esp-24); }
}
.caso__titulo { margin-top: var(--esp-16); font-size: var(--tipo-h3-prod); line-height: 1.05; letter-spacing: var(--ls-titulo); }
.caso__intro { margin-top: var(--esp-16); }

.puntos { list-style: none; padding: 0; }
.puntos li {
  position: relative;
  padding: var(--esp-12) 0 var(--esp-12) var(--esp-24);
  border-top: 1px solid var(--linea);
  font-size: var(--tipo-body-sm);
  line-height: 1.6;
  color: var(--granito);
  text-wrap: pretty;
}
.puntos li:first-child { border-top: 0; padding-top: 0; }
.puntos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--esp-12) + 0.62em);
  width: var(--esp-10);
  border-top: 1px solid var(--agua);
}
.puntos li:first-child::before { top: 0.62em; }

.caso__tambien { margin-top: var(--esp-20); padding-top: var(--esp-16); border-top: 1px solid var(--linea); }

/* ---------- 04 · Integración ---------- */

.niveles { list-style: none; padding: 0; counter-reset: nivel; }
.nivel { counter-increment: nivel; }
.nivel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); }
.nivel__head::before {
  content: counter(nivel, decimal-leading-zero);
  font-size: var(--tipo-numero);
  font-weight: var(--peso-titulo);
  color: var(--agua);
}

.cita {
  margin: var(--esp-48) 0 0;
  padding-left: var(--esp-24);
  border-left: 2px solid var(--agua-profunda);
  max-width: var(--medida-xl);
}
.cita p {
  font-size: var(--tipo-claim);
  line-height: 1.35;
  font-weight: var(--peso-ui);
  color: var(--granito);
  text-wrap: pretty;
}

.pasos { list-style: none; padding: 0; counter-reset: paso; }
.pasos .card { counter-increment: paso; }
.pasos .card::before {
  content: counter(paso, decimal-leading-zero);
  font-size: var(--tipo-numero);
  font-weight: var(--peso-titulo);
  color: var(--agua);
}

/* Cuatro pasos: 1 columna, 2 desde 600px, 4 desde 1100px. Nunca 3 + 1. */
.grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pilares--texto .pilar h3 { margin-top: 0; }

/* ---------- 06 · Principios ---------- */

.principios {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0 var(--gap-grid);
}
.principio { padding: var(--esp-32) 0; border-top: 1px solid var(--linea); }
.principio__frase {
  font-size: var(--tipo-h3-prod);
  font-weight: var(--peso-titulo);
  line-height: 1.05;
  letter-spacing: var(--ls-titulo);
  color: var(--granito);
  text-wrap: balance;
}
.principio__frase .em--t { font-weight: var(--peso-titulo); }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .lienzo__pulso { animation: none; opacity: 0; }
}