/* ═══════════════════════════════════════════════════════════════════════
   PANTALLA PARTIDA · 3-sep-2026

   Estructura de Build in Amsterdam: una mitad fija con la identidad y la
   experiencia, otra mitad que hace scroll y vende. Dirección visual de
   Qianhuage: el territorio y la tipografía son la misma interfaz. Motor,
   el viaje de mayo.

   La regla que ordena todo: **la derecha manda**. El mundo no compite con
   la venta, reacciona a ella. Por eso el globo es sticky y no fixed: vive
   dentro del flujo, no encima de él.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --barra: 70px;          /* alto del topbar en escritorio */
  --barra-movil: 58px;
}

/* La columna del mundo es oscura por definición, así que se pinta oscura
   ella y no solo su contenido. Sin esto, cualquier hueco que deje el motor
   —y en una máquina sin WebGL el motor deja hueco— enseña papel y el HUD,
   que es texto claro, se queda ilegible encima. */
.dual__mundo{ background:#0a0a0a; color:#f3efe7; }

/* ── Escritorio ─────────────────────────────────────────────────────── */
@media (min-width: 1024px){
  .dual{
    display: grid;
    /* Venta a la izquierda, mundo a la derecha. Orden de Julián del 3-sep.
       Build in Amsterdam lo hace al revés —medio a la izquierda, palabra a
       la derecha— y esto es deliberadamente lo contrario: en castellano se
       lee primero y el espectáculo queda de premio al final de la línea. */
    grid-template-columns: 55fr 45fr;
    align-items: start;
    gap: 0;
  }
  /* La FILA hay que fijarla, no solo la columna. Al colocar el mundo en la
     columna 2 el cursor de la rejilla avanza, y la venta —que va después en
     el HTML— pedía la columna 1 y aterrizaba en la fila 2, debajo del mundo
     y fuera de la pantalla. Con la fila fija las dos comparten la primera. */
  .dual__venta{ grid-column: 1; grid-row: 1; }
  .dual__mundo{ grid-column: 2; grid-row: 1; }

  /* Sticky y no fixed: así respeta el footer y no se le monta encima al
     llegar abajo, que es el fallo clásico de este patrón. */
  .dual__mundo{
    position: sticky;
    top: var(--barra);
    height: calc(100svh - var(--barra));
    align-self: start;
  }
  .dual__mundo #viaje{
    height: 100%;
    min-height: 0;
  }

  .dual__venta{ min-width: 0; }   /* sin esto el grid no deja encoger y el
                                     contenido ancho desborda la columna */

  /* El catálogo vivía a 1320px de ancho centrado. Dentro de una columna del
     55% eso deja de tener sentido: manda la columna. */
  .dual__venta .tienda,
  .dual__venta .bundle,
  .dual__venta .faq{
    max-width: none;
    padding-left: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }

  /* Con la mitad de ancho, la rejilla de guías va a dos columnas, no a
     cuatro, y la pieza líder deja de ser apaisada: no le cabe. */
  .dual__venta .rejilla{
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  }
  .dual__venta .gcard.gcard--ancla{
    grid-template-columns: minmax(0, clamp(180px, 20vw, 240px)) minmax(0, 1fr);
  }
}

/* ── Móvil y tableta ────────────────────────────────────────────────── */
/* Aquí no hay mundo. Lo hubo hasta el 4-sep-2026, encogiéndose al scroll, y
   medido en producción resultó ser el peor problema de la web en el teléfono:

     · 464 px de mapa sobre 800 de pantalla, más 61 de barra: 66% ocupado
     · la promesa no aparecía hasta el pixel 525, por debajo del pliegue
     · encima del mapa, la lista de Nodos Académicos tapaba media pantalla
       con seis universidades, y debajo asomaba "Germán Ceo" ilegible
     · 6,2 MB por visita, 4 de ellos en fotos de campus

   El globo es de Julián y en escritorio no se toca ni un pixel. Pero en un
   teléfono la portada la abre la promesa. La regla de la casa vale también
   para esto: una sola verdad por pantalla, y en móvil la verdad es lo que
   vendes, no de dónde salió la investigación.

   El display:none es la mitad barata. La que cuenta está en index.html: el
   motor no se pide por debajo de 1024, así que no baja ni un byte. */
@media (max-width: 1023px){
  .dual__mundo{ display: none; }
  .dual__venta{ position: relative; z-index: 1; }
}

/* Quien pide menos movimiento no quiere un mundo encogiéndose al scroll. */
@media (prefers-reduced-motion: reduce){
  .dual__mundo #viaje{ transition: none; }
}