/* =====================================================================
   ASU EN EL CAMINO — la guía viva dentro del camino de compra
   ---------------------------------------------------------------------
   La misma idea del camino vivo de las portadas, pero metida en el
   armador por pestañas (assets/brands/shared/buy-path.js). Cuatro cosas:

   1 · La barra de pestañas es el camino: un trazo fino une las cuatro
       pestañas. Lo recorrido va encendido con el acento de la marca; lo
       que falta es el mismo trazo, punteado y tenue (el lenguaje de
       assets/css/camino-vivo.css).
   2 · Asu (el mismo ícono del bot del sitio) se para sobre la pestaña
       actual y viaja por el trazo al avanzar o retroceder.
   3 · Asu reacciona: asiente al elegir, se inclina hacia el botón
       principal si el cliente se queda quieto, y celebra en sobrio al
       cerrar "Tu idea" y al enviar el pedido.
   4 · En celular un segundo Asu se asoma al lado del botón principal con
       la línea del paso. Sólo se ve uno de los dos a la vez.

   Lo que se mueve lo escribe assets/js/asu-en-el-camino.js: acá viven el
   resorte del viaje, la respiración y los gestos. Sólo se animan
   transform y opacity (más el brillo de 600 ms del trazo, que es una
   sola pasada, no un bucle). Nada de esto agranda tipografías ni
   botones: las pestañas y el botón principal siguen midiendo igual.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0 · La barra de pestañas pasa a ser un lienzo.
   El trazo viaja en un <li> fuera del flujo, así no mueve ni un píxel de
   la barra (ni del alto, ni del reparto de anchos).
   --------------------------------------------------------------------- */
.asu-camino .b-path__tabs { position: relative; }

.asu-camino__tiro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;          /* dentro del margen de 22 px que ya trae la barra */
  flex: 0 0 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.asu-camino__via {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
}

/* Lo que falta: el mismo trazo, punteado y tenue. Mismo ritmo que el
   `stroke-dasharray: .5 11` del camino vivo. */
.asu-camino__falta,
.asu-camino__hecho {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
}

.asu-camino__falta {
  color: var(--b-path-muted);
  opacity: .45;
  background-image: repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 11px);
}

/* Lo recorrido: encendido con el acento y creciendo con el resorte del
   camino vivo. Crece por transform (scaleX) sobre el ancho completo, así
   no hay ni una escritura de layout por cambio de pestaña. */
.asu-camino__hecho {
  background: var(--b-path-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 520ms cubic-bezier(.34, 1.35, .64, 1);
}

/* ---------------------------------------------------------------------
   1 · Asu sobre el trazo.
   Cuatro capas, una por cosa que se mueve, para que ninguna animación
   pise a otra: viaje (translate), vaivén/guiño (rotate), gesto
   (translateY) y respiración (scale).
   --------------------------------------------------------------------- */
.asu-camino__asu {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 34px;
  transform: translate3d(0, 0, 0) translate(-50%, 50%);
  transition: transform 520ms cubic-bezier(.34, 1.35, .64, 1), opacity 240ms ease;
}

.asu-camino__vaiven,
.asu-camino__gesto,
.asu-camino__cuerpo {
  display: block;
  width: 100%;
  height: 100%;
}

.asu-camino__vaiven {
  transform-origin: 50% 100%;   /* gira y se inclina sobre sus pies */
  transition: transform 600ms ease;
}

.asu-camino__cuerpo svg,
.asu-camino__eco-cuerpo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Respira: 1 → 1,04 en 2,4 s, sin parar. Es lo que la mantiene viva. */
.asu-camino__cuerpo {
  animation: asu-camino-respira 2.4s ease-in-out infinite;
}
@keyframes asu-camino-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Viaja: el vaivén de ±4° sólo mientras dura el viaje. */
.asu-camino__asu.is-viajando .asu-camino__vaiven {
  animation: asu-camino-vaiven 520ms cubic-bezier(.34, 1.35, .64, 1);
}
@keyframes asu-camino-vaiven {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(4deg); }
  65% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Asiente: un salto corto de 4 px al elegir algo importante. */
.asu-camino__asu.is-asiente .asu-camino__gesto {
  animation: asu-camino-asiente 220ms cubic-bezier(.34, 1.35, .64, 1);
}
@keyframes asu-camino-asiente {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-4px); }
}

/* Celebra en sobrio: una vuelta entera, una sola vez. */
.asu-camino__asu.is-gira .asu-camino__vaiven {
  animation: asu-camino-gira 620ms cubic-bezier(.34, 1.35, .64, 1);
}
@keyframes asu-camino-gira {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Se inclina hacia el botón principal cuando el cliente se queda quieto. */
.asu-camino__asu.is-inclina .asu-camino__vaiven {
  transform: rotate(-7deg) translateY(2px);
}

/* Mientras el segundo Asu acompaña al botón, el de la barra se corre:
   nunca hay dos Asus a la vista. */
.asu-camino__asu.is-fuera { opacity: 0; }

/* El trazo entero brilla 600 ms en las dos celebraciones. */
.asu-camino__tiro.is-brilla .asu-camino__hecho,
.asu-camino__tiro.is-brilla .asu-camino__falta {
  animation: asu-camino-brillo 600ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes asu-camino-brillo {
  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  35% { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--b-path-accent) 70%, transparent); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ---------------------------------------------------------------------
   2 · El segundo Asu: en celular se asoma al lado del botón principal.
   Vive en un lienzo fijo pegado a la esquina de la ventana, así que sus
   coordenadas son las de la pantalla. La capa va por debajo de la barra
   del resumen (z 45) para no taparla nunca.
   --------------------------------------------------------------------- */
.asu-camino__eco-host {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 40;
}

.asu-camino__eco {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0) translate(-100%, -50%);
  transition: transform 520ms cubic-bezier(.34, 1.35, .64, 1),
              opacity 240ms ease,
              visibility 0s linear 240ms;
}

.asu-camino__eco.is-viva {
  opacity: 1;
  visibility: visible;
  transition: transform 520ms cubic-bezier(.34, 1.35, .64, 1),
              opacity 200ms ease,
              visibility 0s;
}

/* La línea del paso: una píldora corta, del tamaño del texto de la casa. */
.asu-camino__paso {
  padding: 6px 10px;
  border: 1px solid var(--asu-camino-line);
  border-radius: 999px;
  background: var(--asu-camino-surface);
  color: var(--asu-camino-text);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(4, 8, 12, .16);
}

.asu-camino__eco-cuerpo {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  animation: asu-camino-respira 2.4s ease-in-out infinite;
}

/* En escritorio el segundo Asu no hace falta: basta el de la barra. */
@media (min-width: 768px) {
  .asu-camino__eco-host { display: none; }
}

/* ---------------------------------------------------------------------
   3 · El globo de la pestaña se ancla a Asu con una flechita.
   El globo sigue en el flujo, antes del botón, como manda el camino; lo
   único que cambia es que ahora dice de dónde viene. La flecha es un
   pseudo-elemento: el globo no se vuelve flotante.
   --------------------------------------------------------------------- */
.asu-camino-globo.b-help { position: relative; }

/* La flechita sólo se dibuja cuando Asu quedó por encima del globo: si el
   cliente bajó y Asu pasó por debajo, apuntar hacia arriba mentiría. */
.asu-camino-globo--flecha.b-help::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--asu-camino-flecha, 22px);
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--b-path-accent) 6%, var(--b-path-surface));
  border-left: 1px solid var(--b-path-line);
  border-top: 1px solid var(--b-path-line);
  border-top-left-radius: 2px;
  transform: rotate(45deg);
  pointer-events: none;
}

/* La línea corta de Asu: una sola, encima de las preguntas del globo.
   No reemplaza la línea de la pestaña ni toca las preguntas de un toque. */
.b-help__dicho {
  margin: 8px 0 0;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--b-path-accent);
}

/* ---------------------------------------------------------------------
   4 · Una sola voz: el lanzador flotante del chat (Ensutex) se guarda
   mientras el camino ocupa la pantalla. Es el mismo mecanismo del camino
   vivo (assets/css/asu-acompana.css, clase asu-fuera): se apaga entero
   con display: none y las cuatro clases del selector le ganan a las
   hojas del sitio que reencienden el lanzador. El panel del chat vive
   fuera de esta pieza, así que no lo toca: si el cliente abre el chat
   desde el globo, el chat se ve igual.
   --------------------------------------------------------------------- */
.floating-widgets.ens-chat-widgets.asu-acompana.asu-fuera {
  display: none !important;
}

.floating-widgets.ens-chat-widgets.asu-acompana.asu-fuera #chatbot-trigger,
.floating-widgets.ens-chat-widgets.asu-acompana.asu-fuera #chatbot-cta {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------------
   5 · Movimiento reducido: Asu salta de pestaña sin viajar, sin vaivén y
   sin celebración. El trazo se enciende igual —eso es información, no
   adorno—, sólo que sin resorte.
   --------------------------------------------------------------------- */
/* Sin movimiento: Asu salta de pestaña sin viajar, sin vaivén y sin
   celebración. Va con !important porque brand-base.css fuerza 150 ms a
   todo el sitio en este modo: acá el salto tiene que ser de verdad
   instantáneo, no un viaje corto. */
@media (prefers-reduced-motion: reduce) {
  .asu-camino__asu,
  .asu-camino__eco,
  .asu-camino__hecho,
  .asu-camino__vaiven,
  .asu-camino__eco-cuerpo { transition: none !important; }
  .asu-camino__cuerpo,
  .asu-camino__eco-cuerpo,
  .asu-camino__asu.is-viajando .asu-camino__vaiven,
  .asu-camino__asu.is-asiente .asu-camino__gesto,
  .asu-camino__asu.is-gira .asu-camino__vaiven,
  .asu-camino__tiro.is-brilla .asu-camino__hecho,
  .asu-camino__tiro.is-brilla .asu-camino__falta { animation: none !important; }
}