/* =========================================================================
   P&B V2 — modo mundo.
   Se carga DESPUES de estilos.css y solo actua bajo .con-mundo, que el JS
   pone unicamente cuando el contexto WebGL existe. Sin WebGL no cambia un
   pixel: queda el documento del V1, fotos incluidas.

   Tercera version (2026-09-10). El texto y el mundo NO comparten pixeles.
   La pagina alterna dos cosas:

     ESCENA    un tramo de scroll vacio (.escena) donde solo se ve la sala
               y la camara viaja de una pose a la siguiente
     SECCION   el texto del V1, a todo el ancho, sobre navy opaco, quieto

   Cada seccion queda entre dos escenas: se lee, se sigue bajando, se entra
   a la tienda, se vuelve a leer. Va contando y va frenando.

   Lo que habia antes y por que no: paneles de 46ch flotando sobre el 3D.
   Medido a 1440: la tabla de 778 px scrolleaba adentro de 384, el
   formulario media 0 px y las palancas se dibujaban sobre el mundo sin
   fondo. Los breakpoints de estilos.css miden la VENTANA, no el panel, y a
   1440 nadie colapsaba nada. Al volver al ancho completo, estilos.css vale
   entero otra vez y no hay nada que adaptar.

   No reescribe la hoja: da vuelta los TOKENS.
   ========================================================================= */

.mundo3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.con-mundo {
  /* el papel se vuelve aire: por aca se ve el mundo */
  --paper: transparent;
  --paper-2: rgba(11, 20, 46, .5);

  /* tinta clara. Los tres niveles mantienen la misma jerarquia que en claro */
  --ink: #e9eefb;
  --ink-2: #a4b4d2;
  --ink-3: #97a7c6;

  /* reglas: de linea gris a linea de luz muy baja */
  --rule: rgba(160, 195, 255, .16);
  --rule-2: rgba(160, 195, 255, .08);

  /* la marca tiene que subir de luminancia o desaparece sobre navy */
  --brand: #7aa8f7;
  --cyan-txt: #6ec8ff;
  --brand-05: rgba(120, 170, 255, .07);
  --brand-12: rgba(120, 170, 255, .16);

  /* los dos navys de los bloques de texto. El fondo del mundo es #070c1a;
     el bloque va apenas mas claro para que se lea como papel y no como
     hueco. */
  --bloque: #0a1122;
  --bloque-2: #0d1732;

  /* el html se pinta igual que el mundo: si el navegador sobre-scrollea,
     no aparece blanco */
  background: #070c1a;
}

.con-mundo body {
  background: transparent;
  color: var(--ink);
}

/* El contenido flota: todo lo que era documento pasa a z-index 1, arriba
   del lienzo, que esta en 0. */
.con-mundo main,
.con-mundo .nav,
.con-mundo footer { position: relative; z-index: 1; }

/* ---------- las escenas ----------
   Un div vacio entre bloque y bloque de lectura. Sin WebGL no existe: la
   pagina del V1 no tiene huecos. Con WebGL es el tramo en que la camara
   viaja, y NO hay una escena por seccion: las secciones se agrupan en
   bloques que se leen de corrido.

   El alto lo escribe medirAnclas() en funcion de cuanto viaja la camara.
   Este 110vh es solo el valor con el que se dibuja el primer cuadro,
   antes de que el JS mida. */
.escena { display: none; }
.con-mundo .escena {
  display: block;
  height: 110vh;
  pointer-events: none;
}

/* ---------- nav: vidrio oscuro ---------- */
.con-mundo .nav {
  background: rgba(8, 14, 33, .72);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.con-mundo .nav__marca { color: #cfe0ff; }

/* ---------- hero: la unica pieza que se apoya sobre el mundo ----------
   Es la boca del pasillo. El titular va a la izquierda sobre una cama
   oscura y la camara corre el punto de fuga a la derecha (vp en
   estaciones.js), asi las gondolas no cruzan las letras. */
.con-mundo .hero { background: transparent; }
.con-mundo .hero__fondo { display: none; }   /* fuera el render viejo */
.con-mundo .hero::after { display: none; }   /* la costura vertical partia el titulo */
.con-mundo .hero__caja { position: relative; z-index: 1; }

.con-mundo .hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(5, 10, 24, .82) 100%),
    linear-gradient(100deg,
      rgba(5, 10, 24, .94) 0%,
      rgba(5, 10, 24, .82) 46%,
      rgba(5, 10, 24, .30) 64%,
      transparent 78%);
  pointer-events: none;
}
.con-mundo .hero h1,
.con-mundo .hero__bajada,
.con-mundo .hero__eyebrow,
.con-mundo .juntura__que,
.con-mundo .juntura__rotulo {
  text-shadow: 0 2px 26px rgba(4, 8, 20, .95), 0 1px 4px rgba(4, 8, 20, .9);
}

/* ---------- secciones: opacas, a todo el ancho, el grid del V1 intacto ---------- */
.con-mundo .seccion {
  position: relative;
  background: var(--bloque);
}
.con-mundo .seccion--tinte { background: var(--bloque-2); }

/* El borde del bloque se funde con el mundo en 96 px: al bajar, la sala
   aparece por debajo del texto en vez de cortarse en una linea.
   Solo donde el bloque TOCA una escena. Entre dos secciones pegadas no hay
   nada que fundir, y pintar el degradado ahi lavaria el escalon de color
   entre una seccion con tinte y la de al lado. */
.con-mundo .escena + .seccion::before,
.con-mundo .seccion:has(+ .escena)::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 96px;
  pointer-events: none;
}
.con-mundo .escena + .seccion::before {
  top: -96px;
  background: linear-gradient(to bottom, transparent, var(--bloque));
}
.con-mundo .seccion:has(+ .escena)::after {
  bottom: -96px;
  background: linear-gradient(to top, transparent, var(--bloque));
}
.con-mundo .escena + .seccion--tinte::before {
  background: linear-gradient(to bottom, transparent, var(--bloque-2));
}
.con-mundo .seccion--tinte:has(+ .escena)::after {
  background: linear-gradient(to top, transparent, var(--bloque-2));
}

/* Las seis fotos de stock del V1 no estan en este HTML: la sala es la
   imagen. Con display:none no alcanzaba, Chrome las bajaba al parsear. */

/* ---------- piezas que no salen solas de los tokens ---------- */
.con-mundo .modulo,
.con-mundo .paquete {
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: rgba(255, 255, 255, .03);
}
.con-mundo .modulo:hover { background: rgba(255, 255, 255, .05); }
.con-mundo .ficha,
.con-mundo .hito,
.con-mundo .palanca { background: transparent; }

/* Los bloques de marca conservan los hex del V1: sobre navy, el token
   --brand ya subio de luminancia y el gradiente con texto blanco perderia
   contraste. */
.con-mundo .cifra,
.con-mundo .cruce {
  background: linear-gradient(112deg, #1e3b8b 0%, #164f9c 52%, #0b6db4 100%);
}
.con-mundo .comp thead th { background: #1e3b8b; color: #fff; }
.con-mundo .comp thead th:last-child { background: linear-gradient(100deg, #164f9c, #0b6db4); }
.con-mundo .comp th,
.con-mundo .comp td { border-color: var(--rule); }
.con-mundo .comp tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.con-mundo .comp td:last-child { background: rgba(120, 170, 255, .08); }
.con-mundo .tablazo { background: none; }

.con-mundo .campo input,
.con-mundo .campo textarea,
.con-mundo .campo select {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.con-mundo .campo input::placeholder,
.con-mundo .campo textarea::placeholder { color: var(--ink-3); }

.con-mundo .boton--marca,
.con-mundo .nav__cta { background: #2a63c8; color: #fff; }
.con-mundo .boton--linea { border-color: var(--rule); color: var(--ink); }
.con-mundo .aviso { background: rgba(255, 255, 255, .04); }

.con-mundo .pie { background: #060b1a; }

/* ---------- el contador, solo con ?fps en la URL ----------
   Lo crea el JS. Sirve para leer los cuadros por segundo en la maquina y en
   el telefono de verdad, que es donde el numero significa algo. */
.medidor3d {
  position: fixed;
  left: 10px; bottom: 10px;
  z-index: 99;
  background: rgba(4, 8, 20, .88);
  border: 1px solid rgba(160, 195, 255, .3);
  border-radius: 4px;
  padding: 7px 10px;
  font: 500 11px/1.3 var(--mono);
  color: #9ed6ff;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- si el visitante pide menos movimiento ----------
   El JS dibuja un cuadro por escena, sin inercia. Aca solo se apaga el
   blur, que en ese modo es puro costo. */
@media (prefers-reduced-motion: reduce) {
  .con-mundo .nav { backdrop-filter: none; }
}

@media print {
  .mundo3d, .escena { display: none !important; }
}