: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);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: 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;
}

.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: 23.8%;
  left: 50%;
  width: min(25%, 350px);
  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(118, 0, 32, 0.88);
  text-shadow:
    0 0 4px rgba(165, 0, 46, 0.6),
    0 0 10px rgba(118, 0, 32, 0.34),
    0 0 1px rgba(255, 210, 220, 0.58);
}

.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);
}

.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);
  }
}

/* Home mobile image and readability boost */
.screen-home picture {
  display: contents;
}

.screen-home .home-text-superior p {
  font-size: clamp(1.22rem, 2.05vw, 2.28rem);
}

.screen-home .home-text-superior span {
  font-size: clamp(0.86rem, 1.28vw, 1.42rem);
}

.screen-home .home-title-main h1 {
  font-size: clamp(1.28rem, 1.86vw, 2.12rem);
  line-height: 1.08;
}

.screen-home .home-title-main p {
  font-size: clamp(0.9rem, 1.22vw, 1.28rem);
  line-height: 1.22;
}

.screen-home .home-title-main .temple-call {
  font-size: clamp(0.78rem, 1.02vw, 1.12rem);
}

.screen-home .home-action {
  min-width: clamp(84px, 7.4vw, 122px);
  min-height: clamp(29px, 2.35vw, 38px);
  padding-inline: clamp(16px, 1.45vw, 24px);
  font-size: clamp(0.68rem, 0.9vw, 0.98rem);
}

.screen-home .home-book-names p {
  font-size: clamp(1.06rem, 1.48vw, 1.62rem);
  line-height: 1.12;
}

.screen-home .home-book-names .book-action {
  width: clamp(138px, 10.8vw, 178px);
  min-height: clamp(27px, 2.16vw, 35px);
}

.screen-home .home-niche h2 {
  font-size: clamp(1rem, 1.38vw, 1.48rem);
}

.screen-home .home-niche p {
  font-size: clamp(0.82rem, 1.1vw, 1.18rem);
  line-height: 1.22;
}

@media (max-width: 820px) {
  .screen-home .home-scene {
    object-position: 50% 50%;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.28rem, 6vw, 1.72rem);
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.9rem, 4.15vw, 1.12rem);
  }

  .screen-home .home-title-main {
    top: 23.8%;
    left: 8.4%;
    width: 37%;
  }

  .screen-home .home-title-main h1 {
    font-size: clamp(1rem, 5.1vw, 1.36rem);
    line-height: 1.04;
  }

  .screen-home .home-title-main p {
    font-size: clamp(0.6rem, 2.95vw, 0.78rem);
    line-height: 1.14;
  }

  .screen-home .home-title-main .temple-call {
    font-size: clamp(0.54rem, 2.58vw, 0.7rem);
  }

  .screen-home .home-title-main .home-action {
    min-width: 82px;
    min-height: 29px;
    font-size: clamp(0.56rem, 2.7vw, 0.72rem);
  }

  .screen-home .home-book-names {
    top: 52.8%;
    right: 4.8%;
    width: 34%;
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.74rem, 3.55vw, 0.98rem);
  }

  .screen-home .home-book-names .book-action {
    width: clamp(118px, 31vw, 138px);
    min-height: 29px;
    font-size: clamp(0.52rem, 2.46vw, 0.66rem);
  }

  .screen-home .home-niche h2 {
    max-width: 5.1rem;
    font-size: clamp(0.66rem, 3.25vw, 0.86rem);
    line-height: 0.96;
  }
}

/* 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);
}

.exit-stage {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(199, 154, 73, 0.06), transparent 33%),
    linear-gradient(rgba(3, 4, 5, 0.18), rgba(3, 4, 5, 0.24)),
    url("./assets/backgrounds/sair-do-templo-bg-piloto.png") center / cover no-repeat;
}

.exit-stage::before {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 47%, transparent 0 38%, rgba(0, 0, 0, 0.24) 78%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), transparent 34% 66%, rgba(0, 0, 0, 0.22));
}

.exit-wait {
  position: relative;
  z-index: 4;
  margin: 0;
  color: rgba(246, 232, 191, 0.92);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 5.2rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(247, 231, 190, 0.36),
    0 0 34px rgba(199, 154, 73, 0.18),
    0 3px 18px rgba(0, 0, 0, 0.82);
}

.exit-wait::after {
  display: block;
  width: min(36vw, 320px);
  height: 1px;
  margin: clamp(12px, 2vh, 22px) auto 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(199, 154, 73, 0.62), transparent);
  box-shadow: 0 0 12px rgba(199, 154, 73, 0.22);
}

.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); text-decoration: none; font-family: Cinzel, Georgia, serif; font-size: clamp(0.66rem, 0.96vh, 0.84rem); }
.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;
}

.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-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);
}

.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(circle at 50% 42%, rgba(217, 155, 43, 0.14), transparent 28rem),
    linear-gradient(180deg, #020505, #05090c 54%, #020505);
}

.contact-panel {
  position: relative;
  z-index: 4;
  width: min(520px, 72%);
  padding: clamp(22px, 3vw, 44px);
  border: 1px solid rgba(217, 155, 43, 0.32);
  border-radius: 6px;
  text-align: center;
  background: rgba(2, 7, 8, 0.62);
  box-shadow: inset 0 0 44px rgba(217, 155, 43, 0.05);
}

.contact-kicker {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  text-transform: uppercase;
  color: rgba(247, 215, 131, 0.86);
}

.contact-panel h1 {
  margin: 12px 0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2.8rem);
  line-height: 1.12;
  color: #fff1bf;
}

.contact-panel p:not(.contact-kicker) {
  margin: 0 auto;
  max-width: 30rem;
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  line-height: 1.35;
  color: rgba(246, 234, 208, 0.82);
}

@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);
  }
}

/* Site-wide readability and icon scale */
:root {
  --title-size: clamp(1.34rem, 3.05vh, 2.65rem);
  --body-size: clamp(0.92rem, 1.58vh, 1.2rem);
  --label-size: clamp(0.74rem, 1.2vh, 1rem);
}

.screen-heading h1,
.mode3-heading h1,
.elementos-mode3-heading h1,
.elementos-mode4-heading h1,
.contact-panel h1 {
  font-size: var(--title-size);
  line-height: 1.04;
}

.screen-heading p,
.intro-copy p,
.mode3-copy p,
.practice-mode3-copy p,
.book-copy p,
.book-actions p,
.elementos-mode3-heading p,
.elementos-mode3-copy p,
.elementos-mode4-panel p,
.elementos-mode4-single-copy p,
.contact-panel p:not(.contact-kicker) {
  font-size: var(--body-size);
  line-height: 1.3;
}

.atrium-node strong,
.step strong,
.hex-node strong,
.penta-node strong,
.book-actions h2,
.book-actions a,
.mode3-return,
.ether-return,
.practice-forward,
.practice-return,
.mode4-return,
.elementos-return,
.elementos-mode4-return,
.footer-return,
.footer-soon {
  font-size: var(--label-size);
  line-height: 1.12;
}

.diamond-button {
  width: clamp(46px, 7.6vh, 78px);
  font-size: clamp(1.08rem, 2.35vh, 1.6rem);
}

.portal-button {
  width: clamp(48px, 8.4vh, 86px);
}

.circle-button {
  width: clamp(44px, 7.4vh, 78px);
}

.center-mark,
.hex-core,
.penta-core {
  width: clamp(46px, 7vh, 76px);
}

.center-mark::before {
  font-size: clamp(1.7rem, 4.2vh, 2.95rem);
}

.screen-footer a::before,
.screen-footer span::before {
  width: clamp(24px, 3.6vh, 38px);
  font-size: clamp(0.92rem, 1.75vh, 1.22rem);
}

/* Home final composition */
.screen-home picture {
  display: contents;
}

.screen-home .home-text-superior {
  top: 5.8%;
}

.screen-home .home-text-superior p {
  font-size: clamp(1.36rem, 2.2vw, 2.52rem);
}

.screen-home .home-text-superior span {
  font-size: clamp(0.94rem, 1.34vw, 1.48rem);
}

.screen-home .home-title-main {
  top: 23.5%;
  left: 7.4%;
  width: 27.5%;
  text-align: center;
}

.screen-home .home-title-main h1 {
  font-size: clamp(1.34rem, 1.82vw, 2.08rem);
  line-height: 1.08;
}

.screen-home .home-title-main p {
  font-size: clamp(0.92rem, 1.14vw, 1.28rem);
  line-height: 1.22;
}

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

.screen-home .home-action {
  min-width: clamp(96px, 7.6vw, 132px);
  min-height: clamp(32px, 2.28vw, 42px);
  padding-inline: clamp(18px, 1.4vw, 26px);
  font-size: clamp(0.76rem, 0.92vw, 1rem);
}

.screen-home .home-book-names {
  top: 34.7%;
  right: 15%;
  width: 19%;
}

.screen-home .home-book-names p {
  font-size: clamp(1.12rem, 1.46vw, 1.62rem);
  line-height: 1.12;
}

.screen-home .home-book-names .book-action {
  width: clamp(148px, 11vw, 188px);
  min-height: clamp(31px, 2.16vw, 40px);
}

.screen-home .home-niches {
  right: 13.2%;
  bottom: 4.2%;
  left: 13.2%;
  height: 20.5%;
}

.screen-home .home-niche {
  padding-bottom: clamp(20px, 2.25vw, 34px);
}

.screen-home .home-niche h2 {
  max-width: 8.5rem;
  font-size: clamp(1.08rem, 1.35vw, 1.46rem);
  line-height: 1.02;
}

.screen-home .home-niche p {
  font-size: clamp(0.86rem, 1.04vw, 1.12rem);
  line-height: 1.22;
}

@media (max-width: 820px) {
  :root {
    --title-size: clamp(1.32rem, 5.7vw, 1.82rem);
    --body-size: clamp(0.84rem, 3.55vw, 1.08rem);
    --label-size: clamp(0.72rem, 3.05vw, 0.98rem);
  }

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

  .screen-home .home-text-superior {
    top: 4.6%;
  }

  .screen-home .home-text-superior p {
    font-size: clamp(1.3rem, 6vw, 1.76rem);
  }

  .screen-home .home-text-superior span {
    font-size: clamp(0.92rem, 4vw, 1.14rem);
  }

  .screen-home .home-title-main {
    top: 13.6%;
    right: 9%;
    left: 9%;
    width: auto;
    text-align: center;
  }

  .screen-home .home-title-main h1 {
    margin-bottom: clamp(7px, 1.8vw, 10px);
    font-size: clamp(1.16rem, 5.65vw, 1.54rem);
    line-height: 1.05;
  }

  .screen-home .home-title-main p {
    margin-top: clamp(4px, 1.15vw, 7px);
    font-size: clamp(0.68rem, 3.12vw, 0.86rem);
    line-height: 1.16;
  }

  .screen-home .home-title-main .temple-call {
    font-size: clamp(0.62rem, 2.72vw, 0.78rem);
  }

  .screen-home .home-title-main .home-action {
    min-width: 96px;
    min-height: 32px;
    margin-top: clamp(7px, 2vw, 10px);
    font-size: clamp(0.62rem, 2.78vw, 0.76rem);
  }

  .screen-home .home-book-names {
    top: 56.8%;
    right: 24%;
    width: 52%;
  }

  .screen-home .home-book-names p {
    font-size: clamp(0.92rem, 4.2vw, 1.16rem);
  }

  .screen-home .home-book-names .book-action {
    width: clamp(136px, 41vw, 166px);
    min-height: 32px;
    font-size: clamp(0.58rem, 2.55vw, 0.72rem);
  }

  .screen-home .home-niches {
    right: 10%;
    bottom: 9.6%;
    left: 10%;
    height: 12.6%;
  }

  .screen-home .home-niche {
    padding-inline: 1px;
    padding-bottom: clamp(7px, 1.9vw, 10px);
  }

  .screen-home .home-niche h2 {
    max-width: 4.8rem;
    font-size: clamp(0.66rem, 3.15vw, 0.86rem);
    line-height: 0.98;
  }

  .diamond-button {
    width: clamp(42px, 10.5vw, 58px);
  }

  .portal-button,
  .circle-button {
    width: clamp(42px, 10vw, 60px);
  }
}