:root {
  --stage-width: 1080;
  --stage-height: 1920;
  --scale: 1;
  --accent: #c6ff00;
  --accent-soft: rgba(198, 255, 0, 0.68);
  --white: #f7f9f8;
  --text-soft: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.66);
  --navy: #020913;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #00050b;
  color: var(--white);
  font-family:
    Inter, Montserrat, Avenir Next, Avenir, Helvetica Neue, Helvetica, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-screen {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--stage-width) * 1px);
  height: calc(var(--stage-height) * 1px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: top center;
  opacity: 0;
  animation: screenReveal 900ms ease-out 120ms forwards;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.background,
.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.background {
  z-index: -5;
  background-image: url("img/fondo-portada.png");
  background-position: center;
  background-size: cover;
  filter: saturate(1) contrast(1.04) brightness(1);
  transform: scale(1.04);
  animation: kenBurns 19s ease-in-out infinite alternate;
}

.background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.background::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 76% 32%, rgba(110, 184, 255, 0.2), transparent 18%),
    radial-gradient(circle at 43% 49%, rgba(198, 255, 0, 0.1), transparent 20%);
}

.home-screen:not(.is-home) .background {
  opacity: 0;
  animation: none;
}

.home-screen:not(.is-home) .background-video {
  visibility: hidden;
}

.home-screen:not(.is-home) .ambient-stars {
  opacity: 0;
  animation: none;
}

.ambient-stars {
  z-index: -4;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, rgba(120, 200, 255, 0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.4px);
  background-position:
    40px 50px,
    122px 78px;
  background-size:
    118px 124px,
    173px 191px;
  mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 62%);
  animation: starDrift 26s linear infinite;
}

.ambient-vignette {
  z-index: -3;
  background: transparent;
}

.home-screen.is-models .ambient-vignette {
  background:
    radial-gradient(ellipse at 50% 45%, transparent 20%, rgba(0, 0, 0, 0.18) 68%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 36%, rgba(0, 0, 0, 0.66) 100%);
}

.home-content {
  display: grid;
  grid-template-rows: 260px 1fr 470px;
  width: 100%;
  height: 100%;
  padding: 78px 72px 78px;
}

.models-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 116px 294px 920px 200px 134px;
  gap: 34px;
  width: 100%;
  height: 100%;
  padding: 52px 52px 50px;
  background:
    radial-gradient(circle at 74% 13%, rgba(198, 255, 0, 0.05), transparent 16%),
    radial-gradient(circle at 76% 36%, rgba(69, 132, 178, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(1, 8, 12, 0.91), rgba(0, 5, 8, 0.96));
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  height: 116px;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeSlideUp 840ms cubic-bezier(0.2, 0.8, 0.2, 1) 360ms forwards;
}

.brand-logo {
  display: block;
  width: 226px;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}

.brand-compact {
  height: 90px;
}

.brand-compact .brand-logo {
  width: 177px;
}

.copy-block {
  align-self: start;
  padding-top: 74px;
  max-width: 820px;
}

.headline {
  display: grid;
  gap: 16px;
  margin: 0;
  font-size: 75px;
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

.headline span {
  display: block;
  opacity: 0;
  transform: translateY(38px);
  animation: fadeSlideUp 980ms cubic-bezier(0.17, 0.84, 0.28, 1) forwards;
}

.headline span:first-child {
  color: #f8faf8;
  animation-delay: 620ms;
}

.headline span:last-child {
  color: var(--accent);
  animation-delay: 760ms;
  text-shadow:
    0 0 20px rgba(198, 255, 0, 0.16),
    0 18px 34px rgba(0, 0, 0, 0.33);
}

.divider {
  width: 73px;
  height: 3px;
  margin-top: 46px;
  background: var(--accent);
  box-shadow: 0 0 17px rgba(198, 255, 0, 0.44);
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left;
  animation: dividerIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 1040ms forwards;
}

.subtext {
  margin: 31px 0 0;
  max-width: 540px;
  color: var(--text-soft);
  font-size: 29px;
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translateY(22px);
  animation: fadeSlideUp 820ms cubic-bezier(0.2, 0.8, 0.2, 1) 1140ms forwards;
}

.subtext span {
  color: var(--accent);
}

.actions {
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 88px;
  width: 100%;
  padding-bottom: 12px;
}

.primary-cta {
  position: relative;
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: center;
  width: 700px;
  min-height: 142px;
  padding: 22px 43px 22px 62px;
  overflow: hidden;
  border: 2px solid rgba(198, 255, 0, 0.88);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(0, 8, 14, 0.5), rgba(0, 4, 8, 0.32)),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    0 0 0 1px rgba(198, 255, 0, 0.06) inset,
    0 0 23px rgba(198, 255, 0, 0.22),
    0 25px 62px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  animation:
    fadeButtonIn 820ms cubic-bezier(0.2, 0.8, 0.2, 1) 1370ms forwards,
    buttonGlow 3.8s ease-in-out 2300ms infinite;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.primary-cta::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.13) 45%, transparent 62%);
  opacity: 0;
  transform: translateX(-70%);
  transition:
    opacity 180ms ease,
    transform 700ms ease;
}

.primary-cta:hover,
.primary-cta:focus-visible,
.primary-cta.is-pressed {
  transform: translateY(0) scale(1.03);
  border-color: #dcff54;
  background:
    linear-gradient(180deg, rgba(13, 28, 21, 0.66), rgba(0, 5, 8, 0.38)),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    0 0 0 1px rgba(198, 255, 0, 0.18) inset,
    0 0 40px rgba(198, 255, 0, 0.42),
    0 34px 78px rgba(0, 0, 0, 0.46);
}

.primary-cta:hover::before,
.primary-cta:focus-visible::before,
.primary-cta.is-pressed::before {
  opacity: 1;
  transform: translateX(74%);
}

.cta-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(198, 255, 0, 0.82);
  border-radius: 50%;
  color: #fff;
  box-shadow:
    0 0 14px rgba(198, 255, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.cta-icon svg {
  width: 42px;
  height: 42px;
}

.cta-icon path,
.chevrons path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.cta-label {
  color: #fbfcfb;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  text-transform: uppercase;
}

.secondary-cta {
  display: grid;
  justify-items: center;
  gap: 28px;
  min-width: 540px;
  padding: 4px 24px 0;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeSlideUp 760ms cubic-bezier(0.2, 0.8, 0.2, 1) 1590ms forwards;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.secondary-cta:hover,
.secondary-cta:focus-visible,
.secondary-cta.is-pressed {
  color: #fff;
  transform: translateY(0) scale(1.02);
}

.secondary-cta span:last-child {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
}

.chevrons {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--accent);
  filter: drop-shadow(0 0 14px rgba(198, 255, 0, 0.38));
  animation: chevronBounce 1.85s ease-in-out infinite;
}

.chevrons svg {
  width: 54px;
  height: 54px;
}

.home-screen.is-auto.is-models .ambient-vignette {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(198, 255, 0, 0.04), rgba(0, 0, 0, 0.18) 66%, rgba(0, 0, 0, 0.76) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 36%, rgba(0, 0, 0, 0.64) 100%);
}

.home-screen.is-models .home-background {
  filter: saturate(0.55) contrast(1.08) brightness(0.28) blur(1px);
  animation-duration: 28s;
}

.models-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.home-button {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-top: 2px;
  border: 1.5px solid rgba(198, 255, 0, 0.7);
  border-radius: 50%;
  background: rgba(0, 6, 10, 0.42);
  color: #fff;
  box-shadow:
    0 0 22px rgba(198, 255, 0, 0.14),
    0 22px 44px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(5px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.home-button svg {
  width: 36px;
  height: 36px;
}

.home-button path,
.mining-icon path,
.custom-icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}

.home-button:hover,
.home-button:focus-visible,
.home-button.is-pressed {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow:
    0 0 30px rgba(198, 255, 0, 0.26),
    0 22px 44px rgba(0, 0, 0, 0.38);
}

.models-watermark {
  position: absolute;
  top: 80px;
  right: -48px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.027);
  font-family: Georgia, Times New Roman, serif;
  font-size: 548px;
  line-height: 0.8;
  transform: rotate(-5deg);
}

.models-intro {
  position: relative;
  z-index: 2;
  align-self: end;
  opacity: 0;
  transform: translateY(22px);
}

.screen.is-active .models-intro {
  animation: appRiseIn 560ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms forwards;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--accent);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0.58em;
}

.models-intro h2 {
  margin: 0;
  color: #f7f8f6;
  font-size: 116px;
  line-height: 0.86;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
}

.models-divider {
  margin-top: 40px;
  width: 61px;
}

.models-subtext {
  margin: 28px 0 0;
  color: var(--text-soft);
  font-size: 25px;
  line-height: 1.36;
  font-weight: 400;
}

.models-subtext span {
  color: var(--accent);
}

.unit-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 40px 34px;
  min-height: 0;
}

.unit-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1.5px solid rgba(198, 218, 222, 0.26);
  border-radius: 15px;
  background: rgba(3, 10, 14, 0.62);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  opacity: 0;
  text-align: left;
  transform: translateY(26px) scale(0.975);
  transition:
    transform 190ms ease,
    border-color 190ms ease,
    box-shadow 190ms ease;
}

.screen.is-active .unit-card {
  animation: cardAppIn 620ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

.screen.is-active .unit-card:nth-child(1) {
  animation-delay: 260ms;
}

.screen.is-active .unit-card:nth-child(2) {
  animation-delay: 340ms;
}

.screen.is-active .unit-card:nth-child(3) {
  animation-delay: 430ms;
}

.screen.is-active .unit-card:nth-child(4) {
  animation-delay: 510ms;
}

.unit-card::after,
.wide-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0, 5, 8, 0.7) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 54%);
  pointer-events: none;
}

.unit-card:hover,
.unit-card:focus-visible,
.unit-card.is-pressed {
  transform: scale(1.018);
  border-color: rgba(198, 255, 0, 0.56);
  box-shadow:
    0 28px 54px rgba(0, 0, 0, 0.38),
    0 0 26px rgba(198, 255, 0, 0.16);
}

.unit-media {
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("img/fondo-portada.png");
  background-size: 135% auto;
  background-repeat: no-repeat;
  filter: saturate(0.78) contrast(1.08) brightness(0.82);
  transform: scale(1.02);
  transition:
    filter 220ms ease,
    transform 420ms ease;
}

.unit-card:hover .unit-media,
.unit-card:focus-visible .unit-media,
.unit-card.is-pressed .unit-media {
  filter: saturate(0.98) contrast(1.11) brightness(0.9);
  transform: scale(1.055);
}

.unit-cetus {
  background-image: url("img/cetus/cetus.jpg");
  background-size: 149% auto;
  background-position: 50% 52%;
}

.unit-cygnus {
  background-image: url("img/cygnus/cygnus.jpg");
  background-size: 175% auto;
  background-position: 60% 70%;
}

.unit-scorpio {
  background-image: url("img/scorpio/scorpio.jpg");
  background-size: 140% auto;
  background-position: 85% 57%;
}

.unit-serpens {
  background-image: url("img/serpens/serpens.jpg");
  background-size: 125% auto;
  background-position: 40% 105%;
}

.unit-info {
  position: absolute;
  right: 34px;
  bottom: 30px;
  left: 34px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
}

.unit-line {
  grid-column: 1 / -1;
  width: 45px;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(198, 255, 0, 0.35);
}

.unit-name {
  color: #fbfcfb;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.unit-arrow,
.wide-arrow {
  color: var(--accent);
  font-size: 47px;
  line-height: 0.8;
  font-weight: 300;
  text-shadow: 0 0 18px rgba(198, 255, 0, 0.28);
  transition: transform 190ms ease;
}

.unit-card:hover .unit-arrow,
.unit-card:focus-visible .unit-arrow,
.unit-card.is-pressed .unit-arrow,
.wide-card:hover .wide-arrow,
.wide-card:focus-visible .wide-arrow,
.wide-card.is-pressed .wide-arrow {
  transform: translateX(8px);
}

.wide-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 112px 1fr 70px;
  align-items: center;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  border: 1.5px solid rgba(198, 218, 222, 0.23);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(0, 8, 11, 0.86), rgba(0, 9, 13, 0.54)),
    rgba(0, 0, 0, 0.35);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  opacity: 0;
  transform: translateY(24px) scale(0.982);
  text-align: left;
  transition:
    transform 190ms ease,
    border-color 190ms ease,
    box-shadow 190ms ease;
}

.screen.is-active .wide-card {
  animation: cardAppIn 620ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

.screen.is-active .mining-card {
  animation-delay: 620ms;
}

.screen.is-active .custom-card {
  animation-delay: 710ms;
}

.wide-card:hover,
.wide-card:focus-visible,
.wide-card.is-pressed {
  transform: scale(1.012);
  border-color: rgba(198, 255, 0, 0.52);
  box-shadow:
    0 26px 52px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(198, 255, 0, 0.14);
}

.mining-card {
  padding: 24px 32px 24px 37px;
}

.mining-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 6, 8, 0.95) 0%, rgba(0, 6, 8, 0.72) 34%, rgba(0, 6, 8, 0.12) 100%),
    url("img/fondo-portada.png");
  background-position:
    center,
    50% 74%;
  background-size:
    cover,
    118% auto;
  filter: grayscale(0.82) contrast(1.18) brightness(0.62);
  transform: scale(1.02);
}

.mining-icon,
.custom-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1.5px solid rgba(198, 255, 0, 0.78);
  border-radius: 50%;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(198, 255, 0, 0.22));
}

.mining-icon svg,
.custom-icon svg {
  width: 57px;
  height: 57px;
}

.mining-copy,
.custom-copy,
.wide-arrow {
  position: relative;
  z-index: 2;
}

.mining-copy {
  display: grid;
  gap: 5px;
}

.mining-copy span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.38em;
}

.mining-copy strong {
  color: var(--accent);
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.mining-copy small,
.custom-copy small {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 400;
}

.mining-copy em,
.custom-copy em {
  color: var(--accent);
  font-style: normal;
}

.custom-card {
  grid-template-columns: 116px 1fr 70px;
  padding: 22px 32px 22px 37px;
}

.custom-icon {
  width: 88px;
  height: 88px;
}

.custom-copy {
  display: grid;
  gap: 9px;
}

.custom-copy strong {
  color: #f7f8f6;
  font-size: 27px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.custom-copy small {
  font-size: 22px;
}

.scorpio-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 110px 790px 132px 480px 182px;
  gap: 30px;
  width: 100%;
  height: 100%;
  padding: 52px 52px 54px;
  background: #02080d;
}

.scorpio-hero-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 990px;
  z-index: 0;
  overflow: hidden;
  background-image: url("img/scorpio/scorpio.jpg");
  background-position: 78% 56%;
  background-size: 122% auto;
  filter: saturate(0.98) contrast(1.08) brightness(0.88);
}

.scorpio-hero-bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 6, 10, 0.92) 0%, rgba(0, 8, 14, 0.7) 33%, rgba(0, 8, 14, 0.14) 74%),
    linear-gradient(180deg, rgba(0, 5, 8, 0.18) 0%, rgba(0, 5, 8, 0.04) 45%, #02080d 100%),
    radial-gradient(circle at 72% 18%, rgba(116, 184, 255, 0.22), transparent 20%);
  transition: background 400ms ease;
}

.scorpio-content.gallery-mode .scorpio-hero-bg {
  filter: brightness(0.12) grayscale(0.4) blur(4px);
  transition: filter 500ms ease;
}

.scorpio-content.gallery-mode .scorpio-hero-bg::after {
  background: rgba(0, 0, 0, 0.4);
}

.cetus-hero-bg {
  background-image: url("img/cetus/cetus.jpg");
  background-position: 52% 41%;
  background-size: 160% auto;
}

.cygnus-hero-bg {
  background-image: url("img/cygnus/cygnus.jpg");
  background-position: 47% 45%;
  background-size: 170% auto;
}

.serpens-hero-bg {
  background-image: url("img/serpens/serpens.jpg");
  background-position: -42% 50%;
  background-size: 117% auto;
}

.detail-topbar {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.back-button {
  position: absolute;
  top: 172px;
  left: 52px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid rgba(198, 255, 0, 0.75);
  border-radius: 50%;
  background: rgba(0, 8, 12, 0.5);
  color: #fff;
  box-shadow:
    0 0 26px rgba(198, 255, 0, 0.18),
    0 18px 36px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(5px);
  transition:
    transform 180ms ease,
    top 260ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.back-button svg {
  display: block;
  width: 30px;
  height: 30px;
  transform: translateX(-2px);
}

.back-button path,
.feature-icon path,
.feature-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.back-button:hover,
.back-button:focus-visible,
.back-button.is-pressed {
  transform: scale(1.06);
  border-color: var(--accent);
  box-shadow:
    0 0 34px rgba(198, 255, 0, 0.3),
    0 18px 36px rgba(0, 0, 0, 0.42);
}

.scorpio-content.gallery-mode .back-button {
  top: 178px;
}

.detail-hero {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  max-width: 520px;
  padding-bottom: 34px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    max-width 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
    padding-bottom 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen.is-active .detail-hero {
  animation: appRiseIn 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 130ms forwards;
}

.detail-eyebrow {
  margin: 0 0 30px;
  color: var(--accent);
  font-size: 29px;
  font-weight: 500;
  letter-spacing: 0.35em;
}

.detail-hero h2 {
  margin: 0;
  color: #f8faf8;
  font-size: 54px;
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  transition: font-size 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.detail-divider {
  width: 54px;
  margin-top: 46px;
}

.detail-subtext {
  margin: 53px 0 0;
  color: var(--text-soft);
  font-size: 25px;
  line-height: 1.42;
  text-shadow: 0 14px 28px rgba(0, 0, 0, 0.44);
}

.detail-subtext .detail-accent {
  color: var(--accent);
}

.explore-heading {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 3;
  display: grid;
  align-content: end;
  justify-items: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen.is-active .explore-heading {
  animation: appRiseIn 560ms cubic-bezier(0.2, 0.8, 0.2, 1) 360ms forwards;
}

.explore-heading h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.42em;
}

.explore-heading p {
  margin: 23px 0 21px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 21px;
  line-height: 1.2;
}

.explore-heading span {
  width: 62px;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(198, 255, 0, 0.34);
}

.feature-grid {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  min-height: 0;
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 520ms ease;
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-rows: 120px auto 1fr 70px;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 22px 28px 25px;
  overflow: hidden;
  border: 1.5px solid rgba(198, 218, 222, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(0, 6, 10, 0.08), rgba(0, 6, 10, 0.88)),
    rgba(2, 8, 12, 0.62);
  box-shadow:
    0 26px 50px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  color: #fff;
  opacity: 0;
  text-align: center;
  transform: translateY(26px) scale(0.976);
  transition:
    transform 190ms ease,
    border-color 190ms ease,
    box-shadow 190ms ease;
}

.feature-card::before,
.feature-card::after {
  position: absolute;
  inset: 0;
  content: "";
}

.feature-card::before {
  background-image: url("img/fondo-portada.png");
  background-repeat: no-repeat;
  background-size: 185% auto;
  filter: saturate(0.8) contrast(1.08) brightness(0.72);
  transform: scale(1.02);
  transition:
    filter 220ms ease,
    transform 420ms ease;
}

.feature-card::after {
  background:
    linear-gradient(180deg, rgba(0, 5, 8, 0.12) 0%, rgba(0, 5, 8, 0.42) 45%, rgba(0, 5, 8, 0.93) 100%),
    radial-gradient(circle at 50% 13%, rgba(198, 255, 0, 0.09), transparent 22%);
}

.feature-specs::before {
  background-position: 28% 60%;
}

.feature-interiors::before {
  background-image: url("img/pasillo.jpg");
  background-position: center;
  background-size: cover;
  filter: saturate(0.85) contrast(1.1) brightness(0.65);
}

.feature-gallery::before {
  background-position: 78% 62%;
}

.screen.is-active .feature-card {
  animation: cardAppIn 620ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

/* Scorpio Specific Cards */
.scorpio-content .feature-specs::before { background-image: url("img/scorpio/galeria-scorpio/scorpio2.jpg"); background-position: 35% center; background-size: cover; }
.scorpio-content .feature-gallery::before { background-image: url("img/scorpio/galeria-scorpio/scorpio4.jpg"); background-position: center; background-size: cover; }

/* Cetus Specific Cards */
.cetus-content .feature-specs::before { background-image: url("img/cetus/galeria-cetus/cetus-blanco-1.jpg"); background-position: center; background-size: cover; }
.cetus-content .feature-gallery::before { background-image: url("img/cetus/galeria-cetus/cetus-blanco-2.jpg"); background-position: center; background-size: cover; }

/* Cygnus Specific Cards */
.cygnus-content .feature-specs::before { background-image: url("img/cygnus/galeria-cygnus/cygnus-1.jpg"); background-position: 15% center; background-size: cover; }
.cygnus-content .feature-gallery::before { background-image: url("img/cygnus/galeria-cygnus/cygnus-dongfeng-6.jpg"); background-position: center; background-size: cover; }

/* Serpens Specific Cards */
.serpens-content .feature-specs::before { background-image: url("img/serpens/galeria-serpens/serpens-1.jpg"); background-position: center; background-size: cover; }
.serpens-content .feature-gallery::before { background-image: url("img/serpens/galeria-serpens/serpens-2.jpg"); background-position: center; background-size: cover; }

.screen.is-active .feature-card:nth-child(1) {
  animation-delay: 520ms;
}

.screen.is-active .feature-card:nth-child(2) {
  animation-delay: 610ms;
}

.screen.is-active .feature-card:nth-child(3) {
  animation-delay: 700ms;
}

.feature-card:hover,
.feature-card:focus-visible,
.feature-card.is-pressed {
  transform: scale(1.018);
  border-color: rgba(198, 255, 0, 0.58);
  box-shadow:
    0 30px 56px rgba(0, 0, 0, 0.38),
    0 0 27px rgba(198, 255, 0, 0.16);
}

.feature-card:hover::before,
.feature-card:focus-visible::before,
.feature-card.is-pressed::before {
  filter: saturate(0.95) contrast(1.12) brightness(0.82);
  transform: scale(1.055);
}

.feature-icon,
.feature-card strong,
.feature-card small,
.feature-arrow {
  position: relative;
  z-index: 2;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--accent);
  background: rgba(1, 6, 10, 0.38);
  filter: drop-shadow(0 0 13px rgba(198, 255, 0, 0.24));
}

.feature-icon svg {
  width: 48px;
  height: 48px;
}

.feature-card strong {
  align-self: end;
  margin-top: 34px;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.feature-card small {
  align-self: start;
  max-width: 230px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
}

.feature-arrow {
  align-self: end;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid rgba(198, 255, 0, 0.78);
  border-radius: 50%;
  color: var(--accent);
  font-size: 39px;
  line-height: 0.8;
  font-weight: 300;
  transition: transform 190ms ease;
}

.feature-card:hover .feature-arrow,
.feature-card:focus-visible .feature-arrow,
.feature-card.is-pressed .feature-arrow {
  transform: translateX(6px);
}

.spec-workspace {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 3 / 5;
  display: grid;
  grid-template-rows: 84px 68px 1fr;
  gap: 28px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(42px);
  transition:
    opacity 420ms ease,
    transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.interior-workspace {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 3 / 5;
  display: grid;
  grid-template-rows: 74px 260px 1fr;
  gap: 18px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(42px);
  transition:
    opacity 420ms ease,
    transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-workspace {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 2 / 5;
  display: grid;
  /* Ajustamos la primera fila para que sumada al padding y gap (60+730+30) de exactamente 820px */
  /* 820px es el offset necesario desde el inicio de la fila 2 para llegar a la fila 3 (Hero 790px + Gap 30px) */
  grid-template-rows: 730px 74px minmax(0, 1fr);
  gap: 30px;
  height: 100%;
  min-height: 0;
  padding-top: 60px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(42px);
  transition:
    opacity 420ms ease,
    transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spec-workspace-final {
  grid-template-rows: 74px 54px 1fr;
  gap: 16px;
}

.spec-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1.5px solid rgba(198, 218, 222, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(12, 22, 27, 0.72), rgba(2, 8, 12, 0.66)),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  backdrop-filter: blur(7px);
}

.spec-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  min-width: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.spec-tab + .spec-tab {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-tab.is-active {
  color: var(--accent);
  background: rgba(198, 255, 0, 0.055);
  box-shadow:
    0 0 28px rgba(198, 255, 0, 0.2) inset,
    0 0 24px rgba(198, 255, 0, 0.1);
}

.spec-tab-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: currentColor;
}

.spec-tab-icon svg,
.spec-category-icon svg,
.spec-item-icon svg {
  width: 100%;
  height: 100%;
}

.spec-tab-icon path,
.spec-tab-icon circle,
.spec-category-icon path,
.spec-item-icon path,
.interior-icon path,
.interior-icon circle,
.interior-info-icon path,
.interior-info-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.spec-category {
  display: grid;
  grid-template-columns: 54px auto 1fr;
  align-items: center;
  gap: 19px;
  color: var(--accent);
}

.spec-category-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 0 12px rgba(198, 255, 0, 0.26));
}

.spec-category h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.spec-category-line {
  height: 1px;
  background: rgba(198, 255, 0, 0.32);
}

.spec-grid-final {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 13px;
  min-height: 0;
}

.spec-workspace-final .spec-tab {
  font-size: 18px;
}

.spec-workspace-final .spec-tab-icon {
  width: 32px;
  height: 32px;
}

.spec-workspace-final .spec-category {
  grid-template-columns: 44px auto 1fr;
  gap: 15px;
}

.spec-workspace-final .spec-category-icon {
  width: 44px;
  height: 44px;
}

.spec-workspace-final .spec-category h3 {
  font-size: 17px;
}

.spec-workspace-final .spec-item {
  grid-template-columns: 27px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 9px;
  row-gap: 8px;
  padding: 15px 16px 14px;
}

.spec-workspace-final .spec-item h4 {
  font-size: 15.5px;
  line-height: 1.25;
}

.spec-workspace-final .spec-item h4::after {
  width: 24px;
  margin-top: 9px;
}

.spec-workspace-final .spec-item p {
  grid-column: 2;
  font-size: 12.8px;
  line-height: 1.35;
}

.spec-workspace-final .spec-item-icon-mini {
  grid-row: 1;
  width: 23px;
  height: 23px;
  margin-top: -1px;
  opacity: 0.94;
  filter: drop-shadow(0 0 8px rgba(198, 255, 0, 0.2));
}

.spec-workspace-final .spec-item-icon-mini path {
  stroke-width: 4.2;
}

.interior-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}

.interior-shot {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 58px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1.5px solid rgba(198, 218, 222, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(12, 24, 30, 0.66), rgba(3, 12, 17, 0.78)),
    rgba(7, 18, 24, 0.72);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  opacity: 0;
  transform: translateY(20px) scale(0.985);
}

.interior-shot::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 6, 10, 0.02) 0%, rgba(0, 8, 12, 0.12) 42%, rgba(0, 8, 12, 0.78) 100%),
    radial-gradient(circle at 50% 10%, rgba(198, 255, 0, 0.08), transparent 28%);
}

.interior-shot-media {
  min-height: 0;
}

.interior-shot-seats .interior-shot-media {
  background-image: url("img/asientos.jpg");
  background-position: center;
  background-size: cover;
}

.interior-shot-aisle .interior-shot-media {
  background-image: url("img/pasillo.jpg");
  background-position: center;
  background-size: cover;
}

.interior-shot-access .interior-shot-media {
  background-image: url("img/acceso.jpg");
  background-position: center;
  background-size: cover;
}

.interior-shot-cabin .interior-shot-media {
  background-image: url("img/cabina.jpg");
  background-position: center;
  background-size: cover;
}

.interior-shot-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  border-top: 1px solid rgba(198, 255, 0, 0.14);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.interior-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(198, 255, 0, 0.25));
}

.interior-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  border: 1.5px solid rgba(198, 218, 222, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 14% 8%, rgba(198, 255, 0, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(13, 28, 34, 0.78), rgba(2, 10, 15, 0.78)),
    rgba(5, 15, 20, 0.76);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.028) inset;
  opacity: 0;
  transform: translateY(20px) scale(0.985);
}

.interior-info-item {
  position: relative;
  display: grid;
  grid-template-rows: 54px auto 1fr;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 30px 20px 24px;
  text-align: center;
}

.interior-info-item + .interior-info-item::before {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 0;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(198, 255, 0, 0.28), transparent);
}

.interior-info-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(198, 255, 0, 0.26));
}

.interior-info-item h4 {
  margin: 11px 0 0;
  color: #f8faf8;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
}

.interior-info-item h4 span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1.22;
}

.interior-info-item h4::after {
  display: block;
  width: 24px;
  height: 2px;
  margin: 13px auto 0;
  background: var(--accent);
  content: "";
  box-shadow: 0 0 12px rgba(198, 255, 0, 0.28);
}

.interior-info-item p {
  margin: 14px 0 0;
  max-width: 176px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12.5px;
  line-height: 1.43;
}

.gallery-stage {
  position: relative;
  height: 640px;
  align-self: start;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(198, 218, 222, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(12, 24, 30, 0.28), rgba(2, 9, 14, 0.54)),
    rgba(0, 0, 0, 0.1);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.018) inset;
  opacity: 0;
  transform: translateY(22px) scale(0.986);
}

.gallery-label {
  position: absolute;
  top: 25px;
  left: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
  pointer-events: none;
}

.gallery-label span {
  width: 38px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(198, 255, 0, 0.34);
}

.gallery-label strong {
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.28em;
}

.gallery-slides,
.gallery-slide,
.gallery-image {
  position: absolute;
  inset: 0;
}

.gallery-slide {
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 420ms ease,
    transform 780ms cubic-bezier(0.18, 0.82, 0.2, 1);
}

.gallery-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.gallery-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(0.94) contrast(1.08) brightness(0.92);
}

.gallery-stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 6, 10, 0.32) 0%, transparent 28%, transparent 72%, rgba(0, 6, 10, 0.34) 100%),
    linear-gradient(180deg, rgba(0, 5, 8, 0.1) 0%, rgba(0, 5, 8, 0.04) 54%, rgba(0, 5, 8, 0.54) 100%);
}

/* --- Gallery V2 (Background Style) --- */
.gallery-v2.gallery-workspace {
  position: relative !important;
  padding: 0 !important;
  margin: -52px -52px 0 -52px !important;
  width: calc(100% + 104px) !important;
  height: auto !important;
  min-height: 1400px !important; /* Cubrir toda el área de contenido */
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
}

.gallery-v2 .gallery-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important; /* Al fondo */
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.gallery-v2 .gallery-stage::after {
  background: linear-gradient(180deg, 
    rgba(2, 8, 13, 0.4) 0%, 
    transparent 15%, 
    transparent 85%, 
    #02080d 100%
  ) !important; /* Desvanecimiento hacia los bordes */
}

.gallery-v2 .gallery-image {
  background-size: cover !important;
  filter: brightness(0.75) contrast(1.1) !important;
}

/* UI Flotante */
.gallery-v2 .gallery-label {
  position: absolute;
  top: 80px;
  left: 52px;
  z-index: 10;
}

.gallery-v2 .gallery-arrow {
  z-index: 10;
  width: 84px;
  height: 84px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gallery-v2 .gallery-arrow:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.gallery-v2 .gallery-dots {
  position: absolute;
  bottom: 240px; /* Elevado sobre las tabs */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.05);
  padding: 14px 28px;
  border-radius: 50px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-v2 .gallery-counter {
  position: absolute;
  bottom: 245px;
  right: 52px;
  z-index: 10;
  font-size: 18px;
  letter-spacing: 2px;
}

/* Pestañas y Thumbs sobre el fondo */
.gallery-v2 .spec-tabs {
  position: relative;
  z-index: 10;
  margin-top: 800px; /* Empujar hacia abajo para dejar ver la imagen */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}





.gallery-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(198, 255, 0, 0.72);
  border-radius: 50%;
  background: rgba(0, 8, 12, 0.42);
  color: var(--accent);
  box-shadow:
    0 0 24px rgba(198, 255, 0, 0.14),
    0 18px 34px rgba(0, 0, 0, 0.36);
  transform: translateY(-50%);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.gallery-arrow svg {
  width: 34px;
  height: 34px;
}

.gallery-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.gallery-arrow-prev {
  left: 20px;
}

.gallery-arrow-next {
  right: 20px;
}

.gallery-arrow:hover,
.gallery-arrow:focus-visible,
.gallery-arrow.is-pressed {
  border-color: var(--accent);
  box-shadow:
    0 0 34px rgba(198, 255, 0, 0.25),
    0 18px 34px rgba(0, 0, 0, 0.36);
}

.gallery-arrow-prev:hover,
.gallery-arrow-prev:focus-visible,
.gallery-arrow-prev.is-pressed {
  transform: translateY(-50%) translateX(-4px) scale(1.04);
}

.gallery-arrow-next:hover,
.gallery-arrow-next:focus-visible,
.gallery-arrow-next.is-pressed {
  transform: translateY(-50%) translateX(4px) scale(1.04);
}

.gallery-dots {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 23px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 13px;
}

.gallery-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.gallery-dots button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 16px rgba(198, 255, 0, 0.38);
  transform: scale(1.18);
}

.gallery-counter {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 4;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.gallery-counter span {
  color: var(--accent);
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  gap: 16px 12px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(0, 0, 0, 0.2);
  min-height: 0;
}

.gallery-thumbs::-webkit-scrollbar {
  width: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}

.gallery-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(198, 218, 222, 0.24);
  border-radius: 12px;
  background: rgba(2, 10, 15, 0.72);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.026) inset;
  opacity: 0;
  transform: translateY(18px) scale(0.986);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    opacity 170ms ease;
}

.gallery-thumb span {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(0.74) contrast(1.08) brightness(0.76);
  transition:
    filter 170ms ease,
    transform 240ms ease;
}

.gallery-thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 5, 8, 0.04), rgba(0, 5, 8, 0.42)),
    radial-gradient(circle at 50% 8%, rgba(198, 255, 0, 0.08), transparent 28%);
}

.gallery-thumb.is-active {
  border-color: rgba(198, 255, 0, 0.88);
  box-shadow:
    0 0 18px rgba(198, 255, 0, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.26);
}

.gallery-thumb.is-active span,
.gallery-thumb:hover span,
.gallery-thumb:focus-visible span,
.gallery-thumb.is-pressed span {
  filter: saturate(0.92) contrast(1.08) brightness(0.92);
  transform: scale(1.035);
}

.spec-item {
  display: grid;
  grid-template-columns: 66px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 19px;
  row-gap: 14px;
  align-items: start;
  min-width: 0;
  min-height: 0;
  padding: 28px 24px 24px;
  border: 1.5px solid rgba(198, 218, 222, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(12, 24, 30, 0.72), rgba(2, 9, 14, 0.72)),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    0 24px 46px rgba(0, 0, 0, 0.27),
    0 0 0 1px rgba(255, 255, 255, 0.026) inset;
  opacity: 0;
  transform: translateY(24px) scale(0.982);
}

.spec-item-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--accent);
  filter: drop-shadow(0 0 14px rgba(198, 255, 0, 0.27));
}

.spec-item h4 {
  margin: 0;
  color: #f8faf8;
  font-size: 19px;
  line-height: 1.32;
  font-weight: 800;
}

.spec-item h4 span {
  color: var(--accent);
}

.spec-item h4::after {
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 17px;
  background: var(--accent);
  content: "";
  box-shadow: 0 0 12px rgba(198, 255, 0, 0.34);
}

.spec-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.45;
}

.scorpio-content.spec-mode .scorpio-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(0, 6, 10, 0.94) 0%, rgba(0, 8, 14, 0.78) 38%, rgba(0, 8, 14, 0.24) 78%),
    linear-gradient(180deg, rgba(0, 5, 8, 0.42) 0%, rgba(0, 5, 8, 0.2) 43%, #02080d 100%),
    radial-gradient(circle at 72% 18%, rgba(116, 184, 255, 0.18), transparent 20%);
}

.scorpio-content.interior-mode .scorpio-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(0, 6, 10, 0.9) 0%, rgba(0, 8, 14, 0.66) 39%, rgba(0, 8, 14, 0.22) 78%),
    linear-gradient(180deg, rgba(0, 5, 8, 0.26) 0%, rgba(0, 5, 8, 0.12) 43%, #02080d 100%),
    radial-gradient(circle at 72% 18%, rgba(116, 184, 255, 0.22), transparent 22%),
    radial-gradient(circle at 20% 56%, rgba(198, 255, 0, 0.1), transparent 24%);
}

.scorpio-content.gallery-mode .scorpio-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(0, 5, 8, 0.08) 0%, rgba(0, 5, 8, 0.04) 42%, #02080d 100%),
    radial-gradient(circle at 72% 18%, rgba(116, 184, 255, 0.16), transparent 22%);
}

.scorpio-content.spec-mode .detail-hero,
.scorpio-content.interior-mode .detail-hero,
.scorpio-content.gallery-mode .detail-hero {
  animation: none;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-20px) scale(0.96);
}

.scorpio-content.spec-mode .detail-hero h2 {
  font-size: 56px;
}

.scorpio-content.interior-mode .detail-hero h2 {
  font-size: 62px;
}

.scorpio-content.spec-mode .detail-hero h2 .detail-title-main,
.scorpio-content.interior-mode .detail-hero h2 .detail-title-main,
.scorpio-content.gallery-mode .detail-hero h2 .detail-title-main {
  display: none;
}

.scorpio-content.spec-mode .detail-hero h2::after {
  content: "ESPECIFICACIONES";
}

.scorpio-content.interior-mode .detail-hero h2::after {
  content: "INTERIORES";
}

.scorpio-content.spec-mode .detail-subtext .detail-sub-main,
.scorpio-content.interior-mode .detail-subtext .detail-sub-main,
.scorpio-content.gallery-mode .detail-subtext .detail-sub-main {
  display: none;
}

.scorpio-content.spec-mode .detail-subtext .detail-accent,
.scorpio-content.interior-mode .detail-subtext .detail-accent,
.scorpio-content.gallery-mode .detail-subtext .detail-accent {
  display: none;
}

.scorpio-content.spec-mode .detail-subtext::before {
  content: "Tecnología y resistencia\A en ";
  white-space: pre;
}

.scorpio-content.spec-mode .detail-subtext::after {
  color: var(--accent);
  content: "cada detalle.";
}

.scorpio-content.interior-mode .detail-subtext::before {
  content: "Confort en ";
}

.scorpio-content.interior-mode .detail-subtext::after {
  color: var(--accent);
  content: "cada trayecto.";
}

.scorpio-content.spec-mode .explore-heading,
.scorpio-content.spec-mode .feature-grid,
.scorpio-content.interior-mode .explore-heading,
.scorpio-content.interior-mode .feature-grid,
.scorpio-content.gallery-mode .explore-heading,
.scorpio-content.gallery-mode .feature-grid {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-34px) scale(0.94);
  filter: blur(2px);
}

.scorpio-content.spec-mode .spec-workspace {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 160ms;
}

.scorpio-content.interior-mode .interior-workspace {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 160ms;
}

.scorpio-content.gallery-mode .gallery-workspace {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 160ms;
}

.scorpio-content.spec-mode .spec-item {
  animation: specItemIn 520ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

.scorpio-content.interior-mode .interior-shot,
.scorpio-content.interior-mode .interior-info-grid {
  animation: specItemIn 520ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

.scorpio-content.interior-mode .interior-shot:nth-child(1) {
  animation-delay: 340ms;
}

.scorpio-content.interior-mode .interior-shot:nth-child(2) {
  animation-delay: 400ms;
}

.scorpio-content.interior-mode .interior-shot:nth-child(3) {
  animation-delay: 460ms;
}

.scorpio-content.interior-mode .interior-shot:nth-child(4) {
  animation-delay: 520ms;
}

.scorpio-content.interior-mode .interior-info-grid {
  animation-delay: 580ms;
}

.scorpio-content.gallery-mode .gallery-stage {
  animation: specItemIn 560ms cubic-bezier(0.18, 0.82, 0.2, 1) 300ms forwards;
}

.scorpio-content.gallery-mode .gallery-thumb {
  animation: specItemIn 480ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

.scorpio-content.gallery-mode .gallery-thumb:nth-child(-n + 4) {
  animation-delay: 460ms;
}

.scorpio-content.gallery-mode .gallery-thumb:nth-child(n + 5):nth-child(-n + 8) {
  animation-delay: 540ms;
}

.scorpio-content.gallery-mode .gallery-thumb:nth-child(n + 9) {
  animation-delay: 620ms;
}

.scorpio-content.spec-mode .spec-item:nth-child(1),
.scorpio-content.spec-mode .spec-item:nth-child(2),
.scorpio-content.spec-mode .spec-item:nth-child(3) {
  animation-delay: 360ms;
}

.scorpio-content.spec-mode .spec-item:nth-child(4),
.scorpio-content.spec-mode .spec-item:nth-child(5),
.scorpio-content.spec-mode .spec-item:nth-child(6) {
  animation-delay: 450ms;
}

.scorpio-content.spec-mode .spec-grid-final .spec-item:nth-child(n + 7) {
  animation-delay: 540ms;
}

.chassis-strip {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 5;
  display: grid;
  align-content: center;
  gap: 34px;
  opacity: 0;
  transform: translateY(18px);
}

.screen.is-active .chassis-strip {
  animation: appRiseIn 560ms cubic-bezier(0.2, 0.8, 0.2, 1) 820ms forwards;
}

.chassis-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.chassis-title span {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.chassis-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.52em;
}

.chassis-logos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 10px;
}

.chassis-logos span {
  flex: 0 0 auto;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}


.chassis-logos img {
  display: block;
  max-width: 118px;
  width: 100%;
  height: 58px;
  object-fit: contain;
  opacity: 0.74;
  filter:
    grayscale(1)
    brightness(0)
    invert(1)
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.38));
}

.chassis-logos small {
  display: block;
  max-width: 132px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

@keyframes screenReveal {
  to {
    opacity: 1;
  }
}

@keyframes kenBurns {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.095) translate3d(-14px, -18px, 0);
  }
}

@keyframes starDrift {
  to {
    background-position:
      40px 174px,
      122px 269px;
  }
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dividerIn {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes fadeButtonIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes buttonGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(198, 255, 0, 0.06) inset,
      0 0 21px rgba(198, 255, 0, 0.2),
      0 25px 62px rgba(0, 0, 0, 0.4);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(198, 255, 0, 0.1) inset,
      0 0 34px rgba(198, 255, 0, 0.34),
      0 25px 62px rgba(0, 0, 0, 0.4);
  }
}

@keyframes chevronBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.92;
  }

  50% {
    transform: translateY(13px);
    opacity: 1;
  }
}

@keyframes appRiseIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardAppIn {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.975);
  }

  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.004);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes specItemIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.982);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Contact Screen & Lead Capture (Popup Mode) */
.contact-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 5, 8, 0.82);
  backdrop-filter: blur(12px);
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.contact-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.contact-header {
  text-align: center;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 600ms ease forwards;
}

.contact-icon {
  width: 80px;
  height: 80px;
  background: rgba(198, 255, 0, 0.12);
  border-radius: 24px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid rgba(198, 255, 0, 0.3);
}

.contact-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-header h2 {
  font-family: var(--font-brand);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 12px;
}

.contact-header p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.contact-form {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  padding: 50px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 32px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 600ms ease 200ms forwards;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.form-group input,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  padding: 12px 0;
  font-size: 20px;
  color: #fff;
  font-family: inherit;
  transition: border-color 300ms ease;
  width: 100%;
}

.form-group textarea {
  resize: none;
}

.form-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 400ms ease;
}

.form-group input:focus ~ .form-line,
.form-group textarea:focus ~ .form-line {
  width: 100%;
}

.form-group label {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
  top: -24px;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

.submit-button {
  margin-top: 20px;
  height: 72px;
  background: var(--accent);
  border: none;
  border-radius: 16px;
  color: #000;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: all 300ms ease;
  box-shadow: 0 12px 32px rgba(198, 255, 0, 0.24);
}

.submit-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 300ms ease;
}

.submit-button:active {
  transform: scale(0.96);
}

.submit-button:hover svg {
  transform: translateX(6px) translateY(-4px);
}

/* Success State */
.form-success {
  position: absolute;
  inset: 0;
  background: #02080d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: all 400ms ease;
}

.form-success.is-visible {
  visibility: visible;
  opacity: 1;
}

.success-icon {
  width: 120px;
  height: 120px;
  background: var(--accent);
  border-radius: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 40px;
  box-shadow: 0 20px 40px rgba(198, 255, 0, 0.2);
}

.success-icon svg {
  width: 60px;
  height: 60px;
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-success h3 {
  font-family: var(--font-brand);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.form-success p {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 60px;
}

.btn-back-home {
  padding: 20px 40px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 900;
  border-radius: 12px;
  letter-spacing: 0.1em;
  transition: all 300ms ease;
}

.btn-back-home:active {
  background: var(--accent);
  color: #000;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.contact-form.is-hidden {
  display: none;
}

.lead-button {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.top-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.42);
  margin: 0 12px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.lead-button svg {
  fill: var(--accent) !important;
}

.mining-hero-bg {
  background-image: url("img/mining/mineria-22.jpg") !important;
}

/* Mining Grid Gallery System */
.mining-content .detail-hero {
  max-width: 960px !important;
  grid-row: 2; /* Back to row 2 */
  margin-top: 100px; /* Leave space for header */
  align-self: start;
}

/* Mining Grid Gallery System - Integrated & Scrollable */
.mining-footer-area {
  position: relative;
  width: 100%;
  height: 807px;
  margin: 361px 0 0 0;
  background: transparent;
  z-index: 20;
  overflow-y: auto;
  scrollbar-width: none;
}

.mining-footer-area::-webkit-scrollbar {
  display: none;
}

.mining-thumbs-scroll {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding-bottom: 60px;
}

.mining-thumb-item {
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  background: rgba(0, 0, 0, 0.5); /* Safe background without blur for 26 items */
  filter: brightness(0.7); /* Clearer base state as in reference */
}

.mining-thumb-item.is-active {
  border: 3px solid #ccff00 !important;
  box-shadow: 0 0 25px rgba(204, 255, 0, 0.4);
  filter: brightness(1);
  transform: scale(0.98);
}

.mining-thumb-item:hover {
  filter: brightness(0.9);
  border-color: rgba(255, 255, 255, 0.5);
}

.mining-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Side Stage Drawer - Full Power & 52% Height */
.mining-side-stage {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 52%;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(25px);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.mining-side-stage.is-active {
  transform: translateX(0);
}

.side-stage-header {
  position: absolute;
  top: 60px;
  left: 60px;
}

.side-stage-eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--accent);
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.2em;
}

.side-stage-eyebrow::before {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 15px rgba(204, 255, 0, 0.4);
}

.side-stage-close {
  position: absolute;
  top: 40px;
  right: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease;
  z-index: 10;
}

.side-stage-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--accent);
}

.side-stage-content {
  width: 80%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-stage-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.side-stage-footer {
  position: absolute;
  bottom: 40px;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-stage-dots {
  display: flex;
  gap: 12px;
}

.side-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 300ms ease;
}

.side-dot.is-active {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(204, 255, 0, 0.6);
  transform: scale(1.3);
}

.side-stage-counter {
  position: absolute;
  right: 0;
  color: #fff;
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.side-stage-counter span {
  color: var(--accent);
}

.side-stage-nav {
  position: absolute;
  width: 95%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.side-nav-btn {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 300ms ease;
}

.side-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

.side-nav-btn svg {
  width: 40px;
  height: 40px;
  fill: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* --- Admin Panel / Leads Box --- */
.admin-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 400ms ease;
  padding: 40px;
}

.admin-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.admin-container {
  width: 100%;
  max-width: 1200px;
  height: 85vh;
  background: #050a0e;
  border: 1px solid rgba(198, 255, 0, 0.2);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
}

.admin-header {
  padding: 30px 40px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.admin-title-group {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
}

.admin-email-field {
  flex: 1;
  max-width: 400px;
}

.admin-email-field input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-brand);
  font-size: 14px;
  transition: all 300ms ease;
}

.admin-email-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

.admin-header h2 {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0;
}

.admin-actions {
  display: flex;
  gap: 15px;
}

.admin-btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 300ms ease;
}

.admin-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.admin-btn-accent {
  background: var(--accent);
  color: #000;
  border: none;
}

.admin-btn-accent:hover {
  background: #d4ff33;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(198, 255, 0, 0.2);
}

.admin-btn-danger {
  background: rgba(255, 50, 50, 0.15);
  border-color: rgba(255, 50, 50, 0.3);
  color: #ff5555;
}

.admin-btn-danger:hover {
  background: #ff3333;
  color: #fff;
}

.admin-content {
  flex: 1;
  overflow: hidden;
  padding: 20px 40px 40px;
}

.admin-table-wrapper {
  height: 100%;
  overflow-y: auto;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.admin-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-brand);
}

.admin-table-wrapper th {
  position: sticky;
  top: 0;
  background: #0a1118;
  padding: 20px;
  text-align: left;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.05);
  z-index: 2;
}

.admin-table-wrapper td {
  padding: 18px 20px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.admin-table-wrapper tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Custom Scrollbar */
.admin-table-wrapper::-webkit-scrollbar {
  width: 6px;
}
.admin-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}