/* ============================================================
   SECTORS — puesta en página
   ------------------------------------------------------------
   Misma excepción consciente que see-beyond.css 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/sectors.js, y su CSS
   viaja con él. Una copia pegada en cada página 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.

   EL SUELO CRUZA. 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, vira a Ocean con el scroll y vuelve al salir.
   Todo lo que es texto cruza con él —de tinta a luz— con el mismo
   número que gobierna el suelo: --sct-veil. Es el mismo mecanismo que
   THE HIDDEN SYSTEM; dos secciones que hacen lo mismo tienen que
   hacerlo igual.

   Motor: src/sectors/sectors.js
   ============================================================ */

.sct{
  position:relative;
  /* Sin fondo propio: el suelo de la sección ES el de la página hasta
     que el velo entra. Con un background fijo queda 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. */
  background:transparent;
  border-top:0;
  padding:var(--rhythm-section) var(--gutter);

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

  /* El suelo de la sección es EL MISMO que el del renderizado de las
     piezas: Ocean x 0.22, un negro con la deriva azul de la marca. Así
     el pozo del objeto deja de ser una caja pegada encima y el dibujo
     flota en la sección. Ver src/sectors/theme.js — una sola fuente. */
  --sct-ground:#040A12;
  --sct-ground-2:#081522;

  /* entrada escalonada: cada bloque arranca un poco más tarde que el
     anterior dentro del mismo cruce de suelo */
  --sct-in-0:clamp(0, calc(var(--sct-veil) / .5), 1);
  --sct-in-1:clamp(0, calc((var(--sct-veil) - .06) / .55), 1);
  --sct-in-2:clamp(0, calc((var(--sct-veil) - .18) / .55), 1);
  --sct-in-3:clamp(0, calc((var(--sct-veil) - .30) / .55), 1);

  --sct-fg:     color-mix(in srgb, var(--dark-text)   calc(var(--sct-veil) * 100%), var(--ink));
  --sct-fg-2:   color-mix(in srgb, var(--dark-text-2) calc(var(--sct-veil) * 100%), var(--ink-2));
  /* Steel es legible sobre los dos suelos: el secundario no cruza. */
  --sct-fg-3:   var(--ink-3);
  --sct-accent: color-mix(in srgb, var(--dark-accent) calc(var(--sct-veil) * 100%), var(--orange));
  --sct-line:   color-mix(in srgb, var(--dark-border) calc(var(--sct-veil) * 100%), var(--line));

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

/* ---- la costura con las secciones vecinas --------------------------
   Sin esto el viraje 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 entran en el territorio
   de las vecinas y llevan el degradado hasta cero.

   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.                */
.sct::before,.sct::after{
  content:"";position:absolute;left:0;right:0;height:22vh;
  z-index:0;pointer-events:none;
  opacity:var(--sct-veil);
}
/* Punta blanda: la parada intermedia concentra el oscurecimiento cerca
   del límite. Con un degradado lineal, a mitad del cruce el tinte llega
   al 50% sobre la última línea de texto de la vecina y la enturbia. */
.sct::before{
  top:-22vh;
  background:linear-gradient(to bottom,
    rgba(4,10,18,0) 0%, rgba(4,10,18,.26) 58%, var(--sct-ground) 100%);
}
.sct::after{
  bottom:-22vh;
  background:linear-gradient(to top,
    rgba(4,10,18,0) 0%, rgba(4,10,18,.26) 58%, var(--sct-ground) 100%);
}

/* ---- el suelo -------------------------------------------------------
   Ocean por opacidad sobre el Paper de la página: la interpolación es
   exacta y cuesta una capa compuesta, no un repintado. */
.sct__ground{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 90% at var(--sct-mx,46%) var(--sct-my,42%),
      var(--sct-ground-2) 0%, rgba(8,21,34,0) 62%),
    var(--sct-ground);
  opacity:var(--sct-veil);
}
/* Retícula de medida: lo que evita que el suelo se lea como un color
   plano. Muy por debajo del umbral de "textura"; se nota si falta.

   NO entra de golpe: la máscara se abre con el velo, así el negro
   llega YA MEDIDO en lugar de aparecer como una pared. Y deriva
   despacio, que es lo único que se mueve en el fondo. */
.sct__ground::before{
  content:"";position:absolute;inset:-70px;
  background-image:
    repeating-linear-gradient(0deg,  rgba(201,210,216,.055) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(201,210,216,.055) 0 1px, transparent 1px 68px);
  -webkit-mask-image:radial-gradient(
    calc(30% + var(--sct-veil) * 62%) calc(26% + var(--sct-veil) * 56%)
    at var(--sct-mx,46%) var(--sct-my,44%), #000 8%, transparent 78%);
  mask-image:radial-gradient(
    calc(30% + var(--sct-veil) * 62%) calc(26% + var(--sct-veil) * 56%)
    at var(--sct-mx,46%) var(--sct-my,44%), #000 8%, transparent 78%);
  animation:sct-drift 46s linear infinite;
}
@keyframes sct-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-68px,-68px,0)}
}
/* Grano: lo que impide el banding en un degradado casi negro y le da
   materia al suelo. Una sola capa, sin animación de opacidad. */
.sct__ground::after{
  content:"";position:absolute;inset:0;opacity:calc(var(--sct-veil) * .5);
  background-image:radial-gradient(rgba(201,210,216,.09) .5px, transparent .5px);
  background-size:3px 3px;
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion: reduce){
  .sct__ground::before{animation:none}
}

.sct .shell{position:relative;z-index:1}

/* ---- encabezado ---------------------------------------------------- */
.sct .eyebrow{color:var(--sct-fg-3)}
.sct .mk{
  background:linear-gradient(90deg,
    var(--sct-fg-3) 0 13px, transparent 13px 16px,
    var(--sct-fg-3) 16px 24px, transparent 24px 27px,
    var(--sct-fg-3) 27px 31px, transparent 31px 33px,
    var(--sct-fg-3) 33px 34px);
}
.sct h2{
  font-family:var(--display);font-weight:600;
  font-size:var(--t-h2);line-height:1.06;letter-spacing:-.02em;
  color:var(--sct-fg);max-width:26ch;
}
/* La línea de apoyo cierra lo que el título deja implícito: el estudio no
   levanta la carga. Cruza de suelo con el resto del texto. */
.sct .sub{color:var(--sct-fg-3);max-width:52ch}

/* ---- el texto que se arma ------------------------------------------
   El <h2>/<h3> real NO se reemplaza: se le baja la opacidad y el canvas
   se monta encima con aria-hidden. Sin JS, sin canvas o con el módulo
   caído, el titular sigue ahí y sigue siendo texto indexable. */
/* El texto se apaga en COLOR, no en opacidad: el canvas es hijo del
   titular y una opacidad en el padre lo apagaría también. */
.sct .wf__src{color:transparent}
.wf__canvas{position:absolute;inset:0;pointer-events:none;z-index:1}
.sct h2{position:relative}

/* ---- la sección llega escalonada -----------------------------------
   Un solo número —el velo— mueve el suelo y la entrada de cada bloque,
   con un desfase entre ellos. Nada de observers en cascada: si el suelo
   está a medio cruzar, el contenido está a medio llegar. */
/* El titular ya entra armándose solo, pero además cruza en opacidad con
   el suelo: a mitad del cruce el fondo es gris y un blanco pleno encima
   no se leería. */
.sct h2{opacity:var(--sct-in-0)}
.sct .sub{
  opacity:var(--sct-in-1);
  transform:translate3d(0,calc((1 - var(--sct-in-1)) * 14px),0);
}
.sct__tabs{
  opacity:var(--sct-in-2);
  transform:translate3d(0,calc((1 - var(--sct-in-2)) * 14px),0);
}
.sct__grid,.sct__dots{
  opacity:var(--sct-in-3);
  transform:translate3d(0,calc((1 - var(--sct-in-3)) * 18px),0);
}

/* ---- barra de sectores ---------------------------------------------
   El icono de cada pestaña es la SILUETA DE SU PIEZA, no un pictograma
   del rubro: la barra y el objeto dicen lo mismo.                    */
.sct__tabs{
  position:relative;display:flex;gap:clamp(.5rem,2.2vw,2.4rem);
  margin-top:var(--sp-7);border-bottom:1px solid var(--sct-line);
  overflow-x:auto;scrollbar-width:none;
}
.sct__tabs::-webkit-scrollbar{display:none}
/* el segmento de acento se apoya SOBRE la hairline continua — ref05 */
.sct__ink{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--sct-accent);will-change:transform,width;
}
.sct__tab{
  display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto;
  padding:var(--sp-4) var(--sp-1) var(--sp-4) 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sct-fg-3);white-space:nowrap;
  transition:color var(--dur-enter) var(--ease);
}
.sct__tab:hover{color:var(--sct-fg)}
.sct__tab[aria-current="true"]{color:var(--sct-fg)}
.sct__tab .tile{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-md);
  border:1px solid var(--sct-line);
  display:grid;place-items:center;color:var(--sct-fg-3);
  transition:background var(--dur-enter) var(--ease),
             color var(--dur-enter) var(--ease),
             border-color var(--dur-enter) var(--ease);
}
.sct__tab .tile svg{width:17px;height:17px;display:block}
.sct__tab[aria-current="true"] .tile{
  background:var(--sct-fg);color:var(--dark-surface-0);border-color:var(--sct-fg);
}

/* ---- grilla: el objeto manda, la ficha acompaña -------------------- */
.sct__grid{
  display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);
  gap:clamp(20px,3.2vw,52px);align-items:stretch;
  margin-top:var(--sp-6);
}

.sct__object{margin:0;display:flex;flex-direction:column;min-width:0}
/* El pozo del instrumento es oscuro SIEMPRE, cruce el suelo o no: el
   dibujo es aditivo y necesita un fondo que lo sostenga. Sobre papel
   se lee como una pantalla embutida en la página; sobre Ocean, como un
   pozo más profundo dentro del panel. */
.sct__stage{
  position:relative;flex:1;min-height:clamp(320px,40vw,520px);
  border:1px solid var(--sct-line);border-radius:var(--r-md);
  /* Sin relleno propio: el suelo de la sección YA es el negro del
     renderizado, así que rellenar de nuevo dibujaba una caja pegada
     encima. Queda el halo y la hairline: un pozo, no un panel. */
  background:radial-gradient(90% 70% at 50% 42%,
    rgba(201,210,216,.055) 0%, rgba(201,210,216,0) 70%);
  overflow:hidden;touch-action:pan-y;
  opacity:calc(.45 + var(--sct-veil) * .55);
}
.sct__stage canvas{display:block;width:100%;height:100%}
/* El pie: a la izquierda QUÉ pieza es —y en hover, por dónde se toma—;
   a la derecha lo que cuesta dibujarla. Las dos cifras están MEDIDAS:
   node -e "…" sobre src/sectors/linework.js, ver ese archivo. */
.sct__foot{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-4);padding-top:var(--sp-4);
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sct-fg-3);
}
.sct__foot b{font-weight:400;color:var(--sct-fg-2)}
.sct__spec{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}

/* ---- el slider horizontal ------------------------------------------
   Scroller nativo con scroll-snap. Su scrollLeft es la ÚNICA fuente de
   verdad del morph: el objeto se transforma mientras la ficha se
   desliza y las dos cosas no pueden desincronizarse. Sin JS sigue
   funcionando con trackpad, táctil y teclado.                       */
.sct__slider{
  /* Posicionado a propósito: así el offsetParent de cada ficha es el
     scroller y offsetLeft da el desplazamiento exacto de su página.
     Contra un ancestro cualquiera devuelve la x dentro del shell y el
     salto entre sectores aterriza en el sector equivocado. */
  position:relative;
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.sct__slider::-webkit-scrollbar{display:none}
.sct__slider:focus-visible{outline:2px solid var(--sct-accent);outline-offset:4px}

.sct__card{
  scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;
  will-change:transform,opacity;
}
.sct__k{
  font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--sct-fg-3);
  font-variant-numeric:tabular-nums;
}
/* El titular del sector. Es lo que dice de qué se está hablando cuando
   el ícono no alcanza — y lo que se rearma en partículas al cambiar. */
.sct__name{
  position:relative;margin-top:var(--sp-2);
  font-family:var(--display);font-weight:600;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:-.018em;
  color:var(--sct-fg);
}
.sct__fig{
  margin-top:var(--sp-3);display:flex;align-items:baseline;gap:var(--sp-1);
  font-family:var(--data);font-weight:500;font-size:var(--t-fig-l);
  line-height:1;letter-spacing:-.01em;color:var(--sct-fg);
  font-variant-numeric:tabular-nums;
}
.sct__fig i{font-style:normal;font-size:.5em;color:var(--sct-accent);margin-left:.2em}
/* mono = dato. Un sector sin cifra verificada va en display, no en una
   cifra falsa: Infrastructure publica un alcance, no un tonelaje. */
.sct__fig.nofig{
  font-family:var(--display);font-weight:600;font-size:var(--t-h3);
  line-height:1.15;letter-spacing:-.01em;
}
.sct__rule{border:0;border-top:1px solid var(--sct-line);margin:var(--sp-5) 0}
.sct__body{font-size:var(--t-body-sm);line-height:1.62;color:var(--sct-fg-2)}
.sct__refs{
  font-family:var(--label);font-size:var(--t-label);line-height:1.9;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sct-fg-3);
}
.sct__more{
  margin-top:auto;padding-top:var(--sp-5);align-self:flex-start;
  font-family:var(--label);font-size:var(--t-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sct-accent);
}
.sct__more:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- puntos: la barra de sectores del móvil ------------------------ */
.sct__dots{display:none;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-5)}
.sct__dot{
  width:26px;height:2px;padding:0;border:0;cursor:pointer;
  background:var(--sct-line);transition:background var(--dur-enter) var(--ease);
}
.sct__dot[aria-current="true"]{background:var(--sct-accent)}

/* ---- sin WebGL ------------------------------------------------------
   El motor estampa is-fallback si el contexto no arranca. La sección no
   se cae: se queda sin el objeto y las cinco fichas pasan a ocupar la
   columna entera. La copy es lo que tiene que sobrevivir. */
.sct.is-fallback .sct__object{display:none}
.sct.is-fallback .sct__grid{grid-template-columns:1fr}
/* a columna entera la medida se va a 150 caracteres: se le pone techo */
.sct.is-fallback .sct__card{max-width:64ch}

/* ---- foco visible sobre los dos suelos ----------------------------- */
.sct a:focus-visible,.sct button:focus-visible{outline-color:var(--sct-accent)}

/* ---- responsive ----------------------------------------------------
   Entre 900 y 1120 los cinco nombres no entran a tamaño pleno y la barra
   pasa a scrollear sin decirlo — una barra que se desplaza en silencio es
   una trampa. Se achica el conjunto lo justo para que entre entero.   */
@media (min-width:901px) and (max-width:1120px){
  .sct__tabs{gap:var(--sp-4)}
  .sct__tab{gap:var(--sp-2);font-size:var(--t-label);letter-spacing:.09em}
  .sct__tab .tile{width:26px;height:26px}
  .sct__tab .tile svg{width:15px;height:15px}
}

@media (max-width:900px){
  .sct__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .sct__stage{min-height:clamp(240px,72vw,380px)}
  .sct__dots{display:flex}
  .sct__tab .nm{display:none}
  .sct__tabs{gap:var(--sp-3);justify-content:space-between}
  .sct__foot{flex-direction:column;gap:var(--sp-1)}
  /* la línea de specs mide ~465 px: en una columna de 375 tiene que
     poder cortar, o desborda la página entera */
  .sct__spec{text-align:left;white-space:normal}
}

/* El cruce de suelo es scroll, no animación: no se apaga con
   reduced-motion —congelarlo dejaría texto claro sobre papel—. Lo que
   se apaga es el giro del objeto, y de eso se ocupa el motor. */
@media (prefers-reduced-motion: reduce){
  .sct__slider{scroll-behavior:auto}
}