/* style.css */
:root{
  --headerH: 72px;
  --footerH: 56px;
  --cinemaMaxW: 1180px;
  --cinemaRadius: 18px;

  --solY-core: rgba(255,211,110,0.95);
  --solY-hot:  rgba(255,243,230,0.85);
  --solY-amber:rgba(255,190,70,0.55);

  --solB-glow: rgba(90,120,255,0.22);
  --solB-soft: rgba(70,110,200,0.14);

  --glowPad: 28px;
  --glowPadLg: 36px;

  --stageH: calc(100svh - var(--headerH) - var(--footerH));
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
  height: 100%;
  width: 100%;
}

body{
  margin: 0;
  overflow: hidden;
  scroll-behavior: smooth;
}

/* Stage */
.hero-stage{
  position: relative;
  height: 100svh;
  overflow: hidden;
  padding-top: var(--headerH);
  padding-bottom: var(--footerH);
}

.hero-deck{
  position: relative;
  height: var(--stageH);
  display: flex;
  align-items: center;
}

.hero-slide{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--stageH);
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.hero-slide.active{
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
}

.hero-slide.leaving{
  opacity: 0;
  transform: translateY(-12px);
}

/* Background */
.bg-oriontis{
  background:
    radial-gradient(1100px 700px at 18% 22%, rgba(110,243,214,0.12), transparent 60%),
    radial-gradient(950px 650px at 76% 18%, rgba(255,211,110,0.12), transparent 62%),
    radial-gradient(900px 650px at 45% 86%, rgba(255,107,107,0.10), transparent 60%),
    linear-gradient(180deg, #070A14 0%, #0E1330 55%, #070A14 100%);
}

/* Header */
.header-solid{
  background: rgba(7, 10, 20, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease, filter 220ms ease;

  position: relative;
  overflow: hidden;
  isolation: isolate;

  box-shadow:
    inset 0 -1px 0 rgba(255,211,110,0.18),
    inset 0  1px 0 rgba(90,120,255,0.10);
}

.header-solid::before,
.header-solid::after{
  content: "";
  position: absolute;
  pointer-events: none;
  inset: calc(-1 * var(--glowPad));
  width: calc(100% + (var(--glowPad) * 2));
  height: calc(100% + (var(--glowPad) * 2));
}

.header-solid::before{
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(14,19,48,0.00) 0%,
      var(--solB-soft) 18%,
      var(--solB-glow) 35%,
      var(--solB-soft) 52%,
      var(--solB-glow) 68%,
      rgba(14,19,48,0.00) 100%
    );
  background-size: 300% 100%;
  filter: blur(12px) saturate(1.15);
  opacity: 0.85;
  animation: oriontisBlueFlow 12s linear infinite;
}

.header-solid::after{
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(255,211,110,0.00) 0%,
      rgba(255,211,110,0.10) 12%,
      var(--solY-amber) 22%,
      var(--solY-core) 38%,
      var(--solY-hot) 50%,
      var(--solY-core) 62%,
      var(--solY-amber) 76%,
      rgba(255,211,110,0.00) 100%
    );
  background-size: 260% 100%;
  filter: blur(7px) saturate(1.25);
  mix-blend-mode: screen;
  opacity: 0.88;
  animation: oriontisSolarFlow 8.5s linear infinite;
}

@media (min-width: 1024px){
  .header-solid::before,
  .header-solid::after{
    inset: calc(-1 * var(--glowPadLg));
    width: calc(100% + (var(--glowPadLg) * 2));
    height: calc(100% + (var(--glowPadLg) * 2));
  }
}

.header-solid > *{ position: relative; z-index: 2; }

@keyframes oriontisBlueFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 200% 50%; }
}

@keyframes oriontisSolarFlow{
  0%{ background-position: 0% 50%; opacity: 0.82; }
  50%{ background-position: 100% 50%; opacity: 0.98; }
  100%{ background-position: 200% 50%; opacity: 0.84; }
}

/* Hero layers */
.hero-bg{
  background-image:
    radial-gradient(1100px 700px at 18% 22%, rgba(110,243,214,0.14), transparent 60%),
    radial-gradient(950px 650px at 76% 18%, rgba(255,211,110,0.14), transparent 62%),
    radial-gradient(900px 650px at 45% 86%, rgba(255,107,107,0.10), transparent 60%),
    url("./assets/images/hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  will-change: transform;
  transform: scale(1.03);
  animation: heroDrift 14s ease-in-out infinite;
}

.hero-overlay{
  background: linear-gradient(
    180deg,
    rgba(7,10,20,0.46) 0%,
    rgba(7,10,20,0.70) 55%,
    rgba(7,10,20,0.88) 100%
  );
  will-change: transform, opacity;
  animation: heroOverlayBreath 18s ease-in-out infinite;
}

@keyframes heroDrift{
  0%{ transform: scale(1.03) translate3d(0px, 0px, 0); }
  50%{ transform: scale(1.05) translate3d(0px, -10px, 0); }
  100%{ transform: scale(1.03) translate3d(0px, 0px, 0); }
}

@keyframes heroOverlayBreath{
  0%{ transform: translate3d(0px, 0px, 0); opacity: 1; }
  50%{ transform: translate3d(0px, 6px, 0); opacity: 0.94; }
  100%{ transform: translate3d(0px, 0px, 0); opacity: 1; }
}

/* Auras */
.hero-aurora{
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(10px);
  transform: translateZ(0);
}

.hero-aurora-a{
  background:
    radial-gradient(700px 420px at 18% 30%, rgba(110,243,214,0.22), transparent 62%),
    radial-gradient(620px 420px at 78% 22%, rgba(255,211,110,0.22), transparent 64%),
    radial-gradient(520px 520px at 56% 82%, rgba(120,140,255,0.14), transparent 62%);
  animation: auroraMoveA 12s ease-in-out infinite;
}

.hero-aurora-b{
  background:
    radial-gradient(740px 520px at 30% 70%, rgba(255,107,107,0.10), transparent 66%),
    radial-gradient(660px 520px at 72% 76%, rgba(110,243,214,0.12), transparent 64%);
  opacity: 0.35;
  animation: auroraMoveB 16s ease-in-out infinite;
}

@keyframes auroraMoveA{
  0%{ transform: translate3d(0,0,0) scale(1.00); }
  50%{ transform: translate3d(0,-10px,0) scale(1.02); }
  100%{ transform: translate3d(0,0,0) scale(1.00); }
}

@keyframes auroraMoveB{
  0%{ transform: translate3d(0,0,0) scale(1.00); }
  50%{ transform: translate3d(12px,8px,0) scale(1.03); }
  100%{ transform: translate3d(0,0,0) scale(1.00); }
}

/* Sparkles */
.sparkle{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 22% 34%, rgba(255,243,230,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 22%, rgba(255,243,230,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 68%, rgba(255,243,230,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 82%, rgba(255,243,230,0.08) 0 2px, transparent 3px);
  background-size: 520px 520px;
}

/* Left rail */
.hero-rail{
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;

  font-family: "Cormorant SC", serif;
  text-shadow: 0 18px 70px rgba(0,0,0,0.70);
}

.hero-rail button{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;

  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.62);
  cursor: pointer;

  transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.hero-rail button::before{
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;

  background-image: url("assets/images/Estrella.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.75;
  filter:
    drop-shadow(0 0 14px rgba(255,211,110,0.30))
    drop-shadow(0 18px 36px rgba(0,0,0,0.55));

  transform: translateY(-1px);
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.hero-rail button:hover{
  color: rgba(255,243,230,0.85);
  transform: translateX(2px);
}

.hero-rail button:hover::before{
  opacity: 0.90;
  transform: scale(1.06);
}

.hero-rail button.active{
  color: rgba(255,243,230,0.96);
}

.hero-rail button.active::before{
  opacity: 1;
  transform: scale(1.14);
  filter:
    drop-shadow(0 0 22px rgba(255,211,110,0.45))
    drop-shadow(0 22px 48px rgba(0,0,0,0.65));
  animation: oriontisStarPulse 8.5s ease-in-out infinite;
}

@keyframes oriontisStarPulse{
  0%{ transform: scale(1.14); }
  50%{ transform: scale(1.20); }
  100%{ transform: scale(1.14); }
}

@media (max-width: 767px){
  .hero-rail{ display: none; }
}

/* Scroll hint */
.scroll-hint{
  position: fixed;
  left: 50%;
  bottom: calc(var(--footerH) + 18px);
  transform: translateX(-50%);
  z-index: 80;
  transition: opacity 220ms ease;
}

body.mode-trailer .scroll-hint{
  opacity: 0.85;
  pointer-events: auto;
}

/* Overview */
.overview-stage{
  position: relative;
  width: 100%;
  height: var(--stageH);
}

.overview-center{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.overview-logo{
  width: min(880px, 86vw);
  height: auto;
  filter:
    drop-shadow(0 28px 90px rgba(0,0,0,0.78))
    drop-shadow(0 0 26px rgba(255,211,110,0.10));
  transform: translateY(-10px);
  user-select: none;

  margin-bottom: 10px;
}

.overview-brand{
  display: grid;
  justify-items: center;
  gap: 12px;
}

.overview-bottom{
  position: absolute;
  left: 0;
  bottom: 56px;
  width: 100%;
  z-index: 3;
  padding-left: 82px;
  padding-right: 20px;
}

@media (max-width: 767px){
  .overview-bottom{ padding-left: 0; }
}

.overview-copy{
  font-family: Inter, system-ui, sans-serif;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.6;
  text-shadow: 0 18px 70px rgba(0,0,0,0.75);
  max-width: 560px;
  opacity: 0.9;
}

.overview-line1{
  font-weight: 600;
  color: rgba(255,243,230,0.80);
}

.overview-line2{ margin-top: 4px; }

.overview-cta{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.overview-watermark{
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(1220px, 98vw);
  height: 120px;
  background-image: url("assets/images/Test_Titulo_05.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.16;
  filter:
    drop-shadow(0 24px 60px rgba(0,0,0,0.65))
    drop-shadow(0 0 18px rgba(255,211,110,0.14));
  z-index: 1;
  pointer-events: none;
}

/* Tagline (final) */
.overview-tagline{
  margin-top: 16px;
  transform: translateY(10px);
  padding-top: 2px;

  font-family: "Cormorant SC", serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1;

  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.26) 38%,
    rgba(255,211,110,0.98) 50%,
    rgba(255,255,255,0.26) 62%,
    rgba(255,255,255,0.16) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: 0.48;
  filter: blur(0.10px) saturate(1.15);

  text-shadow:
    0 0 22px rgba(255,211,110,0.14),
    0 0 44px rgba(255,211,110,0.10),
    0 18px 70px rgba(0,0,0,0.78);

  animation: taglineTextGlow 9s ease-in-out infinite alternate;
}

.overview-tagline .dot{
  opacity: 0.45;
  padding: 0 6px;
}

@keyframes taglineTextGlow{
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Other slides baseline */
.slide-plane{
  width: 100%;
  max-width: 860px;
  padding: 0 0 0 6px;
  text-shadow: 0 18px 80px rgba(0,0,0,0.75);
  margin-left: 82px;
}

@media (max-width: 767px){
  .slide-plane{ margin-left: 0; }
}

.slide-title{
  font-size: 52px;
  line-height: 1.0;
  color: rgba(255,243,230,0.96);
  text-shadow:
    0 22px 80px rgba(0,0,0,0.75),
    0 0 26px rgba(255,211,110,0.10);
}

.hero-sub{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
  max-width: 560px;
}

/* Buttons */
.btn{
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  border: 2px solid rgba(255,255,255,0.18);
  transition: transform 140ms ease, opacity 140ms ease;
  cursor: pointer;
}

.btn:hover{
  transform: translateY(-2px);
  opacity: 0.96;
}

.btnGold{
  background: linear-gradient(90deg, #FFD36E, #FFEFAD);
  color: #070A14;
  border-color: rgba(0,0,0,0.15);
}

.btnGhost{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}

.overview-cta .btnGhost{
  opacity: 0.78;
  border-color: rgba(255,255,255,0.12);
}

.overview-cta .btnGhost:hover{
  opacity: 0.9;
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
}

.chip:hover{ opacity: 0.92; }

.linkMint{
  color: rgba(110,243,214,0.95);
  text-decoration: none;
}

.linkMint:hover{ opacity: 0.9; }

/* Footer */
.footer-fixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  background:
    linear-gradient(
      180deg,
      rgba(14,19,48,0.82),
      rgba(7,10,20,0.92)
    );

  border-top: 1px solid rgba(90,120,255,0.14);
  backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(90,120,255,0.16),
    0 -18px 60px rgba(0,0,0,0.55);

  opacity: 0.96;
}

.footerLink{
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.footerLink:hover{ opacity: 0.9; }

.footer-credit{
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}

.footer-credit a{
  color: rgba(255,243,230,0.65);
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.footer-credit a:hover{
  color: rgba(255,211,110,0.90);
  opacity: 1;
}

/* SEO hidden */
.seo-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Cinema mode */
.cinema-wrap{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--headerH);
  bottom: var(--footerH);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

body.mode-trailer .cinema-wrap{
  opacity: 1;
  pointer-events: auto;
}

.cinema-dim{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.82) 62%, rgba(0,0,0,0.90) 100%);
  backdrop-filter: blur(1.5px);
}

.cinema-frame{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
}

.cinema-video{
  width: min(var(--cinemaMaxW), calc(100vw - 28px));
  aspect-ratio: 16 / 9;
  border-radius: var(--cinemaRadius);
  overflow: hidden;
  background: #000;
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 14px 70px rgba(0,0,0,0.65),
    0 40px 140px rgba(0,0,0,0.70);
}

.trailer-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.mode-trailer .cinema-video{
  animation: cinemaIn 320ms ease both;
}

@keyframes cinemaIn{
  0%{ transform: translateY(10px) scale(0.985); opacity: 0; filter: saturate(0.9); }
  100%{ transform: translateY(0px) scale(1); opacity: 1; filter: saturate(1); }
}

.slide-trailer.hero-slide{ transform: none; transition: opacity 180ms ease; }
.slide-trailer.hero-slide.leaving{ transform: none; }

/* True cinema mode */
body.mode-trailer .header-solid{
  background: rgba(0,0,0,0.92);
  border-bottom-color: rgba(255,255,255,0.03);
  filter: saturate(0.6) brightness(0.55);
  padding-top: 6px;
  padding-bottom: 6px;
}

body.mode-trailer .header-solid::before,
body.mode-trailer .header-solid::after{
  opacity: 0 !important;
}

body.mode-trailer .header-solid *{
  opacity: 0.55;
}

body.mode-trailer .footer-fixed{
  background: rgba(0,0,0,0.88);
  filter: saturate(0.6) brightness(0.6);
}

body.mode-trailer .footer-fixed *{
  opacity: 0.55;
}

/* ===== GALLERY (QHD grid only) FIX: no overlap ===== */
.gallery-wrap{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 82px;
  padding-right: 22px;
}

@media (max-width: 1024px){
  .gallery-wrap{ padding-left: 0; }
}

.gallery-titleRow{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  width: 100%;
}

.gallery-line{
  flex: 1;
  height: 1px;
  opacity: 0.8;
  background: linear-gradient(
    90deg,
    rgba(255,211,110,0.00) 0%,
    rgba(255,211,110,0.22) 14%,
    rgba(255,211,110,0.38) 50%,
    rgba(255,211,110,0.22) 86%,
    rgba(255,211,110,0.00) 100%
  );
  box-shadow:
    0 0 16px rgba(255,211,110,0.10),
    0 0 28px rgba(255,211,110,0.06);
}

.gallery-title{
  font-family: "Cormorant SC", serif;
  letter-spacing: 0.24em;
  color: rgba(255,243,230,0.90);
  font-size: 18px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-shadow:
    0 14px 60px rgba(0,0,0,0.60),
    0 0 18px rgba(255,211,110,0.10);
}

.gallery-title::before,
.gallery-title::after{
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("assets/images/Estrella.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 12px rgba(255,211,110,0.22))
    drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

.gallery-qhd{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-height: calc(var(--stageH) - 64px);
}

.gq-card{
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;

  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  cursor: pointer;

  aspect-ratio: 16 / 9;

  box-shadow:
    0 26px 90px rgba(0,0,0,0.55),
    0 10px 26px rgba(0,0,0,0.35);

  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.gq-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 260ms ease;
}

.gq-main{ grid-column: 1; grid-row: 1 / span 2; }
.gq-top{ grid-column: 2; grid-row: 1; }
.gq-bottom{ grid-column: 2; grid-row: 2; }

.gq-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,211,110,0.28);
  box-shadow:
    0 34px 120px rgba(0,0,0,0.65),
    0 0 26px rgba(255,211,110,0.08);
}

.gq-card:hover img{
  transform: scale(1.05);
}

@media (max-width: 900px){
  .gallery-qhd{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-height: none;
  }

  .gq-main,
  .gq-top,
  .gq-bottom{
    grid-column: 1;
    grid-row: auto;
  }
}

/* ===== GALLERY MODAL (fit to image, no giant empty frame) ===== */
.gmodal{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}

.gmodal.on{ display: block; }

.gmodal-dim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.74);
  backdrop-filter: blur(3px);
}

.gmodal-frame{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gmodal-img{
  display: block;
  width: auto;
  height: auto;

  max-width: min(1560px, 92vw);
  max-height: calc(100svh - var(--headerH) - var(--footerH) - 36px);

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.40);
  box-shadow: 0 40px 160px rgba(0,0,0,0.78);

  object-fit: contain;
}

.gmodal-close{
  position: absolute;
  right: -12px;
  top: -12px;

  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(7,10,20,0.55);
  color: rgba(255,243,230,0.92);
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 18px rgba(255,211,110,0.06);
}

.gmodal-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,211,110,0.22);
  background: rgba(7,10,20,0.45);
  color: rgba(255,243,230,0.92);
  font-size: 34px;
  cursor: pointer;
  backdrop-filter: blur(10px);

  box-shadow:
    0 20px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(255,211,110,0.06);

  transition: transform 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.gmodal-prev{ left: -78px; }
.gmodal-next{ right: -78px; }

.gmodal-nav:hover{
  transform: translateY(-50%) scale(1.03);
  border-color: rgba(255,211,110,0.38);
}

@media (max-width: 900px){
  .gmodal-prev{ left: 10px; }
  .gmodal-next{ right: 10px; }
}

.gmodal-ui{
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: min(720px, 86vw);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.gmodal-dots{
  display: flex;
  gap: 8px;
  opacity: 0.92;
}

.gmodal-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
  box-shadow: 0 0 10px rgba(0,0,0,0.35);
}

.gmodal-dot.on{
  background: rgba(255,211,110,0.76);
  box-shadow: 0 0 18px rgba(255,211,110,0.14);
}

.gmodal-bar{
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}

.gmodal-barFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,211,110,0.18), rgba(255,211,110,0.70), rgba(255,243,230,0.18));
  box-shadow: 0 0 18px rgba(255,211,110,0.10);
}

.hero-slide[data-index="2"] .gallery-wrap{
  margin-top: -24px;
}

/* ===== ROADMAP ===== */
.roadmap-wrap{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 82px;
  padding-right: 22px;
}

@media (max-width: 1024px){
  .roadmap-wrap{ padding-left: 0; }
}

.roadmap-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 900px){
  .roadmap-grid{
    grid-template-columns: 1fr;
  }
}

.roadmap-card{
  border-radius: 18px;
  padding: 28px 26px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 28px 90px rgba(0,0,0,0.55),
    0 10px 26px rgba(0,0,0,0.35);

  transition: transform 220ms ease, border-color 220ms ease;
}

.roadmap-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,211,110,0.28);
}

.roadmap-phase{
  font-family: "Cormorant SC", serif;
  letter-spacing: 0.22em;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(255,211,110,0.90);

  display: flex;
  align-items: baseline;
  gap: 12px;
}

.roadmap-date{
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,211,110,0.65);
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

.roadmap-card p{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}
.footer-social{
  display: flex;
  gap: 14px;
  align-items: center;
}

.footerSocialLink{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 0 0 rgba(255,211,110,0);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.footerSocialLink:hover{
  transform: translateY(-1px);
  border-color: rgba(255,211,110,0.45);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 18px rgba(255,211,110,0.10);
}

.footerSocialLink .icon{
  width: 16px;
  height: 16px;
  fill: rgba(255,243,230,0.85);
}

.brand-subtitle{
  font-family: "Cormorant SC", serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;

  color: rgba(255,243,230,0.75);

  text-shadow:
    0 6px 22px rgba(0,0,0,0.55),
    0 0 14px rgba(255,211,110,0.08);

  opacity: 0.85;
}


/* ================================
   Footer responsive (iPad + mobile)
   No HTML changes. PC unchanged.
=================================== */

@media (max-width: 1024px){
  .footer-fixed .max-w-7xl{
    /* evita que se deforme por wrap raro */
    flex-wrap: nowrap;
    gap: 12px;
  }

  .footer-credit{
    /* mantiene el footer bajo control */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
  }
}

@media (max-width: 900px){
  .footer-fixed{
    /* altura compacta para que no “crezca” */
    min-height: 54px;
  }

  .footer-fixed .max-w-7xl{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 10px;
  }

  /* icon mode: convierte los links del bloque derecho a botones */
  .footer-fixed .footerLink{
    font-size: 0;               /* oculta texto visualmente */
    line-height: 0;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);

    box-shadow:
      0 12px 40px rgba(0,0,0,0.45),
      inset 0 0 0 rgba(255,211,110,0);

    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

  .footer-fixed .footerLink:hover{
    transform: translateY(-1px);
    border-color: rgba(255,211,110,0.45);
    box-shadow:
      0 18px 60px rgba(0,0,0,0.55),
      0 0 18px rgba(255,211,110,0.10);
  }

  .footer-fixed .footerLink::before{
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background: rgba(255,243,230,0.85);

    /* usa máscara para que el ícono tome el color del “background” */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
  }

  /* Email icon */
  .footer-fixed .footerLink[href^="mailto:"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
  }

  /* X icon (tu link ya dice X) */
  .footer-fixed .footerLink[href*="x.com"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.244 2H21l-6.52 7.455L22 22h-6.829l-5.35-7.02L3.7 22H1l7.02-8.03L2 2h6.999l4.84 6.35L18.244 2Zm-1.2 18h1.63L6.88 3.9H5.13L17.044 20Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.244 2H21l-6.52 7.455L22 22h-6.829l-5.35-7.02L3.7 22H1l7.02-8.03L2 2h6.999l4.84 6.35L18.244 2Zm-1.2 18h1.63L6.88 3.9H5.13L17.044 20Z'/%3E%3C/svg%3E");
  }

  /* YouTube icon */
  .footer-fixed .footerLink[href*="youtube.com"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.8 4.6 12 4.6 12 4.6s-5.8 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.7.5 7.5.5 7.5.5s5.8 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8ZM10 15.5v-7l6 3.5-6 3.5Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.8 4.6 12 4.6 12 4.6s-5.8 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.7.5 7.5.5 7.5.5s5.8 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8ZM10 15.5v-7l6 3.5-6 3.5Z'/%3E%3C/svg%3E");
  }

  /* Patreon icon */
  .footer-fixed .footerLink[href*="patreon.com"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3C10.36 3 7 6.36 7 10.5S10.36 18 14.5 18 22 14.64 22 10.5 18.64 3 14.5 3ZM2 21V3h3v18H2Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3C10.36 3 7 6.36 7 10.5S10.36 18 14.5 18 22 14.64 22 10.5 18.64 3 14.5 3ZM2 21V3h3v18H2Z'/%3E%3C/svg%3E");
  }
}

/* ultra small: asegura que el crédito no empuje el footer */
@media (max-width: 520px){
  .footer-credit{ max-width: 48vw; }
}

@media (max-width: 900px){
  /* fuerza centrado real del bloque derecho */
  .footer-fixed .max-w-7xl{
    align-items: center;
  }

  .footer-fixed .footerLink{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0 !important;
    line-height: 0 !important;

    /* pequeño ajuste por si Safari aún lo sube */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .footer-fixed .footerLink::before{
    display: block;
    margin: 0 auto;
  }
}

/* ===== MOBILE FIX: SLIDE 0 (OVERVIEW) ===== */
@media (max-width: 767px){

  /* logo un poco mas arriba y controlado */
  .overview-logo{
    width: min(720px, 92vw);
    transform: translateY(-34px);
    margin-bottom: 6px;
  }

  .overview-watermark{
    top: 56%;
    height: 96px;
    opacity: 0.12;
  }

  /* texto y CTA mas arriba, con padding real */
  .overview-bottom{
    bottom: calc(var(--footerH) + 64px);
    padding-left: 16px;
    padding-right: 16px;
  }

  .overview-copy{
    font-size: 12px;
    line-height: 1.55;
    max-width: 520px;
  }

  .overview-cta{
    gap: 8px;
  }

  /* botones un poco mas compactos para que no empujen */
  .overview-cta .btn{
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 11px;
  }

  /* el boton Scroll mas abajo y mas chico, sin chocar */
  .scroll-hint{
    bottom: calc(var(--footerH) + 10px);
  }

  .scroll-hint .chip{
    padding: 9px 12px;
    font-size: 10px;
  }
}


@media (max-width: 767px){
  /* logo un poco menos arriba */
  .overview-logo{
    transform: translateY(-20px) !important;
  }

  /* baja copy + botones para que queden mas “en el centro” */
  .overview-bottom{
    bottom: calc(var(--footerH) + 38px) !important;
  }

  /* scroll mas pegado al footer para que no “flote” tanto */
  .scroll-hint{
    bottom: calc(var(--footerH) + 8px) !important;
  }
}


/* ===== MOBILE FIX: GALLERY (SLIDE 2) ===== */
@media (max-width: 767px){

  /* el slide deja de intentar “centrarse vertical” */
  .hero-slide[data-index="2"]{
    align-items: flex-start;
  }

  .hero-slide[data-index="2"] .gallery-wrap{
    margin-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* titulo mas compacto */
  .gallery-titleRow{
    margin-bottom: 12px;
  }

  .gallery-title{
    font-size: 14px;
    letter-spacing: 0.22em;
  }

  /* grid real de mobile: cards grandes, una debajo de otra */
  .gallery-qhd{
    grid-template-columns: 1fr;
    gap: 14px;
    max-height: none;
  }

  .gq-card{
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  /* evita que el scroll quede encima de la ultima imagen */
  .scroll-hint{
    bottom: calc(var(--footerH) + 12px);
  }
}

/* ===== MOBILE FIX: ROADMAP (SLIDE 3) ===== */
@media (max-width: 767px){

  .hero-slide[data-index="3"]{
    align-items: flex-start;
  }

  .roadmap-wrap{
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 12px;
  }

  .roadmap-grid{
    gap: 14px;
    margin-top: 14px;
  }

  .roadmap-card{
    padding: 18px 18px;
    border-radius: 16px;
  }

  .roadmap-phase{
    font-size: 12px;
    letter-spacing: 0.20em;
    margin-bottom: 8px;
  }

  .roadmap-date{
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .roadmap-card p{
    font-size: 13px;
    line-height: 1.5;
  }

  .scroll-hint{
    bottom: calc(var(--footerH) + 12px);
  }
}


/* style.css (tu CSS completo va igual que el tuyo) */
/* ... TODO TU CSS ACTUAL ... */

/* =========================================================
   TRANSICIONES PREMIUM (micro + profundidad) 
   Pegar al FINAL del style.css
========================================================= */

/* 1) Ajuste de transición base: más suave, más “premium” */
.hero-slide{
  transition:
    opacity 360ms cubic-bezier(.2,.9,.2,1),
    transform 420ms cubic-bezier(.2,.9,.2,1);
}

/* 2) Per-slide entrance: cada sección se siente distinta */
.hero-slide[data-index="0"]{ transform: translateY(10px) scale(0.995); }
.hero-slide[data-index="0"].active{ transform: translateY(0px) scale(1); }

.hero-slide[data-index="2"]{ transform: translateY(12px) scale(0.99); }
.hero-slide[data-index="2"].active{ transform: translateY(0px) scale(1); }

.hero-slide[data-index="3"]{ transform: translateY(14px) scale(0.99); }
.hero-slide[data-index="3"].active{ transform: translateY(0px) scale(1); }

/* 3) Stagger sutil dentro de cada slide (títulos, copy, CTA) */
@keyframes oriontisFadeUp{
  0%{ opacity: 0; transform: translateY(10px); }
  100%{ opacity: 1; transform: translateY(0px); }
}

.hero-slide.active .overview-copy{
  animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 40ms;
}

.hero-slide.active .overview-cta{
  animation: oriontisFadeUp 460ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 90ms;
}

.hero-slide[data-index="2"].active .gallery-titleRow{
  animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 40ms;
}

.hero-slide[data-index="2"].active .gallery-qhd{
  animation: oriontisFadeUp 520ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 90ms;
}

.hero-slide[data-index="3"].active .gallery-titleRow{
  animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 40ms;
}

.hero-slide[data-index="3"].active .roadmap-grid{
  animation: oriontisFadeUp 560ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 90ms;
}

/* 4) Parallax leve del fondo por sección (sin romper nada) */
.hero-bg{
  transition: transform 650ms cubic-bezier(.2,.9,.2,1);
}

body.s0 .hero-bg{ transform: scale(1.03) translate3d(0px, 0px, 0); }
body.s1 .hero-bg{ transform: scale(1.04) translate3d(0px, -6px, 0); }
body.s2 .hero-bg{ transform: scale(1.05) translate3d(0px, -10px, 0); }
body.s3 .hero-bg{ transform: scale(1.05) translate3d(0px, -12px, 0); }

/* 5) Glow contextual muy sutil en el botón inferior */
.scroll-hint .chip{
  transition: box-shadow 220ms ease, border-color 220ms ease, transform 160ms ease, opacity 160ms ease;
}

body.s2 .scroll-hint .chip{
  border-color: rgba(110,243,214,0.20);
  box-shadow: 0 0 26px rgba(110,243,214,0.10);
}

body.s3 .scroll-hint .chip{
  border-color: rgba(255,211,110,0.22);
  box-shadow: 0 0 26px rgba(255,211,110,0.10);
}

/* 6) Respeto total a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-bg,
  .scroll-hint .chip{
    transition: none !important;
    animation: none !important;
  }
}

/* ===== iPad/tablet: esconder rail lateral + ajustar tagline ===== */
@media (max-width: 1024px){
  /* 1) esconder menu lateral (hero-rail) en iPad */
  .hero-rail{
    display: none !important;
  }

  /* 2) bajar un poco Build Trade Rule */
  .overview-tagline{
    transform: translateY(22px) !important;
  }
}

/* Afinado extra para iPad vertical (Air/Mini) */
@media (max-width: 900px){
  .overview-tagline{
    transform: translateY(26px) !important;
  }
}