/* Botones y enlaces con "scramble" (6/9/26) — leer antes de tocar.

   Al pasar el ratón, el texto del botón se descifra de izquierda a derecha en
   medio segundo. En los enlaces de texto se dibuja además un subrayado, el
   texto pasa a naranja y la flecha gira 45°. Es la versión nativa de la
   referencia ScrambleLinkButton (React): aquí no hay librerías, el JS
   (assets/js/scramble.js) envuelve el texto y esta hoja hace el resto.

   Cómo queda montado (lo hace el JS; el HTML de las plantillas no cambia):
     <a class="btn">Texto →</a>
     pasa a
     <a class="btn"><span class="scr-w">Texto</span><span class="scr-arrow">→</span></a>
   Un solo texto: el JS fija el ancho de .scr-w mientras anima y lo suelta al
   acabar, así el botón no baila y el enlace no se lee dos veces.

   Qué recibe qué:
     · Píldoras (.ma-pill, .ma-cta, .btn, .ma-cli .cta, botón del formulario):
       solo el descifrado. El borde ya hace de subrayado y el color no cambia.
     · Enlaces de texto (.scr-line): descifrado + subrayado + naranja + flecha.
       Son el pie de cada trabajo en la home, "Nuestra filosofía" en Quiénes
       somos y los enlaces del pie de página.
   El hover que dispara subrayado y flecha es el del contenedor cuando el
   enlace es pequeño: la escena entera (.xp) y el bloque entero (.biglink). */

.scr-w{position:relative;display:inline-block;white-space:nowrap;font-variant-ligatures:none}
.scr-arrow{display:inline-block;margin-left:.35em;transition:transform .45s cubic-bezier(.625,.05,0,1)}
.ma-cli .cta .scr-arrow{margin-left:0} /* la píldora ya separa con gap */

/* Subrayado: nace por la izquierda al entrar y se recoge por la derecha al salir. */
.scr-line .scr-w::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.625,.05,0,1)}
.scr-line:hover .scr-w::after,
.xp:hover .xp-cap .scr-w::after,
.biglink:hover .s .scr-w::after{transform:scaleX(1);transform-origin:left}

/* Flecha: gira 45° hacia arriba. En la franja naranja la flecha es un ::after del CSS base. */
.scr-line:hover .scr-arrow,
.xp:hover .xp-cap .scr-arrow,
.biglink:hover .s .scr-arrow,
.ma-cli .cta:hover .scr-arrow{transform:rotate(-45deg)}
.cta-band .btn:hover::after{transform:rotate(-45deg)}

/* Color: naranja en los enlaces de texto. Las píldoras conservan el suyo. */
.scr-line,.biglink .s{transition:color .3s ease}
.scr-line:hover,
.xp:hover .xp-cap i,
.biglink:hover .s{color:var(--orange)}
.foot-cols .fcol a.scr-line:hover{color:var(--orange);transform:none}