:root {
  --black: #030405;
  --night: #06090d;
  --gold: #c79a49;
  --aged-gold: #b58a3f;
  --aged-gold-light: #d3ad62;
  --aged-gold-shadow: #6f4b18;
  --gold-soft: rgba(199, 154, 73, 0.58);
  --gold-dim: rgba(199, 154, 73, 0.25);
  --ivory: #eadfc6;
  --ivory-soft: rgba(234, 223, 198, 0.84);
  --red: #a70e34;
  --red-soft: rgba(167, 14, 52, 0.7);
  --stage-pad-x: 8%;
  --stage-pad-y: 7.4%;
  --title-size: clamp(1rem, 2.25vh, 1.9rem);
  --body-size: clamp(0.68rem, 1.16vh, 0.86rem);
  --label-size: clamp(0.54rem, 0.9vh, 0.72rem);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  color: var(--ivory);
  height: 100%;
  overflow: hidden;
  scroll-behavior: auto;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(199, 154, 73, 0.08), transparent 34rem),
    linear-gradient(180deg, #020303, #070507 56%, #020303);
  font-family: "Cormorant Garamond", Georgia, serif;
}

a {
  color: inherit;
}

.screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
}

main {
  display: grid;
}

body.screen-navigation main {
  height: 100svh;
  overflow: hidden;
}

body.screen-navigation .screen {
  display: none;
  height: 100svh;
  min-height: 100svh;
}

body.screen-navigation .screen.is-active {
  display: grid;
}

.stage {
  position: relative;
  width: min(100vw, calc(100svh * 16 / 9));
  height: min(100svh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(199, 154, 73, 0.06), transparent 36%),
    linear-gradient(180deg, #070808, #030405 52%, #060506);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.72);
}

.atrio-stage {
  background:
    linear-gradient(rgba(3, 4, 5, 0.2), rgba(3, 4, 5, 0.2)),
    url("./assets/backgrounds/atrio-bg-piloto.png") center / cover no-repeat;
}

.fragmentos-stage {
  background:
    linear-gradient(rgba(3, 4, 5, 0.12), rgba(3, 4, 5, 0.16)),
    url("./assets/backgrounds/fragmentos-bg-piloto.png") center / cover no-repeat;
}

.mode3-stage {
  --mode3-bg: linear-gradient(180deg, #070808, #030405 52%, #060506);
  background:
    radial-gradient(circle at 50% 48%, rgba(199, 154, 73, 0.06), transparent 36%),
    linear-gradient(180deg, #020303, #060607 52%, #020303);
}

.mode3-stage::after {
  position: absolute;
  z-index: 0;
  inset: 4.2%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(3, 4, 5, 0.08), transparent 34%),
    linear-gradient(rgba(3, 4, 5, 0.07), rgba(3, 4, 5, 0.13)),
    var(--mode3-bg) center / cover no-repeat;
}

.mode3-stage::before {
  z-index: 1;
  inset: 4.2%;
}

.mode3-stage .frame {
  z-index: 5;
  border-color: rgba(211, 173, 98, 0.46);
  box-shadow:
    0 0 0 1px rgba(111, 75, 24, 0.34),
    inset 0 0 0 1px rgba(199, 154, 73, 0.16),
    inset 0 0 44px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(0, 0, 0, 0.42);
}

.mode3-stage .frame::before,
.mode3-stage .frame::after {
  position: absolute;
  inset: 1.4%;
  content: "";
  border: 1px solid rgba(181, 138, 63, 0.18);
}

.mode3-stage .frame::after {
  inset: -1.3%;
  border-color: rgba(199, 154, 73, 0.16);
}

.mode3-heading,
.mode3-copy,
.mode3-return {
  z-index: 4;
}

.sopro-stage {
  --mode3-bg: url("./assets/backgrounds/sopro-primordial-bg-piloto.png");
}

.espelho-stage {
  --mode3-bg: url("./assets/backgrounds/espelho-da-alma-bg-piloto.png");
}

.veu-stage {
  --mode3-bg: url("./assets/backgrounds/veu-dos-misterios-bg-piloto.png");
}


.veu-stage::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.52) 0 22%, rgba(0, 0, 0, 0.3) 34%, transparent 58%),
    linear-gradient(90deg, transparent 0 24%, rgba(0, 0, 0, 0.3) 36% 64%, transparent 76% 100%),
    radial-gradient(circle at 50% 48%, rgba(3, 4, 5, 0.08), transparent 34%),
    linear-gradient(rgba(3, 4, 5, 0.12), rgba(3, 4, 5, 0.18)),
    var(--mode3-bg) center / cover no-repeat;
}
.selo-stage {
  --mode3-bg: url("./assets/backgrounds/selo-do-guardiao-bg-piloto.png");
}


.selo-stage::after {
  background:
    radial-gradient(ellipse at 50% 31%, rgba(0, 0, 0, 0.54) 0 20%, rgba(0, 0, 0, 0.34) 34%, transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0 33%, transparent 58%),
    radial-gradient(circle at 50% 48%, rgba(3, 4, 5, 0.08), transparent 34%),
    linear-gradient(rgba(3, 4, 5, 0.1), rgba(3, 4, 5, 0.14)),
    var(--mode3-bg) center / cover no-repeat;
}
.oraculo-stage {
  --mode3-bg: url("./assets/backgrounds/voz-do-oraculo-bg-piloto.png");
}

.fogo-stage {
  --mode3-bg: url("./assets/backgrounds/fogo-interno-bg-piloto.png");
}

.camara-stage {
  --mode3-bg: url("./assets/backgrounds/camara-do-eco-bg-piloto.png");
}

.ether-stage {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgba(235, 239, 248, 0.08), transparent 1.2% 100%),
    linear-gradient(rgba(1, 5, 17, 0.05), rgba(1, 5, 17, 0.08)),
    url("./assets/backgrounds/campo-do-eter-bg-piloto.png") center / cover no-repeat;
}

.ether-stage::before {
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 38%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 35% 70%, rgba(0, 0, 0, 0.18));
}

.ether-stage::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 47%, rgba(238, 244, 255, 0.16) 0 0.34%, transparent 1.2%),
    radial-gradient(circle at 50% 47%, rgba(116, 154, 230, 0.13), transparent 18%);

}

.ether-corners {
  display: none;
}

.ether-heading {
  position: absolute;
  z-index: 5;
  top: 9.8%;
  left: 50%;
  width: min(56%, 720px);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.7vh, 18px);
  text-align: center;
}

.ether-heading h1 {
  margin: 0;
  color: rgba(214, 179, 98, 0.88);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2.4vh, 2rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 0 7px rgba(238, 229, 205, 0.28),
    0 0 18px rgba(192, 149, 66, 0.18),
    0 0 28px rgba(0, 0, 0, 0.62);
  animation: etherTextBreath 18s ease-in-out infinite;
}

.ether-heading p {
  margin: 0;
  color: rgba(239, 229, 205, 0.86);
  font-size: clamp(0.78rem, 1.36vh, 1.02rem);
  font-weight: 600;
  line-height: 1.34;
  text-shadow:
    0 0 7px rgba(238, 229, 205, 0.22),
    0 0 17px rgba(0, 0, 0, 0.82);
  animation: etherTextBreath 22s ease-in-out infinite;
  animation-delay: -6s;
}

.ether-twinkles {
  position: absolute;
  z-index: 4;
  inset: 5.4%;
  pointer-events: none;
}

.twinkle {
  position: absolute;
  width: 2px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(248, 250, 255, 0.88);
  opacity: 0;
  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 0 9px rgba(185, 207, 255, 0.52),
    0 0 18px rgba(91, 132, 225, 0.34);
  animation: starRelume var(--star-duration, 9s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}

.t1 { top: 15%; left: 23%; --star-duration: 11s; --star-delay: -1.5s; }
.t2 { top: 24%; right: 18%; --star-duration: 13s; --star-delay: -8s; }
.t3 { top: 42%; left: 16%; --star-duration: 10s; --star-delay: -4s; }
.t4 { top: 50%; right: 20%; --star-duration: 15s; --star-delay: -11s; }
.t5 { bottom: 23%; left: 31%; --star-duration: 12s; --star-delay: -7s; }
.t6 { bottom: 18%; right: 28%; --star-duration: 14s; --star-delay: -2s; }
.t7 { top: 34%; left: 52%; --star-duration: 16s; --star-delay: -12s; }
.t8 { bottom: 35%; right: 9%; --star-duration: 11.5s; --star-delay: -5s; }

.ether-seals {
  position: absolute;
  z-index: 4;
  inset: 7%;
  pointer-events: none;
}

.ether-seal {
  position: absolute;
  color: rgba(231, 201, 132, 0.48);
  font-family: "Times New Roman", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.86rem, 2.1vh, 1.42rem);
  line-height: 1;
  text-shadow:
    0 0 6px rgba(231, 201, 132, 0.24),
    0 0 18px rgba(114, 147, 220, 0.14),
    0 2px 12px rgba(0, 0, 0, 0.86);
  opacity: 0.56;
  animation: etherSealPulse var(--seal-duration, 18s) ease-in-out infinite;
  animation-delay: var(--seal-delay, 0s);
}

.ether-seal.s1 { top: 17%; left: 12%; --seal-duration: 22s; --seal-delay: -2s; }
.ether-seal.s2 { top: 24%; right: 13%; --seal-duration: 20s; --seal-delay: -8s; }
.ether-seal.s3 { top: 46%; left: 8%; --seal-duration: 24s; --seal-delay: -13s; }
.ether-seal.s4 { top: 50%; right: 10%; --seal-duration: 19s; --seal-delay: -5s; }
.ether-seal.s5 { bottom: 24%; left: 19%; --seal-duration: 23s; --seal-delay: -17s; }
.ether-seal.s6 { bottom: 19%; right: 23%; --seal-duration: 21s; --seal-delay: -10s; }
.ether-seal.s7 { top: 36%; left: 49%; --seal-duration: 26s; --seal-delay: -15s; }
.ether-seal.s8 { bottom: 35%; right: 47%; --seal-duration: 18s; --seal-delay: -6s; }

.ether-return {
  position: absolute;
  z-index: 5;
  bottom: 8.8%;
  left: 50%;
  translate: -50% 0;
  color: rgba(214, 179, 98, 0.88);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--label-size);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(214, 179, 98, 0.32),
    0 0 20px rgba(108, 144, 224, 0.18),
    0 0 14px rgba(0, 0, 0, 0.72);
  transition: color 260ms ease, text-shadow 260ms ease;
}

.ether-return:hover {
  color: rgba(246, 232, 191, 0.96);
  text-shadow:
    0 0 6px rgba(247, 231, 190, 0.6),
    0 0 22px rgba(142, 173, 236, 0.36);
}

@keyframes etherGlimmer {
  0%, 18%, 100% {
    opacity: 0.02;
    scale: 0.86;
    filter: brightness(0.7);
  }
  38% {
    opacity: 0.58;
    scale: 1.08;
    filter: brightness(1.36);
  }
  52% {
    opacity: 0.2;
    scale: 0.98;
    filter: brightness(0.96);
  }
  72% {
    opacity: 0;
    scale: 0.84;
    filter: brightness(0.62);
  }
}

@keyframes starRelume {
  0%, 22%, 100% {
    opacity: 0;
    scale: 0.6;
  }
  38% {
    opacity: 0.9;
    scale: 1.15;
  }
  45% {
    opacity: 0.28;
    scale: 0.9;
  }
  54% {
    opacity: 0.72;
    scale: 1.05;
  }
  70% {
    opacity: 0;
    scale: 0.66;
  }
}

@keyframes etherTitleReveal {
  0%, 8%, 100% {
    opacity: 0;
    translate: 0 2px;
    filter: blur(0.45px);
  }
  22% {
    opacity: 0.34;
    translate: 0 1px;
    filter: blur(0.18px);
  }
  36%, 62% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  78% {
    opacity: 0.38;
    translate: 0 -1px;
    filter: blur(0.16px);
  }
  92% {
    opacity: 0;
    translate: 0 -2px;
    filter: blur(0.42px);
  }
}

@keyframes etherPhraseReveal {
  0%, 12%, 100% {
    opacity: 0;
    translate: 0 3px;
    filter: blur(0.48px);
  }
  26% {
    opacity: 0.28;
    translate: 0 1px;
    filter: blur(0.2px);
  }
  42%, 66% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  82% {
    opacity: 0.34;
    translate: 0 -1px;
    filter: blur(0.18px);
  }
  96% {
    opacity: 0;
    translate: 0 -2px;
    filter: blur(0.44px);
  }
}

@keyframes etherTextBreath {
  0%, 10%, 92%, 100% {
    opacity: 0;
    filter: brightness(0.62) blur(0.42px);
  }

  24% {
    opacity: 0.28;
    filter: brightness(0.82) blur(0.18px);
  }

  42%, 62% {
    opacity: 1;
    filter: brightness(1.12) blur(0);
  }

  78% {
    opacity: 0.24;
    filter: brightness(0.78) blur(0.22px);
  }
}

@keyframes etherSealPulse {
  0%, 100% {
    opacity: 0.22;
    filter: brightness(0.82);
  }

  38%, 62% {
    opacity: 0.68;
    filter: brightness(1.14);
  }
}
.pratica-stage {
  background:
    linear-gradient(rgba(3, 4, 5, 0.1), rgba(3, 4, 5, 0.18)),
    url("./assets/backgrounds/pratica-bg-piloto.png") center / cover no-repeat;
}


.altar-stage {
  --mode3-bg: url("./assets/backgrounds/o-altar-bg-piloto.png");
}


.vento-stage {
  --mode3-bg: url("./assets/backgrounds/o-vento-bg-piloto.png");
}

.veiculo-stage {
  --mode3-bg: url("./assets/backgrounds/o-veiculo-bg-piloto.png");
}

.solo-stage {
  --mode3-bg: url("./assets/backgrounds/o-solo-bg-piloto.png");
}

.vibracao-stage {
  --mode3-bg: url("./assets/backgrounds/a-vibracao-bg-piloto.png");
}

.transmutacao-stage {
  --mode3-bg: url("./assets/backgrounds/a-transmutacao-bg-piloto.png");
}
.practice-mode3-stage::after {
  background:
    radial-gradient(ellipse at 50% 47%, rgba(0, 0, 0, 0.42) 0 24%, rgba(0, 0, 0, 0.22) 42%, transparent 66%),
    radial-gradient(circle at 50% 48%, rgba(3, 4, 5, 0.08), transparent 34%),
    linear-gradient(rgba(3, 4, 5, 0.08), rgba(3, 4, 5, 0.13)),
    var(--mode3-bg) center / cover no-repeat;
}

.practice-mode3-copy {
  top: 22.6%;
  width: min(50%, 760px);
  gap: clamp(3px, 0.62vh, 8px);
}

.practice-mode3-copy p {
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.2;
}

.practice-mode3-actions {
  position: absolute;
  z-index: 4;
  bottom: 9.2%;
  left: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.35vh, 14px);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--label-size);
  font-weight: 500;
  text-transform: uppercase;
}

.practice-forward,
.practice-return {
  color: inherit;
  text-decoration: none;
  text-shadow:
    0 0 8px rgba(181, 138, 63, 0.22),
    0 0 14px rgba(0, 0, 0, 0.72);
}

.practice-forward {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}

.practice-forward::before {
  width: clamp(7px, 1.1vh, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: currentColor;
  box-shadow: 0 0 8px rgba(199, 154, 73, 0.34);
}

.practice-action-line {
  position: relative;
  display: block;
  width: min(140px, 18vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181, 138, 63, 0.65), transparent);
}

.practice-action-line::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  aspect-ratio: 1;
  content: "";
  translate: -50% -50%;
  rotate: 45deg;
  border: 1px solid rgba(199, 154, 73, 0.72);
  background: radial-gradient(circle at 35% 30%, #9b2424 0 13%, #6b1214 42%, #2e0808 100%);
  box-shadow: 0 0 7px rgba(107, 18, 20, 0.48), 0 0 5px rgba(199, 154, 73, 0.18);
}
.elementos-stage {
  background:
    linear-gradient(rgba(3, 4, 5, 0.08), rgba(3, 4, 5, 0.16)),
    url("./assets/backgrounds/elementos-bg-piloto.png") center / cover no-repeat;
}

.stage::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 48%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18% 82%, rgba(0, 0, 0, 0.28));
}

.stage.mode3-stage::before {
  z-index: 1;
  inset: 4.2%;
}

.frame {
  position: absolute;
  z-index: 3;
  inset: 4.2%;
  border: 1px solid rgba(199, 154, 73, 0.35);
  pointer-events: none;
}

.atrio-stage .frame,
.fragmentos-stage .frame,
.pratica-stage .frame,
.elementos-stage .frame,
.book-stage .frame {
  z-index: 6;
  border-color: rgba(224, 180, 92, 0.68);
  background:
    linear-gradient(90deg, rgba(224, 180, 92, 0.56), transparent 68%) left top / 88px 1px no-repeat,
    linear-gradient(180deg, rgba(224, 180, 92, 0.56), transparent 68%) left top / 1px 88px no-repeat,
    linear-gradient(270deg, rgba(224, 180, 92, 0.56), transparent 68%) right top / 88px 1px no-repeat,
    linear-gradient(180deg, rgba(224, 180, 92, 0.56), transparent 68%) right top / 1px 88px no-repeat,
    linear-gradient(90deg, rgba(224, 180, 92, 0.56), transparent 68%) left bottom / 88px 1px no-repeat,
    linear-gradient(0deg, rgba(224, 180, 92, 0.56), transparent 68%) left bottom / 1px 88px no-repeat,
    linear-gradient(270deg, rgba(224, 180, 92, 0.56), transparent 68%) right bottom / 88px 1px no-repeat,
    linear-gradient(0deg, rgba(224, 180, 92, 0.56), transparent 68%) right bottom / 1px 88px no-repeat;
  box-shadow:
    0 0 0 1px rgba(111, 75, 24, 0.42),
    inset 0 0 0 1px rgba(224, 180, 92, 0.2),
    inset 0 0 46px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(0, 0, 0, 0.38);
}

.atrio-stage .frame::before,
.fragmentos-stage .frame::before,
.pratica-stage .frame::before,
.elementos-stage .frame::before,
.book-stage .frame::before,
.atrio-stage .frame::after,
.fragmentos-stage .frame::after,
.pratica-stage .frame::after,
.elementos-stage .frame::after,
.book-stage .frame::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.atrio-stage .frame::before,
.fragmentos-stage .frame::before,
.pratica-stage .frame::before,
.elementos-stage .frame::before,
.book-stage .frame::before {
  inset: 1.25%;
  border: 1px solid rgba(211, 173, 98, 0.32);
}

.atrio-stage .frame::after,
.fragmentos-stage .frame::after,
.pratica-stage .frame::after,
.elementos-stage .frame::after,
.book-stage .frame::after {
  inset: -1.15%;
  border: 1px solid rgba(199, 154, 73, 0.22);
}

.screen-heading {
  position: absolute;
  top: 9.2%;
  left: 50%;
  width: 54%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 26px);
  text-align: center;
}

.screen-heading h1 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--title-size);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(199, 154, 73, 0.12);
}

.atrio-heading {
  top: 7.4%;
}

.atrio-heading::before,
.atrio-heading::after {
  position: absolute;
  top: 50%;
  width: min(13vw, 180px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(199, 154, 73, 0.58), transparent);
}

.atrio-heading::before {
  right: calc(50% + 92px);
}

.atrio-heading::after {
  left: calc(50% + 92px);
}

.atrio-heading h1::before,
.atrio-heading h1::after {
  color: rgba(199, 154, 73, 0.68);
  font-size: 0.55em;
  vertical-align: 0.18em;
}

.atrio-heading h1::before {
  content: "✧ ";
}

.atrio-heading h1::after {
  content: " ✧";
}

.screen-heading p,
.intro-copy p {
  margin: 0;
  color: var(--ivory-soft);
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.22;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.intro-copy {
  position: absolute;
  top: 16.4%;
  width: 26%;
  display: grid;
  gap: clamp(10px, 2.2vh, 22px);
}

.left-copy {
  left: 8.2%;
}

.right-copy {
  right: 8.2%;
}

.diamond-map {
  position: absolute;
  top: 22.4%;
  left: 50%;
  width: min(23.6%, 330px);
  aspect-ratio: 0.74;
  translate: -50% 0;
}

.axis {
  position: absolute;
  z-index: 1;
  display: block;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(111, 75, 24, 0.26) 18%,
    rgba(181, 138, 63, 0.82) 48%,
    rgba(211, 173, 98, 0.72) 50%,
    rgba(181, 138, 63, 0.82) 52%,
    rgba(111, 75, 24, 0.26) 82%,
    transparent
  );
  filter:
    drop-shadow(0 0 4px rgba(181, 138, 63, 0.48))
    drop-shadow(0 0 10px rgba(211, 173, 98, 0.18));
  opacity: 0.82;
}

.axis.horizontal {
  top: 48.5%;
  left: 8%;
  width: 84%;
  height: 1px;
}

.axis.vertical {
  top: 9%;
  left: 50%;
  width: 1px;
  height: 82%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(111, 75, 24, 0.26) 18%,
    rgba(181, 138, 63, 0.82) 48%,
    rgba(211, 173, 98, 0.72) 50%,
    rgba(181, 138, 63, 0.82) 52%,
    rgba(111, 75, 24, 0.26) 82%,
    transparent
  );
}

.atrium-node,
.step,
.hex-node,
.penta-node {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  text-decoration: none;
  text-transform: none;
}

.atrium-node strong,
.step strong,
.hex-node strong,
.penta-node strong {
  color: var(--gold);
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 9px rgba(199, 154, 73, 0.12);
}

.atrium-node strong,
.atrium-node em {
  padding-inline: 3px;
  background: radial-gradient(ellipse at center, rgba(3, 4, 5, 0.62), rgba(3, 4, 5, 0.08) 68%, transparent);
}

.atrium-node em {
  display: block;
  color: var(--ivory-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.52rem, 0.86vh, 0.68rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.24;
  text-align: center;
  text-transform: none;
}

.atrium-node.top {
  top: -1%;
  left: 50%;
  translate: -50% 0;
}

.atrium-node.left {
  top: 40.5%;
  left: 0;
  translate: -55% 0;
  grid-template-columns: 1fr;
  align-items: center;
}

.atrium-node.right {
  top: 40.5%;
  right: 0;
  translate: 55% 0;
  grid-template-columns: 1fr;
  align-items: center;
}

.atrium-node.bottom {
  bottom: -1%;
  left: 50%;
  translate: -50% 0;
}

.diamond-button {
  display: grid;
  position: relative;
  width: clamp(34px, 6vh, 62px);
  aspect-ratio: 1;
  place-items: center;
  border: 0.6px solid rgba(181, 138, 63, 0.9);
  color: rgba(128, 0, 34, 0.9);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.9rem, 2vh, 1.28rem);
  line-height: 1;
  rotate: 45deg;
  background:
    radial-gradient(circle at 50% 50%, rgba(211, 173, 98, 0.08), rgba(111, 75, 24, 0.04) 42%, transparent 68%),
    rgba(3, 4, 5, 0.2);
  box-shadow:
    0 0 5px rgba(181, 138, 63, 0.46),
    0 0 14px rgba(211, 173, 98, 0.16),
    inset 0 0 8px rgba(111, 75, 24, 0.18);
  filter: drop-shadow(0 0 6px rgba(181, 138, 63, 0.3));
}

.atrium-node.left .diamond-button,
.atrium-node.right .diamond-button {
  order: -1;
}

.diamond-button i {
  display: block;
  font-style: normal;
  rotate: -45deg;
  color: rgba(128, 0, 0, 0.98);
  font-size: 1.24em;
  text-shadow: none;
}

.center-mark,
.hex-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(34px, 5.4vh, 58px);
  aspect-ratio: 1;
  translate: -50% -50%;
  place-items: center;
  color: rgba(199, 154, 73, 0.7);
}

.center-mark::before {
  content: "✶";
  font-size: clamp(1.35rem, 3.4vh, 2.35rem);
  color: rgba(235, 190, 82, 0.98);
  text-shadow:
    0 0 3px rgba(255, 247, 225, 0.92),
    0 0 8px rgba(235, 190, 82, 0.82),
    0 0 20px rgba(235, 190, 82, 0.38);
}

.center-mark {
  transform: translateY(-1px);
}

.center-mark::after {
  position: absolute;
  width: clamp(38px, 6.8vh, 70px);
  aspect-ratio: 1;
  content: "";
  background:
    conic-gradient(
      from 0deg,
      transparent 0 8deg,
      rgba(235, 190, 82, 0.22) 9deg 11deg,
      transparent 12deg 38deg,
      rgba(235, 190, 82, 0.18) 39deg 41deg,
      transparent 42deg 88deg,
      rgba(235, 190, 82, 0.22) 89deg 91deg,
      transparent 92deg 138deg,
      rgba(235, 190, 82, 0.16) 139deg 141deg,
      transparent 142deg 188deg,
      rgba(235, 190, 82, 0.22) 189deg 191deg,
      transparent 192deg 238deg,
      rgba(235, 190, 82, 0.16) 239deg 241deg,
      transparent 242deg 268deg,
      rgba(235, 190, 82, 0.22) 269deg 271deg,
      transparent 272deg 318deg,
      rgba(235, 190, 82, 0.16) 319deg 321deg,
      transparent 322deg 360deg
    );
  filter: blur(0.25px) drop-shadow(0 0 8px rgba(235, 190, 82, 0.28));
  opacity: 0.72;
}

.center-mark {
  isolation: isolate;
}

.center-mark::before {
  position: relative;
  z-index: 2;
}

.center-mark::after {
  z-index: 1;
}

.center-mark {
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(255, 247, 225, 0.86) 32%, transparent 34% 66%, rgba(255, 247, 225, 0.72) 67%, transparent 69%),
    linear-gradient(0deg, transparent 0 33%, rgba(255, 247, 225, 0.72) 34%, transparent 36% 64%, rgba(255, 247, 225, 0.62) 65%, transparent 67%);
  background-size: 100% 1px, 1px 100%;
  background-position: center;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 4px rgba(255, 247, 225, 0.44))
    drop-shadow(0 0 12px rgba(235, 190, 82, 0.28));
}

.screen-footer {
  position: absolute;
  right: 7.2%;
  bottom: 5%;
  left: 7.2%;
  display: flex;
  justify-content: space-between;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.74rem, 1.35vh, 0.98rem);
}

.screen-footer a,
.screen-footer span {
  text-decoration: none;
}

.screen-footer a,
.screen-footer span {
  display: grid;
  gap: 7px;
}

.screen-footer span {
  justify-items: end;
}

.screen-footer a::before,
.screen-footer span::before {
  display: grid;
  width: clamp(18px, 2.65vh, 27px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(181, 138, 63, 0.78);
  border-radius: 50%;
  color: var(--gold);
  font-size: clamp(0.72rem, 1.3vh, 0.95rem);
  box-shadow: 0 0 8px rgba(181, 138, 63, 0.28);
}

.footer-return::before {
  content: "⟳";
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", Georgia, serif;
  font-size: clamp(0.86rem, 1.55vh, 1.1rem);
}

.footer-soon::before {
  content: "";
}

.stair-map {
  position: absolute;
  z-index: 6;
  top: 30%;
  left: 50%;
  width: 78%;
  height: 58%;
  translate: -50% 0;
}

.step {
  z-index: 7;
  width: 18%;
  gap: 8px;
}

.portal-button {
  position: relative;
  display: grid;
  width: clamp(42px, 6.4vh, 72px);
  aspect-ratio: 0.64;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(181, 138, 63, 0.96);
  border-bottom-width: 3px;
  border-radius: 47% 47% 6px 6px;
  background:
    linear-gradient(90deg, rgba(111, 75, 24, 0.36), transparent 18% 82%, rgba(111, 75, 24, 0.36)),
    linear-gradient(180deg, rgba(211, 173, 98, 0.18), rgba(111, 75, 24, 0.11) 48%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 28%, rgba(245, 218, 150, 0.2), rgba(111, 75, 24, 0.08) 48%, transparent 74%),
    rgba(3, 4, 5, 0.44);
  box-shadow:
    0 0 7px rgba(181, 138, 63, 0.5),
    0 0 18px rgba(211, 173, 98, 0.18),
    inset 0 0 10px rgba(211, 173, 98, 0.12),
    inset 0 -14px 20px rgba(0, 0, 0, 0.36);
  color: rgba(211, 173, 98, 0.92);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2.4vh, 1.58rem);
  text-shadow:
    0 0 4px rgba(255, 247, 225, 0.42),
    0 0 12px rgba(211, 173, 98, 0.32);
}

.portal-button::before {
  content: "";
  position: relative;
  z-index: 2;
  display: grid;
  width: 84%;
  aspect-ratio: 0.66;
  place-items: center;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: var(--portal-crest) center / contain no-repeat;
  box-shadow:
    0 0 8px rgba(255, 241, 194, 0.18),
    0 0 16px rgba(181, 138, 63, 0.34);
  filter: drop-shadow(0 0 5px rgba(211, 173, 98, 0.28));
}

.symbol-spiral::before {
  content: "";
  --portal-crest: url("./assets/portals/sopro-primordial.svg");
}

.symbol-mirror::before {
  content: "";
  --portal-crest: url("./assets/portals/espelho-alma.svg");
}

.symbol-veil::before {
  content: "";
  --portal-crest: url("./assets/portals/veu-misterios.svg");
}

.symbol-seal::before {
  content: "";
  --portal-crest: url("./assets/portals/selo-guardiao.svg");
}

.symbol-oracle::before {
  content: "";
  --portal-crest: url("./assets/portals/voz-oraculo.svg");
}

.symbol-fire::before {
  content: "";
  --portal-crest: url("./assets/portals/fogo-interno.svg");
}

.symbol-echo::before {
  content: "";
  --portal-crest: url("./assets/portals/camara-eco.svg");
}

.symbol-ether::before {
  content: "";
  --portal-crest: url("./assets/portals/campo-eter.svg");
}

.portal-button::after {
  position: absolute;
  inset: 5% 10% 7%;
  z-index: 1;
  border: 1px double rgba(181, 138, 63, 0.46);
  border-radius: 44% 44% 5px 5px;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 22%, rgba(181, 138, 63, 0.16) 23% 24%, transparent 25% 47%, rgba(211, 173, 98, 0.2) 49% 51%, transparent 53% 75%, rgba(181, 138, 63, 0.12) 76% 77%, transparent 78%),
    radial-gradient(circle at 50% 26%, rgba(255, 241, 194, 0.14), transparent 48%),
    linear-gradient(180deg, transparent 0 13%, rgba(211, 173, 98, 0.18) 14% 15%, transparent 16% 29%, rgba(181, 138, 63, 0.16) 30% 31%, transparent 32% 100%);
  box-shadow:
    0 0 6px rgba(181, 138, 63, 0.18),
    inset 0 0 10px rgba(0, 0, 0, 0.34);
}

.step.s1 {
  top: 2%;
  left: 22%;
}

.step.s2 {
  top: 2%;
  right: 22%;
}

.step.s3 {
  top: 37%;
  left: 7.5%;
}

.step.s4 {
  top: 23.5%;
  left: 50%;
  translate: -50% 0;
}

.step.s5 {
  top: 37%;
  right: 7.5%;
}

.step.s6 {
  top: 56%;
  left: 50%;
  translate: -50% 0;
}

.step.s7 {
  bottom: 10%;
  left: 22%;
}

.step.s8 {
  right: 22%;
  bottom: 10%;
}


.fragmentos-stage .screen-footer {
  z-index: 4;
}

.fragmentos-stage .stair-map,
.fragmentos-stage .step {
  pointer-events: auto;
}
.mode3-heading {
  position: absolute;
  top: 10.5%;
  left: 50%;
  width: 58%;
  translate: -50% 0;
  text-align: center;
}

.mode3-heading h1 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(199, 154, 73, 0.16);
}

.mode3-copy {
  position: absolute;
  top: 24%;
  left: 50%;
  width: min(48%, 720px);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.7vh, 18px);
}

.mode3-copy p {
  margin: 0;
  color: var(--ivory-soft);
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  font-weight: 600;
  line-height: 1.34;
  text-align: center;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.86);
}

.mode3-copy-medium {
  top: 21.5%;
  width: min(52%, 760px);
  gap: clamp(2px, 0.42vh, 5px);
}

.mode3-copy-medium p {
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.2;
}

.mode3-copy-long {
  top: 19%;
  width: min(56%, 820px);
  gap: clamp(0px, 0.16vh, 2px);
}

.mode3-copy-long p {
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.12;
}

.text-divider {
  position: relative;
  display: block;
  width: min(38%, 220px);
  height: 9px;
}

.text-divider::before,
.text-divider::after {
  position: absolute;
  top: 50%;
  width: calc(50% - 13px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(181, 138, 63, 0.5));
}

.text-divider::before {
  left: 0;
}

.text-divider::after {
  right: 0;
  rotate: 180deg;
}

.text-divider {
  background:
    radial-gradient(circle, rgba(211, 173, 98, 0.82) 0 1.4px, transparent 1.8px) center / 9px 9px no-repeat;
  filter: drop-shadow(0 0 5px rgba(181, 138, 63, 0.24));
}

.text-divider-large {
  width: min(30%, 190px);
  height: 18px;
  margin-top: clamp(1px, 0.4vh, 5px);
  background:
    radial-gradient(circle, rgba(211, 173, 98, 0.9) 0 2.5px, transparent 3px) center / 18px 18px no-repeat,
    radial-gradient(circle, rgba(181, 138, 63, 0.42) 0 6px, transparent 6.5px) center / 18px 18px no-repeat;
}

.mode3-return {
  position: absolute;
  bottom: 10%;
  left: 50%;
  translate: -50% 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--label-size);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(181, 138, 63, 0.22),
    0 0 14px rgba(0, 0, 0, 0.72);
}

.atrio-home-return {
  bottom: 6.8%;
  z-index: 8;
}

.hex-map,
.penta-map {
  position: absolute;
  top: 33%;
  left: 50%;
  width: min(48%, 760px);
  aspect-ratio: 1.5;
  translate: -50% 0;
}

.hex-core,
.penta-core {
  border: 1px solid rgba(199, 154, 73, 0.2);
  border-radius: 50%;
  font-size: clamp(0.95rem, 2.5vh, 1.7rem);
}

.hex-node,
.penta-node {
  width: 23%;
  gap: 7px;
}

.circle-button {
  display: block;
  width: clamp(25px, 4vh, 43px);
  aspect-ratio: 1;
  border: 1px solid rgba(199, 154, 73, 0.42);
  border-radius: 50%;
  background: rgba(199, 154, 73, 0.025);
}

.hex-node.h1 {
  top: 0;
  left: 37%;
}

.hex-node.h2 {
  top: 28%;
  left: 2%;
}

.hex-node.h3 {
  top: 28%;
  right: 2%;
}

.hex-node.h4 {
  bottom: 8%;
  left: 9%;
}

.hex-node.h5 {
  right: 9%;
  bottom: 8%;
}

.hex-node.h6 {
  bottom: -4%;
  left: 37%;
}

.pratica-stage .hex-map {
  top: 30%;
  width: 78%;
  height: 54%;
  aspect-ratio: auto;
}

.pratica-stage .hex-core {
  display: none;
}

.pratica-stage .hex-node {
  width: 14%;
  gap: 6px;
  text-align: center;
  translate: -50% 0;
}

.pratica-stage .hex-node strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pratica-stage .circle-button {
  position: relative;
  display: grid;
  width: clamp(28px, 4.4vh, 46px);
  place-items: center;
  border-color: rgba(181, 138, 63, 0.72);
  background:
    radial-gradient(circle, rgba(211, 173, 98, 0.18), rgba(3, 4, 5, 0.08) 62%),
    rgba(3, 4, 5, 0.18);
  box-shadow:
    0 0 7px rgba(255, 241, 194, 0.16),
    0 0 14px rgba(181, 138, 63, 0.28),
    inset 0 0 8px rgba(211, 173, 98, 0.08);
}

.pratica-stage .circle-button::before {
  display: block;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  background: var(--practice-symbol) center / contain no-repeat;
  filter:
    drop-shadow(0 0 3px rgba(255, 241, 194, 0.22))
    drop-shadow(0 0 6px rgba(181, 138, 63, 0.28));
}

.pratica-stage .hex-node.h1 {
  top: 2%;
  left: 22%;
  --practice-symbol: url("./assets/symbols/pratica-altar-isis.svg");
}

.pratica-stage .hex-node.h2 {
  top: 36%;
  left: 15%;
  --practice-symbol: url("./assets/symbols/pratica-veiculo-calice.svg");
}

.pratica-stage .hex-node.h4 {
  bottom: 4%;
  left: 22%;
  --practice-symbol: url("./assets/symbols/pratica-vento-sopro.svg");
}

.pratica-stage .hex-node.h3 {
  top: 2%;
  right: auto;
  left: 78%;
  --practice-symbol: url("./assets/symbols/pratica-solo-raiz.svg");
}

.pratica-stage .hex-node.h5 {
  top: 36%;
  right: auto;
  bottom: auto;
  left: 85%;
  --practice-symbol: url("./assets/symbols/pratica-vibracao-sistro.svg");
}

.pratica-stage .hex-node.h6 {
  right: auto;
  bottom: 4%;
  left: 78%;
  --practice-symbol: url("./assets/symbols/pratica-transmutacao-escaravelho.svg");
}

.penta-map {
  width: min(42%, 660px);
  aspect-ratio: 1.18;
}

.penta-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(34px, 5.4vh, 58px);
  aspect-ratio: 1;
  translate: -50% -50%;
  place-items: center;
  color: rgba(199, 154, 73, 0.7);
}

.penta-node.p1 {
  top: 0;
  left: 38.5%;
}

.penta-node.p2 {
  top: 36%;
  left: 1%;
}

.penta-node.p3 {
  top: 36%;
  right: 1%;
}

.penta-node.p4 {
  bottom: 8%;
  left: 16%;
}

.penta-node.p5 {
  right: 16%;
  bottom: 8%;
}

.elementos-stage .penta-map {
  top: 50%;
  width: 66%;
  height: 34%;
  aspect-ratio: auto;
}

.elementos-stage .penta-core {
  display: none;
}

.elementos-stage .penta-node {
  width: 15%;
  gap: 6px;
  text-align: center;
  translate: -50% 0;
}

.elementos-stage .circle-button {
  position: relative;
  display: grid;
  width: clamp(24px, 3.7vh, 40px);
  place-items: center;
  border-color: rgba(181, 138, 63, 0.62);
  background:
    radial-gradient(circle, rgba(211, 173, 98, 0.14), transparent 58%),
    rgba(3, 4, 5, 0.14);
  box-shadow:
    0 0 8px rgba(181, 138, 63, 0.22),
    inset 0 0 8px rgba(211, 173, 98, 0.06);
}

.elementos-stage .circle-button::before {
  display: block;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  background: var(--element-symbol) center / contain no-repeat;
  filter:
    drop-shadow(0 0 3px rgba(255, 241, 194, 0.2))
    drop-shadow(0 0 6px rgba(181, 138, 63, 0.26));
}

.elementos-stage .penta-node.p1 {
  top: 74%;
  left: 50%;
  --element-symbol: url("./assets/symbols/elementos-registros-papiro.svg");
}

.elementos-stage .penta-node.p2 {
  top: 38%;
  left: 31%;
  --element-symbol: url("./assets/symbols/elementos-velas-chama.svg");
}

.elementos-stage .penta-node.p3 {
  top: 38%;
  right: auto;
  left: 69%;
  --element-symbol: url("./assets/symbols/elementos-vapores-incensario.svg");
}

.elementos-stage .penta-node.p4 {
  top: 0;
  bottom: auto;
  left: 22%;
  --element-symbol: url("./assets/symbols/elementos-pedras-cristal.svg");
}

.elementos-stage .penta-node.p5 {
  top: 0;
  right: auto;
  bottom: auto;
  left: 78%;
  --element-symbol: url("./assets/symbols/elementos-tarot-carta.svg");
}

.book-stage {
  background:
    linear-gradient(rgba(18, 4, 5, 0.08), rgba(18, 4, 5, 0.18)),
    url("./assets/backgrounds/livro-bg-piloto.png") center / cover no-repeat;
}

.book-stage .screen-heading {
  top: 7.8%;
}

.book-stage .screen-heading h1 {
  text-shadow:
    0 0 10px rgba(199, 154, 73, 0.22),
    0 0 20px rgba(78, 10, 8, 0.42);
}

.book-copy {
  position: absolute;
  top: 21.5%;
  left: 50%;
  width: min(50%, 760px);
  translate: -50% 0;
  display: grid;
  gap: clamp(7px, 1.18vh, 13px);
}

.book-copy p,
.book-actions p {
  margin: 0;
  color: var(--ivory-soft);
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.22;
  text-align: center;
}

.book-actions {
  position: absolute;
  right: 35%;
  bottom: 14.4%;
  left: 35%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  border-top: 1px solid rgba(181, 138, 63, 0.34);
  padding-top: clamp(12px, 2vh, 20px);
}

.book-actions section {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.book-actions h2,
.book-actions a {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
}

.book-actions a {
  padding: 6px 18px;
  border: 1px solid rgba(181, 138, 63, 0.48);
  background: rgba(3, 4, 5, 0.2);
  box-shadow:
    0 0 8px rgba(181, 138, 63, 0.16),
    inset 0 0 8px rgba(181, 138, 63, 0.06);
}

.mode3-return,
.ether-return,
.practice-return,
.mode4-return,
.elementos-return,
.elementos-mode4-return {
  font-size: clamp(0.48rem, 0.78vh, 0.64rem);
}

/* Final title sizing: only page titles, preserving the larger body text. */
.screen-home .home-title-main h1 {
  font-size: clamp(1.06rem, 1.46vw, 1.78rem);
  line-height: 1.06;
}

#atrio .screen-heading h1,
#pratica .screen-heading h1,
#elementos .screen-heading h1,
#livro .screen-heading h1 {
  font-size: var(--title-size);
}

@media (max-width: 820px) {
  .screen-home .home-title-main h1 {
    font-size: clamp(0.78rem, 4.1vw, 1.08rem);
    line-height: 1.02;
  }

  #atrio .screen-heading h1,
  #pratica .screen-heading h1,
  #elementos .screen-heading h1,
  #livro .screen-heading h1 {
    font-size: clamp(1rem, 4.2vw, 1.3rem);
  }
}

/* Assinatura mobile no topo da Home. Mantém o desktop sem logomarca. */
@media (max-width: 820px) {
  .screen-home .home-text-superior {
    top: clamp(48px, 10vw, 76px) !important;
    gap: clamp(2px, 0.8vw, 5px) !important;
  }

  .screen-home .home-logo {
    display: block !important;
    width: clamp(58px, 17vw, 82px) !important;
    height: auto !important;
    margin: 0 auto clamp(6px, 1.7vw, 10px) !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 14px rgba(217, 155, 43, 0.22)) brightness(1.04) !important;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.32rem, 6.2vw, 1.92rem) !important;
    line-height: 1 !important;
  }

  .screen-home .home-text-superior span {
    margin-top: 0.18rem !important;
    font-size: clamp(0.82rem, 3.85vw, 1.1rem) !important;
  }
}

/* Dimensão final mobile: Home e Átrio iguais às demais telas. */
@media (max-width: 820px) {
  .screen-home,
  #atrio {
    min-height: 100svh !important;
    display: grid !important;
    place-items: center !important;
  }

  .screen-home .home-stage,
  #atrio .atrio-stage {
    width: min(100vw, calc(100svh * 9 / 16)) !important;
    height: min(100svh, calc(100vw * 16 / 9)) !important;
    max-height: 100svh !important;
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .screen-home .home-stage::after {
    background:
      linear-gradient(180deg, rgba(2, 5, 5, 0.18), transparent 24%, rgba(2, 5, 5, 0.1) 45%, rgba(2, 5, 5, 0.68) 60%, rgba(2, 5, 5, 0.94) 100%),
      radial-gradient(circle at 50% 36%, transparent 0 26%, rgba(2, 5, 5, 0.26) 58%, rgba(2, 5, 5, 0.82) 100%) !important;
  }

  .screen-home .home-scene {
    content: url("./assets/home/home-mobile-templo-abertura.png") !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
  }

  .screen-home .home-text-superior {
    top: 4.8% !important;
    width: 84% !important;
  }

  .screen-home .home-logo {
    width: clamp(42px, 12.8vw, 58px) !important;
    margin-bottom: clamp(4px, 1.2vw, 7px) !important;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.02rem, 5vw, 1.36rem) !important;
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.66rem, 3.1vw, 0.86rem) !important;
  }

  .screen-home .home-title-main {
    top: 55.2% !important;
    width: min(84vw, 21rem) !important;
  }

  .screen-home .home-title-main h1 {
    margin-bottom: clamp(5px, 1.5vw, 8px) !important;
    font-size: clamp(0.98rem, 4.75vw, 1.22rem) !important;
    line-height: 1.06 !important;
  }

  .screen-home .home-title-main p {
    max-width: 18rem !important;
    font-size: clamp(0.68rem, 3.15vw, 0.82rem) !important;
    line-height: 1.12 !important;
  }

  .screen-home .home-book-names {
    top: 72.5% !important;
    width: min(76vw, 18rem) !important;
    min-height: 0 !important;
    padding-top: clamp(70px, 19vw, 92px) !important;
  }

  .screen-home .home-book-names::before {
    width: clamp(58px, 17vw, 78px) !important;
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.76rem, 3.55vw, 0.94rem) !important;
    line-height: 1.04 !important;
  }

  .screen-home .home-book-names .book-action,
  .screen-home .home-book-names .temple-action-mobile {
    width: min(52vw, 11.5rem) !important;
    min-height: 27px !important;
    margin-top: clamp(5px, 1.4vw, 8px) !important;
    font-size: clamp(0.48rem, 2.28vw, 0.62rem) !important;
  }

  .screen-home .home-book-names .temple-action-mobile {
    margin-top: clamp(4px, 1.1vw, 6px) !important;
  }

  .screen-home .home-niches {
    bottom: 3.4% !important;
  }

  .screen-home .home-niche-contato h2 {
    font-size: clamp(0.54rem, 2.55vw, 0.68rem) !important;
  }

  #atrio .atrio-stage {
    min-height: 0 !important;
    padding: 7.2% 7.6% 8% !important;
    display: grid !important;
    grid-template-areas:
      "heading"
      "copy-left"
      "copy-right"
      "map" !important;
    align-content: start !important;
    justify-items: center !important;
    gap: clamp(9px, 2.4vw, 14px) !important;
  }

  #atrio .frame {
    inset: 3.8% !important;
  }

  #atrio .atrio-heading,
  #atrio .left-copy,
  #atrio .right-copy,
  #atrio .diamond-map {
    width: min(82vw, 21rem) !important;
  }

  #atrio .atrio-heading h1 {
    font-size: clamp(1.35rem, 6.2vw, 1.72rem) !important;
  }

  #atrio .intro-copy p {
    margin-bottom: clamp(4px, 1.15vw, 7px) !important;
    font-size: clamp(0.66rem, 3.05vw, 0.8rem) !important;
    line-height: 1.13 !important;
  }

  #atrio .diamond-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(7px, 2vw, 11px) !important;
  }

  #atrio .atrium-node {
    min-height: clamp(98px, 27vw, 124px) !important;
    padding: clamp(8px, 2.2vw, 12px) clamp(5px, 1.5vw, 8px) !important;
    gap: clamp(4px, 1.2vw, 7px) !important;
  }

  #atrio .diamond-button {
    width: clamp(30px, 8.5vw, 42px) !important;
    height: clamp(30px, 8.5vw, 42px) !important;
  }

  #atrio .atrium-node strong {
    font-size: clamp(0.58rem, 2.7vw, 0.72rem) !important;
  }

  #atrio .atrium-node em {
    font-size: clamp(0.5rem, 2.3vw, 0.62rem) !important;
    line-height: 1.1 !important;
  }
}

/* Refinamento dimensional mobile: Home e Átrio no mesmo padrão das demais telas. */
@media (max-width: 820px) {
  .screen-home,
  #atrio {
    min-height: 100svh !important;
    display: grid !important;
    place-items: center !important;
  }

  .screen-home .home-stage,
  #atrio .atrio-stage {
    width: min(100vw, calc(100svh * 9 / 16)) !important;
    height: min(100svh, calc(100vw * 16 / 9)) !important;
    max-height: 100svh !important;
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .screen-home .home-stage::after {
    background:
      linear-gradient(180deg, rgba(2, 5, 5, 0.18), transparent 24%, rgba(2, 5, 5, 0.1) 45%, rgba(2, 5, 5, 0.68) 60%, rgba(2, 5, 5, 0.94) 100%),
      radial-gradient(circle at 50% 36%, transparent 0 26%, rgba(2, 5, 5, 0.26) 58%, rgba(2, 5, 5, 0.82) 100%) !important;
  }

  .screen-home .home-scene {
    content: url("./assets/home/home-mobile-templo-abertura.png") !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
  }

  .screen-home .home-text-superior {
    top: 4.8% !important;
    width: 84% !important;
  }

  .screen-home .home-logo {
    width: clamp(42px, 12.8vw, 58px) !important;
    margin-bottom: clamp(4px, 1.2vw, 7px) !important;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.02rem, 5vw, 1.36rem) !important;
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.66rem, 3.1vw, 0.86rem) !important;
  }

  .screen-home .home-title-main {
    top: 55.2% !important;
    width: min(84vw, 21rem) !important;
  }

  .screen-home .home-title-main h1 {
    margin-bottom: clamp(5px, 1.5vw, 8px) !important;
    font-size: clamp(0.98rem, 4.75vw, 1.22rem) !important;
    line-height: 1.06 !important;
  }

  .screen-home .home-title-main p {
    max-width: 18rem !important;
    font-size: clamp(0.68rem, 3.15vw, 0.82rem) !important;
    line-height: 1.12 !important;
  }

  .screen-home .home-book-names {
    top: 72.5% !important;
    width: min(76vw, 18rem) !important;
    min-height: 0 !important;
    padding-top: clamp(70px, 19vw, 92px) !important;
  }

  .screen-home .home-book-names::before {
    width: clamp(58px, 17vw, 78px) !important;
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.76rem, 3.55vw, 0.94rem) !important;
    line-height: 1.04 !important;
  }

  .screen-home .home-book-names .book-action,
  .screen-home .home-book-names .temple-action-mobile {
    width: min(52vw, 11.5rem) !important;
    min-height: 27px !important;
    margin-top: clamp(5px, 1.4vw, 8px) !important;
    font-size: clamp(0.48rem, 2.28vw, 0.62rem) !important;
  }

  .screen-home .home-book-names .temple-action-mobile {
    margin-top: clamp(4px, 1.1vw, 6px) !important;
  }

  .screen-home .home-niches {
    bottom: 3.4% !important;
  }

  .screen-home .home-niche-contato h2 {
    font-size: clamp(0.54rem, 2.55vw, 0.68rem) !important;
  }

  #atrio .atrio-stage {
    min-height: 0 !important;
    padding: 7.2% 7.6% 8% !important;
    display: grid !important;
    grid-template-areas:
      "heading"
      "copy-left"
      "copy-right"
      "map" !important;
    align-content: start !important;
    justify-items: center !important;
    gap: clamp(9px, 2.4vw, 14px) !important;
  }

  #atrio .frame {
    inset: 3.8% !important;
  }

  #atrio .atrio-heading,
  #atrio .left-copy,
  #atrio .right-copy,
  #atrio .diamond-map {
    width: min(82vw, 21rem) !important;
  }

  #atrio .atrio-heading h1 {
    font-size: clamp(1.35rem, 6.2vw, 1.72rem) !important;
  }

  #atrio .intro-copy p {
    margin-bottom: clamp(4px, 1.15vw, 7px) !important;
    font-size: clamp(0.66rem, 3.05vw, 0.8rem) !important;
    line-height: 1.13 !important;
  }

  #atrio .diamond-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(7px, 2vw, 11px) !important;
  }

  #atrio .atrium-node {
    min-height: clamp(98px, 27vw, 124px) !important;
    padding: clamp(8px, 2.2vw, 12px) clamp(5px, 1.5vw, 8px) !important;
    gap: clamp(4px, 1.2vw, 7px) !important;
  }

  #atrio .diamond-button {
    width: clamp(30px, 8.5vw, 42px) !important;
    height: clamp(30px, 8.5vw, 42px) !important;
  }

  #atrio .atrium-node strong {
    font-size: clamp(0.58rem, 2.7vw, 0.72rem) !important;
  }

  #atrio .atrium-node em {
    font-size: clamp(0.5rem, 2.3vw, 0.62rem) !important;
    line-height: 1.1 !important;
  }
}

/* Assinatura mobile no topo da Home. Mantém o desktop sem logomarca. */
@media (max-width: 820px) {
  .screen-home .home-text-superior {
    top: clamp(48px, 10vw, 76px) !important;
    gap: clamp(2px, 0.8vw, 5px) !important;
  }

  .screen-home .home-logo {
    display: block !important;
    width: clamp(58px, 17vw, 82px) !important;
    height: auto !important;
    margin: 0 auto clamp(6px, 1.7vw, 10px) !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 14px rgba(217, 155, 43, 0.22)) brightness(1.04) !important;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.32rem, 6.2vw, 1.92rem) !important;
    line-height: 1 !important;
  }

  .screen-home .home-text-superior span {
    margin-top: 0.18rem !important;
    font-size: clamp(0.82rem, 3.85vw, 1.1rem) !important;
  }
}

/* Ajuste final da assinatura no topo da Home mobile. */
@media (max-width: 820px) {
  .screen-home .home-text-superior {
    top: clamp(48px, 10vw, 76px) !important;
    gap: clamp(2px, 0.8vw, 5px) !important;
  }

  .screen-home .home-logo {
    display: block !important;
    width: clamp(58px, 17vw, 82px) !important;
    height: auto !important;
    margin: 0 auto clamp(6px, 1.7vw, 10px) !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 14px rgba(217, 155, 43, 0.22)) brightness(1.04);
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.32rem, 6.2vw, 1.92rem) !important;
    line-height: 1 !important;
  }

  .screen-home .home-text-superior span {
    margin-top: 0.18rem !important;
    font-size: clamp(0.82rem, 3.85vw, 1.1rem) !important;
  }
}

/* Mobile rebuild definitivo: Home e Átrio em fluxo vertical responsivo. */
@media (max-width: 820px) {
  .screen-home,
  #atrio {
    min-height: auto !important;
    display: block !important;
  }

  .screen-home .home-stage {
    width: 100vw !important;
    height: clamp(1180px, 332vw, 1500px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background:
      radial-gradient(circle at 50% 34%, rgba(199, 154, 73, 0.12), transparent 40%),
      linear-gradient(180deg, #020505, #030405 56%, #020505) !important;
  }

  .screen-home .home-stage::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    content: "" !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(2, 5, 5, 0.28), transparent 22%, rgba(2, 5, 5, 0.14) 43%, rgba(2, 5, 5, 0.76) 57%, rgba(2, 5, 5, 0.94) 100%),
      radial-gradient(circle at 50% 34%, transparent 0 24%, rgba(2, 5, 5, 0.32) 58%, rgba(2, 5, 5, 0.84) 100%) !important;
  }

  .screen-home .home-scene {
    content: url("./assets/home/home-mobile-templo-abertura.png") !important;
    width: 100% !important;
    height: 56.5% !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
  }

  .screen-home .home-text-superior,
  .screen-home .home-title-main,
  .screen-home .home-book-names,
  .screen-home .home-niches {
    left: 50% !important;
    right: auto !important;
    translate: -50% 0 !important;
    width: min(84vw, 24rem) !important;
    text-align: center !important;
  }

  .screen-home .home-text-superior {
    top: clamp(42px, 7vw, 62px) !important;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.12rem, 5.4vw, 1.6rem) !important;
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.72rem, 3.4vw, 0.96rem) !important;
  }

  .screen-home .home-title-main {
    top: clamp(548px, 146vw, 650px) !important;
  }

  .screen-home .home-title-main h1 {
    margin: 0 0 clamp(10px, 2.8vw, 16px) !important;
    font-size: clamp(1.3rem, 5.9vw, 1.78rem) !important;
    line-height: 1.08 !important;
  }

  .screen-home .home-title-main p {
    margin: 0 auto !important;
    max-width: 20.5rem !important;
    font-size: clamp(0.92rem, 3.95vw, 1.12rem) !important;
    line-height: 1.2 !important;
  }

  .screen-home .home-title-main p:nth-of-type(n + 2),
  .screen-home .home-title-main .temple-call,
  .screen-home .home-title-main .temple-action {
    display: none !important;
  }

  .screen-home .home-book-names {
    top: clamp(748px, 208vw, 925px) !important;
    min-height: clamp(330px, 88vw, 410px) !important;
    padding-top: clamp(184px, 49vw, 228px) !important;
    display: grid !important;
    justify-items: center !important;
  }

  .screen-home .home-book-names::before {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    z-index: -1 !important;
    width: clamp(122px, 35vw, 164px) !important;
    aspect-ratio: 300 / 548 !important;
    content: "" !important;
    translate: -50% 0 !important;
    background: url("./assets/home/home-book-panel-mobile.png") center / contain no-repeat !important;
    filter: drop-shadow(0 0 18px rgba(217, 155, 43, 0.18)) !important;
  }

  .screen-home .home-book-names p {
    margin: 0 !important;
    font-size: clamp(1rem, 4.6vw, 1.32rem) !important;
    line-height: 1.1 !important;
    color: rgba(255, 240, 188, 0.96) !important;
  }

  .screen-home .home-book-names p + p::before {
    content: "e " !important;
  }

  .screen-home .home-action {
    min-height: 38px !important;
    border-radius: 4px !important;
  }

  .screen-home .home-book-names .book-action,
  .screen-home .home-book-names .temple-action-mobile {
    width: min(62vw, 14rem) !important;
    margin-top: clamp(10px, 2.8vw, 15px) !important;
    font-size: clamp(0.62rem, 2.78vw, 0.84rem) !important;
  }

  .screen-home .home-book-names .book-action {
    background: rgba(117, 70, 17, 0.62) !important;
  }

  .screen-home .home-book-names .temple-action-mobile {
    display: inline-grid !important;
    margin-top: clamp(8px, 2.2vw, 12px) !important;
    color: rgba(246, 234, 208, 0.88) !important;
    background: rgba(2, 5, 5, 0.48) !important;
  }

  .screen-home .label-desktop {
    display: none !important;
  }

  .screen-home .label-mobile {
    display: inline !important;
  }

  .screen-home .home-niches {
    top: auto !important;
    bottom: clamp(38px, 10vw, 58px) !important;
    display: block !important;
    height: auto !important;
    pointer-events: auto !important;
  }

  .screen-home .home-niche:not(.home-niche-contato) {
    display: none !important;
  }

  .screen-home .home-niche-contato {
    display: inline-grid !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .screen-home .home-niche-contato h2 {
    max-width: none !important;
    font-size: clamp(0.68rem, 3vw, 0.86rem) !important;
    line-height: 1 !important;
    color: rgba(245, 209, 130, 0.92) !important;
  }

  .screen-home .home-niche-contato p {
    display: none !important;
  }

  #atrio .atrio-stage {
    width: 100vw !important;
    height: auto !important;
    min-height: 1040px !important;
    padding: clamp(54px, 13vw, 78px) min(8vw, 34px) clamp(58px, 14vw, 82px) !important;
    aspect-ratio: auto !important;
    display: grid !important;
    grid-template-areas:
      "heading"
      "copy-left"
      "copy-right"
      "map" !important;
    align-content: start !important;
    justify-items: center !important;
    gap: clamp(20px, 5.6vw, 34px) !important;
    background:
      linear-gradient(rgba(3, 4, 5, 0.52), rgba(3, 4, 5, 0.72)),
      url("./assets/backgrounds/atrio-bg-piloto.png") center / cover no-repeat !important;
    box-shadow: none !important;
  }

  #atrio .frame {
    inset: 14px !important;
    opacity: 0.82 !important;
  }

  #atrio .atrio-heading,
  #atrio .left-copy,
  #atrio .right-copy,
  #atrio .diamond-map {
    position: relative !important;
    inset: auto !important;
    translate: none !important;
    z-index: 4 !important;
    width: min(84vw, 24rem) !important;
    text-align: center !important;
  }

  #atrio .atrio-heading {
    grid-area: heading !important;
  }

  #atrio .atrio-heading h1 {
    font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
    line-height: 1 !important;
  }

  #atrio .left-copy {
    grid-area: copy-left !important;
  }

  #atrio .right-copy {
    grid-area: copy-right !important;
  }

  #atrio .intro-copy p {
    margin: 0 0 clamp(8px, 2.4vw, 13px) !important;
    font-size: clamp(0.92rem, 4vw, 1.1rem) !important;
    line-height: 1.22 !important;
  }

  #atrio .diamond-map {
    grid-area: map !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 3.6vw, 18px) !important;
    margin-top: clamp(4px, 1vw, 8px) !important;
  }

  #atrio .diamond-map .axis,
  #atrio .diamond-map .center-mark {
    display: none !important;
  }

  #atrio .atrium-node {
    position: relative !important;
    inset: auto !important;
    translate: none !important;
    min-height: clamp(142px, 38vw, 176px) !important;
    padding: clamp(13px, 3.4vw, 18px) clamp(8px, 2.5vw, 14px) !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: clamp(7px, 2vw, 11px) !important;
    border: 1px solid rgba(199, 154, 73, 0.34) !important;
    border-radius: 6px !important;
    background: rgba(2, 5, 5, 0.54) !important;
    box-shadow: inset 0 0 20px rgba(199, 154, 73, 0.05), 0 12px 32px rgba(0, 0, 0, 0.28) !important;
    text-align: center !important;
  }

  #atrio .atrium-node.right .diamond-button,
  #atrio .atrium-node.bottom .diamond-button {
    order: -1 !important;
  }

  #atrio .diamond-button {
    width: clamp(42px, 12vw, 58px) !important;
    height: clamp(42px, 12vw, 58px) !important;
  }

  #atrio .atrium-node strong {
    font-size: clamp(0.76rem, 3.3vw, 0.95rem) !important;
    line-height: 1.05 !important;
  }

  #atrio .atrium-node em {
    font-size: clamp(0.64rem, 2.75vw, 0.78rem) !important;
    line-height: 1.16 !important;
  }
}

/* Rebuild mobile do zero: Home e Átrio. Desktop permanece pelas regras acima. */
@media (max-width: 820px) {
  .screen-home,
  #atrio {
    min-height: auto;
    display: block;
  }

  .screen-home .home-stage {
    width: 100vw;
    height: clamp(1180px, 332vw, 1500px);
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    box-shadow: none;
    background:
      radial-gradient(circle at 50% 34%, rgba(199, 154, 73, 0.12), transparent 40%),
      linear-gradient(180deg, #020505, #030405 56%, #020505);
  }

  .screen-home .home-stage::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(2, 5, 5, 0.28), transparent 22%, rgba(2, 5, 5, 0.14) 43%, rgba(2, 5, 5, 0.76) 57%, rgba(2, 5, 5, 0.94) 100%),
      radial-gradient(circle at 50% 34%, transparent 0 24%, rgba(2, 5, 5, 0.32) 58%, rgba(2, 5, 5, 0.84) 100%);
  }

  .screen-home .home-scene {
    content: url("./assets/home/home-mobile-templo-abertura.png");
    height: 56.5%;
    object-fit: cover;
    object-position: 50% 0;
  }

  .screen-home .home-text-superior,
  .screen-home .home-title-main,
  .screen-home .home-book-names,
  .screen-home .home-niches {
    left: 50%;
    right: auto;
    translate: -50% 0;
    width: min(84vw, 24rem);
    text-align: center;
  }

  .screen-home .home-text-superior {
    top: clamp(42px, 7vw, 62px);
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.12rem, 5.4vw, 1.6rem);
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.72rem, 3.4vw, 0.96rem);
  }

  .screen-home .home-title-main {
    top: clamp(548px, 146vw, 650px);
  }

  .screen-home .home-title-main h1 {
    margin: 0 0 clamp(10px, 2.8vw, 16px);
    font-size: clamp(1.3rem, 5.9vw, 1.78rem);
    line-height: 1.08;
  }

  .screen-home .home-title-main p {
    margin: 0 auto;
    max-width: 20.5rem;
    font-size: clamp(0.92rem, 3.95vw, 1.12rem);
    line-height: 1.2;
  }

  .screen-home .home-title-main p:nth-of-type(n + 2),
  .screen-home .home-title-main .temple-call,
  .screen-home .home-title-main .temple-action {
    display: none;
  }

  .screen-home .home-book-names {
    top: clamp(748px, 208vw, 925px);
    min-height: clamp(330px, 88vw, 410px);
    padding-top: clamp(184px, 49vw, 228px);
    display: grid;
    justify-items: center;
  }

  .screen-home .home-book-names::before {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    width: clamp(122px, 35vw, 164px);
    aspect-ratio: 300 / 548;
    content: "";
    translate: -50% 0;
    background: url("./assets/home/home-book-panel-mobile.png") center / contain no-repeat;
    filter: drop-shadow(0 0 18px rgba(217, 155, 43, 0.18));
  }

  .screen-home .home-book-names p {
    margin: 0;
    font-size: clamp(1rem, 4.6vw, 1.32rem);
    line-height: 1.1;
    color: rgba(255, 240, 188, 0.96);
  }

  .screen-home .home-book-names p + p::before {
    content: "e ";
  }

  .screen-home .home-action {
    min-height: 38px;
    border-radius: 4px;
  }

  .screen-home .home-book-names .book-action,
  .screen-home .home-book-names .temple-action-mobile {
    width: min(62vw, 14rem);
    margin-top: clamp(10px, 2.8vw, 15px);
    font-size: clamp(0.62rem, 2.78vw, 0.84rem);
  }

  .screen-home .home-book-names .book-action {
    background: rgba(117, 70, 17, 0.62);
  }

  .screen-home .home-book-names .temple-action-mobile {
    display: inline-grid;
    margin-top: clamp(8px, 2.2vw, 12px);
    color: rgba(246, 234, 208, 0.88);
    background: rgba(2, 5, 5, 0.48);
  }

  .screen-home .label-desktop {
    display: none;
  }

  .screen-home .label-mobile {
    display: inline;
  }

  .screen-home .home-niches {
    top: auto;
    bottom: clamp(38px, 10vw, 58px);
    display: block;
    height: auto;
    pointer-events: auto;
  }

  .screen-home .home-niche:not(.home-niche-contato) {
    display: none;
  }

  .screen-home .home-niche-contato {
    display: inline-grid;
    min-width: 0;
    padding: 0;
  }

  .screen-home .home-niche-contato h2 {
    max-width: none;
    font-size: clamp(0.68rem, 3vw, 0.86rem);
    line-height: 1;
    color: rgba(245, 209, 130, 0.92);
  }

  .screen-home .home-niche-contato p {
    display: none;
  }

  #atrio .atrio-stage {
    width: 100vw;
    height: auto;
    min-height: 1040px;
    padding: clamp(54px, 13vw, 78px) min(8vw, 34px) clamp(58px, 14vw, 82px);
    aspect-ratio: auto;
    display: grid;
    grid-template-areas:
      "heading"
      "copy-left"
      "copy-right"
      "map";
    align-content: start;
    justify-items: center;
    gap: clamp(20px, 5.6vw, 34px);
    background:
      linear-gradient(rgba(3, 4, 5, 0.52), rgba(3, 4, 5, 0.72)),
      url("./assets/backgrounds/atrio-bg-piloto.png") center / cover no-repeat;
    box-shadow: none;
  }

  #atrio .frame {
    inset: 14px;
    opacity: 0.82;
  }

  #atrio .atrio-heading,
  #atrio .left-copy,
  #atrio .right-copy,
  #atrio .diamond-map {
    position: relative;
    inset: auto;
    translate: none;
    z-index: 4;
    width: min(84vw, 24rem);
    text-align: center;
  }

  #atrio .atrio-heading {
    grid-area: heading;
  }

  #atrio .atrio-heading h1 {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
    line-height: 1;
  }

  #atrio .left-copy {
    grid-area: copy-left;
  }

  #atrio .right-copy {
    grid-area: copy-right;
  }

  #atrio .intro-copy p {
    margin: 0 0 clamp(8px, 2.4vw, 13px);
    font-size: clamp(0.92rem, 4vw, 1.1rem);
    line-height: 1.22;
  }

  #atrio .diamond-map {
    grid-area: map;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 3.6vw, 18px);
    margin-top: clamp(4px, 1vw, 8px);
  }

  #atrio .diamond-map .axis,
  #atrio .diamond-map .center-mark {
    display: none;
  }

  #atrio .atrium-node {
    position: relative;
    inset: auto;
    translate: none;
    min-height: clamp(142px, 38vw, 176px);
    padding: clamp(13px, 3.4vw, 18px) clamp(8px, 2.5vw, 14px);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(7px, 2vw, 11px);
    border: 1px solid rgba(199, 154, 73, 0.34);
    border-radius: 6px;
    background: rgba(2, 5, 5, 0.54);
    box-shadow: inset 0 0 20px rgba(199, 154, 73, 0.05), 0 12px 32px rgba(0, 0, 0, 0.28);
    text-align: center;
  }

  #atrio .atrium-node.right .diamond-button,
  #atrio .atrium-node.bottom .diamond-button {
    order: -1;
  }

  #atrio .diamond-button {
    width: clamp(42px, 12vw, 58px);
    height: clamp(42px, 12vw, 58px);
  }

  #atrio .atrium-node strong {
    font-size: clamp(0.76rem, 3.3vw, 0.95rem);
    line-height: 1.05;
  }

  #atrio .atrium-node em {
    font-size: clamp(0.64rem, 2.75vw, 0.78rem);
    line-height: 1.16;
  }
}

/* Final mobile home: abertura, bloco do livro original e contatos em fluxo vertical. */
@media (max-width: 820px) {
  .screen-home {
    min-height: auto;
    place-items: start center;
  }

  .screen-home .home-stage {
    width: 100vw;
    height: clamp(1120px, 330vw, 1480px);
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    box-shadow: none;
  }

  .screen-home .home-stage::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(2, 5, 5, 0.42), rgba(2, 5, 5, 0.03) 18%, rgba(2, 5, 5, 0.06) 42%, rgba(2, 5, 5, 0.7) 55%, rgba(2, 5, 5, 0.92) 100%),
      radial-gradient(circle at 50% 46%, transparent 0 28%, rgba(2, 5, 5, 0.36) 56%, rgba(2, 5, 5, 0.82) 100%);
  }

  .screen-home .home-scene {
    content: url("./assets/home/home-mobile-templo-v2.png");
    object-fit: cover;
    object-position: 50% 0;
  }

  .screen-home .home-text-superior {
    top: 4.8%;
    left: 50%;
    width: 84%;
    translate: -50% 0;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.05rem, 5.2vw, 1.55rem);
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.72rem, 3.3vw, 0.95rem);
  }

  .screen-home .home-title-main {
    top: 49%;
    left: 50%;
    width: min(84vw, 23rem);
    translate: -50% 0;
    text-align: center;
  }

  .screen-home .home-title-main h1 {
    margin: 0 0 clamp(9px, 2.4vw, 14px);
    font-size: clamp(1.28rem, 5.8vw, 1.72rem);
    line-height: 1.08;
  }

  .screen-home .home-title-main p {
    margin: 0 auto;
    max-width: 20rem;
    font-size: clamp(0.92rem, 3.9vw, 1.1rem);
    line-height: 1.18;
  }

  .screen-home .home-title-main p:nth-of-type(n + 2),
  .screen-home .home-title-main .temple-call,
  .screen-home .home-title-main .temple-action {
    display: none;
  }

  .screen-home .home-book-names {
    top: 64.5%;
    right: auto;
    left: 50%;
    width: min(78vw, 20rem);
    min-height: clamp(300px, 82vw, 380px);
    padding-top: clamp(178px, 48vw, 225px);
    translate: -50% 0;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .screen-home .home-book-names::before {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    width: clamp(112px, 34vw, 152px);
    aspect-ratio: 300 / 548;
    content: "";
    translate: -50% 0;
    background: url("./assets/home/home-book-panel-mobile.png") center / contain no-repeat;
    filter: drop-shadow(0 0 18px rgba(217, 155, 43, 0.18));
    opacity: 0.96;
  }

  .screen-home .home-book-names p {
    margin: 0;
    font-size: clamp(1rem, 4.55vw, 1.3rem);
    line-height: 1.1;
    color: rgba(255, 240, 188, 0.96);
  }

  .screen-home .home-book-names p + p::before {
    content: "e ";
  }

  .screen-home .home-book-names .book-action,
  .screen-home .home-book-names .temple-action-mobile {
    width: min(60vw, 13.8rem);
    min-height: 38px;
    margin-top: clamp(10px, 2.8vw, 14px);
    font-size: clamp(0.62rem, 2.78vw, 0.82rem);
  }

  .screen-home .home-book-names .book-action {
    background: rgba(117, 70, 17, 0.6);
  }

  .screen-home .home-book-names .temple-action-mobile {
    display: inline-grid;
    margin-top: clamp(8px, 2.2vw, 11px);
    color: rgba(246, 234, 208, 0.88);
    background: rgba(2, 5, 5, 0.44);
  }

  .screen-home .label-desktop {
    display: none;
  }

  .screen-home .label-mobile {
    display: inline;
  }

  .screen-home .home-niches {
    top: 94.2%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: auto;
    height: auto;
    translate: -50% 0;
    display: block;
    pointer-events: auto;
  }

  .screen-home .home-niche:not(.home-niche-contato) {
    display: none;
  }

  .screen-home .home-niche-contato {
    display: inline-grid;
    min-width: 0;
    padding: 0;
  }

  .screen-home .home-niche-contato h2 {
    max-width: none;
    font-size: clamp(0.66rem, 2.9vw, 0.84rem);
    line-height: 1;
    color: rgba(245, 209, 130, 0.92);
  }

  .screen-home .home-niche-contato p {
    display: none;
  }
}

/* Home mobile: venda do livro com a imagem vertical da home original. */
@media (max-width: 820px) {
  .screen-home {
    min-height: auto;
    place-items: start center;
  }

  .screen-home .home-stage {
    width: 100vw;
    height: max(100svh, 220vw);
    min-height: 780px;
    max-height: 1040px;
    aspect-ratio: auto;
    box-shadow: none;
  }

  .screen-home .home-stage::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(2, 5, 5, 0.38), transparent 15%, transparent 47%, rgba(2, 5, 5, 0.42) 60%, rgba(2, 5, 5, 0.78) 100%),
      radial-gradient(circle at 50% 72%, rgba(2, 5, 5, 0.16), rgba(2, 5, 5, 0.58) 54%, rgba(2, 5, 5, 0.78) 100%);
  }

  .screen-home .home-scene {
    content: url("./assets/home/home-mobile-templo-v2.png");
    object-fit: cover;
    object-position: 50% 0;
  }

  .screen-home .home-text-superior {
    top: 5.4%;
    width: 82%;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.05rem, 5.2vw, 1.55rem);
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.72rem, 3.3vw, 0.95rem);
  }

  .screen-home .home-title-main {
    top: 54.5%;
    left: 50%;
    translate: -50% 0;
    width: min(82vw, 23rem);
    text-align: center;
  }

  .screen-home .home-title-main h1 {
    margin-bottom: clamp(8px, 2vw, 13px);
    font-size: clamp(1.24rem, 5.7vw, 1.68rem);
    line-height: 1.08;
  }

  .screen-home .home-title-main p {
    margin: 0 auto;
    max-width: 20rem;
    font-size: clamp(0.9rem, 3.82vw, 1.08rem);
    line-height: 1.18;
  }

  .screen-home .home-title-main p:nth-of-type(n + 2),
  .screen-home .home-title-main .temple-call,
  .screen-home .home-title-main .temple-action {
    display: none;
  }

  .screen-home .home-book-names {
    top: 70.6%;
    right: auto;
    left: 50%;
    translate: -50% 0;
    width: min(76vw, 20rem);
  }

  .screen-home .home-book-names p {
    margin: 0;
    font-size: clamp(1rem, 4.55vw, 1.28rem);
    line-height: 1.1;
    color: rgba(255, 240, 188, 0.96);
  }

  .screen-home .home-book-names p + p::before {
    content: "e ";
  }

  .screen-home .home-book-names .book-action,
  .screen-home .home-book-names .temple-action-mobile {
    width: min(58vw, 13.5rem);
    min-height: 36px;
    margin-top: clamp(10px, 2.8vw, 14px);
    font-size: clamp(0.62rem, 2.78vw, 0.82rem);
  }

  .screen-home .home-book-names .book-action {
    background: rgba(117, 70, 17, 0.58);
  }

  .screen-home .home-book-names .temple-action-mobile {
    display: inline-grid;
    margin-top: clamp(8px, 2.2vw, 11px);
    color: rgba(246, 234, 208, 0.88);
    background: rgba(2, 5, 5, 0.42);
  }

  .screen-home .label-desktop {
    display: none;
  }

  .screen-home .label-mobile {
    display: inline;
  }

  .screen-home .home-niches {
    top: 92.2%;
    right: auto;
    bottom: auto;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: auto;
    height: auto;
    pointer-events: auto;
  }

  .screen-home .home-niche:not(.home-niche-contato) {
    display: none;
  }

  .screen-home .home-niche-contato {
    display: inline-grid;
    min-width: 0;
    padding: 0;
  }

  .screen-home .home-niche-contato h2 {
    max-width: none;
    font-size: clamp(0.66rem, 2.9vw, 0.82rem);
    line-height: 1;
    color: rgba(245, 209, 130, 0.9);
  }

  .screen-home .home-niche-contato p {
    display: none;
  }
}

/* Final readability adjustments for the entrance screens. */
.screen-home .home-title-main h1 {
  font-size: clamp(1.18rem, 1.72vw, 1.92rem);
  line-height: 1.08;
}

.screen-home .home-title-main p {
  font-size: clamp(0.78rem, 1.08vw, 1.16rem);
  line-height: 1.2;
}

.screen-home .home-title-main .temple-call {
  font-size: clamp(0.68rem, 0.9vw, 1rem);
}

.screen-home .home-book-names p {
  font-size: clamp(0.94rem, 1.3vw, 1.44rem);
  line-height: 1.1;
}

.screen-home .home-niche h2 {
  font-size: clamp(0.86rem, 1.2vw, 1.32rem);
}

.screen-home .home-niche p {
  font-size: clamp(0.72rem, 0.98vw, 1.08rem);
  line-height: 1.2;
}

#atrio .screen-heading h1,
#pratica .screen-heading h1,
#elementos .screen-heading h1 {
  font-size: clamp(1.28rem, 2.2vw, 2.1rem);
}

#atrio .screen-heading p,
#pratica .screen-heading p,
#elementos .screen-heading p {
  font-size: clamp(0.9rem, 1.5vh, 1.12rem);
  line-height: 1.28;
}

#atrio .intro-copy {
  width: 28%;
  gap: clamp(11px, 2.15vh, 21px);
}

#atrio .intro-copy p {
  font-size: clamp(0.9rem, 1.5vh, 1.12rem);
  line-height: 1.28;
}

#atrio .atrium-node {
  gap: clamp(8px, 1.35vh, 13px);
}

#atrio .atrium-node strong {
  font-size: clamp(0.78rem, 1.25vh, 0.98rem);
  line-height: 1.08;
}

#atrio .atrium-node em {
  font-size: clamp(0.72rem, 1.16vh, 0.86rem);
  line-height: 1.28;
}

@media (max-width: 820px) {
  .screen-home .home-title-main h1 {
    font-size: clamp(0.92rem, 4.75vw, 1.24rem);
  }

  .screen-home .home-title-main p {
    font-size: clamp(0.54rem, 2.72vw, 0.72rem);
    line-height: 1.12;
  }

  .screen-home .home-title-main .temple-call {
    font-size: clamp(0.5rem, 2.35vw, 0.64rem);
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.66rem, 3.25vw, 0.9rem);
  }

  .screen-home .home-niche h2 {
    font-size: clamp(0.58rem, 2.95vw, 0.78rem);
  }

  #atrio .screen-heading h1,
  #pratica .screen-heading h1,
  #elementos .screen-heading h1 {
    font-size: clamp(1.15rem, 5vw, 1.48rem);
  }

  #atrio .screen-heading p,
  #pratica .screen-heading p,
  #elementos .screen-heading p,
  #atrio .intro-copy p {
    font-size: clamp(0.62rem, 2.55vw, 0.84rem);
  }

  #atrio .atrium-node strong {
    font-size: clamp(0.56rem, 2.45vw, 0.76rem);
  }

  #atrio .atrium-node em {
    font-size: clamp(0.5rem, 2.22vw, 0.68rem);
  }
}

/* Final readability adjustments for the two entrance screens. */
.screen-home .home-title-main h1 {
  font-size: clamp(1.18rem, 1.72vw, 1.92rem);
  line-height: 1.08;
}

.screen-home .home-title-main p {
  font-size: clamp(0.78rem, 1.08vw, 1.16rem);
  line-height: 1.2;
}

.screen-home .home-title-main .temple-call {
  font-size: clamp(0.68rem, 0.9vw, 1rem);
}

.screen-home .home-book-names p {
  font-size: clamp(0.94rem, 1.3vw, 1.44rem);
  line-height: 1.1;
}

.screen-home .home-niche h2 {
  font-size: clamp(0.86rem, 1.2vw, 1.32rem);
}

.screen-home .home-niche p {
  font-size: clamp(0.72rem, 0.98vw, 1.08rem);
  line-height: 1.2;
}

#atrio .screen-heading h1 {
  font-size: clamp(1.28rem, 2.2vw, 2.1rem);
}

#atrio .intro-copy {
  width: 28%;
  gap: clamp(11px, 2.15vh, 21px);
}

#atrio .intro-copy p {
  font-size: clamp(0.9rem, 1.5vh, 1.12rem);
  line-height: 1.28;
}

#atrio .atrium-node {
  gap: clamp(8px, 1.35vh, 13px);
}

#atrio .atrium-node strong {
  font-size: clamp(0.78rem, 1.25vh, 0.98rem);
  line-height: 1.08;
}

#atrio .atrium-node em {
  font-size: clamp(0.72rem, 1.16vh, 0.86rem);
  line-height: 1.28;
}

@media (max-width: 820px) {
  .screen-home .home-title-main h1 {
    font-size: clamp(0.92rem, 4.75vw, 1.24rem);
  }

  .screen-home .home-title-main p {
    font-size: clamp(0.54rem, 2.72vw, 0.72rem);
    line-height: 1.12;
  }

  .screen-home .home-title-main .temple-call {
    font-size: clamp(0.5rem, 2.35vw, 0.64rem);
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.66rem, 3.25vw, 0.9rem);
  }

  .screen-home .home-niche h2 {
    font-size: clamp(0.58rem, 2.95vw, 0.78rem);
  }

  #atrio .screen-heading h1 {
    font-size: clamp(1.15rem, 5vw, 1.48rem);
  }

  #atrio .intro-copy p {
    font-size: clamp(0.62rem, 2.55vw, 0.84rem);
  }

  #atrio .atrium-node strong {
    font-size: clamp(0.56rem, 2.45vw, 0.76rem);
  }

  #atrio .atrium-node em {
    font-size: clamp(0.5rem, 2.22vw, 0.68rem);
  }
}

.book-stage .screen-heading h1 {
  font-size: clamp(1.45rem, 2.25vw, 2.6rem);
}

.book-stage .screen-heading p {
  font-size: clamp(0.88rem, 1.22vw, 1.24rem);
}

.book-copy {
  top: 20.4%;
  width: min(54%, 820px);
  gap: clamp(8px, 1.22vh, 14px);
}

.book-copy p,
.book-actions p {
  font-size: clamp(0.82rem, 1.32vh, 1.08rem);
  line-height: 1.26;
}

.book-actions h2,
.book-actions a {
  font-size: clamp(0.7rem, 1.05vh, 0.9rem);
}

@media (max-width: 820px) {
  .book-copy p,
  .book-actions p {
    font-size: clamp(0.68rem, 1.2vh, 0.92rem);
  }
}

#tarot .elementos-tarot-copy {
  top: 22%;
  left: 50%;
  width: min(46%, 720px);
  height: 49%;
  max-height: 49%;
  transform: translateX(-50%);
  column-count: 1 !important;
  column-gap: 0 !important;
  column-width: auto !important;
  columns: auto !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  padding-right: clamp(10px, 1vw, 16px);
  text-align: left;
  white-space: normal;
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 154, 73, 0.55) rgba(3, 4, 5, 0.28);
}

#tarot .elementos-tarot-copy p {
  width: 100%;
  max-width: 100%;
  margin: 0;
  direction: ltr;
  white-space: normal;
  overflow-wrap: normal;
}

#tarot .elementos-tarot-copy::-webkit-scrollbar {
  width: 7px;
}

#tarot .elementos-tarot-copy::-webkit-scrollbar-track {
  background: rgba(3, 4, 5, 0.28);
}

#tarot .elementos-tarot-copy::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(199, 154, 73, 0.58);
}

.atrium-node,
.step,
.hex-node,
.penta-node,
.mode3-return,
.ether-return,
.practice-forward,
.practice-return,
.mode4-return,
.elementos-return,
.elementos-mode4-return,
.footer-return,
.footer-soon,
.book-actions a,
.home-action {
  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    text-shadow 220ms ease,
    filter 220ms ease,
    opacity 220ms ease;
}

.atrium-node:hover,
.atrium-node:focus-visible,
.step:hover,
.step:focus-visible,
.hex-node:hover,
.hex-node:focus-visible,
.penta-node:hover,
.penta-node:focus-visible,
.mode3-return:hover,
.mode3-return:focus-visible,
.ether-return:hover,
.ether-return:focus-visible,
.practice-forward:hover,
.practice-forward:focus-visible,
.practice-return:hover,
.practice-return:focus-visible,
.mode4-return:hover,
.mode4-return:focus-visible,
.elementos-return:hover,
.elementos-return:focus-visible,
.elementos-mode4-return:hover,
.elementos-mode4-return:focus-visible,
.footer-return:hover,
.footer-return:focus-visible,
.footer-soon:hover,
.footer-soon:focus-visible,
.book-actions a:hover,
.book-actions a:focus-visible,
.home-action:hover,
.home-action:focus-visible {
  color: #fff3bf;
  text-shadow:
    0 0 7px rgba(247, 231, 190, 0.48),
    0 0 18px rgba(199, 154, 73, 0.24),
    0 2px 8px rgba(0, 0, 0, 0.76);
  filter: brightness(1.12);
}

.book-actions a:hover,
.book-actions a:focus-visible,
.home-action:hover,
.home-action:focus-visible {
  border-color: rgba(247, 215, 131, 0.86);
  box-shadow:
    0 0 14px rgba(199, 154, 73, 0.22),
    inset 0 0 10px rgba(181, 138, 63, 0.1);
}

.circle-button,
.portal-button,
.diamond-button {
  transition: filter 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

a:hover .circle-button,
a:focus-visible .circle-button,
a:hover .portal-button,
a:focus-visible .portal-button,
a:hover .diamond-button,
a:focus-visible .diamond-button {
  filter:
    brightness(1.14)
    drop-shadow(0 0 8px rgba(199, 154, 73, 0.34));
}



.practice-mode4-stage::after {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.54) 0 34%, rgba(0, 0, 0, 0.34) 56%, rgba(0, 0, 0, 0.18) 76%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 19%, transparent 81%, rgba(0, 0, 0, 0.42)),
    linear-gradient(rgba(2, 3, 4, 0.1), rgba(2, 3, 4, 0.2)),
    var(--mode3-bg) center / cover no-repeat;
}

.mode4-heading {
  position: absolute;
  z-index: 4;
  top: 9.4%;
  left: 50%;
  width: min(72%, 1120px);
  transform: translateX(-50%);
  text-align: center;
}

.mode4-heading h1 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--title-size);
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.76), 0 0 18px rgba(174, 116, 39, 0.22);
}

.mode4-copy {
  position: absolute;
  z-index: 4;
  top: 20.2%;
  bottom: 15%;
  left: 50%;
  width: min(68%, 1080px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.2vw, 76px);
  color: var(--ivory-soft);
  font-family: Cormorant Garamond, Georgia, serif;
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.76);
}


.mode4-text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.mode4-copy p {
  margin: 0 0 clamp(8px, 1vh, 13px);
}

.mode4-copy-long {
  top: 18.8%;
  bottom: 14.2%;
  width: min(72%, 1160px);
  font-size: clamp(0.74rem, 1.18vh, 0.94rem);
  line-height: 1.16;
  gap: clamp(30px, 4vw, 72px);
}

.mode4-copy-short {
  top: 24%;
  bottom: 18%;
  width: min(62%, 960px);
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.22;
}

.mode4-return {
  position: absolute;
  z-index: 4;
  bottom: 7.8%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.74rem, 1.12vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.82), 0 0 10px rgba(194, 129, 41, 0.22);
}


.mode4-heading::after,
.mode4-return::before {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(92px, 12vw, 180px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199, 154, 73, 0.74) 18%, rgba(211, 173, 98, 0.86) 50%, rgba(199, 154, 73, 0.74) 82%, transparent);
  box-shadow: 0 0 5px rgba(199, 154, 73, 0.18);
}

.mode4-heading::after {
  bottom: clamp(-18px, -1.85vh, -11px);
}

.mode4-return::before {
  top: clamp(-16px, -1.6vh, -10px);
}

.mode4-heading::before,
.mode4-return::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1;
  width: clamp(7px, 0.72vw, 11px);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #9b2424 0 13%, #6b1214 42%, #2e0808 100%);
  border: 1px solid rgba(199, 154, 73, 0.74);
  box-shadow: 0 0 7px rgba(107, 18, 20, 0.58), 0 0 5px rgba(199, 154, 73, 0.22);
}

.mode4-heading::before {
  bottom: clamp(-23px, -2.22vh, -15px);
}

.mode4-return::after {
  top: clamp(-20px, -1.98vh, -13px);
}
.mode4-return:hover,
.mode4-return:focus-visible {
  color: #f1d28a;
}

.elementos-registro-stage { --elementos-mode3-bg: url("./assets/backgrounds/elementos-registro-bg-piloto.png"); }
.elementos-pedras-stage { --elementos-mode3-bg: url("./assets/backgrounds/elementos-pedras-bg-piloto.png"); }
.elementos-vigilia-stage { --elementos-mode3-bg: url("./assets/backgrounds/elementos-vigilia-bg-piloto.png"); }
.elementos-tarot-stage { --elementos-mode3-bg: url("./assets/backgrounds/elementos-tarot-bg-piloto.png"); }
.elementos-vapores-stage { --elementos-mode3-bg: url("./assets/backgrounds/elementos-vapores-bg-piloto.png"); }

.elementos-mode3-stage::after {
  position: absolute;
  z-index: 0;
  inset: 4.2%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.62) 0 31%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.42)),
    var(--elementos-mode3-bg) center / cover no-repeat;
}

.elementos-mode3-heading {
  position: absolute;
  z-index: 4;
  top: 8.8%;
  left: 50%;
  width: min(74%, 1120px);
  transform: translateX(-50%);
  text-align: center;
}

.elementos-mode3-heading h1 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(199, 154, 73, 0.18), 0 2px 6px rgba(0, 0, 0, 0.7);
}

.elementos-mode3-heading p {
  margin: clamp(5px, 0.9vh, 10px) 0 0;
  color: rgba(244, 232, 202, 0.88);
  font-family: Cormorant Garamond, Georgia, serif;
  font-size: clamp(0.72rem, 1.14vh, 0.94rem);
  font-weight: 600;
  line-height: 1.12;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.76);
}

.elementos-mode3-heading::after,
.elementos-return::before {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(92px, 12vw, 180px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199, 154, 73, 0.74) 18%, rgba(211, 173, 98, 0.86) 50%, rgba(199, 154, 73, 0.74) 82%, transparent);
}

.elementos-mode3-heading::after { bottom: clamp(-18px, -1.85vh, -11px); }
.elementos-return::before { top: clamp(-16px, -1.6vh, -10px); }

.elementos-mode3-heading::before,
.elementos-return::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1;
  width: clamp(7px, 0.72vw, 11px);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #9b2424 0 13%, #6b1214 42%, #2e0808 100%);
  border: 1px solid rgba(199, 154, 73, 0.74);
  box-shadow: 0 0 7px rgba(107, 18, 20, 0.58), 0 0 5px rgba(199, 154, 73, 0.22);
}

.elementos-mode3-heading::before { bottom: clamp(-23px, -2.22vh, -15px); }
.elementos-return::after { top: clamp(-20px, -1.98vh, -13px); }

.elementos-mode3-copy {
  position: absolute;
  z-index: 4;
  top: 22%;
  left: 50%;
  width: min(58%, 900px);
  transform: translateX(-50%);
  color: var(--ivory-soft);
  font-family: Cormorant Garamond, Georgia, serif;
  font-size: clamp(0.82rem, 1.32vh, 1.04rem);
  font-weight: 600;
  line-height: 1.22;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.78);
}

.elementos-mode3-copy p { margin: 0; }

.elementos-copy-long {
  top: 20.6%;
  width: min(70%, 1120px);
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.18;
  column-count: 2;
  column-gap: clamp(28px, 4vw, 70px);
  text-align: left;
}


.elementos-tarot-copy {
  top: 22%;
  width: min(52%, 760px);
  max-height: 52%;
  font-size: clamp(0.74rem, 1.18vh, 0.94rem);
  line-height: 1.18;
  column-count: 1;
  column-gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: clamp(10px, 0.92vw, 16px);
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 154, 73, 0.45) transparent;
}

.elementos-tarot-copy p {
  direction: ltr;
}

.elementos-copy-compact {
  top: 20.8%;
  width: min(64%, 1020px);
  font-size: clamp(0.76rem, 1.16vh, 0.94rem);
  line-height: 1.18;
}

.elementos-mode3-actions {
  position: absolute;
  z-index: 4;
  bottom: 7.4%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: clamp(7px, 1vh, 12px);
  transform: translateX(-50%);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 600;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.82);
}

.elementos-return {
  position: absolute;
  z-index: 4;
  bottom: 6.6%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.82);
}

.elementos-card-row {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 13.6%;
  width: min(78%, 1220px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 42px);
  color: var(--ivory-soft);
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.elementos-card {
  min-width: 0;
  font-family: Cormorant Garamond, Georgia, serif;
  font-size: clamp(0.68rem, 1vh, 0.86rem);
  font-weight: 600;
  line-height: 1.12;
}

.elementos-card h2 {
  margin: 0 0 2px;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.76rem, 1.1vh, 1rem);
  font-weight: 500;
  line-height: 1;
}

.elementos-card h3 {
  margin: 0 0 clamp(4px, 0.56vh, 7px);
  color: rgba(244, 232, 202, 0.86);
  font-size: clamp(0.66rem, 0.96vh, 0.84rem);
  font-weight: 600;
  line-height: 1.05;
}

.elementos-card p {
  margin: 0 0 clamp(5px, 0.7vh, 9px);
}

.elementos-card .practice-forward {
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.66rem, 0.96vh, 0.84rem);
  text-decoration: none;
}
.elementos-vapores-stage .elementos-card:nth-child(2) {
  translate: 0 clamp(8px, 1.4vh, 14px);
}

.elementos-vapores-stage .elementos-return {
  font-size: clamp(0.48rem, 0.78vh, 0.64rem);
}

.elementos-registro-row { bottom: 17%; }
.elementos-registro-actions { bottom: 7.4%; }
@media (max-width: 820px) {
  .elementos-mode3-heading {
    top: 8.4%;
    width: 80%;
  }

  .elementos-mode3-copy,
  .elementos-copy-long,
  

.elementos-copy-compact {
    top: 19.5%;
    width: 74%;
    font-size: clamp(0.68rem, 2.08vw, 0.9rem);
    line-height: 1.14;
    column-count: 1;
    column-gap: 0;
    text-align: center;
  }

  .elementos-card-row,
  .elementos-registro-row {
    bottom: 13.5%;
    width: 76%;
    grid-template-columns: 1fr;
    gap: clamp(5px, 0.7vh, 8px);
  }

  .elementos-card {
    font-size: clamp(0.6rem, 1.9vw, 0.78rem);
    line-height: 1.05;
  }

  .elementos-card h2 {
    font-size: clamp(0.68rem, 2.1vw, 0.86rem);
  }

  .elementos-mode3-actions {
    bottom: 6.7%;
  }
  .mode4-heading {
    top: 9%;
    width: 78%;
  }

  .mode4-heading h1 {
    font-size: clamp(1rem, 5vw, 1.9rem);
  }

  .mode4-copy,
  .mode4-copy-long,
  .mode4-copy-short {
    top: 18.5%;
    bottom: 15.8%;
    width: 72%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: clamp(0.72rem, 2.32vw, 0.94rem);
    line-height: 1.16;
    text-align: center;
    overflow: hidden;
  }



.mode4-copy p {
    margin-bottom: clamp(4px, 0.7vh, 8px);
  }

  .mode4-return {
    bottom: 7%;
    font-size: clamp(0.78rem, 3vw, 1rem);
  }
  .stage {
    width: min(100vw, calc(100svh * 9 / 16));
    height: min(100svh, calc(100vw * 16 / 9));
    aspect-ratio: 9 / 16;
  }

  .screen-heading {
    top: 8%;
    width: 76%;
  }

  .screen-footer {
    right: 8%;
    bottom: 4.2%;
    left: 8%;
  }
}














































.elementos-tarot2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-tarot2-bg-piloto.png"); }

.elementos-mode4-stage::after {
  position: absolute;
  z-index: 0;
  inset: 4.2%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.58) 0 34%, rgba(0, 0, 0, 0.36) 58%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5)),
    var(--elementos-mode4-bg) center / cover no-repeat;
}

.elementos-mode4-heading {
  position: absolute;
  z-index: 4;
  top: 8.2%;
  left: 50%;
  width: min(72%, 1080px);
  transform: translateX(-50%);
  text-align: center;
}

.elementos-mode4-heading h1 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.25rem, 2.65vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(199, 154, 73, 0.2), 0 2px 7px rgba(0, 0, 0, 0.82);
}

.elementos-mode4-heading::after,
.elementos-mode4-return::before {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(92px, 12vw, 180px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199, 154, 73, 0.74) 18%, rgba(211, 173, 98, 0.86) 50%, rgba(199, 154, 73, 0.74) 82%, transparent);
}

.elementos-mode4-heading::after { bottom: clamp(-18px, -1.85vh, -11px); }
.elementos-mode4-return::before { top: clamp(-16px, -1.6vh, -10px); }

.elementos-mode4-heading::before,
.elementos-mode4-return::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1;
  width: clamp(7px, 0.72vw, 11px);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #9b2424 0 13%, #6b1214 42%, #2e0808 100%);
  border: 1px solid rgba(199, 154, 73, 0.74);
  box-shadow: 0 0 7px rgba(107, 18, 20, 0.58), 0 0 5px rgba(199, 154, 73, 0.22);
}

.elementos-mode4-heading::before { bottom: clamp(-23px, -2.22vh, -15px); }
.elementos-mode4-return::after { top: clamp(-20px, -1.98vh, -13px); }

.elementos-mode4-content {
  position: absolute;
  z-index: 4;
  top: 18.2%;
  bottom: 13.4%;
  left: 50%;
  width: min(78%, 1220px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 72px);
  color: var(--ivory-soft);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.82);
}

.elementos-mode4-panel {
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
  padding: 0 clamp(4px, 0.6vw, 10px);
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 154, 73, 0.44) transparent;
}

.elementos-mode4-panel h2 {
  margin: 0 0 clamp(8px, 1.1vh, 14px);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.92rem, 1.56vh, 1.3rem);
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
}

.elementos-mode4-panel p {
  margin: 0 0 clamp(4px, 0.58vh, 7px);
  font-family: Cormorant Garamond, Georgia, serif;
  font-size: clamp(0.78rem, 1.22vh, 0.98rem);
  font-weight: 600;
  line-height: 1.18;
  text-align: left;
}

.elementos-mode4-return {
  position: absolute;
  z-index: 4;
  bottom: 6.4%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.82);
}

.elementos-pedras2-stage .elementos-mode4-return,
.elementos-velas2-stage .elementos-mode4-return,
.elementos-mirra2-stage .elementos-mode4-return,
.elementos-canela2-stage .elementos-mode4-return,
.elementos-palosanto2-stage .elementos-mode4-return,
.elementos-registros2-stage .elementos-mode4-return {
  font-size: clamp(0.48rem, 0.78vh, 0.64rem);
}

@media (max-width: 820px) {
  .elementos-mode4-heading {
    top: 7.8%;
    width: 78%;
  }

  .elementos-mode4-heading h1 {
    font-size: clamp(1rem, 4.8vw, 1.75rem);
  }

  .elementos-mode4-content {
    top: 17%;
    bottom: 13.8%;
    width: 76%;
    grid-template-columns: 1fr;
    gap: clamp(12px, 2.2vh, 20px);
    overflow-y: auto;
  }

  .elementos-mode4-panel {
    overflow: visible;
  }

  .elementos-mode4-panel h2 {
    font-size: clamp(0.78rem, 2.6vw, 1rem);
  }

  .elementos-mode4-panel p {
    font-size: clamp(0.66rem, 2vw, 0.86rem);
    line-height: 1.13;
    text-align: center;
  }
}


.elementos-pedras2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-pedras2-bg-piloto.png"); }
.elementos-velas2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-velas2-bg-piloto.png"); }
.elementos-mirra2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-mirra2-bg-piloto.png"); }
.elementos-canela2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-canela2-bg-piloto.png"); }
.elementos-palosanto2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-palosanto2-bg-piloto.png"); }
.elementos-registros2-stage { --elementos-mode4-bg: url("./assets/backgrounds/elementos-registros2-bg-piloto.png"); }

.elementos-mode4-single-copy,
.pedras2-content,
.registros2-pyramid,
.registros2-main {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ivory-soft);
  font-family: Cormorant Garamond, Georgia, serif;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.82);
}

.elementos-mode4-single-copy {
  top: 18.7%;
  bottom: 13.6%;
  width: min(68%, 1040px);
  font-size: clamp(0.78rem, 1.24vh, 1rem);
  line-height: 1.18;
  text-align: center;
  overflow-y: auto;
}

.elementos-mode4-single-copy p { margin: 0; }

.vapores-detail-content {
  top: 18.5%;
  bottom: 13.5%;
  width: min(78%, 1220px);
}

.vapores-detail-content .elementos-mode4-panel p {
  font-size: clamp(0.76rem, 1.18vh, 0.96rem);
  line-height: 1.16;
}

.pedras2-content {
  top: 18%;
  bottom: 13.5%;
  width: min(78%, 1240px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 1.6vh, 18px);
}

.pedras2-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 74px);
  text-align: center;
  font-size: clamp(0.78rem, 1.18vh, 0.98rem);
  line-height: 1.15;
}

.pedras2-intro p,
.pedras2-gems p { margin: 0; }

.pedras2-gems {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center;
  gap: clamp(10px, 1.6vh, 20px) clamp(18px, 2.8vw, 42px);
  text-align: center;
}

.pedras2-gems article:last-child { grid-column: 2 / span 2; }

.pedras2-gems h2 {
  margin: 0 0 clamp(3px, 0.46vh, 6px);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.72rem, 1.04vh, 0.94rem);
  font-weight: 500;
  line-height: 1;
}

.pedras2-gems p {
  font-size: clamp(0.66rem, 0.94vh, 0.84rem);
  line-height: 1.08;
}

.registros2-pyramid {
  top: 17.8%;
  width: min(76%, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.25vh, 14px) clamp(16px, 2.4vw, 38px);
  text-align: center;
}

.registros2-pyramid p {
  margin: 0;
  font-size: clamp(0.68rem, 1.02vh, 0.86rem);
  line-height: 1.08;
}

.registros2-pyramid p:nth-child(1) { grid-column: 2; }
.registros2-pyramid p:nth-child(2) { grid-column: 1; }
.registros2-pyramid p:nth-child(3) { grid-column: 2; }
.registros2-pyramid p:nth-child(4) { grid-column: 3; }
.registros2-pyramid p:nth-child(5) { grid-column: 1; }
.registros2-pyramid p:nth-child(6) { grid-column: 2; }
.registros2-pyramid p:nth-child(7) { grid-column: 3; }
.registros2-pyramid p:nth-child(8) { grid-column: 1 / span 2; }
.registros2-pyramid p:nth-child(9) { grid-column: 2 / span 2; }

.registros2-main {
  bottom: 13.8%;
  width: min(58%, 920px);
  font-size: clamp(0.76rem, 1.18vh, 0.96rem);
  line-height: 1.16;
  text-align: center;
}

.registros2-main p { margin: 0; }

@media (max-width: 820px) {
  .elementos-mode4-single-copy,
  .pedras2-content,
  .registros2-pyramid,
  .registros2-main {
    width: 76%;
  }

  .elementos-mode4-single-copy {
    top: 17.5%;
    bottom: 13.8%;
    font-size: clamp(0.66rem, 2vw, 0.86rem);
    line-height: 1.13;
  }

  .pedras2-content {
    top: 17.2%;
    overflow-y: auto;
  }

  .pedras2-intro,
  .pedras2-gems {
    grid-template-columns: 1fr;
  }

  .pedras2-gems article:last-child { grid-column: auto; }
  .pedras2-gems p { font-size: clamp(0.58rem, 1.78vw, 0.76rem); }

  .registros2-pyramid {
    top: 17.2%;
    grid-template-columns: 1fr;
  }

  .registros2-pyramid p,
  .registros2-pyramid p:nth-child(n) {
    grid-column: auto;
    font-size: clamp(0.58rem, 1.78vw, 0.76rem);
  }

  .registros2-main {
    bottom: 13.8%;
    font-size: clamp(0.62rem, 1.9vw, 0.8rem);
    line-height: 1.1;
  }
}

/* Elementos Modo 4 refinements */
.elementos-mode4-heading h1 {
  font-size: var(--title-size);
}

@media (max-width: 820px) {
  .elementos-mode4-heading h1 {
    font-size: var(--title-size);
  }
}

.elementos-mode4-panel p,
.elementos-mode4-single-copy,
.pedras2-intro,
.registros2-main {
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.2;
}

.vapores-detail-content {
  top: 19.2%;
  bottom: 13.5%;
  width: min(80%, 1260px);
  gap: clamp(44px, 10vw, 170px);
}

.vapores-detail-content .elementos-mode4-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 154, 73, 0.45) transparent;
}

.vapores-detail-content .elementos-mode4-panel:first-child {
  direction: rtl;
  padding-top: clamp(24px, 3.15vh, 40px);
}

.vapores-detail-content .elementos-mode4-panel:first-child p {
  direction: ltr;
}

.vapores-detail-content .elementos-mode4-panel:nth-child(2) {
  direction: ltr;
}

.vapores-detail-content .elementos-mode4-panel h2 {
  margin-bottom: clamp(7px, 1vh, 12px);
}

.vapores-detail-content .elementos-mode4-panel p {
  font-size: clamp(0.78rem, 1.32vh, 1rem);
  line-height: 1.18;
}

.elementos-mode4-single-copy {
  top: 19%;
  bottom: 14%;
  width: min(78%, 1200px);
  column-count: 2;
  column-gap: clamp(52px, 8vw, 140px);
  text-align: left;
  overflow: visible;
}

.elementos-mode4-single-copy p {
  margin: 0;
}

.pedras2-content {
  top: 18%;
  bottom: 13.2%;
  width: min(82%, 1280px);
  display: block;
}

.pedras2-intro {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(70%, 980px);
  transform: translateX(-50%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 96px);
}

.pedras2-gems {
  position: absolute;
  inset: 23% 0 0;
  display: block;
  text-align: center;
}

.pedras2-gems article {
  position: absolute;
  width: min(23%, 300px);
}

.pedras2-gems article:nth-child(1) { top: 1%; left: 2%; }
.pedras2-gems article:nth-child(2) { top: 1%; right: 2%; }
.pedras2-gems article:nth-child(3) { top: 34%; left: 0; }
.pedras2-gems article:nth-child(4) { top: 34%; right: 0; }
.pedras2-gems article:nth-child(5) { bottom: 2%; left: 10%; }
.pedras2-gems article:nth-child(6) { bottom: 2%; right: 10%; }
.pedras2-gems article:nth-child(7) { bottom: 0; left: 50%; transform: translateX(-50%); }
.pedras2-gems article:last-child { grid-column: auto; }

.pedras2-gems h2 {
  font-size: clamp(0.76rem, 1.14vh, 1rem);
}

.pedras2-gems p {
  font-size: clamp(0.68rem, 1.02vh, 0.86rem);
  line-height: 1.1;
}

#pedras2 .pedras2-content {
  top: 25.5%;
  bottom: 12.5%;
  width: min(84%, 1260px);
  display: grid;
  grid-template-columns: minmax(270px, 33%) minmax(340px, 36%);
  justify-content: space-between;
  align-items: center;
  column-gap: clamp(220px, 22vw, 360px);
  overflow: visible;
}

#pedras2 .pedras2-intro {
  position: static;
  width: auto;
  transform: none;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: clamp(10px, 1.4vh, 16px);
  text-align: left;
}

#pedras2 .pedras2-gems {
  position: static;
  inset: auto;
  max-height: clamp(220px, 32vh, 310px);
  min-height: 0;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(10px, 1.45vh, 16px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: clamp(12px, 1.1vw, 18px);
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 154, 73, 0.48) transparent;
}

#pedras2 .pedras2-gems article,
#pedras2 .pedras2-gems article:nth-child(n),
#pedras2 .pedras2-gems article:last-child {
  position: static;
  width: auto;
  transform: none;
  grid-column: auto;
}

#pedras2 .pedras2-gems h2 {
  margin-bottom: clamp(3px, 0.48vh, 6px);
}

.registros2-pyramid {
  top: 17.6%;
  width: min(78%, 1220px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  align-items: start;
  gap: clamp(18px, 3vh, 34px) clamp(32px, 6vw, 96px);
  text-align: center;
}

.registros2-pyramid p {
  position: relative;
  margin: 0;
  padding-bottom: clamp(11px, 1.45vh, 18px);
  font-size: clamp(0.72rem, 1.08vh, 0.9rem);
  line-height: 1.12;
}

.registros2-pyramid p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(44px, 5vw, 76px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199, 154, 73, 0.78), transparent);
}

.registros2-pyramid p::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(211, 173, 98, 0.88);
  box-shadow: 0 0 7px rgba(199, 154, 73, 0.36);
}

.registros2-pyramid p:nth-child(1) { grid-column: 1; grid-row: 1; }
.registros2-pyramid p:nth-child(2) { grid-column: 1; grid-row: 2; }
.registros2-pyramid p:nth-child(3) { grid-column: 1; grid-row: 3; }
.registros2-pyramid p:nth-child(4) { grid-column: 2; grid-row: 1; transform: translateY(-14%); }
.registros2-pyramid p:nth-child(5) { grid-column: 2; grid-row: 2; transform: translateY(-14%); }
.registros2-pyramid p:nth-child(6) { grid-column: 2; grid-row: 3; transform: translateY(-14%); }
.registros2-pyramid p:nth-child(7) { grid-column: 3; grid-row: 1; }
.registros2-pyramid p:nth-child(8) { grid-column: 3; grid-row: 2; }
.registros2-pyramid p:nth-child(9) { grid-column: 3; grid-row: 3; }

.registros2-main {
  bottom: 13.5%;
  width: min(62%, 980px);
  text-align: center;
}

@media (max-width: 820px) {
  .elementos-mode4-panel p,
  .elementos-mode4-single-copy,
  .pedras2-intro,
  .registros2-main {
    font-size: clamp(0.68rem, 2.08vw, 0.9rem);
    line-height: 1.14;
  }

  .vapores-detail-content {
    width: 76%;
    gap: clamp(12px, 2.2vh, 20px);
  }

  .vapores-detail-content .elementos-mode4-panel:first-child {
    direction: ltr;
    padding-top: 0;
  }

  .elementos-mode4-single-copy {
    column-count: 1;
    overflow-y: auto;
    text-align: center;
  }

  .pedras2-content {
    display: grid;
    overflow-y: auto;
  }

  .pedras2-intro,
  .pedras2-gems,
  .pedras2-gems article {
    position: static;
    width: auto;
    transform: none;
  }

  .pedras2-intro,
  .pedras2-gems {
    display: grid;
    grid-template-columns: 1fr;
  }

  .registros2-pyramid {
    grid-template-columns: 1fr;
    gap: clamp(8px, 1.25vh, 14px);
  }

  .registros2-pyramid p,
  .registros2-pyramid p:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    transform: none;
    font-size: clamp(0.58rem, 1.78vw, 0.76rem);
  }
}

/* Elementos final alignment tweaks */
.elementos-tarot-copy {
  direction: ltr;
}

.pedras2-gems article:nth-child(5) { bottom: -4%; }
.pedras2-gems article:nth-child(6) { bottom: 8%; }

.elementos-mode4-single-copy {
  top: 20.5%;
  bottom: 12.6%;
}

/* Home aprovada */
.home-stage {
  background: #020505;
}

.home-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1) contrast(1.01) saturate(1);
}

.home-layer {
  position: absolute;
  z-index: 4;
  color: #f6ead0;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.92);
}

.home-text-superior {
  top: 6.2%;
  left: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  text-align: center;
}

.home-text-superior p {
  margin: 0;
  font-size: clamp(1rem, 1.7vw, 1.95rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #f5d182;
}

.home-text-superior span {
  margin-top: 0.16rem;
  font-size: clamp(0.72rem, 1.05vw, 1.22rem);
  font-weight: 500;
  line-height: 1.05;
  color: rgba(246, 234, 208, 0.86);
}

.home-logo {
  display: none;
}

.home-title-main {
  top: 25.6%;
  left: 9.1%;
  width: 22.8%;
}

.home-title-main h1 {
  margin: 0 0 clamp(5px, 0.62vw, 9px);
  font-size: clamp(0.96rem, 1.34vw, 1.62rem);
  font-weight: 600;
  line-height: 1.05;
  color: #fff0bc;
}

.home-title-main p {
  margin: clamp(4px, 0.44vw, 7px) 0 0;
  font-size: clamp(0.62rem, 0.82vw, 1rem);
  line-height: 1.14;
  color: rgba(246, 234, 208, 0.86);
}

.home-title-main .temple-call {
  margin-top: clamp(5px, 0.54vw, 8px);
  font-size: clamp(0.56rem, 0.72vw, 0.88rem);
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(245, 209, 130, 0.9);
}

.home-action {
  display: inline-grid;
  place-items: center;
  min-width: clamp(64px, 6vw, 94px);
  min-height: clamp(22px, 1.8vw, 28px);
  margin-top: clamp(4px, 0.48vw, 7px);
  padding: 0 14px;
  border: 1px solid rgba(217, 155, 43, 0.58);
  border-radius: 4px;
  font-size: clamp(0.5rem, 0.66vw, 0.78rem);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  color: #f7d783;
  background: rgba(75, 43, 13, 0.36);
  transition: color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.home-action:hover,
.home-action:focus-visible {
  color: #fff3bf;
  border-color: rgba(247, 215, 131, 0.92);
  background: rgba(117, 70, 17, 0.48);
  box-shadow: 0 0 16px rgba(217, 155, 43, 0.24);
}

.label-mobile {
  display: none;
}

.temple-action-mobile {
  display: none;
}

.home-book-names {
  top: 54.8%;
  right: 17.1%;
  width: 13.6%;
  display: grid;
  justify-items: center;
  text-align: center;
}

.home-book-names p {
  margin: 0.08rem 0 0;
  font-size: clamp(0.76rem, 1.06vw, 1.24rem);
  line-height: 1.08;
  color: rgba(246, 234, 208, 0.92);
}

.home-book-names .book-action {
  width: clamp(112px, 8.6vw, 148px);
  min-width: 0;
  min-height: clamp(18px, 1.42vw, 23px);
  margin-top: clamp(6px, 0.62vw, 10px);
}

.home-niches {
  right: 12.4%;
  bottom: 3.7%;
  left: 12.4%;
  height: 19.3%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
}

.home-niche {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 0 clamp(7px, 0.85vw, 13px) clamp(13px, 1.45vw, 22px);
  text-align: center;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
}

.home-niche h2 {
  margin: 0;
  font-size: clamp(0.72rem, 1vw, 1.14rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #f5d182;
}

.home-niche p {
  position: absolute;
  right: clamp(8px, 0.85vw, 14px);
  bottom: clamp(31px, 3.7vw, 50px);
  left: clamp(8px, 0.85vw, 14px);
  margin: 0;
  padding: clamp(6px, 0.7vw, 10px);
  border: 1px solid rgba(201, 143, 44, 0.22);
  border-radius: 4px;
  font-size: clamp(0.6rem, 0.82vw, 0.96rem);
  line-height: 1.14;
  color: rgba(246, 234, 208, 0.86);
  background: rgba(2, 5, 5, 0.78);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  translate: 0 7px;
  pointer-events: none;
  transition: opacity 220ms ease, translate 220ms ease;
}

.home-niche:hover p,
.home-niche:focus-visible p,
.home-niche:focus-within p {
  opacity: 1;
  translate: 0 0;
}

.home-niche-contato {
  cursor: pointer;
}

.contact-stage {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(82, 10, 14, 0.22), transparent 42%),
    linear-gradient(90deg, rgba(3, 4, 5, 0.74), rgba(3, 4, 5, 0.48) 46%, rgba(3, 4, 5, 0.76)),
    url("./assets/book/marmore-simone-fundo-v1.png") center / cover no-repeat;
}

.contact-page {
  position: relative;
  z-index: 4;
  width: min(82%, 1080px);
  display: grid;
  grid-template-columns: minmax(290px, 0.86fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(42px, 7vw, 108px);
}

.contact-copy {
  display: grid;
  justify-items: start;
  gap: clamp(10px, 1.55vh, 18px);
  color: rgba(246, 234, 208, 0.86);
  text-align: left;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
}

.contact-kicker {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(247, 215, 131, 0.86);
}

.contact-copy h1 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2rem, 5.1vh, 3.7rem);
  font-weight: 500;
  line-height: 1.02;
  color: var(--gold);
  text-transform: uppercase;
}

.contact-copy p:not(.contact-kicker) {
  max-width: 24rem;
  margin: 0;
  color: rgba(246, 234, 208, 0.86);
  font-size: var(--secondary-size);
  font-weight: 600;
  line-height: var(--poetic-leading);
}

.contact-links {
  display: grid;
  gap: clamp(5px, 0.82vh, 9px);
  margin-top: clamp(4px, 0.8vh, 10px);
  font-size: var(--control-size);
  font-weight: 600;
  line-height: 1.18;
}

.contact-links a,
.contact-links span,
.contact-return {
  color: rgba(246, 234, 208, 0.82);
  text-decoration: none;
}

.contact-return {
  position: relative;
  margin-top: clamp(8px, 1.2vh, 14px);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  text-transform: uppercase;
}

.contact-form {
  display: grid;
  gap: clamp(10px, 1.3vh, 16px);
  padding: clamp(24px, 3.4vh, 38px) clamp(26px, 3.5vw, 44px);
  border: 1px solid rgba(181, 138, 63, 0.52);
  background:
    linear-gradient(180deg, rgba(17, 3, 5, 0.84), rgba(2, 2, 2, 0.88)),
    rgba(3, 4, 5, 0.68);
  box-shadow:
    0 0 0 1px rgba(117, 10, 15, 0.32) inset,
    0 18px 60px rgba(0, 0, 0, 0.42);
}

.contact-form label {
  display: grid;
  gap: clamp(5px, 0.72vh, 8px);
  color: rgba(247, 215, 131, 0.82);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(181, 138, 63, 0.42);
  color: rgba(246, 234, 208, 0.94);
  font: 600 var(--secondary-size) "Cormorant Garamond", Georgia, serif;
  background: rgba(3, 4, 5, 0.46);
  outline: none;
}

.contact-form input {
  min-height: clamp(34px, 4.5vh, 42px);
  padding: 0 12px;
}

.contact-form textarea {
  min-height: clamp(130px, 20vh, 180px);
  resize: vertical;
  padding: 10px 12px;
  line-height: var(--reading-leading);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(247, 215, 131, 0.78);
  box-shadow: 0 0 0 1px rgba(247, 215, 131, 0.18);
}

.contact-form button {
  justify-self: center;
  min-width: clamp(180px, 17vw, 230px);
  min-height: 40px;
  margin-top: clamp(2px, 0.5vh, 6px);
  padding: 0 18px;
  border: 1px solid rgba(247, 215, 131, 0.7);
  color: #f7d783;
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(82, 10, 14, 0.58);
  cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus-visible,
.contact-return:hover,
.contact-return:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible {
  color: rgba(255, 239, 193, 0.98);
  border-color: rgba(247, 215, 131, 0.92);
  text-shadow: 0 0 12px rgba(247, 215, 131, 0.3);
}

@media (max-width: 820px) {
  .contact-stage {
    height: auto;
    min-height: 100svh;
    aspect-ratio: auto;
    overflow-y: auto;
    padding: clamp(54px, 12vw, 76px) 0;
  }

  .contact-page {
    width: min(86vw, 430px);
    grid-template-columns: 1fr;
    gap: clamp(22px, 5.8vw, 34px);
  }

  .contact-copy {
    justify-items: center;
    text-align: center;
  }

  .contact-copy h1 {
    font-size: clamp(1.72rem, 8vw, 2.5rem);
  }

  .contact-form {
    padding: clamp(20px, 5.4vw, 28px);
  }
}

@media (max-width: 820px) {
  .screen-home .home-stage {
    width: 100vw;
    height: min(100svh, calc(100vw * 16 / 9));
    aspect-ratio: 9 / 16;
  }

  .screen-home .home-scene {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .home-text-superior {
    top: 8%;
  }

  .home-text-superior p {
    font-size: clamp(1rem, 5vw, 1.45rem);
  }

  .home-text-superior span {
    font-size: clamp(0.72rem, 3.4vw, 0.95rem);
  }

  .home-title-main {
    top: 25.5%;
    left: 9.2%;
    width: 31%;
  }

  .home-title-main h1 {
    font-size: clamp(0.78rem, 4.1vw, 1.08rem);
    line-height: 1.02;
  }

  .home-title-main p {
    font-size: clamp(0.46rem, 2.35vw, 0.62rem);
    line-height: 1.08;
  }

  .home-title-main .temple-call {
    font-size: clamp(0.42rem, 2.08vw, 0.56rem);
  }

  .home-title-main .home-action {
    min-height: 22px;
    min-width: 64px;
    font-size: clamp(0.44rem, 2.3vw, 0.6rem);
  }

  .home-book-names {
    top: 53.8%;
    right: 6%;
    width: 30%;
  }

  .home-book-names p {
    font-size: clamp(0.56rem, 2.85vw, 0.78rem);
  }

  .home-book-names .book-action {
    width: clamp(100px, 27vw, 118px);
    min-height: 22px;
    font-size: clamp(0.4rem, 2.05vw, 0.54rem);
  }

  .home-niches {
    right: 0;
    bottom: 5.4%;
    left: 0;
    height: 19%;
  }

  .home-niche {
    padding: 0 2px clamp(10px, 2.8vw, 14px);
  }

  .home-niche h2 {
    max-width: 4.2rem;
    font-size: clamp(0.52rem, 2.6vw, 0.7rem);
    line-height: 0.92;
  }

  .home-niche p {
    display: none;
  }

  .elementos-tarot-copy {
    direction: ltr;
    width: 76%;
    max-height: 56%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: clamp(8px, 2vw, 12px);
  }

  .pedras2-gems article:nth-child(5),
  .pedras2-gems article:nth-child(6) {
    bottom: auto;
  }

  .elementos-mode4-single-copy {
    top: 18.4%;
    bottom: 13.8%;
  }
}

.mode3-return,
.ether-return,
.practice-return,
.mode4-return,
.elementos-return,
.elementos-mode4-return {
  font-size: clamp(0.48rem, 0.78vh, 0.64rem);
}

/* Final title sizing: only page titles, preserving the larger body text. */
.screen-home .home-title-main h1 {
  font-size: clamp(1.06rem, 1.46vw, 1.78rem);
  line-height: 1.06;
}

#atrio .screen-heading h1,
#pratica .screen-heading h1,
#elementos .screen-heading h1,
#livro .screen-heading h1 {
  font-size: var(--title-size);
}

@media (max-width: 820px) {
  .screen-home .home-title-main h1 {
    font-size: clamp(0.78rem, 4.1vw, 1.08rem);
    line-height: 1.02;
  }

  #atrio .screen-heading h1,
  #pratica .screen-heading h1,
  #elementos .screen-heading h1,
  #livro .screen-heading h1 {
    font-size: clamp(1rem, 4.2vw, 1.3rem);
  }
}

/* Assinatura mobile no topo da Home. Mantém o desktop sem logomarca. */
@media (max-width: 820px) {
  .screen-home .home-text-superior {
    top: clamp(48px, 10vw, 76px) !important;
    gap: clamp(2px, 0.8vw, 5px) !important;
  }

  .screen-home .home-logo {
    display: block !important;
    width: clamp(58px, 17vw, 82px) !important;
    height: auto !important;
    margin: 0 auto clamp(6px, 1.7vw, 10px) !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 14px rgba(217, 155, 43, 0.22)) brightness(1.04) !important;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.32rem, 6.2vw, 1.92rem) !important;
    line-height: 1 !important;
  }

  .screen-home .home-text-superior span {
    margin-top: 0.18rem !important;
    font-size: clamp(0.82rem, 3.85vw, 1.1rem) !important;
  }
}

/* Final mobile rebuild: Home and Atrio only. */
@media (max-width: 820px) {
  main {
    scroll-snap-type: none;
  }

  .screen-home,
  #atrio {
    min-height: 100svh;
    display: block;
    place-items: initial;
    scroll-snap-align: start;
    background: #030405;
  }

  .screen-home .home-stage,
  #atrio .atrio-stage {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 640px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .screen-home .home-stage::before,
  #atrio .atrio-stage::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 22%, rgba(217, 155, 43, 0.13), transparent 26%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.48) 44%, rgba(0, 0, 0, 0.76));
  }

  .screen-home .home-stage::after,
  #atrio .atrio-stage::after {
    position: absolute;
    z-index: 2;
    inset: clamp(10px, 3vw, 16px);
    content: "";
    pointer-events: none;
    border: 1px solid rgba(199, 154, 73, 0.42);
    box-shadow:
      inset 0 0 0 1px rgba(199, 154, 73, 0.14),
      inset 0 0 42px rgba(0, 0, 0, 0.42);
  }

  .screen-home .home-scene {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    filter: brightness(0.66) contrast(1.05) saturate(0.96) !important;
  }

  .screen-home .home-layer,
  #atrio .screen-heading,
  #atrio .intro-copy,
  #atrio .diamond-map {
    z-index: 5 !important;
  }

  .screen-home .home-text-superior {
    position: absolute !important;
    top: clamp(24px, 6.5svh, 44px) !important;
    left: 50% !important;
    width: min(78vw, 21rem) !important;
    translate: -50% 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 2px !important;
    text-align: center !important;
  }

  .screen-home .home-logo {
    display: block !important;
    width: clamp(48px, 13vw, 66px) !important;
    margin: 0 0 clamp(4px, 1.2vw, 7px) !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 12px rgba(217, 155, 43, 0.24)) !important;
  }

  .screen-home .home-text-superior p {
    margin: 0 !important;
    font-size: clamp(1.22rem, 6vw, 1.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.76rem, 3.4vw, 0.98rem) !important;
  }

  .screen-home .home-title-main {
    position: absolute !important;
    top: clamp(150px, 23svh, 190px) !important;
    left: clamp(24px, 7vw, 34px) !important;
    right: clamp(24px, 7vw, 34px) !important;
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    gap: clamp(6px, 1.2svh, 9px) !important;
    text-align: left !important;
  }

  .screen-home .home-title-main h1 {
    margin: 0 0 2px !important;
    max-width: 15.5rem !important;
    font-size: clamp(1.22rem, 6.2vw, 1.72rem) !important;
    line-height: 1.07 !important;
    color: #fff0bd !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82) !important;
  }

  .screen-home .home-title-main p {
    max-width: 17.5rem !important;
    margin: 0 !important;
    font-size: clamp(0.82rem, 3.7vw, 0.98rem) !important;
    line-height: 1.22 !important;
    color: rgba(246, 234, 208, 0.92) !important;
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.9) !important;
  }

  .screen-home .home-title-main .temple-call {
    margin-top: clamp(3px, 0.8svh, 6px) !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: clamp(0.68rem, 3vw, 0.82rem) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: rgba(247, 215, 131, 0.96) !important;
  }

  .screen-home .home-title-main .temple-action {
    justify-self: start !important;
    width: clamp(86px, 27vw, 118px) !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: clamp(0.58rem, 2.6vw, 0.7rem) !important;
  }

  .screen-home .home-book-names {
    position: absolute !important;
    top: auto !important;
    right: clamp(26px, 7vw, 38px) !important;
    bottom: clamp(128px, 17svh, 164px) !important;
    left: auto !important;
    width: clamp(136px, 39vw, 172px) !important;
    min-height: auto !important;
    padding: clamp(14px, 4vw, 18px) clamp(10px, 3vw, 14px) !important;
    translate: 0 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: clamp(4px, 1vw, 7px) !important;
    text-align: center !important;
    border: 1px solid rgba(199, 154, 73, 0.58) !important;
    border-radius: 8px !important;
    background: rgba(2, 7, 8, 0.52) !important;
    box-shadow:
      inset 0 0 0 1px rgba(247, 215, 131, 0.1),
      0 14px 36px rgba(0, 0, 0, 0.48) !important;
  }

  .screen-home .home-book-names::before {
    display: none !important;
  }

  .screen-home .home-book-names p {
    margin: 0 !important;
    font-size: clamp(0.82rem, 3.7vw, 1.02rem) !important;
    line-height: 1.08 !important;
    color: rgba(255, 241, 198, 0.98) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.86) !important;
  }

  .screen-home .home-book-names p + p::before {
    content: "" !important;
  }

  .screen-home .home-book-names .book-action {
    width: min(100%, 9.8rem) !important;
    min-width: 0 !important;
    min-height: 31px !important;
    margin-top: clamp(5px, 1.4vw, 8px) !important;
    font-size: clamp(0.54rem, 2.4vw, 0.66rem) !important;
  }

  .screen-home .home-niches {
    position: absolute !important;
    right: clamp(24px, 6vw, 32px) !important;
    bottom: clamp(26px, 5svh, 42px) !important;
    left: clamp(24px, 6vw, 32px) !important;
    width: auto !important;
    height: auto !important;
    translate: 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 1px solid rgba(199, 154, 73, 0.42) !important;
    background: rgba(2, 7, 8, 0.42) !important;
  }

  .screen-home .home-niche {
    min-height: 48px !important;
    padding: 6px 2px !important;
    display: grid !important;
    place-items: center !important;
    border-right: 1px solid rgba(199, 154, 73, 0.34) !important;
  }

  .screen-home .home-niche:last-child {
    border-right: 0 !important;
  }

  .screen-home .home-niche h2 {
    max-width: 4.8rem !important;
    font-size: clamp(0.48rem, 2.3vw, 0.62rem) !important;
    line-height: 1.05 !important;
  }

  .screen-home .home-niche p {
    display: none !important;
  }

  #atrio .atrio-stage {
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    align-content: start !important;
    gap: clamp(12px, 2.6svh, 18px) !important;
    padding: clamp(28px, 7svh, 52px) clamp(22px, 6vw, 34px) clamp(30px, 6svh, 46px) !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.66)),
      url("./assets/backgrounds/atrio-bg-piloto.png") 50% 50% / cover no-repeat !important;
  }

  #atrio .frame {
    z-index: 3 !important;
    inset: clamp(10px, 3vw, 16px) !important;
    border-color: rgba(199, 154, 73, 0.42) !important;
  }

  #atrio .screen-heading,
  #atrio .intro-copy,
  #atrio .diamond-map {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    translate: 0 0 !important;
  }

  #atrio .screen-heading {
    display: grid !important;
    justify-items: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #atrio .screen-heading h1 {
    margin: 0 !important;
    font-size: clamp(1.24rem, 6vw, 1.78rem) !important;
    line-height: 1 !important;
    color: rgba(247, 215, 131, 0.98) !important;
  }

  #atrio .intro-copy {
    max-width: 20rem !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: clamp(5px, 1svh, 8px) !important;
    text-align: center !important;
  }

  #atrio .intro-copy p {
    margin: 0 !important;
    font-size: clamp(0.76rem, 3.45vw, 0.94rem) !important;
    line-height: 1.2 !important;
    color: rgba(246, 234, 208, 0.92) !important;
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.9) !important;
  }

  #atrio .right-copy {
    margin-top: clamp(2px, 0.8svh, 6px) !important;
  }

  #atrio .diamond-map {
    min-height: 0 !important;
    height: auto !important;
    margin-top: clamp(2px, 0.7svh, 6px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 3vw, 14px) !important;
  }

  #atrio .diamond-map .axis,
  #atrio .diamond-map .center-mark {
    display: none !important;
  }

  #atrio .atrium-node {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-height: clamp(104px, 24svh, 132px) !important;
    padding: clamp(12px, 3.4vw, 16px) clamp(7px, 2vw, 10px) !important;
    translate: 0 0 !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(5px, 1.4vw, 8px) !important;
    border: 1px solid rgba(199, 154, 73, 0.46) !important;
    background: rgba(2, 7, 8, 0.5) !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 26px rgba(199, 154, 73, 0.05), 0 12px 28px rgba(0, 0, 0, 0.34) !important;
  }

  #atrio .atrium-node .diamond-button {
    order: 0 !important;
    width: clamp(34px, 10vw, 46px) !important;
    height: clamp(34px, 10vw, 46px) !important;
    margin: 0 !important;
  }

  #atrio .atrium-node strong {
    order: 1 !important;
    margin: 0 !important;
    font-size: clamp(0.68rem, 3.1vw, 0.84rem) !important;
    line-height: 1.05 !important;
    color: rgba(247, 215, 131, 0.96) !important;
  }

  #atrio .atrium-node em {
    order: 2 !important;
    margin: 0 !important;
    max-width: 8.2rem !important;
    font-size: clamp(0.62rem, 2.75vw, 0.76rem) !important;
    line-height: 1.16 !important;
    color: rgba(246, 234, 208, 0.9) !important;
  }
}
/* Final mobile correction: inherited offsets. */
@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .screen-home .home-title-main {
    translate: 0 0 !important;
    transform: none !important;
  }

  .screen-home .home-title-main h1,
  .screen-home .home-title-main p,
  .screen-home .home-title-main .temple-call {
    translate: 0 0 !important;
    transform: none !important;
  }

  .screen-home .home-book-names,
  .screen-home .home-niches,
  #atrio .screen-heading,
  #atrio .intro-copy,
  #atrio .diamond-map,
  #atrio .atrium-node {
    transform: none !important;
  }
}
/* Final mobile correction: Home book and bottom navigation visibility. */
@media (max-width: 820px) {
  .screen-home .home-book-names {
    right: auto !important;
    left: 50% !important;
    width: clamp(118px, 34vw, 142px) !important;
    translate: 0 0 !important;
    transform: none !important;
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.68rem, 3vw, 0.84rem) !important;
  }

  .screen-home .home-book-names .book-action {
    font-size: clamp(0.48rem, 2.1vw, 0.58rem) !important;
  }

  .screen-home .home-niche:not(.home-niche-contato),
  .screen-home .home-niche-contato {
    display: grid !important;
  }

  .screen-home .home-niches {
    translate: 0 0 !important;
    transform: none !important;
  }
}
/* Final mobile correction: Home bottom navigation bounds. */
@media (max-width: 820px) {
  .screen-home .home-niches {
    left: 28px !important;
    right: auto !important;
    width: calc(100vw - 56px) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .screen-home .home-niche h2 {
    font-size: clamp(0.43rem, 2.05vw, 0.56rem) !important;
  }
}

/* Refinamento desktop - Prioridade 1
   Base editorial aprovada: leitura mais confortavel, controles legiveis
   e uso de rolagem interna quando o texto longo comprometer a tela. */
@media (min-width: 821px) {
  :root {
    --title-size: clamp(1.55rem, 2.55vh, 2.05rem);
    --body-size: 17px;
    --secondary-size: 15px;
    --label-size: 15px;
    --control-size: 13px;
    --reading-leading: 1.42;
    --poetic-leading: 1.35;
    --control-leading: 1.2;
  }

  .stage {
    max-width: 100vw;
    max-height: 100svh;
  }

  .mode3-heading h1,
  .elementos-mode3-heading h1,
  .elementos-mode4-heading h1,
  .book-heading h1 {
    line-height: 1.14;
  }

  .mode3-copy,
  .mode3-copy-medium,
  .mode3-copy-long {
    top: 21%;
    width: min(64%, 920px);
    max-height: 62%;
    gap: clamp(10px, 1.55vh, 18px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 clamp(10px, 1vw, 16px);
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 154, 73, 0.48) transparent;
  }

  .mode3-copy p,
  .mode3-copy-medium p,
  .mode3-copy-long p {
    font-size: var(--body-size);
    line-height: var(--reading-leading);
  }

  .transmutacao-stage .practice-mode3-copy {
    max-height: 52%;
  }

  .mode3-return,
  .mode4-return,
  .elementos-return,
  .elementos-mode4-return,
  .book-actions a,
  .home-action {
    min-height: 32px;
    min-width: 84px;
    display: inline-grid;
    place-items: center;
    font-size: var(--control-size);
    line-height: var(--control-leading);
  }

  .elementos-pedras2-stage .elementos-mode4-return,
  .elementos-velas2-stage .elementos-mode4-return,
  .elementos-mirra2-stage .elementos-mode4-return,
  .elementos-canela2-stage .elementos-mode4-return,
  .elementos-palosanto2-stage .elementos-mode4-return,
  .elementos-registros2-stage .elementos-mode4-return {
    font-size: var(--label-size);
  }

  .atrium-node {
    font-size: var(--secondary-size);
    line-height: var(--poetic-leading);
  }

  .atrium-node strong,
  .atrium-node em {
    font-size: var(--label-size);
    line-height: var(--control-leading);
  }

  .elementos-mode3-copy {
    width: min(60%, 900px);
    max-height: 58%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: clamp(10px, 1vw, 16px);
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 154, 73, 0.48) transparent;
  }

  .elementos-mode3-copy p,
  .elementos-copy-compact p,
  .elementos-copy-long p {
    font-size: var(--body-size);
    line-height: var(--reading-leading);
  }

  .elementos-mode4-panel {
    padding-right: clamp(12px, 1.1vw, 18px);
  }

  .elementos-mode4-panel h2 {
    font-size: clamp(1.05rem, 1.8vh, 1.35rem);
    line-height: 1.16;
  }

  .elementos-mode4-panel p,
  .vapores-detail-content .elementos-mode4-panel p {
    font-size: var(--secondary-size);
    line-height: var(--reading-leading);
  }

  .elementos-mode4-single-copy,
  .pedras2-content,
  .vapores-detail-content,
  .registros2-pyramid,
  .registros2-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 154, 73, 0.48) transparent;
  }

  .elementos-mode4-single-copy,
  .pedras2-content,
  .vapores-detail-content {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .elementos-mode4-single-copy {
    max-height: 58%;
    padding-right: clamp(12px, 1.1vw, 18px);
    font-size: var(--body-size);
    line-height: var(--reading-leading);
  }

  .registros2-pyramid {
    top: 17.6%;
    max-height: 46%;
    overflow: visible;
    gap: clamp(14px, 1.7vh, 22px) clamp(18px, 2.4vw, 42px);
    padding: 0 clamp(10px, 1vw, 16px);
  }

  .registros2-pyramid p {
    font-size: var(--secondary-size);
    line-height: var(--poetic-leading);
  }

  .registros2-main {
    bottom: 14.2%;
    max-height: 26%;
    overflow: visible;
    padding-right: clamp(10px, 1vw, 16px);
    font-size: var(--secondary-size);
    line-height: var(--reading-leading);
  }

  .book-copy p,
  .book-actions p,
  .contact-panel p:not(.contact-kicker) {
    font-size: var(--body-size);
    line-height: var(--reading-leading);
  }

  .screen-home p,
  .home-title-main p,
  .home-title-side p {
    line-height: var(--poetic-leading);
  }

  .home-title-main p:not(.temple-call),
  .home-niche p,
  .intro-copy p,
  .mode3-copy p,
  .mode3-copy-medium p,
  .mode3-copy-long p,
  .practice-mode3-copy p,
  .mode4-copy p,
  .mode4-text-block p,
  .elementos-mode3-copy p,
  .elementos-mode4-panel p,
  .elementos-mode4-single-copy p,
  .pedras2-intro p,
  .pedras2-gems p,
  .book-copy p,
  .book-actions p,
  .contact-panel p:not(.contact-kicker) {
    font-size: var(--body-size) !important;
  }

  .temple-call,
  .home-text-superior span,
  .screen-heading p,
  .elementos-mode3-heading p,
  .elementos-mode4-heading p,
  .ether-phrase,
  .elementos-card h2,
  .elementos-card h3,
  .book-available h2,
  .contact-kicker,
  .step strong,
  .atrium-node strong,
  .atrium-node em,
  .hex-node strong,
  .penta-node strong {
    font-size: var(--secondary-size) !important;
  }

  .home-action,
  .book-action,
  .mode3-return,
  .mode4-return,
  .practice-forward,
  .practice-return,
  .elementos-return,
  .elementos-mode4-return,
  .footer-return,
  .footer-soon,
  .book-actions a,
  .elementos-card .practice-forward {
    font-size: var(--control-size) !important;
  }

  #livro .screen-heading p {
    color: rgba(246, 234, 208, 0.92);
    font-family: Cinzel, Georgia, serif;
    font-size: var(--secondary-size) !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.18;
    text-transform: uppercase;
    text-shadow: none;
  }

  #livro .book-actions {
    bottom: 12.2%;
    border-top: 0;
    padding-top: 0;
  }

  #livro .book-actions section {
    gap: clamp(10px, 1.45vh, 16px);
  }

  #livro .book-actions p {
    color: rgba(246, 234, 208, 0.9);
    font-family: Cinzel, Georgia, serif;
    font-size: var(--secondary-size) !important;
    letter-spacing: 0.03em;
    line-height: 1.18;
    text-transform: uppercase;
  }

  .temple-call,
  .ether-phrase,
  .elementos-mode3-heading p {
    font-size: var(--secondary-size) !important;
    line-height: var(--poetic-leading) !important;
  }

  .atrium-node strong,
  .atrium-node em {
    font-size: var(--label-size) !important;
    line-height: var(--control-leading) !important;
  }

  .footer-return,
  .footer-soon,
  .ether-return,
  .practice-return,
  .practice-forward,
  .elementos-return,
  .mode4-return,
  .elementos-mode4-return {
    min-height: 32px !important;
    min-width: 84px !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: visible !important;
    font-size: var(--control-size) !important;
    line-height: var(--control-leading) !important;
  }

  .mode4-text-block {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start !important;
    padding: clamp(2px, 0.35vh, 4px) clamp(12px, 1.1vw, 18px) clamp(28px, 4.2vh, 42px) 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 154, 73, 0.48) transparent;
  }

  .mode4-text-block p {
    font-size: var(--body-size) !important;
    line-height: var(--reading-leading) !important;
  }

  .elementos-card {
    max-height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(4px, 0.62vh, 8px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(4px, 0.55vh, 7px) clamp(8px, 0.85vw, 12px) clamp(8px, 1vh, 14px);
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 154, 73, 0.48) transparent;
  }

  .elementos-card h2,
  .pedras2-content h2,
  .book-available h2 {
    font-size: var(--secondary-size) !important;
    line-height: 1.18 !important;
  }

  .elementos-card h3 {
    font-size: var(--label-size) !important;
    line-height: 1.2 !important;
  }

  .elementos-card p,
  .pedras2-content p,
  .pedras2-intro p {
    font-size: var(--secondary-size) !important;
    line-height: var(--reading-leading) !important;
  }

  .elementos-card p {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0 !important;
    padding-right: clamp(4px, 0.5vw, 8px);
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 154, 73, 0.44) transparent;
  }

  .elementos-card .practice-forward {
    align-self: end;
    justify-self: center;
    margin-top: clamp(4px, 0.7vh, 10px);
  }

  .mode4-copy {
    bottom: 14.8%;
  }

  .mode4-copy-long {
    top: 18%;
    bottom: 16%;
  }

  .mode4-copy-short {
    bottom: 16%;
  }

  .mode4-return,
  .elementos-return,
  .elementos-mode4-return {
    z-index: 8;
  }

  .elementos-card-row {
    top: 22%;
    bottom: 13.8%;
    align-items: stretch;
  }

  #registro .elementos-mode3-copy {
    top: 50%;
    width: min(52%, 760px);
    max-height: 27.5%;
    padding-right: clamp(10px, 1vw, 16px);
    text-align: center;
  }

  #registro .elementos-registro-row {
    top: 23.8%;
    bottom: auto;
    height: 22%;
    width: min(76%, 1120px);
    align-items: start;
  }

  #registro .elementos-registro-row .elementos-card {
    max-height: none;
    overflow: visible;
    align-content: start;
    padding-block: clamp(2px, 0.4vh, 5px);
  }

  #registro .elementos-registro-row .elementos-card p {
    overflow: visible;
    padding-right: 0;
  }

  .elementos-vapores-stage .elementos-card-row {
    top: 56%;
    bottom: 13.8%;
  }

  .elementos-vapores-stage .elementos-card:nth-child(2) {
    translate: 0 clamp(16px, 2.2vh, 24px);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto;
    gap: clamp(1px, 0.24vh, 3px);
  }

  .elementos-vapores-stage .elementos-card:nth-child(2) h2 {
    grid-row: 2;
  }

  .elementos-vapores-stage .elementos-card:nth-child(2) h3 {
    grid-row: 3;
  }

  .elementos-vapores-stage .elementos-card:nth-child(2) p {
    grid-row: 4;
    overflow: visible;
  }

  .elementos-vapores-stage .elementos-card:nth-child(2) .practice-forward {
    grid-row: 5;
    margin-top: clamp(1px, 0.22vh, 3px);
  }

  .elementos-vapores-stage .elementos-card:nth-child(2) h2,
  .elementos-vapores-stage .elementos-card:nth-child(2) h3,
  .elementos-vapores-stage .elementos-card:nth-child(2) p {
    transform: none;
  }

  .vapores-detail-content {
    bottom: 14.2%;
  }

  .vapores-detail-content .elementos-mode4-panel {
    min-height: 0;
    padding-bottom: clamp(24px, 3.4vh, 38px);
  }
}

/* Obra final: tela cheia com nichos */
#sair-do-templo .exit-stage {
  display: block;
  overflow: hidden;
  background: url("./assets/book/marmore-simone-fundo-v1.png") center / cover no-repeat;
}

#sair-do-templo .exit-stage::before {
  background: none;
  content: none;
}

.obra-page {
  position: absolute;
  z-index: 4;
  inset: clamp(28px, 4.2vh, 46px) clamp(44px, 5vw, 72px) clamp(36px, 5vh, 54px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(18px, 2.65vh, 30px);
}

.obra-atrio-return {
  bottom: clamp(-28px, -3.2vh, -18px);
  z-index: 7;
}

.obra-logo {
  width: clamp(88px, 10.4vh, 128px);
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0.78;
  filter: drop-shadow(0 0 10px rgba(217, 155, 43, 0.16));
  pointer-events: none;
  margin: 0 0 clamp(4px, 0.8vh, 9px);
}

.obra-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(430px, 42%) minmax(460px, 45%);
  align-items: center;
  justify-content: space-between;
  gap: clamp(46px, 7.2vw, 112px);
  padding-top: clamp(26px, 4.4vh, 44px);
  transform: translateX(28px);
}

.obra-photo-artifact {
  position: relative;
  width: min(148%, 790px);
  aspect-ratio: 16 / 9;
  margin: 0 auto 0 calc(clamp(8px, 1.8vw, 26px) - 40px);
  overflow: hidden;
  transform: none;
}

.obra-photo-artifact::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 48% 52%, transparent 0 58%, rgba(9, 1, 3, 0.18) 76%, rgba(9, 1, 3, 0.74) 100%),
    linear-gradient(90deg, rgba(9, 1, 3, 0.18), transparent 20% 78%, rgba(9, 1, 3, 0.68));
  pointer-events: none;
}

.obra-photo-artifact img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: saturate(0.96) contrast(1.04) brightness(0.86);
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.62) 88%, transparent 100%),
    radial-gradient(ellipse at 44% 52%, #000 0 62%, rgba(0, 0, 0, 0.72) 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.62) 88%, transparent 100%),
    radial-gradient(ellipse at 44% 52%, #000 0 62%, rgba(0, 0, 0, 0.72) 80%, transparent 100%);
  mask-composite: intersect;
}

.obra-call {
  display: grid;
  justify-items: center;
  gap: clamp(7px, 0.92vh, 12px);
  color: rgba(246, 234, 208, 0.9);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
  transform: translate(clamp(-72px, calc(136px - 15vw), -28px), 0);
}

.obra-kicker {
  margin: 0;
  color: rgba(246, 234, 208, 0.9);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.16;
  text-transform: uppercase;
}

.obra-call h1 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2.45rem, 6.55vh, 4.55rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.98;
  text-transform: uppercase;
}

.obra-rule {
  position: relative;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181, 138, 63, 0.78), transparent);
}

.obra-rule::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(181, 138, 63, 0.72);
  background: rgba(14, 3, 5, 0.9);
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.obra-rule-title {
  width: min(420px, 82%);
  margin: clamp(2px, 0.5vh, 6px) 0 clamp(4px, 0.7vh, 8px);
}

.obra-rule-kicker {
  width: min(300px, 64%);
  opacity: 0.72;
}

.obra-rule-kicker::after {
  width: 5px;
  height: 5px;
  opacity: 0.8;
}

.obra-rule-actions {
  width: min(230px, 52%);
  margin: clamp(2px, 0.5vh, 6px) 0 0;
  opacity: 0.52;
}

.obra-rule-actions::after {
  width: 4px;
  height: 4px;
  opacity: 0.72;
}

.obra-call p {
  max-width: 36rem;
  margin: 0;
  font-size: var(--body-size);
  font-weight: 600;
  line-height: var(--reading-leading);
}

.obra-subtitle,
.obra-invite {
  color: rgba(247, 215, 131, 0.88);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--secondary-size) !important;
  letter-spacing: 0.04em;
  line-height: 1.18 !important;
  text-transform: uppercase;
}

.obra-lead {
  margin-top: clamp(3px, 0.55vh, 6px) !important;
}

.obra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
  justify-content: center;
  margin-top: clamp(5px, 0.75vh, 9px);
}

.obra-button {
  min-width: clamp(166px, 14vw, 210px);
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0 18px;
  border: 1px solid rgba(181, 138, 63, 0.58);
  color: #f7d783;
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  line-height: 1.16;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background: rgba(3, 4, 5, 0.28);
  box-shadow: inset 0 0 10px rgba(181, 138, 63, 0.07);
}

.obra-button-primary {
  border-color: rgba(247, 215, 131, 0.74);
  background: rgba(82, 10, 14, 0.58);
}

.obra-button-soon {
  color: rgba(246, 234, 208, 0.72);
  border-color: rgba(181, 138, 63, 0.34);
}

.obra-button small {
  display: block;
  margin-top: 2px;
  color: rgba(246, 234, 208, 0.58);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.88em;
  font-weight: 600;
  text-transform: none;
}

.obra-niches {
  min-height: clamp(122px, 14.4vh, 140px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}

.obra-niche {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  gap: clamp(4px, 0.58vh, 7px);
  padding: clamp(9px, 1.02vh, 12px) clamp(12px, 1.2vw, 16px);
  border-top: 1px solid rgba(181, 138, 63, 0.44);
  border-bottom: 1px solid rgba(181, 138, 63, 0.2);
  color: rgba(246, 234, 208, 0.82);
  background:
    linear-gradient(90deg, rgba(181, 138, 63, 0.16), transparent 18% 82%, rgba(181, 138, 63, 0.12)),
    rgba(3, 4, 5, 0.28);
  text-align: left;
}

.obra-niche h2 {
  margin: 0;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--secondary-size);
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
}

.obra-niche p,
.obra-niche a,
.obra-niche span {
  margin: 0;
  color: rgba(246, 234, 208, 0.78);
  font-size: var(--control-size);
  font-weight: 600;
  line-height: 1.18;
  text-decoration: none;
}

.obra-niche button,
.obra-niche .obra-niche-button {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(181, 138, 63, 0.44);
  color: #f7d783;
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  background: rgba(82, 10, 14, 0.38);
  text-decoration: none;
}

.obra-niche-news form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.obra-niche-news input {
  min-width: 0;
  min-height: 23px;
  padding: 0 9px;
  border: 1px solid rgba(181, 138, 63, 0.34);
  color: rgba(246, 234, 208, 0.94);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  background: rgba(3, 4, 5, 0.28);
}

.obra-niche-news input::placeholder {
  color: rgba(246, 234, 208, 0.5);
}

.obra-niche-contact {
  grid-template-rows: auto repeat(4, auto);
}

.obra-modal-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: none;
  place-items: center;
  padding: clamp(38px, 6vh, 64px) clamp(48px, 7vw, 92px);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(82, 10, 14, 0.2), transparent 58%),
    rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(2px);
}

.obra-modal-layer.is-open {
  display: grid;
}

.obra-modal {
  width: min(760px, 78vw);
  max-height: min(670px, 76vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(13px, 1.6vh, 18px);
  padding: clamp(26px, 3.6vh, 38px) clamp(30px, 4vw, 48px);
  border: 1px solid rgba(181, 138, 63, 0.52);
  background:
    linear-gradient(180deg, rgba(17, 3, 5, 0.96), rgba(2, 2, 2, 0.98)),
    #050505;
  box-shadow:
    0 0 0 1px rgba(117, 10, 15, 0.42) inset,
    0 22px 70px rgba(0, 0, 0, 0.72);
}

.obra-modal[hidden] {
  display: none;
}

.obra-modal-header {
  display: grid;
  gap: 3px;
  text-align: center;
}

.obra-modal-header p,
.obra-modal-header h2 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
}

.obra-modal-header p {
  color: rgba(196, 24, 30, 0.96);
  font-size: var(--control-size);
}

.obra-modal-header h2 {
  color: var(--gold);
  font-size: clamp(1.35rem, 3vh, 2.05rem);
  line-height: 1.12;
}

.obra-modal-scroll {
  min-height: 0;
  padding-right: 12px;
  overflow-y: auto;
  scrollbar-color: rgba(181, 138, 63, 0.72) rgba(246, 234, 208, 0.08);
  scrollbar-width: thin;
}

.obra-modal-scroll::-webkit-scrollbar {
  width: 7px;
}

.obra-modal-scroll::-webkit-scrollbar-track {
  background: rgba(246, 234, 208, 0.08);
}

.obra-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(181, 138, 63, 0.72);
}

.obra-modal-scroll p {
  margin: 0 0 0.82em;
  color: rgba(246, 234, 208, 0.88);
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.38;
}

.obra-modal-scroll p:last-child {
  margin-bottom: 0;
}

.obra-modal-close {
  justify-self: center;
  min-height: 30px;
  padding: 0 18px;
  border: 1px solid rgba(181, 138, 63, 0.52);
  color: #f7d783;
  background: rgba(82, 10, 14, 0.56);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--control-size);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 820px) {
  .obra-page {
    position: relative;
    inset: auto;
    width: min(88%, 430px);
    margin: 0 auto;
    padding: 28px 0 34px;
  }

  #sair-do-templo .exit-stage {
    min-height: auto;
    overflow-y: auto;
  }

  .obra-logo {
    position: relative;
    top: auto;
    left: 50%;
    width: 62px;
    margin-bottom: 18px;
  }

  .obra-hero,
  .obra-niches {
    grid-template-columns: 1fr;
  }

  .obra-hero {
    gap: 20px;
    padding-top: 0;
  }

  .obra-call,
  .obra-niche {
    text-align: center;
    justify-items: center;
  }

  .obra-actions {
    justify-content: center;
  }
}

html,
body.screen-navigation {
  height: 100%;
  overflow: hidden !important;
}

body.screen-navigation main {
  height: 100svh;
  overflow: hidden !important;
}

body.screen-navigation .screen {
  display: none !important;
  height: 100svh;
  min-height: 100svh;
}

body.screen-navigation .screen.is-active {
  display: grid !important;
}