/* ==========================================================================
   Símbolo en calma (27/10/26) — leer antes de tocar.
   Comportamiento: assets/js/ma-simbolo.js. Marcado: sección .sm.

   Una seda en hueso se mueve despacio a pantalla completa; al bajar, la tinta se
   cierra alrededor de la «m» hasta dejar la seda solo dentro del símbolo «m|», y
   el símbolo se asienta en hueso. Cuatro disciplinas, un mismo criterio: el símbolo.

   · Capas del escenario fijo: seda (.sm-gl, WebGL), tinta con el símbolo calado
     (.sm-cv) y el símbolo en SVG (.sm-svg), que solo se ve sin animación.
   · Todo lo mueve el JS con el scroll real; sin transiciones CSS sobre lo mismo.
   · Movimiento reducido, sin WebGL (.is-static) o sin JS: el símbolo en hueso, quieto.
   ========================================================================== */

.sm{--run:140svh;position:relative;height:calc(100svh + var(--run));background:var(--ink)}
.sm-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.sm-gl,.sm-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.sm-gl{z-index:0;background:radial-gradient(120% 90% at 35% 30%,#E9E8DD 0%,#9C9A93 48%,#1F2322 100%)}
.sm-cv{z-index:1}
.sm-svg{position:absolute;z-index:2;left:50%;top:calc(39px + 50%);width:min(38%,520px);height:auto;transform:translate(-50%,-50%);fill:var(--bone);visibility:hidden}
/* La cabecera de la página entra justo debajo: su aire de arriba ya lo pone el escenario. */
.sm + .sx-hero{padding-top:clamp(30px,6svh,70px)}

/* Sin la animación (sin WebGL: .is-static, lo pone el JS; sin JS: el noscript de la página): el símbolo
   quieto, en hueso, en un bloque más corto. */
.sm.is-static{height:72svh}
.sm.is-static .sm-pin{position:relative;height:72svh}
.sm.is-static .sm-gl,.sm.is-static .sm-cv{display:none}
.sm.is-static .sm-svg{visibility:visible}

@media (max-width:760px){
  .sm{--run:110svh}
  .sm-svg{width:63%;top:calc(35px + 50%)}
  .sm.is-static,.sm.is-static .sm-pin{height:56svh}
}

@media (prefers-reduced-motion:reduce){
  .sm,.sm .sm-pin{position:relative;height:72svh}
  .sm .sm-gl,.sm .sm-cv{display:none}
  .sm .sm-svg{visibility:visible}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
  .sm,.sm .sm-pin{height:56svh}
}