/* =========================================================================
   visuals.css — piezas visuales/animadas que reemplazan secciones de texto
   ChaosBoard · ConnectedHub · AIDictationDemo · ImplStepper
   ========================================================================= */

/* ===================== 1 · CHAOS BOARD (Por qué existe) ===================== */
.chaos-board {
  position: relative;
  height: 480px;
  width: 100%;
}
@media (max-width: 900px) { .chaos-board { height: 420px; } }

.cb-item {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-med);
  font-family: var(--sans);
  --rot: 0deg;
  animation: cbFloat var(--dur, 6s) var(--ease) var(--del, 0s) infinite;
  will-change: transform;
}
@keyframes cbFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-13px) rotate(calc(var(--rot) + 0.6deg)); }
}
@media (prefers-reduced-motion: reduce) { .cb-item { animation: none; transform: rotate(var(--rot)); } }

/* whatsapp pile */
.cb-wa { top: 2%; left: 0; width: 252px; padding: 0; overflow: hidden; z-index: 5; }
.cb-wa-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #0a3328; color: #fff; }
.cb-wa-head .av { width: 26px; height: 26px; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #06231b; }
.cb-wa-head .nm { font-size: 12.5px; font-weight: 600; }
.cb-wa-body { padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; background: #ece5db; }
.cb-bubble { align-self: flex-start; background: #fff; border-radius: 9px; border-top-left-radius: 3px; padding: 7px 10px; font-size: 11.5px; color: #1f2a33; max-width: 92%; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,0.06); }
.cb-badge {
  position: absolute; top: -9px; right: -9px;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; background: #f0625a; color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 4px 12px -2px rgba(240,98,90,0.6);
  animation: cbPing 1.8s var(--ease) infinite;
}
@keyframes cbPing {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,98,90,0.5); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(240,98,90,0); }
}

/* missed call */
.cb-call { top: 1%; right: 1%; width: 210px; padding: 14px 15px; z-index: 6; }
.cb-call .row { display: flex; align-items: center; gap: 11px; }
.cb-call .ic { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, #f0625a 13%, #fff); color: #e04a42; display: grid; place-items: center; flex-shrink: 0; }
.cb-call .t1 { font-size: 13px; font-weight: 600; color: var(--ink); }
.cb-call .t2 { font-size: 11px; color: #e04a42; margin-top: 1px; font-weight: 600; }

/* sticky note */
.cb-note {
  bottom: 4%; left: 3%; width: 196px; padding: 16px 16px 18px;
  background: #fff7d6; border-color: #f2e6a8;
  box-shadow: 0 14px 30px -14px rgba(120,100,20,0.4);
  z-index: 7;
}
.cb-note .pin { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #e0a13c; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.cb-note .hand { font-family: "Architects Daughter", var(--serif); font-size: 16px; line-height: 1.5; color: #6b5a1e; }
.cb-note .hand b { font-weight: 700; }

/* spreadsheet fragment */
.cb-sheet { bottom: 0; right: 2%; width: 250px; padding: 0; overflow: hidden; z-index: 4; }
.cb-sheet .sh-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--cream); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--muted-fg); }
.cb-sheet .sh-head .ic { color: #3aa36b; }
.cb-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; }
.cb-grid > div { padding: 8px 11px; font-size: 11px; color: var(--ink-soft); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.cb-grid > div:nth-child(3n) { border-right: none; }
.cb-grid .hd { background: #fbfaf6; font-weight: 600; color: var(--muted-fg); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.cb-grid .warn { color: #e0a13c; font-weight: 600; }

/* polaroid photo (doctor frustrated) */
.cb-photo {
  top: 24%; right: 14%; width: 210px;
  padding: 11px 11px 5px;
  background: #fff;
  border-color: #ece4d2;
  box-shadow: 0 26px 44px -18px rgba(40,30,15,0.38), 0 6px 14px -4px rgba(0,0,0,0.10);
  z-index: 6;
}
.cb-photo-img {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 12;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(135deg, #e8e0d0, #d8cdb6);
}
.cb-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-photo-cap {
  font-family: "Architects Daughter", var(--serif);
  font-size: 15px;
  color: #6b5a1e;
  text-align: center;
  padding: 9px 0 3px;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .cb-photo { top: 30%; right: 6%; width: 170px; padding: 9px 9px 4px; }
  .cb-photo-cap { font-size: 13px; padding: 7px 0 2px; }
}

/* calendar clash */
.cb-clash { top: 33%; left: 22%; width: 178px; padding: 13px 14px; z-index: 8; }
.cb-clash .hd { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); display: flex; align-items: center; gap: 6px; }
.cb-clash .stack { position: relative; margin-top: 9px; height: 44px; }
.cb-clash .blk { position: absolute; left: 0; right: 0; border-radius: 7px; padding: 6px 9px; font-size: 11px; font-weight: 600; }
.cb-clash .blk.a { top: 0; background: color-mix(in srgb, var(--medical-blue-strong) 16%, #fff); color: var(--medical-blue-strong); }
.cb-clash .blk.b { top: 14px; left: 16px; background: color-mix(in srgb, #f0625a 14%, #fff); color: #e04a42; box-shadow: 0 6px 16px -6px rgba(240,98,90,0.4); }
.cb-clash .bang { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #f0625a; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; z-index: 2; }

/* faint tangle line behind */
.cb-tangle { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; }
.cb-tangle path { stroke: var(--primary); stroke-width: 1.5; fill: none; stroke-dasharray: 5 7; opacity: 0.35; animation: cbDash 12s linear infinite; }
@keyframes cbDash { to { stroke-dashoffset: -200; } }

/* ===================== 2 · CONNECTED HUB (Plataforma) ===================== */
.hub-diagram {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 820 / 600;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 30px 36px;
}
.hub-node.n1 { margin-top: 10px; }
.hub-node.n2 { margin-top: -8px; }
.hub-node.n3 { margin-top: 14px; }
.hub-node.n4 { margin-left: 4px; }
.hub-node.n5 { margin-right: 6px; }
.hub-node.n6 { margin-bottom: 8px; }
.hub-node.n7 { margin-bottom: -6px; }
.hub-node.n8 { margin-bottom: 12px; }
.hub-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.hub-svg .conn {
  stroke: var(--primary-light);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.hub-svg .conn.lit { stroke: var(--primary); stroke-width: 2.5; }
.hub-svg .packet { fill: var(--primary); }

.hub-node {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  z-index: 3;
  transition: var(--t-smooth);
  cursor: default;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center;
}
.hub-node:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow-med);
  transform: translateY(-3px);
}
.hub-node .hn-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.hub-node h4 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.hub-node p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 4px;
}

.hub-node.n1 { grid-column: 1; grid-row: 1; }
.hub-node.n2 { grid-column: 2; grid-row: 1; }
.hub-node.n3 { grid-column: 3; grid-row: 1; }
.hub-node.n4 { grid-column: 1; grid-row: 2; }
.hub-core   { grid-column: 2; grid-row: 2; }
.hub-node.n5 { grid-column: 3; grid-row: 2; }
.hub-node.n6 { grid-column: 1; grid-row: 3; }
.hub-node.n7 { grid-column: 2; grid-row: 3; }
.hub-node.n8 { grid-column: 3; grid-row: 3; }

.hub-core {
  position: relative;
  width: 88%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #0d3e30, #06231b);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 4;
  box-shadow: 0 30px 60px -22px rgba(6,35,27,0.6);
  border: 1px solid rgba(111,220,180,0.3);
  margin: auto;
}
.hub-core::before, .hub-core::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(111,220,180,0.4);
  animation: hubRing 3s var(--ease) infinite;
}
.hub-core::after { animation-delay: 1.5s; }
@keyframes hubRing {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.hub-core img { width: 42px; height: 42px; }
.hub-core .lbl {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dark-accent);
  margin-top: 8px;
  text-align: center;
  line-height: 1.3;
  padding: 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  .hub-core::before, .hub-core::after { animation: none; }
}

/* Mobile: same diagram, smaller cards, hide descriptions */
@media (max-width: 820px) {
  .hub-diagram {
    max-width: 480px;
    gap: 10px;
    margin-top: 44px;
  }
  .hub-node.n1, .hub-node.n2, .hub-node.n3,
  .hub-node.n4, .hub-node.n5,
  .hub-node.n6, .hub-node.n7, .hub-node.n8 {
    margin: 0;
  }
  .hub-node { padding: 10px 11px; border-radius: 12px; }
  .hub-node .hn-ic { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 5px; }
  .hub-node h4 { font-size: 0.78rem; line-height: 1.18; }
  .hub-node p { display: none; }
  .hub-core img { width: 32px; height: 32px; }
  .hub-core .lbl { font-size: 0.56rem; margin-top: 5px; padding: 0 6px; }
}

@media (max-width: 480px) {
  .hub-diagram { gap: 7px; }
  .hub-node { padding: 8px 9px; border-radius: 10px; }
  .hub-node .hn-ic { width: 24px; height: 24px; border-radius: 7px; margin-bottom: 3px; }
  .hub-node h4 { font-size: 0.68rem; }
  .hub-core img { width: 24px; height: 24px; }
  .hub-core .lbl { font-size: 0.5rem; padding: 0 3px; line-height: 1.2; }
}

/* ===================== 3 · AI DICTATION DEMO (IA) ===================== */
.ai-demo {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 22px;
  margin-top: 56px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-xl);
  padding: 22px;
}
@media (max-width: 900px) { .ai-demo { grid-template-columns: 1fr; } }

/* left: mic + live transcript */
.aid-mic {
  background: var(--d1);
  border: 1px solid rgba(111,220,180,0.18);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column;
}
.aid-mic-top { display: flex; align-items: center; gap: 13px; }
.aid-mic-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--dark-accent); color: #06231b;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(111,220,180,0.5);
  animation: aidPulse 1.6s var(--ease) infinite;
}
@keyframes aidPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(111,220,180,0.5); }
  60% { box-shadow: 0 0 0 14px rgba(111,220,180,0); }
}
.aid-mic-meta .l1 { font-size: 0.95rem; font-weight: 600; color: #fff; }
.aid-mic-meta .l2 { font-size: 0.8rem; color: var(--dark-text-3); margin-top: 2px; }
.aid-wave { display: flex; align-items: center; gap: 4px; height: 56px; margin: 22px 0 18px; }
.aid-wave i { flex: 1; max-width: 7px; border-radius: 3px; background: var(--dark-accent); opacity: 0.85; animation: aidBar 1.1s var(--ease) infinite; }
@keyframes aidBar { 0%,100% { height: 16%; } 50% { height: 100%; } }
.aid-transcript {
  background: rgba(0,0,0,0.25); border-radius: var(--r);
  padding: 14px 16px; font-size: 0.92rem; line-height: 1.6; color: var(--dark-text-2);
  flex: 1; min-height: 92px;
}
.aid-transcript .caret { display: inline-block; width: 2px; height: 1.05em; background: var(--dark-accent); vertical-align: text-bottom; margin-left: 1px; animation: aidCaret 0.9s steps(1) infinite; }
@keyframes aidCaret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* right: structured note being filled */
.aid-note {
  background: #fff; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.aid-note-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.aid-note-bar .ttl { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.aid-note-bar .ttl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.aid-note-bar .tag { font-size: 0.72rem; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, #fff); padding: 4px 10px; border-radius: 999px; }
.aid-fields { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.aid-field .fl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 6px; }
.aid-field .fv {
  font-size: 0.92rem; line-height: 1.55; color: var(--ink);
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; min-height: 40px; transition: var(--t-smooth);
}
.aid-field.filling .fv { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.aid-field.done .fv { background: color-mix(in srgb, var(--primary) 7%, #fff); }
.aid-field .fv .hl { background: color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 3px; padding: 0 2px; }
.aid-note-foot { margin-top: auto; padding: 13px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; }
.aid-chip { font-size: 0.8rem; font-weight: 600; padding: 8px 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; }
.aid-chip.solid { background: var(--primary); color: #fff; }
.aid-chip.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary-light); }
.aid-progress { margin-left: auto; font-size: 0.78rem; color: var(--muted-fg); display: flex; align-items: center; gap: 7px; }
.aid-progress .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: var(--t-quick); }
.aid-progress .pdot.on { background: var(--primary); }

/* capability chips row */
.ai-caps { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ai-cap {
  display: flex; align-items: center; gap: 11px;
  background: var(--dark-card); border: 1px solid var(--dark-border);
  border-radius: var(--r-pill); padding: 11px 18px 11px 12px;
  transition: var(--t-smooth);
}
.ai-cap:hover { border-color: rgba(111,220,180,0.4); background: rgba(255,255,255,0.06); }
.ai-cap .ci { width: 32px; height: 32px; border-radius: 50%; background: rgba(111,220,180,0.13); color: var(--dark-accent); display: grid; place-items: center; flex-shrink: 0; }
.ai-cap span { font-size: 0.9rem; font-weight: 500; color: var(--dark-text-1); }

/* ===================== 4 · IMPL STEPPER (Implementación) ===================== */
.impl-stepper { margin-top: 56px; }
.impl-rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .impl-rail { grid-template-columns: 1fr; gap: 16px; } }
.impl-progress {
  position: absolute; top: 27px; left: 12%; right: 12%; height: 3px;
  background: var(--border); border-radius: 2px; z-index: 0;
}
@media (max-width: 820px) { .impl-progress { display: none; } }
.impl-progress .fill { height: 100%; border-radius: 2px; background: var(--primary); width: 0%; transition: width 0.6s var(--ease); }

.impl-card {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--shadow-soft);
  transition: var(--t-smooth); cursor: pointer;
  text-align: left;
}
.impl-card .num-badge {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  background: var(--cream); color: var(--muted-fg);
  border: 2px solid var(--border); transition: var(--t-smooth);
}
.impl-card .ic-badge { position: absolute; top: 28px; right: 24px; color: var(--border-strong); transition: var(--t-smooth); }
.impl-card h4 { font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.impl-card p { font-size: 0.95rem; line-height: 1.6; color: var(--muted-fg); margin-top: 9px; }
.impl-card.active { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-med); transform: translateY(-4px); }
.impl-card.active .num-badge { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.impl-card.active .ic-badge { color: var(--primary); }
.impl-card.past .num-badge { background: color-mix(in srgb, var(--primary) 14%, #fff); color: var(--primary); border-color: var(--primary-light); }