/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE ORBIT V4 CSS — imágenes siempre de frente,
   composición circular con perspectiva real (proyección JS).
   El anillo se ve como una elipse inclinada en el espacio.
   Imágenes de abajo: grandes y cercanas.
   Imágenes de arriba: pequeñas y lejanas.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Cargo override ── */
.page, .page-layout, .page-content, bodycopy {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  height: auto !important;
  contain: none !important;
}

/* ── 2. Nav transparente ── */
#jgp-nav {
  position: fixed !important;
  background: transparent !important;
  border-bottom: none !important;
}

/* ── 3. Escena — sin perspective CSS, la profundidad la calcula el JS ── */
#jgp-home-orbit {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #fff;
  overflow: hidden;
}

/* ── 4. Ancla de la órbita externa ── */
#jgp-orbit-anchor {
  position: absolute;
  width: 0;
  height: 0;
}

/* ── 5. Elemento del anillo — posición y escala via JS ── */
.jgp-orb-item {
  position: absolute;
  width: 0;
  height: 0;
}

/* ── 6. Cara de la imagen — siempre de frente ──
   Sin ningún rotateX/Y: la imagen no gira,
   solo se traslada y escala según su posición en el anillo. ── */
.jgp-orb-face {
  position: absolute;
  width: 18vmin;
  height: 13.5vmin;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #ddd;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.20),
    0 1px 4px  rgba(0, 0, 0, 0.10);
}

/* ── 7. Bio — comparte el mismo contexto de apilamiento que el
   anillo (ver comentario en el html). Todo el párrafo en Neue Haas
   Grotesk, a diferencia del resto del sitio (EB Garamond en cuerpo de
   texto) — decisión explícita para esta pieza. Toggle ES/EN 100% CSS
   (checkbox + label): funciona igual con hover o con tap, sin JS.
   Escritorio: el texto ocupa solo las columnas 1-6 de la grilla de 12
   (mismo padding lateral de 20px que el nav → la mitad del ancho útil).
   Móvil: ancho completo. */
.jgp-orbit-bio {
  position: absolute;
  z-index: 0;
  left: 20px;
  width: calc((100% - 40px) / 2);
  bottom: 40px;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.15;
  color: #000;
}

.jgp-orbit-bio p {
  margin: 0;
}

.jgp-orbit-lang-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Botón de idioma: mismo estilo de siempre (gris, "(EN)" al final del
   párrafo), solo más grande: 16px. Sin vertical-align ni line-height
   extra para que no agrande la línea. El texto lo pone el CSS con
   ::before, no el HTML — así Cargo no puede vaciarlo al guardar. */
.jgp-orbit-lang-tag {
  display: inline;
  margin-left: 6px;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.jgp-orbit-bio-es .jgp-orbit-lang-tag::before { content: "(EN)"; }
.jgp-orbit-bio-en .jgp-orbit-lang-tag::before { content: "(ES)"; }
.jgp-orbit-lang-tag:hover { color: rgba(0, 0, 0, 0.7); }

.jgp-orbit-bio-en { display: none; }
.jgp-orbit-lang-input:checked ~ .jgp-orbit-bio-es { display: none; }
.jgp-orbit-lang-input:checked ~ .jgp-orbit-bio-en { display: block; }

/* ── 8. Mobile ── */
@media (max-width: 768px) {
  .jgp-orb-face {
    width: 26vmin;
    height: 19.5vmin;
  }

  .jgp-orbit-bio {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 24px;
    font-size: 14px;
  }
}
/* ── LOGO MINISTERIO — columnas 1-2, justo encima del texto de la bio ── */
.jgp-orbit-logo {
  position: absolute;
  left: 20px;
  bottom: 160px;
  width: calc((100% - 40px) / 6);
  max-width: 120px;
  opacity: 0.7;
  z-index: 1;
}

.jgp-orbit-logo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 947 / 268;
}

@media (max-width: 768px) {
  .jgp-orbit-logo {
    left: 12px;
    top: 40px;
    width: calc((100% - 24px) / 4);
    max-width: 200px;
    opacity: 0.7;
  }
}

.jgp-orb-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; }
.jgp-orbit-logo img { display: block; width: 100%; height: auto; }
/* Logo dentro del bloque de la bio, en el flujo: queda justo arriba del
   texto sin importar la altura real del párrafo. */
.jgp-orbit-bio .jgp-orbit-logo { position: static; left: auto; right: auto; top: auto; bottom: auto; width: 260px; max-width: 100%; margin: 0 0 14px 0; }
.jgp-orbit-bio .jgp-orbit-logo img { width: 100%; height: auto; }
@media (max-width: 768px) {
  .jgp-orbit-bio .jgp-orbit-logo { width: 220px; }
}