/* ============================================================
   SEE BEYOND — puesta en página
   ------------------------------------------------------------
   Excepción consciente a "cada página lleva su propio <style>"
   (README, "Duplicación de CSS"): esta sección es un MÓDULO con
   bundle propio en assets/vendor/see-beyond.js, y su CSS viaja
   con él. Una copia pegada en cada página es una copia que se
   desincroniza del shader.

   No define un solo token de marca: paleta, tipografías, espaciado
   y movimiento salen del design system de la página anfitriona.

   REVISIÓN 2 — el azul dejó de ser el fondo de la sección. El sitio
   es Paper; el brand-kit reserva el azul y repartirlo como fondo lo
   gasta. Acá el azul es un EVENTO: la sección entra sobre Paper y
   vira a Ocean con el scroll, se difumina en el cruce, y al salir
   vuelve. Todo lo que es texto cruza con él —de tinta a luz— con el
   mismo número que mueve al dibujo: --hs-veil.

   Dirección: ../SEE-BEYOND.md
   ============================================================ */

.hs{
  position:relative;
  /* Sin fondo propio: el suelo de la sección ES el de la página hasta
     que el velo entra. Con `background:var(--paper)` quedaba un
     escalón contra una vecina en blanco puro —Paper y Paper-hi no son
     el mismo blanco— justo en el borde que la transición tiene que
     borrar. Transparente, no hay nada que empalmar. */
  background:transparent;

  /* 0 = papel · 1 = océano. Lo escribe el motor por frame, leído del
     rect de la pista. El default es 1 para que sin JS la sección sea
     un panel Ocean legible en vez de texto claro sobre papel. */
  --hs-veil:1;

  --hs-fg:     color-mix(in srgb, var(--dark-text)   calc(var(--hs-veil) * 100%), var(--ink));
  --hs-fg-2:   color-mix(in srgb, var(--dark-text-2) calc(var(--hs-veil) * 100%), var(--ink-3));
  --hs-fg-3:   color-mix(in srgb, var(--blue-2)      calc(var(--hs-veil) * 100%), var(--ink-4));
  --hs-accent: color-mix(in srgb, var(--dark-accent) calc(var(--hs-veil) * 100%), var(--orange));
  --hs-line:   color-mix(in srgb, var(--dark-border) calc(var(--hs-veil) * 100%), var(--line));

  color:var(--hs-fg);
}

/* ---- la costura con las secciones vecinas --------------------------
   Sin esto el viraje a azul tiene un borde: arriba del límite la
   página sigue blanca y abajo ya está tintada, y ese escalón
   horizontal es lo primero que se ve al llegar. Las dos sangrías se
   meten en el territorio de las secciones vecinas y llevan el
   degradado hasta cero, así el cambio de suelo no tiene línea en
   ningún momento.

   Van con la MISMA opacidad que el velo, así que fuera de la
   transición no existen: una sección lejana no tiñe a su vecina. */
.hs::before,.hs::after{
  content:"";position:absolute;left:0;right:0;height:34vh;
  z-index:0;pointer-events:none;
  opacity:var(--hs-veil);
}
.hs::before{
  top:-34vh;
  background:linear-gradient(to bottom,rgba(11,42,69,0),var(--dark-surface-0));
}
.hs::after{
  bottom:-34vh;
  background:linear-gradient(to top,rgba(11,42,69,0),var(--dark-surface-0));
}

.hs-track{height:300vh;height:300svh;position:relative}

.hs-stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* ---- el suelo -------------------------------------------------------
   Ocean por opacidad sobre el Paper de la sección: la interpolación es
   exacta y cuesta una capa compuesta, no un repintado. */
.hs-veil{
  position:absolute;inset:0;z-index:0;
  background:var(--dark-surface-0);
  opacity:var(--hs-veil);
}

/* Retícula de medida: lo que evita que el panel se lea como un color
   plano. Muy por debajo del umbral de "textura"; se nota si falta. */
.hs-veil::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(201,210,216,.05) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(201,210,216,.05) 0 1px, transparent 1px 68px);
  -webkit-mask-image:radial-gradient(78% 68% at 56% 50%,#000 18%,transparent 80%);
  mask-image:radial-gradient(78% 68% at 56% 50%,#000 18%,transparent 80%);
}

/* El fondo respira donde está el cursor. En VALOR, no en color: un
   halo petrol acá se comería la reserva de acento que motion.css
   guarda para la interacción. Lo que se mueve es la profundidad. */
.hs-veil::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 54% at var(--mx,58%) var(--my,46%),
      rgba(19,61,97,.92), rgba(19,61,97,0) 70%),
    radial-gradient(150% 110% at 56% 44%,
      rgba(14,52,84,.55), rgba(11,42,69,0) 68%),
    radial-gradient(120% 96% at 50% 50%,
      rgba(11,42,69,0) 42%, rgba(7,28,47,.72) 100%);
  transition:background-position .3s linear;
}

/* ---- el instrumento -------------------------------------------------
   Las etiquetas son HIJAS del canvas: apilada la sección deja de ser
   sticky y el canvas pasa a ser un bloque del flujo — posicionadas
   contra el stage quedarían proyectadas sobre otra caja. */
.hs-canvas{position:absolute;inset:0;z-index:1;overflow:hidden}
.hs-canvas canvas{
  width:100%;height:100%;display:block;
  opacity:0;transition:opacity .9s var(--ease);
}
/* Cuelga de is-ready —que el motor estampa al construirse— y NO de un
   observer: si el observer tarda, la escena queda perfectamente
   dibujada detrás de un opacity 0 y la sección se ve vacía. */
.hs.is-ready .hs-canvas canvas{opacity:1}

/* El difuminado del cruce. Sólo mientras cruza: un filtro permanente
   sobre un canvas a pantalla completa se paga todos los frames. */
.hs.is-crossing .hs-canvas{
  filter:blur(calc((1 - var(--hs-veil)) * 12px));
}
.hs.is-crossing .hs-labels{opacity:calc(var(--hs-veil) * var(--hs-veil))}

/* ---- etiquetas de nodo --------------------------------------------- */
.hs-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.hs-label{
  position:absolute;top:0;left:0;
  display:block;padding:0;border:0;background:none;
  transform:translate3d(-200px,-200px,0);
  opacity:0;transition:opacity var(--dur-enter) var(--ease);
  cursor:crosshair;
}
/* El nombre sale radialmente hacia afuera del anillo. Tres
   alineaciones —izquierda, centro, derecha— según el cuadrante: es lo
   único que no choca cuando hay doce nombres repartidos en abanico. */
.hs-label__in{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;gap:6px;
  transform:translateY(-50%);
  white-space:nowrap;
}
.hs-label.is-left .hs-label__in{transform:translate(-100%,-50%);flex-direction:row-reverse}
.hs-label.is-mid  .hs-label__in{transform:translate(-50%,-50%)}
.hs-label.is-mid .hs-label__lead{display:none}
.hs-label__lead{
  display:block;width:12px;height:1px;flex:0 0 12px;
  background:var(--hs-fg-3);opacity:.7;
  transition:background var(--dur-micro) var(--ease),width var(--dur-micro) var(--ease);
}
.hs-label__tag{display:flex;align-items:baseline;gap:6px}

/* Los cuatro sectores. Es lo que convierte doce objetos sueltos en
   cuatro familias, y va en tipografía de verdad porque el canvas no
   dibuja texto nunca. */
.hs-sector{position:absolute;top:0;left:0;opacity:0;pointer-events:none}
.hs-sector > span{
  position:absolute;top:0;left:0;transform:translate(-50%,-50%);
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.26em;
  text-transform:uppercase;color:var(--hs-fg-3);
}
.hs-sector b{font-weight:400;color:var(--hs-fg-2)}
.hs-label b{
  font-family:var(--label);font-weight:400;font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hs-fg);
  transition:color var(--dur-micro) var(--ease);
}
.hs-label i{
  font-family:var(--label);font-style:normal;font-size:var(--t-label);
  letter-spacing:.1em;color:var(--hs-fg-3);
}
.hs-label.is-focus b{color:var(--hs-accent)}
.hs-label.is-focus .hs-label__lead{background:var(--hs-accent);width:20px;flex-basis:20px;opacity:1}
.hs-label:focus-visible{outline:none}
.hs-label:focus-visible .hs-label__in{outline:1px solid var(--hs-accent);outline-offset:6px}

/* ============================================================
   La columna de texto
   ------------------------------------------------------------
   TODO el texto vive en un riel a la izquierda. Nada se abre encima
   del instrumento: la ficha de una capa aparece en el mismo lugar
   donde estaba la línea del beat, y ese lugar está fuera del dibujo.
   ============================================================ */
.hs-ui{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;grid-template-columns:minmax(300px,32%) 1fr;
  align-items:center;
  padding:clamp(24px,4vw,56px) var(--gutter);
  max-width:var(--w-wide);margin:0 auto;
}
.hs-ui button{pointer-events:auto}

.hs-rail{
  grid-column:1;
  display:flex;flex-direction:column;gap:clamp(24px,3.4vw,48px);
  max-width:40ch;
}

.hs-kicker{
  display:flex;align-items:center;gap:var(--sp-3);
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--hs-fg-2);
}
.hs-kicker::before{content:"";width:26px;height:1px;flex:0 0 26px;background:var(--hs-accent)}
.hs-statement{
  margin-top:var(--sp-5);
  font-family:var(--display);font-weight:600;
  font-size:var(--t-statement);line-height:.98;letter-spacing:.005em;
  text-transform:uppercase;color:var(--hs-fg);
}
.hs-lead{
  display:grid;margin-top:var(--sp-5);max-width:34ch;
  font-size:var(--t-body-sm);line-height:1.6;font-weight:400;color:var(--hs-fg-2);
}
.hs-lead span{grid-area:1/1}
.hs.is-live .hs-lead span{transition:opacity var(--dur-section) var(--ease)}
.hs-lead span[data-hs-lead="b"]{opacity:0;color:var(--hs-fg)}
.hs.is-resolved .hs-lead span[data-hs-lead="a"]{opacity:0}
.hs.is-resolved .hs-lead span[data-hs-lead="b"]{opacity:1}
.hs-meta{
  margin-top:var(--sp-4);
  font-family:var(--label);font-size:var(--t-caption);letter-spacing:.08em;
  color:var(--hs-fg-3);
}
.hs-meta b{font-family:var(--data);font-weight:500;color:var(--hs-fg-2)}

/* ---- una ranura, dos estados ---------------------------------------
   En reposo dice en qué beat va el relato; con foco, dice la capa.
   Mismo lugar, misma caja, sin nada que se abra encima de nada. */
.hs-readout{
  display:grid;min-height:196px;
  padding-top:var(--sp-6);
  border-top:1px solid var(--hs-line);
}
.hs-readout > *{grid-area:1/1}
.hs.is-live .hs-readout > *{transition:opacity var(--dur-section) var(--ease)}
.hs-beats{display:grid}
.hs-node{opacity:0}
.hs.is-focus .hs-beats{opacity:0}
.hs.is-focus .hs-node{opacity:1}

.hs-step{grid-area:1/1;opacity:0}
.hs.is-live .hs-step{transition:opacity var(--dur-section) var(--ease)}
.hs-step.is-on{opacity:1}
.hs-step__n,.hs-out__shell{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--hs-accent);
}
.hs-out__shell{color:var(--hs-fg-3)}
.hs-step__t{
  margin-top:var(--sp-3);max-width:30ch;
  font-family:var(--display);font-weight:500;font-size:var(--t-h3);
  line-height:1.18;color:var(--hs-fg);
}
.hs-step__k,.hs-out__chain{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-4);
  font-family:var(--label);font-size:var(--t-caption);letter-spacing:.06em;
  color:var(--hs-fg-2);
}
.hs-step__k{color:var(--hs-fg-3)}
.hs-step__k .lbl,.hs-out__chain .lbl{
  font-family:var(--tech);font-weight:400;font-size:var(--t-label);letter-spacing:3px;
  text-transform:uppercase;color:var(--hs-fg-3);
}
.hs-step__k .lbl::after{content:" \2192"}

.hs-out__name{
  margin-top:var(--sp-2);
  font-family:var(--display);font-weight:600;font-size:var(--t-h3);
  letter-spacing:.01em;color:var(--hs-accent);
}
.hs-out__def{
  margin-top:var(--sp-3);max-width:38ch;
  font-size:var(--t-body-sm);line-height:1.55;color:var(--hs-fg-2);
}
.hs-out__chain{
  margin-top:var(--sp-5);padding-top:var(--sp-3);
  border-top:1px solid var(--hs-line);
}
.hs-out__chain span[data-hs-out-chain]{color:var(--hs-fg)}

/* El índice completo es contenido de RESERVA: en la vista viva las
   trece etiquetas ya nombran todo, y una lista más al costado es la
   tarjeta de dashboard que la sección no quiere. */
.hs-index{display:none}

.hs-cue{
  position:absolute;left:50%;bottom:var(--sp-5);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--hs-fg-3);
  transition:opacity var(--dur-section) var(--ease);
}
.hs-cue::after{content:"";width:1px;height:26px;background:linear-gradient(var(--hs-fg-3),transparent)}
.hs.is-focus .hs-cue,.hs.is-resolved .hs-cue{opacity:0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .hs-ui{
    grid-template-columns:1fr;align-items:stretch;
    padding:clamp(20px,6vw,34px) var(--gutter);
  }
  .hs-rail{
    grid-column:1;max-width:none;
    justify-content:space-between;gap:var(--sp-5);
    height:100%;
  }
  .hs-lead{max-width:30ch;margin-top:var(--sp-4)}
  .hs-meta{display:none}
  /* El titular cede altura: en un teléfono cada línea que ocupa arriba
     se la saca al instrumento y a la ficha de abajo. */
  .hs-statement{font-size:clamp(34px,8.8vw,52px);margin-top:var(--sp-4)}
  /* En teléfono la ficha entra entera o no entra: el renglón de la
     cadena es el argumento, y se estaba yendo abajo del pliegue. */
  .hs-readout{min-height:0;padding-top:var(--sp-5)}
  .hs-step__t{max-width:30ch}
  .hs-out__def{max-width:34ch;font-size:var(--t-caption);line-height:1.5}
  .hs-out__chain{margin-top:var(--sp-4);padding-top:var(--sp-3)}
  .hs-out__name{font-size:clamp(20px,5.4vw,26px)}
  /* velo bajo el texto: el instrumento sigue viéndose y el cuerpo
     mantiene contraste */
  .hs-veil::after{
    background:
      radial-gradient(40% 40% at var(--mx,50%) var(--my,44%), rgba(19,61,97,.9), rgba(19,61,97,0) 70%),
      linear-gradient(rgba(11,42,69,.9) 0%, rgba(11,42,69,0) 32%, rgba(11,42,69,0) 46%, rgba(11,42,69,.94) 100%);
  }
  .hs-label b{font-size:var(--t-label);letter-spacing:.14em}
  .hs-label i{display:none}
  /* La barra fija del sitio tapaba el titular: el riel arranca debajo. */
  .hs-ui{padding-top:calc(50px + var(--sp-5))}
  /* En teléfono el disco ya no sangra detrás del texto: el canvas se
     encaja en la banda media y el motor se re-encuadra solo (su
     ResizeObserver observa este host). El anillo queda entre el titular
     y la ficha en vez de pasarles por debajo. is-static no se ve
     afectado: sus reglas llevan más especificidad y ponen inset:auto. */
  .hs-canvas{top:210px;bottom:206px}
  /* El cue "SCROLL" quedaba pisado por la cadena de la ficha. */
  .hs-cue{display:none}
}

/* ============================================================
   Degradación — la copy y las trece capas son CONTENIDO, no un pie
   de foto del canvas.
     · sin JS   -> :not(.is-ready)
     · sin WebGL-> .is-fallback
     · reduced  -> .is-static + la media query
   Apilado, el orden del DOM está al revés: el canvas va primero
   porque tiene que quedar detrás. display:contents lo sube todo a
   hermanos y `order` los pone a leer.
   ============================================================ */
.hs:not(.is-ready) .hs-track,
.hs.is-static .hs-track,
.hs.is-fallback .hs-track{height:auto}

.hs:not(.is-ready) .hs-stage,
.hs.is-static .hs-stage,
.hs.is-fallback .hs-stage{
  position:relative;height:auto;min-height:0;overflow:visible;
  padding:var(--rhythm-section) var(--gutter);
  display:flex;flex-direction:column;
  max-width:var(--w-wide);margin:0 auto;
}
.hs:not(.is-ready) .hs-veil,
.hs.is-static .hs-veil,
.hs.is-fallback .hs-veil{position:absolute;inset:0;opacity:1}
/* Apilada no hay cruce: la sangría no tiene nada que hacer. */
.hs:not(.is-ready)::before,.hs:not(.is-ready)::after,
.hs.is-static::before,.hs.is-static::after,
.hs.is-fallback::before,.hs.is-fallback::after{display:none}
.hs:not(.is-ready) .hs-veil::after,
.hs.is-static .hs-veil::after,
.hs.is-fallback .hs-veil::after{display:none}

.hs:not(.is-ready) .hs-ui,
.hs.is-static .hs-ui,
.hs.is-fallback .hs-ui{position:relative;inset:auto;display:contents}
.hs:not(.is-ready) .hs-rail,
.hs.is-static .hs-rail,
.hs.is-fallback .hs-rail{order:1;max-width:none;gap:var(--sp-7)}
.hs.is-static .hs-canvas{
  order:2;position:relative;inset:auto;
  height:min(58vh,520px);margin-block:var(--sp-8);
}
.hs:not(.is-ready) .hs-canvas,
.hs.is-fallback .hs-canvas{display:none}
.hs:not(.is-ready) .hs-cue,
.hs.is-static .hs-cue,
.hs.is-fallback .hs-cue{display:none}

.hs:not(.is-ready) .hs-lead,
.hs.is-static .hs-lead,
.hs.is-fallback .hs-lead{display:block;max-width:52ch}
.hs:not(.is-ready) .hs-lead span[data-hs-lead="b"],
.hs.is-static .hs-lead span[data-hs-lead="b"],
.hs.is-fallback .hs-lead span[data-hs-lead="b"]{opacity:1}

.hs:not(.is-ready) .hs-beats,
.hs.is-static .hs-beats,
.hs.is-fallback .hs-beats{display:block}
.hs:not(.is-ready) .hs-step,
.hs.is-static .hs-step,
.hs.is-fallback .hs-step{opacity:1;position:relative;margin-top:var(--sp-6)}
.hs:not(.is-ready) .hs-readout,
.hs.is-static .hs-readout,
.hs.is-fallback .hs-readout{display:block;min-height:0}
.hs:not(.is-ready) .hs-node,
.hs.is-static .hs-node,
.hs.is-fallback .hs-node{
  opacity:1;margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid var(--hs-line);max-width:56ch;
}
/* Acá sí: sin canvas, el índice ES el contenido. */
.hs:not(.is-ready) .hs-index,
.hs.is-static .hs-index,
.hs.is-fallback .hs-index{
  order:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  text-align:left;margin-top:var(--sp-8);gap:var(--sp-6);
}
.hs-index__h{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--hs-fg-3);padding-bottom:var(--sp-1);border-bottom:1px solid var(--hs-line);
}
.hs-index ul{list-style:none;margin-top:var(--sp-2);display:grid;gap:2px}
.hs-index li{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hs-fg-2);
}
.hs.is-fallback .hs-labels{display:none}

@media (prefers-reduced-motion:reduce){
  /* Igual que .is-static, pero sin depender de que el JS llegue a
     ponerla: la política vale también si el módulo no carga. */
  .hs{--hs-veil:1}
  .hs-track{height:auto}
  .hs-stage{
    position:relative;height:auto;min-height:0;overflow:visible;
    padding:var(--rhythm-section) var(--gutter);
    display:flex;flex-direction:column;
    max-width:var(--w-wide);margin:0 auto;
  }
  .hs-veil{opacity:1}
  .hs-veil::after{display:none}
  .hs::before,.hs::after{display:none}
  .hs-ui{position:relative;inset:auto;display:contents}
  .hs-rail{order:1;max-width:none;gap:var(--sp-7)}
  .hs-canvas{order:2;position:relative;inset:auto;height:min(58vh,520px);margin-block:var(--sp-8)}
  .hs-canvas canvas{opacity:1;transition:none}
  .hs-cue{display:none}
  .hs-lead{display:block;max-width:52ch}
  .hs-lead span,.hs-label,.hs-step{transition:none}
  .hs-lead span[data-hs-lead="b"]{opacity:1}
  .hs-beats{display:block}
  .hs-step{opacity:1;position:relative;margin-top:var(--sp-6)}
  .hs-readout{display:block;min-height:0}
  .hs-node{opacity:1;margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--hs-line);max-width:56ch}
  .hs-index{
    order:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    text-align:left;margin-top:var(--sp-8);gap:var(--sp-6);
  }
}

/* Rev. D — pictogramas SVG (ver see-beyond.js): trazo vectorial nítido
   sobre la posición proyectada de cada nodo. */
.hs-icos{position:absolute;inset:0;pointer-events:none}
.hs-ico{position:absolute;left:0;top:0;opacity:0;will-change:transform}
.hs-ico svg{display:block;width:100%;height:100%;overflow:visible}
.hs-ico path{fill:none;stroke:var(--hs-fg,#EAF0F3);stroke-width:1.35px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.82;transition:stroke .3s,opacity .3s}
.hs-ico.is-core path{stroke-width:1.6px;opacity:.95}
.hs-ico.is-focus path{stroke:var(--hs-accent);opacity:1}
/* las etiquetas de estrato repetían el índice y pisaban nombres de nodo */
.hs-sector{display:none}
/* IA aplicada, publicable desde el 27·09·2026 */
.hs-ai{margin-top:var(--sp-5);max-width:40ch;font-size:var(--t-caption,13px);line-height:1.55;color:var(--hs-fg-2)}
.hs-ai b{display:block;margin-bottom:4px;font-weight:400;font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--hs-accent)}
@media (max-width:900px){ .hs-ai{display:none} }