.v2-cinematic {
  position: relative;
  z-index: 1;
  min-height: 520vh;
  isolation: isolate;
  background: #030207;
}

.v2-universe-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

body.page-ready .v2-universe-canvas { opacity: 1; }
body.cinematic-out .v2-universe-canvas { opacity: 0; }

.v2-cinematic-overlay,
.v2-cinematic-noise,
.v2-cinematic-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 800ms ease;
}

.v2-cinematic-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--scene-rgb), .18) 0 9%, rgba(var(--scene-rgb-soft), .11) 18%, transparent 38%),
    radial-gradient(circle at 50% 45%, rgba(var(--scene-rgb), .08) 0 14%, transparent 36%),
    radial-gradient(circle at 50% 46%, transparent 0 18%, rgba(3,2,7,.12) 48%, rgba(3,2,7,.82) 100%),
    linear-gradient(180deg, rgba(3,2,7,.16), transparent 30%, transparent 68%, rgba(3,2,7,.40));
}

.v2-cinematic-noise {
  z-index: 1;
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.v2-cinematic-vignette {
  box-shadow: inset 0 0 180px 40px rgba(0,0,0,.48);
}

body.cinematic-out .v2-cinematic-overlay,
body.cinematic-out .v2-cinematic-noise,
body.cinematic-out .v2-cinematic-vignette { opacity: 0; }

.v2-hero {
  position: relative;
  z-index: 2;
  min-height: 112svh;
  display: grid;
  place-items: center;
  overflow: clip;
  scroll-margin-top: 0;
}

.v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--scene-rgb), .18), rgba(var(--scene-rgb-soft), .10) 16%, transparent 35%),
    linear-gradient(180deg, transparent 62%, rgba(3,2,7,.58) 100%);
}

.v2-hero-core {
  position: relative;
  z-index: 3;
  width: min(1100px, calc(100vw - 40px));
  display: grid;
  place-items: center;
  text-align: center;
  transform-origin: 50% 38%;
  transform:
    translate3d(0, calc(var(--hero-translate, 0px) - clamp(78px, 11vh, 130px)), 0)
    scale(var(--brand-scale, 1));
  opacity: var(--brand-opacity, 1);
  filter: blur(var(--brand-blur, 0px));
  will-change: transform, opacity, filter;
}

.v2-hero-emblem {
  position: relative;
  width: clamp(126px, 12vw, 188px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(12px);
  transform: scale(.84);
}

.v2-hero-emblem::before,
.v2-hero-emblem::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(201, 183, 255, .10);
  opacity: .55;
  transform: scale(.88);
}

.v2-hero-emblem::after {
  inset: -25%;
  border-color: rgba(255, 255, 255, .10);
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, rgba(255,255,255,.055) 25%, rgba(var(--scene-rgb), .055) 48%, transparent 70%);
  box-shadow:
    0 0 36px rgba(255,255,255,.10),
    0 0 88px rgba(var(--scene-rgb), .14);
}

.v2-hero-emblem img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.96))
    drop-shadow(0 0 10px rgba(255,255,255,.50))
    drop-shadow(0 0 24px rgba(255,255,255,.20))
    drop-shadow(0 0 58px rgba(var(--scene-rgb), .24));
  will-change: filter, transform;
}

body.page-ready .v2-hero-emblem img {
  animation: v2-logo-afterglow 5.8s 1.85s ease-in-out infinite;
}

@keyframes v2-logo-afterglow {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.92))
      drop-shadow(0 0 9px rgba(255,255,255,.42))
      drop-shadow(0 0 22px rgba(255,255,255,.16))
      drop-shadow(0 0 52px rgba(var(--scene-rgb), .20));
  }
  50% {
    transform: translateY(-3px) scale(1.018);
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,1))
      drop-shadow(0 0 14px rgba(255,255,255,.64))
      drop-shadow(0 0 30px rgba(255,255,255,.25))
      drop-shadow(0 0 72px rgba(var(--scene-rgb), .34));
  }
}

.v2-hero-title {
  margin: clamp(20px, 3vw, 34px) 0 0;
  display: grid;
  gap: .035em;
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(3rem, 8.8vw, 8.2rem);
  font-weight: 560;
  line-height: .94;
  letter-spacing: -.062em;
  text-wrap: balance;
  padding-inline: .04em;
  padding-bottom: .10em;
  overflow: visible;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.v2-hero-title span {
  display: block;
  opacity: 0;
  filter: blur(18px);
  transform: translateY(30px);
  clip-path: inset(0 0 100% 0);
  padding-bottom: .08em;
  overflow: visible;
}

.v2-hero-title .v2-title-sub {
  font-size: .49em;
  font-weight: 430;
  letter-spacing: .19em;
  line-height: 1.04;
  text-transform: uppercase;
  color: rgba(246, 242, 255, .76);
}

body.page-ready .v2-hero-emblem {
  animation: v2-emblem-enter 1.55s .15s cubic-bezier(.2,.85,.2,1) forwards;
}

body.page-ready .v2-hero-title span:first-child {
  animation: v2-title-enter 1.25s .68s cubic-bezier(.2,.82,.2,1) forwards;
}

body.page-ready .v2-hero-title span:last-child {
  animation: v2-title-enter 1.3s .86s cubic-bezier(.2,.82,.2,1) forwards;
}

@keyframes v2-emblem-enter {
  0% { opacity: 0; filter: blur(16px); transform: scale(.76); }
  56% { opacity: .86; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes v2-title-enter {
  from { opacity: 0; filter: blur(18px); transform: translateY(30px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); clip-path: inset(0 0 0 0); }
}

.v2-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 58px);
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: rgba(255,255,255,.11);
  transform: translateX(-50%);
  opacity: calc(.72 - var(--hero-exit));
}

.v2-scroll-cue span {
  display: block;
  width: 100%;
  height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(214, 200, 255, .92), transparent);
  animation: v2-scroll-cue 2.2s ease-in-out infinite;
}

@keyframes v2-scroll-cue {
  from { transform: translateY(-120%); }
  to { transform: translateY(310%); }
}

.v2-hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(var(--scene-rgb), .20) 0%, rgba(var(--scene-rgb-soft), .12) 15%, rgba(var(--scene-rgb-deep), .06) 28%, transparent 50%),
    radial-gradient(ellipse at 50% 42%, rgba(var(--scene-rgb), .09) 0%, transparent 34%);
}

.v2-hero-atmosphere::before,
.v2-hero-atmosphere::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 49%;
  border: 1px solid rgba(189, 168, 248, .06);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.v2-hero-atmosphere::before { width: min(74vw, 980px); aspect-ratio: 1; }
.v2-hero-atmosphere::after { width: min(48vw, 640px); aspect-ratio: 1; }

.v2-hero-constellation {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
  color: rgb(var(--scene-rgb));
  opacity: var(--constellation-opacity, 1);
  perspective: 1400px;
}

.v2-hero-constellation::before,
.v2-hero-constellation::after {
  content: "";
  position: absolute;
  inset: 10% 16%;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}

.v2-hero-constellation::before {
  background: radial-gradient(circle, rgba(179,155,255,.28), transparent 62%);
  filter: blur(22px);
  opacity: calc(.36 + var(--hero-collapse) * .28);
  transform: translate3d(0, 0, -1px) scale(calc(1 + var(--hero-collapse) * .12));
}

.v2-hero-constellation::after {
  inset: 24% 28%;
  border: 1px solid rgba(205, 194, 255, .16);
  box-shadow: 0 0 30px rgba(171,146,255,.12), inset 0 0 26px rgba(171,146,255,.04);
  opacity: calc(.22 + var(--hero-collapse) * .22);
  transform: rotate(-7deg) scale(calc(1 - var(--hero-collapse) * .08));
}

.v2-hero-constellation svg {
  width: min(900px, 86vw);
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
  transform:
    translate3d(var(--constellation-x, 0px), calc(-11% + var(--constellation-y, 0px)), calc(var(--constellation-depth, 0px) + var(--constellation-pointer-z, 0px)))
    rotateZ(var(--constellation-rotate, 0deg))
    rotateX(calc(var(--constellation-tilt-x, 0deg) + var(--constellation-pointer-x, 0deg)))
    rotateY(calc(var(--constellation-tilt-y, 0deg) + var(--constellation-pointer-y, 0deg)))
    scale(var(--constellation-scale, 1));
  filter:
    drop-shadow(0 0 14px rgba(var(--scene-rgb), .20))
    drop-shadow(0 0 42px rgba(var(--scene-rgb-soft), .18));
  will-change: transform, opacity, filter;
}

.v2-hero-constellation .v2-lyra-figure {
  transform-origin: 510px 300px;
}

.v2-hero-constellation .v2-constellation-line {
  stroke: rgba(var(--scene-rgb), .82);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.v2-hero-constellation .v2-constellation-line--vega {
  stroke: rgba(255,255,255,.74);
  stroke-width: 1.85;
}

.v2-hero-constellation .v2-constellation-trail {
  stroke: rgba(255,255,255,.10);
  stroke-width: .9;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.v2-hero-constellation .v2-constellation-line,
.v2-hero-constellation .v2-constellation-trail {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

body.page-ready .v2-hero-constellation .v2-constellation-line {
  animation: v2-constellation-draw 1.85s .72s cubic-bezier(.2,.82,.2,1) forwards;
}

body.page-ready .v2-hero-constellation .v2-constellation-trail {
  animation: v2-constellation-draw 2.2s 1.0s cubic-bezier(.2,.82,.2,1) forwards;
}

@keyframes v2-constellation-draw {
  to { stroke-dashoffset: 0; }
}

.v2-hero-constellation .v2-constellation-star-halo {
  fill: url(#lyraStarCore);
  opacity: .62;
}

.v2-hero-constellation .v2-constellation-star-halo--vega {
  opacity: .94;
}

.v2-hero-constellation .v2-constellation-star {
  fill: rgba(251,249,255,.96);
  stroke: rgba(var(--scene-rgb), .82);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.v2-hero-constellation .v2-constellation-star,
.v2-hero-constellation .v2-constellation-star-halo,
.v2-hero-constellation .v2-constellation-star-flare {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.12);
}

body.page-ready .v2-hero-constellation .v2-constellation-star,
body.page-ready .v2-hero-constellation .v2-constellation-star-halo,
body.page-ready .v2-hero-constellation .v2-constellation-star-flare {
  animation: v2-star-ignite 1.15s 1.15s cubic-bezier(.18,.9,.24,1.16) forwards;
}

body.page-ready .v2-hero-constellation .v2-constellation-star:nth-of-type(2n),
body.page-ready .v2-hero-constellation .v2-constellation-star-halo:nth-of-type(2n) {
  animation-delay: 1.32s;
}

@keyframes v2-star-ignite {
  0% { opacity: 0; transform: scale(.12); filter: blur(8px); }
  60% { opacity: 1; transform: scale(1.28); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.v2-hero-constellation .v2-constellation-star--vega {
  fill: #fff;
  stroke: rgba(255,255,255,.92);
  stroke-width: 1.5;
}

.v2-hero-constellation .v2-constellation-star--minor {
  fill: rgba(244,239,255,.82);
  stroke-width: .8;
}

.v2-hero-constellation .v2-constellation-star-flare {
  fill: #fff;
  opacity: .95;
}

body.page-ready .v2-hero-constellation svg {
  animation: v2-constellation-enter 2.25s .18s cubic-bezier(.18,.82,.2,1) both;
}

body.page-ready .v2-hero-constellation .v2-lyra-figure {
  animation: v2-lyra-drift 10s 2.45s ease-in-out infinite;
}

@keyframes v2-constellation-enter {
  0% { opacity: 0; filter: blur(22px) brightness(.4); }
  45% { opacity: .62; filter: blur(5px) brightness(.92); }
  100% { opacity: 1; filter: blur(0) brightness(1); }
}

body.page-ready .v2-hero-constellation .v2-constellation-star-halo--vega {
  animation: v2-vega-pulse 4.8s 1.65s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes v2-lyra-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.2deg); }
  50% { transform: translate3d(5px, 7px, 0) rotate(.8deg); }
}

@keyframes v2-vega-pulse {
  0%, 100% { transform: scale(.90); opacity: .70; }
  50% { transform: scale(1.18); opacity: 1; }
}

@media (max-width: 760px) {
  .v2-hero { min-height: 108svh; }
  .v2-hero-core {
    width: calc(100vw - 28px);
    transform:
      translateY(calc(var(--hero-translate, 0px) - clamp(42px, 8vh, 76px)))
      scale(var(--hero-scale, 1));
  }
  .v2-hero-title { font-size: clamp(3.15rem, 16vw, 5.8rem); line-height: .96; letter-spacing: -.055em; padding-bottom: .12em; }
  .v2-hero-title .v2-title-sub { font-size: .35em; line-height: 1.06; letter-spacing: .16em; margin-top: .36em; }
  .v2-hero-emblem { width: clamp(112px, 34vw, 152px); }
  .v2-hero-atmosphere::before { width: 122vw; }
  .v2-hero-atmosphere::after { width: 82vw; }
  .v2-hero-constellation svg { width: 118vw; transform: translate3d(var(--constellation-x, 0px), calc(-8% + var(--constellation-y, 0px)), var(--constellation-depth, 0px)) rotateZ(var(--constellation-rotate, 0deg)) rotateX(var(--constellation-pointer-x, 0deg)) rotateY(var(--constellation-pointer-y, 0deg)) scale(var(--constellation-scale, 1)); opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-ready .v2-hero-emblem img,
  body.page-ready .v2-hero-constellation .v2-lyra-figure,
  body.page-ready .v2-hero-constellation .v2-constellation-star-halo--vega,
  body.page-ready .v2-hero-constellation svg,
  body.page-ready .v2-hero-constellation .v2-constellation-line,
  body.page-ready .v2-hero-constellation .v2-constellation-trail,
  body.page-ready .v2-hero-constellation .v2-constellation-star,
  body.page-ready .v2-hero-constellation .v2-constellation-star-halo,
  body.page-ready .v2-hero-constellation .v2-constellation-star-flare {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}

html.no-js .v2-hero-emblem,
html.no-js .v2-hero-title span { opacity: 1; filter: none; transform: none; clip-path: none; }


.v2-hero-core::before,
.v2-hero-core::after {
  content: "";
  position: absolute;
  inset: 4% 12%;
  z-index: -1;
  pointer-events: none;
  opacity: calc(var(--hero-collapse, 0) * (1 - var(--hero-collapse, 0)) * 4);
  background:
    radial-gradient(circle at 20% 42%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 60%, rgba(var(--scene-rgb),.9) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 30%, rgba(255,255,255,.75) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 72% 54%, rgba(var(--scene-rgb),.8) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 38%, rgba(255,255,255,.9) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 8px rgba(var(--scene-rgb),.7));
  transform: scale(calc(.8 + var(--hero-collapse, 0) * .5));
}

.v2-hero-core::after {
  inset: 20% 5%;
  transform: rotate(17deg) scale(calc(.74 + var(--hero-collapse, 0) * .62));
}

/* Prueba 10: universo persistente e ingreso más cinematográfico */
body.cinematic-out .v2-universe-canvas {
  opacity: .92;
  filter: saturate(1.22) brightness(.94);
}

body.cinematic-out .v2-cinematic-overlay {
  opacity: .34;
}

body.cinematic-out .v2-cinematic-noise {
  opacity: .025;
}

body.cinematic-out .v2-cinematic-vignette {
  opacity: .42;
}

.v2-hero-atmosphere::before {
  transform: scale(.72);
  opacity: 0;
}

body.page-ready .v2-hero-atmosphere::before {
  animation: v2-galaxy-bloom 2.6s .08s cubic-bezier(.18,.84,.2,1) forwards;
}

@keyframes v2-galaxy-bloom {
  0% { transform: scale(.62) rotate(-5deg); opacity: 0; filter: blur(24px) saturate(.7); }
  48% { transform: scale(1.08) rotate(1deg); opacity: .86; filter: blur(7px) saturate(1.25); }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0) saturate(1); }
}

.v2-hero-constellation {
  transform-style: preserve-3d;
}

.v2-hero-constellation svg {
  transform-style: preserve-3d;
  will-change: transform, filter;
}

body.page-ready .v2-hero-constellation svg {
  animation:
    v2-constellation-enter-10 2.15s .04s cubic-bezier(.16,.86,.22,1) both,
    v2-constellation-float-3d 8.4s 2.3s ease-in-out infinite;
}

@keyframes v2-constellation-enter-10 {
  0% {
    opacity: 0;
    filter: blur(28px) brightness(.3) saturate(.6);
    transform: perspective(1000px) translateZ(-130px) rotateX(22deg) rotateY(-16deg) scale(.68);
  }
  42% {
    opacity: .9;
    filter: blur(5px) brightness(1.35) saturate(1.3);
    transform: perspective(1000px) translateZ(28px) rotateX(-3deg) rotateY(4deg) scale(1.08);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1) saturate(1);
    transform: perspective(1000px) translateZ(0) rotateX(0) rotateY(0) scale(1);
  }
}

@keyframes v2-constellation-float-3d {
  0%, 100% {
    transform: perspective(1000px) translate3d(0,0,0) rotateX(1deg) rotateY(-2deg) scale(1);
  }
  33% {
    transform: perspective(1000px) translate3d(4px,-5px,12px) rotateX(-3deg) rotateY(4deg) scale(1.012);
  }
  66% {
    transform: perspective(1000px) translate3d(-4px,3px,7px) rotateX(3deg) rotateY(-5deg) scale(.997);
  }
}

body.is-scrolling .v2-hero-constellation svg,
body.is-scrolling .v2-hero-emblem img,
body.is-scrolling .project-world::before {
  animation-play-state: paused !important;
}

body.page-ready .v2-hero-constellation .v2-constellation-line {
  animation: v2-constellation-draw-10 2.05s .18s cubic-bezier(.16,.84,.2,1) forwards;
}

body.page-ready .v2-hero-constellation .v2-constellation-trail {
  animation: v2-constellation-draw-10 2.35s .34s cubic-bezier(.16,.84,.2,1) forwards;
}

@keyframes v2-constellation-draw-10 {
  0% { stroke-dashoffset: 900; opacity: 0; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  55% { opacity: 1; filter: drop-shadow(0 0 14px rgba(211,197,255,.45)); }
  100% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 8px rgba(175,150,255,.22)); }
}

body.page-ready .v2-hero-constellation .v2-constellation-star,
body.page-ready .v2-hero-constellation .v2-constellation-star-halo,
body.page-ready .v2-hero-constellation .v2-constellation-star-flare {
  animation: v2-star-ignite-10 1.35s .62s cubic-bezier(.16,.9,.22,1.2) forwards;
}

@keyframes v2-star-ignite-10 {
  0% { opacity: 0; transform: scale(.08); filter: blur(12px) brightness(.5); }
  55% { opacity: 1; transform: scale(1.55); filter: blur(1px) brightness(1.9); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

body.page-ready .v2-hero-emblem {
  animation: v2-emblem-enter 1.5s .75s cubic-bezier(.2,.85,.2,1) forwards;
}

body.page-ready .v2-hero-title span:first-child {
  animation: v2-title-enter 1.18s 1.12s cubic-bezier(.2,.82,.2,1) forwards;
}

body.page-ready .v2-hero-title span:last-child {
  animation: v2-title-enter 1.22s 1.30s cubic-bezier(.2,.82,.2,1) forwards;
}


/* Mobile Safari / embedded browser stability */
@media (max-width: 820px), (pointer: coarse) {
  .v2-cinematic-noise { display: none; }
  .v2-cinematic-vignette { box-shadow: inset 0 0 90px 20px rgba(0,0,0,.38); }
  .v2-cinematic-overlay { background:
    radial-gradient(circle at 50% 42%, rgba(var(--scene-rgb), .14) 0 9%, rgba(var(--scene-rgb-soft), .08) 18%, transparent 40%),
    radial-gradient(circle at 50% 46%, transparent 0 18%, rgba(3,2,7,.10) 50%, rgba(3,2,7,.72) 100%);
  }
}

html.mobile-safe-universe .v2-universe-canvas {
  image-rendering: auto;
}


@media (max-width: 820px) and (pointer: coarse) {
  .v2-universe-canvas {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: strict;
    will-change: auto;
  }
  .v2-cinematic-overlay,
  .v2-cinematic-vignette {
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* v1.10: compositor-only mobile cosmos. The masks are tiny static assets;
   only transform/opacity are animated, so no extra canvas or per-star JS work. */
.v2-cosmos-texture {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) {
  .v2-cosmos-texture {
    position: fixed;
    inset: -12%;
    z-index: 1;
    display: block;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .v2-cosmos-texture::before,
  .v2-cosmos-texture::after,
  .v2-cosmos-texture > span {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    background-color: rgb(var(--scene-rgb));
    transform: translate3d(0,0,0);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
  }

  .v2-cosmos-texture::before {
    opacity: .34;
    will-change: transform;
    -webkit-mask-image: url('../../img/optimized/cosmos-stars-mask.png');
    mask-image: url('../../img/optimized/cosmos-stars-mask.png');
    -webkit-mask-size: 430px 430px;
    mask-size: 430px 430px;
    animation: v2-cosmos-stars-drift 96s linear infinite;
  }

  .v2-cosmos-texture > span {
    opacity: .15;
    background-color: rgba(245,242,255,.92);
    -webkit-mask-image: url('../../img/optimized/cosmos-stars-mask.png');
    mask-image: url('../../img/optimized/cosmos-stars-mask.png');
    -webkit-mask-size: 690px 690px;
    mask-size: 690px 690px;
    animation: none;
  }

  .v2-cosmos-texture::after {
    inset: 6% -12% -8%;
    will-change: transform, opacity;
    opacity: .15;
    -webkit-mask-image: url('../../img/optimized/cosmos-nebula-mask.png');
    mask-image: url('../../img/optimized/cosmos-nebula-mask.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: min(135vw, 980px) min(135vw, 980px);
    mask-size: min(135vw, 980px) min(135vw, 980px);
    animation: v2-cosmos-nebula-breathe 28s ease-in-out infinite;
  }

  body.is-scrolling .v2-cosmos-texture::before,
  body.is-scrolling .v2-cosmos-texture::after,
  body.is-scrolling .v2-cosmos-texture > span,
  body.is-menu-open .v2-cosmos-texture::before,
  body.is-menu-open .v2-cosmos-texture::after,
  body.is-menu-open .v2-cosmos-texture > span {
    animation-play-state: paused;
  }
}

@keyframes v2-cosmos-stars-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0); }
  to { transform: translate3d(8%, 5%, 0); }
}

@keyframes v2-cosmos-stars-drift-soft {
  from { transform: translate3d(6%, 2%, 0) scale(1.02); }
  to { transform: translate3d(-5%, -4%, 0) scale(1.02); }
}

@keyframes v2-cosmos-nebula-breathe {
  0%, 100% { transform: translate3d(-2%, 1%, 0) scale(.98); opacity: .11; }
  50% { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-cosmos-texture::before,
  .v2-cosmos-texture::after,
  .v2-cosmos-texture > span {
    animation: none !important;
  }
}

/* v1.11: low-cost orbital depth layer. Pure composited transforms; no extra canvas. */
.v2-orbit-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  perspective: 1100px;
  opacity: .82;
}

.v2-orbit-field span {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(82vmax, 1500px);
  aspect-ratio: 1;
  border: 1px solid rgb(var(--scene-rgb) / .105);
  border-radius: 50%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}

.v2-orbit-field span:nth-child(1) {
  transform: translate3d(-50%, -50%, 0) rotateX(68deg) rotateZ(0deg) scaleX(1.08);
  animation: v2-orbit-drift-a 54s linear infinite;
}

.v2-orbit-field span:nth-child(2) {
  width: min(58vmax, 1080px);
  border-color: rgb(var(--scene-rgb-soft) / .115);
  transform: translate3d(-50%, -50%, 0) rotateX(62deg) rotateY(16deg) rotateZ(36deg) scaleX(.92);
  animation: v2-orbit-drift-b 68s linear infinite reverse;
}

.v2-orbit-field span:nth-child(3) {
  width: min(38vmax, 720px);
  border-color: rgb(var(--scene-rgb) / .14);
  box-shadow: 0 0 34px rgb(var(--scene-rgb) / .025);
  transform: translate3d(-50%, -50%, 0) rotateX(73deg) rotateY(-12deg) rotateZ(82deg) scaleX(1.18);
  animation: v2-orbit-drift-c 46s linear infinite;
}

@keyframes v2-orbit-drift-a {
  to { transform: translate3d(-50%, -50%, 0) rotateX(68deg) rotateZ(360deg) scaleX(1.08); }
}
@keyframes v2-orbit-drift-b {
  to { transform: translate3d(-50%, -50%, 0) rotateX(62deg) rotateY(16deg) rotateZ(396deg) scaleX(.92); }
}
@keyframes v2-orbit-drift-c {
  to { transform: translate3d(-50%, -50%, 0) rotateX(73deg) rotateY(-12deg) rotateZ(442deg) scaleX(1.18); }
}

body.is-scrolling .v2-orbit-field span,
body.is-menu-open .v2-orbit-field span,
html.visuals-paused .v2-orbit-field span {
  animation-play-state: paused;
}

@media (max-width: 900px), (pointer: coarse) {
  .v2-cinematic-overlay {
    background:
      radial-gradient(circle at 50% 42%, rgba(var(--scene-rgb), .075) 0 8%, rgba(var(--scene-rgb-soft), .045) 18%, transparent 42%),
      radial-gradient(circle at 50% 46%, transparent 0 18%, rgba(3,2,7,.14) 50%, rgba(3,2,7,.82) 100%);
  }

  .v2-cosmos-texture::before { opacity: .21; }
  .v2-cosmos-texture > span { opacity: .085; }
  .v2-cosmos-texture::after { opacity: .075; }

  .v2-orbit-field {
    opacity: .72;
    perspective: 820px;
  }
  .v2-orbit-field span {
    top: 47%;
    width: 112vw;
    border-color: rgb(var(--scene-rgb) / .105);
  }
  .v2-orbit-field span:nth-child(2) {
    width: 82vw;
    border-color: rgb(var(--scene-rgb-soft) / .105);
  }
  .v2-orbit-field span:nth-child(3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-orbit-field span { animation: none !important; }
}

/* v1.12 — parity visual: fondo móvil oscuro + órbitas visibles en móvil y escritorio. */
.v2-orbit-field {
  z-index: 1;
  opacity: .72;
}

.v2-orbit-field span {
  border-color: rgba(207, 193, 255, .16);
  box-shadow:
    0 0 18px rgba(151, 129, 232, .035),
    inset 0 0 18px rgba(151, 129, 232, .018);
}

.v2-orbit-field span:nth-child(2) {
  border-color: rgba(127, 197, 255, .13);
}

.v2-orbit-field span:nth-child(3) {
  border-color: rgba(211, 195, 255, .19);
  box-shadow: 0 0 34px rgba(160, 136, 239, .04);
}

@media (max-width: 900px), (pointer: coarse) {
  html.mobile-safe-universe .v2-universe-canvas {
    opacity: .96 !important;
  }

  body.v2-home::before {
    opacity: .12;
    background:
      radial-gradient(circle at 50% 18%, rgb(var(--scene-rgb) / .035), transparent 0 30%),
      radial-gradient(circle at 78% 72%, rgb(var(--scene-rgb-soft) / .025), transparent 0 36%);
  }

  .v2-cinematic-overlay {
    background:
      radial-gradient(circle at 50% 42%, rgba(var(--scene-rgb), .03) 0 8%, rgba(var(--scene-rgb-soft), .015) 18%, transparent 42%),
      radial-gradient(circle at 50% 46%, transparent 0 14%, rgba(2,1,6,.28) 46%, rgba(1,1,4,.94) 100%),
      linear-gradient(180deg, rgba(1,1,5,.16), transparent 42%, rgba(1,1,5,.42));
  }

  .v2-cinematic-vignette {
    box-shadow: inset 0 0 165px 42px rgba(0,0,0,.76);
  }

  .v2-hero::before {
    background:
      radial-gradient(circle at 50% 42%, rgba(var(--scene-rgb), .035), rgba(var(--scene-rgb-soft), .015) 16%, transparent 38%),
      linear-gradient(180deg, transparent 56%, rgba(1,1,5,.70) 100%);
  }

  .v2-hero-atmosphere {
    background:
      radial-gradient(ellipse at 50% 42%, rgba(var(--scene-rgb), .045) 0%, rgba(var(--scene-rgb-soft), .02) 16%, rgba(var(--scene-rgb-deep), .018) 30%, transparent 54%),
      radial-gradient(ellipse at 50% 42%, rgba(var(--scene-rgb), .014) 0%, transparent 38%);
  }

  .v2-cosmos-texture::before {
    opacity: .15;
    background-color: rgba(247,244,255,.94);
  }

  .v2-cosmos-texture > span {
    opacity: .035;
    background-color: rgb(var(--scene-rgb));
  }

  .v2-cosmos-texture::after {
    opacity: .028;
    background-color: rgb(var(--scene-rgb-soft));
  }

  .v2-orbit-field {
    opacity: .48;
    perspective: 920px;
  }

  .v2-orbit-field span {
    top: 47%;
    width: 116vw;
    border-color: rgba(211, 200, 255, .12);
  }

  .v2-orbit-field span:nth-child(2) {
    width: 84vw;
    border-color: rgba(124, 202, 255, .10);
  }

  .v2-orbit-field span:nth-child(3) {
    display: block;
    width: 58vw;
    border-color: rgba(219, 205, 255, .12);
  }
}

@media (max-width: 900px), (pointer: coarse) {
  .v2-cinematic,
  .v2-universe-canvas {
    background-color: #020105;
  }
}

/* v1.13 — mobile background fix: remove the full-screen color veil introduced
   by the masked cosmos layer while preserving the canvas stars and orbit depth. */
@media (max-width: 900px), (pointer: coarse) {
  .v2-cosmos-texture {
    display: none !important;
  }

  body.v2-home::before {
    opacity: 0 !important;
    background: none !important;
  }

  .v2-cinematic,
  .v2-universe-canvas {
    background-color: #020105 !important;
  }

  .v2-cinematic-overlay {
    opacity: 1 !important;
    background:
      radial-gradient(circle at 50% 43%, transparent 0 18%, rgba(2,1,6,.10) 44%, rgba(1,1,4,.78) 100%),
      linear-gradient(180deg, rgba(1,1,5,.08), transparent 36%, rgba(1,1,5,.30) 74%, rgba(1,1,4,.54)) !important;
  }

  .v2-cinematic-vignette {
    opacity: 1 !important;
    box-shadow: inset 0 0 170px 46px rgba(0,0,0,.76) !important;
  }

  .v2-hero::before {
    background: linear-gradient(180deg, transparent 54%, rgba(1,1,5,.64) 100%) !important;
  }

  .v2-hero-atmosphere {
    background: none !important;
  }

  .v2-hero-atmosphere::before,
  .v2-hero-atmosphere::after {
    opacity: .38;
  }
}

/* v1.14 — hybrid Three.js star layer for compact devices.
   It sits above the Canvas 2D universe and below all content/overlays. */
.v2-hybrid-stars-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: strict;
}

body.page-ready .v2-hybrid-stars-canvas {
  opacity: .82;
}

body.is-scrolling .v2-hybrid-stars-canvas {
  opacity: .72;
}

body.is-menu-open .v2-hybrid-stars-canvas {
  opacity: .30;
}

html.visuals-paused .v2-hybrid-stars-canvas {
  opacity: .38;
}

@media (min-width: 901px) and (pointer: fine) {
  .v2-hybrid-stars-canvas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hybrid-stars-canvas { display: none !important; }
}