:root {
  --bg-main: #000;
  --bg-orange: #FFB30B;
  --bg-scene: #171a21;
  --fg-main: #fff;
  --max-text: 68ch;
}

@font-face {
  font-family: "SlideOneFont";
  src:
    local("HiraKakuStdN-W8-AlphaNum"),
    local("Hiragino Kaku Gothic StdN W8");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-main);
  color: var(--fg-main);
  font-family: "Courier New", Courier, monospace;
}

body {
  overflow-x: hidden;
}

/* Texto animado por caracteres: no partir palabras al hacer wrap */
[data-typewriter] .tw-word {
  white-space: nowrap;
  display: inline;
}

[data-typewriter] {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Cursor custom: cuadrado con borde negro + inversión del contenido bajo el cursor */
.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid #000;
  background-color: rgba(255, 255, 255, 0.01);
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 90ms ease, transform 90ms ease, width 90ms ease, height 90ms ease;
}

.custom-cursor.is-active {
  opacity: 1;
}

.custom-cursor.is-pressed {
  width: 11px;
  height: 11px;
}

@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .custom-cursor {
    background: #fff;
    mix-blend-mode: difference;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@keyframes custom-cursor-trail-out {
  0% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
}

.custom-cursor-trail {
  position: fixed;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid #000;
  background-color: rgba(255, 255, 255, 0.01);
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999998;
  animation: custom-cursor-trail-out 0.58s ease-out forwards;
  will-change: opacity, transform;
}

@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .custom-cursor-trail {
    background: #fff;
    mix-blend-mode: difference;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor button,
html.has-custom-cursor a,
html.has-custom-cursor [role="button"],
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select {
  cursor: none !important;
}


#comic-landing {
  position: relative;
}

.hud-controls {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sound-indicator {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 40px;
  border: 0;
  background: #000;
  cursor: pointer;
  padding: 0;
  
}

.info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border: 0;
  
  background-color: #000;
  
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  
}

.info-trigger:focus-visible {
  outline: 2px solid rgb(255 179 11 / 0.9);
  outline-offset: 3px;
}

.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  color: #111;
  display: flex;
  flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.info-overlay[hidden] {
  display: none;
}

.info-overlay__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 1;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 40px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  appearance: none;
}

.info-overlay__close:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.info-overlay__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3.5rem;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.info-overlay__body {
  width: 100%;
  margin-top: 20vh;
}

.info-overlay__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.info-overlay__date {
  margin: 1.2rem 0 0;
  text-align: right;
  font-size: 1rem;
  line-height: 1.2;
}

.info-overlay__logos {
  margin-top: auto;
  width: 100%;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
}

.info-logos-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.5rem;
}

.info-logo {
  display: block;
  max-width: 100px;
  max-height: 70px;
  height: auto;
  width: auto;
  object-fit: contain;
  align-self: end;
}

.info-logo--urra {
  width: 100%;
}

.info-logo--affair {
  justify-self: start;
  width: 100%;
}

.info-logo--str {
  justify-self: center;
  width: 100%;
}

.info-logo--hip {
  justify-self: end;
  width: 100%;
}

.sound-indicator:focus-visible {
  outline: 2px solid rgb(255 179 11 / 0.9);
  outline-offset: 3px;
}

.sound-indicator__wave {
  width: 22px;
  height: 22px;
  display: block;
  fill: #fff;
  opacity: 0.42;
  transition: opacity 180ms ease;
}

.sound-indicator.is-playing .sound-indicator__wave {
  opacity: 0.98;
}

.sound-indicator.is-playing .sound-indicator__wave [id^="Line_"] {
  animation: pulse 700ms infinite;
  transform-origin: 50% 50%;
}

.sound-indicator.is-playing .sound-indicator__wave #Line_1 {
  animation-delay: 150ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_2 {
  animation-delay: 300ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_3 {
  animation-delay: 450ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_4 {
  animation-delay: 600ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_5 {
  animation-delay: 750ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_6 {
  animation-delay: 900ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_7 {
  animation-delay: 1050ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_8 {
  animation-delay: 1200ms;
}
.sound-indicator.is-playing .sound-indicator__wave #Line_9 {
  animation-delay: 1350ms;
}

@keyframes pulse {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.7);
  }
  100% {
    transform: scaleY(1);
  }
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: 0;
  display: grid;
  align-items: center;
  background: linear-gradient(180deg, #171a21 0%, #101114 100%);
  isolation: isolate;
}

.scene--orange {
  background: var(--bg-orange);
  color: #121212;
}

.scene--quiet {
  background: linear-gradient(180deg, #0e1015 0%, #0a0b0f 100%);
}

.scene--white {
  background: #fff;
  color: #1e1e1e;
}

.scene__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.24) 0%, rgb(255 255 255 / 0) 44%);
  z-index: 0;
}

.layer {
  position: relative;
  z-index: 1;
}

.layer--shape {
  position: absolute;
  max-width: min(36vw, 520px);
  width: 100%;
  height: auto;
  opacity: 0.88;
  pointer-events: none;
}

.layer--a {
  top: 10vh;
  right: 5vw;
}

.layer--b {
  bottom: 11vh;
  left: 7vw;
}

.layer--text {
  max-width: var(--max-text);
  margin-inline: auto;
}

.kicker {
  margin: 0 0 0.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 1rem;
  opacity: 0.8;
}

h1 {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  text-wrap: balance;
}

.prose p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.interlude {
  text-align: center;
}

.interlude p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-01 .layer--text {
  position: absolute;
  top: 50%;
  right: 2vw;
  margin: 0;
  width: min(42vw, 680px);
  height: 70vh;
  text-align: right;
  transform: translateY(-50%);
}

#page-01 {
  background: #000;
  min-height: 100vh;
  position: fixed;
  inset: 0;
  z-index: 1;
}

#page-01 .layer--text img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin-left: auto;
}

#page-01 .layer--shape {
  position: absolute;
  top: 40%;
  left: -50%;
  right: auto;
  transform: translateY(-50%);
  width: 70vw;
  max-width: none;
  opacity: 1;
}

#page-01 .layer--shape img {
  display: block;
  width: 100%;
  height: auto;
}

#page-01 .page01-start {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  padding: 12px 18px;
  background: #fff;
  color: #000;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
}

#page-01 .page01-start__icon {
  width: auto;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

#page-01 .page01-start:focus-visible {
  outline: 2px solid rgb(0 0 0 / 0.9);
  outline-offset: 3px;
}

#page-01 .page01-start:hover {
  background: rgb(255 255 255 / 0.9);
}

#page-01 .page01-start:active {
  transform: translateX(-50%) translateY(1px);
}

#page-01 .kicker,
#page-01 h1 {
  color: #fff;
  text-align: right;
  font-family: "SlideOneFont", "Courier New", Courier, monospace;
}

#page-03 {
  margin-top: 100vh;
  z-index: 2;
  min-height: auto !important;
}

#page-02 .layer--shape {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 10vw;
  max-width: none;
  opacity: 1;
}

#page-02 .layer--shape img {
  display: block;
  width: 100%;
  height: auto;
}

#page-03,
#page-04,
#page-05 {
  background: #fff;
  min-height: 100vh;
  padding: 3vw;
  padding-bottom: 0;
}

#page-03 {
  z-index: 3;
}

#page-04 {
  z-index: 4;
  min-height: auto;
}

#page-05 {
  z-index: 5;
}

@keyframes page06-shape-opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Escena 6: 100vh; aire blanco (márgenes) alrededor; panel interior negro */
#page-06 {
  z-index: 6;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

#page-06 .page06-bounded {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vw;
  overflow: hidden;
}

#page-06 .page06-shape {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  pointer-events: none;
}

#page-06 .page06-shape img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 70vh;
  max-height: 100%;
  object-fit: contain;
  animation: page06-shape-opacity 4.5s ease-in-out infinite;
  will-change: opacity;
}

/* Escena 7: aire (padding) alrededor de toda la escena; panel negro solo el shape; texto abajo */
#page-07 {
  z-index: 7;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  isolation: isolate;
}

#page-07 .page07-bounded {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

@keyframes page07-clouds-drift {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

#page-07 .page07-clouds {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

#page-07 .page07-clouds__img {
  display: block;
  width: min(92%, 720px);
  height: auto;
  max-height: 42%;
  object-fit: contain;
  flex: 0 0 auto;
  animation: page07-clouds-drift 28s linear infinite;
  will-change: transform;
  margin-top:20%;
}

#page-07 .page07-shape {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#page-07 .page07-shape img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 100%);
  object-fit: contain;
}

#page-07 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

/* Escena 8: igual que la 7 (aire, panel negro, texto abajo) */
#page-08 {
  z-index: 8;
  width: 100%;
  max-width: 100%;
  min-height: auto;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  isolation: isolate;
}

#page-08 .page08-bounded {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #000;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

#page-08 .page08-shape {
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#page-08 .page08-shape img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 100%);
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
}

#page-08 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

/* Escena 9: misma config que 7/8 */
#page-09 {
  z-index: 9;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  isolation: isolate;
}

#page-09 .page09-corner {
  position: absolute;
  top: 0;
  right: 2vw;
  margin: 0;
  color: #000;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: right;
  padding-bottom: 20px;
  z-index: 2;
  pointer-events: none;
}

#page-09 .page09-bounded {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

#page-09 .page09-shape {
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#page-09 .page09-shape img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 100%);
  object-fit: contain;
}

#page-09 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

/* Escena 10: misma config que 7/8/9 */
#page-10 {
  z-index: 10;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  isolation: isolate;
}

#page-10 .page10-bounded {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

#page-10 .page10-shape {
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#page-10 .page10-shape img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 100%);
  object-fit: contain;
}

#page-10 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

/* Escena 11: panel negro centrado, sin texto */
#page-11 {
  z-index: 11;
  width: 100%;
  max-width: 100%;
  min-height: auto;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  isolation: isolate;
}

#page-11 .page11-bounded {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

#page-11 .page11-shape {
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#page-11 .page11-shape img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 100%);
  object-fit: contain;
}

/* Escena 12: contenedor negro con 2 shapes superpuestos */
@keyframes page12-shape-opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#page-12 {
  z-index: 12;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  isolation: isolate;
}

#page-12 .page12-bounded {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vw;
  overflow: hidden;
}

#page-12 .page12-stack {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#page-12 .page12-shape {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 100%);
  object-fit: contain;
}

#page-12 .page12-shape--animated {
  animation: page12-shape-opacity 4.5s ease-in-out infinite;
  will-change: opacity;
  width: 60%;
}

#page-12 .page12-shape--overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 30%;
  
}

/* Escenas 13–24: panel negro centrado, sin animación */
#page-13,
#page-14,
#page-15,
#page-16,
#page-16b,
#page-17,
#page-18,
#page-18b,
#page-19,
#page-20,
#page-21,
#page-22,
#page-23,
#page-24 {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 3vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  isolation: isolate;
}

#page-13 {
  z-index: 13;
  min-height: auto;
}
#page-14 {
  z-index: 14;
}
#page-15 {
  z-index: 15;
}
#page-16 {
  z-index: 16;
}
#page-16b {
  z-index: 16;
}
#page-17 {
  z-index: 17;
}

#page-17 .page17-bounded {
  position: relative;
}

#page-17 .page17-shape {
  position: relative;
  z-index: 1;
}

@keyframes page17-lines-reveal {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

#page-17 .page17-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  top: -32%;
  left: -62%;
  transform-origin: center center;
  animation: page17-lines-reveal 9s linear infinite;
  will-change: opacity, transform;
}
#page-18 {
  z-index: 18;
}
#page-18b {
  z-index: 18;
}
#page-19 {
  z-index: 19;
}
#page-20 {
  z-index: 20;
}
#page-21 {
  z-index: 21;
}
#page-22 {
  z-index: 22;
}
#page-23 {
  z-index: 23;
}
#page-24 {
  z-index: 24;
}

/* Escena 24: sin padding + textos blancos */
#page-24 {
  padding: 0;
  background: #000;
  gap: 1.5rem;
}

#page-24 .page24-text {
  margin: 0;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  box-sizing: border-box;

}

#page-24 .page24-text--bottom {
  text-align: right;
}

#page-13 .page13-bounded,
#page-14 .page14-bounded,
#page-15 .page15-bounded,
#page-16 .page16-bounded,
#page-16b .page16b-bounded,
#page-17 .page17-bounded,
#page-18 .page18-bounded,
#page-18b .page18b-bounded,
#page-19 .page19-bounded,
#page-20 .page20-bounded,
#page-21 .page21-bounded,
#page-22 .page22-bounded,
#page-23 .page23-bounded,
#page-24 .page24-bounded {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

#page-18 {
  gap: 1.5rem;
}

#page-18 .page18-bounded {
  flex: 0 0 auto;
}

#page-18b {
  gap: 1.5rem;
}

#page-18b .page18b-bounded {
  flex: 0 0 auto;
}

#page-21 {
  gap: 1.5rem;
}

#page-21 .page21-bounded {
  flex: 0 0 auto;
}

#page-22 .page22-bounded {
  position: relative;
  background: transparent;
}

@keyframes page22-brazo-sway {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

#page-22 .page22-shape {
  position: relative;
  z-index: 1;
}

#page-22 .page22-brazo-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform-origin: center center;
  animation: page22-brazo-sway 14s ease-in-out infinite;
  will-change: transform;
}

#page-22 .page22-brazo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#page-23 {
  gap: 1.5rem;
}

#page-23 .page23-bounded {
  flex: 0 0 auto;
}

#page-24 .page24-bounded {
  background: transparent;
}

#page-16b {
  gap: 1.5rem;
}

#page-16b .page16b-bounded {
  flex: 0 0 auto;
}

#page-16b > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

#page-18 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

#page-18b > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

#page-21 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

#page-23 > p {
  margin: 0;
  flex: 0 0 auto;
  color: #1e1e1e;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
  text-wrap: pretty;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  align-self: stretch;
}

#page-14 .page14-shape,
#page-13 .page13-shape,
#page-15 .page15-shape,
#page-16 .page16-shape,
#page-16b .page16b-shape,
#page-17 .page17-shape,
#page-18 .page18-shape,
#page-18b .page18b-shape,
#page-19 .page19-shape,
#page-20 .page20-shape,
#page-21 .page21-shape,
#page-22 .page22-shape,
#page-23 .page23-shape,
#page-24 .page24-shape {
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#page-14 .page14-shape img,
#page-13 .page13-shape img,
#page-15 .page15-shape img,
#page-16 .page16-shape img,
#page-16b .page16b-shape img,
#page-17 .page17-shape img,
#page-18 .page18-shape img,
#page-18b .page18b-shape img,
#page-19 .page19-shape img,
#page-20 .page20-shape img,
#page-21 .page21-shape img,
#page-22 .page22-shape img,
#page-23 .page23-shape img,
#page-24 .page24-shape img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 100%);
  object-fit: contain;
}

#page-03 .page03-content,
#page-04 .page04-content,
#page-05 .page05-content {
  max-width: 100%;
}

#page-03 .frame-window,
#page-04 .frame-window {
  position: relative;
  width: 100%;
  height: 56vh;
  overflow: hidden;
  border: 2px solid #000;
  margin-bottom: 1.5rem;
}

/* slide-5: 100% de ancho; el alto lo dicta la proporcion intrinseca de la imagen (SVG) */
#page-05 .frame-window {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #000;
  margin-bottom: 1.5rem;
  line-height: 0;
}

#page-03 .frame-window__shape,
#page-04 .frame-window__shape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

#page-05 .frame-window__shape {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

@keyframes page05-clouds-drift {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

#page-05 .page05-clouds {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

#page-05 .page05-clouds__img {
  display: block;
  width: min(92%, 320px);
  height: auto;
  max-height: 42%;
  object-fit: contain;
  flex: 0 0 auto;
  animation: page05-clouds-drift 28s linear infinite;
  will-change: transform;
  margin-top: -15%;
}

#page-03 .page03-content p,
#page-04 .page04-content p,
#page-05 .page05-content p {
  margin: 0;
  color: #000;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.2;
}

#page-08 .layer--a {
  top: auto;
  bottom: 10vh;
  right: 8vw;
  max-width: min(60vw, 860px);
}

#page-09 .layer--a {
  top: 16vh;
  right: 2vw;
  max-width: min(30vw, 340px);
}

#page-13 .layer--a {
  top: auto;
  bottom: 14vh;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: min(18vw, 190px);
}

@media (max-width: 900px) {
  .scene {
    min-height: 125vh;
    padding: 10vh 6vw;
  }

  .layer--shape {
    max-width: 45vw;
  }

  .layer--a {
    right: 2vw;
  }

  .layer--b {
    left: 2vw;
  }

  #page-02 .layer--a {
    width: 55vw;
  }

  #page-03,
  #page-04,
  #page-05 {
    padding: 3vw;
  }

  #page-06 {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    padding: 1.2rem;
  }

  #page-06 .page06-bounded {
    padding: 1.2rem;
  }

  #page-07,
  #page-08,
  #page-09,
  #page-10,
  #page-11,
  #page-12,
  #page-13,
  #page-14,
  #page-15,
  #page-16,
  #page-16b,
  #page-17,
  #page-18,
  #page-18b,
  #page-19,
  #page-20,
  #page-21,
  #page-22,
  #page-23,
  #page-24 {
    padding: 1.2rem;
  }

  #page-07 .page07-bounded,
  #page-08 .page08-bounded,
  #page-09 .page09-bounded,
  #page-10 .page10-bounded {
    padding: 0;
  }

  #page-11 .page11-bounded,
  #page-12 .page12-bounded,
  #page-13 .page13-bounded,
  #page-14 .page14-bounded,
  #page-15 .page15-bounded,
  #page-16 .page16-bounded,
  #page-16b .page16b-bounded,
  #page-17 .page17-bounded,
  #page-18 .page18-bounded,
  #page-18b .page18b-bounded,
  #page-19 .page19-bounded,
  #page-20 .page20-bounded,
  #page-21 .page21-bounded,
  #page-22 .page22-bounded,
  #page-23 .page23-bounded,
  #page-24 .page24-bounded {
    padding: 0;
  }
}

@media (max-width: 640px) {
  .scene {
    min-height: 112vh;
    padding: 9vh 1.25rem;
  }

  .layer--shape {
    max-width: 56vw;
    opacity: 0.72;
  }

  .prose p {
    font-size: 1rem;
    line-height: 1.6;
  }

  #page-02 .layer--a {
    width: 55vw;
  }

  #page-03,
  #page-04,
  #page-05 {
    padding: 3vw;
  }

  #page-06 {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    padding: 1.2rem;
  }

  #page-06 .page06-bounded {
    padding: 1.2rem;
  }

  #page-07,
  #page-08,
  #page-09,
  #page-10,
  #page-11,
  #page-12,
  #page-13,
  #page-14,
  #page-15,
  #page-16,
  #page-16b,
  #page-17,
  #page-18,
  #page-18b,
  #page-19,
  #page-20,
  #page-21,
  #page-22,
  #page-23,
  #page-24 {
    padding: 1.2rem;
  }

  #page-07 .page07-bounded,
  #page-08 .page08-bounded,
  #page-09 .page09-bounded,
  #page-10 .page10-bounded {
    padding: 0;
  }

  #page-11 .page11-bounded,
  #page-12 .page12-bounded,
  #page-13 .page13-bounded,
  #page-14 .page14-bounded,
  #page-15 .page15-bounded,
  #page-16 .page16-bounded,
  #page-16b .page16b-bounded,
  #page-17 .page17-bounded,
  #page-18 .page18-bounded,
  #page-18b .page18b-bounded,
  #page-19 .page19-bounded,
  #page-20 .page20-bounded,
  #page-21 .page21-bounded,
  #page-22 .page22-bounded,
  #page-23 .page23-bounded,
  #page-24 .page24-bounded {
    padding: 0;
  }
}

#page-14,
#page-15,
#page-16,
#page-16b,
#page-17,
#page-18,
#page-18b,
#page-19,
#page-20,
#page-21,
#page-22,
#page-23,
#page-24{min-height: auto;}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .layer,
  .scene {
    transition: none !important;
    animation: none !important;
  }

  #page-06 .page06-shape img {
    animation: none !important;
    opacity: 1;
  }

  #page-12 .page12-shape--animated {
    animation: none !important;
    opacity: 1;
  }

  #page-07 .page07-clouds__img {
    animation: none !important;
    transform: none;
  }

  #page-05 .page05-clouds__img {
    animation: none !important;
    transform: none;
  }

  #page-17 .page17-lines {
    animation: none !important;
    opacity: 1;
    transform: scale(1);
  }

  #page-22 .page22-brazo-wrap {
    animation: none !important;
    transform: none !important;
  }

  .sound-indicator.is-playing .sound-indicator__wave [id^="Line_"] {
    animation: none !important;
  }
}