/* Pausas visuales de la landing Agentes IA para empresas.
   Aisladas para no alterar otras páginas que comparten landing.css. */
.agent-visual-break {
  padding: clamp(36px, 7vw, 88px) 0;
}

.agent-visual {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    radial-gradient(circle at 72% 28%, rgba(37, 128, 227, 0.14), transparent 35%),
    radial-gradient(circle at 20% 82%, rgba(94, 234, 212, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(14, 22, 34, 0.98), rgba(7, 11, 18, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
}

.agent-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.23;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.agent-visual__copy,
.agent-visual__svg,
.agent-visual figcaption {
  position: relative;
  z-index: 1;
}

.agent-visual__copy {
  max-width: 820px;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.agent-visual__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--accent);
  font: 600 11px/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.agent-visual__kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}

.agent-visual__copy h2 {
  max-width: 780px;
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
}

.agent-visual__copy h2 em {
  color: var(--accent);
  font-weight: inherit;
}

.agent-visual__copy p,
.agent-visual figcaption {
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.65;
  text-align: justify;
}

.agent-visual__copy p {
  max-width: 760px;
  margin: 0;
}

.agent-visual__svg {
  display: block;
  width: min(760px, 100%);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.agent-visual figcaption {
  max-width: 780px;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.agent-visual figcaption strong {
  color: var(--ink);
}

.agent-choice-mobile {
  display: none;
}

@media (min-width: 980px) {
  .agent-visual {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(34px, 5vw, 70px);
    align-items: center;
  }

  .agent-visual__copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .agent-visual__copy h2 {
    font-size: clamp(44px, 4.4vw, 64px);
  }

  .agent-visual__svg {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .agent-visual figcaption {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin: 28px 0 0;
  }
}

/* SVG primitives: inline fallbacks are duplicated in the markup. */
.agent-visual .av-frame {
  fill: rgba(8, 14, 23, .76);
  stroke: rgba(157, 176, 201, .22);
  stroke-width: 1.4;
}

.agent-visual .av-node {
  fill: rgba(18, 29, 45, .96);
  stroke: rgba(157, 176, 201, .34);
  stroke-width: 1.5;
}

.agent-visual .av-node--accent {
  fill: rgba(37, 128, 227, .13);
  stroke: #2580e3;
}

.agent-visual .av-node--human {
  fill: rgba(94, 234, 212, .09);
  stroke: #5eead4;
}

.agent-visual .av-node--warm {
  fill: rgba(255, 184, 107, .09);
  stroke: #ffb86b;
}

.agent-visual .av-line {
  fill: none;
  stroke: rgba(157, 176, 201, .46);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  vector-effect: non-scaling-stroke;
}

.agent-visual .av-line--accent { stroke: rgba(37, 128, 227, .78); }
.agent-visual .av-line--human { stroke: rgba(94, 234, 212, .78); }
.agent-visual .av-line--warm { stroke: rgba(255, 184, 107, .74); }

.agent-visual .av-line--motion {
  stroke-dasharray: .025 .975;
  stroke-dashoffset: 0;
  opacity: .95;
  animation: av-packet-flow 5.8s linear infinite;
}

.agent-visual .av-line--motion.av-delay-1 { animation-delay: -1.4s; }
.agent-visual .av-line--motion.av-delay-2 { animation-delay: -2.9s; }
.agent-visual .av-line--motion.av-delay-3 { animation-delay: -4.3s; }

.agent-visual .av-kicker {
  fill: #7f93aa;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.agent-visual .av-title {
  fill: #f4f7fb;
  font-family: var(--sans);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.agent-visual .av-title--small { font-size: 27px; }

.agent-visual .av-meta {
  fill: #a9b6c6;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
}

.agent-visual .av-meta--small { font-size: 17px; }

.agent-visual .av-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.agent-visual .av-icon--blue { color: #6db6ff; }
.agent-visual .av-icon--mint { color: #5eead4; }
.agent-visual .av-icon--warm { color: #ffb86b; }

.agent-visual .av-core-ring {
  fill: none;
  stroke: rgba(37, 128, 227, .6);
  stroke-width: 2;
  stroke-dasharray: 6 9;
  transform-origin: center;
  animation: av-ring-spin 18s linear infinite;
}

.agent-visual .av-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: av-node-pulse 3.2s ease-in-out infinite;
}

.agent-visual .av-pulse.av-delay-1 { animation-delay: .8s; }
.agent-visual .av-pulse.av-delay-2 { animation-delay: 1.6s; }

.agent-visual .av-choice {
  transform-box: fill-box;
  transform-origin: center;
  animation: av-choice-breathe 5.2s ease-in-out infinite;
}

.agent-visual .av-choice.av-delay-1 { animation-delay: .9s; }
.agent-visual .av-choice.av-delay-2 { animation-delay: 1.8s; }

@keyframes av-packet-flow {
  to { stroke-dashoffset: -1; }
}

@keyframes av-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes av-node-pulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes av-choice-breathe {
  0%, 100% { opacity: .78; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

@media (max-width: 640px) {
  .agent-visual-break { padding: 28px 0; }
  .agent-visual {
    padding: 24px 16px 26px;
    border-radius: 14px;
  }
  .agent-visual__copy h2 {
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1.02;
  }
  .agent-visual__copy p,
  .agent-visual figcaption {
    font-size: 19px;
    line-height: 1.58;
  }
  .agent-visual__svg { width: 100%; }
  .agent-visual figcaption { margin-top: 18px; padding-top: 16px; }

  .agent-visual__svg:not(.agent-visual__svg--choice) .av-meta {
    display: none;
  }

  .agent-visual__svg:not(.agent-visual__svg--choice) .av-title {
    font-size: 40px;
  }

  .agent-visual__svg:not(.agent-visual__svg--choice) .av-title--compact {
    font-size: 38px;
  }

  .agent-visual__svg:not(.agent-visual__svg--choice) .av-kicker {
    font-size: 23px;
  }

  .agent-visual__svg--choice {
    display: none;
  }

  .agent-choice-mobile {
    position: relative;
    display: grid;
    gap: 12px;
    margin: 8px 0 4px;
    padding: 4px 0 4px 22px;
  }

  .agent-choice-mobile::before {
    content: "";
    position: absolute;
    top: 56px;
    bottom: 56px;
    left: 8px;
    width: 1px;
    background: linear-gradient(#2580e3, #5eead4 58%, #ffb86b);
    opacity: .72;
  }

  .agent-choice-mobile > div {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid rgba(157, 176, 201, .32);
    border-radius: 14px;
    background: rgba(18, 29, 45, .94);
  }

  .agent-choice-mobile > div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: .72;
  }

  .agent-choice-mobile span {
    color: #7f93aa;
    font: 700 11px/1.2 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .agent-choice-mobile strong {
    color: var(--ink);
    font: 600 27px/1.08 var(--sans);
    letter-spacing: -.02em;
  }

  .agent-choice-mobile small {
    color: #a9b6c6;
    font: 600 16px/1.45 var(--sans);
  }

  .agent-choice-mobile__input,
  .agent-choice-mobile__result--agent { color: #6db6ff; }
  .agent-choice-mobile__question { color: #8da0b7; }
  .agent-choice-mobile__result--auto { color: #5eead4; }
  .agent-choice-mobile__result--agentic { color: #ffb86b; }

  .agent-choice-mobile__result {
    animation: av-choice-breathe 5.2s ease-in-out infinite;
  }
  .agent-choice-mobile__result--agent { animation-delay: .9s; }
  .agent-choice-mobile__result--agentic { animation-delay: 1.8s; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-visual *,
  .agent-visual *::before,
  .agent-visual *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .agent-visual .av-line--motion {
    stroke-dasharray: none;
    opacity: .65;
  }
}