/* Four readable chapters in one continuous dark space. */
body.journey-enabled {
  background: #030407;
}
body.journey-enabled #ambient-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 0;
  opacity: var(--journey-atmosphere, 1);
}
#journey-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
}
body.journey-enabled main {
  overflow-x: clip;
  position: relative;
  z-index: 2;
}
body.journey-enabled main > section {
  position: relative;
  top: auto;
  width: 100%;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: auto;
}
body.journey-ready .hero-stage {
  visibility: hidden;
}
body.journey-enabled .footer {
  position: relative;
  z-index: 3;
  background: #030407;
}
body.intro-running.intro-seamless #journey-scene {
  opacity: var(--intro-logo, 0);
}
body.journey-enabled #experiencias {
  height: 112svh;
  min-height: 870px;
  overflow: visible;
}
body.journey-enabled .vr-copy {
  top: 19%;
  max-width: 550px;
}
body.journey-enabled .vr-copy h2 {
  font-size: clamp(56px, 6.2vw, 90px);
  line-height: 1;
  letter-spacing: -0.055em;
}
body.journey-enabled .vr-copy > p {
  text-shadow: 0 2px 14px #000;
}
body.journey-enabled .vr-art,
body.journey-enabled .vr-scene-controls {
  display: none !important;
}
body.journey-enabled #invitacion {
  padding-top: 100px;
  padding-bottom: 150px;
}
body.journey-enabled #invitacion .section-heading {
  position: relative;
  z-index: 3;
}
body.journey-enabled .invitation-examples {
  max-width: 1160px;
  margin-top: 70px;
  --spread: clamp(172px, 23vw, 320px);
}
body.journey-enabled .invitation-example {
  margin-top: var(--journey-card-y, 0px);
}
body.journey-enabled #contacto {
  min-height: 90svh;
  align-content: center;
  padding-top: 120px;
  padding-bottom: 120px;
}
body.journey-enabled .contact-copy h2 {
  font-size: clamp(60px, 6.8vw, 98px);
  line-height: 1;
  letter-spacing: -0.06em;
}
body.journey-enabled .contact-launch {
  position: relative;
  z-index: 2;
}
body.journey-enabled :is(.vr-copy, .contact-copy, .invitation-intro) {
  text-shadow: 0 3px 35px #030407;
}
@media (max-width: 767px) {
  body.journey-enabled #experiencias {
    height: 110svh;
    min-height: 850px;
  }
  body.journey-enabled .vr-copy {
    top: 100px;
  }
  body.journey-enabled .vr-copy h2 {
    font-size: 53px;
  }
  body.journey-enabled #invitacion {
    padding-top: 72px;
    padding-bottom: 100px;
  }
  body.journey-enabled .invitation-examples {
    margin-top: 45px;
  }
  body.journey-enabled #contacto {
    min-height: 92svh;
    padding-top: 110px;
    padding-bottom: 100px;
  }
  body.journey-enabled .contact-copy h2 {
    font-size: 59px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.journey-enabled .invitation-example {
    margin-top: 0;
  }
}
@media print {
  #journey-scene,
  #ambient-particles {
    display: none;
  }
}

/* Controls stay still; color and contrast carry their hover feedback. */
.button,
.header-cta,
.hero-actions .button,
.service-card:hover {
  transform: none;
}
/* Collapsing the CTA also releases its width and gap in the navigation. */
.js-ready .site-header {
  gap: 0;
}
.header-cta.is-scroll-managed {
  max-width: 0;
  min-width: 0;
  padding-inline: 0;
  border-inline-width: 0;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-width 320ms ease,
    padding 320ms ease,
    margin 320ms ease,
    border-width 320ms ease,
    opacity 220ms ease,
    visibility 320ms;
}
.header-cta.is-scroll-managed.is-visible {
  max-width: 240px;
  padding-inline: 15px;
  border-inline-width: 1px;
  margin-left: 22px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.button,
.header-cta {
  justify-content: center;
}
@media (max-width: 1099px) {
  .header-cta.is-scroll-managed,
  .header-cta.is-scroll-managed.is-visible {
    margin-left: auto;
  }
  .js-ready .menu-toggle {
    margin-left: 8px;
  }
}
@media (max-width: 767px) {
  .header-cta.is-scroll-managed.is-visible {
    padding-inline: 12px;
  }
}
.vr-copy .experience-cta {
  min-height: 56px;
  margin-top: 26px;
  padding: 16px 22px;
  gap: 26px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.035);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
  font-size: 14px;
  font-weight: 400;
}
.vr-copy .experience-cta:hover {
  border-color: rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.065);
}
html.intro-locked,
html.intro-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.intro-locked body {
  touch-action: none;
}
@media (prefers-reduced-motion: reduce) {
  .header-cta.is-scroll-managed {
    transition: none;
  }
}

/* The experience occupies the same scene and has an actual visual focal point. */
body.journey-enabled #experiencias {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 38px;
  align-items: center;
  height: auto;
  min-height: 820px;
  padding: 100px var(--page);
}
body.journey-enabled #experiencias .vr-copy {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  max-width: 550px;
}
.experience-visual {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.experience-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.experience-object {
  display: none;
}
[data-mode="vr"] [data-visual="vr"],
[data-mode="visuals"] [data-visual="visuals"],
[data-mode="play"] [data-visual="play"] {
  display: block;
  animation: experience-enter 450ms ease both;
}
.experience-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 15px;
}
.experience-switch button {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: #a1a6ad;
  background: transparent;
  font-size: 12px;
  transition:
    color 180ms,
    border-color 180ms,
    background 180ms;
}
.experience-switch button[aria-pressed="true"] {
  color: white;
  border-color: #ffffff40;
  background: #ffffff07;
}
.experience-switch button:hover {
  color: white;
  border-color: #ffffff30;
}
.experience-switch button:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
@keyframes experience-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Reserve separate space for the mark and the two opening phrases. */
.intro .intro-phrase {
  top: 74%;
  max-width: 940px;
  line-height: 1.16;
}
.intro .intro-phrase--studio {
  font-size: clamp(27px, 3.5vw, 48px);
}
.intro .intro-phrase--promise {
  font-size: clamp(30px, 4.2vw, 60px);
}
@media (max-width: 767px) {
  body.journey-enabled #experiencias {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 90px var(--page) 65px;
    gap: 22px;
  }
  .experience-visual {
    max-width: 440px;
    margin: 0 auto;
  }
  .experience-art {
    width: 110%;
    margin-left: -5%;
  }
  .experience-switch {
    gap: 2px;
    margin-top: 0;
  }
  .experience-switch button {
    padding-inline: 11px;
    font-size: 11px;
  }
  .intro .intro-phrase {
    top: 68%;
    width: calc(100% - 48px);
    max-width: 340px;
  }
  .intro .intro-phrase--studio {
    font-size: 26px;
  }
  .intro .intro-phrase--promise {
    font-size: 31px;
  }
}
@media (max-height: 600px) and (min-width: 768px) {
  .intro .intro-phrase {
    top: 79%;
  }
  .intro .intro-phrase--studio {
    font-size: 25px;
  }
  .intro .intro-phrase--promise {
    font-size: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .experience-object {
    animation: none !important;
  }
}