/**
 * El vocabulario de las escenas del sitio.
 *
 * Producto y Soluciones cuentan casos distintos con las mismas piezas: un
 * lienzo de vidrio, conexiones que se dibujan solas, pulsos que viajan por
 * ellas, tarjetas, chips de rol y estados. Vive acá y no en la hoja de cada
 * página porque dos copias del mismo lenguaje se separan en la primera
 * corrección que se hace en una sola.
 *
 * **Todo el movimiento se dispara al entrar al viewport, una sola vez.** Ni un
 * bucle infinito: en una página que explica, el movimiento tiene que
 * significar "esto acaba de pasar", y si algo se mueve todo el tiempo deja de
 * significar nada.
 *
 * La regla que lo sostiene: **el estado por defecto de cada pieza es el
 * final**. `site.js` agrega `.revela`/`.visto` al entrar en pantalla y de ahí
 * cuelgan las animaciones. Sin JavaScript, o con `prefers-reduced-motion`
 * —donde `site.js` ni marca—, la escena se ve entera y detenida en su último
 * cuadro, que es el que cuenta la historia completa.
 */

/* --- El lienzo ------------------------------------------------------------ */

.esc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 34px;
  background:
    radial-gradient(ellipse 46% 40% at 74% 16%, rgba(124, 58, 237, .12), transparent 66%),
    radial-gradient(ellipse 38% 34% at 12% 88%, rgba(8, 145, 178, .07), transparent 68%),
    rgba(255, 255, 255, .55);
  backdrop-filter: blur(22px);
  box-shadow: 0 36px 110px rgba(47, 32, 88, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* Las conexiones van en un SVG estirado sobre el lienzo; las piezas son HTML
   posicionado en porcentajes. Así la tipografía es tipografía de verdad y las
   curvas son curvas de verdad. */
.esc-red {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.esc-linea {
  fill: none;
  stroke: rgba(124, 58, 237, .28);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.esc-linea--dato { stroke: rgba(8, 145, 178, .3); stroke-dasharray: 4 5; }

.esc-pulso {
  fill: none;
  stroke: var(--violet);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(124, 58, 237, .5));
}

/* El pulso de vuelta: lo que un especialista devuelve. Cian, el color del dato
   en todo el sistema, para distinguirlo de la consulta que bajó en violeta. */
.esc-pulso--dato { stroke: var(--cian); filter: drop-shadow(0 0 5px rgba(8, 145, 178, .45)); }

/* --- El riel ---------------------------------------------------------------
   Une una fila de piezas. Es CSS y no SVG a propósito: su largo y su altura
   dependen de la fila real, así que no se descalibra cuando el texto envuelve
   distinto o la escena cambia de alto —que es justo lo que le pasa a un
   `viewBox` estirado. */

.esc-riel {
  position: absolute;
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .32) 6%, rgba(124, 58, 237, .32) 94%, transparent);
  transform-origin: left center;
}

.esc-riel i {
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 9px rgba(124, 58, 237, .6);
  opacity: 0;
}

/* --- Piezas --------------------------------------------------------------- */

/* `.esc-pieza` es solo el gancho del compás: no posiciona nada. Lo que flota
   sobre el lienzo lleva además `.esc-flota`, así una pieza que vive en el
   flujo normal —una tarjeta de carril, un paso de la traza— usa el mismo
   compás sin heredar un `position` que la sacaría de su sitio. */
.esc-flota { position: absolute; z-index: 2; }

.esc-tarjeta {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 40px rgba(76, 29, 149, .1);
}

.esc-tarjeta small {
  display: block;
  margin-bottom: 6px;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.esc-tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.5; }
.esc-tarjeta b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.015em; }

/* `margin: 0` no es cosmético: varios chips son `<p>`, y el margen que el
   navegador les pone por defecto metía 25 px arriba y abajo de cada uno. En una
   pila de tres piezas eso son 50 px que ninguna regla explicaba y que corrían
   la escena entera respecto de sus líneas. */
.esc-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.esc-chip--accion { color: var(--violet-deep); border-color: rgba(124, 58, 237, .3); background: rgba(124, 58, 237, .08); }
.esc-chip--dato { color: #0e7490; border-color: rgba(8, 145, 178, .3); background: rgba(8, 145, 178, .08); }

.esc-agente { display: grid; justify-items: center; gap: 9px; }
.esc-agente .cara { --cara: 56px; }
.esc-agente span { color: var(--muted); font-size: 12px; font-weight: 560; }

/* Punto **y** palabra: un tablero donde el estado es solo un color obliga a
   memorizar una leyenda, y quien no distingue verde de ámbar no puede leerlo. */
.esc-estado { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; font-weight: 560; }
.esc-estado i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--muted); }
.esc-estado--curso i { background: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.esc-estado--curso { color: var(--violet-deep); }
.esc-estado--listo i { background: #047857; box-shadow: 0 0 0 4px rgba(4, 120, 87, .12); }
.esc-estado--listo { color: #047857; }

/* --- El compás -------------------------------------------------------------
   `site.js` enciende `.visto` cuando la sección entra en pantalla; recién ahí
   corre todo. Sin esa clase —sin JavaScript, o con `prefers-reduced-motion`—
   nada de esto se aplica y las piezas se quedan donde ya estaban: visibles. */

.visto .esc-pieza { animation: esc-entra .62s var(--curva) both; }
.visto .esc-linea { animation: esc-traza .8s var(--curva) both; }
.visto .esc-pulso { animation: esc-viaja 1.5s linear both; }
.visto .esc-riel { animation: esc-riel-crece .8s var(--curva) both; }
.visto .esc-riel i { animation: esc-riel-viaja 1.5s linear both; }

@keyframes esc-entra {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
}

@keyframes esc-traza {
  from { stroke-dashoffset: 100; opacity: 0; }
  30% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes esc-viaja {
  from { stroke-dashoffset: 100; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes esc-riel-crece {
  from { transform: scaleX(0); }
}

@keyframes esc-riel-viaja {
  from { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

/* Cinturón y tirantes. `site.js` ya no marca `.visto` con reduced-motion, pero
   si alguna vez la clase llegara por otro camino, una animación pausada dejaría
   las piezas clavadas en su primer cuadro —invisibles—. Apagarlas acá devuelve
   la escena a su estado por defecto, que es el final. */
@media (prefers-reduced-motion: reduce) {
  .visto .esc-pieza,
  .visto .esc-linea,
  .visto .esc-pulso,
  .visto .esc-riel,
  .visto .esc-riel i { animation: none; }
}

/* El escalonado. Un solo lugar para todos los retardos: el orden de la
   historia es el orden de los números. */
.visto [data-paso="1"] { animation-delay: .05s; }
.visto [data-paso="2"] { animation-delay: .3s; }
.visto [data-paso="3"] { animation-delay: .55s; }
.visto [data-paso="4"] { animation-delay: .8s; }
.visto [data-paso="5"] { animation-delay: 1.05s; }
.visto [data-paso="6"] { animation-delay: 1.3s; }
.visto [data-paso="7"] { animation-delay: 1.55s; }