/* ============================================================
   service-art.css — Sector-characteristic animated artwork
   blocks injected on each service-detail page.

   Each block is pure CSS — no JS required for the animation
   itself. The "art-stage" sits between the hero and the prose.
   ============================================================ */

.art-stage {
  position: relative;
  margin: 0;
  padding: 72px 0 56px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.art-stage .wrap { position: relative; z-index: 2; }
.art-stage .art-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  margin-top: 32px;
}
.art-stage .art-caption em { color: var(--accent); font-style: italic; font-family: var(--display); }

@media (prefers-reduced-motion: reduce) {
  .art-stage *, .art-stage *::before, .art-stage *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   1 · LEDGER — for ERP services (Sage, Dynamics, Odoo, ERP+copilot)
   A growing accounting ledger that fills row by row.
   ============================================================ */
.art-ledger {
  max-width: 900px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.art-ledger .lh {
  display: grid;
  grid-template-columns: 70px 1.6fr 1fr 110px 100px;
  background: var(--ink);
  color: var(--inv);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 22px;
  gap: 16px;
}
.art-ledger .lh span:last-child { text-align: right; }
.art-ledger .lr {
  display: grid;
  grid-template-columns: 70px 1.6fr 1fr 110px 100px;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
  opacity: 0;
  transform: translateX(-16px);
  animation: ledgerRow 700ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.art-ledger .lr:nth-child(2) { animation-delay: 0ms; }
.art-ledger .lr:nth-child(3) { animation-delay: 160ms; }
.art-ledger .lr:nth-child(4) { animation-delay: 320ms; }
.art-ledger .lr:nth-child(5) { animation-delay: 480ms; }
.art-ledger .lr:nth-child(6) { animation-delay: 640ms; }
.art-ledger .lr:nth-child(7) { animation-delay: 800ms; }
.art-ledger .lr .num { color: var(--accent); font-weight: 500; }
.art-ledger .lr .desc { font-family: var(--display); font-size: 14px; }
.art-ledger .lr .desc em { font-style: italic; color: var(--accent); }
.art-ledger .lr .amt { text-align: right; font-variant-numeric: tabular-nums; }
.art-ledger .lr .amt.pos { color: #408F73; }
.art-ledger .lr .amt.neg { color: var(--accent); }
.art-ledger .lr .badge {
  background: var(--paper-warm);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  align-self: center;
}
.art-ledger .lr.live .badge {
  background: var(--accent);
  color: #fff;
  animation: ledgerBlink 2s ease-in-out infinite;
}
.art-ledger .lf {
  padding: 16px 22px;
  background: var(--paper-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  border-top: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.art-ledger .lf .total {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
}
@keyframes ledgerRow {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ledgerBlink {
  0%, 100% { background: var(--accent); }
  50% { background: var(--accent-deep); }
}

/* ============================================================
   2 · VINEYARD — for cuaderno de campo (agricultural software)
   A row of grape clusters that fill in growth phenophases.
   ============================================================ */
.art-vineyard {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: end;
}
.art-vine {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.art-vine .phase {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: auto;
  text-align: center;
}
.art-vine .label {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg);
  text-align: center;
}
.art-vine svg { width: 64px; height: 92px; }
.art-vine svg .leaf {
  fill: #5FB394;
  opacity: 0;
  transform-origin: center 80%;
  animation: leafIn 800ms ease-out forwards;
}
.art-vine svg .berry {
  opacity: 0;
  transform-origin: center;
  animation: berryIn 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.art-vine svg .stem { stroke: #5C4630; stroke-width: 2; stroke-linecap: round; }
.art-vine:nth-child(1) svg .leaf { animation-delay: 100ms; }
.art-vine:nth-child(2) svg .leaf { animation-delay: 250ms; }
.art-vine:nth-child(2) svg .berry { animation-delay: 350ms; }
.art-vine:nth-child(3) svg .leaf { animation-delay: 400ms; }
.art-vine:nth-child(3) svg .berry { animation-delay: 500ms; }
.art-vine:nth-child(4) svg .leaf { animation-delay: 550ms; }
.art-vine:nth-child(4) svg .berry { animation-delay: 700ms; }
.art-vine:nth-child(5) svg .leaf { animation-delay: 700ms; }
.art-vine:nth-child(5) svg .berry { animation-delay: 900ms; }
.art-vine:nth-child(6) svg .leaf { animation-delay: 850ms; }
.art-vine:nth-child(6) svg .berry { animation-delay: 1050ms; }
.art-vine.harvest { background: var(--ink); color: var(--inv); border-color: transparent; }
.art-vine.harvest .phase { color: var(--inv-mute); }
.art-vine.harvest .label { color: var(--inv); }
@keyframes leafIn  { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes berryIn { to { opacity: 1; transform: scale(1); } }

/* ============================================================
   3 · CLOUD GRAPH — for cloud/desarrollo/datos
   Nodes connecting with pulsing lines.
   ============================================================ */
.art-cloud {
  max-width: 900px;
  margin: 0 auto;
  height: 320px;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.art-cloud svg { width: 100%; height: 100%; display: block; }
.art-cloud .node {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 2;
}
.art-cloud .node-label {
  font-family: var(--mono); font-size: 11px;
  fill: var(--fg);
  letter-spacing: 0.06em;
}
.art-cloud .edge {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  fill: none;
  opacity: 0.4;
  animation: edgeDash 2.4s linear infinite;
}
.art-cloud .pulse {
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 2.6s ease-out infinite;
}
.art-cloud .pulse.d1 { animation-delay: 0s; }
.art-cloud .pulse.d2 { animation-delay: 0.6s; }
.art-cloud .pulse.d3 { animation-delay: 1.2s; }
@keyframes edgeDash { to { stroke-dashoffset: -120; } }
@keyframes nodePulse {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ============================================================
   4 · SOC RADAR — for SOC + NIS2 + ENS + DORA
   Concentric rings with sweeping line.
   ============================================================ */
.art-radar {
  max-width: 540px;
  height: 360px;
  margin: 0 auto;
  position: relative;
}
.art-radar .ring {
  position: absolute;
  inset: 50%;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.18;
  animation: radarRing 3.6s ease-out infinite;
}
.art-radar .ring.r1 { animation-delay: 0s; }
.art-radar .ring.r2 { animation-delay: 0.9s; }
.art-radar .ring.r3 { animation-delay: 1.8s; }
.art-radar .ring.r4 { animation-delay: 2.7s; }
.art-radar .core {
  position: absolute;
  inset: calc(50% - 8px);
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--accent-soft, rgba(216, 152, 86, 0.18));
}
.art-radar .sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, var(--accent) 30deg, transparent 60deg);
  border-radius: 50%;
  opacity: 0.18;
  animation: radarSweep 5s linear infinite;
  -webkit-mask: radial-gradient(circle, black 60%, transparent 60%);
          mask: radial-gradient(circle, black 60%, transparent 60%);
}
.art-radar .blip {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: radarBlip 5s ease-out infinite;
  box-shadow: 0 0 14px var(--accent);
}
.art-radar .blip.b1 { top: 28%; left: 62%; animation-delay: 0.6s; }
.art-radar .blip.b2 { top: 64%; left: 30%; animation-delay: 2.1s; }
.art-radar .blip.b3 { top: 70%; left: 70%; animation-delay: 3.6s; }
@keyframes radarRing {
  0% { inset: 50%; opacity: 0.4; }
  100% { inset: 0; opacity: 0; }
}
@keyframes radarSweep {
  to { transform: rotate(360deg); }
}
@keyframes radarBlip {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* ============================================================
   5 · CODE TYPING — for desarrollo / RAG
   Mono lines that type out.
   ============================================================ */
.art-terminal {
  max-width: 760px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--inv);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  box-shadow: var(--shadow-3);
  position: relative;
}
.art-terminal::before {
  content: "● ● ●";
  position: absolute;
  top: 8px; left: 14px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.4em;
  font-size: 12px;
}
.art-terminal .tline {
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typeLine 1.6s steps(60) forwards;
  margin: 0;
}
.art-terminal .tline.l2 { animation-delay: 1.6s; }
.art-terminal .tline.l3 { animation-delay: 3.2s; }
.art-terminal .tline.l4 { animation-delay: 4.4s; }
.art-terminal .tline.l5 { animation-delay: 5.4s; }
.art-terminal .pr { color: var(--accent); }
.art-terminal .ok { color: #7BC9A9; }
.art-terminal .dim { color: var(--inv-mute); }
.art-terminal .blink {
  display: inline-block;
  background: var(--accent);
  width: 8px; height: 1em;
  vertical-align: -2px;
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes typeLine { to { width: 100%; } }
@keyframes caretBlink { 50% { opacity: 0; } }

/* ============================================================
   6 · BI CHART — for BI/datos
   Stacked bars rising into place.
   ============================================================ */
.art-chart {
  max-width: 700px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 36px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  height: 280px;
  gap: 12px;
}
.art-chart .bar {
  position: relative;
  background: linear-gradient(to top, var(--accent), var(--accent-deep));
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  animation: barRise 900ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  transform: scaleY(0);
}
.art-chart .bar.alt { background: linear-gradient(to top, var(--paper-warm), var(--accent-soft, rgba(216, 152, 86, 0.2))); }
.art-chart .bar:nth-child(1) { animation-delay: 0ms; }
.art-chart .bar:nth-child(2) { animation-delay: 80ms; }
.art-chart .bar:nth-child(3) { animation-delay: 160ms; }
.art-chart .bar:nth-child(4) { animation-delay: 240ms; }
.art-chart .bar:nth-child(5) { animation-delay: 320ms; }
.art-chart .bar:nth-child(6) { animation-delay: 400ms; }
.art-chart .bar:nth-child(7) { animation-delay: 480ms; }
.art-chart .bar:nth-child(8) { animation-delay: 560ms; }
@keyframes barRise { to { transform: scaleY(1); } }

/* ============================================================
   7 · CRM PIPELINE — for CRM
   Cards sliding through pipeline columns.
   ============================================================ */
.art-pipeline {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.art-stage-col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-stage-col .col-h {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.art-stage-col .col-h .num { color: var(--accent); font-weight: 600; }
.art-deal {
  background: var(--paper-warm);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0;
  transform: translateY(-8px);
  animation: dealIn 600ms ease-out forwards;
}
.art-deal .nm { font-family: var(--display); font-size: 13px; font-style: italic; color: var(--fg); }
.art-deal .v { color: var(--accent); margin-top: 2px; }
.art-stage-col:nth-child(1) .art-deal:nth-child(2) { animation-delay: 100ms; }
.art-stage-col:nth-child(1) .art-deal:nth-child(3) { animation-delay: 240ms; }
.art-stage-col:nth-child(2) .art-deal:nth-child(2) { animation-delay: 600ms; }
.art-stage-col:nth-child(3) .art-deal:nth-child(2) { animation-delay: 900ms; }
.art-stage-col:nth-child(4) .art-deal:nth-child(2) { animation-delay: 1200ms; }
.art-stage-col:nth-child(5) .art-deal:nth-child(2) { animation-delay: 1500ms; }
.art-stage-col.won { background: var(--ink); }
.art-stage-col.won .col-h { color: var(--inv-mute); border-color: var(--inv-line); }
.art-stage-col.won .col-h .num { color: var(--accent-on-dark, var(--accent)); }
.art-stage-col.won .art-deal { background: rgba(255,255,255,0.06); }
.art-stage-col.won .art-deal .nm { color: var(--inv); }
@keyframes dealIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   8 · CHAT BUBBLES — for Copilot
   ============================================================ */
.art-chat {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.art-bubble {
  max-width: 75%;
  padding: 14px 18px;
  border-radius: 18px;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  animation: bubbleIn 600ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.art-bubble.user {
  background: var(--paper);
  border: 1px solid var(--line);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
}
.art-bubble.bot {
  background: var(--ink);
  color: var(--inv);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}
.art-bubble.bot em { color: var(--accent-on-dark, var(--accent)); font-style: italic; }
.art-bubble:nth-child(1) { animation-delay: 0ms; }
.art-bubble:nth-child(2) { animation-delay: 700ms; }
.art-bubble:nth-child(3) { animation-delay: 1500ms; }
.art-bubble:nth-child(4) { animation-delay: 2300ms; }
.art-bubble .ix {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.5; margin-bottom: 4px;
}
@keyframes bubbleIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   9 · GAUGE GRID — for IA (eval / advisory / agentes / RAG)
   ============================================================ */
.art-gauges {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.art-gauge {
  background: var(--ink);
  color: var(--inv);
  padding: 24px 28px 26px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.art-gauge .lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-on-dark, var(--accent));
}
.art-gauge .v {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--inv);
}
.art-gauge .v .u { font-size: 0.45em; color: var(--inv-mute); margin-left: 4px; }
.art-gauge .bar-wrap {
  height: 6px;
  background: var(--inv-line);
  border-radius: 3px;
  overflow: hidden;
}
.art-gauge .bar-fill {
  height: 100%;
  background: var(--accent-on-dark, var(--accent));
  border-radius: 3px;
  transform-origin: left;
  animation: gaugeFill 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  transform: scaleX(0);
}
.art-gauge .ds { font-family: var(--mono); font-size: 11px; color: var(--inv-dim); margin-top: 4px; line-height: 1.5; }
@keyframes gaugeFill { to { transform: scaleX(1); } }

/* ============================================================
   10 · ISO STAMP — for ISO services + ENS + AI Act
   Stamp imprints with sealed feel.
   ============================================================ */
.art-stamps {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.art-stamp {
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 24px 22px 22px;
  position: relative;
  transform: rotate(-2deg) scale(0.92);
  opacity: 0;
  animation: stampIn 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  background: var(--paper);
}
.art-stamp.tilt-r { transform: rotate(3deg) scale(0.92); }
.art-stamp:nth-child(1) { animation-delay: 0ms; }
.art-stamp:nth-child(2) { animation-delay: 220ms; }
.art-stamp:nth-child(3) { animation-delay: 440ms; }
.art-stamp:nth-child(4) { animation-delay: 660ms; }
.art-stamp::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  opacity: 0.3;
}
.art-stamp .scode {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.art-stamp .sn {
  font-family: var(--display); font-weight: 500;
  font-size: 32px; letter-spacing: -0.025em;
  margin: 10px 0 0;
  color: var(--ink);
}
.art-stamp .sn .it { font-style: italic; color: var(--accent); }
.art-stamp .sd {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-dim);
  margin: 8px 0 0;
}
.art-stamp .sf {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  text-transform: uppercase;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}
@keyframes stampIn {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.4); }
  50% { opacity: 0.6; transform: rotate(-2deg) scale(0.86); }
  100% { opacity: 1; transform: rotate(-2deg) scale(0.92); }
}

/* ============================================================
   11 · AGENT MATRIX — for IA agentes / AI Act técnico
   A 4x4 matrix of nodes that light up in sequence.
   ============================================================ */
.art-agents {
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.art-agents .node {
  width: 100%;
  aspect-ratio: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  animation: nodeFlash 12s ease-in-out infinite;
}
.art-agents .node:nth-child(8n+1) { animation-delay: 0s; }
.art-agents .node:nth-child(8n+2) { animation-delay: 0.4s; }
.art-agents .node:nth-child(8n+3) { animation-delay: 0.8s; }
.art-agents .node:nth-child(8n+4) { animation-delay: 1.2s; }
.art-agents .node:nth-child(8n+5) { animation-delay: 1.6s; }
.art-agents .node:nth-child(8n+6) { animation-delay: 2.0s; }
.art-agents .node:nth-child(8n+7) { animation-delay: 2.4s; }
.art-agents .node:nth-child(8n+8) { animation-delay: 2.8s; }
@keyframes nodeFlash {
  0%, 88%, 100% { background: var(--paper); color: var(--fg-mute); border-color: var(--line); }
  3% { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.06); }
  10% { background: var(--paper); color: var(--fg-mute); border-color: var(--line); transform: scale(1); }
}

/* ============================================================
   12 · DOCUMENT TOKENS — for RAG
   Document page with tokens highlighted in sequence.
   ============================================================ */
.art-rag {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.art-doc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: var(--shadow-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--fg-dim);
}
.art-doc .doc-h {
  font-family: var(--display);
  font-size: 14px;
  font-style: italic;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.art-doc .tok {
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  opacity: 0;
  animation: tokIn 600ms ease forwards;
}
.art-doc .tok.t1 { animation-delay: 600ms; }
.art-doc .tok.t2 { animation-delay: 1200ms; }
.art-doc .tok.t3 { animation-delay: 1800ms; }
.art-doc .answer {
  background: var(--ink);
  color: var(--inv);
  border-radius: 12px;
  padding: 24px 22px;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  animation: ansIn 600ms ease forwards;
  animation-delay: 2400ms;
}
.art-doc .answer .q { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-on-dark, var(--accent)); margin-bottom: 8px; }
.art-doc .answer .cite { font-family: var(--mono); font-size: 10px; color: var(--inv-mute); margin-top: 8px; }
@keyframes tokIn { to { opacity: 1; } }
@keyframes ansIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   13 · SCAN BRACKETS — for IA Visión
   Brackets that scan an image.
   ============================================================ */
.art-scan {
  max-width: 520px;
  margin: 0 auto;
  height: 320px;
  background: var(--ink);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.art-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(255,255,255,0.04) 19px, rgba(255,255,255,0.04) 20px),
    repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(255,255,255,0.04) 19px, rgba(255,255,255,0.04) 20px);
}
.art-scan .bracket {
  position: absolute;
  width: 80px; height: 80px;
  border: 2px solid var(--accent-on-dark, var(--accent));
}
.art-scan .bracket.tl { top: 14%; left: 18%; border-right: 0; border-bottom: 0; animation: scanMove 5s ease-in-out infinite; }
.art-scan .bracket.tr { top: 14%; right: 18%; border-left: 0; border-bottom: 0; animation: scanMove 5s ease-in-out infinite; }
.art-scan .bracket.bl { bottom: 14%; left: 18%; border-right: 0; border-top: 0; animation: scanMove 5s ease-in-out infinite; }
.art-scan .bracket.br { bottom: 14%; right: 18%; border-left: 0; border-top: 0; animation: scanMove 5s ease-in-out infinite; }
.art-scan .scan-line {
  position: absolute;
  left: 10%; right: 10%; height: 2px;
  background: var(--accent-on-dark, var(--accent));
  box-shadow: 0 0 16px var(--accent-on-dark, var(--accent));
  top: 0;
  animation: scanLine 3s ease-in-out infinite;
}
.art-scan .tag-output {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-on-dark, var(--accent));
  background: rgba(0,0,0,0.4);
  padding: 6px 14px;
  border-radius: 999px;
  opacity: 0;
  animation: scanTag 5s ease-in-out infinite;
}
@keyframes scanMove {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, 6px); }
}
@keyframes scanLine {
  0% { top: 5%; opacity: 0.2; }
  50% { top: 90%; opacity: 1; }
  100% { top: 5%; opacity: 0.2; }
}
@keyframes scanTag {
  0%, 30% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   14 · ROADMAP TIMELINE — for IA Advisory / Estrategia / Direccion
   Horizontal timeline with milestones lighting up.
   ============================================================ */
.art-roadmap {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}
.art-roadmap .track {
  position: absolute;
  top: 30px;
  left: 24px; right: 24px;
  height: 2px;
  background: var(--line-strong);
  z-index: 1;
}
.art-roadmap .track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  background: var(--accent);
  width: 100%;
  transform-origin: left;
  animation: trackFill 3.6s ease-out forwards;
  transform: scaleX(0);
}
.art-roadmap .marks {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.art-roadmap .mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.art-roadmap .dot {
  width: 24px; height: 24px;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  animation: dotIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.art-roadmap .mark:nth-child(1) .dot { animation-delay: 0ms; background: var(--accent); border-color: var(--accent); }
.art-roadmap .mark:nth-child(2) .dot { animation-delay: 720ms; background: var(--accent); border-color: var(--accent); }
.art-roadmap .mark:nth-child(3) .dot { animation-delay: 1440ms; background: var(--accent); border-color: var(--accent); }
.art-roadmap .mark:nth-child(4) .dot { animation-delay: 2160ms; background: var(--accent); border-color: var(--accent); }
.art-roadmap .mark:nth-child(5) .dot { animation-delay: 2880ms; background: var(--paper); border-color: var(--accent); }
.art-roadmap .mlbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.art-roadmap .mh {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-align: center;
  line-height: 1.2;
  max-width: 14ch;
}
.art-roadmap .mh .it { font-style: italic; color: var(--accent); }
@keyframes trackFill { to { transform: scaleX(1); } }
@keyframes dotIn { to { opacity: 1; transform: scale(1); } }

/* ============================================================
   15 · CARBON FOOTPRINT — for huella / ESG
   Falling-then-rising emissions chart.
   ============================================================ */
.art-carbon {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
}
.art-carbon .ch-title {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 22px;
  display: flex; justify-content: space-between;
}
.art-carbon .ch-title .now {
  color: var(--accent);
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 18px; letter-spacing: -0.01em;
  text-transform: none;
}
.art-carbon svg { width: 100%; height: 200px; display: block; }
.art-carbon svg .grid line { stroke: var(--line); stroke-dasharray: 2 4; }
.art-carbon svg .area {
  fill: var(--accent);
  opacity: 0.18;
}
.art-carbon svg .line {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: linDraw 2.4s ease-out forwards;
}
.art-carbon svg .dot {
  fill: var(--accent);
  opacity: 0;
  animation: dotPop 400ms ease-out forwards;
}
.art-carbon svg .dot:nth-of-type(1) { animation-delay: 600ms; }
.art-carbon svg .dot:nth-of-type(2) { animation-delay: 1000ms; }
.art-carbon svg .dot:nth-of-type(3) { animation-delay: 1400ms; }
.art-carbon svg .dot:nth-of-type(4) { animation-delay: 1800ms; }
.art-carbon svg .dot:nth-of-type(5) { animation-delay: 2200ms; }
.art-carbon svg .target { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.art-carbon svg .target-text { fill: var(--fg-mute); font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; }
@keyframes linDraw { to { stroke-dashoffset: 0; } }
@keyframes dotPop { to { opacity: 1; } }

/* ============================================================
   16 · COMPLIANCE LOCK — for RGPD / compliance penal / gobierno dato
   Padlock with concentric pulse rings.
   ============================================================ */
.art-lock {
  max-width: 360px;
  height: 320px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-lock .pulse {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 80px; height: 80px;
  opacity: 0;
  animation: lockPulse 3s ease-out infinite;
}
.art-lock .pulse.p2 { animation-delay: 1s; }
.art-lock .pulse.p3 { animation-delay: 2s; }
.art-lock svg {
  width: 96px; height: 116px;
  position: relative;
  z-index: 2;
}
.art-lock svg .body {
  fill: var(--ink);
  stroke: var(--accent);
  stroke-width: 2;
}
.art-lock svg .shackle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.art-lock svg .keyhole {
  fill: var(--accent);
}
.art-lock .badge {
  position: absolute;
  bottom: 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 999px;
}
@keyframes lockPulse {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* ============================================================
   RESPONSIVE FALLBACKS
   ============================================================ */
@media (max-width: 900px) {
  .art-stage { padding: 48px 0 36px; }
  .art-ledger .lh, .art-ledger .lr { grid-template-columns: 50px 1.5fr 80px 70px; }
  .art-ledger .lr .badge, .art-ledger .lh span:nth-child(3) { display: none; }
  .art-vineyard { grid-template-columns: repeat(3, 1fr); }
  .art-vineyard .art-vine { min-height: 180px; }
  .art-gauges { grid-template-columns: 1fr; }
  .art-pipeline { grid-template-columns: 1fr 1fr; }
  .art-stage-col:nth-child(n+3) { display: none; }
  .art-stamps { grid-template-columns: 1fr 1fr; }
  .art-rag { grid-template-columns: 1fr; }
  .art-roadmap .marks { grid-template-columns: 1fr 1fr 1fr; }
  .art-roadmap .mark:nth-child(n+4) { display: none; }
  .art-agents { grid-template-columns: repeat(5, 1fr); }
}