@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #07080c;
  --night-2: #0b0e16;
  --graphite: #141821;
  --navy: #101628;
  --ivory: #f4ecdc;
  --ivory-dim: #d8ccb4;
  --ivory-mute: #b3a78f;
  --gold: #e0c06a;
  --gold-light: #f3e0a8;
  --gold-aged: #8a6e38;
  --gold-line: rgba(198, 164, 94, 0.42);
  --amber: #b56a2b;
  --ember: #6e2a22;
  --accent: var(--gold);
  --accent-soft: var(--gold-light);
  --glow: rgba(198, 164, 94, 0.22);
  --shadow: rgba(0, 0, 0, 0.55);
  --font-display: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pad: clamp(1.25rem, 5vw, 3rem);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  color-scheme: dark;
  background: #1c1410;
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

#app {
  position: relative;
  min-height: 100dvh;
  background: #1c1410;
}

.ceremonial-chamber {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #24160e;
}

.ceremonial-chamber picture,
.ceremonial-chamber .wall-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.ceremonial-chamber .wall-photo {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
}

.wall-relief {
  position: absolute;
  left: -2%;
  top: 14%;
  width: min(34vw, 380px);
  height: 54%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.22;
  mix-blend-mode: multiply;
  filter: sepia(0.45) saturate(0.85) contrast(1.08) brightness(0.9);
}

.wall-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(180, 110, 42, 0.22), transparent 52%),
    radial-gradient(ellipse at 50% 48%, rgba(16, 10, 6, 0.42) 0%, rgba(16, 10, 6, 0.18) 46%, transparent 68%),
    radial-gradient(1000px 620px at 50% 0%, color-mix(in srgb, var(--glow) 28%, transparent), transparent 62%),
    linear-gradient(90deg, rgba(70, 36, 14, 0.18), transparent 38%, transparent 68%, rgba(18, 10, 6, 0.32));
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 18%, transparent 76%, rgba(0, 0, 0, 0.28));
}

.grain {
  position: absolute;
  inset: -20%;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  animation: grain 1.4s steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  100% { transform: translate(0, 0); }
}

.gold-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(198, 164, 94, 0.1), transparent 42%),
    radial-gradient(circle at 18% 48%, rgba(181, 106, 43, 0.1), transparent 46%);
  opacity: 0.9;
}

#stage {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
}

.screen {
  position: relative;
  width: min(760px, 100%);
  min-height: 100dvh;
  padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad) calc(var(--pad) + 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: rise 1.15s var(--ease) both;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  background: radial-gradient(ellipse at center, rgba(12, 8, 5, 0.62) 0%, rgba(12, 8, 5, 0.28) 48%, transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.screen > * {
  position: relative;
  z-index: 1;
}

.screen.wide {
  width: 100%;
}

.screen-entrada {
  justify-content: flex-start;
  padding-top: clamp(2.2rem, 6.5vh, 4.4rem);
}

.screen-entrada .arch {
  height: 7.2rem;
  margin-bottom: 0.85rem;
}

.screen-entrada .lead {
  margin-top: 1.35rem;
}

.enter-btn {
  background: rgba(198, 164, 94, 0.18);
  border-color: var(--gold);
  color: var(--ivory);
  font-size: clamp(0.98rem, 3.4vw, 1.18rem);
  letter-spacing: 0.34em;
  min-height: 3.55rem;
  min-width: min(20rem, 88vw);
  box-shadow: 0 0 28px var(--glow), 0 0 0 1px rgba(243, 224, 168, 0.18);
}

.enter-btn:hover,
.enter-btn:focus-visible {
  background: rgba(198, 164, 94, 0.28);
  color: #fff8e8;
  box-shadow: 0 0 36px var(--glow);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.kicker {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 3vw, 1.12rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 1.1rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.95), 0 6px 22px rgba(0, 0, 0, 0.9);
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.35rem, 8vw, 4rem);
  line-height: 1.12;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  margin: 0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 3px 12px rgba(0, 0, 0, 0.95),
    0 8px 28px rgba(0, 0, 0, 0.9);
}

.display.small {
  font-size: clamp(1.7rem, 5.4vw, 2.7rem);
  letter-spacing: 0.16em;
}

.identity {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  letter-spacing: 0.06em;
  color: var(--gold-light);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 3px 12px rgba(0, 0, 0, 0.95), 0 6px 22px rgba(0, 0, 0, 0.9);
}

.lead {
  margin: 2rem 0 0;
  max-width: 28rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.05rem);
  line-height: 1.45;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 3px 12px rgba(0, 0, 0, 0.95), 0 6px 22px rgba(0, 0, 0, 0.9);
}

.lead em {
  font-style: italic;
  color: var(--gold-light);
}

.body-text {
  margin: 1.25rem 0 0;
  max-width: 30rem;
  font-size: clamp(1.12rem, 2.6vw, 1.28rem);
  line-height: 1.75;
  color: var(--ivory-dim);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.9);
}

.body-text p,
.oracle-text p {
  margin: 0 0 1.05rem;
}

.body-text p:last-child,
.oracle-text p:last-child {
  margin-bottom: 0;
}

.oracle-text {
  margin: 0;
  max-width: 22rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 3px 14px rgba(0, 0, 0, 0.95), 0 8px 24px rgba(0, 0, 0, 0.9);
}

.oracle-text .compact {
  white-space: pre-line;
  color: var(--gold-light);
  font-size: 1.05em;
  line-height: 1.7;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: min(12rem, 52vw);
  margin: 1.6rem auto;
}

.ornament i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

.ornament span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--glow);
}

.actions {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  font-size: clamp(0.78rem, 2.6vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1.05rem 1.7rem;
  min-width: min(19rem, 86vw);
  min-height: 3.1rem;
  transition: border-color 0.45s var(--ease), color 0.45s, box-shadow 0.45s, background 0.45s, transform 0.45s;
}

.btn:hover,
.btn:focus-visible {
  outline: none;
  color: var(--ivory);
  border-color: var(--gold);
  background: rgba(198, 164, 94, 0.06);
  box-shadow: 0 0 28px var(--glow);
}

.btn:active {
  transform: translateY(1px);
}

.btn.ghost {
  border-color: transparent;
  color: var(--ivory-mute);
  min-width: auto;
  padding-inline: 1rem;
}

.btn.ghost:hover,
.btn.ghost:focus-visible {
  color: var(--gold-light);
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.btn.taken {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ivory-dim);
}

.arch {
  width: min(18rem, 58vw);
  height: 9rem;
  margin: 0 0 1.6rem;
  opacity: 0.55;
  animation: breathe 8s ease-in-out infinite;
}

.breath-ring {
  width: min(8.5rem, 36vw);
  height: min(8.5rem, 36vw);
  margin-bottom: 1.8rem;
  border-radius: 50%;
  border: 1px solid rgba(198, 164, 94, 0.28);
  box-shadow:
    0 0 24px rgba(198, 164, 94, 0.12),
    inset 0 0 24px rgba(198, 164, 94, 0.08);
  animation: breathe 5.6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.55; }
  50% { transform: scale(1.04); opacity: 1; }
}

.ritual-lines {
  max-width: 34rem;
}

.ritual-lines p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  line-height: 1.5;
  margin: 0 0 1.15rem;
  color: var(--ivory);
  animation: rise 1s var(--ease) both;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 4px 18px rgba(0, 0, 0, 0.9);
}

.screen-ritual .ritual-lines p {
  font-size: clamp(1.7rem, 5.4vw, 2.25rem);
  line-height: 1.42;
}

.screen-umbral .display.small {
  font-size: clamp(2.1rem, 7vw, 3.3rem);
}

.screen-umbral .lead {
  font-size: clamp(1.55rem, 4.6vw, 2.05rem);
  max-width: 32rem;
}

.screen-umbral .body-text {
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}

.screen-completo .lead {
  font-size: clamp(1.55rem, 4.6vw, 2rem);
  max-width: 28rem;
}

.screen-completo .body-text {
  font-size: clamp(1.18rem, 3.2vw, 1.4rem);
  max-width: 32rem;
}

.screen-completo .identity {
  font-size: clamp(1.35rem, 3.8vw, 1.75rem);
  max-width: 22rem;
}

.screen-completo .body-text strong {
  color: var(--gold-light);
  font-weight: 500;
}

.screen-circulo .display {
  font-size: clamp(1.7rem, 5.2vw, 2.35rem);
  max-width: 18ch;
}

.screen-circulo .lead {
  font-size: clamp(1.35rem, 3.8vw, 1.7rem);
  max-width: 28rem;
}

.screen-circulo .body-text {
  font-size: clamp(1.18rem, 3.2vw, 1.4rem);
  max-width: 32rem;
}

.screen-circulo .identity {
  font-size: clamp(1.45rem, 4vw, 1.85rem);
}

.screen-cierre .lead {
  font-size: clamp(1.85rem, 5.6vw, 2.45rem);
  max-width: 22ch;
}

.screen-cierre .body-text {
  font-size: clamp(1.3rem, 3.6vw, 1.55rem);
}

.screen-cierre .identity {
  font-size: clamp(1.45rem, 4vw, 1.9rem);
}

.screen-despues .display.small {
  font-size: clamp(1.85rem, 6vw, 2.8rem);
}

.screen-despues .btn {
  font-size: clamp(0.92rem, 3vw, 1.08rem);
  letter-spacing: 0.18em;
  min-height: 3.7rem;
  padding: 1.2rem 1.5rem;
}

.invocacion-speak {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.8vw, 1.85rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--gold-light);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 3px 12px rgba(0, 0, 0, 0.95);
}

.invocacion-speak:hover,
.invocacion-speak:focus-visible {
  outline: none;
  color: var(--ivory);
}

.ritual-lines p:nth-child(1) { animation-delay: 0.1s; }
.ritual-lines p:nth-child(2) { animation-delay: 0.55s; }
.ritual-lines p:nth-child(3) { animation-delay: 1.2s; }
.ritual-lines p:nth-child(4) { animation-delay: 1.55s; }

.presence-hold .btn {
  animation: rise 0.9s 2.2s var(--ease) both;
}

.presence {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  overflow-x: hidden;
}

.presence-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  filter: saturate(0.95) contrast(1.04);
  animation: emerge 2.8s var(--ease) both;
}

@keyframes emerge {
  from { opacity: 0; filter: blur(14px) saturate(0.7); }
  to { opacity: 1; filter: saturate(0.95) contrast(1.04); }
}

.presence-shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, transparent 38%, rgba(20, 12, 8, 0.28) 62%, rgba(16, 10, 6, 0.82) 100%);
}

.presence.read .presence-shade {
  background:
    linear-gradient(180deg, rgba(16, 10, 6, 0.18) 0%, rgba(16, 10, 6, 0.28) 28%, rgba(16, 10, 6, 0.58) 58%, rgba(16, 10, 6, 0.9) 100%);
}

.presence-content {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: var(--pad) var(--pad) calc(var(--pad) + 4.2rem);
}

.presence.read .presence-content {
  justify-content: flex-start;
  padding-top: clamp(4.5rem, 18vh, 9rem);
}

.mensaje-screen.presence.read .presence-content {
  align-items: flex-start;
  text-align: left;
  max-width: min(26rem, 92vw);
}

.deep-screen.presence.read .presence-shade {
  background:
    linear-gradient(180deg, rgba(16, 10, 6, 0.02) 0%, rgba(16, 10, 6, 0.06) 34%, rgba(16, 10, 6, 0.48) 64%, rgba(16, 10, 6, 0.9) 100%);
}

.deep-screen.presence.read .presence-content {
  display: grid;
  grid-template-columns: minmax(6.8rem, 30vw) minmax(0, 1fr) minmax(6.8rem, 30vw);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "left stage right"
    "invoc invoc invoc"
    "act act act";
  align-items: end;
  justify-items: stretch;
  text-align: center;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding:
    max(0.6rem, env(safe-area-inset-top))
    max(0.45rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(0.45rem, env(safe-area-inset-left));
}

.mensaje-screen .oracle-text {
  max-width: 22rem;
}

.mensaje-screen .actions {
  margin-top: 1.35rem;
  align-items: flex-start;
}

.mensaje-screen .btn {
  min-width: 0;
  writing-mode: horizontal-tb;
  transform: none;
  padding: 0.85rem 1.35rem;
  letter-spacing: 0.22em;
  background: rgba(7, 8, 12, 0.55);
  backdrop-filter: blur(8px);
}

.mensaje-screen .btn:active {
  transform: translateY(1px);
}

.quiron-bg {
  background-size: cover !important;
  background-position: center 12% !important;
  background-repeat: no-repeat;
  animation: emerge 2.4s var(--ease) both;
}

.quiron-shade {
  background:
    linear-gradient(90deg, rgba(10, 6, 4, 0.55) 0%, rgba(10, 6, 4, 0.12) 22%, transparent 36%, transparent 64%, rgba(10, 6, 4, 0.18) 78%, rgba(10, 6, 4, 0.5) 100%),
    linear-gradient(180deg, rgba(8, 5, 3, 0.18) 0%, transparent 28%, transparent 72%, rgba(8, 5, 3, 0.4) 100%);
}

.quiron-cols {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(7.4rem, 27vw) 1fr minmax(7.4rem, 27vw);
  min-height: 100dvh;
  width: 100%;
  padding:
    max(4.4rem, env(safe-area-inset-top))
    max(0.45rem, env(safe-area-inset-right))
    max(1.1rem, env(safe-area-inset-bottom))
    max(0.45rem, env(safe-area-inset-left));
  box-sizing: border-box;
  pointer-events: none;
}

.quiron-paths {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  pointer-events: auto;
}

.quiron-paths.left {
  padding-bottom: 6.8rem;
}

.quiron-paths.right {
  justify-content: flex-end;
  padding-top: min(28vh, 12rem);
  padding-bottom: 6vh;
}

.path-btn {
  appearance: none;
  width: 100%;
  min-height: 3.05rem;
  padding: 0.55rem 0.45rem;
  border: 1px solid var(--gold-line);
  background: rgba(7, 8, 12, 0.58);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 2.4vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  transition: border-color 0.35s, color 0.35s, box-shadow 0.35s, background 0.35s;
}

.path-btn:hover,
.path-btn:focus-visible {
  outline: none;
  color: var(--ivory);
  border-color: var(--gold);
  background: rgba(7, 8, 12, 0.72);
  box-shadow: 0 0 18px var(--glow);
}

.presence-content .display {
  animation: rise 1.2s 1.15s var(--ease) both;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 10px 40px rgba(0, 0, 0, 0.85);
}

.presence-content .identity {
  animation: rise 1.2s 1.55s var(--ease) both;
}

.presence-content .actions {
  animation: rise 1s 2.1s var(--ease) both;
}

.umbral-mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.2vw, 3.5rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 28px var(--glow), 0 8px 30px rgba(0, 0, 0, 0.85);
  animation: inscribe 1.6s var(--ease) both;
}

@keyframes inscribe {
  from { opacity: 0; letter-spacing: 0.38em; filter: blur(8px); }
  to { opacity: 1; letter-spacing: 0.2em; filter: none; }
}

.dim .presence-bg {
  filter: saturate(0.78) brightness(0.62) contrast(1.04);
  animation: dimming 1.4s var(--ease) both;
}

@keyframes dimming {
  from { filter: saturate(0.95) brightness(0.95); }
  to { filter: saturate(0.78) brightness(0.62) contrast(1.04); }
}

.reading {
  width: min(760px, 100%);
  padding-bottom: 6rem;
}

.reading .oracle-text,
.reading .deep-block {
  animation: rise 1s var(--ease) both;
}

.deep-list {
  width: min(36rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  text-align: left;
  margin-top: 0.4rem;
}

.deep-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.deep-screen .deep-col.left {
  grid-area: left;
  justify-self: start;
  align-self: end;
  width: 100%;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: min(11vh, 5rem);
  padding-bottom: 0.2rem;
}

.deep-screen .deep-col.right {
  grid-area: right;
  justify-self: end;
  align-self: end;
  width: 100%;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: min(11vh, 5rem);
  padding-bottom: 0.2rem;
}

.deep-card {
  border: 1px solid var(--gold-line);
  background: rgba(7, 8, 12, 0.58);
  padding: 0.8rem 0.7rem 0.85rem;
  min-height: 4.2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

.deep-card .deep-toggle {
  text-align: center;
  letter-spacing: 0.16em;
  padding: 0.35rem 0.15rem;
}

.deep-card.open {
  border-color: var(--gold);
  background: rgba(7, 8, 12, 0.78);
}

.deep-card .deep-body p,
.deep-card .deep-body li {
  font-size: clamp(1.05rem, 2.5vw, 1.28rem);
  line-height: 1.4;
}

.invocacion-block {
  grid-area: invoc;
  width: min(32rem, 86%);
  justify-self: center;
  margin: 0.2rem 0 0.35rem;
  text-align: center;
}

.deep-screen .invocacion-block .kicker {
  text-align: center;
}

.deep-screen .invocacion-speak {
  text-align: center;
}

.deep-screen .actions {
  grid-area: act;
  justify-self: center;
  margin: 0.15rem 0 0;
  align-items: center;
}

.deep-block {
  opacity: 1;
  transform: none;
}

.deep-block.in {
  animation: rise 0.8s var(--ease) both;
}

.deep-toggle {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 3vw, 1.12rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 4px 16px rgba(0, 0, 0, 0.95);
}

.deep-toggle:hover,
.deep-toggle:focus-visible {
  outline: none;
  color: var(--ivory);
}

.deep-body {
  display: none;
  margin-top: 0.45rem;
}

.deep-block.open .deep-body {
  display: block;
}

.deep-block .kicker {
  text-align: left;
  margin-bottom: 0.45rem;
}

.deep-block p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.6vw, 1.75rem);
  line-height: 1.45;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 3px 12px rgba(0, 0, 0, 0.95);
}

.deep-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.deep-block li {
  position: relative;
  padding-left: 1rem;
  margin: 0.35rem 0;
  color: var(--ivory-dim);
  font-size: clamp(1.12rem, 2.5vw, 1.28rem);
  line-height: 1.55;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 3px 12px rgba(0, 0, 0, 0.85);
}

.deep-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

.gift-phrase {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 7.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 16ch;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.92);
  animation: settleIn 2.1s ease-out both;
}

@keyframes settleIn {
  0% {
    opacity: 0;
    transform: translateY(-2.2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sound-toggle {
  position: fixed;
  z-index: 20;
  left: max(0.9rem, env(safe-area-inset-left));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: rgba(7, 8, 12, 0.55);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.4s;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--glow);
}

.sound-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.sound-toggle[aria-pressed="true"] .wave {
  opacity: 0.25;
}

.completo-hint {
  position: fixed;
  z-index: 20;
  left: max(0.9rem, env(safe-area-inset-left));
  bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 3.4rem);
  width: min(8.6rem, 38vw);
  margin: 0;
  padding: 0.48rem 0.55rem 0.52rem;
  border: 1px solid var(--gold-line);
  background: rgba(7, 8, 12, 0.62);
  color: var(--gold-light);
  text-align: left;
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.completo-hint:hover,
.completo-hint:focus-visible {
  outline: none;
  color: var(--ivory);
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--glow);
}

.completo-hint strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
}

.completo-hint em {
  display: block;
  margin-top: 0.28rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ivory-dim);
  text-transform: none;
}

.dialog-completo .lead {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.35rem, 4.2vw, 1.7rem);
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.dialog-completo .identity {
  font-size: clamp(1.2rem, 3.4vw, 1.45rem);
}

.dialog-completo .btn {
  min-width: min(18rem, 82vw);
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.back-quiet {
  position: fixed;
  z-index: 20;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  left: auto;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: rgba(7, 8, 12, 0.58);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.52rem 0.9rem;
  max-width: calc(100vw - 5.5rem);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.back-quiet:hover,
.back-quiet:focus-visible {
  outline: none;
  color: var(--ivory);
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--glow);
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 6, 10, 0.72);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  animation: rise 0.4s var(--ease) both;
}

.dialog {
  width: min(26rem, 100%);
  padding: 2rem 1.5rem 1.6rem;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, #12141c, #0a0c12);
  text-align: center;
}

.door-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.door-layer svg {
  width: 100%;
  height: 100%;
}

.door-cross .path-left {
  animation: splitL 1.8s var(--ease) both;
}
.door-cross .path-right {
  animation: splitR 1.8s var(--ease) both;
}
@keyframes splitL {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: none; opacity: 0.8; }
}
@keyframes splitR {
  from { transform: translateX(-18px); opacity: 0; }
  to { transform: none; opacity: 0.8; }
}

.door-crack .crack {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.8s var(--ease) forwards;
}

.door-veil .veil-shape {
  animation: lift 2s var(--ease) both;
}
@keyframes lift {
  from { opacity: 0.55; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8%); }
}

.door-flame .flame {
  animation: flicker 2.4s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50% { opacity: 0.7; transform: scaleY(1.08); }
}

.door-water .wave {
  animation: flow 4.5s linear infinite;
}
@keyframes flow {
  from { transform: translateX(-8%); }
  to { transform: translateX(8%); }
}

.door-cut .slash {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw 1.3s var(--ease) forwards;
}

.door-sun .rays {
  animation: sunopen 2s var(--ease) both;
  transform-origin: 50% 50%;
}
@keyframes sunopen {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 0.7; transform: scale(1); }
}

.door-mist .mist {
  animation: drift 5s ease-in-out infinite alternate;
}
@keyframes drift {
  from { opacity: 0.15; transform: translateX(-3%); }
  to { opacity: 0.4; transform: translateX(3%); }
}

.door-path .path-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2s var(--ease) forwards;
}

.door-threshold .lintel {
  animation: rise 1.6s var(--ease) both;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.transition-veil {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #05060a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
}

.transition-veil.on {
  opacity: 1;
  pointer-events: all;
}

.toque-screen {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  background: #07060a;
  cursor: pointer;
}

.toque-img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #07060a;
  animation: toqueIn 0.45s var(--ease) both;
}

@media (orientation: landscape) {
  .toque-img {
    object-fit: contain;
  }
}

@keyframes toqueIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (min-width: 900px) {
  .presence-content {
    align-items: flex-start;
    text-align: left;
    padding-left: max(var(--pad), 8vw);
    max-width: 52vw;
  }
  .presence-content .ornament {
    margin-left: 0;
  }
  .presence-content .actions {
    align-items: flex-start;
  }
  .reading {
    text-align: left;
    align-items: flex-start;
  }
  .reading .ornament {
    margin-left: 0;
  }
  .deep-list {
    text-align: left;
  }
  .deep-screen.presence.read .presence-content {
    max-width: none;
    width: 100%;
    align-items: start;
    text-align: center;
    padding-left: max(0.55rem, env(safe-area-inset-left));
    padding-right: max(0.55rem, env(safe-area-inset-right));
  }
}

@media (max-width: 640px) {
  .kicker,
  .deep-toggle {
    font-size: 1.05rem;
    letter-spacing: 0.22em;
  }
  .display {
    font-size: clamp(2.55rem, 11vw, 3.5rem);
    letter-spacing: 0.1em;
  }
  .display.small {
    font-size: clamp(1.9rem, 7.4vw, 2.6rem);
  }
  .identity {
    font-size: clamp(1.5rem, 5.6vw, 1.85rem);
  }
  .lead {
    font-size: clamp(1.75rem, 6.4vw, 2.1rem);
  }
  .body-text {
    font-size: 1.2rem;
  }
  .oracle-text {
    font-size: clamp(1.72rem, 6.6vw, 2.05rem);
  }
  .deep-block p,
  .invocacion-speak {
    font-size: 1.6rem;
  }
  .deep-block li {
    font-size: 1.22rem;
  }
  .btn {
    font-size: 0.9rem;
    letter-spacing: 0.18em;
  }
  .quiron-cols {
    grid-template-columns: minmax(6.8rem, 33vw) 1fr minmax(6.8rem, 33vw);
  }
  .path-btn {
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    min-height: 2.95rem;
    padding: 0.5rem 0.38rem;
  }
  .mensaje-screen .btn {
    font-size: 0.86rem;
    letter-spacing: 0.22em;
  }
  .deep-card .deep-toggle {
    font-size: 0.86rem;
    letter-spacing: 0.1em;
  }
  .deep-screen.presence.read .presence-content {
    grid-template-columns: minmax(6.1rem, 33vw) minmax(0, 1fr) minmax(6.1rem, 33vw);
    padding-top: max(0.4rem, env(safe-area-inset-top));
  }
  .deep-card {
    padding: 0.62rem 0.48rem 0.7rem;
    min-height: 3.6rem;
  }
  .wall-relief {
    width: min(42vw, 220px);
    height: 38%;
    top: 10%;
    opacity: 0.22;
  }
}

::selection {
  background: rgba(198, 164, 94, 0.28);
  color: var(--ivory);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(198, 164, 94, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .grain { animation: none; }
  .presence-bg { transform: none; filter: none; }
  .breath-ring { animation: none; }
  .deep-block { opacity: 1; transform: none; }
}

/* /* ---- Cierre de cierre ---- */
.screen-lakshmi { padding: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); cursor: pointer; }
.lakshmi-img { max-width: min(78vw, 500px); max-height: 90vh; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.55); }
.lakshmi-side { max-width: 18rem; text-align: center; font-family: var(--font-display); font-style: italic; letter-spacing: .05em; color: #fff; margin: 0; }
.lakshmi-side p { margin: 0 0 1rem; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; line-height: 1.08; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 255, 255, 0.28); }
.lakshmi-sub { margin-top: .4rem !important; font-size: clamp(1.6rem, 3vw, 2.2rem) !important; color: #fff; opacity: .95; }
@media (max-width: 760px) {
  .screen-lakshmi { flex-direction: column; gap: 1.1rem; padding: 1.2rem 0; }
  .lakshmi-side { max-width: 84vw; }
  .lakshmi-side p { font-size: 2.3rem; }
  .lakshmi-sub { font-size: 1.5rem !important; }
  .lakshmi-img { max-height: 62vh; }
}

.screen-bendicion { text-align: center; }
.bend-title { text-transform: uppercase; letter-spacing: .18em; font-size: clamp(2.2rem, 6vw, 4rem); color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 0 34px rgba(255, 255, 255, 0.3); }
.bend-line { opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.2; margin: .7rem 0; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 255, 255, 0.28); }
.bend-line.on { opacity: 1; transform: none; }
.credito { margin-top: 2.4rem; opacity: 0; transition: opacity 1.4s ease; }
.credito.on { opacity: 1; }
.credito-nombre { font-size: 1.25rem; letter-spacing: .08em; margin: 0 0 .35rem; }
.credito-oficio { font-style: italic; opacity: .85; margin: 0; }
.credito-sitio { margin: .3rem 0 0; }
.credito-sitio a { color: var(--accent-soft, #e6d09a); text-decoration: none; border-bottom: 1px solid rgba(230,208,154,.4); }
.final-veil { position: fixed; inset: 0; background: #000; opacity: 0; transition: opacity 1.3s ease; display: flex; align-items: center; justify-content: center; z-index: 99; }
.final-veil.on { opacity: 1; }
.credito-fin { color: #8a8272; font-size: .85rem; letter-spacing: .12em; }

/* Selector de idioma */
.lang-row { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.4rem; }
.lang-btn { font-family: var(--font-body); font-size: .8rem; letter-spacing: .14em; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(230, 208, 154, 0.35); background: transparent; color: rgba(233, 225, 209, 0.75); cursor: pointer; }
.lang-btn.on { background: rgba(230, 208, 154, 0.16); color: #fff; border-color: rgba(230, 208, 154, 0.7); }
.vtag { font-size: .65rem; letter-spacing: .12em; opacity: .45; align-self: center; margin-left: .4rem; }

/* Nombre y pregunta de Quirón superpuestos a la derecha */
.quiron-text { position: absolute; z-index: 4; top: max(4.8rem, env(safe-area-inset-top)); right: clamp(1rem, 4vw, 3.5rem); max-width: min(32vw, 27rem); text-align: right; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85); pointer-events: none; }
.quiron-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0 0 .7rem; }
.quiron-q { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.35; margin: 0; }
@media (max-width: 760px) {
  .quiron-text { max-width: 34vw; right: .8rem; }
  .quiron-name { font-size: 1.3rem; }
  .quiron-q { font-size: 1.05rem; }
}


/* Puerta Negra ----------------------------------------------------------- */
.blackdoor-entry {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  min-width: min(18rem, 76vw);
  padding: .9rem 1.65rem;
  border: 1px solid rgba(218,180,98,.82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18,11,9,.78), rgba(7,7,10,.84));
  box-shadow: 0 0 0 1px rgba(255,225,155,.09) inset, 0 10px 35px rgba(0,0,0,.36), 0 0 22px rgba(198,164,94,.12);
  color: #ead49a;
  font-family: var(--font-display);
  font-size: clamp(.82rem, 2.2vw, 1rem);
  letter-spacing: .23em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
  cursor: pointer;
}
.blackdoor-entry:hover,.blackdoor-entry:focus-visible{outline:none;color:#fff2c8;border-color:#f0c56e;box-shadow:0 0 0 1px rgba(255,225,155,.14) inset,0 0 28px rgba(198,164,94,.24)}

#app.blackdoor-mode .ceremonial-chamber,
#app.blackdoor-mode .atmosphere { opacity: 0; pointer-events: none; }
#app.blackdoor-mode #sound-toggle { z-index: 40; }

.blackdoor-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #030304;
  isolation: isolate;
}
.blackdoor-backdrop {
  position:absolute;
  inset:-5%;
  z-index:-2;
  background-image: var(--bd-bg);
  background-size:cover;
  background-position:center;
  filter: blur(24px) brightness(.28) saturate(.8);
  transform:scale(1.08);
  opacity:.72;
}
.blackdoor-screen::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 50% 45%, transparent 40%, rgba(0,0,0,.32) 78%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
.blackdoor-image {
  display:block;
  width:100vw;
  height:100dvh;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
  animation: bdEmerge .75s ease both;
}
.blackdoor-screen.travel .blackdoor-image { animation: bdTravel .32s ease both; }
@keyframes bdEmerge { from { opacity:0; transform:scale(1.008); } to { opacity:1; transform:scale(1); } }
@keyframes bdTravel { from { opacity:.15; } to { opacity:1; } }
.blackdoor-choice {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:max(4.4vh, 1.2rem);
  transform:translateX(-50%);
  width:min(58rem, 86vw);
  display:flex;
  justify-content:center;
  gap:clamp(1rem, 7vw, 8rem);
  pointer-events:auto;
}
.blackdoor-choice button {
  min-width:min(17rem, 36vw);
  padding:.82rem 1.15rem;
  border:1px solid rgba(218,180,98,.8);
  border-radius:.35rem;
  background:rgba(8,8,10,.68);
  backdrop-filter:blur(8px);
  color:#ecd8a6;
  font-family:var(--font-display);
  font-size:clamp(.92rem,2.4vw,1.25rem);
  letter-spacing:.08em;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.blackdoor-choice button:hover,.blackdoor-choice button:focus-visible{outline:none;background:rgba(28,18,12,.78);border-color:#f0c56e;color:#fff2c8}
@media (max-width:700px){
  .blackdoor-entry{bottom:max(.75rem, env(safe-area-inset-bottom));min-width:58vw;padding:.72rem 1rem;font-size:.72rem}
  .blackdoor-choice{bottom:max(2.2vh,.65rem);width:94vw;gap:.65rem}
  .blackdoor-choice button{min-width:42vw;padding:.7rem .65rem;font-size:.9rem}
}

.blackdoor-media{position:relative;width:min(100vw,177.68dvh);aspect-ratio:1672/941;display:grid;place-items:center}
.blackdoor-screen.portrait .blackdoor-media{width:min(100vw,66.67dvh);aspect-ratio:2/3}
.blackdoor-media .blackdoor-image{width:100%;height:100%;object-fit:contain}
.bd-tapzone{
  position:absolute;
  inset:0;
  z-index:3;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.bd-tapzone:focus-visible{outline:2px solid rgba(240,197,110,.8);outline-offset:-2px}
.blackdoor-choice{position:absolute;inset:0;transform:none;width:auto;display:block;pointer-events:none;z-index:4}
.blackdoor-choice .bd-hit{position:absolute;top:82.6%;height:10.2%;width:19.5%;border:0;background:transparent;box-shadow:none;backdrop-filter:none;opacity:0;pointer-events:auto;cursor:pointer}
.blackdoor-choice .bd-hit span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.blackdoor-choice .bd-left,.blackdoor-choice .bd-back{left:23.1%}
.blackdoor-choice .bd-right,.blackdoor-choice .bd-next{left:57.6%}
.blackdoor-choice .bd-center{left:31.8%;width:36.2%;top:81.9%;height:11%}
.blackdoor-choice .bd-hit:focus-visible{opacity:.12;outline:2px solid #f0c56e;outline-offset:-2px;background:#f0c56e}
@media (max-width:700px){.blackdoor-choice{bottom:auto;width:auto;gap:0}.blackdoor-choice .bd-hit{min-width:0;padding:0;font-size:0}}

.blackdoor-rotate{
  display:none;
  position:absolute;
  inset:0;
  z-index:8;
  background:rgba(3,3,4,.84);
  backdrop-filter:blur(8px);
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  text-align:center;
  pointer-events:none;
}
.blackdoor-rotate-box{
  max-width:min(24rem,92vw);
  border:1px solid rgba(218,180,98,.42);
  background:rgba(10,10,12,.68);
  border-radius:1rem;
  padding:1.2rem 1rem;
  box-shadow:0 0 28px rgba(0,0,0,.35);
}
.blackdoor-rotate strong{
  display:block;
  color:#f0ce83;
  font-family:var(--font-display);
  font-size:clamp(1.35rem,6vw,2rem);
  letter-spacing:.04em;
}
.blackdoor-rotate span{
  display:block;
  margin-top:.45rem;
  color:#e8d7b0;
  font-family:var(--font-body);
  font-size:clamp(.9rem,3.6vw,1rem);
  line-height:1.45;
}
@media (max-width:900px) and (orientation:portrait){
  .blackdoor-rotate{display:flex}
}


/* Puerta Negra v56: ritmo más contemplativo y leyendas laterales */
.blackdoor-layout{
  position:relative;
  width:100vw;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.8rem,2vw,2rem);
}
.blackdoor-legend{
  flex:0 1 10rem;
  max-width:12vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.28em;
  color:#d9b66c;
  font-family:var(--font-display);
  font-size:clamp(.72rem,1.05vw,1.03rem);
  line-height:1.18;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 10px #000,0 0 16px rgba(222,181,94,.18);
  opacity:.94;
  pointer-events:none;
}
.blackdoor-legend::before,.blackdoor-legend::after{
  content:"";
  width:min(5.5rem,8vw);
  height:1px;
  margin:.45rem 0;
  background:linear-gradient(90deg,transparent,#c9a55f,transparent);
  opacity:.75;
}
.blackdoor-legend span{display:block;white-space:nowrap}
.blackdoor-screen.has-legends .blackdoor-media{flex:0 0 auto}
@media (max-width:900px){
  .blackdoor-layout{gap:0}
  .blackdoor-legend{display:none}
}


/* Puerta Negra v57: diálogo, voces y sombras laterales */
.blackdoor-screen.has-legends .blackdoor-layout{
  gap:clamp(.65rem,1.5vw,1.45rem);
  padding-inline:clamp(.35rem,1vw,1rem);
}
.blackdoor-screen.has-legends .blackdoor-media{
  width:min(66.5vw,66.67dvh);
  flex:0 0 auto;
}
.blackdoor-legend{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  flex:1 1 0;
  max-width:15vw;
  min-width:9.5rem;
  min-height:min(72dvh,44rem);
  padding:1.2rem .75rem;
  border:1px solid rgba(203,164,91,.24);
  border-radius:.8rem;
  background:linear-gradient(180deg,rgba(9,8,9,.58),rgba(4,4,5,.78));
  color:#d7bd82;
  font-family:var(--font-display);
  font-size:clamp(.78rem,1.04vw,1.08rem);
  line-height:1.24;
  letter-spacing:.045em;
  text-align:center;
  text-transform:none;
  text-shadow:0 2px 12px #000,0 0 18px rgba(225,183,94,.13);
  box-shadow:inset 0 0 42px rgba(0,0,0,.58),0 0 32px rgba(0,0,0,.2);
}
.blackdoor-legend::before{
  content:"";
  position:absolute;
  inset:-9%;
  z-index:-2;
  background-image:var(--bd-bg);
  background-size:cover;
  background-position:center;
  filter:blur(7px) brightness(.25) saturate(.62) contrast(1.15);
  transform:scale(1.08);
  opacity:.76;
}
.blackdoor-legend-left::before{background-position:24% center}
.blackdoor-legend-right::before{background-position:76% center}
.blackdoor-legend::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  width:auto;
  height:auto;
  margin:0;
  background:
    radial-gradient(circle at 50% 18%,rgba(213,174,94,.13),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.72));
  opacity:1;
  pointer-events:none;
}
.blackdoor-legend span{
  position:relative;
  z-index:1;
  display:block;
  white-space:normal;
  margin:.18em 0;
}
.blackdoor-legend-left{color:#c9b27f}
.blackdoor-legend-right{
  color:#f0ce83;
  font-size:clamp(.84rem,1.12vw,1.16rem);
  animation:bdVoiceGlow 1.55s ease .45s both;
}
@keyframes bdVoiceGlow{
  0%{text-shadow:0 2px 12px #000;color:#cbb17b}
  45%{text-shadow:0 2px 12px #000,0 0 22px rgba(242,197,101,.38);color:#f7d993}
  100%{text-shadow:0 2px 12px #000,0 0 14px rgba(242,197,101,.18);color:#f0ce83}
}
.blackdoor-screen.intertitle{
  background:
    radial-gradient(circle at 50% 46%,rgba(130,91,38,.16),transparent 36%),
    radial-gradient(circle at 50% 50%,#12100f 0,#070708 54%,#020203 100%);
}
.blackdoor-intertitle{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:2rem;
  color:#e5c477;
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,5rem);
  letter-spacing:.08em;
  text-align:center;
  text-shadow:0 3px 22px #000,0 0 28px rgba(222,180,92,.16);
  animation:bdIntertitle 1.15s ease both;
}
.blackdoor-intertitle span::before,.blackdoor-intertitle span::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:clamp(2rem,7vw,8rem);
  height:1px;
  margin:0 clamp(.6rem,2vw,1.8rem);
  background:linear-gradient(90deg,transparent,#c7a35a,transparent);
}
@keyframes bdIntertitle{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.blackdoor-screen.roses .blackdoor-image{animation:bdRoses 2.3s ease both}
@keyframes bdRoses{from{opacity:0;filter:brightness(.72)}to{opacity:1;filter:brightness(1)}}

@media (max-width:900px){
  .blackdoor-screen.has-legends .blackdoor-layout{padding:0;gap:0}
  .blackdoor-screen.has-legends .blackdoor-media{width:min(100vw,66.67dvh)}
  .blackdoor-screen.has-legends .blackdoor-legend{
    display:flex;
    position:absolute;
    z-index:5;
    top:17%;
    bottom:17%;
    width:24vw;
    min-width:0;
    max-width:24vw;
    min-height:0;
    padding:.65rem .35rem;
    border-radius:.45rem;
    font-size:clamp(.54rem,2.15vw,.72rem);
    line-height:1.18;
    background:rgba(5,5,7,.44);
    backdrop-filter:blur(3px);
  }
  .blackdoor-screen.has-legends .blackdoor-legend-left{left:.5vw}
  .blackdoor-screen.has-legends .blackdoor-legend-right{right:.5vw;font-size:clamp(.58rem,2.25vw,.76rem)}
  .blackdoor-intertitle{font-size:clamp(1.7rem,8vw,3rem)}
  .blackdoor-intertitle span::before,.blackdoor-intertitle span::after{display:block;width:38vw;margin:.8rem auto}
}

/* Puerta Negra v60: leyendas laterales ampliadas para lectura */
.blackdoor-screen.has-legends .blackdoor-layout{
  display:grid;
  grid-template-columns:minmax(11rem,1fr) minmax(0,min(66.67dvh,48vw)) minmax(11rem,1fr);
  align-items:center;
  justify-items:stretch;
  gap:clamp(.8rem,1.7vw,2rem);
  width:100vw;
  height:100dvh;
  padding-inline:clamp(.8rem,1.8vw,2rem);
  box-sizing:border-box;
}
.blackdoor-screen.has-legends .blackdoor-media{
  grid-column:2;
  width:100%;
  max-width:min(66.67dvh,48vw);
  justify-self:center;
  flex:none;
}
.blackdoor-screen.has-legends .blackdoor-legend{
  width:100%;
  max-width:none;
  min-width:0;
  min-height:min(66dvh,40rem);
  padding:clamp(1rem,2vw,1.6rem);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-color:rgba(203,164,91,.28);
  background:linear-gradient(180deg,rgba(7,7,9,.48),rgba(3,3,4,.70));
}
.blackdoor-screen.has-legends .blackdoor-legend-left{grid-column:1;grid-row:1}
.blackdoor-screen.has-legends .blackdoor-legend-right{grid-column:3;grid-row:1}
.blackdoor-screen.has-legends .blackdoor-legend::before{
  filter:blur(5px) brightness(.34) saturate(.78) contrast(1.18);
  opacity:.92;
}
.blackdoor-screen.has-legends .blackdoor-legend::after{
  background:
    radial-gradient(ellipse at 50% 28%,rgba(205,164,85,.11),transparent 33%),
    linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.70));
}
.bd-self{
  position:relative;
  z-index:2;
  width:min(22rem,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  text-align:center;
}
.bd-self-kicker{
  display:block;
  font-family:var(--font-body);
  font-size:clamp(.88rem,1.08vw,1.15rem);
  letter-spacing:.26em;
  color:#b99a61;
}
.bd-self-text{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.48rem,2.05vw,2.05rem);
  line-height:1.20;
  letter-spacing:.045em;
  color:#f0ce83;
  text-shadow:0 2px 13px #000,0 0 24px rgba(229,183,91,.20);
}
.bd-habits{
  position:relative;
  z-index:2;
  width:min(24rem,100%);
  text-align:left;
}
.bd-habits-title{
  display:block;
  margin-bottom:1.1rem;
  font-family:var(--font-body);
  font-size:clamp(1rem,1.18vw,1.22rem);
  letter-spacing:.12em;
  color:#e5c477;
  text-align:center;
}
.bd-habits ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(.9rem,1.4vh,1.25rem);
}
.bd-habits li{
  position:relative;
  margin:0;
  padding-left:1.25rem;
  font-family:var(--font-display);
  font-size:clamp(1.42rem,1.72vw,1.78rem);
  line-height:1.24;
  letter-spacing:.01em;
  color:#f3dfad;
  text-transform:none;
  text-shadow:0 2px 12px #000;
}
.bd-habits li::before{
  content:"◆";
  position:absolute;
  left:0;
  top:.08em;
  color:#a9874e;
  font-size:.55em;
}

@media (max-width:900px){
  .blackdoor-screen.has-legends .blackdoor-layout{
    display:grid;
    grid-template-columns:1fr minmax(0,min(66.67dvh,54vw)) 1fr;
    gap:.25rem;
    padding:0 .25rem;
  }
  .blackdoor-screen.has-legends .blackdoor-media{width:100%;max-width:min(66.67dvh,54vw)}
  .blackdoor-screen.has-legends .blackdoor-legend{
    position:relative;
    inset:auto;
    width:100%;
    max-width:none;
    min-height:54dvh;
    padding:.7rem .45rem;
    border-radius:.45rem;
    font-size:inherit;
    backdrop-filter:blur(2px);
  }
  .bd-self{gap:.55rem}
  .bd-self-kicker{font-size:clamp(.62rem,2vw,.82rem);letter-spacing:.14em}
  .bd-self-text{font-size:clamp(.86rem,2.55vw,1.12rem);line-height:1.17}
  .bd-habits-title{font-size:clamp(.78rem,2.35vw,1rem);letter-spacing:.06em;margin-bottom:.58rem}
  .bd-habits ul{gap:.42rem}
  .bd-habits li{font-size:clamp(1rem,2.85vw,1.22rem);line-height:1.16;padding-left:.88rem}
}


/* Puerta Negra v63: conductas cotidianas legibles en teléfono horizontal */
@media (max-width:950px) and (orientation:landscape){
  .blackdoor-screen.has-legends .blackdoor-layout{
    grid-template-columns:minmax(10.5rem,1fr) minmax(0,min(66.67dvh,50vw)) minmax(12rem,1.12fr);
    gap:.38rem;
    padding:0 .35rem;
  }
  .blackdoor-screen.has-legends .blackdoor-media{max-width:min(66.67dvh,50vw)}
  .blackdoor-screen.has-legends .blackdoor-legend{
    padding:.62rem .5rem;
    min-height:56dvh;
  }
  .blackdoor-screen.has-legends .blackdoor-legend-right{
    background:linear-gradient(180deg,rgba(5,5,7,.60),rgba(2,2,3,.80));
  }
  .bd-habits-title{
    font-size:clamp(.86rem,2.15vw,1.08rem);
    line-height:1.08;
    margin-bottom:.5rem;
  }
  .bd-habits li{
    font-size:clamp(1.05rem,2.65vw,1.28rem);
    line-height:1.14;
  }
}

/* Puerta Negra v62: hotspots ajustados a las láminas de Lucifer */
.blackdoor-screen.lucifer-choice .blackdoor-choice .bd-left{
  left:34.2%; top:88.1%; width:15.3%; height:7.3%;
}
.blackdoor-screen.lucifer-choice .blackdoor-choice .bd-right{
  left:50.2%; top:88.1%; width:15.3%; height:7.3%;
}
.blackdoor-screen.lucifer-final .blackdoor-choice .bd-center{
  left:39.3%; top:86.0%; width:21.5%; height:8.2%;
}


/* Puerta Negra v65: móvil horizontal + tap táctil robusto */
@media (pointer:coarse) and (orientation:landscape){
  .blackdoor-screen,
  .blackdoor-layout{width:100dvw;height:100dvh;}
  .blackdoor-media{width:min(100dvw,177.68dvh);max-height:100dvh;}
  .blackdoor-screen.portrait .blackdoor-media{width:min(66.67dvh,54dvw);max-height:100dvh;}
  .blackdoor-rotate{display:none!important;}
}
@media (pointer:coarse) and (orientation:portrait) and (max-width:1000px){
  .blackdoor-rotate{display:flex;}
  .blackdoor-rotate-box{pointer-events:none;}
}

/* Puerta Negra v66: fallback para navegadores internos (WhatsApp, etc.).
   Si el navegador no permite bloquear orientación, se rota la experiencia por CSS. */
html.blackdoor-force-rotate,
html.blackdoor-force-rotate body{
  overflow:hidden!important;
  overscroll-behavior:none;
}
html.blackdoor-force-rotate .blackdoor-screen{
  top:0;
  left:0;
  right:auto;
  bottom:auto;
  width:100dvh!important;
  height:100dvw!important;
  transform-origin:top left;
  transform:rotate(90deg) translateY(-100%);
}
html.blackdoor-force-rotate .blackdoor-layout{
  width:100dvh!important;
  height:100dvw!important;
}
html.blackdoor-force-rotate .blackdoor-media{
  width:min(100dvh,177.68dvw)!important;
  max-height:100dvw!important;
}
html.blackdoor-force-rotate .blackdoor-screen.portrait .blackdoor-media{
  width:min(66.67dvw,54dvh)!important;
  max-height:100dvw!important;
}
html.blackdoor-force-rotate .blackdoor-screen.has-legends .blackdoor-layout{
  grid-template-columns:minmax(8rem,1fr) minmax(0,min(66.67dvw,48dvh)) minmax(8rem,1fr)!important;
  width:100dvh!important;
  height:100dvw!important;
  padding-inline:clamp(.45rem,1.3dvh,1.1rem)!important;
  gap:clamp(.45rem,1.25dvh,1rem)!important;
}
html.blackdoor-force-rotate .blackdoor-screen.has-legends .blackdoor-media{
  width:100%!important;
  max-width:min(66.67dvw,48dvh)!important;
}
html.blackdoor-force-rotate .blackdoor-screen.has-legends .blackdoor-legend{
  display:flex!important;
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:min(66dvw,32rem)!important;
  padding:clamp(.55rem,1.25dvh,1rem)!important;
}
html.blackdoor-force-rotate .bd-self-kicker,
html.blackdoor-force-rotate .bd-habits-title{
  font-size:clamp(.78rem,1.8dvh,1.05rem)!important;
}
html.blackdoor-force-rotate .bd-self-text{
  font-size:clamp(1.05rem,2.35dvh,1.55rem)!important;
}
html.blackdoor-force-rotate .bd-habits li{
  font-size:clamp(.95rem,2.05dvh,1.2rem)!important;
  line-height:1.15!important;
}
html.blackdoor-force-rotate .blackdoor-rotate{
  display:none!important;
}

/* Puerta Negra v67: salida segura para navegadores internos (WhatsApp y similares). */
.blackdoor-external-gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:1.1rem;
  background:
    radial-gradient(circle at 50% 32%,rgba(118,75,24,.22),transparent 34%),
    rgba(2,2,4,.94);
  backdrop-filter:blur(12px);
}
.blackdoor-external-card{
  width:min(31rem,94vw);
  box-sizing:border-box;
  padding:clamp(1.25rem,4vw,2rem);
  border:1px solid rgba(214,177,99,.42);
  border-radius:1rem;
  background:linear-gradient(180deg,rgba(18,15,13,.96),rgba(6,6,8,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.58),inset 0 0 42px rgba(189,142,62,.06);
  color:#eadbb9;
  text-align:center;
}
.blackdoor-external-mark{
  margin:0 auto .65rem;
  color:#d7b66d;
  font-size:2rem;
  line-height:1;
  text-shadow:0 0 18px rgba(220,177,85,.28);
}
.blackdoor-external-card h2{
  margin:0 0 .85rem;
  color:#f2d48d;
  font-family:var(--font-display);
  font-size:clamp(1.55rem,6vw,2.15rem);
  font-weight:500;
  line-height:1.12;
}
.blackdoor-external-card p{
  margin:.55rem auto;
  max-width:27rem;
  color:#e2d3b2;
  font-family:var(--font-body);
  font-size:clamp(.94rem,3.7vw,1.05rem);
  line-height:1.48;
}
.blackdoor-external-instruction{color:#f0dfb8!important;}
.blackdoor-external-actions{
  display:grid;
  gap:.62rem;
  margin:1.15rem auto .9rem;
  width:min(23rem,100%);
}
.blackdoor-external-actions button{
  width:100%;
  min-height:3rem;
  border-radius:.55rem;
  font-family:var(--font-body);
  font-size:.92rem;
  letter-spacing:.04em;
  cursor:pointer;
}
.bd-external-primary{
  border:1px solid #d8b165;
  background:linear-gradient(180deg,#b77b2c,#7e4c17);
  color:#fff4d2;
  box-shadow:0 7px 22px rgba(0,0,0,.28);
}
.bd-external-secondary{
  border:1px solid rgba(218,180,98,.65);
  background:rgba(22,17,12,.72);
  color:#f0d599;
}
.bd-external-quiet{
  border:0;
  background:transparent;
  color:#bfae8a;
  text-decoration:underline;
  text-underline-offset:.2em;
}
.blackdoor-external-url{
  margin:.4rem auto 0;
  max-width:26rem;
  padding:.55rem .65rem;
  border:1px solid rgba(204,168,91,.18);
  border-radius:.4rem;
  color:#9f9278;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.7rem;
  line-height:1.35;
  overflow-wrap:anywhere;
  user-select:all;
}


/* v68 — Fuente de las Bendiciones en la portada */
.entry-extras {
  margin-top: clamp(1.05rem, 2.6vh, 1.7rem);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.entry-extra-card {
  appearance: none;
  border: 1px solid rgba(224, 192, 106, 0.38);
  background: rgba(18, 12, 8, 0.62);
  color: var(--gold-light);
  border-radius: 14px;
  padding: 0.46rem 0.72rem 0.5rem;
  min-width: 7.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(243,224,168,.05);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.entry-extra-card img {
  width: 4.45rem;
  height: 4.45rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(224, 192, 106, 0.28);
}

.entry-extra-card span {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .06em;
}

.entry-extra-card:hover,
.entry-extra-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(243, 224, 168, 0.7);
  background: rgba(39, 26, 14, 0.74);
  outline: none;
}

.blessings-veil {
  overflow-y: auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}

.dialog-bendiciones {
  width: min(31rem, 94vw);
  max-height: none;
  padding: clamp(1.2rem, 4vw, 2rem);
}

.blessings-image {
  width: clamp(7.8rem, 26vw, 10.5rem);
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 auto 1rem;
  border-radius: 14px;
  border: 1px solid rgba(224, 192, 106, 0.35);
  box-shadow: 0 12px 38px rgba(0,0,0,.42), 0 0 24px rgba(198,164,94,.12);
}

.dialog-bendiciones .display.small {
  font-size: clamp(1.55rem, 5vw, 2.25rem);
  letter-spacing: .1em;
}

.blessings-copy {
  margin-top: .8rem;
  max-width: 27rem;
  line-height: 1.58;
}

.blessings-water {
  margin-top: 1.15rem;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  line-height: 1.38;
}

.blessings-actions {
  margin-top: 1.35rem;
  gap: .62rem;
}

.blessing-pay {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(198,164,94,.16);
  border-color: var(--gold);
}

.blessings-note {
  margin: .05rem 0 .28rem;
  color: var(--ivory-mute);
  font-size: .86rem;
  font-style: italic;
}

@media (max-height: 720px) {
  .screen-entrada {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .screen-entrada .arch { height: 4.7rem; margin-bottom: .35rem; }
  .screen-entrada .lead { margin-top: .75rem; }
  .screen-entrada .ornament { margin: .85rem auto; }
  .screen-entrada .actions { margin-top: 1.1rem; }
  .entry-extras { margin-top: .72rem; }
  .entry-extra-card img { width: 3.55rem; height: 3.55rem; }
}

/* v70 — accesos secundarios: Conoce a quienes acompañan + Bendiciones */
@media (min-width: 1000px) {
  .screen-entrada .entry-extras {
    position: absolute;
    left: auto;
    right: calc(-1 * (100vw - min(760px, 100vw)) + clamp(9rem, 16vw, 16rem));
    top: 52vh;
    width: auto;
    margin: 0;
    transform: translateY(-50%);
    z-index: 3;
    flex-direction: column;
    gap: .8rem;
  }

  .screen-entrada .entry-extra-card {
    min-width: 6.8rem;
    padding: .42rem .62rem .46rem;
    background: rgba(18, 12, 8, .58);
  }

  .screen-entrada .entry-extra-card img {
    width: 4.1rem;
    height: 4.1rem;
  }

  .screen-entrada .entry-extra-card span {
    font-size: .95rem;
  }
}


/* v70 — botón "Conoce a quienes acompañan" y entrada a Guardianes del camino */
.entry-companions-card {
  appearance: none;
  border: 1px solid rgba(224, 192, 106, 0.4);
  background: rgba(18, 12, 8, 0.62);
  color: var(--gold-light);
  border-radius: 12px;
  min-width: 13.5rem;
  max-width: 15rem;
  padding: .88rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(243,224,168,.05);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.entry-companions-card span {
  font-family: var(--font-display);
  font-size: .96rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: none;
}
.entry-companions-card:hover,
.entry-companions-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(243, 224, 168, 0.72);
  background: rgba(39, 26, 14, 0.76);
  outline: none;
}

.screen-guardianes-camino {
  width: min(760px, 100%);
  justify-content: center;
}
.screen-guardianes-camino .display.small {
  max-width: 42rem;
  font-size: clamp(2rem, 6vw, 3.25rem);
}
.guardianes-camino-intro {
  max-width: 34rem;
  line-height: 1.55;
  margin-top: 1.1rem;
}
.guardianes-camino-map {
  width: min(31rem, 92vw);
  margin: 1.55rem auto .35rem;
  display: grid;
  gap: .7rem;
}
.guardianes-camino-tag {
  border: 1px solid rgba(224, 192, 106, .28);
  background: rgba(18, 12, 8, .48);
  color: var(--gold-light);
  padding: .78rem 1rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.18rem);
  letter-spacing: .08em;
}

@media (max-width: 999px) {
  .entry-extras {
    gap: .72rem;
    flex-wrap: wrap;
  }
  .entry-companions-card {
    min-width: min(15rem, 86vw);
  }
}

@media (max-height: 720px) and (max-width: 999px) {
  .entry-companions-card {
    padding: .62rem .8rem;
  }
  .entry-companions-card span {
    font-size: .88rem;
  }
}


/* v71 — Profundización legible en teléfono: Clave / Enseñanza / Sombra / Pregunta */
@media (pointer: coarse) and (max-width: 1000px) {
  .deep-screen.presence.read .presence-content {
    padding-left: max(.82rem, env(safe-area-inset-left));
    padding-right: max(.82rem, env(safe-area-inset-right));
  }

  .deep-screen .deep-col {
    gap: 1rem;
    min-width: 0;
  }

  .deep-screen .deep-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: .76rem .68rem .86rem;
  }

  .deep-screen .deep-card .deep-toggle {
    width: 100%;
    min-width: 0;
    padding: .5rem .2rem;
    font-size: clamp(.8rem, 2.55vw, .98rem);
    line-height: 1.22;
    letter-spacing: .07em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  .deep-screen .deep-body {
    min-width: 0;
    margin-top: .62rem;
    padding: 0 .12rem .08rem;
  }

  .deep-screen .deep-body p,
  .deep-screen .deep-body li {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  .deep-screen .deep-col.left,
  .deep-screen .deep-col.right {
    max-height: 60dvh;
    margin-bottom: min(6dvh, 2rem);
    scrollbar-gutter: stable;
  }
}

/* Teléfono vertical: dos columnas amplias, sin la columna central estrecha. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 700px) {
  .deep-screen.presence.read .presence-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "left right"
      "invoc invoc"
      "act act";
    column-gap: .82rem;
    row-gap: .5rem;
    padding-top: max(.65rem, env(safe-area-inset-top));
  }

  .deep-screen .deep-col.left,
  .deep-screen .deep-col.right {
    width: 100%;
    max-height: 62dvh;
    margin-bottom: .45rem;
  }

  .deep-screen .deep-card .deep-toggle {
    font-size: clamp(.8rem, 3.15vw, .94rem);
    letter-spacing: .055em;
  }

  .deep-screen .deep-card .deep-body p {
    font-size: clamp(1.05rem, 4.25vw, 1.3rem);
    line-height: 1.42;
  }

  .deep-screen .deep-card .deep-body li {
    font-size: clamp(1rem, 3.8vw, 1.18rem);
    line-height: 1.42;
  }
}

/* Teléfono horizontal: más aire y más altura útil al abrir una tarjeta. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .deep-screen.presence.read .presence-content {
    grid-template-columns: minmax(10.2rem, 34vw) minmax(0, 1fr) minmax(10.2rem, 34vw);
    padding-top: max(.45rem, env(safe-area-inset-top));
    padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  }

  .deep-screen .deep-col.left,
  .deep-screen .deep-col.right {
    max-height: 64dvh;
    margin-bottom: min(3.5dvh, 1rem);
  }

  .deep-screen .deep-col {
    gap: .82rem;
  }

  .deep-screen .deep-card {
    padding: .58rem .58rem .66rem;
  }

  .deep-screen .deep-card .deep-toggle {
    font-size: clamp(.76rem, 1.95vw, .9rem);
    line-height: 1.18;
    letter-spacing: .06em;
  }

  .deep-screen .deep-card .deep-body p,
  .deep-screen .deep-card .deep-body li {
    font-size: clamp(.95rem, 2.45vw, 1.16rem);
    line-height: 1.32;
  }
}


/* v72 — nueva entrada: Calíope → accesos → orientación → Quirón */
.screen-caliope {
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  justify-content: stretch;
  isolation: isolate;
}
.screen-caliope::before { display: none; }
.caliope-hero {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #241a12;
  z-index: 0;
}
.caliope-hero img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 38%;
}
.caliope-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9,7,5,.76) 0%, rgba(9,7,5,.18) 23%, transparent 50%, rgba(8,6,4,.25) 72%, rgba(7,5,3,.82) 100%),
    linear-gradient(90deg, rgba(9,7,5,.28), transparent 30%, transparent 72%, rgba(9,7,5,.2));
}
.portada-lang {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 3;
  margin: 0;
  justify-content: flex-end;
}
.portada-copy {
  position: absolute;
  top: clamp(12.5rem, 32vh, 18rem);
  left: 50%;
  width: min(92vw, 48rem);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}
.portada-copy .kicker {
  margin-bottom: .55rem;
  font-size: clamp(.82rem, 2.2vw, 1.06rem);
}
.portada-copy .display {
  font-size: clamp(2.05rem, 6.4vw, 4.15rem);
  letter-spacing: .105em;
}
.portada-action {
  position: absolute;
  left: 50%;
  bottom: max(1.7rem, calc(env(safe-area-inset-bottom) + 1rem));
  transform: translateX(-50%);
  z-index: 3;
}
.portada-action .enter-btn {
  min-width: min(15rem, 76vw);
  backdrop-filter: blur(5px);
  background: rgba(27,18,10,.65);
}

.screen-accesos {
  justify-content: center;
  gap: clamp(.7rem, 1.8vh, 1.15rem);
  padding-top: max(1.3rem, env(safe-area-inset-top));
}
.screen-accesos::before { inset: 3% 4%; }
.access-block { width: min(34rem, 94vw); }
.screen-accesos .display.small {
  font-size: clamp(1.85rem, 5.3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: .09em;
}
.compact-actions { margin-top: .9rem; }
.compact-actions .btn { min-width: 10.5rem; }
.fountain-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fountain-entry {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--gold-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.fountain-entry img {
  width: clamp(10.5rem, 32vw, 14.5rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(224,192,106,.48);
  box-shadow: 0 14px 42px rgba(0,0,0,.48), 0 0 28px rgba(198,164,94,.14);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.fountain-entry:hover img,
.fountain-entry:focus-visible img {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(243,224,168,.8);
}
.fountain-entry:focus-visible { outline: none; }
.fountain-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.7vw, 1.65rem);
  letter-spacing: .07em;
}
.fountain-invite {
  margin: .55rem auto 0;
  max-width: 26rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.08rem, 3vw, 1.32rem);
  line-height: 1.45;
  color: var(--ivory-dim);
}
.access-continue { margin-top: .2rem; }
.access-continue .enter-btn { min-width: min(16rem, 82vw); }

.screen-orientacion {
  justify-content: center;
  padding-top: max(1.35rem, env(safe-area-inset-top));
  padding-bottom: max(5rem, calc(env(safe-area-inset-bottom) + 4.5rem));
}
.orientation-card {
  width: min(38rem, 94vw);
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid rgba(224,192,106,.3);
  background: rgba(15,10,7,.6);
  box-shadow: 0 18px 46px rgba(0,0,0,.33), inset 0 0 0 1px rgba(243,224,168,.035);
  backdrop-filter: blur(2px);
}
.orientation-section + .orientation-section {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(224,192,106,.18);
}
.orientation-title {
  margin: 0 0 .65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 4.7vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: .05em;
  color: var(--gold-light);
}
.orientation-section p {
  margin: 0 auto .68rem;
  max-width: 33rem;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.8vw, 1.27rem);
  line-height: 1.5;
  color: var(--ivory);
}
.orientation-section p:last-child { margin-bottom: 0; }
.orientation-blessing, .guardian-meets {
  color: var(--gold-light) !important;
  font-style: italic;
}
.guardian-meets { font-weight: 600; }
.orientation-actions { margin-top: 1.15rem; }
.orientation-actions .enter-btn { min-width: min(15rem, 80vw); }

@media (min-width: 900px) {
  .caliope-hero img { object-fit: contain; background: #241a12; }
  .caliope-hero::before, .caliope-hero::after {
    content: \"\"; position: absolute; inset: 0; z-index: -1;
  }
  .caliope-hero::before {
    background-image: url('../assets/extras/caliope-portada.png?v=77');
    background-size: cover; background-position: center; filter: blur(28px) brightness(.45) saturate(.8); transform: scale(1.08);
  }
}
@media (max-width: 620px) {
  .portada-lang { top: max(.62rem, env(safe-area-inset-top)); right: .65rem; }
  .portada-copy { top: clamp(13.2rem, 37vh, 18.6rem); }
  .portada-copy .kicker { font-size: .78rem; letter-spacing: .23em; }
  .portada-copy .display { font-size: clamp(1.75rem, 9vw, 2.65rem); line-height: 1.04; letter-spacing: .075em; }
  .caliope-hero img { object-position: 50% 45%; }
  .screen-accesos { gap: .55rem; }
  .screen-accesos .ornament { margin: .45rem auto; }
  .fountain-entry img { width: clamp(9.6rem, 43vw, 12rem); }
  .orientation-card { padding: 1rem .95rem; }
  .orientation-section + .orientation-section { margin-top: .95rem; padding-top: .9rem; }
  .orientation-section p { line-height: 1.42; }
}
@media (max-height: 720px) {
  .screen-accesos { justify-content: flex-start; overflow-y: auto; padding-bottom: 2rem; }
  .fountain-entry img { width: 8.6rem; }
  .screen-orientacion { justify-content: flex-start; overflow-y: auto; }
}

/* v73 — Puerta Blanca / Camino de los maestros ------------------------- */
.whitedoor-entry {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 4.15rem);
  transform: translateX(-50%);
  min-width: min(18rem, 76vw);
  padding: .9rem 1.65rem;
  border: 1px solid rgba(245,229,188,.86);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(245,238,216,.18), rgba(21,22,27,.86));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 35px rgba(0,0,0,.30), 0 0 26px rgba(248,231,182,.13);
  color: #f4e8c4;
  font-family: var(--font-display);
  font-size: clamp(.82rem, 2.2vw, 1rem);
  letter-spacing: .23em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
  cursor: pointer;
}
.whitedoor-entry:hover,.whitedoor-entry:focus-visible{
  outline:none;
  color:#fffdf2;
  border-color:#fff0bd;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 30px rgba(244,232,196,.25)
}

.whitegate-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  color: #eee7d7;
  background:
    radial-gradient(circle at 50% 45%, rgba(232,215,169,.10), transparent 30%),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.045), transparent 45%),
    linear-gradient(180deg, #05070a 0%, #090a0f 45%, #030406 100%);
  overscroll-behavior: contain;
}
.whitegate-screen::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%, rgba(221,199,139,.055), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(221,199,139,.045), transparent 24%),
    linear-gradient(90deg, rgba(198,164,94,.055), transparent 12%, transparent 88%, rgba(198,164,94,.055));
  box-shadow: inset 0 0 120px rgba(0,0,0,.62);
}

/* Entrada */
.wg-entry-shell {
  position:relative;
  z-index:1;
  min-height:100dvh;
  width:min(100%, 92rem);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(.6rem,1.6vh,1.2rem);
  padding:max(2.1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  box-sizing:border-box;
}
.wg-entry-head{text-align:center;}
.wg-entry-head h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.75rem,5.6vw,4.25rem);
  letter-spacing:.08em;
  text-transform:none;
  color:#f4dfaa;
  text-shadow:0 2px 24px rgba(0,0,0,.8),0 0 24px rgba(224,196,128,.12);
}
.wg-lotus{
  position:relative;
  align-self:center;
  width:min(76rem,96vw);
  min-height:min(64vh, 43rem);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(9rem,1fr) minmax(9rem,24vw) minmax(9rem,1fr);
  grid-template-rows:repeat(3,minmax(6rem,1fr));
  column-gap:clamp(2.6rem,7vw,8rem);
  row-gap:clamp(.1rem,1.2vh,.75rem);
  align-items:center;
}
.wg-flame{
  grid-column:2;
  grid-row:1 / 4;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  pointer-events:none;
}
.wg-flame::before{
  content:"";
  position:absolute;
  width:min(31vw,25rem);
  aspect-ratio:1;
  border:1px solid rgba(227,205,149,.20);
  border-radius:50%;
  box-shadow:0 0 0 1.6rem rgba(255,255,255,.012),0 0 80px rgba(229,211,159,.09);
}
.wg-flame-svg{
  width:min(14rem,21vw);
  max-height:54vh;
  filter:drop-shadow(0 0 20px rgba(255,244,205,.35));
}
.wg-petal{
  position:relative;
  appearance:none;
  width:min(24rem,100%);
  min-height:clamp(5.2rem,11vh,8.8rem);
  border:0;
  color:#6f5530;
  background:
    radial-gradient(ellipse at 55% 50%, rgba(255,255,255,.98), rgba(248,241,221,.94) 58%, rgba(231,214,173,.91) 100%);
  clip-path:polygon(0 50%, 14% 16%, 61% 1%, 100% 50%, 61% 99%, 14% 84%);
  box-shadow:none;
  cursor:pointer;
  transition:filter .28s ease, transform .28s ease;
  justify-self:end;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.wg-petal::before{
  content:"";
  position:absolute;
  inset:4px;
  clip-path:inherit;
  border:1px solid rgba(193,148,64,.72);
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 52%,rgba(211,169,87,.12));
  z-index:-1;
}
.wg-petal::after{
  content:"";
  position:absolute;
  inset:18% 13%;
  background:linear-gradient(90deg,transparent 0 42%,rgba(198,164,94,.25) 49%,rgba(198,164,94,.12) 51%,transparent 58%);
  opacity:.8;
  z-index:-1;
}
.wg-petal span{
  font-family:var(--font-display);
  font-size:clamp(1rem,2.4vw,1.85rem);
  letter-spacing:.055em;
  color:#725026;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.wg-petal.left{grid-column:1; transform-origin:100% 50%;}
.wg-petal.right{grid-column:3; justify-self:start; transform-origin:0 50%;}
.wg-petal.row-1{grid-row:1;}
.wg-petal.row-2{grid-row:2;}
.wg-petal.row-3{grid-row:3;}
.wg-petal.left.row-1{transform:rotate(-15deg);}
.wg-petal.left.row-1 span{transform:rotate(15deg);}
.wg-petal.left.row-3{transform:rotate(15deg);}
.wg-petal.left.row-3 span{transform:rotate(-15deg);}
.wg-petal.right.row-1{transform:rotate(15deg) scaleX(-1);}
.wg-petal.right.row-1 span{transform:rotate(-15deg) scaleX(-1);}
.wg-petal.right.row-2{transform:scaleX(-1);}
.wg-petal.right.row-2 span{transform:scaleX(-1);}
.wg-petal.right.row-3{transform:rotate(-15deg) scaleX(-1);}
.wg-petal.right.row-3 span{transform:rotate(15deg) scaleX(-1);}
.wg-petal:hover,.wg-petal:focus-visible{outline:none;filter:brightness(1.08) drop-shadow(0 0 16px rgba(246,223,166,.32));}
.wg-entry-foot{text-align:center;display:grid;gap:.7rem;place-items:center;}
.wg-entry-foot p{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  color:#ead8a9;
  font-size:clamp(1.05rem,2.4vw,1.55rem);
}
.wg-quiet{
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(230,208,154,.35);
  background:transparent;
  color:rgba(233,225,209,.72);
  font:500 .78rem var(--font-body);
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:.35rem .1rem;
  cursor:pointer;
}
.wg-quiet:hover,.wg-quiet:focus-visible{outline:none;color:#fff1c8;border-color:#e1c783;}

/* Maestro */
.wg-master-screen{display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));box-sizing:border-box;}
.wg-master-layout{
  position:relative;z-index:1;
  width:min(78rem,96vw);
  min-height:min(90dvh,54rem);
  display:grid;
  grid-template-columns:minmax(18rem,.88fr) minmax(22rem,1.12fr);
  background:rgba(7,8,12,.74);
  border:1px solid rgba(222,194,128,.38);
  box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}
.wg-master-visual{position:relative;min-height:40rem;background:#020304;overflow:hidden;}
.wg-master-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 68%,rgba(7,8,12,.72) 100%);pointer-events:none;}
.wg-master-visual img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.wg-master-copy{
  padding:clamp(1.3rem,3vw,2.7rem);
  max-height:90dvh;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(220,190,120,.38) transparent;
}
.wg-master-heading{margin-bottom:1.05rem;text-align:left;}
.wg-master-heading h1{margin:0;color:#edcf88;font-family:var(--font-display);font-weight:500;letter-spacing:.16em;font-size:clamp(1.55rem,3.6vw,2.8rem);}
.wg-master-heading p{margin:.15rem 0 0;color:#cbb784;font-family:var(--font-display);font-style:italic;font-size:clamp(1rem,2.1vw,1.38rem);}
.wg-text-block{padding:.68rem 0;border-top:1px solid rgba(225,199,137,.15);}
.wg-text-block h3{margin:0 0 .3rem;color:#bfa467;font-family:var(--font-body);font-size:.68rem;letter-spacing:.18em;font-weight:600;}
.wg-text-block p{margin:.23rem 0;color:#eee7d7;font-family:var(--font-display);font-size:clamp(1.03rem,1.75vw,1.28rem);line-height:1.36;}
.wg-text-block.clave p,.wg-text-block.pregunta p{color:#fff1c9;}
.wg-question{font-style:italic;}
.wg-master-quote{margin:.95rem 0 1.1rem;padding:.85rem 1rem;border-left:2px solid rgba(225,197,125,.62);background:rgba(218,186,111,.055);color:#f2dba0;font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.38;}
.wg-master-actions,.wg-spark-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.85rem;}
.wg-btn{
  appearance:none;
  min-height:2.8rem;
  padding:.68rem 1rem;
  border:1px solid rgba(213,181,108,.48);
  border-radius:.25rem;
  background:rgba(8,9,12,.72);
  color:#dcc58f;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
}
.wg-btn.primary{background:linear-gradient(180deg,rgba(177,138,64,.30),rgba(56,43,24,.58));border-color:rgba(232,202,132,.72);color:#fff0c7;}
.wg-btn.secondary{border-color:rgba(213,181,108,.22);color:rgba(232,220,194,.68);}
.wg-btn:hover,.wg-btn:focus-visible{outline:none;color:#fff7dd;border-color:#f0d28c;box-shadow:0 0 20px rgba(224,193,120,.13);}

/* Chispitas */
.wg-spark-screen{display:grid;place-items:center;padding:1rem;overflow:hidden;background:#030406;}
.wg-spark-screen::after{content:"";position:fixed;inset:-3%;background-image:var(--wg-master-image);background-size:cover;background-position:center 22%;filter:blur(9px) saturate(.55) brightness(.32);transform:scale(1.05);z-index:0;}
.wg-spark-shade{position:fixed;inset:0;background:radial-gradient(circle at center,rgba(5,6,9,.36),rgba(2,3,5,.86) 70%);z-index:1;}
.wg-spark-card{position:relative;z-index:2;width:min(42rem,90vw);padding:clamp(1.5rem,4vw,3rem);text-align:center;border:1px solid rgba(231,206,147,.43);background:rgba(8,9,12,.84);backdrop-filter:blur(12px);box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 48px rgba(225,205,154,.07);}
.wg-spark-card h1{margin:.2rem 0 1.2rem;color:#d8bb78;font:500 clamp(1.15rem,3vw,1.75rem) var(--font-body);letter-spacing:.19em;}
.wg-spark-card>p{margin:0 auto;color:#fff0cc;font:italic clamp(1.45rem,4vw,2.35rem)/1.38 var(--font-display);max-width:34rem;}
.wg-spark-count{display:block;color:rgba(226,213,184,.50);font:.7rem var(--font-body);letter-spacing:.15em;}
.wg-spark-actions{justify-content:center;margin-top:1.7rem;}

/* Sócrates */
.wg-socrates-screen{display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));}
.wg-socrates-layout{position:relative;z-index:1;width:min(72rem,96vw);min-height:min(88dvh,52rem);display:grid;grid-template-columns:minmax(18rem,.9fr) minmax(20rem,1.1fr);overflow:hidden;border:1px solid rgba(225,197,127,.38);background:rgba(7,8,12,.78);box-shadow:0 24px 70px rgba(0,0,0,.48);}
.wg-socrates-visual{background:#030405;overflow:hidden;}
.wg-socrates-visual img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.wg-socrates-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(1.4rem,4vw,3.5rem);}
.wg-socrates-kicker{margin:0 0 .55rem;color:#c8a85e;font:600 .72rem var(--font-body);letter-spacing:.20em;}
.wg-socrates-copy h1{margin:0 0 1.7rem;color:#efd690;font:500 clamp(1.8rem,4vw,3.2rem)/1.08 var(--font-display);letter-spacing:.05em;}
.wg-socrates-question{margin:0 0 2rem;color:#fff1cc;font:italic clamp(1.35rem,3vw,2.05rem)/1.4 var(--font-display);}

/* Hermes */
.wg-hermes-screen{display:grid;place-items:center;overflow:hidden;background:#010203;}
.wg-hermes-card{position:relative;z-index:1;width:min(100vw,56.28dvh);aspect-ratio:941/1672;max-height:100dvh;}
.wg-hermes-card img{width:100%;height:100%;object-fit:contain;display:block;}
.wg-hermes-hotspot{position:absolute;left:26.3%;width:47.4%;bottom:4.3%;height:6.8%;appearance:none;border:1px solid transparent;border-radius:999px;background:transparent;color:transparent;cursor:pointer;}
.wg-hermes-hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.wg-hermes-hotspot:hover,.wg-hermes-hotspot:focus-visible{outline:none;border-color:rgba(236,205,132,.72);box-shadow:0 0 24px rgba(226,195,125,.26),inset 0 0 0 1px rgba(255,255,255,.08);}

@media (max-width: 820px) {
  .whitedoor-entry{bottom:calc(max(.75rem, env(safe-area-inset-bottom)) + 3.55rem);min-width:58vw;padding:.72rem 1rem;font-size:.72rem}
  .wg-lotus{grid-template-columns:minmax(6rem,1fr) minmax(5.6rem,24vw) minmax(6rem,1fr);column-gap:clamp(1.4rem,5vw,2.7rem);min-height:60vh;}
  .wg-petal{min-height:clamp(4.4rem,10vh,6.2rem);}
  .wg-petal span{font-size:clamp(.78rem,3.1vw,1.08rem);letter-spacing:.025em;}
  .wg-flame-svg{width:min(8.5rem,23vw);}
  .wg-master-layout,.wg-socrates-layout{grid-template-columns:1fr;min-height:auto;}
  .wg-master-visual{min-height:0;max-height:48dvh;}
  .wg-master-visual img{height:auto;max-height:48dvh;object-fit:contain;background:#020304;}
  .wg-master-visual::after{display:none;}
  .wg-master-copy{max-height:none;overflow:visible;padding:1rem 1rem 1.4rem;}
  .wg-master-heading{text-align:center;}
  .wg-master-actions{justify-content:center;}
  .wg-socrates-visual img{height:auto;max-height:58dvh;object-fit:contain;background:#020304;}
  .wg-socrates-copy{align-items:center;text-align:center;padding:1.2rem 1rem 1.5rem;}
  .wg-socrates-copy h1{margin-bottom:.9rem;}
  .wg-socrates-question{margin-bottom:1.2rem;}
}

@media (max-width: 520px) {
  .wg-entry-shell{padding-top:max(1.15rem, env(safe-area-inset-top));}
  .wg-entry-head h1{font-size:clamp(1.45rem,8vw,2rem);}
  .wg-lotus{width:98vw;grid-template-columns:minmax(5.6rem,1fr) minmax(4.6rem,22vw) minmax(5.6rem,1fr);column-gap:.55rem;min-height:62vh;}
  .wg-petal{min-height:4.4rem;}
  .wg-petal span{font-size:clamp(.69rem,3.1vw,.9rem);}
  .wg-flame::before{width:30vw;}
  .wg-entry-foot p{font-size:1.05rem;}
  .wg-text-block p{font-size:1.05rem;}
  .wg-master-actions .wg-btn{flex:1 1 44%;}
  .wg-master-actions .wg-btn.primary{flex-basis:100%;}
  .wg-spark-card{padding:1.35rem 1rem 1.55rem;}
}

/* v73.1 — afinado del loto: seis pétalos laterales, centro libre */
.wg-lotus{
  grid-template-columns:minmax(12rem,31%) minmax(14rem,38%) minmax(12rem,31%);
  column-gap:0;
}
.wg-petal{width:min(20.5rem,86%);min-height:clamp(4.8rem,10vh,7.4rem);}
.wg-petal.left{justify-self:end;}
.wg-petal.right{justify-self:start;}
.wg-petal.left.row-1{transform:rotate(-11deg);}
.wg-petal.left.row-1 span{transform:rotate(11deg);}
.wg-petal.left.row-2{transform:none;}
.wg-petal.left.row-2 span{transform:none;}
.wg-petal.left.row-3{transform:rotate(11deg);}
.wg-petal.left.row-3 span{transform:rotate(-11deg);}
.wg-petal.right.row-1{transform:rotate(11deg);}
.wg-petal.right.row-1 span{transform:rotate(-11deg);}
.wg-petal.right.row-2{transform:none;}
.wg-petal.right.row-2 span{transform:none;}
.wg-petal.right.row-3{transform:rotate(-11deg);}
.wg-petal.right.row-3 span{transform:rotate(11deg);}
.wg-flame::before{width:min(27vw,22rem);}

@media (max-width:820px){
  .wg-lotus{grid-template-columns:minmax(5.8rem,31%) minmax(6.6rem,38%) minmax(5.8rem,31%);column-gap:0;}
  .wg-petal{width:90%;}
}
@media (max-width:520px){
  .wg-lotus{grid-template-columns:minmax(5.3rem,31%) minmax(5.8rem,38%) minmax(5.3rem,31%);column-gap:0;}
  .wg-petal{width:94%;}
}
@media (max-width:520px){
  .wg-petal{width:98%;min-height:3.7rem;}
  .wg-petal span{font-size:clamp(.66rem,2.9vw,.86rem);}
}


/* v74 — Puerta Blanca: recinto antiguo, legibilidad y encuadre responsive */
.whitegate-screen {
  background-color: #2b2016;
  background-image:
    linear-gradient(180deg, rgba(40, 28, 18, .36), rgba(20, 14, 10, .58)),
    radial-gradient(circle at 50% 24%, rgba(248, 226, 169, .18), transparent 36%),
    url("../assets/space/muro.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-attachment: fixed;
}
.whitegate-screen::before {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 239, 190, .11), transparent 30%),
    linear-gradient(90deg, rgba(49, 29, 14, .20), transparent 18%, transparent 82%, rgba(49, 29, 14, .20));
  box-shadow: inset 0 0 110px rgba(30, 17, 8, .48);
}

/* Entrada: seis accesos, no botones genéricos */
.wg-entry-shell {
  width: min(100%, 76rem);
  padding: max(2rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2.4rem) max(1.2rem, env(safe-area-inset-bottom));
  gap: clamp(1rem, 2.3vh, 1.7rem);
}
.wg-entry-head {
  position: relative;
  padding: .35rem 0 .75rem;
}
.wg-entry-kicker {
  margin: 0 0 .35rem;
  color: #d9bd79;
  font: 500 clamp(.72rem, 1.2vw, .86rem) var(--font-body);
  letter-spacing: .30em;
}
.wg-entry-head h1 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: .07em;
  color: #f5e4b3;
}
.wg-entry-subtitle {
  margin: .55rem 0 0;
  color: #efe3c6;
  font: italic clamp(1.12rem, 2vw, 1.45rem) var(--font-display);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .68);
}
.wg-master-grid {
  position: relative;
  z-index: 1;
  width: min(58rem, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.35rem);
  align-self: center;
}
.wg-master-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.08 / 1;
  overflow: hidden;
  appearance: none;
  border: 1px solid rgba(223, 190, 114, .64);
  border-radius: .35rem;
  padding: 0;
  background: rgba(51, 36, 23, .62);
  box-shadow:
    0 14px 32px rgba(22, 13, 7, .34),
    inset 0 0 0 1px rgba(255, 247, 221, .07);
  cursor: pointer;
  isolation: isolate;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.wg-master-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(15, 10, 7, .26) 58%, rgba(15, 10, 7, .90) 100%);
  z-index: 1;
  pointer-events: none;
}
.wg-master-tile-image,
.wg-master-tile-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wg-master-tile-image img {
  object-fit: contain;
  object-position: center center;
  padding-top: .3rem;
  filter: saturate(.84) contrast(1.02) brightness(.94);
  transform: none;
  background: radial-gradient(circle at 50% 24%, rgba(231,198,116,.10), transparent 30%), linear-gradient(180deg, rgba(59,41,25,.45), rgba(24,17,12,.78));
}
.wg-master-tile-copy {
  position: absolute;
  z-index: 2;
  left: .7rem;
  right: .7rem;
  bottom: .62rem;
  display: grid;
  gap: .08rem;
  text-align: center;
  text-shadow: 0 2px 10px #000;
}
.wg-master-tile-copy strong {
  color: #f6df9e;
  font: 600 clamp(1rem, 1.9vw, 1.34rem) var(--font-display);
  letter-spacing: .09em;
}
.wg-master-tile-copy em {
  color: #f0e5ca;
  font: italic clamp(.82rem, 1.35vw, 1rem) var(--font-display);
}
.wg-master-tile:hover,
.wg-master-tile:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: #efcf82;
  box-shadow: 0 18px 40px rgba(22, 13, 7, .42), 0 0 26px rgba(225, 191, 110, .16);
}
.wg-entry-foot p {
  color: #f0dfb6;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
}

/* Maestro: imagen completa y texto legible */
.wg-master-screen {
  padding: max(1.2rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));
}
.wg-master-layout {
  width: min(78rem, calc(100vw - 2.4rem));
  min-height: min(91dvh, 54rem);
  grid-template-columns: minmax(22rem, .94fr) minmax(26rem, 1.06fr);
  border: 1px solid rgba(224, 192, 119, .44);
  border-radius: .4rem;
  background:
    linear-gradient(135deg, rgba(66, 45, 27, .68), rgba(28, 20, 15, .76));
  box-shadow: 0 24px 70px rgba(23, 13, 6, .44), inset 0 0 0 1px rgba(255,255,255,.035);
}
.wg-master-visual {
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(.8rem, 1.6vw, 1.3rem);
  background:
    radial-gradient(circle at 50% 36%, rgba(226, 194, 118, .12), transparent 52%),
    rgba(46, 31, 19, .40);
}
.wg-master-visual::after {
  display: none;
}
.wg-master-visual img {
  width: 100%;
  height: min(86dvh, 50rem);
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.wg-master-copy {
  padding: clamp(1.5rem, 2.8vw, 2.6rem);
  max-height: 91dvh;
  background: linear-gradient(180deg, rgba(31, 22, 16, .48), rgba(30, 21, 15, .66));
}
.wg-master-heading {
  margin-bottom: 1.15rem;
  text-align: left;
}
.wg-master-heading h1 {
  color: #f0d48e;
  font-size: clamp(2rem, 3vw, 2.9rem);
  letter-spacing: .13em;
}
.wg-master-heading p {
  color: #e7d5a8;
  font-size: clamp(1.22rem, 1.8vw, 1.48rem);
}
.wg-text-block {
  padding: .82rem 0;
  border-top-color: rgba(233, 207, 147, .22);
}
.wg-text-block h3 {
  margin-bottom: .38rem;
  color: #d4b770;
  font-size: .82rem;
  letter-spacing: .19em;
}
.wg-text-block p {
  margin: .28rem 0;
  color: #fbf4e5;
  font-size: clamp(1.16rem, 1.55vw, 1.36rem);
  line-height: 1.48;
}
.wg-text-block.clave p,
.wg-text-block.pregunta p {
  color: #fff0bd;
}
.wg-master-quote {
  margin: 1.1rem 0 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(227, 191, 108, .09);
  color: #f7dfa0;
  font-size: clamp(1.22rem, 1.65vw, 1.47rem);
  line-height: 1.45;
}
.wg-master-actions,
.wg-spark-actions,
.wg-socrates-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .72rem;
  margin-top: 1rem;
}
.wg-btn {
  min-height: 3.15rem;
  padding: .82rem 1.15rem;
  border-radius: 999px;
  background: rgba(44, 31, 20, .70);
  color: #f1dba7;
  font-size: .86rem;
  letter-spacing: .09em;
}
.wg-btn.primary {
  background: linear-gradient(180deg, rgba(188, 147, 66, .48), rgba(78, 57, 29, .78));
}
.wg-btn.secondary {
  border-color: rgba(216, 184, 110, .35);
  color: #eadfc6;
}

/* Destello: mantener la atmósfera del muro y texto generoso */
.wg-spark-screen {
  padding: clamp(1rem, 3vw, 2rem);
  background-color: #2b2016;
  background-image:
    linear-gradient(180deg, rgba(37, 25, 16, .46), rgba(18, 13, 9, .74)),
    url("../assets/space/muro.jpg");
  background-size: cover;
  background-position: center;
}
.wg-spark-screen::after {
  opacity: .34;
  filter: blur(14px) saturate(.55) brightness(.44);
}
.wg-spark-card {
  width: min(46rem, 94vw);
  padding: clamp(1.7rem, 4vw, 3.2rem);
  border-radius: .4rem;
  background: rgba(43, 30, 20, .80);
  border-color: rgba(235, 207, 142, .54);
}
.wg-spark-card h1 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.wg-spark-card > p {
  font-size: clamp(1.62rem, 3.6vw, 2.4rem);
  line-height: 1.42;
}

/* Sócrates: aparición excepcional, sin recorte */
.wg-socrates-screen {
  padding: max(1.2rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));
}
.wg-socrates-layout {
  width: min(74rem, calc(100vw - 2.4rem));
  min-height: min(90dvh, 53rem);
  grid-template-columns: minmax(26rem, 1.06fr) minmax(22rem, .94fr);
  border-radius: .4rem;
  background: linear-gradient(135deg, rgba(66, 45, 27, .68), rgba(28, 20, 15, .78));
}
.wg-socrates-visual {
  display: grid;
  place-items: center;
  padding: clamp(.8rem, 1.6vw, 1.3rem);
  background: radial-gradient(circle at 48% 35%, rgba(228, 195, 118, .12), transparent 52%), rgba(45, 31, 20, .38);
}
.wg-socrates-visual img {
  width: 100%;
  height: min(90dvh, 54rem);
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.wg-socrates-copy {
  padding: clamp(1.6rem, 3.4vw, 3.2rem);
  background: linear-gradient(180deg, rgba(32, 23, 16, .45), rgba(30, 21, 15, .64));
}
.wg-socrates-kicker {
  color: #d4b66f;
  font-size: .86rem;
}
.wg-socrates-copy h1 {
  color: #f3d990;
  font-size: clamp(2.05rem, 3.8vw, 3.25rem);
}
.wg-socrates-question {
  color: #fff1c9;
  font-size: clamp(1.48rem, 2.5vw, 2.08rem);
  line-height: 1.46;
}

/* Hermes: escena realmente de pantalla completa.
   En PC, el retrato permanece íntegro y las bandas laterales se prolongan
   con la misma imagen, evitando negro y conservando todo el arte. */
.wg-hermes-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #18120d;
}
.wg-hermes-screen::before {
  content: "";
  position: absolute;
  inset: -5%;
  background-image:
    linear-gradient(rgba(17, 12, 9, .44), rgba(17, 12, 9, .44)),
    url("../assets/puerta-blanca/hermes-salida-maestros.png");
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(.68) brightness(.70);
  transform: scale(1.08);
  box-shadow: none;
  z-index: 0;
}
.wg-hermes-card {
  position: relative;
  z-index: 1;
  width: min(100vw, calc(100dvh * 0.563));
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  display: grid;
  place-items: center;
}
.wg-hermes-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 34px rgba(0,0,0,.50));
}
.wg-hermes-hotspot {
  position: absolute;
  left: 26.3%;
  width: 47.4%;
  bottom: 2.75%;
  height: 7.25%;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.wg-hermes-hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wg-hermes-hotspot:hover,
.wg-hermes-hotspot:focus-visible {
  outline: none;
  border-color: rgba(236,205,132,.78);
  box-shadow: 0 0 28px rgba(226,195,125,.28), inset 0 0 0 1px rgba(255,255,255,.10);
}

@media (max-width: 820px) {
  .whitegate-screen {
    background-image:
      linear-gradient(180deg, rgba(40, 28, 18, .34), rgba(20, 14, 10, .56)),
      radial-gradient(circle at 50% 20%, rgba(248, 226, 169, .16), transparent 36%),
      url("../assets/space/muro-vertical.jpg");
  }
  .wg-entry-shell {
    width: 100%;
    padding-inline: clamp(.8rem, 3.3vw, 1.15rem);
  }
  .wg-entry-head h1 {
    font-size: clamp(1.8rem, 7vw, 2.7rem);
  }
  .wg-master-grid {
    width: min(100%, 38rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem;
  }
  .wg-master-tile {
    aspect-ratio: 1.02 / 1;
  }
  .wg-master-tile-copy {
    left: .45rem;
    right: .45rem;
    bottom: .46rem;
  }
  .wg-master-tile-copy strong {
    font-size: clamp(.96rem, 4.2vw, 1.2rem);
  }
  .wg-master-tile-copy em {
    font-size: clamp(.78rem, 3.3vw, .94rem);
  }

  .wg-master-layout,
  .wg-socrates-layout {
    width: min(100%, 42rem);
    min-height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .wg-master-visual,
  .wg-socrates-visual {
    min-height: 0;
    max-height: none;
    padding: .9rem .9rem .25rem;
    overflow: visible;
  }
  .wg-master-visual img,
  .wg-socrates-visual img {
    width: min(100%, 35rem);
    height: auto;
    max-height: none;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
  }
  .wg-master-copy {
    max-height: none;
    overflow: visible;
    padding: 1rem 1.05rem 1.35rem;
  }
  .wg-master-heading {
    text-align: center;
  }
  .wg-master-heading h1 {
    font-size: clamp(1.9rem, 7vw, 2.55rem);
  }
  .wg-master-heading p {
    font-size: clamp(1.18rem, 4.6vw, 1.4rem);
  }
  .wg-text-block h3 {
    font-size: .80rem;
  }
  .wg-text-block p {
    font-size: clamp(1.16rem, 4.7vw, 1.32rem);
    line-height: 1.52;
  }
  .wg-master-quote {
    font-size: clamp(1.22rem, 5vw, 1.42rem);
  }
  .wg-master-actions,
  .wg-spark-actions,
  .wg-socrates-actions {
    justify-content: center;
  }
  .wg-master-actions .wg-btn,
  .wg-spark-actions .wg-btn,
  .wg-socrates-actions .wg-btn {
    min-height: 3.2rem;
  }
  .wg-master-actions .wg-btn.secondary,
  .wg-socrates-actions .wg-btn.secondary {
    flex-basis: 100%;
  }

  .wg-spark-screen {
    background-image:
      linear-gradient(180deg, rgba(37, 25, 16, .44), rgba(18, 13, 9, .72)),
      url("../assets/space/muro-vertical.jpg");
  }
  .wg-spark-card {
    width: min(94vw, 39rem);
  }

  .wg-socrates-copy {
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.05rem 1.5rem;
  }
  .wg-socrates-copy h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .wg-socrates-question {
    font-size: clamp(1.42rem, 5.8vw, 1.82rem);
  }
}

@media (max-width: 520px) {
  .wg-entry-shell {
    padding-top: max(1rem, env(safe-area-inset-top));
    gap: .8rem;
  }
  .wg-entry-kicker {
    font-size: .67rem;
  }
  .wg-entry-head h1 {
    font-size: clamp(1.65rem, 7.4vw, 2.2rem);
  }
  .wg-entry-subtitle {
    font-size: 1.08rem;
  }
  .wg-master-grid {
    gap: .55rem;
  }
  .wg-master-tile {
    aspect-ratio: .96 / 1;
  }
  .wg-master-tile-copy strong {
    font-size: clamp(.92rem, 4.5vw, 1.08rem);
  }
  .wg-master-tile-copy em {
    font-size: clamp(.75rem, 3.4vw, .88rem);
  }
  .wg-entry-foot {
    gap: .48rem;
  }
  .wg-entry-foot p {
    font-size: 1.08rem;
  }

  .wg-master-screen,
  .wg-socrates-screen {
    padding: max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));
  }
  .wg-master-layout,
  .wg-socrates-layout {
    width: 100%;
  }
  .wg-master-visual,
  .wg-socrates-visual {
    padding: .65rem .65rem .2rem;
  }
  .wg-master-copy {
    padding: .9rem .92rem 1.2rem;
  }
  .wg-text-block {
    padding: .72rem 0;
  }
  .wg-text-block p {
    font-size: clamp(1.14rem, 5vw, 1.26rem);
  }
  .wg-master-quote {
    padding: .9rem .92rem;
    font-size: clamp(1.18rem, 5.2vw, 1.34rem);
  }
  .wg-master-actions,
  .wg-spark-actions,
  .wg-socrates-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .wg-btn {
    width: 100%;
    min-height: 3.25rem;
    font-size: .83rem;
  }
  .wg-spark-card {
    padding: 1.45rem 1rem 1.6rem;
  }
  .wg-spark-card > p {
    font-size: clamp(1.5rem, 6.6vw, 1.95rem);
  }
  .wg-socrates-copy {
    padding: 1.1rem .95rem 1.35rem;
  }
  .wg-hermes-card {
    width: min(100vw, calc(100dvh * 0.563));
    height: 100dvh;
  }
  .wg-hermes-hotspot {
    left: 25.2%;
    width: 49.6%;
    bottom: 2.55%;
    height: 7.6%;
  }
}


/* Fénix — lámina final y créditos de la Puerta Blanca */
.wg-fenix-screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: max(1.1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 37%, rgba(255, 222, 132, .22), transparent 18%),
    radial-gradient(ellipse at 50% 48%, rgba(173, 74, 28, .18), transparent 42%),
    linear-gradient(180deg, rgba(34, 24, 16, .52), rgba(17, 12, 9, .86)),
    url("../assets/space/muro.jpg") center/cover fixed;
}
.wg-fenix-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 26%, rgba(8, 6, 5, .48) 100%);
  z-index: 0;
}
.wg-fenix-wings {
  position: fixed;
  z-index: 0;
  left: 50%;
  top: 43%;
  width: min(72rem, 94vw);
  height: min(34rem, 58vh);
  transform: translate(-50%, -50%);
  opacity: .46;
  pointer-events: none;
}
.wg-fenix-wings span {
  position: absolute;
  top: 12%;
  width: 50%;
  height: 72%;
  border-top: 2px solid rgba(244, 201, 105, .44);
  filter: drop-shadow(0 0 14px rgba(211, 105, 34, .28));
}
.wg-fenix-wings span:first-child {
  right: 50%;
  border-radius: 100% 0 0 0;
  transform: rotate(13deg) skewY(-11deg);
  transform-origin: right center;
  background: radial-gradient(ellipse at 100% 50%, rgba(227, 132, 47, .10), transparent 65%);
}
.wg-fenix-wings span:last-child {
  left: 50%;
  border-radius: 0 100% 0 0;
  transform: rotate(-13deg) skewY(11deg);
  transform-origin: left center;
  background: radial-gradient(ellipse at 0 50%, rgba(227, 132, 47, .10), transparent 65%);
}
.wg-fenix-shell {
  position: relative;
  z-index: 1;
  width: min(46rem, 94vw);
  min-height: min(46rem, calc(100dvh - 2.4rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.3rem, 3.5vw, 2.8rem);
  border: 1px solid rgba(233, 201, 127, .34);
  border-radius: .55rem;
  background: linear-gradient(180deg, rgba(48, 33, 21, .58), rgba(24, 17, 12, .78));
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 0 50px rgba(226, 176, 77, .035);
  backdrop-filter: blur(4px);
}
.wg-fenix-emblem {
  width: clamp(3.4rem, 8vw, 5.6rem);
  height: clamp(5.4rem, 12vw, 8rem);
  margin-bottom: -.35rem;
  overflow: hidden;
  filter: sepia(.2) drop-shadow(0 0 16px rgba(245, 177, 62, .38));
}
.wg-fenix-emblem .wg-flame-svg {
  width: 100%;
  height: 100%;
}
.wg-fenix-kicker {
  margin: 0 0 .25rem;
  color: #d6b86d;
  font: 500 .78rem var(--font-body);
  letter-spacing: .29em;
}
.wg-fenix-shell h1 {
  margin: 0;
  color: #f3d994;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7vw, 4.8rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-shadow: 0 0 24px rgba(222, 164, 62, .18);
}
.wg-fenix-phrase {
  margin: .65rem 0 1.35rem;
  color: #fff0c1;
  font: italic 500 clamp(1.35rem, 3.2vw, 1.9rem)/1.42 var(--font-display);
}
.wg-fenix-credits {
  width: min(34rem, 100%);
  margin: .15rem auto 1rem;
  padding: .9rem 0;
  border-top: 1px solid rgba(231, 199, 123, .24);
  border-bottom: 1px solid rgba(231, 199, 123, .24);
}
.wg-fenix-credits p {
  display: grid;
  grid-template-columns: minmax(8.8rem, .8fr) minmax(0, 1.5fr);
  gap: .85rem;
  align-items: baseline;
  margin: .42rem 0;
  text-align: left;
}
.wg-fenix-credits span {
  color: #c9aa65;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wg-fenix-credits strong {
  color: #f6ead0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  font-weight: 500;
}
.wg-fenix-signoff {
  margin: .15rem 0 1.15rem;
  color: rgba(237, 219, 181, .72);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wg-fenix-return {
  min-width: min(18rem, 82vw);
  min-height: 3.15rem;
  padding: .78rem 1.3rem;
  border: 1px solid rgba(239, 207, 132, .68);
  border-radius: 999px;
  background: rgba(35, 25, 17, .64);
  color: #fff0c2;
  font: 500 .82rem var(--font-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.wg-fenix-return:hover,
.wg-fenix-return:focus-visible {
  outline: none;
  border-color: #f4d995;
  box-shadow: 0 0 28px rgba(236, 204, 128, .20);
}
@media (max-width: 620px) {
  .wg-fenix-screen {
    background:
      radial-gradient(circle at 50% 32%, rgba(255, 222, 132, .19), transparent 17%),
      radial-gradient(ellipse at 50% 46%, rgba(173, 74, 28, .17), transparent 40%),
      linear-gradient(180deg, rgba(34, 24, 16, .48), rgba(17, 12, 9, .84)),
      url("../assets/space/muro-vertical.jpg") center/cover fixed;
  }
  .wg-fenix-shell {
    width: 100%;
    min-height: calc(100dvh - 2rem);
    padding: 1.1rem .95rem 1.35rem;
  }
  .wg-fenix-credits p {
    grid-template-columns: 1fr;
    gap: .12rem;
    text-align: center;
    margin: .58rem 0;
  }
  .wg-fenix-credits span,
  .wg-fenix-credits strong { text-align: center; }
  .wg-fenix-wings { top: 34%; opacity: .34; }
  .wg-fenix-return { min-height: 3.3rem; }
}

.wg-fenix-final-screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: max(.6rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left));
  background: #0c0a08;
}
.wg-fenix-final-card {
  position: relative;
  width: min(760px, 96vw);
}
.wg-fenix-final-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .25rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
}
.wg-fenix-final-hit {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 2.5%;
  height: 8.5%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.wg-fenix-final-hit:focus-visible {
  outline: 2px solid rgba(255,240,194,.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(212,164,86,.35);
}
@media (max-width: 620px) {
  .wg-fenix-final-card { width: min(520px, 98vw); }
  .wg-fenix-final-hit { left: 19%; right: 19%; bottom: 2.4%; height: 8.9%; }
}

.screen-guardianes-camino .actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;}


/* v79 — Hermes de salida con imagen horizontal de pantalla completa */
.wg-hermes-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #100c09;
}
.wg-hermes-screen::before {
  content: "";
  position: absolute;
  inset: -4%;
  background-image:
    linear-gradient(rgba(17, 12, 9, .34), rgba(17, 12, 9, .46)),
    url("../assets/puerta-blanca/hermes-salida-maestros.png");
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(.72) brightness(.54);
  transform: scale(1.08);
  z-index: 0;
}
.wg-hermes-card {
  position: relative;
  z-index: 1;
  width: min(100vw, 1400px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: max(.45rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) max(.9rem, env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));
}
.wg-hermes-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 5.8rem);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 32px rgba(0,0,0,.38));
}
.wg-hermes-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: .1rem;
}
.wg-hermes-return {
  min-width: min(22rem, 82vw);
  min-height: 3.2rem;
  padding: .82rem 1.4rem;
  border: 1px solid rgba(239, 207, 132, .76);
  border-radius: 999px;
  background: rgba(28, 21, 15, .74);
  backdrop-filter: blur(8px);
  color: #fff0c2;
  font: 500 .84rem var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
  box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 22px rgba(227, 193, 112, .12);
}
.wg-hermes-return:hover,
.wg-hermes-return:focus-visible {
  outline: none;
  border-color: #f5da98;
  color: #fff9df;
  box-shadow: 0 0 28px rgba(236, 204, 128, .24);
}
@media (max-width: 820px) {
  .wg-hermes-card {
    width: 100vw;
    gap: .65rem;
    padding: max(.25rem, env(safe-area-inset-top)) max(.25rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.25rem, env(safe-area-inset-left));
  }
  .wg-hermes-card img {
    max-height: calc(100dvh - 5.6rem);
  }
  .wg-hermes-return {
    min-width: min(18rem, 80vw);
    min-height: 3.25rem;
    font-size: .78rem;
  }
}


/* v81 — catálogo «Conoce a quienes acompañan» */
.screen-guardianes-camino {
  width: min(1240px, 100%);
  min-height: 100dvh;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.1rem;
  overflow-y: auto;
  text-align: left;
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom) + 2rem);
}
.screen-guardianes-camino::before {
  inset: 2% 1.5%;
  background: radial-gradient(ellipse at 50% 12%, rgba(12, 8, 5, .76) 0%, rgba(12, 8, 5, .52) 55%, rgba(12, 8, 5, .2) 100%);
}
.companion-header {
  width: min(52rem, 100%);
  margin: 0 auto .4rem;
  text-align: center;
}
.companion-kicker {
  margin: 0 0 .35rem;
  color: var(--gold);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.companion-header .display.small {
  max-width: none;
  margin: 0;
  line-height: 1.08;
}
.companion-intro {
  max-width: 48rem;
  margin: .75rem auto 0;
  color: var(--ivory-dim);
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2.2vw, 1.28rem);
  line-height: 1.45;
}
.companion-note {
  width: min(54rem, 100%);
  margin: 0 auto;
  padding: .7rem .9rem;
  border-left: 2px solid rgba(224, 192, 106, .58);
  color: var(--ivory-mute);
  background: rgba(10, 9, 9, .35);
  font-size: .86rem;
  line-height: 1.45;
}
.companion-block-tabs,
.companion-path-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  width: 100%;
}
.companion-tab,
.companion-path-btn {
  min-height: 2.7rem;
  padding: .62rem .95rem;
  border: 1px solid rgba(224, 192, 106, .34);
  border-radius: 999px;
  background: rgba(18, 14, 11, .72);
  color: var(--ivory-dim);
  font: 500 .92rem/1.25 var(--font-body);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.companion-tab:hover,
.companion-tab:focus-visible,
.companion-path-btn:hover,
.companion-path-btn:focus-visible {
  border-color: var(--gold-light);
  color: var(--gold-light);
  outline: 2px solid rgba(243, 224, 168, .3);
  outline-offset: 2px;
}
.companion-tab[aria-pressed="true"],
.companion-path-btn[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(138, 110, 56, .28);
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(243, 224, 168, .08), 0 0 18px rgba(198, 164, 94, .1);
}
.companion-directory-section {
  width: 100%;
  margin: .25rem auto 0;
}
.companion-section-heading {
  margin: .2rem auto 1rem;
  text-align: center;
}
.companion-section-heading h2 {
  margin: 0;
  color: var(--gold-light);
  font: 600 clamp(1.6rem, 3.6vw, 2.35rem)/1.12 var(--font-display);
  letter-spacing: .045em;
}
.companion-section-heading p {
  max-width: 46rem;
  margin: .5rem auto 0;
  color: var(--ivory-dim);
  line-height: 1.45;
}
.companion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: .9rem;
  width: 100%;
  align-items: stretch;
}
.companion-card {
  display: grid;
  grid-template-columns: minmax(6.6rem, .37fr) minmax(0, 1fr);
  gap: .85rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid rgba(224, 192, 106, .24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 20, 15, .9), rgba(10, 12, 17, .82));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(243, 224, 168, .025);
  backdrop-filter: blur(5px);
}
.companion-card-media {
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(224, 192, 106, .32);
  border-radius: 9px;
  background: #0b0e16;
}
.companion-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: #0b0e16;
}
.companion-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.companion-tradition {
  margin: .05rem 0 .28rem;
  color: var(--gold);
  font-size: .69rem;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.companion-card-body h3 {
  margin: 0;
  color: var(--ivory);
  font: 600 clamp(1.28rem, 2.2vw, 1.65rem)/1.08 var(--font-display);
  overflow-wrap: anywhere;
}
.companion-role {
  margin: .34rem 0 0;
  color: var(--gold-light);
  font: italic 500 .93rem/1.35 var(--font-display);
}
.companion-summary {
  margin: .52rem 0 0;
  color: var(--ivory-dim);
  font-size: .88rem;
  line-height: 1.48;
}
.companion-sources {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin-top: auto;
  padding-top: .65rem;
  font-size: .75rem;
  line-height: 1.35;
}
.companion-sources-label {
  width: 100%;
  color: var(--ivory-mute);
}
.companion-sources a {
  color: var(--gold-light);
  text-decoration: underline;
  text-decoration-color: rgba(243, 224, 168, .42);
  text-underline-offset: .16em;
}
.companion-sources a:hover,
.companion-sources a:focus-visible {
  color: #fff4cf;
  text-decoration-color: currentColor;
}
.companion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  margin: .35rem auto 0;
}
.companion-actions .btn { min-width: min(15rem, 86vw); }

@media (max-width: 620px) {
  .screen-guardianes-camino {
    gap: .85rem;
    padding-left: max(.9rem, env(safe-area-inset-left));
    padding-right: max(.9rem, env(safe-area-inset-right));
  }
  .companion-block-tabs { gap: .4rem; }
  .companion-tab { min-height: 2.55rem; padding: .55rem .72rem; font-size: .82rem; }
  .companion-path-nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: .15rem .1rem .5rem; scrollbar-width: thin; }
  .companion-path-btn { flex: 0 0 auto; min-height: 2.35rem; padding: .45rem .7rem; font-size: .82rem; }
  .companion-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .companion-card { grid-template-columns: minmax(5.5rem, .34fr) minmax(0, 1fr); gap: .7rem; padding: .62rem; }
  .companion-card-body h3 { font-size: 1.34rem; }
  .companion-summary { font-size: .84rem; line-height: 1.42; }
}

.companion-card-media--landscape img {
  object-fit: cover;
  object-position: 35% center;
}

.companion-card-media--landscape img { object-position: 50% center; }
.companion-card-media--lucifer img { object-position: 35% center; }

/* v85 — lámina de los doce accesos, la imagen conserva su composición original */
.companion-mural-screen{width:100%;max-width:none;padding:.5rem;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.companion-mural-scroll{width:100%;overflow:auto;scrollbar-width:thin}
.companion-mural-art{position:relative;width:100%;min-width:1000px;aspect-ratio:3/2;margin:auto;isolation:isolate}
.companion-mural-art>img{width:100%;height:100%;object-fit:contain;display:block}.mural-revised-kicker{position:absolute;left:50%;top:16.5%;transform:translateX(-50%);width:62%;text-align:center;color:#f4e3b3;font:italic 1.12rem/1.35 Georgia,serif;text-shadow:0 2px 8px rgba(0,0,0,.55)}.mural-revised-ornament{position:absolute;left:50%;top:18.7%;transform:translateX(-50%);display:grid;place-items:center;width:4%;height:2.2%;color:#f1cf88;background:linear-gradient(90deg,rgba(6,17,35,.05),rgba(6,17,35,.5),rgba(6,17,35,.05));font-size:1.05rem;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.mural-hotspot{position:absolute;z-index:5;cursor:pointer;border:1px solid transparent;background:transparent;border-radius:1rem;color:transparent}
.mural-hotspot:hover{background:rgba(255,215,130,.11);border-color:rgba(255,220,150,.7)}
.mural-hotspot:focus-visible{outline:3px solid #fff0bb;outline-offset:2px;background:rgba(255,215,130,.16)}
.mural-revised-title{position:absolute;left:32%;top:11.4%;width:38%;padding:.15% 0;background:#061123;color:#f3d59b;text-align:center;font:small-caps clamp(13px,2.55vw,38px)/1.12 Georgia,serif;font-weight:normal;letter-spacing:.015em;z-index:2;margin:0}
.mural-revised-loss{position:absolute;left:61.1%;top:27.4%;width:9%;height:5.2%;text-align:center;color:#f9ebd9;text-shadow:0 1px 4px #170c07,0 0 5px #170c07;font:small-caps clamp(9px,1.05vw,16px)/1.1 Georgia,serif;z-index:2;background:linear-gradient(90deg,rgba(49,25,14,.95),rgba(77,40,20,.95))}
.mural-revised-white{position:absolute;left:50.3%;top:78.5%;width:16%;height:3.8%;display:grid;place-content:center;text-align:center;background:#081b2d;color:#f7e8d4;font:clamp(9px,.91vw,14px)/1.15 Georgia,serif;z-index:2}
.mural-mobile-hint{display:none;margin:.4rem 0;color:#e8d7b4;font-size:.85rem;text-align:center}
.screen-caliope-v85{width:100%;max-width:none;padding:0;overflow:hidden;position:relative}
.caliope-v85-art{width:100%;height:100%;object-fit:cover;object-position:center}
.caliope-v85-action{position:absolute;bottom:6%;width:100%;display:flex;justify-content:center}
.access-orientation-copy{max-width:50rem;width:94%;padding:1.1rem;margin:.3rem auto}
.screen-accesos{overflow-y:auto;justify-content:flex-start;max-height:100%;gap:.45rem;padding-bottom:2rem}
.access-orientation-copy .orientation-section{margin:.35rem 0}
.access-orientation-copy .orientation-title{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.access-orientation-copy p{margin:.3rem 0}
@media(max-width:1100px){.mural-mobile-hint{display:block}.mural-revised-title{font-size:26px}.mural-revised-loss{font-size:11px}.mural-revised-white{font-size:10px}}

/* v85 revisión: presentación despejada, dos áreas equilibradas */
.screen-accesos-clean{width:100%;max-width:100%;min-height:100%;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);align-content:center;align-items:center;gap:clamp(1.2rem,3vw,3.4rem)!important;padding:clamp(1.2rem,3vw,3.2rem)!important;overflow-y:auto;justify-items:center}
.screen-accesos-clean .v85-intro-panel{width:100%;max-width:700px;text-align:center;background:rgba(12,10,10,.84);border:1px solid rgba(211,169,92,.5);border-radius:14px;padding:clamp(1.25rem,2.2vw,2.7rem);box-shadow:0 14px 40px rgba(0,0,0,.32);justify-self:center;align-self:center;transform:translateY(3vh)}
.v85-intro-panel h1{font-size:clamp(1.7rem,3vw,2.8rem);margin:0 0 .65rem}
.v85-intro-panel h2{font:small-caps clamp(1.3rem,2vw,1.8rem) Georgia,serif;color:#eed29a;margin:1.3rem 0 .5rem}
.v85-intro-panel p{font:clamp(1.03rem,1.3vw,1.2rem)/1.5 Georgia,serif;color:#f1e8d9;margin:.35rem auto;max-width:48ch}
.v85-main-next{margin-top:1.5rem!important;min-width:185px}
.v85-secondary-panel{width:100%;max-width:390px;display:grid;gap:1.2rem;align-self:center}
.v85-secondary-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.2rem;min-height:180px;background:rgba(18,14,13,.9);border:1px solid rgba(212,169,95,.48);border-radius:12px;cursor:pointer;color:#f0d7a8;font:small-caps clamp(1.2rem,1.7vw,1.6rem) Georgia,serif;text-align:center}
.v85-secondary-link:hover,.v85-secondary-link:focus-visible{border-color:#f7e3ae;box-shadow:0 0 18px #bb914e55}
.v85-secondary-link small{font: .82rem Arial,sans-serif;color:#e8dfcd;letter-spacing:.07em}
.v85-secondary-link img{width:115px;max-height:100px;object-fit:cover;border-radius:8px}
.v85-secondary-icon{font-size:2.7rem;color:#d9ad59}
.v85-symbol-icon{min-height:150px;display:grid;place-content:center;font-size:4rem;color:#caac72}
@media(max-width:760px){.screen-accesos-clean{display:flex!important;flex-direction:column;gap:1rem!important;justify-content:flex-start}.screen-accesos-clean .v85-intro-panel{transform:none;margin-top:1rem}.v85-secondary-panel{grid-template-columns:1fr 1fr;max-width:680px}.v85-secondary-link{min-height:120px;padding:.7rem;font-size:1.08rem}.v85-secondary-link img{width:80px;max-height:65px}.v85-intro-panel h2{margin:.8rem 0 .3rem}.v85-intro-panel p{font-size:1.02rem}}

/* v85: portada y Calíope en lámina completa */
.v85-opening,.v85-caliope{position:relative!important;width:100%;height:100%;min-height:100dvh;overflow:hidden;padding:0!important;background:#07090e}
.v85-opening-art,.v85-caliope>img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;object-position:center}
.v85-opening .portada-lang{position:absolute;z-index:6;top:1rem;left:1rem;padding:.4rem;background:#0b0b12b8;border-radius:10px}
.v85-opening-next,.v85-caliope-next{position:absolute;z-index:6;bottom:2.5%;left:50%;transform:translateX(-50%);padding:.6rem 1.8rem;background:#11121bcf;border:1px solid #d9b37a;color:#fff1cc;border-radius:24px;cursor:pointer;font:1.05rem Georgia,serif;white-space:nowrap}
.v85-caliope-hit{position:absolute;z-index:7;left:31%;right:31%;bottom:15.2%;height:8.2%;background:transparent;border:0;cursor:pointer}.v85-caliope-hit:focus-visible{outline:2px solid #e8c67a;outline-offset:4px;border-radius:18px}
.v85-white-presences{text-align:center;max-width:950px;margin:1rem auto 0;color:#eedeb4}.v85-white-presences-entry{display:flex;justify-content:center;margin-top:1.1rem}.wg-presences-entry{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.9rem 1.3rem;background:rgba(12,16,29,.88);border:1px solid #b4975b;border-radius:14px;color:#f5e6bd;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.25)}.wg-presences-entry-kicker{font:small-caps .95rem Georgia,serif;letter-spacing:.1em;color:#e0c078}.wg-presences-entry strong{font:1.18rem Georgia,serif}.wg-presences-entry small{color:#ead8aa;opacity:.9}.wg-presence-grid{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}.wg-presence-tile{background:#0e1320;border:1px solid #af955c;color:#f5e5ba;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.65rem .8rem;border-radius:12px;cursor:pointer;font:1.08rem Georgia,serif;min-width:180px}.wg-presence-tile img{width:100%;max-width:170px;height:230px;object-fit:cover;border-radius:9px}.wg-presence-shell{max-width:1080px}
.v85-white-presences h2{font:small-caps 1.5rem Georgia,serif;margin:.5rem}
.v85-white-presence-list{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.v85-white-presence-list button{background:#0e1320;border:1px solid #af955c;color:#f5e5ba;display:flex;align-items:center;gap:.6rem;padding:.45rem .9rem;border-radius:10px;cursor:pointer;font:1.1rem Georgia,serif}
.v85-white-presence-list img{width:50px;height:65px;object-fit:cover;border-radius:5px}
@media(max-width:700px){.v85-opening,.v85-caliope{min-height:65vw;height:100dvh}.v85-opening-next{bottom:14%}.v85-white-presence-list{gap:.4rem}.v85-white-presence-list button{font-size:.9rem;padding:.3rem}}

/* v86 — Calíope: botón real y táctil, visible tanto en escritorio como en móvil */
.v85-caliope-hit{left:50%!important;right:auto!important;bottom:max(4%,env(safe-area-inset-bottom))!important;transform:translateX(-50%);width:auto!important;min-width:168px;height:auto!important;min-height:48px;padding:.65rem 1.3rem;background:rgba(15,15,23,.92)!important;color:#f7e8c0;border:1px solid #d6b476!important;border-radius:26px;font:1.08rem Georgia,serif;white-space:nowrap;touch-action:manipulation;pointer-events:auto;z-index:30;cursor:pointer;box-shadow:0 3px 20px rgba(0,0,0,.6)}
.v85-caliope-hit:focus-visible{outline:3px solid #ffe0a0;outline-offset:3px}
/* v86 — Presencias de luz: prioridad para fotografías grandes y menos espacios vacíos */
.wg-presence-shell{width:min(98vw,1500px);max-width:1500px;padding-inline:clamp(.5rem,2vw,2rem)}
.wg-presence-shell .wg-entry-head{margin-bottom:.35rem}
.wg-presence-shell .wg-entry-foot{margin-top:.6rem}
.wg-presence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:clamp(.5rem,1.5vw,1.5rem);align-items:stretch;margin:.5rem auto}
.wg-presence-tile{width:100%;min-width:0;padding:.55rem;gap:.4rem;font-size:clamp(1rem,1.5vw,1.3rem)}
.wg-presence-tile img{display:block;max-width:none;width:100%;height:clamp(280px,60vh,680px);object-fit:contain;background:#090d16;border-radius:8px}
@media(max-width:700px){.v85-caliope-hit{bottom:max(8%,env(safe-area-inset-bottom))!important;min-height:54px;font-size:1.12rem}.wg-presence-shell{width:100%;padding-inline:.5rem}.wg-presence-grid{gap:.45rem;grid-template-columns:repeat(3,minmax(0,1fr))}.wg-presence-tile{padding:.25rem;font-size:.78rem}.wg-presence-tile img{height:clamp(150px,36vh,350px);object-fit:contain}.wg-presence-shell .wg-entry-subtitle{font-size:.85rem}}
@media(max-width:420px){.wg-presence-grid{grid-template-columns:1fr;max-width:330px;gap:.65rem}.wg-presence-tile img{height:46vh;min-height:240px;max-height:440px}}

/* Localización mínima de la entrada y Calíope (EN / PT).
   El texto se muestra en HTML; las imágenes aprobadas permanecen intactas. */
.localized-entrance-caption, .localized-calliope-caption {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: min(92vw, 34rem);
  margin-inline: auto;
  padding: .45rem .85rem;
  color: #fff2cf;
  background: rgba(8, 9, 13, .78);
  border: 1px solid rgba(224, 192, 106, .32);
  text-shadow: 0 2px 9px #000;
  border-radius: .35rem;
}
.localized-entrance-caption h1 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  line-height: 1.1;
  margin: 0;
}
.localized-entrance-caption p { margin: .2rem 0 0; font-size: .85rem; }
.localized-calliope-caption { display: flex; flex-direction: column; gap: .15rem; }
.localized-calliope-caption strong { font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, 1.8rem); }
.localized-calliope-caption span { font-size: .85rem; }

.v85-opening .localized-entrance-caption,
.v85-caliope .localized-calliope-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 31rem);
  pointer-events: none;
}
.v85-opening .localized-entrance-caption { bottom: 19%; }
.v85-caliope .localized-calliope-caption { bottom: 19%; }
@media (max-height: 520px) {
 .v85-opening .localized-entrance-caption,
 .v85-caliope .localized-calliope-caption { bottom: 25%; padding: .2rem .5rem; }
}


/* Parche v89 idiomas: sin superposición de textos en portada y Calíope */
.localized-entrance-caption, .localized-calliope-caption { display:none !important; }

/* V98: proporción y lectura de las láminas portuguesas de recorrido. */
.blackdoor-screen.pt-framed .blackdoor-media {
  width: min(96vw, 166dvh);
  max-height: 94dvh;
  aspect-ratio: 1672 / 941;
}
.blackdoor-screen.pt-framed .blackdoor-image {
  width: 100%; height: 100%; object-fit: contain;
}
/* Botones originales siguen visibles en la imagen; las zonas activas quedan sobre ellos. */
.blackdoor-screen.pt-lucifer .blackdoor-choice { z-index: 6; }
.blackdoor-screen.pt-lucifer .blackdoor-choice .bd-hit { touch-action: manipulation; }

/* PT v99: salida accesible fuera de la imagen, sin tocar ES/EN. */
.blackdoor-screen .pt-final-exit { position:fixed; z-index:20; bottom:max(1.2rem,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); padding:.65rem 1.2rem; border:1px solid #d8b46d; background:rgba(8,7,9,.95); color:#f9e4b7; border-radius:2rem; font:500 1rem Georgia,serif; cursor:pointer; touch-action:manipulation; white-space:nowrap; }
.blackdoor-screen .pt-final-exit:focus-visible {outline:3px solid #e9cb8b;outline-offset:2px}

/* v102: láminas verticales 9:16. En escritorio permanecen originales. */
.mobile-art-picture{display:block;position:absolute;inset:0;width:100%;height:100%}
.mobile-art-picture>img{display:block;width:100%;height:100%;object-fit:contain}
.companion-mural-art>picture{display:block;width:100%;height:100%}
.companion-mural-art>picture>img{display:block;width:100%;height:100%;object-fit:contain}
.mural-mobile-controls{display:none}
@media (max-width:760px) and (orientation:portrait){
  .v85-opening,.v85-caliope{min-height:100dvh!important;height:100dvh!important;overflow:hidden}
  .v85-opening .mobile-art-picture>img,.v85-caliope .mobile-art-picture>img{position:static;object-fit:contain;width:100%;height:100%}
  .v85-opening .portada-lang{top:max(8px,env(safe-area-inset-top));left:10px}
  .v85-opening-next{bottom:max(4%,env(safe-area-inset-bottom))!important;min-height:48px}
  .v85-caliope-hit{bottom:max(3%,env(safe-area-inset-bottom))!important;min-height:48px}
  .companion-mural-screen{min-height:100dvh;display:flex;justify-content:flex-start;overflow:visible;padding:8px 0 26px}
  .companion-mural-scroll{width:100%;overflow:visible}
  .companion-mural-art{width:100%;min-width:0;aspect-ratio:941/1672;max-width:680px}
  .companion-mural-art>.mural-hotspot{display:none}
  .mural-mobile-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100% - 20px,660px);margin:14px auto 20px}
  .mural-mobile-choice,.mural-mobile-return{padding:12px 7px;min-height:48px;border:1px solid #a78251;border-radius:8px;background:rgba(22,14,8,.94);color:#f5deb0;font:500 13px/1.3 Georgia,serif;cursor:pointer}
  .mural-mobile-choice:focus-visible,.mural-mobile-return:focus-visible{outline:2px solid #ffe4ab;outline-offset:2px}
  .mural-mobile-return{grid-column:1/-1;margin-top:5px}
  .mural-mobile-hint{display:none}
}