/* ---------------------------------------------------------
   PROYECTOS · GLOBO
   Título arriba, globo protagonista, resumen de cifras abajo.
   La ficha solo aparece al seleccionar un destino.
   --------------------------------------------------------- */
.pj {
  position: relative; overflow: clip;
  padding: clamp(80px, 12vh, 140px) 0 clamp(72px, 11vh, 128px);
  background: var(--night);
}
.pj-head, .pj-sum { width: min(1400px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ---- Cabecera: título a la izquierda, entrada y pista a la derecha ---- */
.pj-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.pj-head .sec-title { margin: 0; max-width: 17ch; }
.pj-intro .sec-lead { max-width: 40ch; }
.pj-hint { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .9rem; line-height: 1.4; color: var(--zinc-400); }
.pj-hint svg { flex: none; width: 18px; height: 18px; }
.pj-hint circle:first-child { fill: none; stroke: var(--zinc-200); stroke-width: 1.4; }
.pj-hint circle:last-child { fill: var(--zinc-50); }

/* ---- Escenario del globo ---- */
.pj-stage {
  --g: min(860px, 92vw, 78vh);
  position: relative; margin-top: clamp(4px, 1.5vh, 20px);
}
@supports (height: 1svh) { .pj-stage { --g: min(860px, 92vw, 78svh); } }
.pj-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: calc(var(--g) * 1.45); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(14, 58, 110, .55), rgba(14, 58, 110, .18) 55%, rgba(14, 58, 110, 0));
  pointer-events: none;
}
.pj-stage canvas {
  position: relative; z-index: 1; display: block;
  width: min(100%, calc(var(--g) * 1.6)); height: var(--g); max-width: none; margin: 0 auto;
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.pj-stage canvas.is-drag { cursor: grabbing; }
.pj-stage canvas.is-pin { cursor: pointer; }

/* Equivalente accesible de los pines: botones fuera de pantalla.
   El foco se hace visible en el propio globo (anillo y nombre). */
.pj-sr { position: absolute; left: 50%; top: 40%; z-index: 0; margin: 0; padding: 0; list-style: none; }
.pj-sr button {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: none; color: inherit;
}

/* ---- Ficha del proyecto ---- */
.pj-card {
  position: absolute; z-index: 3;
  left: max(var(--gutter), calc(50% - var(--g) * .5 - 96px));
  bottom: calc(var(--g) * .07);
  width: min(380px, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: 124px minmax(0, 1fr);
  border-radius: 6px; overflow: hidden;
  background: rgba(5, 22, 42, .95); border: 1px solid rgba(241, 244, 246, .18);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
  clip-path: inset(100% 0 0 0 round 6px); opacity: 0; visibility: hidden;
  transition: clip-path .2s var(--ease-out), opacity .18s ease, visibility 0s linear .2s;
}
.pj-card.is-on {
  clip-path: inset(0 0 0 0 round 6px); opacity: 1; visibility: visible;
  transition: clip-path .28s var(--ease-out), opacity .16s ease, visibility 0s;
}
.pj-card[hidden], .pj-ph[hidden], .pj-f[hidden] { display: none; }
.pj-card.no-ph { grid-template-columns: minmax(0, 1fr); }
.pj-card:focus { outline: none; }
.pj-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.pj-ph { position: relative; overflow: hidden; background: var(--navy); min-height: 168px; }
.pj-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform .5s var(--ease-out); }
.pj-card.is-on .pj-ph img { transform: none; }

.pj-body { display: flex; flex-direction: column; padding: 14px 14px 12px 16px; min-width: 0; }
.pj-name {
  margin: 0 30px 3px 0;
  font-family: var(--font-display); font-stretch: 96%; font-weight: 640; font-size: 1.08rem; line-height: 1.18;
  letter-spacing: -.005em; color: #fff; text-wrap: pretty;
}
.pj-where { margin: 0; font-size: .86rem; line-height: 1.35; color: var(--zinc-300); }
.pj-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 10px 22px;
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--hair);
}
.pj-f-route { grid-column: 1 / -1; }
.pj-facts dt { font-size: .8rem; line-height: 1.3; color: var(--zinc-400); }
.pj-facts dd {
  margin: 2px 0 0; font-family: var(--font-display); font-stretch: 92%; font-weight: 600; font-size: 1rem; line-height: 1.2;
  color: var(--zinc-50); font-variant-numeric: tabular-nums;
}
.pj-nav { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 10px; }

.pj-btn {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 4px; cursor: pointer;
  background: rgba(4, 20, 39, .6); border: 1px solid rgba(241, 244, 246, .2); color: var(--zinc-200);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pj-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pj-x { position: absolute; top: 9px; right: 9px; }
@media (hover: hover) and (pointer: fine) {
  .pj-btn:hover { background: rgba(241, 244, 246, .1); border-color: rgba(241, 244, 246, .45); color: #fff; }
}

/* ---- Resumen de cifras ---- */
.pj-sum {
  list-style: none; padding: 0; margin-top: clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(4, minmax(0, 1fr)); column-gap: 24px;
  border-top: 1px solid var(--hair);
}
.pj-s { position: relative; padding: 20px 0 0; }
.pj-s::before { content: ""; position: absolute; left: 0; top: -1px; width: 1px; height: 9px; background: var(--zinc-300); }
.pj-n {
  display: block; white-space: nowrap;
  font-family: var(--font-display); font-weight: 620; font-stretch: 100%;
  font-size: clamp(2.5rem, 1.5rem + 2.7vw, 4.4rem); line-height: .92; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.pj-u { margin-left: .14em; font-size: .52em; font-weight: 560; letter-spacing: 0; color: var(--zinc-300); }
.pj-l { display: block; margin-top: 10px; max-width: 16ch; font-size: .92rem; line-height: 1.35; color: var(--zinc-300); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .pj-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pj-head .sec-title { max-width: 20ch; }
  .pj-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; border-top: 0; }
  .pj-s { border-top: 1px solid var(--hair); }
  .pj-s-wide { grid-column: 1 / -1; }
  .pj-card {
    position: relative; left: auto; bottom: auto; width: auto;
    margin: 14px var(--gutter) 0;
  }
}
@media (max-width: 560px) {
  .pj-card { grid-template-columns: 104px minmax(0, 1fr); }
  .pj-ph { min-height: 156px; }
  .pj-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; }
  .pj-s-wide { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-card, .pj-card.is-on { clip-path: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  .pj-card.is-on { transition: opacity .2s ease, visibility 0s; }
  .pj-ph img, .pj-card.is-on .pj-ph img { transform: none; transition: none; }
}

/* ---- Escritorio: todo en una pantalla (texto y cifras a la izquierda, globo a la derecha) ---- */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .pj {
    display: grid;
    grid-template-columns: minmax(330px, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(24px, 3vw, 56px);
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--header-h) + clamp(18px, 4vh, 48px)) max(var(--gutter), calc((100% - 1400px) / 2)) clamp(24px, 4vh, 48px);
    align-items: start;
  }
  .pj-head, .pj-sum { width: auto; margin-inline: 0; }
  .pj-head { grid-column: 1; grid-row: 1; display: block; position: relative; z-index: 2; }
  .pj-head .sec-title { max-width: 14ch; font-size: min(clamp(1.9rem, 1rem + 1.9vw, 3rem), 5.6vh); }
  .pj-intro .sec-lead { font-size: min(1.05rem, 2.1vh); }
  .pj-intro { margin-top: clamp(14px, 2.4vh, 24px); }
  .pj-sum {
    grid-column: 1; grid-row: 3; margin-top: 0; position: relative; z-index: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: clamp(14px, 2.4vh, 24px);
    border-top: 0;
  }
  .pj-s { border-top: 1px solid var(--hair); padding-top: clamp(12px, 1.8vh, 18px); }
  .pj-s-wide { grid-column: 1 / -1; }
  .pj-n { font-size: min(clamp(2rem, .9rem + 2.2vw, 3.4rem), 6.2vh); }
  .pj-s:not(.pj-s-wide) .pj-n { font-size: min(clamp(1.7rem, .8rem + 1.6vw, 2.6rem), 4.6vh); }
  .pj-l { font-size: min(.92rem, 1.8vh); }
  .pj-l { margin-top: 6px; }
  .pj-stage {
    grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0;
    --g: min(820px, 52vw, calc(100vh - var(--header-h) - 64px));
  }
  @supports (height: 1svh) { .pj-stage { --g: min(820px, 52vw, calc(100svh - var(--header-h) - 64px)); } }
  .pj-stage canvas { width: min(100%, calc(var(--g) * 1.25)); }
  .pj-card { left: 0; bottom: 4%; }
}
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) and (max-height: 820px) {
  .pj { padding-top: calc(var(--header-h) + 14px); padding-bottom: 14px; }
  .pj-intro { margin-top: 10px; }
  .pj-hint { margin-top: 6px; }
  .pj-sum { row-gap: 8px; }
  .pj-s { padding-top: 8px; }
}