/* ============================================================
   SKY JOURNEY — viaje por el cielo día → noche
   Nubes parallax con zoom + sol/luna + estrellas + cohete SVG
   Reemplaza la secuencia PNG. JS: initSkyJourney() en main.js
   ============================================================ */

html { background: #0a0f24; }
body { background: transparent !important; }

/* ── Fondo fijo detrás de todo ── */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* ── Degradado de cielo (JS anima las variables) ── */
.sky__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    var(--sky-top, #5fa8da) 0%,
    var(--sky-mid, #9fd0ec) 50%,
    var(--sky-bot, #d8eef9) 100%);
}

/* ── Estrellas (JS sube la opacidad al anochecer) ── */
.sky__stars {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.sky__stars .star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle var(--tw, 3s) ease-in-out infinite alternate;
}
@keyframes starTwinkle { from { opacity: .35; } to { opacity: 1; } }

/* ── Sol / Luna ── */
.sky__celestial { position: absolute; inset: 0; }
.sun-moon {
  position: absolute;
  left: 50%;
  top: 0;
  width: 130px;
  height: 130px;
  margin-left: -65px;
  border-radius: 50%;
  background: var(--cel-color, #fff3c4);
  box-shadow: 0 0 80px 30px var(--cel-glow, rgba(255,228,140,0.55));
  will-change: transform, background, box-shadow;
}

/* ── Nubes reales (PNG transparentes) ── */
.sky__clouds { position: absolute; inset: 0; }
.cloud {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  will-change: transform, opacity;
}
.cloud img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(90,110,150,0.18));
}

/* Nubes de frente: pasan cerca de la "cámara" → ligero desenfoque de profundidad */
.sky__clouds--front .cloud img {
  filter: blur(0.6px) drop-shadow(0 22px 46px rgba(70,90,130,0.22));
}

/* ── Canvas de la secuencia transparente (cohete animado) ──
   Usa #seqCanvas con !important para anular reglas viejas de scroll-sequence.css */
#seqCanvas.seq-canvas {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  display: block !important;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.3)) brightness(1.08) saturate(1.15);
}

/* ── Barra de progreso (dorado → naranja) ── */
.seq-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #ffd24a, #f97316);
  opacity: 0.6;
  box-shadow: 0 0 10px rgba(249,115,22,0.4);
}

/* ============================================================
   SECCIONES — paneles translúcidos para que el cielo se vea
   (cargar este archivo AL FINAL para ganar a apex-polish)
   ============================================================ */
.section--hero { background: transparent !important; position: relative; }

/* Scrim de contraste: radial que cubre TODA la pantalla y se desvanece
   solo en la esquina opuesta → sin borde recto antiestético */
.section--hero::before {
  content: '';
  position: absolute;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;   /* anula el 65% de skills-upgrade.css */
  height: 100% !important;  /* anula el 80% de skills-upgrade.css */
  z-index: 0;
  pointer-events: none;
  /* Vertical de ancho completo → sin borde lateral, cubre toda la página */
  background:
    linear-gradient(to top,
      rgba(8,11,22,0.66) 0%,
      rgba(8,11,22,0.40) 30%,
      rgba(8,11,22,0.18) 52%,
      transparent 78%);
}
.section--hero > * { position: relative; z-index: 1; }

/* Transición suave al alternar día/noche */
.section--hero .section__title,
.section--hero .section__title em,
.section--hero .section__desc,
.section--hero .badge,
.section--hero::before {
  transition: color .55s ease, background .65s ease, text-shadow .55s ease, border-color .55s ease;
}

/* ☀ DÍA — tipografía OSCURA de alto contraste sobre nubes claras */
body.sky-day .section--hero::before {
  background: linear-gradient(to top,
    rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 28%, transparent 58%) !important;
}
body.sky-day .section--hero .section__title {
  color: #14233a !important;
  text-shadow: 0 1px 16px rgba(255,255,255,0.65);
}
body.sky-day .section--hero .section__title em {
  color: #d9620c !important;
  text-shadow: 0 1px 14px rgba(255,255,255,0.5);
}
body.sky-day .section--hero .section__desc {
  color: #28384f !important;
  text-shadow: 0 1px 10px rgba(255,255,255,0.55);
}
body.sky-day .section--hero .badge {
  color: #b8560a !important;
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(184,86,10,0.4) !important;
  text-shadow: none;
}

/* 🌙 NOCHE — tipografía CLARA + scrim oscuro */
body.sky-night .section--hero::before {
  background: linear-gradient(to top,
    rgba(8,11,22,0.66) 0%, rgba(8,11,22,0.40) 30%, rgba(8,11,22,0.18) 52%, transparent 78%) !important;
}
body.sky-night .section--hero .section__title {
  color: #faf3ec !important;
  text-shadow: 0 2px 18px rgba(8,11,22,0.6);
}
body.sky-night .section--hero .section__title em {
  color: #ffd24a !important;
}
body.sky-night .section--hero .section__desc {
  color: rgba(250,243,236,0.80) !important;
  text-shadow: 0 2px 14px rgba(8,11,22,0.55);
}

.svc-ed,
.section--sectors,
.section--pricing,
.section--paquetes,
.section--contact,
.section--spline,
.parallax-section,
footer {
  /* Vidrio esmerilado ligero: el cohete del fondo se aprecia claramente detrás, texto nítido encima */
  background: rgba(10,14,26,0.34) !important;
  backdrop-filter: blur(7px) saturate(125%);
  -webkit-backdrop-filter: blur(7px) saturate(125%);
}

/* La sección final (#starfall) transparente: cielo nocturno puro */
.starfall-section { background: transparent !important; }

/* Ocultamos viejos restos de la secuencia y el starfield externo */
.seq-bg, .seq-vignette, .final-rocket-canvas { display: none !important; }
.starfield { display: none !important; }

/* ── Frases motivacionales (se mantienen, ahora sobre el cielo) ── */
.seq-phrases {
  position: fixed;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  transform: translateX(-50%);
  z-index: 90;
  pointer-events: none;
  width: max-content;
  max-width: min(90vw, 720px);
  text-align: center;
}
.seq-phrase {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 18px);
  width: max-content;
  max-width: min(90vw, 720px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px;
  border-radius: 100px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(15px, 2.1vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  background: rgba(12,18,32,0.5);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  filter: blur(6px);
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1),
              transform .7s cubic-bezier(0.16,1,0.3,1),
              filter .6s cubic-bezier(0.16,1,0.3,1);
}
.seq-phrase::before {
  content: '';
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 12px 2px rgba(249,115,22,0.7);
}
.seq-phrase em { font-style: italic; color: #ffd24a; }
.seq-phrase.is-active { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .seq-phrase { white-space: normal; max-width: 84vw; padding: 11px 20px; font-size: 14px; }
  .cloud { width: 220px; }
  .sun-moon { width: 90px; height: 90px; margin-left: -45px; }
}

/* ── Botón Día / Noche ── */
.daynight-toggle {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(18,24,40,0.42);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
  cursor: pointer;
  color: #fff;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1),
              border-color .3s ease, background .4s ease;
}
.daynight-toggle:hover { transform: translateY(-1px) scale(1.03); border-color: rgba(255,210,74,0.5); }
.daynight-toggle:active { transform: scale(0.96); }
.daynight-toggle svg { width: 22px; height: 22px; flex-shrink: 0; }

.daynight-toggle .dn-moon { display: none; }
.daynight-toggle.is-night .dn-sun { display: none; }
.daynight-toggle.is-night .dn-moon { display: block; }
.daynight-toggle.is-night { background: rgba(10,14,28,0.6); }

.dn-label {
  font-family: var(--font-body, 'General Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.daynight-toggle .dn-day  { color: #ffd24a; }
.daynight-toggle .dn-night { color: rgba(255,255,255,0.45); }
.daynight-toggle.is-night .dn-day  { color: rgba(255,255,255,0.45); }
.daynight-toggle.is-night .dn-night { color: #cdd8f5; }

@media (max-width: 600px) {
  .daynight-toggle { top: 12px; right: 12px; padding: 7px 10px; }
  .daynight-toggle .dn-label { display: none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sky__stars .star { animation: none !important; }
  .daynight-toggle { transition: none !important; }
  .seq-phrase { transition: opacity .3s ease; filter: none; transform: translate(-50%,0); }
}