/* ============================================================
   BIOMA — ia.css · página "Automatización de procesos con IA"
   Se carga DESPUÉS de style.css y home-v2.css (reusa su sistema:
   hero con polvo, tarjetas .dcard con ilustraciones, constelación
   .sana, FAQ y cierre). Acá solo lo propio de esta página.
   ============================================================ */

/* ---------- Hero: sin abanico, con las herramientas abajo ---------- */
.hero--ia { grid-template-rows: 1fr; padding-bottom: var(--sp-lg); }
.hero--ia .hero__title { font-size: clamp(2.3rem, 1rem + 4.2vw, 4.6rem); }
@media (max-width: 767px) {
  /* la 1.ª línea ("Automatización de procesos") mide ~13 em */
  .hero--ia .hero__title { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
}
.stack {
  margin-top: var(--sp-md);
  display: grid;
  justify-items: center;
  gap: .9rem;
}
.stack__label { font-size: var(--fs-sm); color: var(--muted); }
.stack__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}
.stack__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .5rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: rgba(6, 5, 18, 0.55);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.stack__item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--mint));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--mint)) 22%, transparent);
}
/* logo de cada herramienta, en blanco (Simple Icons, CC0) */
.stack__item svg { width: 18px; height: 18px; flex: none; fill: #fff; }
.tag svg { width: 13px; height: 13px; flex: none; fill: #fff; }
.hero__nota { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); }
.hero__nota strong { color: var(--mint); font-weight: 600; }

/* ---------- Agentes, skills y documentos ---------- */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.trio__item {
  display: grid;
  align-content: start;
  gap: .7rem;
  padding: 1.1rem 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--grad-card);
}
.trio__ilu {
  height: 128px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(108, 99, 255, 0.12), transparent 70%), rgba(6, 5, 18, 0.45);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.trio__ilu svg { width: 100%; height: 100%; display: block; }
.trio__paso {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--lavender);
}
.trio__t { font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; }
.trio__d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.trio__ej {
  margin-top: .2rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.trio__ej b { color: var(--mint); font-weight: 600; }
.trio__regla {
  margin-top: var(--sp-md);
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--muted);
  text-wrap: balance;
}
.trio__regla strong { color: var(--text); font-weight: 600; }
@media (max-width: 899px) { .trio { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* mini ilustraciones del trío (SVG propio, mismo lenguaje que .pillus) */
.tri-doc { fill: rgba(19, 16, 41, 0.92); stroke: var(--line-strong); }
.tri-sk { fill: rgba(169, 164, 248, 0.2); }
.tri-sk2 { fill: rgba(169, 164, 248, 0.38); }
.tri-mint { fill: var(--mint); }
.tri-iris { fill: var(--iris); }
.tri-check { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tri-line { fill: none; stroke: rgba(169, 164, 248, 0.45); stroke-width: 1.2; stroke-dasharray: 3 3; }
.tri-anillo { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.tri-pulso { fill: none; stroke: var(--mint); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.trio__ilu text { font-family: var(--font-display); font-size: 8px; font-weight: 600; fill: var(--muted); }
.tri-orbita { transform-box: view-box; transform-origin: 150px 64px; }
.trio.is-in .tri-orbita { animation: tri-giro 14s linear infinite; }
.trio.is-in .tri-pulso { animation: tri-pulso 2.8s var(--ease-expo) infinite; }
.trio.is-in .tri-paso { animation: tri-paso 4.2s var(--ease-expo) infinite; animation-delay: calc(var(--k) * .45s); }
@keyframes tri-giro { to { transform: rotate(360deg); } }
@keyframes tri-pulso { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes tri-paso { 0%, 8% { opacity: .25; } 18%, 82% { opacity: 1; } 100% { opacity: .25; } }

/* ---------- Dos caminos: tienda online / empresa de servicios ---------- */
.caminos__tabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-md);
}
.caminos__switch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: rgba(6, 5, 18, 0.6);
}
.caminos__tab {
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 100px;
  padding: .7rem 1.35rem;
  min-height: 46px;
  cursor: pointer;
  transition: color .3s var(--ease-expo), background-color .3s var(--ease-expo);
}
.caminos__tab[aria-selected="true"] { background: var(--text); color: var(--ink); }
.caminos__tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.caminos__panel[hidden] { display: none; }
.flujos { list-style: none; display: grid; gap: .75rem; max-width: 1100px; margin-inline: auto; }
.flujo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.3fr) 16rem;   /* columnas fijas: las flechas quedan alineadas entre filas */
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--grad-card);
  transition: border-color .3s var(--ease-expo), transform .3s var(--ease-expo);
}
.flujo:hover { border-color: var(--line-strong); transform: translateX(4px); }
.flujo__cuando, .flujo__pasa { display: grid; gap: .2rem; }
.flujo__k {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--lavender);
}
.flujo__v { font-size: var(--fs-base); color: var(--text); line-height: 1.4; }
.flujo__flecha { width: 40px; height: 14px; }
.flujo__flecha path { fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flujo__flecha .fl-linea { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease-expo); transition-delay: calc(.15s + var(--i, 0) * 90ms); }
.caminos__panel.is-on .fl-linea { stroke-dashoffset: 0; }
.flujo__con { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--mint)); }
.caminos__panel .flujo { opacity: 0; transform: translateY(14px); }
.caminos__panel.is-on .flujo {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-expo), transform .7s var(--ease-expo), border-color .3s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}
.caminos__panel.is-on .flujo:hover { transform: translateX(4px); }
.caminos__pie { margin-top: var(--sp-sm); text-align: center; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 899px) {
  .flujo { grid-template-columns: 1fr; gap: .55rem; }
  .flujo__flecha { transform: rotate(90deg); margin-left: .2rem; }
  .flujo__con { justify-content: flex-start; }
}

/* ---------- Método + diagnóstico ---------- */
.metodo__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-lg);
  align-items: start;
}
.pasos { list-style: none; display: grid; gap: 0; position: relative; }
.pasos::before {                      /* el hilo que une los pasos */
  content: '';
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(var(--mint), var(--iris) 60%, var(--line));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--ease-expo) .2s;
}
.metodo.is-in .pasos::before, html:not(.js-anim) .pasos::before { transform: none; }
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1.1rem;
  padding-bottom: var(--sp-md);
}
.paso:last-child { padding-bottom: 0; }
.paso__n {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}
.paso--uno .paso__n { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.paso__t { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.paso__meta { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; color: var(--lavender); margin: .2rem 0 .35rem; }
.paso__d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 46ch; }

.oferta {
  position: sticky;
  top: 7rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border: 1px solid rgba(62, 230, 168, 0.4);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(62, 230, 168, 0.09), rgba(19, 16, 41, 0.92) 45%);
}
.oferta__k { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--mint); }
.oferta__t { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; margin: .3rem 0 .8rem; }
.oferta__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.oferta__monto { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; }
.oferta__monto .pendiente { color: var(--lavender); }
.oferta__iva { color: var(--muted); font-size: var(--fs-sm); }
.oferta__plazo { margin-top: .2rem; font-size: var(--fs-sm); color: var(--muted); }
.oferta__lista { list-style: none; display: grid; gap: .55rem; margin: 1.2rem 0; }
.oferta__lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; font-size: var(--fs-sm); line-height: 1.5; }
.oferta__lista svg { width: 22px; height: 22px; }
.oferta__lista svg circle { fill: var(--mint); }
.oferta__lista svg path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oferta__desc {
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(62, 230, 168, 0.1);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.oferta .btn { width: 100%; margin-top: 1.1rem; }
.oferta__nota { margin-top: .8rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; text-align: center; }
@media (max-width: 899px) {
  .metodo__wrap { grid-template-columns: 1fr; }
  .oferta { position: static; }
}

/* matriz impacto/esfuerzo del diagnóstico */
.matriz { margin-top: var(--sp-md); }
.matriz__cap { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .6rem; }
.matriz svg { width: 100%; height: auto; display: block; overflow: visible; }
.mx-marco { fill: rgba(6, 5, 18, 0.45); stroke: var(--line); }
.mx-cuad { fill: rgba(62, 230, 168, 0.1); stroke: rgba(62, 230, 168, 0.45); stroke-dasharray: 4 3; }
.mx-eje { stroke: var(--line-strong); stroke-width: 1.2; }
.matriz text { font-family: var(--font-display); font-weight: 600; font-size: 12px; fill: var(--muted); }
.matriz .mx-cuad-t { fill: var(--mint); font-size: 11.5px; }
.mx-p { transition: transform 1.1s var(--ease-expo), opacity .6s var(--ease-expo); transition-delay: calc(.2s + var(--i) * 90ms); }
.mx-p circle { fill: var(--lavender); }
.mx-p.mx-top circle { fill: var(--mint); }
.mx-p text { font-size: 12px; fill: var(--text); }
/* antes de entrar: todos apilados como una lista desordenada a la izquierda */
.js-anim .matriz:not(.is-in) .mx-p { transform: translate(var(--x0), var(--y0)); opacity: .55; }

/* ---------- Casos (oculto hasta completarlo) ---------- */
.casos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; }

/* ---------- Seguridad ---------- */
.reglas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.regla {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--grad-card);
  display: grid;
  align-content: start;
  gap: .55rem;
}
.regla__ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--mint);
  background: rgba(62, 230, 168, 0.1);
}
.regla__ico svg { width: 22px; height: 22px; }
.regla__t { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.regla__d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.seguridad .capa { margin-inline: auto; }
@media (max-width: 1099px) { .reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .reglas { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .trio .tri-orbita, .trio .tri-pulso, .trio .tri-paso { animation: none !important; }
  .js-anim .matriz:not(.is-in) .mx-p { transform: none; opacity: 1; }
  .caminos__panel .flujo { opacity: 1; transform: none; }
  .flujo__flecha .fl-linea { stroke-dashoffset: 0; }
}

/* ============================================================
   Ilustraciones animadas de "¿Te suena esto?" (misma familia que las del home)
   ============================================================ */

/* copia · tu equipo copia a mano de una planilla a otra: fila por fila, pasan las horas y un dato cae mal */
.pill--copia{--d:7.2s}
.il-copia-cab{fill:var(--line);fill-opacity:.6}
.il-copia-grilla{fill:none;stroke:var(--line)}
.il-copia-dato{fill:none;stroke:var(--line-strong);stroke-width:4;stroke-linecap:round}
.il-copia-mal{fill:none;stroke:var(--danger);stroke-width:4;stroke-linecap:round}
.il-copia-celda{fill:var(--danger);fill-opacity:.14;stroke:var(--danger);stroke-width:1.5}
.il-copia-alerta circle{fill:var(--danger);stroke:var(--ink);stroke-width:2}
.il-copia-alerta path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
.il-copia-sel{fill:var(--iris);fill-opacity:.14;stroke:var(--iris);stroke-width:1.5;stroke-dasharray:4 3}
.pillus .il-copia-flash{fill:var(--iris);opacity:0}
.il-copia-flecha{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.il-cursor .il-copia-chip rect{fill:var(--surface-2);stroke:var(--iris);stroke-width:1.2}
.il-cursor .il-copia-chip path{fill:none;stroke:var(--lavender);stroke-width:3;stroke-linecap:round}
.pillus .il-copia-chip{opacity:0}
.il-copia-esfera{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5}
.il-copia-marcas{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round}
.pillus .il-copia-hora,.pillus .il-copia-min{stroke-linecap:round;transform-box:view-box;transform-origin:150px 100px}
.pillus .il-copia-hora{stroke:var(--lavender);stroke-width:2.5;transform:rotate(90deg)}
.il-copia-min{stroke:var(--muted);stroke-width:1.8}
.il-copia-eje{fill:var(--lavender)}
.pillus .il-copia-n{font-size:11px;font-weight:700;fill:var(--lavender)}

/* coreografia: tres vueltas de copiar (izquierda) y pegar (derecha); el reloj gira una hora por fila; la tercera fila cae con un dato mal */
.dcard .il-copia-cur{animation:il-copia-cur var(--d) var(--ease) infinite}
@keyframes il-copia-cur{
  0%,3%{opacity:0;transform:translate(140px,150px)}
  5%{opacity:1}
  10%,13%{transform:translate(66px,39px)}
  19%,22%{transform:translate(198px,39px)}
  28%,31%{transform:translate(66px,55px)}
  37%,40%{transform:translate(198px,55px)}
  46%,49%{transform:translate(66px,71px)}
  55%,100%{opacity:1;transform:translate(198px,71px)}
}
.dcard .il-copia-clk{animation:il-copia-clk var(--d) ease-out infinite}
@keyframes il-copia-clk{
  0%,10%{opacity:0;transform:scale(.3)}10.6%{opacity:1}13.5%{opacity:0;transform:scale(1.8)}
  13.6%,19%{opacity:0;transform:scale(.3)}19.6%{opacity:1}22.5%{opacity:0;transform:scale(1.8)}
  22.6%,28%{opacity:0;transform:scale(.3)}28.6%{opacity:1}31.5%{opacity:0;transform:scale(1.8)}
  31.6%,37%{opacity:0;transform:scale(.3)}37.6%{opacity:1}40.5%{opacity:0;transform:scale(1.8)}
  40.6%,46%{opacity:0;transform:scale(.3)}46.6%{opacity:1}49.5%{opacity:0;transform:scale(1.8)}
  49.6%,55%{opacity:0;transform:scale(.3)}55.6%{opacity:1}58.5%{opacity:0;transform:scale(1.8)}
  58.6%,100%{opacity:0;transform:scale(.3)}
}
.dcard .il-copia-chip{animation:il-copia-chip var(--d) linear infinite}
@keyframes il-copia-chip{
  0%,10.2%{opacity:0}11%,18.6%{opacity:1}19.2%,28.2%{opacity:0}29%,36.6%{opacity:1}
  37.2%,46.2%{opacity:0}47%,54.6%{opacity:1}55.2%,100%{opacity:0}
}
.dcard .il-copia-sel{animation:il-copia-sel var(--d) linear infinite,il-copia-hormigas .6s linear infinite}
@keyframes il-copia-sel{
  0%,10%{opacity:0;transform:translateY(-32px)}
  10.6%,27.9%{opacity:1;transform:translateY(-32px)}
  28%,45.9%{opacity:1;transform:translateY(-16px)}
  46%,100%{opacity:1;transform:none}
}
@keyframes il-copia-hormigas{to{stroke-dashoffset:-7}}
.dcard .il-copia-flash{animation:il-copia-flash var(--d) linear infinite}
@keyframes il-copia-flash{
  0%,19%{opacity:0;transform:translateY(-32px)}19.6%{opacity:.4}25%{opacity:0;transform:translateY(-32px)}
  31%,37%{opacity:0;transform:translateY(-16px)}37.6%{opacity:.4}43%{opacity:0;transform:translateY(-16px)}
  49%,55%{opacity:0;transform:none}55.6%{opacity:.4}61%,100%{opacity:0;transform:none}
}
.dcard .il-copia-f1{animation:il-copia-f1 var(--d) var(--ease) infinite}
.dcard .il-copia-f2{animation:il-copia-f2 var(--d) var(--ease) infinite}
.dcard .il-copia-f3{animation:il-copia-f3 var(--d) var(--ease) infinite}
@keyframes il-copia-f1{0%,19%{opacity:0;transform:translateX(-6px)}21%,100%{opacity:1;transform:none}}
@keyframes il-copia-f2{0%,37%{opacity:0;transform:translateX(-6px)}39%,100%{opacity:1;transform:none}}
@keyframes il-copia-f3{0%,55%{opacity:0;transform:translateX(-6px)}57%,100%{opacity:1;transform:none}}
.dcard .il-copia-celda{animation:il-copia-celda var(--d) linear infinite}
@keyframes il-copia-celda{0%,58%{opacity:0}59%,61%{opacity:1}62%{opacity:.25}63.5%,100%{opacity:1}}
.dcard .il-copia-alerta{animation:il-copia-alerta var(--d) var(--ease) infinite}
@keyframes il-copia-alerta{0%,60%{opacity:0;transform:scale(.3)}64%{opacity:1;transform:scale(1.25)}67%,100%{opacity:1;transform:none}}
.dcard .il-copia-n1{animation:il-copia-n1 var(--d) linear infinite}
.dcard .il-copia-n2{animation:il-copia-n2 var(--d) linear infinite}
.dcard .il-copia-n3{animation:il-copia-n3 var(--d) linear infinite}
@keyframes il-copia-n1{0%,19.4%{opacity:0}20%,37.4%{opacity:1}38%,100%{opacity:0}}
@keyframes il-copia-n2{0%,37.4%{opacity:0}38%,55.4%{opacity:1}56%,100%{opacity:0}}
@keyframes il-copia-n3{0%,55.4%{opacity:0}56%,100%{opacity:1}}
.dcard .il-copia-min{animation:il-copia-min var(--d) linear infinite}
.dcard .il-copia-hora{animation:il-copia-hora var(--d) linear infinite}
@keyframes il-copia-min{0%,1%{transform:rotate(0)}55%,100%{transform:rotate(1080deg)}}
@keyframes il-copia-hora{0%,1%{transform:rotate(0)}55%,100%{transform:rotate(90deg)}}

/* IA 1 · contestás la misma pregunta veinte veces por día: el chat se repite como el día de la marmota */
.pill--repite{--d:6.6s}
/* ventanas recortadas sin ids (svg anidado): el hilo sube bajo la cabecera y el contador rueda como odometro.
   Pisan el width/height:100% de ".pillus svg", que tambien alcanza a los svg anidados */
.pillus .il-repite-vh{width:194px;height:74px;overflow:hidden}
.pillus .il-repite-vn{width:54px;height:27px;overflow:hidden}
.il-repite-q{fill:rgba(169,164,248,.14);stroke:var(--line-strong)}
.pillus .il-repite-qt{font-size:8px;font-weight:500;fill:var(--lavender)}
.il-repite-a{fill:var(--iris)}
.pillus .il-repite-at{font-size:8px;font-weight:500;fill:#fff}
.il-repite-in{fill:var(--surface-2);stroke:var(--line)}
.pillus .il-repite-it{font-size:8px;font-weight:500;fill:var(--muted)}
.il-repite-tapa{fill:var(--surface-2)}
.pillus .il-repite-tapa{transform-origin:100% 50%}
.il-repite-caret{fill:var(--iris)}
.il-repite-env{fill:var(--iris)}
.il-repite-env-f{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.il-repite-aro{fill:none;stroke:var(--lavender);stroke-width:2.5;stroke-linecap:round}
.il-repite-punta{fill:var(--lavender)}
.pillus .il-repite-giro,.pillus .il-repite-pum{transform-box:view-box;transform-origin:253px 60px}
.pillus .il-repite-x{font-size:15px;font-weight:700;fill:var(--danger)}
.pillus .il-repite-n{font-size:21px;font-weight:700;fill:var(--danger);font-variant-numeric:tabular-nums}

/* coreografia (3 vueltas): llega la pregunta, el hilo sube, el contador rueda; tipeás la misma respuesta, enviás, sube otra vez.
   El hilo es periodico (P, R, P, R...): al terminar cada vuelta salta 2 filas atras sin que se note. */
.dcard .il-repite-hilo{animation:il-repite-hilo var(--d) var(--ease) infinite}
@keyframes il-repite-hilo{
  0%,3.03%{transform:translateY(0)}
  7.58%,18.48%{transform:translateY(-18px)}
  23.03%{transform:translateY(-36px);animation-timing-function:step-end}
  23.48%,24.24%{transform:translateY(0)}
  28.79%,39.7%{transform:translateY(-18px)}
  44.24%{transform:translateY(-36px);animation-timing-function:step-end}
  44.7%,53.03%{transform:translateY(0)}
  57.58%,68.64%{transform:translateY(-18px)}
  73.18%{transform:translateY(-36px);animation-timing-function:step-end}
  73.64%,100%{transform:translateY(0)}
}
.dcard .il-repite-tapa{animation:il-repite-tapa var(--d) linear infinite}
@keyframes il-repite-tapa{
  0%,8.79%{transform:scaleX(1);animation-timing-function:steps(9,end)}
  16.36%{transform:scaleX(0);animation-timing-function:step-end}
  17.88%,29.85%{transform:scaleX(1);animation-timing-function:steps(9,end)}
  37.42%{transform:scaleX(0);animation-timing-function:step-end}
  38.94%,58.79%{transform:scaleX(1);animation-timing-function:steps(9,end)}
  66.36%{transform:scaleX(0);animation-timing-function:step-end}
  67.88%,100%{transform:scaleX(1)}
}
.dcard .il-repite-tira{animation:il-repite-tira var(--d) var(--ease) infinite}
@keyframes il-repite-tira{
  0%,3.03%{transform:translateY(0)}
  8.5%,24.24%{transform:translateY(-24px)}
  29.7%,53.03%{transform:translateY(-48px)}
  58.5%,100%{transform:translateY(-72px)}
}
.dcard .il-repite-giro{animation:il-repite-giro var(--d) var(--ease) infinite}
@keyframes il-repite-giro{
  0%,3.03%{transform:rotate(0)}
  12.1%,24.24%{transform:rotate(360deg)}
  33.3%,53.03%{transform:rotate(720deg)}
  62.1%,100%{transform:rotate(1080deg)}
}
.dcard .il-repite-pum{animation:il-repite-pum var(--d) var(--ease) infinite}
@keyframes il-repite-pum{0%,57%{transform:scale(1)}60.5%{transform:scale(1.2)}65%,100%{transform:scale(1)}}
.dcard .il-repite-cur{animation:il-repite-cur var(--d) var(--ease) infinite}
@keyframes il-repite-cur{
  0%,2%{opacity:0;transform:translate(236px,150px)}
  4.5%{opacity:1}
  14%,17.6%{opacity:1;transform:translate(194px,121px)}
  18.2%{transform:translate(195px,122.5px)}
  19.4%,38.6%{transform:translate(194px,121px)}
  39.2%{transform:translate(195px,122.5px)}
  40.4%,67.6%{transform:translate(194px,121px)}
  68.2%{transform:translate(195px,122.5px)}
  69.4%,100%{opacity:1;transform:translate(194px,121px)}
}
.dcard .il-repite-clk{animation:il-repite-clk var(--d) ease-out infinite}
@keyframes il-repite-clk{
  0%,17.8%{opacity:0;transform:scale(.3)}
  18.6%{opacity:1}
  23.5%{opacity:0;transform:scale(1.8)}
  23.6%,38.8%{opacity:0;transform:scale(.3)}
  39.6%{opacity:1}
  44.5%{opacity:0;transform:scale(1.8)}
  44.6%,67.8%{opacity:0;transform:scale(.3)}
  68.6%{opacity:1}
  73.5%,100%{opacity:0;transform:scale(1.8)}
}
.dcard .il-repite-caret{animation:il-repite-caret var(--d) linear infinite}
@keyframes il-repite-caret{
  0%,8.79%{transform:translateX(0);animation-timing-function:steps(9,end)}
  16.36%{transform:translateX(66px);animation-timing-function:step-end}
  17.88%,29.85%{transform:translateX(0);animation-timing-function:steps(9,end)}
  37.42%{transform:translateX(66px);animation-timing-function:step-end}
  38.94%,58.79%{transform:translateX(0);animation-timing-function:steps(9,end)}
  66.36%{transform:translateX(66px);animation-timing-function:step-end}
  67.88%,100%{transform:translateX(0)}
}

/* sueltas · pagás herramientas que no se hablan: cuatro apps, cuatro cobros, ningún cable llega al otro */
.pill--sueltas{--d:6.8s}
.il-sueltas-g{fill:rgba(169,164,248,.5)}
.il-sueltas-tinta{fill:var(--ink)}
.il-sueltas-pliegue{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.il-sueltas-cable{stroke:rgba(169,164,248,.4);stroke-width:1.3;stroke-dasharray:3 2.5}
.pillus .il-sueltas-izq{transform-origin:0 50%}
.pillus .il-sueltas-der{transform-origin:100% 50%}
.il-sueltas-x circle{fill:var(--danger)}
.il-sueltas-x path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
.il-sueltas-pago circle{fill:var(--lavender);stroke:var(--ink);stroke-width:2}
.pillus .il-sueltas-pago text{font-size:10.5px;font-weight:700;fill:var(--ink)}
.pillus .il-sueltas-total{font-size:11px;font-weight:700;fill:var(--lavender)}

/* coreografia: cada app cobra su cuota; despues cada par intenta conectarse, los cables no llegan (x); al final vuelven a cobrar */
.dcard .il-sueltas-p1{animation:il-sueltas-p1 var(--d) var(--ease) infinite}
.dcard .il-sueltas-p2{animation:il-sueltas-p2 var(--d) var(--ease) infinite}
.dcard .il-sueltas-p3{animation:il-sueltas-p3 var(--d) var(--ease) infinite}
.dcard .il-sueltas-p4{animation:il-sueltas-p4 var(--d) var(--ease) infinite}
@keyframes il-sueltas-p1{0%,4%{opacity:0;transform:scale(.3)}7%{opacity:1;transform:scale(1.25)}9%,72%{opacity:1;transform:none}75%{transform:scale(1.3)}78%,100%{opacity:1;transform:none}}
@keyframes il-sueltas-p2{0%,8%{opacity:0;transform:scale(.3)}11%{opacity:1;transform:scale(1.25)}13%,74%{opacity:1;transform:none}77%{transform:scale(1.3)}80%,100%{opacity:1;transform:none}}
@keyframes il-sueltas-p3{0%,12%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.25)}17%,76%{opacity:1;transform:none}79%{transform:scale(1.3)}82%,100%{opacity:1;transform:none}}
@keyframes il-sueltas-p4{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.25)}21%,78%{opacity:1;transform:none}81%{transform:scale(1.3)}84%,100%{opacity:1;transform:none}}
.dcard .il-sueltas-total{animation:il-sueltas-total var(--d) linear infinite}
@keyframes il-sueltas-total{0%,19%{opacity:0}23%,100%{opacity:1}}
.dcard .il-sueltas-c1a,.dcard .il-sueltas-c1b{animation:il-sueltas-c1 var(--d) cubic-bezier(.45,0,.55,1) infinite}
.dcard .il-sueltas-c2a,.dcard .il-sueltas-c2b{animation:il-sueltas-c2 var(--d) cubic-bezier(.45,0,.55,1) infinite}
.dcard .il-sueltas-c3a,.dcard .il-sueltas-c3b{animation:il-sueltas-c3 var(--d) cubic-bezier(.45,0,.55,1) infinite}
.dcard .il-sueltas-c4a,.dcard .il-sueltas-c4b{animation:il-sueltas-c4 var(--d) cubic-bezier(.45,0,.55,1) infinite}
@keyframes il-sueltas-c1{0%,24%{transform:scaleX(0)}30%{transform:scaleX(1.15)}33%,100%{transform:scaleX(1)}}
@keyframes il-sueltas-c2{0%,35%{transform:scaleX(0)}41%{transform:scaleX(1.15)}44%,100%{transform:scaleX(1)}}
@keyframes il-sueltas-c3{0%,46%{transform:scaleX(0)}52%{transform:scaleX(1.15)}55%,100%{transform:scaleX(1)}}
@keyframes il-sueltas-c4{0%,57%{transform:scaleX(0)}63%{transform:scaleX(1.15)}66%,100%{transform:scaleX(1)}}
.dcard .il-sueltas-x1{animation:il-sueltas-x1 var(--d) var(--ease) infinite}
.dcard .il-sueltas-x2{animation:il-sueltas-x2 var(--d) var(--ease) infinite}
.dcard .il-sueltas-x3{animation:il-sueltas-x3 var(--d) var(--ease) infinite}
.dcard .il-sueltas-x4{animation:il-sueltas-x4 var(--d) var(--ease) infinite}
@keyframes il-sueltas-x1{0%,30%{opacity:0;transform:scale(.3)}33%{opacity:1;transform:scale(1.3)}36%,100%{opacity:1;transform:none}}
@keyframes il-sueltas-x2{0%,41%{opacity:0;transform:scale(.3)}44%{opacity:1;transform:scale(1.3)}47%,100%{opacity:1;transform:none}}
@keyframes il-sueltas-x3{0%,52%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.3)}58%,100%{opacity:1;transform:none}}
@keyframes il-sueltas-x4{0%,63%{opacity:0;transform:scale(.3)}66%{opacity:1;transform:scale(1.3)}69%,100%{opacity:1;transform:none}}

/* frena · si vos no estás, la empresa se frena: el trabajo del equipo avanza, se clava esperando tu OK y todo se apila en tu celular, que nadie atiende */
.pill--frena{--d:6.8s}
.il-frena-cables{fill:none;stroke:rgba(169,164,248,.4);stroke-width:1.3;stroke-dasharray:3 2.5}
.il-frena-pista{fill:rgba(169,164,248,.12)}
.il-frena-barra{fill:rgba(169,164,248,.45)}
.pillus .il-frena-barra{transform-origin:0 50%}
.il-frena-pz circle{fill:rgba(169,164,248,.14)}
.il-frena-pz path{fill:none;stroke:var(--lavender);stroke-width:2.4;stroke-linecap:round}
.il-frena-pulso{fill:var(--iris);opacity:0}
.il-frena-ondas{fill:none;stroke:var(--lavender);stroke-width:1.5;stroke-linecap:round;opacity:.7}
.il-frena-cuerpo{stroke-width:1.5}
.il-frena-nf{fill:var(--surface-2);stroke:var(--line)}
.il-frena-n circle{fill:var(--iris)}
.il-frena-badge circle{fill:var(--danger);stroke:var(--ink);stroke-width:2}
.pillus .il-frena-badge text{font-size:9.5px;font-weight:700;fill:var(--ink)}

/* coreografia: cada barra arranca en iris, frena, se apaga y aparece la pausa; un pulso viaja al celular,
   que suma una notificacion y vibra. Al final todos insisten a la vez: 9+, y el celular sigue sonando */
.dcard .il-frena-b1{animation:il-frena-b1 var(--d) var(--ease) infinite}
.dcard .il-frena-b2{animation:il-frena-b2 var(--d) var(--ease) infinite}
.dcard .il-frena-b3{animation:il-frena-b3 var(--d) var(--ease) infinite}
@keyframes il-frena-b1{0%,4%{transform:scaleX(0);fill:var(--iris)}16%{transform:scaleX(1);fill:var(--iris)}20%,100%{transform:scaleX(1);fill:rgba(169,164,248,.45)}}
@keyframes il-frena-b2{0%,6%{transform:scaleX(0);fill:var(--iris)}28%{transform:scaleX(1);fill:var(--iris)}32%,100%{transform:scaleX(1);fill:rgba(169,164,248,.45)}}
@keyframes il-frena-b3{0%,8%{transform:scaleX(0);fill:var(--iris)}40%{transform:scaleX(1);fill:var(--iris)}44%,100%{transform:scaleX(1);fill:rgba(169,164,248,.45)}}
.dcard .il-frena-pz1{animation:il-frena-pz1 var(--d) var(--ease) infinite}
.dcard .il-frena-pz2{animation:il-frena-pz2 var(--d) var(--ease) infinite}
.dcard .il-frena-pz3{animation:il-frena-pz3 var(--d) var(--ease) infinite}
@keyframes il-frena-pz1{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.2)}22%,56%{opacity:1;transform:none}58.5%{transform:scale(1.25)}61%,100%{opacity:1;transform:none}}
@keyframes il-frena-pz2{0%,28%{opacity:0;transform:scale(.3)}31%{opacity:1;transform:scale(1.2)}34%,56%{opacity:1;transform:none}58.5%{transform:scale(1.25)}61%,100%{opacity:1;transform:none}}
@keyframes il-frena-pz3{0%,40%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.2)}46%,56%{opacity:1;transform:none}58.5%{transform:scale(1.25)}61%,100%{opacity:1;transform:none}}
.dcard .il-frena-p1{animation:il-frena-p1 var(--d) ease-in-out infinite}
.dcard .il-frena-p2{animation:il-frena-p2 var(--d) ease-in-out infinite}
.dcard .il-frena-p3{animation:il-frena-p3 var(--d) ease-in-out infinite}
@keyframes il-frena-p1{0%,17%{opacity:0;transform:none}18%{opacity:1;transform:none}25%{opacity:1;transform:translate(63px,32px)}26%,57%{opacity:0;transform:translate(63px,32px)}57.1%{opacity:0;transform:none}58%{opacity:1;transform:none}65%{opacity:1;transform:translate(63px,32px)}66%,100%{opacity:0;transform:translate(63px,32px)}}
@keyframes il-frena-p2{0%,29%{opacity:0;transform:none}30%{opacity:1;transform:none}36%{opacity:1;transform:translateX(63px)}37%,57%{opacity:0;transform:translateX(63px)}57.1%{opacity:0;transform:none}58%{opacity:1;transform:none}65%{opacity:1;transform:translateX(63px)}66%,100%{opacity:0;transform:translateX(63px)}}
@keyframes il-frena-p3{0%,41%{opacity:0;transform:none}42%{opacity:1;transform:none}48%{opacity:1;transform:translate(63px,-32px)}49%,57%{opacity:0;transform:translate(63px,-32px)}57.1%{opacity:0;transform:none}58%{opacity:1;transform:none}65%{opacity:1;transform:translate(63px,-32px)}66%,100%{opacity:0;transform:translate(63px,-32px)}}
.dcard .il-frena-n1{animation:il-frena-n1 var(--d) var(--ease) infinite}
.dcard .il-frena-n2{animation:il-frena-n2 var(--d) var(--ease) infinite}
.dcard .il-frena-n3{animation:il-frena-n3 var(--d) var(--ease) infinite}
@keyframes il-frena-n1{0%,25%{opacity:0;transform:translateX(-6px)}28%,100%{opacity:1;transform:none}}
@keyframes il-frena-n2{0%,36%{opacity:0;transform:translateX(-6px)}39%,100%{opacity:1;transform:none}}
@keyframes il-frena-n3{0%,48%{opacity:0;transform:translateX(-6px)}51%,100%{opacity:1;transform:none}}
.dcard .il-frena-badge{animation:il-frena-badge var(--d) var(--ease) infinite}
@keyframes il-frena-badge{
  0%,25%{opacity:0;transform:scale(.3)}
  27%{opacity:1;transform:scale(1.2)}
  29%,36%{transform:none}37.5%{transform:scale(1.18)}
  39%,48%{transform:none}49.5%{transform:scale(1.18)}
  51%,65%{transform:none}67%{transform:scale(1.3)}
  70%,100%{opacity:1;transform:none}
}
.dcard .il-frena-k1{animation:il-frena-k1 var(--d) linear infinite}
.dcard .il-frena-k2{animation:il-frena-k2 var(--d) linear infinite}
.dcard .il-frena-k3{animation:il-frena-k3 var(--d) linear infinite}
.dcard .il-frena-k4{animation:il-frena-k4 var(--d) linear infinite}
@keyframes il-frena-k1{0%,25%{opacity:0}26%,36%{opacity:1}37%,100%{opacity:0}}
@keyframes il-frena-k2{0%,36%{opacity:0}37%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes il-frena-k3{0%,48%{opacity:0}49%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes il-frena-k4{0%,65%{opacity:0}66%,100%{opacity:1}}
.dcard .il-frena-tel{animation:il-frena-vibra var(--d) linear infinite}
@keyframes il-frena-vibra{
  0%,25%,29%,36%,40%,48%,52%,65%,71%,100%{transform:none}
  26%,37%,49%{transform:rotate(-4deg)}27%,38%,50%{transform:rotate(4deg)}28%,39%,51%{transform:rotate(-2deg)}
  66%,68%{transform:rotate(-5deg)}67%,69%{transform:rotate(5deg)}70%{transform:rotate(-2deg)}
}
.dcard .il-frena-ondas{animation:il-frena-ondas var(--d) linear infinite}
@keyframes il-frena-ondas{
  0%,25%,31%,36%,42%,48%,54%,65%{opacity:0}
  26%,29%,37%,40%,49%,52%{opacity:.8}
  66%,82%{opacity:.9}74%,90%{opacity:.35}100%{opacity:.9}
}

/* la matriz de priorización tiene su propia sección, centrada */
.prioridad .matriz { max-width: 720px; margin: 0 auto; }

/* ---------- la matriz se ordena sola (js/matriz-orden.js) ---------- */
.mx-carga { margin-bottom: 1rem; }
.mx-carga__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.mx-carga__n { color: var(--mint); font-variant-numeric: tabular-nums; }
.mx-carga__pista { height: 8px; border-radius: 99px; background: rgba(169, 164, 248, .15); overflow: hidden; }
.mx-carga__barra { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--iris), var(--mint)); transition: width .7s cubic-bezier(.16, 1, .3, 1); }
.mx-lienzo { position: relative; }
.matriz--ordena .mx-p { transition: none; transition-delay: 0s; opacity: 1; }
.matriz--ordena .mx-p circle { transition: fill .4s, stroke-width .4s; stroke: var(--mint); stroke-opacity: .25; stroke-width: 0; }
.matriz--ordena .mx-p:not(.mx-ok) circle { fill: rgba(169, 164, 248, .45); }
.matriz--ordena .mx-p:not(.mx-ok) text { fill: var(--muted); }
.matriz--ordena .mx-p.mx-activo circle { fill: var(--mint); stroke-width: 10px; }
.matriz--ordena .mx-p.mx-activo text { fill: var(--text); }
.matriz--ordena .mx-cuad, .matriz--ordena .mx-cuad-t { opacity: .2; transition: opacity .9s; }
.matriz--ordena.matriz--lista .mx-cuad, .matriz--ordena.matriz--lista .mx-cuad-t { opacity: 1; }
.matriz--ordena.matriz--lista .mx-cuad { animation: mx-brilla 1.6s ease-out 1; }
@keyframes mx-brilla { 0% { fill: rgba(62, 230, 168, .32); } 100% { fill: rgba(62, 230, 168, .1); } }
.mx-nota {
  position: absolute; left: 0; top: 0; z-index: 2; width: min(250px, 46%);
  padding: .8rem .95rem; border-radius: 14px; background: var(--surface-2); border: 1px solid rgba(62, 230, 168, .45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45); font-size: .84rem; line-height: 1.45; color: var(--muted);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.mx-nota.is-on { opacity: 1; transform: none; }
.mx-nota.is-medida { transition: none; }
.mx-nota::after { content: ''; position: absolute; top: var(--flecha, 50%); width: 12px; height: 12px; margin-top: -6px; background: var(--surface-2); border-left: 1px solid rgba(62, 230, 168, .45); border-bottom: 1px solid rgba(62, 230, 168, .45); }
.mx-nota--der::after { left: -7px; transform: rotate(45deg); }
.mx-nota--izq::after { right: -7px; transform: rotate(225deg); }
.mx-nota b { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: .92rem; color: var(--text); }
.mx-nota__tag { display: inline-block; margin-top: .5rem; padding: .15rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--mint); background: rgba(62, 230, 168, .1); border: 1px solid rgba(62, 230, 168, .3); }
.mx-repetir { display: block; margin: .9rem auto 0; padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: color .2s, border-color .2s; }
.mx-repetir:hover { color: var(--mint); border-color: var(--mint); }
.mx-repetir[hidden] { display: none; }
@media (max-width: 560px) { .mx-nota { width: 52%; padding: .6rem .7rem; font-size: .74rem; } .mx-carga__top { font-size: .78rem; } }

/* ============================================================
   FLUJOS · rediseño compacto (oct 2026)
   Cada flujo es una fila corta: el disparador va en una pastilla
   con un rayo ("cuando pasa esto…"), la flecha lleva un pulso que
   viaja y el resultado queda en blanco. Las herramientas pasan a ser
   logos redondos superpuestos (el nombre sigue para lectores de
   pantalla y aparece al pasar el mouse).
   ============================================================ */
.flujos { gap: .6rem; }
.flujo {
  position: relative; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.35fr) auto;
  gap: .9rem; padding: .7rem .9rem .7rem .7rem; border-radius: 18px;
}
.flujo::before {          /* filete de marca a la izquierda */
  content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--iris), var(--mint)); opacity: .55; transition: opacity .3s, top .3s, bottom .3s;
}
.flujo:hover::before { opacity: 1; top: 0; bottom: 0; }
.flujo:hover { border-color: rgba(62, 230, 168, .4); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.flujo__k { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
/* disparador: pastilla con rayo */
.flujo__cuando {
  grid-template-columns: 30px minmax(0, 1fr); column-gap: .65rem; align-items: center;
  padding: .55rem .75rem .55rem .55rem; border-radius: 13px;
  background: rgba(62, 230, 168, .07); border: 1px solid rgba(62, 230, 168, .28);
}
.flujo__cuando::before {
  content: ''; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px;
  background: var(--mint) center / 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060512'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 4px rgba(62, 230, 168, .12);
}
.flujo__cuando .flujo__k { color: var(--mint); }
.flujo__cuando .flujo__v { font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.3; }
.flujo__pasa .flujo__v { font-size: .98rem; line-height: 1.4; }
/* flecha más larga con un pulso que la recorre */
.flujo__flecha { width: 64px; height: 14px; overflow: visible; }
.flujo__flecha .fl-pulso { fill: var(--mint); opacity: 0; }
.caminos__panel.is-on .flujo__flecha .fl-pulso { animation: fl-pulso 2.6s cubic-bezier(.45, 0, .3, 1) infinite; animation-delay: calc(.9s + var(--i, 0) * .35s); }
@keyframes fl-pulso { 0% { transform: translateX(2px); opacity: 0; } 12% { opacity: 1; } 45% { transform: translateX(52px); opacity: 1; } 55%, 100% { transform: translateX(52px); opacity: 0; } }
/* herramientas: logos redondos superpuestos */
.flujo__con { flex-wrap: nowrap; gap: 0; padding-right: .2rem; }
.flujo__con .tag {
  position: relative; width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0;
  border-radius: 50%; font-size: 0; color: transparent; background: var(--surface-2); border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--line-strong); transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.flujo__con .tag + .tag { margin-left: -9px; }
.flujo__con .tag svg { width: 16px; height: 16px; }
.flujo__con .tag:hover { transform: translateY(-3px); z-index: 1; }
.flujo__con .tag::after {   /* nombre de la herramienta al pasar el mouse */
  content: attr(data-nombre); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: .25rem .55rem; border-radius: 8px; background: var(--text); color: var(--ink); font-size: .72rem; font-weight: 600;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.flujo__con .tag:hover::after { opacity: 1; transform: translateX(-50%); }
@media (max-width: 899px) {
  .flujo { grid-template-columns: 1fr; gap: .6rem; padding: .8rem; }
  .flujo__flecha { transform: rotate(90deg); margin: .1rem 0 .1rem .6rem; width: 30px; }
  .caminos__panel.is-on .flujo__flecha .fl-pulso { animation: none; }
  .flujo__pasa { padding-left: .55rem; }
  .flujo__con { justify-content: flex-start; padding-left: .55rem; }
}
@media (prefers-reduced-motion: reduce) { .flujo__flecha .fl-pulso { animation: none !important; } }

/* hero como el de diseño web: título a 3rem en 2 líneas, bajada a 16px, indicador de scroll */
.hero--ia { position: relative; }
.hero--ia .hero__title { font-size: min(3rem, calc((100vw - 40px) / var(--h1-k, 13.5))); }
.hero--ia .hero__subtitle { font-size: 16px; max-width: 52ch; }