/* Versión A. La operación primero. */

.hero { padding-bottom: 72px; }
.escena.a { perspective: 2200px; }

.a-marco {
  border-radius: 22px;
  background: var(--papel);
  box-shadow: var(--sombra);
  transform: rotateX(5deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

/* ---------- cabecera ---------- */

.a-cabecera {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--borde);
  background: var(--blanco);
}
.a-cabecera p { margin: 0; }
.a-sector span, .a-regla span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.a-sector b { display: block; margin-top: 2px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.a-regla { padding-left: 18px; border-left: 3px solid var(--linea-viva); }
.a-regla b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; }
.a-sector b, .a-regla b { transition: opacity .35s ease, filter .35s ease; }
.sale .a-sector b, .sale .a-regla b { opacity: 0; filter: blur(3px); }

/* ---------- cuerpo ---------- */

.a-cuerpo { position: relative; padding: 22px 44px 26px; transition: opacity .4s ease, filter .4s ease; }
.sale .a-cuerpo { opacity: 0; filter: blur(3px); }

.a-linea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.a-linea path { fill: none; stroke: var(--linea-viva); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.trazada .a-linea path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s var(--ease-in-out); }

.a-pulso {
  position: absolute;
  z-index: 3;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(22, 200, 168, .28);
  box-shadow: 0 0 0 6px rgba(22, 200, 168, .14);
  opacity: 0;
  transition: transform .7s var(--ease-in-out), opacity .3s ease;
  pointer-events: none;
}
.a-pulso.on { opacity: 1; }

.a-pasos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.a-pasos li { display: flex; flex-direction: column; min-width: 0; opacity: 0; transform: translateY(12px); }
.armada .a-pasos li {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i) * 70ms);
}

.a-nodo { display: grid; justify-items: center; gap: 0 6px; grid-template-columns: 1fr; text-align: center; }
.a-nodo span { font-family: var(--mono); font-size: 10.5px; color: var(--gris); }
.a-nodo b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.a-nodo i {
  order: 3;
  width: 16px;
  height: 16px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 0 0 3px var(--linea-viva);
  transition: background-color .3s ease, transform .3s var(--ease-out);
}
li.activo .a-nodo i { background: var(--linea-viva); transform: scale(1.2); }
li.hecho .a-nodo i { background: var(--linea-honda); box-shadow: inset 0 0 0 3px var(--linea-honda); }

/* ---------- tarjetas ---------- */

.a-tarjeta {
  flex: 1;
  min-height: 172px;
  margin-top: 16px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: inset 0 0 0 1px var(--borde), 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
li.activo .a-tarjeta {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1.5px var(--linea-viva), 0 14px 30px rgba(14, 90, 84, .16);
}
.a-tarjeta h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eceae2;
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  color: var(--gris);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.chip.listo { background: #d5f2ea; color: var(--linea-honda); }

.p-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--borde); }
.p-fila span { min-width: 0; }
.p-fila b { display: block; font-size: 13px; font-weight: 650; }
.p-fila small { display: block; font-size: 11.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.p-barra { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 7px 0; border-top: 1px solid var(--borde); font-size: 12px; }
.p-barra i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #eceae2; overflow: hidden; }
.p-barra u { display: block; height: 100%; background: var(--linea-honda); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.p-barra b { grid-row: 1; grid-column: 2; font-family: var(--mono); font-weight: 500; }
.p-barra b.listo { color: var(--linea-honda); }

.p-ruta { position: relative; display: grid; gap: 14px; padding: 6px 0 0 2px; }
.p-ruta::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 8px; width: 2px; background: #dcdad2; }
.p-parada { position: relative; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.p-parada i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 2px #c9c7bf; transition: background-color .3s ease, box-shadow .3s ease; }
.p-parada.lista i { background: var(--linea-honda); box-shadow: inset 0 0 0 2px var(--linea-honda); }
.p-parada.lista span { font-weight: 650; }

.p-cifra { display: grid; justify-items: start; gap: 4px; padding-top: 8px; border-top: 1px solid var(--borde); }
.p-cifra strong { font-size: 21px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.p-cifra small { font-size: 12px; color: var(--gris); }
.p-cifra .chip { margin-top: 8px; }

.p-doc { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--borde); font-size: 12.5px; }
.p-doc div { display: flex; justify-content: space-between; gap: 8px; }
.p-doc span { color: var(--gris); }
.p-doc b { font-weight: 600; white-space: nowrap; }
.p-doc .p-total { padding-top: 6px; border-top: 1px solid var(--borde); }
.p-doc .p-total span, .p-doc .p-total b { color: var(--tinta); font-weight: 700; }
.p-doc .chip { justify-self: start; margin-top: 4px; }

.p-agenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 4px; }
.p-celda { min-height: 50px; padding: 6px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1px #dcdad2; transition: background-color .35s ease, box-shadow .35s ease; }
.p-celda small { display: block; font-family: var(--mono); font-size: 10px; color: var(--gris); }
.p-celda.ocupada { background: #eceae2; box-shadow: none; }
.p-celda b { display: block; margin-top: 3px; font-size: 11px; font-weight: 650; line-height: 1.15; opacity: 0; transition: opacity .35s ease; }
.p-celda.llena { background: #d5f2ea; box-shadow: inset 0 0 0 1.5px var(--linea-viva); }
.p-celda.llena b { opacity: 1; }

.p-reparto { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borde); font-size: 12.5px; }
.p-reparto i { display: flex; gap: 3px; height: 10px; }
.p-reparto u { border-radius: 3px; background: var(--linea-viva); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.p-reparto u + u { background: var(--linea-honda); transition-delay: .15s; }
li.activo .p-reparto u, li.hecho .p-reparto u { transform: none; }
.p-reparto div { display: flex; justify-content: space-between; }
.p-reparto span { color: var(--gris); }
.p-reparto b { font-weight: 650; }

/* ---------- lectura de datos ---------- */

.a-lectura {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 28px;
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--noche);
  color: var(--blanco);
}
.a-lectura > div { opacity: .82; transition: opacity .6s ease; }
.a-lectura.on > div { opacity: 1; }
.a-eti { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--linea); }
.a-objetivo > b { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 600; }
.a-medidor { position: relative; height: 8px; margin: 26px 0 10px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.a-medidor i { display: block; height: 100%; border-radius: 4px; background: var(--linea); transform: scaleX(0); transform-origin: 0 50%; }
.a-lectura.on .a-medidor i { transition: transform 1.1s var(--ease-out); }
.a-medidor em {
  position: absolute;
  bottom: 100%;
  padding: 0 6px 5px 0;
  border-right: 1px solid rgba(255, 255, 255, .5);
  transform: translateX(-100%);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
  height: 24px;
  bottom: -8px;
}
.a-objetivo p { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.a-objetivo strong { font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-objetivo p span { font-size: 13px; color: rgba(255, 255, 255, .7); }

.a-pregunta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 500;
}
.a-pregunta span:empty::before { content: 'Consulta en lenguaje natural'; color: #9a9994; font-weight: 400; }
.a-pregunta svg { flex: none; width: 18px; height: 18px; fill: var(--linea-viva); }
.a-lectura:not(.on) .a-cursor { display: none; }
.a-cursor { width: 2px; height: 18px; margin-left: -6px; background: var(--linea-honda); animation: cursor 1s steps(2) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.a-respuesta {
  margin: 14px 0 0 4px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--blanco);
  opacity: 0;
  transform: translateY(6px);
}
.responde .a-respuesta { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }

/* ---------- indicador de empresa ---------- */

.a-puntos { display: flex; justify-content: center; gap: 6px; padding: 0 0 18px; }
.a-puntos i { width: 22px; height: 3px; border-radius: 2px; background: #dcdad2; transition: background-color .3s ease; }
.a-puntos i.on { background: var(--linea-honda); }

/* ---------- pantallas medianas ---------- */

@media (max-width: 1080px) and (min-width: 761px) {
  .a-cuerpo { padding: 20px 36px 22px; }
  .a-pasos { gap: 10px; }
  .a-tarjeta { padding: 12px 10px; }
  .a-cabecera .ficticio { display: none; }
  .a-cabecera { grid-template-columns: auto 1fr; }
}

/* ---------- teléfono ---------- */

@media (max-width: 760px) {
  .hero { padding-bottom: 40px; }
  .a-marco { transform: none; border-radius: 18px; }
  .a-cabecera { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .a-sector b { font-size: 19px; }
  .a-regla { padding-left: 12px; }
  .a-regla b { font-size: 14px; }
  .a-cuerpo { padding: 18px 14px 18px; }
  .a-linea, .a-pulso { display: none; }

  .a-pasos { grid-template-columns: 1fr; gap: 10px; padding-left: 30px; }
  .a-pasos::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: -12px;
    width: 3px;
    border-radius: 2px;
    background: var(--linea-viva);
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
  .trazada .a-pasos::before { transform: none; transition: transform 1.1s var(--ease-in-out); }
  .a-pasos li { position: relative; }
  .a-nodo { display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .a-nodo b { font-size: 15px; }
  .a-nodo i { position: absolute; left: -30px; top: 2px; order: 0; margin: 0; }
  .a-tarjeta {
    flex: none;
    min-height: 0;
    height: 0;
    margin-top: 0;
    padding: 0 14px;
    overflow: hidden;
    opacity: 0;
    transition: height .45s var(--ease-in-out), opacity .3s ease, margin-top .45s var(--ease-in-out);
  }
  li.activo .a-tarjeta,
  .a-pasos:not(:has(.activo)) li:first-child .a-tarjeta {
    height: 176px;
    margin-top: 8px;
    padding: 14px;
    opacity: 1;
    transform: none;
  }

  .a-lectura { grid-template-columns: 1fr; gap: 20px; margin-top: 18px; padding: 18px 16px; }
  .a-pregunta { font-size: 14px; padding: 10px 14px; border-radius: 16px; }
  .a-respuesta { font-size: 14.5px; }
  .a-objetivo strong { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-pasos li, .a-tarjeta, .a-linea path, .a-pulso, .a-respuesta, .a-medidor i { transition-duration: .01s !important; transition-delay: 0s !important; }
  .a-cursor { animation: none; }
}