/* ==========================================================================
   HERO VISUALS (.hv) — original illustrations for three solution heroes,
   built in HTML + CSS (no images, video or third-party runtimes):
     .hv-agent  /soluciones/agentes-ia                 an agent works through a request
     .hv-chat   /soluciones/asistentes-empresariales   question → answer with source + indicators
     .hv-flow   /soluciones/automatizacion-inteligente an invoice flows through extraction and checks

   Same language as the pipeline and document-volume diagrams: dark panel,
   mono labels, thin lines, yellow accent.
   Motion: each panel has data-inview="loop" (js/modules/inview.js), so the
   entrance plays every time it comes into view and the loops only run while
   visible. Without JS or with reduced motion, the final state is shown.
   ========================================================================== */

.page-hero__media--visual {
  justify-self: end;
  width: 100%;
  max-width: 56rem;
  margin-right: 0;
}

@media (max-width: 1023px) {
  .page-hero__media--visual { justify-self: start; }
}

/* ---- Panel ------------------------------------------------------------------------ */
.hv {
  --hv-accent: var(--yellow-500);
  --hv-line: var(--ink-700);
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  color: var(--white);
  font-size: var(--text-small);
  line-height: 1.45;
}

.hv .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.hv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--hv-line);
  color: var(--ink-400);
}

.hv__status {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  color: var(--white);
}

.hv__pulse {
  position: relative;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--hv-accent);
}

.hv__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hv-accent);
  opacity: 0;
}

.hv.is-inview .hv__pulse::after {
  animation: hv-pulse 2.2s var(--ease-out-quad) infinite;
}

@keyframes hv-pulse {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* Entrance: items rise one after another (--n = order) */
.js .hv [data-hv-step] {
  opacity: 0;
  transform: translateY(.8rem);
}

.js .hv.is-inview [data-hv-step] {
  animation: hv-rise .6s var(--ease-out-quad) both;
  animation-delay: calc(var(--n, 0) * .45s + .15s);
}

@keyframes hv-rise {
  from { opacity: 0; transform: translateY(.8rem); }
  to { opacity: 1; transform: none; }
}

/* ---- Agent: ordered steps with dots on a line --------------------------------------- */
.hv-agent__steps {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.hv-agent__steps::before {
  content: "";
  position: absolute;
  top: .8rem;
  bottom: .8rem;
  left: .7rem;
  width: 1px;
  background: var(--hv-line);
}

.hv-agent__step {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: start;
  gap: var(--space-3);
}

.hv-agent__dot {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .2rem;
  border: 1px solid var(--ink-400);
  border-radius: 50%;
  background: var(--ink-900);
}

.hv-agent__step--done .hv-agent__dot {
  border-color: var(--hv-accent);
  background: var(--hv-accent);
}

.hv-agent__verb {
  display: block;
  color: var(--ink-400);
}

.hv-agent__text {
  display: block;
  margin-top: .2rem;
}

.hv-agent__state {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--hv-accent);
  white-space: nowrap;
}

/* Last step: waits for a person — highlighted, with a ring that breathes */
.hv-agent__step--human {
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1);
  border: 1px solid var(--hv-accent);
  border-radius: var(--radius-md);
}

.hv-agent__step--human .hv-agent__dot {
  border-color: var(--hv-accent);
}

.hv.is-inview .hv-agent__step--human .hv-agent__dot {
  animation: hv-ring 2.4s var(--ease-in-out-quad) 2.6s infinite;
}

@keyframes hv-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 196, 0, .45); }
  50% { box-shadow: 0 0 0 .6rem rgba(245, 196, 0, 0); }
}

/* ---- Assistant: chat + small indicator chart ------------------------------------------ */
.hv-chat {
  display: grid;
  gap: var(--space-4);
}

.hv-chat .hv__bar {
  margin-bottom: 0;
}

.hv-chat__msg {
  max-width: 88%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.hv-chat__msg--user {
  justify-self: end;
  border-bottom-right-radius: var(--radius-xs);
  background: var(--hv-accent);
  color: var(--ink-950);
}

.hv-chat__msg--bot {
  justify-self: start;
  width: 100%;
  border: 1px solid var(--hv-line);
  border-bottom-left-radius: var(--radius-xs);
  background: var(--ink-950);
}

.hv-chat__source {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: var(--space-3);
  color: var(--ink-400);
}

/* Typing dots between the question and the answer */
.hv-chat__typing {
  display: none;
}

.js .hv-chat__typing {
  display: flex;
  gap: .5rem;
  height: 0;
  margin-top: calc(var(--space-4) * -1);
  overflow: hidden;
}

/* Shown after the question (≈0.7 s) and gone right before the answer (≈1.9 s) */
.js .hv.is-inview .hv-chat__typing {
  animation: hv-typing-box 1.4s linear .6s both;
}

.hv-chat__typing span {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--ink-400);
}

.js .hv.is-inview .hv-chat__typing span {
  animation: hv-typing-dot .6s ease-in-out infinite alternate;
}

.hv-chat__typing span:nth-child(2) { animation-delay: .2s; }
.hv-chat__typing span:nth-child(3) { animation-delay: .4s; }

@keyframes hv-typing-box {
  0% { height: 0; margin-top: calc(var(--space-4) * -1); }
  8%, 92% { height: 1.4rem; margin-top: 0; }
  100% { height: 0; margin-top: calc(var(--space-4) * -1); }
}

@keyframes hv-typing-dot {
  to { transform: translateY(-.35rem); opacity: .4; }
}

.hv-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: var(--space-3);
  height: 12rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--hv-line);
}

.hv-chart__col {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .6rem;
  height: 100%;
  text-align: center;
}

.hv-chart__bar {
  align-self: end;
  height: var(--h);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--ink-700);
  transform-origin: bottom;
}

.hv-chart__col:last-child .hv-chart__bar {
  background: var(--hv-accent);
}

.hv-chart__col:nth-child(1) { --h: 20%; }
.hv-chart__col:nth-child(2) { --h: 44%; }
.hv-chart__col:nth-child(3) { --h: 70%; }
.hv-chart__col:nth-child(4) { --h: 84%; }

.js .hv-chat .hv-chart__bar {
  transform: scaleY(0);
}

.js .hv-chat.is-inview .hv-chart__bar {
  animation: hv-grow .7s var(--ease-out-cubic) both;
  animation-delay: calc(2.4s + var(--i, 0) * .12s);
}

.hv-chart__col:nth-child(2) .hv-chart__bar { --i: 1; }
.hv-chart__col:nth-child(3) .hv-chart__bar { --i: 2; }
.hv-chart__col:nth-child(4) .hv-chart__bar { --i: 3; }

@keyframes hv-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.hv-chart__label {
  color: var(--ink-400);
}

/* ---- Automation: stages joined by a line; a token runs down it ------------------------- */
.hv-flow__stages {
  /* centre of the stage icons: card padding + border + half the icon */
  --hv-axis: calc(var(--space-3) + 1px + 1.6rem);
  position: relative;
  display: grid;
  gap: var(--space-3);
}

/* Connector behind the stage cards, and the token that travels it */
.hv-flow__stages::before {
  content: "";
  position: absolute;
  top: var(--hv-axis);
  bottom: var(--hv-axis);
  left: var(--hv-axis);
  width: 1px;
  background: var(--hv-line);
}

.hv-flow__token {
  position: absolute;
  top: calc(var(--hv-axis) - .45rem);
  left: calc(var(--hv-axis) - .4rem);
  z-index: 2;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--hv-accent);
  box-shadow: 0 0 1.2rem rgba(245, 196, 0, .6);
  opacity: 0;
}

.hv.is-inview .hv-flow__token {
  animation: hv-token 4.2s var(--ease-in-out-cubic) 2.2s infinite;
}

@keyframes hv-token {
  0% { top: calc(var(--hv-axis) - .45rem); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - var(--hv-axis) - .45rem); opacity: 0; }
}

.hv-flow__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-md);
  background: var(--ink-950);
}

.hv-flow__icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--hv-line);
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--white);
}

.hv-flow__stage--ai .hv-flow__icon {
  border-color: var(--hv-accent);
  background: var(--hv-accent);
  color: var(--ink-950);
}

.hv-flow__kicker {
  display: block;
  color: var(--ink-400);
}

.hv-flow__title {
  display: block;
  margin-top: .2rem;
}

.hv-flow__fields {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--space-2);
}

.hv-flow__fields span {
  padding: .3rem .8rem;
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-pill);
  color: var(--ink-400);
}

.hv-flow__checks {
  display: grid;
  gap: .5rem;
  margin-top: var(--space-2);
}

.hv-flow__check {
  display: flex;
  align-items: center;
  gap: .7em;
  color: var(--ink-400);
}

.hv-flow__check .icon {
  color: var(--hv-accent);
}

.hv-flow__check--review {
  color: var(--white);
}

.hv-flow__check--review .icon {
  color: var(--white);
}

/* ---- Small screens ----------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hv {
    padding: var(--space-4);
  }

  .hv__bar {
    flex-wrap: wrap;
  }

  .hv-chat__msg {
    max-width: 100%;
  }
}

/* ---- Reduced motion: everything in its final state, nothing loops ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hv *,
  .hv *::before,
  .hv *::after {
    animation: none !important;
  }

  .js .hv [data-hv-step],
  .js .hv-chat .hv-chart__bar {
    opacity: 1;
    transform: none;
  }

  .js .hv-chat__typing {
    display: none;
  }
}