/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · LA FLECHA QUE SE ESTIRA — gemelo vanilla ▓
   v1.0 · 2026-09-05. Ficha: `design-system/COMPONENTE_ICONO.md` (§ La flecha que se estira).
   Kit hermano: `catalogo-cd/components/Flecha.jsx`.

   La → que crece hacia donde va, al pasar el ratón por encima del control que la contiene.

   ⛔ NO ES UNA PIEZA NUEVA — ES UNA COSECHA MOVIDA DE SITIO, y por eso su fecha de origen no es
   hoy. Vivía SÓLO dentro de `exante-git/app/css/cotizador.css` desde el 2026-08-06
   (`.fl-asta`/`.fl-punta`), aprobada por Ricardo sobre el antes/después
   (`plans/decisiones/_decision_efecto_flecha_2026-08-06.html`) y ya documentada como excepción
   transversal en `COMPONENTE_ICONO.md`. Lo que nace hoy es el GEMELO: hasta ahora cada botón que
   la quería la copiaba a mano dentro de producción; aquí queda una sola vez, medible.
   Cosecha de `learn-more-hover` (transitions.dev Pro), ADAPTADA de un galón a una →.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`): --motion-fast, --ease-default.
     2. `box-sizing: border-box`.
     3. El SVG trae los DOS trazos por separado, con sus clases — no un solo `path` con el dibujo
        entero (ver README): `M5 12h14` (asta) + `M12 5l7 7-7 7` (punta).

   ⭐ El asta crece desde su extremo izquierdo (`scaleX(1.14)`) y la punta avanza **2px, no 4**:
   con el asta alargándose, el recorrido de la punta se percibe mayor de lo que es. Con 4 el
   gesto se ve nervioso — es el número que no se adivina.

   ⛔ `transform-box: view-box` + `transform-origin` explícitos son OBLIGATORIOS: sin ellos cada
   trazo rota/escala sobre su PROPIA caja (el cuadro que encierra sólo ese `path`) y la flecha se
   desarma en vez de crecer como un todo.

   ⛔ ALCANCE DECIDIDO, no un olvido: SÓLO ratón. `DECISION-FUENTE` (ficha ICONO, cosecha
   2026-08-06) — «Nota de alcance: es sólo para ratón. Con teclado o en el móvil no se ve, así que
   no comunica nada esencial — sólo acompaña.» No lleva `:focus-visible`: añadirlo sería extender
   el alcance ya decidido, no traducirlo.

   ⛔ EL DISPARADOR SE GENERALIZA A UNA CLASE DE ENGANCHE, y esto SÍ es sólo forma de escritura,
   no diseño (COMO_SE_CONSTRUYE_UN_GEMELO.md §3): en producción el hover vive repetido, un
   selector por cada botón consumidor (`.cz-cta:hover .fl-asta`, `.lzc-save:hover .fl-asta`,
   `.lzc-sendcode:hover .fl-asta` — mismos valores, mismo mecanismo, tres copias). Aquí se
   traduce a UNA clase de enganche, `.exds-flecha-host`, que cualquier botón o enlace nuevo suma
   sin escribir una regla más. Ningún valor cambia; sólo deja de repetirse por consumidor.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-flecha-asta,
.exds-flecha-punta {
  transform-box: view-box;
  transition: transform var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-flecha-asta  { transform-origin: 5px 12px; }
.exds-flecha-punta { transform-origin: 12px 12px; }

/* El disparador: el ANCESTRO interactivo (botón, enlace) que suma esta clase. La flecha misma
   no escucha su propio hover — el área de gesto es la del control completo, no la del ícono. */
.exds-flecha-host:hover .exds-flecha-asta  { transform: scaleX(1.14); }
.exds-flecha-host:hover .exds-flecha-punta { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .exds-flecha-asta,
  .exds-flecha-punta { transition: none; }
}