.page-inicio {
  --nx-header: 82px;
  --nx-ground: #030c17;
  --nx-surface: #071322;
  --nx-surface-2: #0d1c30;
  --nx-surface-3: #122640;
  --nx-light: #f0f2f5;
  --nx-soft: #c7d3e2;
  --nx-blue: #2858f3;
  --nx-ease-out: cubic-bezier(.22, 1, .36, 1);
  --nx-ease-expo: cubic-bezier(.16, 1, .3, 1);
  --nx-ease-in-out: cubic-bezier(.76, 0, .24, 1);
  background: var(--nx-ground);
  color: var(--nx-light);
}

.page-inicio main {
  background: var(--nx-ground);
  overflow: clip;
}

.page-inicio .plain-link {
  color: var(--nx-light);
  text-decoration-color: #6f84a0;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.page-inicio .plain-link:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

/* Opening apparatus */
.vial-story {
  position: relative;
  background: var(--nx-ground);
}

.vial-stage {
  position: relative;
  height: calc(100svh - var(--nx-header));
  min-height: 650px;
  overflow: clip;
  isolation: isolate;
  background: var(--nx-ground);
}

.studio-word {
  position: absolute;
  top: 1.5%;
  left: 3.2%;
  width: 93.6%;
  color: #1d2d43;
  font: 700 clamp(8rem, 20.5vw, 24rem)/.82 var(--display);
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: center top;
}

.studio-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nx-blue);
  opacity: 0;
}

.apparatus-render {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.layered-vial {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.layered-vial {
  left: 73%;
  top: 51%;
  height: 88%;
  aspect-ratio: 2 / 3;
  max-width: 48%;
  transform: translate3d(-50%, -50%, 0) rotate(-7deg);
  perspective: 1100px;
}

.vial-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  will-change: transform;
}

.vial-layer { transform-origin: center 24%; }
.layer-cap { clip-path: inset(0 0 76% 0); z-index: 3; }
.layer-neck { clip-path: inset(24% 0 70.5% 0); z-index: 2; }
.layer-body { clip-path: inset(29.5% 0 0 0); z-index: 1; }

.story-copy {
  position: absolute;
  left: 4%;
  bottom: 19%;
  z-index: 4;
  width: min(45%, 660px);
}

.story-copy h1,
.story-copy h2 {
  max-width: 14ch;
  color: var(--nx-light);
  font-size: clamp(4rem, 6.8vw, 6rem);
  line-height: .92;
  letter-spacing: -.03em;
}

.story-copy p {
  margin: 26px 0;
  color: var(--nx-soft);
  font-size: 18px;
  line-height: 1.5;
}

.story-copy .button {
  border-color: var(--nx-light);
  background: var(--nx-light);
  color: var(--nx-ground);
}

.story-copy .button:hover {
  border-color: #fff;
  background: #fff;
}

.story-detail,
.story-finale {
  display: none;
}

.story-finale { width: min(52%, 760px); }

.story-finale h2 {
  max-width: 16ch;
  font-size: clamp(3.5rem, 5.6vw, 5.7rem);
}

.story-controls {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 25px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 26px;
  color: #c3cfdd;
  font-size: 13px;
}

.scroll-cue {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 13px;
  color: var(--nx-light);
  font-size: 14px;
}

.scroll-cue svg { width: 17px; height: 22px; }

.motion-toggle {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #c3cfdd;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.motion-toggle:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.concept-note {
  margin-left: auto;
  color: #b4c2d5;
}

.story-progress {
  position: absolute;
  right: 4%;
  bottom: 0;
  left: 4%;
  z-index: 6;
  height: 4px;
  overflow: hidden;
  background: #18283e;
}

.story-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #9ab4ff;
  transform: scaleX(0);
  transform-origin: left;
}

.story-anchor { position: absolute; top: 38%; }

.motion-active .vial-story { height: 420svh; }
.motion-active .vial-stage { position: sticky; top: var(--nx-header); }
.motion-active .story-detail,
.motion-active .story-finale { display: block; opacity: 0; pointer-events: none; }

/* Quiet bridge: one object, one statement, no empty screen */
.identity-break {
  position: relative;
  min-height: 108svh;
  overflow: clip;
  background: var(--nx-surface);
  isolation: isolate;
}

.identity-word {
  position: absolute;
  right: -1vw;
  bottom: -.1em;
  left: -1vw;
  color: #10223a;
  font: 700 clamp(8rem, 21vw, 24rem)/.76 var(--display);
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
}

.identity-object {
  position: absolute;
  top: -8%;
  right: 8%;
  height: 116%;
  max-width: 48%;
  object-fit: contain;
  opacity: .76;
  transform: rotate(11deg);
  transform-origin: center;
}

.identity-copy {
  position: relative;
  z-index: 2;
  min-height: 108svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
  align-items: center;
  gap: 10%;
}

.identity-copy h2 {
  max-width: 13ch;
  color: var(--nx-light);
  font-size: clamp(4rem, 7vw, 6rem);
}

.identity-copy > div {
  align-self: end;
  padding-bottom: 13svh;
}

.identity-copy p {
  max-width: 31ch;
  color: var(--nx-soft);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  line-height: 1.4;
}

/* Catalogue as the second held scene */
.collection-story { position: relative; background: #06101e; }

.collection-stage {
  position: relative;
  padding: 42px 4% 24px;
  overflow: hidden;
  background: #06101e;
}

.collection-top,
.collection-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.collection-top h2 {
  color: var(--nx-light);
  font-size: clamp(3rem, 4.8vw, 4.6rem);
}

.collection-window {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.collection-window::-webkit-scrollbar { display: none; }

.collection-track {
  display: flex;
  width: 300%;
  will-change: transform;
}

.collection-slide {
  position: relative;
  flex: 0 0 33.333333%;
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

.slide-ambient {
  position: absolute;
  top: 45%;
  left: 2%;
  width: 96%;
  color: #18304e;
  font: 700 clamp(5rem, 10.8vw, 12rem)/.8 var(--display);
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

.slide-products {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3vw;
}

.slide-product {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(180px, 57%) minmax(150px, 43%);
  align-items: center;
  color: var(--nx-light);
}

.slide-vial {
  height: min(61svh, 560px);
  min-height: 400px;
  overflow: clip;
}

.slide-vial img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  transition: transform 420ms var(--nx-ease-out);
  will-change: transform;
}

.slide-copy { position: relative; z-index: 2; }

.slide-product h3 {
  max-width: 8ch;
  margin-bottom: 13px;
  color: var(--nx-light);
  font-size: clamp(2.2rem, 3.4vw, 3.5rem);
  line-height: .92;
}

.slide-product p {
  margin: 0 0 18px;
  color: #c4d1e2;
  font-size: 17px;
}

.slide-product span {
  color: var(--nx-light);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: #7387a3;
  text-underline-offset: 6px;
  transition: text-decoration-color 180ms ease;
}

.slide-product:hover span { text-decoration-color: currentColor; }
.slide-product:hover .slide-vial img { transform: rotate(2deg) scale(1.025); }

.collection-bottom p {
  margin: 0;
  color: #aebed2;
  font-size: 13px;
}

.slide-controls { display: flex; align-items: center; gap: 16px; }

.slide-controls button {
  display: grid;
  width: 48px;
  height: 48px;
  border: 0;
  place-items: center;
  background: #1b3352;
  color: #fff;
  transition: background-color 180ms ease, transform 140ms var(--nx-ease-out);
}

.slide-controls button:hover:not(:disabled) { background: var(--nx-blue); }
.slide-controls button:active:not(:disabled) { transform: scale(.95); }
.slide-controls button:disabled { opacity: .35; }
.slide-position { min-width: 44px; color: var(--nx-light); font-size: 15px; text-align: center; }

.motion-active .collection-story { height: 280svh; }

.motion-active .collection-stage {
  position: sticky;
  top: var(--nx-header);
  height: calc(100svh - var(--nx-header));
  min-height: 610px;
  display: flex;
  flex-direction: column;
}

.motion-active .collection-window {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  scroll-snap-type: none;
}

.motion-active .collection-track { flex: 0 0 300%; }

/* Product code becomes the third held scene */
.trace-story {
  position: relative;
  background: var(--nx-blue);
  color: #fff;
}

.trace-stage {
  position: relative;
  min-height: calc(100svh - var(--nx-header));
  padding: 6vh 4%;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(220px, .65fr) minmax(320px, 1.05fr);
  align-items: center;
  gap: 4vw;
  overflow: clip;
  isolation: isolate;
}

.trace-copy { position: relative; z-index: 3; }

.trace-copy h2 {
  max-width: 13ch;
  color: #fff;
  font-size: clamp(3.7rem, 6vw, 5.8rem);
  line-height: .92;
}

.trace-copy p {
  max-width: 31ch;
  margin: 26px 0;
  color: #e5ebff;
  font-size: 18px;
}

.trace-ready { display: none; }

.trace-object {
  position: relative;
  z-index: 1;
  height: min(75svh, 720px);
  aspect-ratio: 2 / 3;
  justify-self: center;
  transform-origin: center;
}

.trace-vial {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trace-code {
  position: absolute;
  top: 54%;
  left: 50%;
  width: 230px;
  padding: 15px 18px;
  background: #06101e;
  color: #fff;
  transform: translate(-50%, -50%);
}

.trace-code strong,
.trace-code span { display: block; }
.trace-code strong { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.trace-code span { margin-top: 5px; color: #becde1; font-size: 13px; }

.trace-scan {
  position: absolute;
  top: 18%;
  right: 14%;
  left: 14%;
  height: 5px;
  background: #d8e2ff;
  opacity: 0;
}

.trace-panel {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  padding: clamp(28px, 3.2vw, 48px);
  background: var(--nx-light);
  color: var(--ink);
}

.trace-panel h3 {
  margin-bottom: 26px;
  color: var(--ink);
  font-size: clamp(2rem, 3vw, 3.1rem);
}

.trace-panel label { color: #243b57; }
.trace-panel .input-button { gap: 10px; }
.trace-panel .button { min-height: 54px; }
.trace-panel .help,
.trace-panel .micro { color: #53657b; }

.trace-foot {
  position: absolute;
  right: 4%;
  bottom: 24px;
  left: 4%;
  z-index: 5;
  color: #fff;
  font-size: 13px;
  text-align: right;
}

.motion-active .trace-story { height: 290svh; }

.motion-active .trace-stage {
  position: sticky;
  top: var(--nx-header);
  height: calc(100svh - var(--nx-header));
  min-height: 630px;
  display: block;
  padding: 0;
}

.motion-active .trace-copy {
  position: absolute;
  top: 50%;
  left: 4%;
  width: 32%;
  transform: translateY(-50%);
}

.motion-active .trace-ready { display: block; opacity: 0; pointer-events: none; }

.motion-active .trace-object {
  position: absolute;
  top: 50%;
  left: 57%;
  height: 82%;
  transform: translate3d(-50%, -50%, 0) rotate(-5deg);
  will-change: transform;
}

.motion-active .trace-panel {
  position: absolute;
  top: 50%;
  right: 4%;
  width: min(38%, 560px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(60px, -50%, 0);
}

/* FAQ is the deliberate pause between movement and contact */
.experience-faq {
  min-height: 100svh;
  padding: 12svh 0;
  background: var(--nx-ground);
  color: var(--nx-light);
}

.experience-faq .faq-grid {
  align-items: start;
  gap: 8vw;
}

.experience-faq .faq-grid > div:first-child {
  position: sticky;
  top: calc(var(--nx-header) + 9vh);
}

.experience-faq h2 {
  max-width: 12ch;
  color: var(--nx-light);
  font-size: clamp(3.7rem, 6.3vw, 5.8rem);
}

.experience-faq .faq-grid > div:first-child p {
  max-width: 28ch;
  margin-top: 24px;
  color: var(--nx-soft);
  font-size: 18px;
}

.experience-faq .faq-grid > div:first-child .plain-link { margin-top: 8px; }

.page-inicio .experience-faq .faq details {
  margin-bottom: 12px;
  background: var(--nx-surface-2);
  transition: background-color 220ms ease;
}

.page-inicio .experience-faq .faq details[open] { background: var(--nx-surface-3); }

.page-inicio .experience-faq .faq summary {
  min-height: 86px;
  padding: 24px 26px;
  color: var(--nx-light);
  font-size: 19px;
}

.page-inicio .experience-faq .faq summary svg { transition: transform 240ms var(--nx-ease-out); }
.page-inicio .experience-faq .faq details[open] summary svg { transform: rotate(45deg); }

.page-inicio .experience-faq .faq p {
  padding: 0 26px 26px;
  color: var(--nx-soft);
  font-size: 17px;
}

/* Closing scene */
.closing-contact {
  position: relative;
  min-height: 112svh;
  padding: 8svh 0;
  overflow: clip;
  background: var(--nx-surface);
  isolation: isolate;
}

.contact-word {
  position: absolute;
  top: .02em;
  right: -1vw;
  left: -1vw;
  z-index: -1;
  color: #10213a;
  font: 700 clamp(8rem, 22vw, 25rem)/.8 var(--display);
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
}

.page-inicio .closing-contact .contact-grid {
  position: relative;
  min-height: 96svh;
  padding-top: 10svh;
  padding-bottom: 6svh;
  align-items: end;
  gap: 8vw;
}

.closing-contact h2 {
  max-width: 14ch;
  color: var(--nx-light);
  font-size: clamp(3.8rem, 6.5vw, 6rem);
}

.closing-contact .contact-grid > div:first-child > p {
  max-width: 32ch;
  margin-top: 25px;
  color: var(--nx-soft);
  font-size: 18px;
}

.page-inicio .closing-contact .channel-note {
  max-width: 420px;
  margin-top: 34px;
  padding: 24px;
  background: var(--nx-surface-3);
}

.page-inicio .closing-contact .channel-note strong { color: #fff; }
.page-inicio .closing-contact .channel-note p { color: var(--nx-soft); }

.closing-contact .contact-form {
  padding: clamp(26px, 3.4vw, 48px);
  background: var(--nx-light);
  color: var(--ink);
}

.closing-contact .contact-form label { color: #263b53; }
.closing-contact .contact-form label span { color: #5c6b7d; }
.closing-contact .contact-form .help { color: #59697c; }
.closing-contact .contact-form .button.secondary { color: var(--ink); }
.closing-contact .contact-response { background: #dfe6ef; }
.closing-contact .contact-response p { color: #465b72; }

.page-inicio footer { position: relative; background: var(--nx-ground); }

@media (prefers-reduced-motion: no-preference) {
  .motion-active .experience-reveal {
    opacity: .35;
    transform: translateY(24px);
    transition: opacity 700ms var(--nx-ease-out), transform 850ms var(--nx-ease-expo);
  }

  .motion-active .experience-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .identity-break { view-timeline-name: --identity; }
    .identity-object {
      animation: identity-object linear both;
      animation-timeline: --identity;
      animation-range: entry 0% exit 100%;
    }
    .identity-word {
      animation: identity-word linear both;
      animation-timeline: --identity;
      animation-range: entry 0% exit 100%;
    }
    .closing-contact { view-timeline-name: --contact; }
    .contact-word {
      animation: contact-word linear both;
      animation-timeline: --contact;
      animation-range: entry 0% cover 70%;
    }
  }
}

@keyframes identity-object {
  from { transform: translateY(-4%) rotate(8deg) scale(1.04); }
  to { transform: translateY(5%) rotate(13deg) scale(.96); }
}

@keyframes identity-word {
  from { transform: translateX(7%); }
  to { transform: translateX(-7%); }
}

@keyframes contact-word {
  from { transform: translateY(8%); }
  to { transform: translateY(-8%); }
}

@media (max-width: 1100px) {
  .layered-vial { left: 74%; height: 81%; }
  .story-copy { width: 45%; }
  .slide-product { grid-template-columns: 54% 46%; }
  .slide-vial { height: min(53svh, 500px); }
  .trace-stage { grid-template-columns: .8fr .55fr 1fr; gap: 3vw; }
  .trace-panel { padding: 30px; }
}

@media (max-width: 850px) {
  .page-inicio { --nx-header: 74px; }
  .story-copy { left: 5%; width: 48%; }
  .story-copy h1,
  .story-copy h2 { font-size: clamp(3.6rem, 8vw, 5rem); }
  .layered-vial { left: 76%; height: 76%; }
  .identity-object { right: 0; height: 106%; opacity: .62; }
  .identity-copy { grid-template-columns: 1fr .7fr; gap: 5%; }
  .identity-copy > div { padding-bottom: 10svh; }
  .slide-product { grid-template-columns: 58% 42%; }
  .slide-vial { min-height: 340px; }
  .slide-product h3 { font-size: clamp(2rem, 4.5vw, 3rem); }
  .trace-stage { grid-template-columns: .8fr .45fr 1fr; }
  .trace-code { width: 190px; }
  .motion-active .trace-copy { width: 36%; }
  .motion-active .trace-object { left: 55%; height: 72%; }
  .motion-active .trace-panel { width: 43%; right: 3%; }
  .trace-stage,
  .motion-active .trace-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    padding: 64px 4%;
    overflow: visible;
  }
  .motion-active .trace-story { height: auto; }
  .trace-copy,
  .motion-active .trace-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    grid-column: 1 / -1;
    opacity: 1 !important;
    transform: none !important;
  }
  .trace-ready,
  .motion-active .trace-ready { display: none; }
  .trace-copy h2 { font-size: 3.8rem; }
  .trace-object,
  .motion-active .trace-object {
    position: relative;
    top: auto;
    left: auto;
    height: 56svh;
    min-height: 420px;
    max-width: 100%;
    transform: rotate(-4deg) !important;
  }
  .trace-panel,
  .motion-active .trace-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .trace-foot { position: relative; right: auto; bottom: auto; left: auto; grid-column: 1 / -1; }
  .trace-scan { display: none; }
  .experience-faq .faq-grid { gap: 5vw; }
  .page-inicio .closing-contact .contact-grid { gap: 5vw; }
}

@media (max-width: 650px) {
  .page-inicio { --nx-header: 68px; }
  .vial-stage { min-height: 680px; }
  .studio-word {
    top: 26px;
    left: 4%;
    width: 92%;
    color: #263a54;
    font-size: 20vw;
  }
  .layered-vial {
    top: 31%;
    left: 54%;
    height: 55%;
    max-width: 72%;
  }
  .story-copy {
    left: 6%;
    bottom: 15%;
    width: 88%;
  }
  .story-copy h1,
  .story-copy h2 { max-width: 14ch; font-size: 3.35rem; }
  .story-copy p { margin: 15px 0; font-size: 16px; line-height: 1.42; }
  .story-copy .button { min-height: 44px; padding: 10px 18px; font-size: 14px; }
  .story-detail,
  .story-finale { bottom: 16%; }
  .story-finale h2 { font-size: 2.9rem; }
  .story-controls {
    right: 6%;
    bottom: 10px;
    left: 6%;
    gap: 8px 12px;
    flex-wrap: wrap;
  }
  .scroll-cue { gap: 7px; font-size: 12px; }
  .motion-toggle { margin-left: auto; font-size: 12px; }
  .concept-note { width: 100%; margin-left: 0; font-size: 11px; }
  .story-progress { right: 6%; left: 6%; }
  .motion-active .vial-story { height: 390svh; }

  .identity-break,
  .identity-copy { min-height: 94svh; }
  .identity-word { bottom: 4%; font-size: 31vw; text-align: left; }
  .identity-object {
    top: -5%;
    right: -15%;
    height: 58%;
    max-width: 88%;
    opacity: .63;
  }
  .identity-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 22px;
    padding-bottom: 12svh;
  }
  .identity-copy h2 { max-width: 13ch; font-size: 3.55rem; }
  .identity-copy > div { align-self: auto; padding-bottom: 0; }
  .identity-copy p { max-width: 27ch; font-size: 1.2rem; }

  .collection-stage { padding: 28px 20px 20px; }
  .collection-top { align-items: start; gap: 14px; }
  .collection-top h2 { font-size: 2.8rem; white-space: nowrap; }
  .collection-top a { max-width: 95px; font-size: 13px; text-align: right; }
  .slide-ambient { top: 44%; font-size: 18vw; }
  .slide-products { gap: 8px; }
  .slide-product {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .slide-vial { width: 100%; height: 40svh; min-height: 270px; }
  .slide-copy { min-height: 135px; }
  .slide-product h3 {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    margin-bottom: 7px;
    font-size: 1.85rem;
  }
  .slide-product p { min-height: 42px; margin-bottom: 8px; font-size: 14px; line-height: 1.35; }
  .slide-product span { font-size: 14px; }
  .collection-bottom { align-items: end; margin-top: 14px; gap: 10px; }
  .collection-bottom p { max-width: 150px; font-size: 11px; }
  .slide-controls { gap: 9px; }
  .slide-controls button { width: 42px; height: 44px; }
  .slide-position { font-size: 13px; }
  .motion-active .collection-story { height: 260svh; }
  .motion-active .collection-stage { min-height: 620px; }

  .trace-stage,
  .motion-active .trace-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 72px 20px;
    overflow: visible;
  }
  .motion-active .trace-story { height: auto; }
  .trace-copy,
  .motion-active .trace-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .trace-ready,
  .motion-active .trace-ready { display: none; }
  .trace-copy h2 { font-size: 3.6rem; }
  .trace-copy p { margin: 18px 0; font-size: 17px; }
  .trace-object,
  .motion-active .trace-object {
    position: relative;
    top: auto;
    left: auto;
    height: 58svh;
    min-height: 440px;
    justify-self: center;
    transform: rotate(-4deg) !important;
  }
  .trace-code { width: 205px; }
  .trace-scan { display: none; }
  .trace-panel,
  .motion-active .trace-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .trace-panel h3 { font-size: 2.4rem; }
  .trace-foot { position: relative; right: auto; bottom: auto; left: auto; font-size: 12px; text-align: left; }

  .experience-faq { min-height: 0; padding: 72px 0; }
  .experience-faq .faq-grid { grid-template-columns: 1fr; gap: 34px; }
  .experience-faq .faq-grid > div:first-child { position: static; }
  .experience-faq h2 { font-size: 3.5rem; }
  .page-inicio .experience-faq .faq summary { min-height: 76px; padding: 21px 20px; font-size: 17px; }
  .page-inicio .experience-faq .faq p { padding: 0 20px 22px; font-size: 16px; }

  .closing-contact { min-height: 0; padding: 70px 0; }
  .contact-word { top: 2%; font-size: 29vw; text-align: left; }
  .page-inicio .closing-contact .contact-grid {
    min-height: 0;
    padding-top: 23vw;
    padding-bottom: 0;
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .closing-contact h2 { font-size: 3.6rem; }
  .closing-contact .contact-form { padding: 25px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-inicio * { scroll-behavior: auto !important; }
  .page-inicio .slide-vial img,
  .page-inicio .motion-toggle,
  .page-inicio .slide-controls button { transition: none; }
  .motion-active .vial-story,
  .motion-active .collection-story,
  .motion-active .trace-story { height: auto; }
  .motion-active .vial-stage,
  .motion-active .collection-stage,
  .motion-active .trace-stage { position: relative; top: auto; height: auto; }
  .motion-active .story-detail,
  .motion-active .story-finale,
  .motion-active .trace-ready { display: none; }
}