/* Normal document flow and autonomous entrance animations. */
/* Free scrolling: scene geometry is independent from scroll progress. */

/* The opening keeps its full-screen brand composition. */
#inicio.pro {
  position: relative;
  overflow: clip;
}

#inicio .pro__stage {
  position: relative;
  height: 100svh;
  min-height: 610px;
  overflow: clip;
}

#inicio .pro__hero {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

#inicio .wm {
  width: min(82vw, 76rem);
  margin-top: -14svh;
}

#inicio .card-rig {
  position: absolute;
  left: 76%;
  top: 78%;
}

#inicio .card-float {
  --cw: min(24vw, 25rem);
}

#inicio .pro__meta--tl {
  top: calc(var(--header-h) + 1.5rem);
}

/* The manifesto has a real text column and a separate product surface. */
#manifesto {
  position: relative;
  isolation: isolate;
}

#manifesto .pro__mist {
  position: relative;
  inset: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(35px, 6vw, 85px);
  min-height: 80svh;
  padding: clamp(90px, 10vw, 140px) var(--container-pad);
  overflow: clip;
  clip-path: none;
}

#manifesto .pro__bigk {
  position: absolute;
  top: -8%;
  right: -12%;
  left: auto;
  z-index: 0;
  width: auto;
  height: 120%;
  max-width: none;
  opacity: .13;
  pointer-events: none;
}

#manifesto .pro__manifesto {
  position: relative;
  inset: auto;
  z-index: 1;
  width: auto;
  max-width: 43rem;
  transform: none;
}

#manifesto .pro__title {
  margin-bottom: 1.6rem;
}

#manifesto .pro__lead {
  max-width: 38rem;
}

#manifesto .card-rig {
  position: relative;
  inset: auto;
  z-index: 1;
  justify-self: center;
  width: min(100%, 500px);
  height: auto;
  perspective: 1600px;
}

#manifesto .card-drop,
#manifesto .card-float {
  position: relative;
  inset: auto;
  width: var(--cw);
  max-width: 100%;
  margin-inline: auto;
  --cw: clamp(280px, 31vw, 500px);
}

#manifesto .card-shadow {
  left: 50%;
  top: 100%;
}

/* The symbol shares a normal grid row with its introduction. */
section#simbolo {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(35px, 5vw, 75px);
  min-height: 80svh;
  padding: clamp(85px, 9vw, 130px) var(--container-pad);
  overflow: clip;
}

section#simbolo .pro__night {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: none;
}

section#simbolo .pro__symtxt {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: 37rem;
  color: var(--night);
  visibility: visible;
  transform: none;
}

section#simbolo .pro__symtxt .lead {
  display: block;
  max-width: 33rem;
}

section#simbolo .sym-cam {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: clamp(330px, 37vw, 560px);
  min-width: 0;
}

section#simbolo .sym {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The responsive demonstration grows with the copy and the phone. */
.ap__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(35px, 5vw, 75px);
  height: auto;
  min-height: 80svh;
  padding: clamp(85px, 9vw, 130px) var(--container-pad);
  overflow: clip;
}

.ap__txt.wrap {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  margin: 0;
  transform: none;
}

.ap__txt .display {
  max-width: 13ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.ap__notes {
  width: auto;
  max-width: 32rem;
}

.ap__notes li,
.ap__notes li:not(.is-on) {
  display: flex;
}

.ap__notes li:not(.is-on) {
  opacity: .65;
}

.ap__rig {
  position: relative;
  inset: auto;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(var(--flow-phone-width) * 2.3);
  min-width: 0;
  perspective: 1700px;
  --flow-phone-width: min(19rem, 28vw);
}

.ap__tilt {
  position: relative;
  inset: auto;
  width: 0;
  height: 0;
}

.ap__rig .phone {
  --pw: var(--flow-phone-width);
}

.ap__shadow {
  left: 50%;
  top: 88%;
}

.ap__bigk {
  z-index: 0;
  opacity: .12;
  pointer-events: none;
}

/* The assembly diagram reserves space before its explanatory copy. */
.stk__stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(300px, auto) auto;
  align-content: center;
  gap: 32px;
  height: auto;
  min-height: 80svh;
  padding: clamp(75px, 8vw, 110px) var(--container-pad);
  overflow: visible;
}

.stk__stage > .wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.stk__svg {
  width: min(100%, 1080px);
  height: auto;
  min-height: 300px;
  max-height: 64svh;
  aspect-ratio: 1260 / 700;
}

.stk__txt {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(25px, 4vw, 55px);
}

/* Continuous project loops remain, without a sticky or oversized wrapper. */
.vs__grid {
  min-height: 0;
  align-items: start;
  padding-block: clamp(75px, 8vw, 110px);
}

.vs__text {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  padding-block: 0;
}

.vs__text .sec-head {
  position: static;
}

.vs__title {
  margin-top: 32px;
}

.vs__lead {
  max-width: 34ch;
}

.vloop {
  position: relative;
  top: auto;
  height: clamp(500px, 80svh, 850px);
}

@media (max-width: 1100px) and (min-width: 861px) {
  #manifesto .pro__mist {
    gap: 35px;
  }

  #manifesto .pro__manifesto .display {
    font-size: clamp(2rem, 4.1vw, 3.2rem);
  }

  .ap__txt .display {
    font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  }
}

@media (max-width: 860px) {
  #inicio .pro__stage {
    min-height: 620px;
  }

  #inicio .wm {
    width: 86vw;
    margin-top: -27svh;
  }

  #inicio .card-rig {
    left: 50%;
    top: 65%;
  }

  #inicio .card-float {
    --cw: min(68vw, 24rem);
  }

  #inicio .pro__meta--tl {
    max-width: calc(100% - var(--gutter) * 2);
  }

  #manifesto .pro__mist {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
    min-height: 0;
    padding: 95px var(--gutter) 80px;
  }

  #manifesto .pro__manifesto {
    max-width: 44rem;
  }

  #manifesto .pro__manifesto .display {
    font-size: clamp(1.9rem, 7.8vw, 3rem);
  }

  #manifesto .pro__manifesto .lead {
    max-width: 48ch;
    font-size: 1rem;
  }

  #manifesto .card-rig {
    width: min(100%, 430px);
    margin-top: 8px;
  }

  #manifesto .card-drop,
  #manifesto .card-float {
    --cw: min(82vw, 430px);
  }

  #manifesto .pro__bigk {
    top: 24%;
    right: -30%;
    height: 90%;
    opacity: .08;
  }

  section#simbolo {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    min-height: 0;
    padding: 85px var(--gutter) 65px;
  }

  section#simbolo .pro__symtxt {
    grid-column: 1;
    grid-row: 1;
    max-width: 44rem;
  }

  section#simbolo .pro__symtxt .display {
    font-size: clamp(2rem, 8.5vw, 3rem);
  }

  section#simbolo .pro__symtxt .lead {
    max-width: 48ch;
    font-size: 1rem;
  }

  section#simbolo .sym-cam {
    grid-column: 1;
    grid-row: 2;
    height: clamp(300px, 78vw, 480px);
  }

  .ap__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    min-height: 0;
    padding: 85px var(--gutter) 70px;
  }

  .ap__txt .display {
    max-width: 18ch;
    font-size: clamp(2rem, 8.5vw, 3rem);
  }

  .ap__notes {
    width: auto;
    margin-top: 1.8rem;
  }

  .ap__notes li,
  .ap__notes li:not(.is-on) {
    display: flex;
    padding-block: .9rem;
  }

  .ap__rig {
    --flow-phone-width: min(60vw, 19rem);
  }

  .stk__stage {
    min-height: 0;
    gap: 25px;
    padding: 75px var(--gutter);
  }

  .stk__svg {
    width: 100%;
    min-height: 285px;
    max-height: none;
  }

  .stk__txt {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .stk__txt .lead {
    justify-self: start;
    max-width: 42rem;
    font-size: 1rem;
  }

  .vs__grid {
    min-height: 0;
    row-gap: 35px;
    padding-block: 75px;
  }

  .vs__text {
    position: relative;
    height: auto;
    padding: 0;
  }

  .vs__title {
    margin-top: 28px;
  }

  .vloop {
    position: relative;
    height: clamp(450px, 75svh, 700px);
  }
}

@media (max-width: 540px) {
  #inicio .pro__meta {
    font-size: .57rem;
    line-height: 1.5;
  }

  #inicio .pro__cue {
    font-size: .55rem;
  }

  #inicio .pro__meta--bl {
    max-width: 63%;
  }
}

@media (min-width: 861px) and (max-height: 600px) {
  #inicio .pro__stage {
    min-height: 640px;
  }

  #inicio .wm {
    width: min(74vw, 950px);
    margin-top: -110px;
  }

  #inicio .card-rig {
    top: 78%;
  }

  #inicio .card-float {
    --cw: min(23vw, 340px);
  }
}

/* Native project gallery: the document always keeps its vertical scroll. */
.ga__stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.ga__head { flex: none; }
.ga__controls {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: 1.15rem;
}
.ga__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line-mist-strong, #a78bfa55);
  border-radius: 50%;
  background: transparent;
  color: var(--mist, #f2f1f7);
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.ga__arrow svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ga__arrow--previous svg { transform: rotate(180deg); }
.ga__arrow:hover:not(:disabled) { background: #a78bfa; color: #0a0a12; }
.ga__arrow:disabled { opacity: .3; cursor: default; }
.ga__arrow:focus-visible { outline: 2px solid #22d3ee; outline-offset: 4px; }
.ga__track {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  width: 100%;
  max-width: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: clamp(2rem, 4vw, 4rem) var(--container-pad) clamp(4rem, 7vw, 6rem);
  scroll-padding-inline: var(--container-pad);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  will-change: auto;
  transform: none;
  cursor: grab;
}
.ga__track::-webkit-scrollbar { display: none; }
.ga__track:focus-visible { outline: 1px solid #a78bfa; outline-offset: -2px; }
.ga__track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.ga__track.is-autoplaying { scroll-snap-type: none; scroll-behavior: auto; }
.ga__intro {
  flex: 0 0 min(36rem, 80vw);
  width: min(36rem, 80vw);
  opacity: 1;
  visibility: visible;
  scroll-snap-align: start;
}
.ga__intro .ga__drag { pointer-events: none; }
.ga__item {
  flex: 0 0 min(40vw, 35rem);
  width: min(40vw, 35rem);
  scroll-snap-align: start;
}
.ga__item--tall { flex-basis: min(34vw, 29rem); width: min(34vw, 29rem); }
.ga__item:nth-child(odd) { transform: translateY(2rem); }
.ga__item--sq .ga__frame { width: 100%; height: auto; aspect-ratio: 1; }
.ga__item--tall .ga__frame { width: 100%; height: auto; aspect-ratio: 1500 / 1872; }
.ga__frame img { left: -8%; width: 116%; }
.ga__item figcaption { line-height: 1.5; }
.ga__end { min-width: 10rem; margin-right: var(--container-pad); }
.ga__progress { flex: none; margin-bottom: 0; }
@media (max-width: 767px) {
  .ga__stage { padding-top: 3rem; }
  .ga__controls { margin-top: .85rem; }
  .ga__track { padding-top: 1.75rem; padding-bottom: 3.5rem; gap: 1.1rem; }
  .ga__intro { flex-basis: min(82vw, 32rem); width: min(82vw, 32rem); padding-right: .5rem; }
  .ga__intro .lead { margin-top: 1rem; }
  .ga__item { flex-basis: min(78vw, 25rem); width: min(78vw, 25rem); }
  .ga__item--tall { flex-basis: min(66vw, 22rem); width: min(66vw, 22rem); }
  .ga__item:nth-child(odd) { transform: translateY(1rem); }
  .ga__end { width: 42vw; min-width: 9rem; margin-left: .5rem; }
  .ga__end .label { padding-inline: 1rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ga__track { scroll-behavior: auto; }
  .ga__arrow { transition: none; }
}

.ld{display:none} html.is-intro .ld{display:block} html.intro-skipped .ld{display:none} .vloop__col{touch-action:pan-y} section[id]{scroll-margin-top:100px}

html.motion-fallback section#simbolo{display:block} html.motion-fallback section#simbolo .pro__symtxt{color:var(--night)}