/* ============================================================
   BRAND JUNGLE — RONDA 40 · SECCIONES
   Segunda hoja de la ronda (se carga después de round40.css):
   la placa de las tarjetas del tornado, el grafo del
   glosario, el globo, el dashboard de la plataforma y el hueco
   del dock. Misma escalera: phone ≤719 · tablet 720–1023 ·
   desktop ≥1024.
   ============================================================ */


/* ------------------------------------------------------------
   1 · TORNADO — la hélice 3D en todos los anchos
   tornado.js la monta en escritorio, tablet y móvil (el carril
   plano que tuvo esta ronda fuera de escritorio se retiró: Joel
   quiso el tornado de vuelta). En ≤899 mandan además las reglas
   de round36.css (tarjetas opacas, ancho min(58vw,240px)).
------------------------------------------------------------- */

/* El cristal de las doce tarjetas se retira (doce backdrop-filter
   a la vez) y la opacidad deja de tener transición, porque tornado.js la
   escribe en cada frame y el navegador reiniciaba la transición 60 veces
   por segundo. La tarjeta iluminada conserva su desenfoque: es una sola. */
.tornado.is-live .tornado-card {
  /* Placa más cubriente: sin el desenfoque, la tarjeta de delante tiene que
     TAPAR el texto de las de atrás (preserve-3d ordena por profundidad real) */
  background-color: rgba(16, 20, 2, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

/* Las de atrás bajan el texto, no la placa: así ocultan y no deslumbran */
.tornado.is-live .tornado-card:not(.is-front):not(.is-lit) .tornado-quote,
.tornado.is-live .tornado-card:not(.is-front):not(.is-lit) .tornado-fix {
  opacity: calc(0.35 + var(--depth, 0.5) * 0.65);
}

.tornado.is-live .tornado-card.is-lit {
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}


/* ------------------------------------------------------------
   2 · GLOSARIO — el tag vuelve a ser opaco
   round36.css §15 lo dejó transparente y las curvas cruzaban el
   texto. La luz de la línea muere en el canto, como quería §15,
   y la píldora tapa lo que pasa por detrás.
------------------------------------------------------------ */
.gr-item span { background-color: rgba(12, 15, 1, 0.92); }
.gr-item--out span { background-color: rgba(24, 30, 3, 0.94); }

/* Tablet (900–1023 no tenía respuesta: tres columnas de 255px con los
   tags partidos). Se usa la disposición apilada que ya existía a ≤899. */
@media (min-width: 900px) and (max-width: 1023px) {
  .gr-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  .gr-lines { display: block; }

  .gr-col {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 100%;
  }

  .gr-col--out { text-align: center; padding-top: 0.5rem; }

  .gr-head {
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 0.25rem;
  }

  .gr-col--out .gr-head {
    margin-top: clamp(1.25rem, 5vw, 2rem);
    order: -1;
  }

  .gr-item { display: inline-flex; }

  .gr-item span {
    padding: 0.5rem 0.8125rem;
    font-size: 0.75rem;
    white-space: normal;
  }

  .gr-core {
    display: grid;
    place-items: center;
    position: relative;
    min-height: clamp(150px, 42vw, 200px);
    padding: 0.5rem 0;
  }

  .gr-logo {
    position: relative;
    z-index: 2;
    width: 84px;
    margin: 0;
    place-self: center;
  }

  .gr-hexcard {
    top: 50%;
    left: 50%;
    width: clamp(104px, 30vw, 140px);
    transform: translate(-50%, -50%);
  }
}


/* ------------------------------------------------------------
   3 · GLOBO — caja cuadrada también en apaisado
   round36.css ya centra la esfera (SVG al 70%, carril del 15%) y
   monta el anillo móvil; lo que quedaba mal era el
   max-height:78vh de desktop: con aspect-ratio 1/1 la caja no
   puede cumplir las dos cosas y en un tablet apaisado se aplastaba,
   con los conceptos cayendo dentro de la esfera. La altura manda y
   el ancho se deriva de ella.
------------------------------------------------------------ */
@media (min-width: 900px) {
  .ecosystem .globe-stage {
    width: min(100%, 1120px, 78vh);
    max-height: none;
    aspect-ratio: 1 / 1;
  }
}


/* ------------------------------------------------------------
   4 · PLATAFORMA — el dashboard mide su panel más alto
   round40.js escribe --pf-h en [data-dashboard] con la altura
   del panel más alto; el marco no salta al cambiar de pestaña y
   ningún panel queda recortado. Las alturas fijas (36vw / 600px
   medidos a mano) dejan de mandar.
------------------------------------------------------------ */
#platform .pf-body,
#plataforma .pf-body {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* min-height, no height: en desktop la barra lateral (10 pestañas) es
   más alta que el panel más alto, y el marco debe ser el mayor de los dos;
   el panel activo estira (height:100%) y la gráfica crece con él. */
#platform .pf-main,
#plataforma .pf-main {
  height: auto;
  min-height: var(--pf-h, 0px);
  overflow: hidden;
}

/* Un solo panel visible → una sola fila que llena el marco (platform.css
   deja el grid con align-content:start y el panel no estiraba) */
#platform .pf-main,
#plataforma .pf-main {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

#platform .pf-panel,
#plataforma .pf-panel {
  height: auto;
  align-self: stretch;
  overflow: hidden;
}

/* Tablet y móvil: la barra lateral pasa a ser un carril de pestañas */
@media (max-width: 1023px) {
  #platform .pf-body,
  #plataforma .pf-body { grid-template-columns: 1fr; }

  #platform .pf-nav,
  #plataforma .pf-nav {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--pf-hair);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #platform .pf-nav::-webkit-scrollbar,
  #plataforma .pf-nav::-webkit-scrollbar { display: none; }

  #platform .pf-brand,
  #plataforma .pf-brand {
    flex: none;
    padding-right: 0.875rem;
    border-right: 1px solid var(--pf-hair);
    white-space: nowrap;
  }

  #platform .pf-tabs,
  #plataforma .pf-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    width: max-content;
    margin: 0;
    padding: 0;
  }

  #platform .pf-tab,
  #plataforma .pf-tab {
    flex: none;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}


/* ------------------------------------------------------------
   5 · DOCK — hueco real en todos los tiers
   --dock-h la mide viewport40.js (alto + separación del borde).
   Antes sólo había hueco a ≤719 y el pie nunca lo tuvo.
------------------------------------------------------------ */
main > section:last-of-type {
  padding-bottom: calc(var(--space-band-lg) + var(--dock-h) * 0.5);
}

body .site-footer {
  padding-bottom: calc(1.5rem + var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

.dock {
  bottom: calc(clamp(0.875rem, 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
}

.chat-panel {
  bottom: calc(var(--dock-h) + 0.5rem);
  max-height: min(540px, calc(var(--dvh) - var(--dock-h) - 2rem));
}


/* ------------------------------------------------------------
   6 · AURORA DE LA PLATAFORMA
   aurora.css la dejó fuera de las listas de reduced-motion y de
   desenfoque reducido en móvil.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #platform::before,
  #plataforma::before {
    animation: none;
    will-change: auto;
  }
}

@media (max-width: 719px) {
  #platform::before,
  #plataforma::before { filter: blur(38px) saturate(1.25); }
}