/* ═══════════════════════════════════════════════════════════════════
   RIVEL · THEATRE
   BlueYard craft on the RIVEL field: type over atmosphere,
   numbered chapters, progress as instrument. Not a cream clone.
   Scope: #problem → #proof. Pins on 003/004 stay untouched.
   ═══════════════════════════════════════════════════════════════════ */

.hps-theatre {
  --theatre-ink: rgba(232, 237, 242, .72);
  --theatre-mute: rgba(232, 237, 242, .38);
  --theatre-hair: rgba(255, 255, 255, .1);
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .62s cubic-bezier(.16, 1, .3, 1), visibility .62s;
}
.hps-theatre.is-on {
  opacity: 1;
  visibility: visible;
}

.hps-theatre__progress,
.hps-theatre__index,
.hps-theatre__chapters {
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--theatre-ink);
}

.hps-theatre__progress {
  position: absolute;
  top: 5.6rem;
  right: clamp(1rem, 3vw, 2.25rem);
  margin: 0;
  font-size: .62rem;
  font-weight: 400;
  color: rgba(232, 237, 242, .42);
}
.hps-theatre__progress [data-theatre-pct] {
  color: #fff;
}

.hps-theatre__index {
  position: absolute;
  bottom: 1.15rem;
  right: clamp(1rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .62rem;
}
.hps-theatre__index i {
  display: block;
  width: 1.6rem;
  height: 1px;
  background: var(--theatre-hair);
}
.hps-theatre__live {
  color: #fff;
  letter-spacing: .2em;
}
.hps-theatre__live::before {
  content: '';
  display: inline-block;
  width: .38rem;
  height: .38rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  vertical-align: .05em;
  animation: hpsTheatreLive 1.8s ease-in-out infinite;
}
@keyframes hpsTheatreLive {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

.hps-theatre__chapters {
  position: absolute;
  top: 50%;
  left: clamp(.7rem, 2vw, 1.4rem);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  pointer-events: none;
  transition: opacity .48s cubic-bezier(.16, 1, .3, 1), visibility .48s;
}
.hps-theatre.is-on .hps-theatre__chapters {
  pointer-events: auto;
}
.hps-theatre__chapters a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding-left: .55rem;
  color: var(--theatre-mute);
  text-decoration: none;
  font-size: .58rem;
  transition: color .35s cubic-bezier(.16, 1, .3, 1);
}
.hps-theatre__chapters a::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .15em;
  width: 1px;
  background: transparent;
  transition: background .35s cubic-bezier(.16, 1, .3, 1);
}
.hps-theatre__chapters a span {
  color: inherit;
}
.hps-theatre__chapters a[aria-current="true"] {
  color: #fff;
}
.hps-theatre__chapters a[aria-current="true"]::before {
  background: #fff;
}
.hps-theatre.is-relation .hps-theatre__chapters,
.hps-theatre.is-relation .hps-theatre__progress,
.hps-theatre.is-relation .hps-theatre__index {
  opacity: .34;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1);
}
.hps-theatre.is-system .hps-theatre__chapters,
.hps-theatre.is-system .hps-theatre__progress,
.hps-theatre.is-system .hps-theatre__index {
  opacity: .55;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1);
}
.hps-theatre.is-copy-left .hps-theatre__chapters {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#what-is-rivel.hps-axiom-sec,
#loop.hps-loop-sec,
#founder-venture.hps-stack-sec {
  isolation: isolate;
}
#what-is-rivel .hps-axiom-sec__stage,
#loop .hps-loop-sec__stage,
#founder-venture .hps-stack-sec__stage {
  opacity: 1;
  visibility: visible;
  transition: opacity .88s cubic-bezier(.16, 1, .3, 1) .1s, visibility .88s .1s;
}
#what-is-rivel .hps-axiom,
#loop .hps-loop,
#founder-venture .hps-stack {
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform .88s cubic-bezier(.16, 1, .3, 1) .1s;
}
#what-is-rivel.is-chapter-away,
#loop.is-chapter-away,
#founder-venture.is-chapter-away {
  z-index: 0;
}
#what-is-rivel.is-chapter-away .hps-axiom-sec__stage,
#loop.is-chapter-away .hps-loop-sec__stage,
#founder-venture.is-chapter-away .hps-stack-sec__stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), visibility .72s;
}
#what-is-rivel.is-chapter-away .hps-axiom,
#loop.is-chapter-away .hps-loop,
#founder-venture.is-chapter-away .hps-stack {
  transform: translate3d(0, 14px, 0) scale(.978);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
}
#what-is-rivel.is-chapter-on,
#loop.is-chapter-on,
#founder-venture.is-chapter-on {
  position: relative;
  z-index: 2;
}
.hps-theatre__chapters a:hover,
.hps-theatre__chapters a:focus-visible {
  color: #fff;
}
.hps-theatre__chapters a:focus-visible {
  outline: 2px solid #b06bff;
  outline-offset: 4px;
}

@media (max-width: 1079px) {
  .hps-theatre__chapters { display: none; }
  .hps-theatre__progress { top: 4.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hps-theatre,
  .hps-theatre__chapters,
  .hps-theatre.is-relation .hps-theatre__chapters,
  .hps-theatre.is-relation .hps-theatre__progress,
  .hps-theatre.is-relation .hps-theatre__index,
  .hps-theatre.is-system .hps-theatre__chapters,
  .hps-theatre.is-system .hps-theatre__progress,
  .hps-theatre.is-system .hps-theatre__index,
  #what-is-rivel .hps-axiom-sec__stage,
  #loop .hps-loop-sec__stage,
  #founder-venture .hps-stack-sec__stage,
  #what-is-rivel .hps-axiom,
  #loop .hps-loop,
  #founder-venture .hps-stack,
  #what-is-rivel.is-chapter-away .hps-axiom,
  #loop.is-chapter-away .hps-loop,
  #founder-venture.is-chapter-away .hps-stack {
    transition: none;
    transform: none;
  }
  .hps-theatre__live::before { animation: none; }
}

/* ── Shared scene type ─────────────────────────────────────────── */

.hps-theatre-kicker {
  display: block;
  margin: 0 0 1.4rem;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, .48);
}

#problem.hps-section,
#what-is-rivel.hps-section,
#two-ways.hps-section {
  overflow: visible;
}
#problem.hps-section::before,
#what-is-rivel.hps-section::before,
#two-ways.hps-section::before {
  opacity: .35;
}

#problem .hps-display,
#what-is-rivel .hps-display,
#two-ways .hps-display {
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.hps-theatre-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.6rem;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, .7);
  text-decoration: none;
}
.hps-theatre-link span {
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.hps-theatre-link:hover { color: #fff; }
.hps-theatre-link:hover span { transform: translateX(3px); }
.hps-theatre-link:focus-visible {
  outline: 2px solid #b06bff;
  outline-offset: 4px;
}

/* ── 001 Problem: one thesis, then the manifesto ───────────────── */

#problem.hps-manifesto {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(6.5rem, 12vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
#problem .hps-manifesto__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  max-width: 52rem;
  margin: 0 auto;
}
#problem .hps-manifesto__head {
  align-items: center;
  max-width: min(52rem, 100%);
}
#problem .hps-manifesto__head .hps-eyebrow { display: none; }
#problem .hps-display {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
}
#problem .hps-manifesto__copy {
  max-width: 42rem;
  gap: 1.15rem;
  align-items: center;
}
#problem .hps-theatre-link {
  margin-left: auto;
  margin-right: auto;
}
#problem .hps-manifesto__copy .hps-lede {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  color: rgba(232, 237, 242, .62);
}

/* ── 002 lives in home-axiom.css. 005 head ─────────────────────── */

/* ── Named layers / entries (not cards) ────────────────────────── */

.hps-theatre-list {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--theatre-hair, rgba(255, 255, 255, .1));
}
.hps-theatre-list li,
.hps-theatre-list__row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1rem 1.4rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--theatre-hair, rgba(255, 255, 255, .1));
}
.hps-theatre-list__n {
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .16em;
  color: rgba(232, 237, 242, .4);
}
.hps-theatre-list h3 {
  margin: 0;
  font-family: var(--hps-display, 'PP Neue Machina', sans-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: #fff;
}
.hps-theatre-list p {
  margin: .35rem 0 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(232, 237, 242, .55);
}
.hps-theatre-list__go {
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, .5);
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.hps-theatre-list a.hps-theatre-list__row {
  text-decoration: none;
  color: inherit;
  transition: background-color .35s cubic-bezier(.16, 1, .3, 1);
}
.hps-theatre-list a.hps-theatre-list__row:hover h3,
.hps-theatre-list a.hps-theatre-list__row:hover .hps-theatre-list__go {
  color: #fff;
}
.hps-theatre-list a.hps-theatre-list__row:focus-visible {
  outline: 2px solid #b06bff;
  outline-offset: 6px;
}


@media (max-width: 720px) {
  .hps-theatre-list li,
  .hps-theatre-list__row {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
  .hps-theatre-list__go {
    grid-column: 2;
    justify-self: start;
  }
}

/* ── 003 Loop: keep the instrument, drop the product rail ──────── */

.hps-loop-sec__copy .hps-display {
  font-weight: 400;
  letter-spacing: -.03em;
}

/* ── 004: the 3D is the page ───────────────────────────────────── */

.hps-stack-sec__head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.hps-stack__spine,
.hps-stack__rail {
  display: none;
}
.hps-stack {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}
.hps-stack__view {
  border: 0;
  border-radius: 0;
  min-height: 0;
}
.hps-stack-sec__stage {
  padding: 0;
}
.hps-stack-sec__stage .hps-container {
  position: relative;
  height: 100%;
  max-width: none;
  padding: 0;
}
.hps-stack {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 100%;
}
.hps-stack__view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
}
.hps-stack__view canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hps-stack__story {
  left: 50%;
  top: 14%;
  width: min(40rem, calc(100% - 3rem));
  text-align: center;
  transform: translateX(-50%);
}
.hps-stack__story [data-story-kicker] {
  letter-spacing: .22em;
}
.hps-stack__story h3 {
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.6rem);
  letter-spacing: -.035em;
}
.hps-stack__story [data-story-sub] {
  margin-left: auto;
  margin-right: auto;
}

/* ── 005: two living doors ─────────────────────────────────────── */

#two-ways.hps-doors-sec {
  padding: clamp(6.5rem, 11vw, 9rem) 0 0;
  overflow: visible;
}
#two-ways .hps-doors-sec__head {
  max-width: 46rem;
  margin: 0 0 clamp(2.4rem, 5vw, 3.75rem);
}
#two-ways .hps-doors-sec__head .hps-display {
  font-size: clamp(2.1rem, 5vw, 4.2rem);
}
#two-ways .hps-doors-sec__head .hps-lede {
  max-width: 44ch;
  color: rgba(232, 237, 242, .62);
}

.hps-doors {
  display: flex;
  min-height: min(82svh, 50rem);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.hps-door {
  --mx: 50%;
  --my: 78%;
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: inherit;
  padding: clamp(2.6rem, 4.2vw, 3.6rem) clamp(1.6rem, 4vw, 3.4rem) clamp(2.4rem, 4vw, 3.4rem);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  transition: flex-grow .85s cubic-bezier(.16, 1, .3, 1);
}
.hps-door + .hps-door {
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.hps-doors:hover .hps-door {
  flex-grow: .82;
}
.hps-doors:hover .hps-door:hover {
  flex-grow: 1.28;
}

.hps-door__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 58% at var(--mx) var(--my), var(--door-glow), transparent 64%),
    radial-gradient(ellipse 90% 52% at 50% 118%, var(--door-well), transparent 72%);
  opacity: .5;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1);
}
.hps-door__field::before {
  content: '';
  position: absolute;
  inset: -30% 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .045) 48%, transparent 100%);
  animation: hpsDoorScan 9s cubic-bezier(.16, 1, .3, 1) infinite;
  pointer-events: none;
}
.hps-door:hover .hps-door__field {
  opacity: 1;
}
.hps-door--os {
  --door-glow: rgba(213, 60, 255, .3);
  --door-well: rgba(213, 60, 255, .14);
}
.hps-door--lab {
  --door-glow: rgba(0, 216, 255, .26);
  --door-well: rgba(0, 216, 255, .12);
}

.hps-door__n,
.hps-door__tag,
.hps-door__title,
.hps-door__desc,
.hps-door__go {
  position: relative;
  z-index: 1;
}
.hps-door__n {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.2rem);
  left: clamp(1.4rem, 4vw, 3.4rem);
  margin: 0;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .2em;
  color: rgba(232, 237, 242, .38);
}
.hps-door__tag {
  margin: 0 0 .7rem;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, .46);
}
.hps-door__title {
  margin: 0;
  max-width: 100%;
  font-family: var(--hps-display, 'PP Neue Machina', sans-serif);
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .98;
  color: #fff;
}
.hps-door__desc {
  margin: 1.05rem 0 0;
  max-width: 36ch;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(232, 237, 242, .58);
  transition: color .45s cubic-bezier(.16, 1, .3, 1);
}
.hps-door:hover .hps-door__desc {
  color: rgba(232, 237, 242, .78);
}
.hps-door__go {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  align-self: flex-start;
  margin-top: 1.7rem;
  padding: .42rem .42rem .42rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100vw;
  background: rgba(255, 255, 255, .04);
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, .7);
  transition: color .4s cubic-bezier(.16, 1, .3, 1), border-color .4s cubic-bezier(.16, 1, .3, 1);
}
.hps-door__go i {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-style: normal;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.hps-door:hover .hps-door__go {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
.hps-door:hover .hps-door__go i {
  transform: translateX(2px);
}
.hps-door:focus-visible {
  outline: 2px solid #b06bff;
  outline-offset: -6px;
}

@keyframes hpsDoorScan {
  0%, 100% { transform: translateY(-12%); }
  50% { transform: translateY(18%); }
}

@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-stack-sec__head {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .hps-stack-sec__stage {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 4.8rem clamp(1.15rem, 4vw, 2.4rem) 2.2rem;
  }
  .hps-stack-sec__stage .hps-container {
    height: auto;
    max-width: 72rem;
    padding: 0;
  }
  .hps-stack {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-height: 0;
  }
  .hps-stack__view {
    position: relative;
    inset: auto;
    width: 100%;
    height: 22rem;
    min-height: 22rem;
  }
  .hps-stack__story {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    text-align: left;
    transform: none;
  }
  .hps-stack__rail {
    display: flex;
    justify-content: flex-start;
  }
  .hps-stack__pulse { display: none; }
}

@media (max-width: 900px) {
  .hps-doors {
    flex-direction: column;
    min-height: 0;
  }
  .hps-door {
    min-height: 64svh;
    flex-grow: 1 !important;
  }
  .hps-door + .hps-door {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .hps-door__title {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .hps-door { min-height: 56svh; }
  .hps-stack-sec__stage { padding: 4.6rem 1.2rem 2.4rem; }
  .hps-stack__view {
    height: 18.5rem;
    min-height: 18.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hps-door,
  .hps-door__field,
  .hps-door__go,
  .hps-door__go i {
    transition: none;
  }
  .hps-door__field::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOVIL v1 · bloque de correcciones responsive (append: gana por orden)
   ══════════════════════════════════════════════════════════════════ */

/* ═══ 4.1 [D] Capitulo 005 pegado al borde de la pantalla.
   #two-ways.hps-doors-sec { padding: clamp(...) 0 0 } (linea 483) es un
   shorthand con ID que gana a .hps-section y pone el padding horizontal a 0.
   Ese 0 es lo que deja que .hps-doors sangre de borde a borde, asi que NO
   se toca: el gutter se devuelve solo a lo que va DENTRO del contenedor.
   El max-width se ensancha por el mismo gutter porque .hps * es border-box:
   asi el borde de texto cae exactamente donde el de .hps-section
   (verificado: 20px a 390px, 60,48px a 1512px). ═══ */
#two-ways .hps-container {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  max-width: calc(1440px + 2 * clamp(1.25rem, 4vw, 4rem));
}

/* ═══ 4.2 [D en ventanas bajas] HUD del teatro fuera del cine.
   El bloque de la linea 199 apagaba SOLO .hps-theatre__chapters y encima
   recolocaba el contador (top: 4.8rem), dandolo por bueno en movil. Sin el
   mapa de capitulos, un "037%" y un "01 06 live" parpadeando sobre la copy
   no nombran nada. Se apaga el aside entero con la negacion canonica de
   isCinema(), que es la misma terna de la linea 653 de este archivo y de
   home-axiom.css:210 / home-loop.css:250 / home-stack.css:347: asi
   desaparece tambien en tablet grande en horizontal (1366px, coarse),
   donde max-width:1079px no llegaba y el cine tampoco se monta.
   El bloque de la linea 199 se puede borrar despues; queda inerte. ═══ */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-theatre { display: none; }
}

/* ═══ 4.3 [M] Tipografia de los capitulos con selector de ID.
   Tiene que vivir AQUI: #problem .hps-display (1,1,0) gana a cualquier
   .hps-display puesto en home-pro-sections.css, y ademas este archivo
   carga despues. ═══ */
@media (max-width: 640px) {
  #problem .hps-display { font-size: clamp(1.70rem, 1.08rem + 5.12vw, 2.56rem); }
  #two-ways .hps-doors-sec__head .hps-display { font-size: clamp(1.50rem, 0.89rem + 4.20vw, 2.10rem); }
  .hps-door__title { font-size: clamp(1.45rem, 0.85rem + 4.00vw, 2.00rem); }
}

/* ═══ 4.4 [M] Andamiaje mono de los capitulos: 9,9 a 10,9px con tracking
   .2em y contraste por debajo de AA. Con .2em a 10px la separacion entre
   letras es de 2px sobre glifos de ~6px: se lee letra a letra. ═══ */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-theatre-kicker {
    font-size: .74rem;                  /* 11,84px */
    letter-spacing: .12em;
    color: rgba(232, 237, 242, .62);    /* 6,7:1 sobre #05070f */
  }
  .hps-door__n,
  .hps-door__tag {
    font-size: .70rem;
    letter-spacing: .12em;
    color: rgba(232, 237, 242, .62);
  }
}

/* ═══ 4.5 [M/tactil] Hover pegajoso de las puertas.
   Hace falta un segundo sitio (ademas de design-dna.css) porque en
   index.html design-dna es la hoja 6 y home-theatre la 9: una regla para
   .hps-door puesta alli PERDERIA por orden. Bajo 900px las puertas ya
   llevan flex-grow: 1 !important, pero un iPad en horizontal (1180px,
   coarse) se queda con el par deformado tras tocar. ═══ */
@media (hover: none), (pointer: coarse) {
  .hps-doors:hover .hps-door,
  .hps-doors:hover .hps-door:hover { flex-grow: 1; }
  .hps-door:hover .hps-door__go i { transform: none; }
  .hps-door:hover .hps-door__field { opacity: .5; }
  .hps-theatre-link:hover span { transform: translateX(0); }
}

/* ═══ 4.6 [OPCIONAL, verificar en iPad] Altura del 004 en tablet: el
   capitulo ya tiene contenedor de 72rem, pero la altura se quedo en 22rem
   y a 1152px de ancho eso es un buzon. ═══ */
@media (min-width: 900px) and (max-width: 1079px),
       (min-width: 900px) and (max-height: 739px),
       (min-width: 900px) and (pointer: coarse) {
  .hps-stack__view { height: 26rem; min-height: 26rem; }
}