/* Órbita: composición de la vista. Fondo casi negro (#0B0B0C) de borde a borde, sólo en este bloque: es una
   excepción al blanco del DS, decidida por la persona (2026-10-26) para esta vista. Lo que vive sobre el negro va
   invertido (texto y anillo del ▶ en papel, secundario en gris claro ≥ 4,5:1, filetes en gris oscuro); el naranja
   sigue sólo para lo activo y el foco del teclado (6,0:1 sobre el negro). La nav, el contacto y el pie no cambian,
   y el globo conserva sus colores (su canvas es transparente: el negro se ve alrededor de la esfera).
   Todo se posiciona en coordenadas de diseño (lienzo 1440 × 810 en escritorio, spec «Composición»; 390 × 788 en
   mobile, el 390 × 844 del spec con el reacomodo vertical de composicion.js) multiplicadas por --escala, que pone
   el JS (ancho del lienzo ÷ ancho de diseño) junto con --fundido (duración del cambio de imagen del foco). Las cartas las posiciona el JS
   (orbita/orbita.js); acá vive lo estático y el aspecto de las cartas. Capas: cartas de atrás 100–150,
   globo 200 (Z_GLOBO, lo pone el JS), cartas de adelante 300–350, foco 700, controles 800–900. */

/* !important: los botones de filtro y otros llevan su propio display, que no puede ganarle a hidden. */
.orbita[hidden], .orbita__aviso[hidden], .orbita [hidden] { display: none !important; }

.orbita {
  /* Coordenadas de diseño. --u es un píxel de diseño ya escalado. Las variables de la composición (--ancho,
     --alto, --globo-*, --indicador-*, --play-*) las pone orbita.js desde composicion.js, que es la
     única fuente; las de acá son el respaldo hasta que corre el módulo (el bloque arranca oculto igual). */
  --orbita-fondo: #0B0B0C;
  --orbita-panel: #141416;      /* el panel de filtros y la pastilla del indicador */
  --orbita-texto: var(--paper);
  --orbita-texto-2: #9A9AA0;    /* secundario: 6,9:1 sobre el fondo y 6,4:1 sobre el panel */
  --orbita-linea: #2C2C31;      /* filetes y bordes de los paneles */
  --orbita-borde: #55555B;      /* borde de los botones de filtro */
  --escala: 1;
  --fundido: 400ms;
  --u: calc(var(--escala) * 1px);
  --ancho: 1440;
  --alto: 810;
  --globo-x: 274; --globo-y: 237; --globo-r: 199;
  --indicador-x: 917; --indicador-y: 682; --indicador-ancho: 400;
  --play-x: 1385; --play-y: 770; --play-d: 52;
  /* El lienzo cabe en lo que queda de la pantalla bajo la nav (sin espacio muerto ni scroll). Sin piso de ancho a
     propósito: con un piso el bloque supera el alto de la pantalla y el ▶/❚❚ (pausa, WCAG 2.2.2) queda cortado
     en notebooks de 1366 × 768 y 1280 × 720. A 1366 el titular del foco de cappy mide ~23 px y se acepta
     (decisión de la persona, 2026-10-26). */
  --caja: min(100%, calc((100svh - var(--nav-alto)) * var(--ancho) / var(--alto)));
  /* El bloque es un hijo directo de <main>, a todo el ancho: el negro va de borde a borde aunque el lienzo
     (notebook) sea más angosto que la pantalla. */
  background: var(--orbita-fondo); color: var(--orbita-texto);
}
@media (max-width: 720px) {
  .orbita {
    /* Reacomodo vertical (composicion.js, MOBILE): lienzo 390 × 788, globo arriba a la izquierda, el foco entre
       el globo y la fila de abajo, que comparten el indicador, el botón «Filtros» y el ▶. */
    --ancho: 390; --alto: 788;
    --globo-x: 105; --globo-y: 92; --globo-r: 80;
    --indicador-x: 16; --indicador-y: 728; --indicador-ancho: 280;
    --play-x: 345; --play-y: 750; --play-d: 44;
    /* A todo el ancho: el foco necesita el ancho para que el titular se lea como en la ficha. */
    --caja: 100%;
  }
}

.orbita__lienzo {
  position: relative; overflow: hidden;
  width: var(--caja); aspect-ratio: var(--ancho) / var(--alto);
  margin: 0 auto;
  background: transparent;
  /* Contexto de apilamiento propio: los z-index de las cartas (hasta 700) no pasan por encima de la nav. */
  isolation: isolate;
}

/* ---------- Globo ---------- */
.orbita__globo {
  position: absolute;
  /* La caja mide 2r / 0,86: crearGlobo dibuja la esfera con radio 0,43 del lado, o sea r. */
  --caja-globo: calc(var(--globo-r) / 0.43);
  left: calc((var(--globo-x) - var(--caja-globo) / 2) * var(--u));
  top: calc((var(--globo-y) - var(--caja-globo) / 2) * var(--u));
  width: calc(var(--caja-globo) * var(--u)); height: calc(var(--caja-globo) * var(--u));
}
.orbita__globo canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.orbita__globo canvas.arrastrando { cursor: grabbing; }
/* Sin WebGL: el nombre del país del caso en foco, en el lugar del globo. */
.orbita__pais-nombre {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: calc(var(--globo-r) * 0.2 * var(--u)); font-weight: 700; line-height: 1.1; color: var(--orbita-texto);
}

/* ---------- Cartas (las posiciona el JS; se apilan sobre el lienzo) ---------- */
.orbita__cartas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
/* El JS pone ancho y alto (base × escala del lienzo) y transform: translate + scale(--s) por carta. */
.orbita__carta { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.orbita__enlace {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  /* 1 px de pantalla a cualquier escala: un filete apenas claro que separa del negro los banners oscuros (sin
     sombras, DS). Puntas redondeadas (decisión de la persona, 2026-10-26): 12 px en pantalla en el foco y, en las
     demás cartas, proporcional a su ancho en pantalla (mínimo 4 px). El JS pone --radio ya dividido por la escala
     de la carta; overflow: hidden recorta el banner y los tableros con la misma curva, y el outline del foco del
     teclado la sigue. */
  border: calc(1px / var(--s, 1)) solid rgba(255, 255, 255, 0.1); border-radius: var(--radio, calc(4px / var(--s, 1)));
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.orbita__enlace:focus-visible { outline: calc(2px / var(--s, 1)) solid var(--orange); outline-offset: calc(3px / var(--s, 1)); }
/* Capas del foco: el banner abajo (siempre a la vista) y un tablero por capa, entero sobre el color de la lámina. */
.orbita__capa { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fundido) var(--ease-out); }
.orbita__capa.es-visible { opacity: 1; }
.orbita__capa img { display: block; width: 100%; height: 100%; }
.orbita__banner { object-fit: cover; }
.orbita__capa--tablero img { object-fit: contain; }

/* ---------- Filtros: un botón a la izquierda del ▶ que abre un panel hacia arriba ---------- */
/* Decisión de la persona (2026-10-26), en escritorio, notebook y mobile: reemplaza el bloque de escritorio (R8/R11)
   y el «Filtros» de arriba en mobile. El botón comparte la fila y el alto del ▶ (mismas fórmulas: arriba en
   play.y − d/2 y alto max(44 px, d × escala)) y su borde derecho queda --hueco-play antes del borde izquierdo del
   ▶. El panel se ancla al borde derecho del botón y crece hacia arriba y hacia la izquierda: nunca pisa el ▶ (está
   arriba de su fila y a su izquierda) y no pasa del borde izquierdo del lienzo. El alto máximo de acá es el
   respaldo (lo que queda del lienzo arriba del botón); filtros-ui.js lo achica a lo que se ve de la pantalla
   bajo la nav. El texto no se escala con el lienzo (R8: ≥ 12 px, botones ≥ 24 px; ≥ 44 px en mobile). */
.orbita {
  --hueco-play: 12px;
  --fila-arriba: calc((var(--play-y) - var(--play-d) / 2) * var(--u));
  /* Con el borde izquierdo del ▶ y no con su ancho: el ▶ se ubica con left = (play.x − d/2) × escala y su
     min-width de 44 px lo agranda hacia la derecha, así que ese borde no se mueve y el hueco es --hueco-play en
     cualquier ancho (12,0 px medidos a 320, donde d × escala da 36 px; filtros_boton exige ≥ 8). */
  --fila-derecha: calc((var(--ancho) - var(--play-x) + var(--play-d) / 2) * var(--u) + var(--hueco-play));
}
.orbita__filtros-boton {
  position: absolute; z-index: 800;
  right: var(--fila-derecha); top: var(--fila-arriba);
  height: max(44px, calc(var(--play-d) * var(--u)));
  display: inline-flex; align-items: center; padding: 0 20px; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1;
  border: 1px solid var(--orbita-texto); border-radius: 999px; background: var(--orbita-panel); color: var(--orbita-texto);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.orbita__filtros-boton:hover, .orbita__filtros-boton[aria-expanded="true"] { background: var(--orbita-texto); color: var(--ink); }
.orbita__filtros-boton:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* «Filtros · 2»: el nombre accesible («Filtros, 2 activos») lo pone el JS. */
.orbita__activos { font-variant-numeric: tabular-nums; white-space: pre; }

.orbita__filtros {
  position: absolute; z-index: 900;
  right: var(--fila-derecha);
  bottom: calc(var(--alto) * var(--u) - var(--fila-arriba) + 8px);
  width: min(400px, calc(var(--ancho) * var(--u) - var(--fila-derecha) - 8px));
  max-height: calc(var(--fila-arriba) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 14px; border: 1px solid var(--orbita-linea); border-radius: 12px;
  background: var(--orbita-panel); color: var(--orbita-texto);
}
.orbita__titulo {
  margin-bottom: 8px;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--orbita-texto-2);
}
.orbita__filtros .filtro { margin-top: 16px; }
.orbita__filtros .filtro:first-of-type { margin-top: 0; }
.orbita__filtros .filtro__botones { display: flex; flex-wrap: wrap; gap: 6px; }
.orbita__filtros .filtro__boton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  padding: 6px 12px; border: 1px solid var(--orbita-borde); border-radius: 999px;
  background: transparent; color: var(--orbita-texto); cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.orbita__filtros .filtro__boton:hover { border-color: var(--orbita-texto); }
.orbita__filtros .filtro__n { font-weight: 400; color: var(--orbita-texto-2); font-variant-numeric: tabular-nums; }
/* Activo: invertido (papel con texto ink), como el ink sobre blanco del resto del sitio. */
.orbita__filtros .filtro__boton[aria-pressed="true"] { background: var(--orbita-texto); border-color: var(--orbita-texto); color: var(--ink); }
.orbita__filtros .filtro__boton[aria-pressed="true"] .filtro__n { color: var(--ink-70); }

/* El país elegido (desde el globo) va en su propia fila, arriba de todo, con el borde naranja de lo activo. */
.orbita__pais {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 16px;
  font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  padding: 6px 12px; border: 1px solid var(--orange); border-radius: 999px;
  background: transparent; color: var(--orbita-texto); cursor: pointer;
}
.orbita__pais::after { content: "×"; font-size: 18px; line-height: 1; }
.orbita__pais:hover { border-color: var(--orbita-texto); }

.orbita__limpiar {
  padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--orbita-texto);
  text-decoration: underline 1px var(--orange); text-underline-offset: 4px;
}
.orbita__limpiar:hover { color: var(--orange); }
.orbita__limpiar:disabled { color: var(--orbita-texto-2); text-decoration-color: var(--orbita-linea); cursor: default; }
/* En el panel, «Limpiar» cierra la lista detrás de un filete. */
.orbita__filtros > .orbita__limpiar {
  display: block; width: 100%; margin-top: 16px; padding: 12px 0 4px; text-align: left;
  border-top: 1px solid var(--orbita-linea);
}

@media (max-width: 720px) {
  .orbita__filtros { padding: 16px 16px 10px; }
  .orbita__filtros .filtro__boton, .orbita__pais { min-height: 44px; padding: 10px 14px; }
  .orbita__limpiar { min-height: 44px; }
}

/* ---------- Indicador del loop ---------- */
/* Sobre el pie del foco (escritorio) o en la fila de abajo (mobile): pastilla oscura, la misma del panel, para
   leerse igual sobre un banner claro y sobre el negro. */
.orbita__indicador {
  position: absolute; display: flex; align-items: center; z-index: 800;
  left: calc(var(--indicador-x) * var(--u)); top: calc(var(--indicador-y) * var(--u));
  max-width: calc(var(--indicador-ancho) * var(--u));
  padding: 0 12px 0 2px; border: 1px solid var(--orbita-linea); border-radius: 999px; background: var(--orbita-panel);
}
/* Cada puntito es un botón de 24 px (WCAG 2.5.8) con el punto de 8 px dibujado adentro; el visible, naranja. */
.orbita__punto {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.orbita__punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6E6E74; transition: background var(--dur) var(--ease-out); }
.orbita__punto:hover::before { background: var(--orbita-texto); }
.orbita__punto[aria-current="true"]::before { background: var(--orange); }
.orbita__punto:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.orbita__imagen { margin-left: 6px; font-size: var(--fs-micro); font-weight: 500; color: var(--orbita-texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Mobile: la fila de abajo la comparten el indicador, «Filtros» y el ▶. Para que entren a 320 con 5 puntitos
   (4 tableros), «Imagen N de M» no se ve (es aria-hidden: cada puntito ya dice «Imagen N de M» y el cambio se
   anuncia) y el ancho de cada puntito va de 24 px a 320 (WCAG 2.5.8) a 32 px a 390. */
@media (max-width: 720px) {
  .orbita__indicador { min-height: 44px; padding-right: 2px; }
  .orbita__imagen { display: none; }
  .orbita__punto { width: clamp(24px, calc(24px + (100vw - 320px) * 8 / 70), 32px); height: 44px; }
}

/* ---------- ▶ / ❚❚ ---------- */
/* Relleno oscuro (el del panel), no transparente: en mobile un hero alto pasa por debajo de la fila y un ▶ hueco
   con anillo papel se pierde sobre un banner blanco. Así se lee igual sobre el negro y sobre la imagen. */
.orbita__play {
  position: absolute; z-index: 800; display: grid; place-items: center; padding: 0; cursor: pointer;
  left: calc((var(--play-x) - var(--play-d) / 2) * var(--u)); top: calc((var(--play-y) - var(--play-d) / 2) * var(--u));
  width: calc(var(--play-d) * var(--u)); height: calc(var(--play-d) * var(--u));
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--orbita-texto); border-radius: 50%; background: var(--orbita-panel); color: var(--orbita-texto);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.orbita__play:hover { background: var(--orbita-texto); color: var(--ink); }
/* Nombre fijo «Reproducción automática»; aria-pressed="true" = en marcha: se ve ❚❚ (dos barras). Detenido, ▶. */
.orbita__play::before { content: ""; width: 0; height: 0; border: solid transparent; border-width: 9px 0 9px 15px; border-left-color: currentColor; margin-left: 3px; }
.orbita__play[aria-pressed="true"]::before { width: 14px; height: 16px; margin-left: 0; border: 0 solid currentColor; border-width: 0 4px; }
.orbita__play:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.orbita__play:disabled { opacity: 0.4; cursor: default; }
.orbita__play:disabled:hover { background: var(--orbita-panel); color: var(--orbita-texto); }

/* ---------- Sin resultados ---------- */
.orbita__vacio {
  position: absolute; z-index: 900; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1); text-align: center;
  font-size: var(--fs-lead); font-weight: 300; color: var(--orbita-texto);
}
.orbita__vacio .orbita__limpiar { margin-top: 0; }

/* ---------- Aviso sin JavaScript ---------- */
.orbita__aviso { padding-top: var(--s-6); padding-bottom: var(--s-6); font-size: var(--fs-lead); font-weight: 300; }
.orbita__aviso p + p { margin-top: var(--s-1); font-size: var(--fs-body); font-weight: 400; color: var(--fg-2); }

/* Movimiento reducido: sin fundidos (el JS además pone --fundido en 0 y los giros son cortes). */
@media (prefers-reduced-motion: reduce) {
  .orbita__capa { transition-duration: 0s; }
}

/* Contraste alto (Windows): el fondo ink del activo se pierde; se marca con borde doble y tilde. */
@media (forced-colors: active) {
  .orbita__filtros .filtro__boton[aria-pressed="true"] { border: 3px double Highlight; }
  .orbita__filtros .filtro__boton[aria-pressed="true"]::before { content: "✓ "; content: "✓ " / ""; }
  .orbita__play, .orbita__filtros-boton { border: 2px solid ButtonText; }
}