/* =====================================================================
   assets/agent-run.css · el hero de agents.html, vivo

   Sustituye images/agents/hero.svg por la misma pantalla en HTML real: el
   espacio de trabajo de eldarion resolviendo una consulta. Rail oscuro a la
   izquierda y, en el centro, lo que se le pide y las fases de la respuesta
   encendiendose —varias a la vez— con la burbuja de lo que hace cada una.

   El lienzo mide 1536x768 (2:1, lo que ocupa el hero en escritorio) y se
   escala con unidades de contenedor: --u es un "pixel de lienzo", asi que
   toda medida se escribe calc(var(--u) * N). Sin JS el bloque se ve igual,
   solo que quieto en su estado final: el marcado ya esta acabado.
   ===================================================================== */

.arun-frame { container-type: inline-size; background: #fff; }

.arun {
  --u: calc(100vw / 1536 * .84);          /* respaldo: el hero ocupa ~84% del viewport */
  --ink:#1B1B20; --sub:#6B7069; --dim:#A6ABB3; --faint:#C9CCD1;
  --line:#E6E5E1; --panel:#F7F7F5; --warm:#F2F1EE; --navy:#0F1A2E;
  --lilac:#9388D9; --up:#2E7D53;
  --rail:#1F2636; --rail-on:#2F384A; --rail-ic:#C3C9D4;
  position:relative; width:100%; height:calc(var(--u) * 768);
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:var(--ink); background:#fff; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
@supports (width:1cqw) { .arun { --u: calc(100cqw / 1536); } }
.arun *, .arun *::before, .arun *::after { box-sizing:border-box; }
.arun :where(p, h3, h4, ol, ul, li, dl, dt, dd) { margin:0; padding:0; list-style:none; }
.arun svg { display:block; }
/* trazo comun de los iconos: heredan el color de su caja */
.arun .st { fill:none; stroke:currentColor; stroke-width:1.7;
            stroke-linecap:round; stroke-linejoin:round; }

/* ---------- rail de iconos ----------
   El unico plano oscuro de la pantalla: la marca dentro de su circulo arriba,
   la seccion abierta sobre una placa mas clara y los ajustes al fondo, tras
   una linea que los separa de la navegacion. */
.arun-rail {
  position:absolute; inset:0 auto 0 0; width:calc(var(--u) * 62);
  background:var(--rail);
  display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--u) * 16) 0 calc(var(--u) * 22); gap:calc(var(--u) * 15);
}
.arun-mark {
  width:calc(var(--u) * 30); height:calc(var(--u) * 30); border-radius:50%;
  box-shadow:inset 0 0 0 calc(var(--u) * 1.6) rgba(255,255,255,.5);
  margin-bottom:calc(var(--u) * 23); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.arun-mark svg { width:calc(var(--u) * 17); height:calc(var(--u) * 17); }
.arun-rb {
  width:calc(var(--u) * 38); height:calc(var(--u) * 38); border-radius:calc(var(--u) * 12);
  display:flex; align-items:center; justify-content:center; color:var(--rail-ic); flex:none;
}
.arun-rb svg { width:calc(var(--u) * 21); height:calc(var(--u) * 21); }
.arun-rb.is-on { background:var(--rail-on); color:#fff; }
.arun-rail-sp { flex:1; }                                   /* empuja los ajustes al fondo */
.arun-rail-cut {
  width:100%; height:calc(var(--u) * 2); flex:none;
  background:rgba(255,255,255,.14); margin-bottom:calc(var(--u) * -2);
}

/* ---------- barra superior ---------- */
.arun-top {
  position:absolute; left:calc(var(--u) * 62); right:0; top:0;
  height:calc(var(--u) * 58); border-bottom:calc(var(--u) * 2) solid var(--line);
  display:flex; align-items:center; padding:0 calc(var(--u) * 26) 0 calc(var(--u) * 30);
}
.arun-menu { color:var(--ink); }
.arun-menu svg { width:calc(var(--u) * 20); height:calc(var(--u) * 20); }
.arun-sp { flex:1; }
.arun-top-r { display:flex; align-items:center; gap:calc(var(--u) * 18); }
.arun-lang { display:flex; align-items:center; gap:calc(var(--u) * 4); color:var(--sub); }
.arun-lang svg:first-child { width:calc(var(--u) * 18); height:calc(var(--u) * 18); }
.arun-lang svg:last-child  { width:calc(var(--u) * 13); height:calc(var(--u) * 13); }
.arun-stat {
  display:flex; align-items:center; gap:calc(var(--u) * 7); line-height:1;
  font-size:calc(var(--u) * 15); font-weight:500; letter-spacing:-.005em; color:var(--sub);
}
.arun-stat i { width:calc(var(--u) * 8); height:calc(var(--u) * 8); border-radius:50%; background:var(--up); }
.arun-clear {
  height:calc(var(--u) * 32); padding:0 calc(var(--u) * 18); border-radius:calc(var(--u) * 16);
  background:var(--warm); display:flex; align-items:center; line-height:1;
  font-size:calc(var(--u) * 15); font-weight:600; letter-spacing:-.005em; color:var(--ink);
}

/* ---------- la columna de la conversacion ---------- */
.arun-thread {
  position:absolute; left:calc(var(--u) * 62); right:0;
  top:calc(var(--u) * 58); bottom:calc(var(--u) * 175);
  padding-top:calc(var(--u) * 24); overflow:hidden;
}
.arun-col { width:calc(var(--u) * 820); max-width:calc(100% - var(--u) * 60); margin:0 auto; }

.arun-ask {
  max-width:calc(var(--u) * 700); margin-left:auto;        /* la pregunta no ocupa toda la columna */
  background:var(--warm); border-radius:calc(var(--u) * 14);
  padding:calc(var(--u) * 15) calc(var(--u) * 22);
  font-size:calc(var(--u) * 18); font-weight:500; line-height:1.5; letter-spacing:-.005em;
}

/* El renglon que dice en que anda ahora mismo, sobre la lista de fases. */
.arun-status {
  height:calc(var(--u) * 30); margin-top:calc(var(--u) * 28); line-height:1;
  font-size:calc(var(--u) * 17); font-weight:500; letter-spacing:-.005em; color:var(--dim);
  opacity:0; transition:opacity .3s ease;
}
.arun-status[data-shown] { opacity:1; }

/* ---------- las fases de la consulta ---------- */
.arun-trace li {
  position:relative; padding-left:calc(var(--u) * 42); min-height:calc(var(--u) * 30);
}
.arun-trace li + li { margin-top:calc(var(--u) * 13); }
/* el carril que enhebra una fase con la siguiente, hueco incluido */
.arun-ph:not(:last-child)::before {
  content:''; position:absolute; left:calc(var(--u) * 14); top:calc(var(--u) * 32);
  bottom:calc(var(--u) * -15); width:calc(var(--u) * 2); background:var(--line);
}
.arun-ph-t {
  display:block; line-height:calc(var(--u) * 30);
  font-size:calc(var(--u) * 19); font-weight:500; letter-spacing:-.01em; color:var(--ink);
  transition:color .3s ease;
}
.arun-ph[data-state="wait"] .arun-ph-t { color:var(--dim); }

.arun-ic {
  position:absolute; left:0; top:calc(var(--u) * 2);
  width:calc(var(--u) * 26); height:calc(var(--u) * 26); border-radius:calc(var(--u) * 8);
  background:#fff; box-shadow:inset 0 0 0 calc(var(--u) * 2) var(--line);
  transition:box-shadow .3s ease;
}
.arun-ic svg { position:absolute; inset:calc(var(--u) * 5); width:calc(var(--u) * 16); height:calc(var(--u) * 16); }
.arun-ic .tick { fill:none; stroke:var(--sub); stroke-width:2.4; stroke-linecap:round;
                 stroke-linejoin:round; opacity:0; }
.arun-ic .spin { fill:none; stroke:var(--lilac); stroke-width:2.6; stroke-linecap:round;
                 stroke-dasharray:22 30; transform-origin:12px 12px; opacity:0; }
.arun-ic .dot  { position:absolute; left:50%; top:50%; width:calc(var(--u) * 8); height:calc(var(--u) * 8);
                 margin:calc(var(--u) * -4) 0 0 calc(var(--u) * -4);
                 border-radius:50%; background:var(--faint); opacity:0; }
.arun-ph[data-state="done"] .tick { opacity:1; }
.arun-ph[data-state="run"]  .spin { opacity:1; animation:arun-spin 1.4s linear infinite; }
.arun-ph[data-state="run"]  .arun-ic { box-shadow:inset 0 0 0 calc(var(--u) * 2) #DCD6F4; }
.arun-ph[data-state="wait"] .dot  { opacity:1; }
@keyframes arun-spin { to { transform:rotate(360deg); } }

/* la burbuja de lo que esta haciendo: cerrada no ocupa nada */
.arun-chip {
  display:flex; align-items:center; overflow:hidden; width:max-content; max-width:100%;
  height:calc(var(--u) * 30); margin-top:calc(var(--u) * 10);
  padding:0 calc(var(--u) * 14); border-radius:calc(var(--u) * 8);
  background:#EFEFE9; color:var(--sub); white-space:nowrap;
  font-size:calc(var(--u) * 16); font-weight:500; line-height:1.2; letter-spacing:-.005em;
  transition:height .35s cubic-bezier(.3,0,.2,1), margin-top .35s cubic-bezier(.3,0,.2,1),
             opacity .28s ease;
}
.arun-ph:not([data-chip]) .arun-chip { height:0; margin-top:0; opacity:0; }
.arun-chip-t::after {                       /* el cursor de lo que se escribe */
  content:''; display:inline-block; width:calc(var(--u) * 2); height:calc(var(--u) * 17);
  margin-left:calc(var(--u) * 4); vertical-align:calc(var(--u) * -3);
  background:var(--lilac); opacity:0;
}
.arun-ph[data-typing] .arun-chip-t::after { opacity:1; animation:arun-caret .9s steps(1) infinite; }
@keyframes arun-caret { 50% { opacity:0; } }

/* ---------- la respuesta ----------
   Cuando la ultima fase escribe, la sintesis se teclea aqui debajo: es el
   pago de todo lo anterior. Cerrada no ocupa nada; sin JS se lee entera. */
.arun-answer {
  display:grid; grid-template-rows:0fr; margin-top:0; opacity:0;
  transition:grid-template-rows .4s cubic-bezier(.3,0,.2,1),
             margin-top .4s cubic-bezier(.3,0,.2,1), opacity .3s ease;
}
.arun-answer > span {
  display:block; overflow:hidden; min-height:0;
  font-size:calc(var(--u) * 18); font-weight:500; line-height:1.5; letter-spacing:-.005em;
}
.arun-answer[data-shown] { grid-template-rows:1fr; margin-top:calc(var(--u) * 24); opacity:1; }
.arun-answer[data-typing] > span::after {
  content:''; display:inline-block; width:calc(var(--u) * 2); height:calc(var(--u) * 18);
  margin-left:calc(var(--u) * 4); vertical-align:calc(var(--u) * -3);
  background:var(--lilac); animation:arun-caret .9s steps(1) infinite;
}

/* ---------- el cajon de escribir ---------- */
.arun-composer {
  position:absolute; left:calc(var(--u) * 62); right:0; bottom:calc(var(--u) * 51);
  display:flex; justify-content:center;
}
.arun-box {
  position:relative; width:calc(var(--u) * 820); max-width:calc(100% - var(--u) * 60);
  height:calc(var(--u) * 104); border-radius:calc(var(--u) * 16);
  background:#fff; border:calc(var(--u) * 2) solid var(--line);
  box-shadow:0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(26,23,20,.05);
}
.arun-hint {
  position:absolute; left:calc(var(--u) * 22); top:calc(var(--u) * 26); line-height:1;
  font-size:calc(var(--u) * 18); font-weight:500; letter-spacing:-.005em; color:var(--dim);
}
.arun-tools {
  position:absolute; left:calc(var(--u) * 20); right:calc(var(--u) * 16);
  bottom:calc(var(--u) * 14); height:calc(var(--u) * 32);
  display:flex; align-items:center; gap:calc(var(--u) * 22);
}
.arun-tool {
  display:flex; align-items:center; gap:calc(var(--u) * 8); line-height:1; color:var(--sub);
  font-size:calc(var(--u) * 16); font-weight:500; letter-spacing:-.005em;
}
.arun-tool svg { width:calc(var(--u) * 17); height:calc(var(--u) * 17); }
.arun-tool.is-off { color:var(--faint); }
.arun-stop {
  margin-left:auto; height:calc(var(--u) * 32); padding:0 calc(var(--u) * 16);
  border-radius:calc(var(--u) * 9); background:#FDF3F2;
  box-shadow:inset 0 0 0 calc(var(--u) * 2) #F2DAD6; color:#B4483C;
  display:flex; align-items:center; gap:calc(var(--u) * 8); line-height:1;
  font-size:calc(var(--u) * 16); font-weight:600; letter-spacing:-.005em;
}
.arun-stop svg { width:calc(var(--u) * 14); height:calc(var(--u) * 14); }
/* Volver al principio del bucle es un corte, no una animacion. */
.arun[data-still] *, .arun[data-still] *::before, .arun[data-still] *::after { transition:none !important; }

@media (prefers-reduced-motion: reduce) {
  .arun-ic .spin { animation:none; }
  .arun-ic, .arun-ph-t, .arun-chip, .arun-status, .arun-answer { transition:none; }
  .arun-chip-t::after { display:none; }
}



/* =====================================================================
   LA TRAZA, VIVA  ·  .atrace

   Sustituye images/agents/trace.svg por lo que la captura solo insinuaba:
   las fases de una consulta se van encendiendo —varias a la vez, que de eso
   va el paralelo— y la que habla escribe debajo, en su burbuja, lo que esta
   haciendo de verdad: la busqueda que lanza, las series que baja, los
   valores que identifica.

   Mismo truco de escala que el hero: el lienzo mide 1200x675 como el SVG y
   --u es uno de sus puntos. Sin JS el bloque se ve entero y quieto, con
   todas las fases hechas: el marcado ya esta en su estado final.
   ===================================================================== */

.atrace-frame {
  container-type: inline-size; width:100%;
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65);
}

.atrace {
  --u: calc(100cqw / 1200);
  --ink:#1B1B20; --sub:#6B7069; --dim:#A6ABB3; --faint:#C9CCD1; --line:#E6E5E1;
  --steel:#96A2B6; --lilac:#9388D9; --chip:#EFEFE9;
  height:calc(var(--u) * 675);
  padding:calc(var(--u) * 44) calc(var(--u) * 56) calc(var(--u) * 36);
  display:flex; flex-direction:column;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:var(--ink); background:#fff; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.atrace, .atrace *, .atrace *::before, .atrace *::after { box-sizing:border-box; }
.atrace p, .atrace ol, .atrace li { margin:0; padding:0; list-style:none; }

/* ---------- la lista de fases ---------- */
.atrace-list { flex:1 1 auto; display:flex; flex-direction:column; gap:calc(var(--u) * 16); }
.atrace li.atrace-s { position:relative; padding-left:calc(var(--u) * 76); }
/* el carril que enhebra una fase con la siguiente, gap incluido */
.atrace-s:not(:last-child)::before {
  content:''; position:absolute; left:calc(var(--u) * 23); top:calc(var(--u) * 56);
  bottom:calc(var(--u) * -14); width:calc(var(--u) * 2); background:var(--line);
}

.atrace-ic {
  position:absolute; left:0; top:0;
  width:calc(var(--u) * 48); height:calc(var(--u) * 48);
  border:calc(var(--u) * 2) solid var(--line); border-radius:calc(var(--u) * 13);
  background:#fff; color:var(--steel);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s ease, color .3s ease;
}
.atrace-ic svg {
  position:absolute; width:calc(var(--u) * 26); height:calc(var(--u) * 26);
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; opacity:0;
}
.atrace-ic .spin { stroke:var(--lilac); stroke-dasharray:22 30; }
.atrace-ic .dot {
  position:absolute; width:calc(var(--u) * 9); height:calc(var(--u) * 9);
  border-radius:50%; background:var(--faint); opacity:0;
}

.atrace-st {
  display:block; font-size:calc(var(--u) * 28); font-weight:600; letter-spacing:-.015em;
  line-height:calc(var(--u) * 48); color:var(--ink); transition:color .3s ease;
}

/* la burbuja: cerrada no ocupa nada, y se abre deslizando bajo su fase */
.atrace p.atrace-chip {
  display:flex; align-items:center; overflow:hidden;
  width:max-content; max-width:100%;              /* la burbuja ajusta a lo que dice */
  height:calc(var(--u) * 54); margin-top:calc(var(--u) * 12);
  padding:0 calc(var(--u) * 22); border-radius:calc(var(--u) * 12);
  background:var(--chip); color:var(--sub);
  font-size:calc(var(--u) * 22); font-weight:500; line-height:1.2;
  white-space:nowrap; opacity:1;
  transition:height .35s cubic-bezier(.3,0,.2,1), margin-top .35s cubic-bezier(.3,0,.2,1),
             opacity .28s ease;
}
.atrace-chip-t::after {                       /* el cursor de lo que se escribe */
  content:''; display:inline-block; width:calc(var(--u) * 2); height:calc(var(--u) * 20);
  margin-left:calc(var(--u) * 4); vertical-align:calc(var(--u) * -4);
  background:var(--lilac); opacity:0;
}

/* ---------- la tira de origenes ----------
   Las tres procedencias que sostienen el parrafo; la que se esta mirando se
   enciende a la vez que su ficha. */
.acite p.acite-cap {
  margin-top:calc(var(--u) * 26);
  font-size:calc(var(--u) * 15); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.acite ol.acite-srcs { margin-top:calc(var(--u) * 14); display:flex; flex-direction:column; gap:calc(var(--u) * 10); }
.acite-row {
  display:flex; align-items:center; gap:calc(var(--u) * 16);
  padding:calc(var(--u) * 10) calc(var(--u) * 18);
  border:calc(var(--u) * 2) solid var(--line); border-radius:calc(var(--u) * 13);
  background:#fff;
  transition:background-color .25s ease, border-color .25s ease;
}
.acite-row[data-lit] { background:var(--soft); border-color:#DCD6F4; }
.acite-row-b { flex:1 1 auto; min-width:0; }
.acite-row-t {
  display:block; font-size:calc(var(--u) * 20); font-weight:600;
  letter-spacing:-.012em; color:var(--ink);
}
.acite-row-m {
  display:block; margin-top:calc(var(--u) * 2);
  font-size:calc(var(--u) * 16); font-weight:500; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- pie ---------- */
.atrace-foot {
  margin-top:auto; padding-top:calc(var(--u) * 28);
  border-top:calc(var(--u) * 2) solid var(--line);
  font-size:calc(var(--u) * 22); font-weight:500; color:var(--dim);
  font-variant-numeric:tabular-nums;
}

/* ---------- estados ----------
   Sin [data-js] manda el marcado: todo hecho, ningun globo abierto. */
.atrace-s[data-state="done"] .atrace-ic .tick { opacity:1; }
.atrace-s[data-state="run"]  .atrace-ic .spin { opacity:1; animation:arun-spin 1.4s linear infinite; }
.atrace-s[data-state="run"]  .atrace-ic { border-color:#DCD6F4; }
.atrace-s[data-state="wait"] .atrace-ic .dot { opacity:1; }
.atrace-s[data-state="wait"] .atrace-st { color:var(--dim); }

.atrace-s:not([data-chip]) .atrace-chip { height:0; margin-top:0; opacity:0; }
.atrace-s[data-typing] .atrace-chip-t::after { opacity:1; animation:arun-caret .9s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .atrace-ic .spin { animation:none; }
  .atrace-ic, .atrace-st, .atrace-chip { transition:none; }
  .atrace-chip-t::after { display:none; }
}



/* =====================================================================
   LA EVIDENCIA, VIVA  ·  .acite

   Sustituye images/agents/licensed.svg por lo que la captura solo contaba:
   un parrafo de la respuesta con sus cifras citadas, y la ficha de origen
   abriendose sobre la cita —proveedor, licencia y fecha— igual que en la
   app. Tres origenes, uno por cifra: dato de mercado bajo licencia, numero
   calculado por codigo y fuente publica fechada.

   El puntero recorre las citas solo mientras el bloque se ve (agent-run.js),
   pero el raton del visitante manda: al entrar se para y las fichas se abren
   con :hover de verdad. Mismo truco de escala que .atrace: el lienzo mide
   1200x675 y --u es uno de sus puntos. Sin JS el bloque se lee entero y
   quieto, con las fichas cerradas.
   ===================================================================== */

.acite-frame {
  container-type: inline-size; width:100%;
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65);
}

.acite {
  --u: calc(100cqw / 1200);
  --ink:#1B1B20; --sub:#6B7069; --dim:#A6ABB3; --faint:#C9CCD1; --line:#E6E5E1;
  --panel:#F7F7F5; --warm:#F2F1EE; --steel:#96A2B6;
  --lilac:#9388D9; --plum:#5B54A0; --soft:#F1EFFB; --up:#2E7D53;
  position:relative;
  height:calc(var(--u) * 675);
  padding:calc(var(--u) * 40) calc(var(--u) * 56) calc(var(--u) * 30);
  display:flex; flex-direction:column;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:var(--ink); background:#fff; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.acite, .acite *, .acite *::before, .acite *::after { box-sizing:border-box; }
.acite p, .acite ol, .acite li { margin:0; padding:0; list-style:none; }
.acite svg { display:block; fill:none; stroke:currentColor; stroke-width:1.8;
             stroke-linecap:round; stroke-linejoin:round; }

/* ---------- cabecera ---------- */
.acite-head { display:flex; align-items:baseline; justify-content:space-between; gap:calc(var(--u) * 24); }
.acite-eyebrow {
  font-size:calc(var(--u) * 17); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.acite-tab { font-size:calc(var(--u) * 20); font-weight:500; color:var(--sub); }

/* ---------- el parrafo citado ---------- */
.acite p.acite-body {
  margin-top:calc(var(--u) * 28);
  font-size:calc(var(--u) * 33); font-weight:500; line-height:1.62;
  letter-spacing:-.014em; color:var(--ink);
}

/* la cifra citada: subrayado punteado siempre, realce al abrirse su ficha */
.acite-c {
  border-radius:calc(var(--u) * 6);
  transition:background-color .25s ease, box-shadow .25s ease;
}
/* el subrayado va en el texto, no en la cita entera: asi no cruza el numero */
.acite-k {
  text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:#D5D1EE; text-decoration-thickness:calc(var(--u) * 2);
  text-underline-offset:calc(var(--u) * 6);
  transition:text-decoration-color .25s ease;
}
.acite-c:hover,
.acite-c[data-open] {
  background:var(--soft);
  box-shadow:0 0 0 calc(var(--u) * 5) var(--soft);
}
.acite-c:hover .acite-k,
.acite-c[data-open] .acite-k { text-decoration-color:transparent; }

/* el numerito: es el ancla de la ficha, asi que nunca parte de linea */
.acite-n {
  position:relative; display:inline-block; margin-left:calc(var(--u) * 7);
  min-width:calc(var(--u) * 28); height:calc(var(--u) * 28); padding:0 calc(var(--u) * 8);
  border-radius:calc(var(--u) * 9); background:#EAE7F7; color:var(--plum);
  font-size:calc(var(--u) * 18); font-weight:700; line-height:calc(var(--u) * 28);
  letter-spacing:0; text-align:center; text-decoration:none; cursor:pointer;
  vertical-align:calc(var(--u) * 7);
  transition:background-color .25s ease, color .25s ease;
}
.acite-c:hover .acite-n,
.acite-c[data-open] .acite-n { background:var(--lilac); color:#fff; }

/* ---------- la ficha de origen ----------
   El sitio lo pone la ficha; el gesto de subir lo hace el interior, asi que
   centrarla y animarla no se pelean por el mismo transform. */
.acite-card {
  position:absolute; z-index:6; top:calc(100% + var(--u) * 15); left:50%;
  width:calc(var(--u) * 492); margin-left:calc(var(--u) * -246);
  opacity:0; pointer-events:none; text-align:left;
  transition:opacity .2s ease;
}
.acite-c[data-align="start"] .acite-card { left:calc(var(--u) * -20); margin-left:0; }
.acite-c[data-align="end"]   .acite-card { left:auto; right:calc(var(--u) * -20); margin-left:0; }

.acite-c:hover .acite-card,
.acite-c[data-open] .acite-card { opacity:1; pointer-events:auto; }

.acite-card-in {
  display:block; position:relative;
  background:#fff; border:calc(var(--u) * 2) solid var(--line);
  border-radius:calc(var(--u) * 16);
  box-shadow:0 calc(var(--u) * 26) calc(var(--u) * 54) rgba(22,20,16,.18);
  padding:calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 20);
  transform:translateY(calc(var(--u) * 9));
  transition:transform .28s cubic-bezier(.3,0,.2,1);
}
.acite-c:hover .acite-card-in,
.acite-c[data-open] .acite-card-in { transform:translateY(0); }

/* el piquito, bajo el numero que la abre */
.acite-card-in::before {
  content:''; position:absolute; top:calc(var(--u) * -7); left:50%;
  width:calc(var(--u) * 13); height:calc(var(--u) * 13); margin-left:calc(var(--u) * -6);
  background:#fff; border-left:calc(var(--u) * 2) solid var(--line);
  border-top:calc(var(--u) * 2) solid var(--line);
  transform:rotate(45deg); border-radius:calc(var(--u) * 2) 0 0 0;
}
.acite-c[data-align="start"] .acite-card-in::before { left:calc(var(--u) * 33); margin-left:0; }
.acite-c[data-align="end"]   .acite-card-in::before { left:auto; right:calc(var(--u) * 27); margin-left:0; }

/* fila de cabecera de la ficha: sello, procedencia y etiqueta */
.acite-src { display:flex; align-items:center; gap:calc(var(--u) * 12); }
.acite-fav {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 34); height:calc(var(--u) * 34);
  border-radius:calc(var(--u) * 10); background:var(--soft); color:var(--plum);
}
.acite-fav svg { width:calc(var(--u) * 19); height:calc(var(--u) * 19); }
.acite-dom {
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:calc(var(--u) * 19); font-weight:600; letter-spacing:-.005em; color:var(--sub);
  text-decoration:none;
}
.acite-tag {
  flex:none; padding:calc(var(--u) * 5) calc(var(--u) * 12);
  border-radius:calc(var(--u) * 8); background:#EFF3EF; color:var(--up);
  font-size:calc(var(--u) * 15); font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
.acite-tag--lilac { background:var(--soft); color:var(--plum); }
.acite-tag--plain { background:var(--warm); color:var(--sub); }

.acite-t {
  display:block; margin-top:calc(var(--u) * 14);
  font-size:calc(var(--u) * 22); font-weight:600; letter-spacing:-.012em;
  line-height:1.35; color:var(--ink);
}
.acite-m {
  display:block; margin-top:calc(var(--u) * 8);
  font-size:calc(var(--u) * 18); font-weight:500; color:var(--dim);
}
.acite-code {
  display:block; margin-top:calc(var(--u) * 14);
  padding:calc(var(--u) * 12) calc(var(--u) * 14); border-radius:calc(var(--u) * 10);
  background:#12141A; color:rgba(255,255,255,.86);
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size:calc(var(--u) * 16); line-height:1.45; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.acite-code em { font-style:normal; color:#7FD1A4; }
.acite-open {
  display:block; margin-top:calc(var(--u) * 14); padding-top:calc(var(--u) * 12);
  border-top:calc(var(--u) * 2) solid var(--line);
  font-size:calc(var(--u) * 15); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}

/* ---------- lo que no hay ----------
   Una linea, no un cartel: la cifra que falta se dice y se sigue. */
.acite p.acite-na {
  display:flex; align-items:center; gap:calc(var(--u) * 14);
  margin-top:calc(var(--u) * 28); padding:calc(var(--u) * 14) calc(var(--u) * 22);
  border-radius:calc(var(--u) * 13); background:var(--panel);
  border-left:calc(var(--u) * 6) solid var(--faint);
}
.acite-na-k {
  flex:none; padding:calc(var(--u) * 5) calc(var(--u) * 11);
  border-radius:calc(var(--u) * 8); background:#fff;
  box-shadow:inset 0 0 0 calc(var(--u) * 2) var(--line);
  font-size:calc(var(--u) * 14); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.acite-na-t {
  font-size:calc(var(--u) * 21); font-weight:500; letter-spacing:-.01em; color:var(--sub);
}

/* ---------- pie ---------- */
.acite p.acite-foot {
  margin-top:auto; padding-top:calc(var(--u) * 24);
  border-top:calc(var(--u) * 2) solid var(--line);
  font-size:calc(var(--u) * 20); font-weight:500; color:var(--dim);
}

/* ---------- el puntero ----------
   Solo lo mueve el JS, y solo mientras el bloque se ve: es el recorrido que
   haria una mano por las tres cifras. */
.acite-cursor {
  position:absolute; left:0; top:0; z-index:9;
  width:calc(var(--u) * 30); height:calc(var(--u) * 30);
  opacity:0; pointer-events:none;
  transition:transform .62s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.acite-cursor svg { width:100%; height:100%; fill:var(--ink); stroke:#fff; stroke-width:1.6; }
.acite-cursor[data-shown] { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .acite-card, .acite-card-in, .acite-c, .acite-n, .acite-cursor { transition:none; }
  .acite-cursor { display:none; }
}