/* ========================================================
   Outer Space Animated & Interactive Background
   ======================================================== */

.space-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -100 !important;
  pointer-events: none;
  overflow: hidden;
  background-color: #000;
}

.space-bg-canvas .stars,
.space-bg-canvas .twinkling,
.space-bg-canvas .clouds {
  position: absolute;
  top: -120px;
  left: -120px;
  right: -120px;
  bottom: -120px;
  width: calc(100% + 240px);
  height: calc(100% + 240px);
  display: block;
  will-change: transform, background-position;
  transform: translate3d(0, 0, 0);
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Layer 1: Deep Starfield */
.space-bg-canvas .stars {
  z-index: 0;
  background: #000 url('../images/bg-stars.png') repeat top center;
}

/* Layer 2: Twinkling moving stars */
.space-bg-canvas .twinkling {
  z-index: 1;
  background: transparent url('../images/bg-twinkling.png') repeat top center;
  animation: move-twink-back 200s linear infinite;
}

/* Layer 3: Cosmic Nebula Clouds */
.space-bg-canvas .clouds {
  z-index: 2;
  background: transparent url('../images/bg-clouds.png') repeat top center;
  opacity: 0.55;
  animation: move-clouds-back 200s linear infinite;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}

/* ========================================================
   Application Showcase Titles - Single Row Layout & Alignment Fix
   ======================================================== */
.massive-heading {
  white-space: nowrap !important;
  line-height: 0.85em !important;
  height: 160px !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: end !important;
  -webkit-align-items: flex-end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  letter-spacing: -1px;
}

/* Dynamic font-size tailored per application title so each fits in ONE single row */
.massive-heading.app-title-cart {
  font-size: clamp(65px, 11.5vw, 155px) !important;
}

.massive-heading.app-title-limud {
  font-size: clamp(55px, 9.5vw, 128px) !important;
}

.massive-heading.app-title-rockola {
  font-size: clamp(68px, 12.5vw, 170px) !important;
}

.massive-heading.app-title-salud {
  font-size: clamp(45px, 7.8vw, 104px) !important;
}

/* Consistent destination heading positioning across all tabs */
.destination-heading {
  margin-top: -85px !important;
  position: relative !important;
  z-index: 2 !important;
}

.destination-heading h4,
.destination-heading .heading-3,
.destination-heading .heading-4 {
  font-size: clamp(32px, 3.8vw, 56px) !important;
  line-height: 1.12em !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  white-space: normal !important;
}

.destination__sub-heading {
  font-size: clamp(16px, 1.8vw, 24px) !important;
  line-height: 1.25em !important;
  margin-top: 6px !important;
  max-width: 680px !important;
}

/* Ensure the white panel container cleanly envelops the content without cutting off */
.left-side-white {
  min-height: 800px !important;
  max-height: 1150px !important;
}

/* Responsive adjustments for tablet and mobile */
@media (max-width: 991px) {
  .massive-heading {
    margin-left: 0 !important;
    height: 110px !important;
  }
  .massive-heading.app-title-cart { font-size: clamp(40px, 9.5vw, 110px) !important; }
  .massive-heading.app-title-limud { font-size: clamp(34px, 8vw, 90px) !important; }
  .massive-heading.app-title-rockola { font-size: clamp(40px, 10vw, 115px) !important; }
  .massive-heading.app-title-salud { font-size: clamp(28px, 6.8vw, 75px) !important; }

  .destination-heading {
    margin-top: -55px !important;
  }
  .destination-heading h4,
  .destination-heading .heading-3,
  .destination-heading .heading-4 {
    font-size: clamp(26px, 4.5vw, 46px) !important;
  }
}

@media (max-width: 767px) {
  .tab-pane {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .massive-heading {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    height: 75px !important;
  }
  .massive-heading.app-title-cart { font-size: clamp(28px, 8.5vw, 60px) !important; }
  .massive-heading.app-title-limud { font-size: clamp(24px, 7.5vw, 52px) !important; }
  .massive-heading.app-title-rockola { font-size: clamp(28px, 9vw, 65px) !important; }
  .massive-heading.app-title-salud { font-size: clamp(20px, 6vw, 42px) !important; }

  .destination-heading {
    margin-top: -38px !important;
  }
  .destination-heading h4,
  .destination-heading .heading-3,
  .destination-heading .heading-4 {
    font-size: clamp(22px, 5.5vw, 36px) !important;
  }
}

@media (max-width: 479px) {
  .massive-heading {
    height: 55px !important;
  }
  .massive-heading.app-title-cart { font-size: clamp(22px, 8vw, 42px) !important; }
  .massive-heading.app-title-limud { font-size: clamp(18px, 6.8vw, 36px) !important; }
  .massive-heading.app-title-rockola { font-size: clamp(22px, 8.5vw, 44px) !important; }
  .massive-heading.app-title-salud { font-size: clamp(16px, 5.4vw, 30px) !important; }

  .destination-heading {
    margin-top: -28px !important;
  }
}

/* ========================================================
   App Landing Page: Redesigned Hero Screenshot Showcase
   ======================================================== */
.app-landing-hero {
  position: relative;
  padding-top: 40px;
  padding-bottom: 70px;
}

.app-hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.app-hero-info {
  flex: 1 1 50%;
  max-width: 560px;
  text-align: left;
}

.app-pill-badge {
  display: inline-block;
  background: rgba(255, 114, 0, 0.18);
  border: 1px solid #ff7200;
  color: #ff8c2b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.app-hero-title {
  font-family: Anton, sans-serif;
  color: #ffffff;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1.05em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.app-hero-tagline {
  color: #ffb570;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.35em;
  margin-bottom: 18px;
}

.app-hero-desc {
  color: #c5cdd8;
  font-size: 15px;
  line-height: 1.6em;
  margin-bottom: 24px;
}

.app-feature-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.app-feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #e2e8f0;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.4em;
}

.app-feature-bullets li span.check {
  color: #2ecc71;
  font-weight: bold;
}

.app-hero-ctas {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Futuristic Browser Frame Mockup */
.app-hero-mockup-wrap {
  flex: 1 1 50%;
  max-width: 600px;
  position: relative;
}

.space-mockup-frame {
  position: relative;
  background: rgba(14, 23, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 114, 0, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.space-mockup-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.9), 0 0 45px rgba(255, 114, 0, 0.25);
}

.space-mockup-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(8, 14, 24, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.mockup-dot.red { background: #ff5f56; }
.mockup-dot.yellow { background: #ffbd2e; }
.mockup-dot.green { background: #27c93f; }

.mockup-url-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 11px;
  color: #8da2be;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
}

.space-mockup-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating feature badges with glassmorphism */
.floating-badge {
  position: absolute;
  background: rgba(12, 21, 36, 0.88);
  border: 1px solid rgba(255, 114, 0, 0.5);
  border-radius: 8px;
  padding: 8px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  animation: floatSlow 5s ease-in-out infinite;
}

.floating-badge.badge-top-left {
  top: -15px;
  left: -15px;
}

.floating-badge.badge-bottom-right {
  bottom: -15px;
  right: -15px;
  animation-delay: -2.5s;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Secondary Screenshot Gallery */
.app-gallery-section {
  padding: 70px 0;
  position: relative;
  z-index: 2;
}

.app-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.app-gallery-card {
  background: rgba(18, 27, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.app-gallery-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 114, 0, 0.6);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 114, 0, 0.2);
}

.app-gallery-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-gallery-card-body {
  padding: 20px;
  text-align: left;
}

.app-gallery-card-badge {
  font-size: 10px;
  color: #ff7200;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.app-gallery-card-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.app-gallery-card-desc {
  color: #9cb0c9;
  font-size: 13px;
  line-height: 1.5em;
  margin: 0;
}

/* Responsive query for App Hero */
@media (max-width: 991px) {
  .app-hero-grid {
    flex-direction: column-reverse;
    text-align: center;
  }
  .app-hero-info {
    max-width: 100%;
    text-align: center;
  }
  .app-feature-bullets li {
    justify-content: center;
  }
  .app-hero-ctas {
    justify-content: center;
  }
  .app-hero-mockup-wrap {
    max-width: 100%;
    width: 100%;
  }
}

/* ========================================================
   Cinematic Entrance Animation & Translucent Window Zoom
   ======================================================== */
.loading-section {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  display: block;
  opacity: 1;
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
  animation: entranceAutoSafety 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes entranceAutoSafety {
  0% {
    opacity: 1;
    visibility: visible;
  }
  75% {
    opacity: 1;
    visibility: visible;
  }
  92% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
  }
}

.loading-section.is-dismissed,
.loading-section.loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
  animation: none !important;
}

.girl-at-window {
  will-change: transform, opacity;
  transform-origin: right bottom;
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.9s ease-out;
}

.window {
  will-change: transform, opacity;
  transform-origin: 45% 50%;
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s ease-out;
}

.loading-bar {
  will-change: transform, opacity;
  transform-origin: left center;
  transition: transform 0.6s ease-out, opacity 0.4s ease-out;
}

/* Animating out: The user zooms into and through the window into open space */
.loading-section.animating-out .girl-at-window {
  transform: translate3d(28vw, 0, 0) scale(1.6) !important;
  opacity: 0 !important;
}

.loading-section.animating-out .window {
  transform: scale(5) translate3d(20vw, 0, 0) !important;
  opacity: 0 !important;
}

.loading-section.animating-out .loading-bar {
  transform: scaleX(1) !important;
  opacity: 0 !important;
}

/* ========================================================
   Cinematic Orange Highlight Headline Reveal Orchestration
   ======================================================== */
.orange-divider {
  -webkit-transform-origin: 0% 50% !important;
  transform-origin: 0% 50% !important;
}

.orange-divider .third,
.orange-divider .eighth {
  -webkit-transform-origin: 0% 50% !important;
  transform-origin: 0% 50% !important;
}

.hold-heading {
  position: relative !important;
}

.spaced-heading {
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out !important;
  transition: opacity 0.2s ease-in-out !important;
}

.spaced-heading.anim-revealed {
  opacity: 1 !important;
}

.absolute-mask {
  position: absolute !important;
  left: -125px !important;
  top: 0px !important;
  width: 750px !important;
  max-width: 100vw !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

@media (max-width: 991px) {
  .absolute-mask {
    left: -10% !important;
    width: 80% !important;
  }
}

@media (max-width: 479px) {
  .absolute-mask {
    left: 0 !important;
    width: 100% !important;
  }
}

.absolute-block,
.absolute-block-bottom {
  -webkit-transform-origin: 0% 50% !important;
  transform-origin: 0% 50% !important;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #ef480e !important;
  opacity: 1 !important;
  will-change: transform, opacity, background-color;
}

.absolute-block {
  left: 0 !important;
  width: 100% !important;
  max-width: 750px !important;
}

.absolute-block-bottom {
  left: 0 !important;
  width: 100% !important;
  max-width: 650px !important;
}

/* Phase 1: Expand horizontally across the title */
.absolute-block.anim-expand,
.absolute-block-bottom.anim-expand {
  -webkit-transform: scaleX(1) !important;
  transform: scaleX(1) !important;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.absolute-block-bottom.anim-expand {
  -webkit-transition-delay: 0.05s !important;
  transition-delay: 0.05s !important;
}

/* Phase 3: Orange blocks wipe away to the right / contract, unveiling title */
.absolute-block.anim-wipe {
  -webkit-transform: translateX(110%) scaleX(1) !important;
  transform: translateX(110%) scaleX(1) !important;
  background-color: #ffffff !important;
  opacity: 0 !important;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.38s ease-out, background-color 0.38s ease-out !important;
  transition: transform 0.45s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.38s ease-out, background-color 0.38s ease-out !important;
}

.absolute-block-bottom.anim-wipe {
  -webkit-transform: translateX(120%) scaleX(1) !important;
  transform: translateX(120%) scaleX(1) !important;
  background-color: #ffffff !important;
  opacity: 0 !important;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.06s, opacity 0.42s ease-out 0.06s, background-color 0.42s ease-out 0.06s !important;
  transition: transform 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.06s, opacity 0.42s ease-out 0.06s, background-color 0.42s ease-out 0.06s !important;
}

/* Completed: hide mask elements completely */
.absolute-block.anim-done,
.absolute-block-bottom.anim-done {
  display: none !important;
}

/* ========================================================
   Landing Pages Title Reveal Box & Animation
   ======================================================== */
.hold-landing-title {
  position: relative !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
}

.hold-landing-title .app-hero-title {
  margin: 0 !important;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out !important;
  transition: opacity 0.2s ease-in-out !important;
}

.hold-landing-title .app-hero-title.anim-revealed {
  opacity: 1 !important;
}

.landing-title-mask {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.landing-title-block {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #ef480e !important;
  -webkit-transform-origin: 0% 50% !important;
  transform-origin: 0% 50% !important;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  opacity: 1 !important;
  will-change: transform, opacity, background-color;
}

.landing-title-block.anim-expand {
  -webkit-transform: scaleX(1) !important;
  transform: scaleX(1) !important;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.landing-title-block.anim-wipe {
  -webkit-transform: translateX(105%) scaleX(1) !important;
  transform: translateX(105%) scaleX(1) !important;
  background-color: #ffffff !important;
  opacity: 0 !important;
  -webkit-transition: -webkit-transform 0.48s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.4s ease-out, background-color 0.4s ease-out !important;
  transition: transform 0.48s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.4s ease-out, background-color 0.4s ease-out !important;
}

.landing-title-block.anim-done {
  display: none !important;
}

/* ========================================================
   Visibility & Layering: Moon Background, Astronaut & Planet Section
   ======================================================== */
.the-moon-below {
  z-index: -11 !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none !important;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-out;
}

/* Movimiento continuo de deriva horizontal muy suave para la Luna (solo derecha a izquierda y viceversa) */
@keyframes moon-horizontal-drift {
  0% {
    transform: translate3d(-24px, 0, 0);
  }
  50% {
    transform: translate3d(24px, 0, 0);
  }
  100% {
    transform: translate3d(-24px, 0, 0);
  }
}

@keyframes moon-horizontal-drift-mobile {
  0% {
    transform: translate3d(-12px, 0, 0);
  }
  50% {
    transform: translate3d(12px, 0, 0);
  }
  100% {
    transform: translate3d(-12px, 0, 0);
  }
}

.the-moon-below img {
  opacity: 1 !important;
  display: block !important;
  will-change: transform;
  animation: moon-horizontal-drift 14s cubic-bezier(0.42, 0, 0.58, 1) infinite !important;
}

@media (max-width: 767px) {
  .the-moon-below img {
    animation-name: moon-horizontal-drift-mobile !important;
    animation-duration: 12s !important;
  }
}

.planet-section {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Animación de ingravidez y flotación cósmica suave para el astronauta */
@keyframes astronaut-floating {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate3d(-6px, -14px, 0) rotate(-1.5deg) scale(1.01);
  }
  50% {
    transform: translate3d(8px, -24px, 0) rotate(1.5deg) scale(1.02);
  }
  75% {
    transform: translate3d(12px, -10px, 0) rotate(0.8deg) scale(1.01);
  }
  90% {
    transform: translate3d(-3px, 4px, 0) rotate(-0.8deg) scale(0.995);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes astronaut-floating-mobile {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate3d(-4px, -10px, 0) rotate(-1deg) scale(1.01);
  }
  50% {
    transform: translate3d(5px, -16px, 0) rotate(1deg) scale(1.015);
  }
  75% {
    transform: translate3d(8px, -6px, 0) rotate(0.5deg) scale(1.008);
  }
  90% {
    transform: translate3d(-2px, 3px, 0) rotate(-0.5deg) scale(0.996);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.astronaut {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 4 !important;
  pointer-events: none !important;
  transform-origin: center center !important;
  will-change: transform !important;
  animation: astronaut-floating 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
  transition: opacity 0.8s ease-out;
}

@media (max-width: 767px) {
  .astronaut {
    animation-name: astronaut-floating-mobile !important;
    animation-duration: 8s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .astronaut,
  .the-moon-below img {
    animation: none !important;
  }
}

.image-4 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========================================================
   Ajustes Específicos de Títulos y Eliminación de Efectos/Blur
   ======================================================== */

/* 1. Quitarle el efecto a "Ecosistema & Software" */
.orange-call-out,
.tiny-orange-call-out {
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. Quitarle el efecto a "Aplicaciones Disponibles" y "Potenciado por Phoenix & Elixir" */
#destinations.heading-2,
.planet-section .heading-2,
#phoenix .heading-2,
.ship-section .heading-2,
.heading-2 {
  color: #000000 !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* En las páginas de aplicaciones (app-*.html), donde la cabecera es oscura: */
.app-landing-hero .app-hero-title,
.app-gallery-section .heading-2 {
  color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
}

/* 3. Títulos de cada Aplicación Disponible que quedan debajo de los títulos y subtítulos:
   "<h3 ... class="massive-heading app-title-cart">CART WMS</h3>"
   Sombra más baja a un 20% (sin blur excesivo) */
.massive-heading,
.massive-heading.app-title-cart,
.massive-heading.app-title-limud,
.massive-heading.app-title-rockola,
.massive-heading.app-title-salud {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.massive-heading-right {
  opacity: 0.15 !important;
  color: #ff7200 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 4. En algunos puntos se ve blur:
   Eliminación completa de blur de fondo y de cajas que cubrían los cohetes */
.stage-descriptor {
  position: absolute !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px dashed hsla(0, 0%, 70%, .65) !important;
  padding: 0 !important;
  filter: none !important;
}

.stage-descriptor > div:first-child {
  color: #ff7200 !important;
  font-weight: bold !important;
  text-shadow: none !important;
  filter: none !important;
}

.stage-descriptor > div:last-child {
  color: rgba(84, 87, 92, .85) !important;
  font-size: 11px !important;
  text-shadow: none !important;
  filter: none !important;
}

.ships-row,
.ships-row .flexed-col,
.flexed-col {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Títulos y subtítulos en los tabs de destinos de index.html (fondo blanco) */
.tab-pane .destination-heading h4,
.tab-pane .destination-heading .heading-3,
.tab-pane .destination-heading .heading-4 {
  color: #000000 !important;
  text-shadow: none !important;
}

.tab-pane .destination__sub-heading {
  color: #000000 !important;
  text-shadow: none !important;
}

/* En la sección BEAM (#phoenix): */
#phoenix .destination__sub-heading {
  color: #ff7200 !important;
  text-shadow: none !important;
}

#phoenix .destination__description {
  position: relative !important;
  z-index: 2 !important;
  color: #f1f5f9 !important;
  font-size: 15px !important;
  line-height: 1.75em !important;
  max-width: 860px !important;
  background: rgba(14, 22, 38, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
  margin-top: 20px !important;
  margin-bottom: 24px !important;
  column-count: 1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

#phoenix .destination__description strong {
  color: #38bdf8 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* En las páginas de app (app-*.html) */
.app-landing-hero .destination__sub-heading,
.app-gallery-section .destination__sub-heading,
.ship-section .destination__sub-heading {
  text-shadow: none !important;
}

.app-landing-hero p,
.app-gallery-section p,
.app-feature-bullets li {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ========================================================
   Formulario de Cotización Cósmico en Vidrio de Alto Contraste
   ======================================================== */
.form-parent {
  color: #e2e8f0 !important;
}

.form__description {
  color: #cbd5e1 !important;
  opacity: 1 !important;
  font-size: 15px !important;
}

.form__main {
  background: rgba(14, 22, 38, 0.88) !important;
  background-image: linear-gradient(90deg, rgba(14, 22, 38, 0.92) 85%, rgba(239, 72, 14, 0.95) 90%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.form__descriptor-heading {
  color: #ffb570 !important;
}

.partial-column, .partial-column-third {
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .partial-column.left {
    width: 23% !important;
    padding: 18px 12px 10px 24px !important;
  }

  .partial-column.right {
    width: 22% !important;
    padding: 18px 12px 10px 18px !important;
  }

  .partial-column-third {
    width: 23% !important;
    padding: 18px 12px 10px 18px !important;
  }

  .form__main > .partial-column:nth-of-type(4) {
    width: 15% !important;
    padding: 18px 10px 10px 14px !important;
  }

  .get-started-orange {
    width: 17% !important;
    padding: 34px 12px !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  .main-nav__cta {
    display: none !important;
  }

  .main-nav__logo {
    width: 140px !important;
    max-width: 145px !important;
    height: 40px !important;
  }

  .partial-column,
  .partial-column.left,
  .partial-column.right,
  .partial-column-third,
  .form__main > .partial-column:nth-of-type(4) {
    width: 50% !important;
    padding: 14px 12px 10px 16px !important;
    box-sizing: border-box !important;
  }

  .get-started-orange {
    width: 100% !important;
    padding: 20px 16px !important;
    font-size: 18px !important;
  }
}

/* Expanded Selectors: Never truncate labels */
.destination,
.hold-floating-departures,
.voyage-date-parent {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
}

.form-dropdown {
  color: #ffffff !important;
  padding: 8px 15px 7px 0px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.form-icon {
  margin-right: 0 !important;
  margin-left: 8px !important;
  float: none !important;
  flex-shrink: 0 !important;
}

#selected-enfoque-text,
#selected-empleados-text,
#selected-usuarios-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Enlarged Floating Menus */
.form-dropdown-list.w--open {
  width: max-content !important;
  min-width: 250px !important;
  max-width: 320px !important;
  border-radius: 16px !important;
  padding: 8px 0 !important;
  background: rgba(12, 20, 36, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 9999 !important;
}

.form-dropdown-link {
  display: block !important;
  white-space: nowrap !important;
  padding: 12px 22px !important;
  font-size: 13.5px !important;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
}

.form-dropdown-link:hover {
  background: rgba(255, 114, 0, 0.3) !important;
  color: #ffffff !important;
  padding-left: 26px !important;
}

.plus-minus {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ff7200 !important;
}

.number {
  color: #ffffff !important;
}

/* ==========================================================================
   HEADER NAVIGATION - APLICACIONES DROPDOWN ENHANCEMENT
   ========================================================================== */
.main-nav__dropdown {
  position: relative !important;
  display: inline-block !important;
  cursor: pointer !important;
  z-index: 1000 !important;
}

.main-nav__dropdown .w-dropdown-toggle {
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

.main-nav__dropdown:hover .w-dropdown-toggle,
.main-nav__dropdown.is-open .w-dropdown-toggle,
.main-nav__dropdown.is-clicked .w-dropdown-toggle,
.main-nav__dropdown.w--open .w-dropdown-toggle {
  opacity: 1 !important;
  color: #d2f329 !important;
}

.main-nav__dropdown:hover .main-nav__icon,
.main-nav__dropdown.is-open .main-nav__icon,
.main-nav__dropdown.is-clicked .main-nav__icon,
.main-nav__dropdown.w--open .main-nav__icon {
  color: #d2f329 !important;
  transform: rotate(180deg) !important;
}

.main-nav__dropdown .main-nav__icon {
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.main-nav__dropdown-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  margin-top: 8px !important;
  background: rgba(8, 16, 30, 0.97) !important;
  border: 1px solid rgba(255, 114, 0, 0.45) !important;
  border-radius: 12px !important;
  padding: 8px 0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 114, 0, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 10000 !important;
  transform-origin: top left !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(0.97) !important;
  display: block !important;
}

/* Invisible pointer bridge between button and dropdown to prevent mouseleave gap */
.main-nav__dropdown-list::before {
  content: "" !important;
  position: absolute !important;
  top: -14px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  background: transparent !important;
  pointer-events: auto !important;
}

/* Open on hover OR open on click (.is-open, .is-clicked or .w--open) */
.main-nav__dropdown:hover .main-nav__dropdown-list,
.main-nav__dropdown.is-open .main-nav__dropdown-list,
.main-nav__dropdown.is-clicked .main-nav__dropdown-list,
.main-nav__dropdown.w--open .main-nav__dropdown-list,
.main-nav__dropdown-list.w--open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.main-nav__dropdown-link {
  display: block !important;
  padding: 12px 20px !important;
  color: #e2e8f0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer !important;
}

.main-nav__dropdown-link:last-of-type {
  border-bottom: none !important;
}

.main-nav__dropdown-link:hover,
.main-nav__dropdown-link:focus {
  background: rgba(255, 114, 0, 0.25) !important;
  color: #ffffff !important;
  padding-left: 24px !important;
}

.main-nav__dropdown-link.w--current {
  color: #ff7200 !important;
  font-weight: 700 !important;
}

@media (max-width: 991px) {
  .nav-menu {
    background: rgba(7, 14, 28, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 114, 0, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9) !important;
    padding-bottom: 15px !important;
  }
  .main-nav__dropdown {
    display: block !important;
    width: 100% !important;
  }
  .main-nav__dropdown .w-dropdown-toggle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .main-nav__dropdown-list {
    position: static !important;
    width: calc(100% - 32px) !important;
    min-width: unset !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    margin: 4px 16px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(210, 243, 41, 0.3) !important;
    border-left: 3px solid #d2f329 !important;
    background: rgba(13, 24, 44, 0.95) !important;
    box-sizing: border-box !important;
  }
  .main-nav__dropdown.is-open .main-nav__dropdown-list,
  .main-nav__dropdown.is-clicked .main-nav__dropdown-list,
  .main-nav__dropdown.w--open .main-nav__dropdown-list {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .main-nav__dropdown:not(.is-open):not(.is-clicked):not(.w--open) .main-nav__dropdown-list {
    display: none !important;
  }
  .main-nav__dropdown-link {
    padding: 12px 18px !important;
    font-size: 13px !important;
  }
}

/* Elevate hero-section & book-flight-section stacking context when modal is open so navbar is below backdrop */
.hero-section:has(.modal__parent[style*="display: flex"]),
.hero-section:has(.modal__parent[style*="display: block"]),
.book-flight-section:has(.modal__parent[style*="display: flex"]),
.book-flight-section:has(.modal__parent[style*="display: block"]),
body.has-modal-open .hero-section,
body.has-modal-open .book-flight-section {
  z-index: 999999 !important;
}

.modal__parent {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 999999 !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.modal__bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(2, 6, 16, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.modal__container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 540px !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  margin: auto !important;
  padding: 38px 32px 34px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  background-color: #060e1c !important;
  background-image: 
    linear-gradient(180deg, rgba(7, 15, 28, 0.88) 0%, rgba(4, 9, 18, 0.94) 100%),
    url('../images/modal-space-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255, 114, 0, 0.45) !important;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.95), 
    0 0 40px rgba(255, 114, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: #f8fafc !important;
  z-index: 2 !important;
}

/* Modal Heading: Dark typography with vivid light glowing shadows for high-contrast visibility */
.modal__heading {
  color: #081426 !important;
  font-family: Anton, sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 1.5px !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  text-shadow: 
    0 0 1px #ffffff,
    0 0 3px #ffffff,
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 20px rgba(210, 243, 41, 0.85),
    0 0 35px rgba(255, 114, 0, 0.65),
    0 2px 4px rgba(255, 255, 255, 0.9) !important;
  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.85);
}

/* Modal Subtitle */
.modal__container p {
  color: #dce7f3 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Quotation Parameters Summary Box */
#quote-params-box {
  background: rgba(9, 19, 36, 0.88) !important;
  border: 1px solid rgba(255, 114, 0, 0.5) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  font-size: 13.5px !important;
  text-align: left !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 114, 0, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#quote-params-box div {
  margin-bottom: 5px !important;
}

#quote-params-box div:last-child {
  margin-bottom: 0 !important;
}

#quote-params-box strong {
  color: #ff8c26 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  margin-right: 4px !important;
}

#quote-params-box span {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Form Styles inside Modal */
#quote-request-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  text-align: left !important;
}

#quote-request-form label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #ffaa5e !important;
  margin-bottom: 5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

#quote-request-form input[type="text"],
#quote-request-form input[type="email"],
#quote-request-form input[type="tel"],
#quote-request-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  background: rgba(11, 22, 38, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

#quote-request-form input:focus,
#quote-request-form textarea:focus {
  background: rgba(16, 29, 50, 0.98) !important;
  border-color: #ff7200 !important;
  box-shadow: 0 0 14px rgba(255, 114, 0, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
}

#quote-request-form input::placeholder,
#quote-request-form textarea::placeholder {
  color: rgba(200, 215, 235, 0.55) !important;
}

/* Submit Button */
#quote-request-form button[type="submit"],
#btn-submit-quote {
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, #ff7200 0%, #e65100 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 22px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  box-shadow: 0 4px 22px rgba(255, 114, 0, 0.45) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

#quote-request-form button[type="submit"]:hover,
#btn-submit-quote:hover {
  background: linear-gradient(135deg, #ff851a 0%, #ff5e00 100%) !important;
  box-shadow: 0 6px 30px rgba(255, 114, 0, 0.7) !important;
  transform: translateY(-1px) !important;
}

/* Close Button: Dark navy with crisp bright halo starlight shadows inside circular glass pill */
.modal__container .close-button {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  line-height: 36px !important;
  font-size: 32px !important;
  text-align: center !important;
  border-radius: 50% !important;
  background: rgba(8, 16, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #0b172a !important;
  text-shadow: 
    0 0 2px #ffffff,
    0 0 6px #ffffff,
    0 0 14px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(210, 243, 41, 0.8) !important;
  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.85);
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
  z-index: 10 !important;
}

.modal__container .close-button:hover {
  background: rgba(255, 114, 0, 0.25) !important;
  border-color: #d2f329 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0px !important;
  text-shadow: 0 0 15px #d2f329, 0 0 30px #d2f329, 0 0 45px #ff7200 !important;
  transform: rotate(135deg) scale(1.1) !important;
}

/* Custom Scrollbar for Modal */
.modal__container::-webkit-scrollbar {
  width: 6px;
}
.modal__container::-webkit-scrollbar-track {
  background: rgba(4, 9, 18, 0.7);
  border-radius: 4px;
}
.modal__container::-webkit-scrollbar-thumb {
  background: rgba(255, 114, 0, 0.45);
  border-radius: 4px;
}
.modal__container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 114, 0, 0.8);
}

@media (max-width: 600px) {
  .modal__parent {
    padding: 10px !important;
  }
  .modal__container {
    padding: 30px 18px 24px !important;
    border-radius: 16px !important;
    max-height: 94vh !important;
  }
  .modal__heading {
    font-size: 23px !important;
    padding-right: 36px !important;
    letter-spacing: 1px !important;
  }
  .modal__container p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }
  #quote-params-box {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
    margin-bottom: 14px !important;
  }
  .modal__container .close-button {
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    font-size: 26px !important;
  }
}

/* Success Banner */
#quote-success-banner {
  background: rgba(14, 38, 26, 0.92) !important;
  border: 1px solid #2ecc71 !important;
  border-radius: 8px !important;
  padding: 18px !important;
  margin-top: 16px !important;
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.3) !important;
  color: #2ecc71 !important;
  text-align: center !important;
}

/* ==========================================================================
   PLANET TABS - SERVICE SVG ICONS & ANIMATIONS (ACTIVE & INACTIVE STATES)
   ========================================================================== */
.planet-tab {
  position: relative !important;
}

.planet-tab__icon-badge {
  position: absolute !important;
  top: 48% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
  background: rgba(8, 16, 30, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease !important;
}

.planet-tab__icon-badge .service-svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  overflow: visible !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* --------------------------------------------------------------------------
   1. ESTADO INACTIVO (Tabs NO seleccionadas: animación calmada de reposo / idle)
   -------------------------------------------------------------------------- */
.planet-tab:not(.w--current) .planet-tab__icon-badge {
  opacity: 0.82 !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Hover sobre tab inactiva: previsualización viva */
.planet-tab:not(.w--current):hover .planet-tab__icon-badge {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

/* WMS Inactivo: Flotación suave y escaneo tenue */
.planet-tab:not(.w--current) .wms-box-group {
  animation: wms-box-idle 4s ease-in-out infinite !important;
}
.planet-tab:not(.w--current) .wms-laser-beam {
  animation: wms-scan-idle 5.5s ease-in-out infinite !important;
  opacity: 0.3 !important;
}
.planet-tab:not(.w--current) .wms-laser-dot {
  opacity: 0.25 !important;
}

/* EdTech Inactivo: Flotación lenta y parpadeo pausado */
.planet-tab:not(.w--current) .edtech-cap-group {
  animation: edtech-cap-idle 4.5s ease-in-out infinite !important;
}
.planet-tab:not(.w--current) .edtech-spark {
  animation: edtech-spark-idle 5s ease-in-out infinite !important;
  opacity: 0.45 !important;
}
.planet-tab:not(.w--current) .edtech-tassel {
  animation: edtech-tassel-idle 4s ease-in-out infinite !important;
}

/* Media Inactivo: Rotación lenta de vinilo y barras en calma */
.planet-tab:not(.w--current) .media-vinyl-group {
  transform-origin: 24px 24px !important;
  animation: media-vinyl-idle 14s linear infinite !important;
}
.planet-tab:not(.w--current) .media-bar {
  transform-origin: bottom !important;
  animation: media-bar-idle 3s ease-in-out infinite alternate !important;
  opacity: 0.45 !important;
}

/* Health Inactivo: Latido cardíaco en reposo y flujo tenue */
.planet-tab:not(.w--current) .health-cross-group {
  transform-origin: 24px 23px !important;
  animation: health-cross-idle 3.5s ease-in-out infinite !important;
}
.planet-tab:not(.w--current) .health-ecg-line {
  stroke-dasharray: 60 !important;
  animation: health-ecg-idle 4s ease-in-out infinite !important;
  opacity: 0.6 !important;
}
.planet-tab:not(.w--current) .health-vital-dot {
  opacity: 0.4 !important;
}

/* --------------------------------------------------------------------------
   2. ESTADO ACTIVO (.w--current: Brillo neón enérgico, movimiento dinámico)
   -------------------------------------------------------------------------- */
.planet-tab.w--current .planet-tab__icon-badge {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Cart WMS ACTIVO (Naranja Cósmico) */
.planet-tab.w--current .tab-icon-wms {
  border-color: #ff7200 !important;
  background: rgba(255, 114, 0, 0.22) !important;
  box-shadow: 0 0 22px rgba(255, 114, 0, 0.85), inset 0 0 10px rgba(255, 114, 0, 0.35) !important;
  animation: badge-pulse-wms 2.4s ease-in-out infinite !important;
}
.planet-tab.w--current .wms-box-group {
  animation: wms-box-active 2.2s ease-in-out infinite !important;
}
.planet-tab.w--current .wms-laser-beam {
  animation: wms-scan-active 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
.planet-tab.w--current .wms-laser-dot {
  animation: wms-dot-active 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
.planet-tab.w--current .wms-barcode {
  animation: wms-barcode-active 1.2s ease-in-out infinite alternate !important;
}

/* Limud Beel ACTIVO (Cian / Azul Eléctrico) */
.planet-tab.w--current .tab-icon-edtech {
  border-color: #00d2ff !important;
  background: rgba(0, 210, 255, 0.22) !important;
  box-shadow: 0 0 22px rgba(0, 210, 255, 0.85), inset 0 0 10px rgba(0, 210, 255, 0.35) !important;
  animation: badge-pulse-edtech 2.4s ease-in-out infinite !important;
}
.planet-tab.w--current .edtech-spark {
  transform-origin: 24px 13px !important;
  animation: edtech-spark-active 3s linear infinite !important;
}
.planet-tab.w--current .edtech-cap-group {
  animation: edtech-cap-active 2.6s ease-in-out infinite !important;
}
.planet-tab.w--current .edtech-tassel {
  transform-origin: 24px 20px !important;
  animation: edtech-tassel-active 1.8s ease-in-out infinite !important;
}
.planet-tab.w--current .edtech-book {
  animation: edtech-book-active 2s ease-in-out infinite alternate !important;
}

/* Rockola ACTIVO (Magenta / Rojo Neón) */
.planet-tab.w--current .tab-icon-media {
  border-color: #ff2a6d !important;
  background: rgba(255, 42, 109, 0.22) !important;
  box-shadow: 0 0 22px rgba(255, 42, 109, 0.85), inset 0 0 10px rgba(255, 42, 109, 0.35) !important;
  animation: badge-pulse-media 2.4s ease-in-out infinite !important;
}
.planet-tab.w--current .media-vinyl-group {
  transform-origin: 24px 24px !important;
  animation: media-vinyl-active 3.8s linear infinite !important;
}
.planet-tab.w--current .media-bar-1 {
  transform-origin: 16px 36px !important;
  animation: media-eq-bar-1 0.7s ease-in-out infinite alternate !important;
}
.planet-tab.w--current .media-bar-2 {
  transform-origin: 21px 36px !important;
  animation: media-eq-bar-2 0.55s ease-in-out infinite alternate 0.15s !important;
}
.planet-tab.w--current .media-bar-3 {
  transform-origin: 26.5px 36px !important;
  animation: media-eq-bar-3 0.8s ease-in-out infinite alternate 0.1s !important;
}
.planet-tab.w--current .media-bar-4 {
  transform-origin: 32px 36px !important;
  animation: media-eq-bar-4 0.6s ease-in-out infinite alternate 0.25s !important;
}

/* Salud Digital ACTIVO (Verde Esmeralda / Lima) */
.planet-tab.w--current .tab-icon-health {
  border-color: #00f076 !important;
  background: rgba(0, 240, 118, 0.22) !important;
  box-shadow: 0 0 22px rgba(0, 240, 118, 0.85), inset 0 0 10px rgba(0, 240, 118, 0.35) !important;
  animation: badge-pulse-health 2.4s ease-in-out infinite !important;
}
.planet-tab.w--current .health-cross-group {
  transform-origin: 24px 23px !important;
  animation: health-heartbeat-active 1.35s ease-in-out infinite !important;
}
.planet-tab.w--current .health-ecg-line {
  stroke-dasharray: 60 !important;
  animation: health-ecg-active 1.5s linear infinite !important;
}
.planet-tab.w--current .health-vital-dot {
  animation: health-dot-active 1.35s ease-in-out infinite !important;
}

/* --------------------------------------------------------------------------
   KEYFRAMES: ANIMACIONES INACTIVAS (IDLE)
   -------------------------------------------------------------------------- */
@keyframes wms-box-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes wms-scan-idle {
  0%, 100% { transform: translateY(-6px); opacity: 0.15; }
  50% { transform: translateY(6px); opacity: 0.45; }
}

@keyframes edtech-cap-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes edtech-spark-idle {
  0%, 100% { transform: rotate(0deg) scale(0.9); opacity: 0.3; }
  50% { transform: rotate(90deg) scale(1.05); opacity: 0.6; }
}
@keyframes edtech-tassel-idle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(4deg); }
}

@keyframes media-vinyl-idle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes media-bar-idle {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(0.65); }
}

@keyframes health-cross-idle {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.03); opacity: 1; }
}
@keyframes health-ecg-idle {
  0% { stroke-dashoffset: 60; opacity: 0.3; }
  50% { stroke-dashoffset: 0; opacity: 0.7; }
  100% { stroke-dashoffset: -60; opacity: 0.3; }
}

/* --------------------------------------------------------------------------
   KEYFRAMES: ANIMACIONES ACTIVAS (ACTIVE)
   -------------------------------------------------------------------------- */
/* Pulso de Aura en Badge */
@keyframes badge-pulse-wms {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 114, 0, 0.7), inset 0 0 8px rgba(255, 114, 0, 0.3); }
  50% { box-shadow: 0 0 28px rgba(255, 114, 0, 0.95), inset 0 0 14px rgba(255, 114, 0, 0.5); }
}
@keyframes badge-pulse-edtech {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 210, 255, 0.7), inset 0 0 8px rgba(0, 210, 255, 0.3); }
  50% { box-shadow: 0 0 28px rgba(0, 210, 255, 0.95), inset 0 0 14px rgba(0, 210, 255, 0.5); }
}
@keyframes badge-pulse-media {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 42, 109, 0.7), inset 0 0 8px rgba(255, 42, 109, 0.3); }
  50% { box-shadow: 0 0 28px rgba(255, 42, 109, 0.95), inset 0 0 14px rgba(255, 42, 109, 0.5); }
}
@keyframes badge-pulse-health {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 240, 118, 0.7), inset 0 0 8px rgba(0, 240, 118, 0.3); }
  50% { box-shadow: 0 0 28px rgba(0, 240, 118, 0.95), inset 0 0 14px rgba(0, 240, 118, 0.5); }
}

/* WMS Activo */
@keyframes wms-box-active {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(255, 114, 0, 0.6)); }
  50% { transform: translateY(-3px); filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.95)); }
}
@keyframes wms-scan-active {
  0% { transform: translateY(-8px); opacity: 0.2; }
  50% { transform: translateY(8px); opacity: 1; filter: drop-shadow(0 0 6px #ff3b00); }
  100% { transform: translateY(-8px); opacity: 0.2; }
}
@keyframes wms-dot-active {
  0% { transform: translateY(-8px) scale(0.6); opacity: 0.3; }
  50% { transform: translateY(8px) scale(1.4); opacity: 1; filter: drop-shadow(0 0 8px #ffffff); }
  100% { transform: translateY(-8px) scale(0.6); opacity: 0.3; }
}
@keyframes wms-barcode-active {
  0% { opacity: 0.5; }
  100% { opacity: 1; filter: drop-shadow(0 0 4px #d2f329); }
}

/* EdTech Activo */
@keyframes edtech-spark-active {
  0% { transform: rotate(0deg) scale(0.85); opacity: 0.6; filter: drop-shadow(0 0 3px #00ffff); }
  50% { transform: rotate(180deg) scale(1.25); opacity: 1; filter: drop-shadow(0 0 12px #00ffff); }
  100% { transform: rotate(360deg) scale(0.85); opacity: 0.6; filter: drop-shadow(0 0 3px #00ffff); }
}
@keyframes edtech-cap-active {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px rgba(0, 210, 255, 0.6)); }
  50% { transform: translateY(-3px); filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.95)); }
}
@keyframes edtech-tassel-active {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}
@keyframes edtech-book-active {
  0% { opacity: 0.7; }
  100% { opacity: 1; filter: drop-shadow(0 0 5px #00d2ff); }
}

/* Media Activo */
@keyframes media-vinyl-active {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes media-eq-bar-1 {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); filter: drop-shadow(0 0 6px #00ffff); }
}
@keyframes media-eq-bar-2 {
  0% { transform: scaleY(0.9); }
  100% { transform: scaleY(0.35); filter: drop-shadow(0 0 6px #ff2a6d); }
}
@keyframes media-eq-bar-3 {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1); filter: drop-shadow(0 0 6px #ffd700); }
}
@keyframes media-eq-bar-4 {
  0% { transform: scaleY(0.8); }
  100% { transform: scaleY(0.4); filter: drop-shadow(0 0 6px #ff7200); }
}

/* Health Activo */
@keyframes health-heartbeat-active {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(0, 240, 118, 0.5)); }
  14% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(0, 240, 118, 0.9)); }
  28% { transform: scale(1.02); }
  42% { transform: scale(1.15); filter: drop-shadow(0 0 14px rgba(0, 240, 118, 1)); }
  60% { transform: scale(1); }
}
@keyframes health-ecg-active {
  0% { stroke-dashoffset: 60; opacity: 0.4; }
  50% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 8px #ffffff); }
  100% { stroke-dashoffset: -60; opacity: 0.4; }
}
@keyframes health-dot-active {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  42% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 8px #d2f329); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN (Tablets y Smartphones)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .planet-tab__icon-badge {
    width: 38px !important;
    height: 38px !important;
  }
  .planet-tab__icon-badge .service-svg {
    width: 25px !important;
    height: 25px !important;
  }
}

@media (max-width: 479px) {
  .planet-tab__icon-badge {
    width: 32px !important;
    height: 32px !important;
  }
  .planet-tab__icon-badge .service-svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planet-tab__icon-badge,
  .wms-box-group,
  .wms-laser-beam,
  .edtech-spark,
  .edtech-cap-group,
  .edtech-tassel,
  .media-vinyl-group,
  .media-bar,
  .health-cross-group,
  .health-ecg-line {
    animation: none !important;
  }
}

/* ==========================================================================
   PHOENIX & ELIXIR OFFICIAL BRAND BADGES (SCROLL REVEAL & LOOP ANIMATIONS)
   Posiciones exactas según captura:
   - Superior (Phoenix): Círculo rojo sobre la 'M' de BEAM
   - Inferior (Elixir): Óvalo rojo en espacio en blanco junto a la descripción
   ========================================================================== */
.phoenix-official-badges {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

#phoenix .destination__description {
  max-width: 600px !important;
}

/* Base Card Badge */
.tech-badge {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 18px !important;
  border-radius: 16px !important;
  background: rgba(14, 22, 38, 0.95) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease !important;
}

.tech-badge--floating {
  position: absolute !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/* Posición 1 (Círculo Superior): Phoenix Framework sobre la 'M' de BEAM */
.tech-badge--top {
  top: 90px !important;
  right: 28px !important;
  width: 310px !important;
  opacity: 0;
  transform: translateY(-24px) scale(0.92);
}

/* Posición 2 (Óvalo Inferior): Elixir en el espacio blanco junto al texto */
.tech-badge--bottom {
  top: 330px !important;
  right: 60px !important;
  width: 290px !important;
  opacity: 0;
  transform: translateY(28px) scale(0.92) rotate(-2deg);
}

/* Activación al entrar en scroll viewport (Scroll Reveal) */
.phoenix-official-badges.is-in-view .tech-badge--top {
  opacity: 1 !important;
  transform: translateY(0) scale(1) rotate(0deg) !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
  animation: tech-badge-float-top 6.2s ease-in-out infinite 0.75s !important;
}

.phoenix-official-badges.is-in-view .tech-badge--bottom {
  opacity: 1 !important;
  transform: translateY(0) scale(1) rotate(-1.5deg) !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
  animation: tech-badge-float-bottom 6.8s ease-in-out infinite 0.9s !important;
}

/* Badge Icon Container */
.tech-badge__icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: rgba(8, 14, 26, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.tech-badge__icon .tech-svg {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
  overflow: visible !important;
}

/* Content Text */
.tech-badge__content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.tech-badge__meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tech-badge__label {
  font-size: 9px !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  opacity: 0.8 !important;
}

.tech-badge__chip {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 1.5px 6px !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.tech-chip--purple {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #d8b4fe !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
}

.tech-chip--orange {
  background: rgba(255, 114, 0, 0.25) !important;
  color: #ffaa5a !important;
  border: 1px solid rgba(255, 114, 0, 0.45) !important;
}

.tech-badge__title {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.tech-badge__url {
  font-size: 11px !important;
  color: #38bdf8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: monospace, sans-serif !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
  letter-spacing: -0.2px !important;
}

.tech-badge__arrow {
  display: inline-block !important;
  transition: transform 0.25s ease !important;
}

/* --------------------------------------------------------------------------
   BRAND ACCENTS: ELIXIR
   -------------------------------------------------------------------------- */
.tech-badge--elixir {
  border-color: rgba(168, 85, 247, 0.35) !important;
}

.tech-badge--elixir .tech-badge__label {
  color: #c084fc !important;
}

.tech-badge--elixir:hover {
  background: rgba(24, 18, 44, 0.98) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 16px 36px -4px rgba(168, 85, 247, 0.4), 0 0 24px rgba(168, 85, 247, 0.3) !important;
}

.tech-badge--elixir:hover .tech-badge__arrow {
  transform: translate(3px, -3px) !important;
  color: #e9d5ff !important;
}

/* Animaciones en loop para Elixir */
.elixir-orbit-ring {
  transform-origin: 24px 24px !important;
  animation: tech-orbit-spin 8s linear infinite !important;
}
.elixir-orbit-dot {
  transform-origin: 24px 24px !important;
  animation: tech-orbit-spin 8s linear infinite !important;
  filter: drop-shadow(0 0 4px #c084fc);
}
.elixir-droplet {
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.75));
  animation: elixir-drop-pulse 3s ease-in-out infinite !important;
}
.elixir-shine {
  animation: elixir-shine-sweep 3s ease-in-out infinite alternate !important;
}
.elixir-sparkle {
  animation: elixir-sparkle-blink 2.2s ease-in-out infinite alternate !important;
}

/* --------------------------------------------------------------------------
   BRAND ACCENTS: PHOENIX FRAMEWORK
   -------------------------------------------------------------------------- */
.tech-badge--phoenix {
  border-color: rgba(255, 114, 0, 0.35) !important;
}

.tech-badge--phoenix .tech-badge__label {
  color: #ff9a00 !important;
}

.tech-badge--phoenix:hover {
  background: rgba(40, 18, 12, 0.98) !important;
  border-color: #ff7200 !important;
  box-shadow: 0 16px 36px -4px rgba(255, 114, 0, 0.45), 0 0 24px rgba(255, 114, 0, 0.35) !important;
}

.tech-badge--phoenix:hover .tech-badge__arrow {
  transform: translate(3px, -3px) !important;
  color: #fed7aa !important;
}

/* Microinteracciones Hover con Pausa en Animación */
.phoenix-official-badges.is-in-view .tech-badge--top:hover {
  transform: translateY(-6px) scale(1.04) rotate(0deg) !important;
  animation-play-state: paused !important;
}

.phoenix-official-badges.is-in-view .tech-badge--bottom:hover {
  transform: translateY(-6px) scale(1.04) rotate(0deg) !important;
  animation-play-state: paused !important;
}

/* Animaciones en loop para Phoenix */
.phoenix-orbit-ring {
  transform-origin: 24px 24px !important;
  animation: tech-orbit-spin-reverse 7s linear infinite !important;
}
.phoenix-orbit-dot {
  transform-origin: 24px 24px !important;
  animation: tech-orbit-spin-reverse 7s linear infinite !important;
  filter: drop-shadow(0 0 6px #ffd700);
}
.phoenix-firebird {
  filter: drop-shadow(0 0 8px rgba(255, 114, 0, 0.85));
  animation: phoenix-flame-pulse 2.2s ease-in-out infinite alternate !important;
}

/* --------------------------------------------------------------------------
   KEYFRAMES LOOP ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes tech-badge-float-top {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) scale(1.01) rotate(0.8deg);
  }
}

@keyframes tech-badge-float-bottom {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(-1.5deg);
  }
  50% {
    transform: translateY(7px) scale(1.01) rotate(-0.5deg);
  }
}

@keyframes tech-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tech-orbit-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes elixir-drop-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.95));
  }
}

@keyframes elixir-shine-sweep {
  0% { opacity: 0.5; }
  100% { opacity: 0.95; }
}

@keyframes elixir-sparkle-blink {
  0% { transform: scale(0.6); opacity: 0.4; }
  100% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 4px #ffffff); }
}

@keyframes phoenix-flame-pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(255, 114, 0, 0.7));
  }
  50% {
    transform: scale(1.08) translateY(-1px);
    filter: drop-shadow(0 0 16px rgba(255, 60, 0, 1));
  }
  100% {
    transform: scale(0.98) translateY(1px);
    filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8));
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 992px) {
  .tech-badge--top {
    right: 25px !important;
    width: 240px !important;
  }
  .tech-badge--bottom {
    right: 35px !important;
    width: 240px !important;
  }
  #phoenix .destination__description {
    max-width: 530px !important;
  }
}

@media (max-width: 991px) {
  .phoenix-official-badges {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-top: 24px !important;
    margin-bottom: 32px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10 !important;
  }
  .tech-badge--floating,
  .tech-badge--top,
  .tech-badge--bottom {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 360px !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
  .phoenix-official-badges.is-in-view .tech-badge--top,
  .phoenix-official-badges.is-in-view .tech-badge--bottom {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 640px) {
  .phoenix-official-badges {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    padding: 0 8px !important;
  }
  .tech-badge--floating,
  .tech-badge--top,
  .tech-badge--bottom {
    width: 100% !important;
    max-width: 340px !important;
    padding: 12px 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ========================================================
   Responsive Header Nav Labels & Icons (Mobile Top Header)
   ======================================================== */
.nav-text-desktop {
  display: inline !important;
}
.nav-text-mobile {
  display: none !important;
}
.nav-icon-msg-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .nav-text-desktop {
    display: none !important;
  }
  .nav-text-mobile {
    display: inline !important;
  }
  .nav-icon-msg-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: #ef480e !important;
  }
  .hide-xs-sm {
    display: none !important;
  }
}

/* ========================================================
   Alineación y corrección de solapamiento en Destination Headings
   (Gestión Inteligente de Almacenes, Educación Digital, etc.)
   ======================================================== */
.destination-heading {
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 992px) {
  .destination-heading .tiny-orange-call-out {
    width: max-content !important;
    max-width: 360px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #ef480e !important;
    letter-spacing: 0.5px !important;
  }
}

@media screen and (max-width: 991px) {
  .destination-heading {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }
  .destination-heading .orange-divider.reversed {
    margin-left: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 2px !important;
    border-top: 2px solid #ef480e !important;
    background: transparent !important;
    position: relative !important;
    margin-bottom: 16px !important;
    padding-top: 8px !important;
    display: block !important;
    clear: both !important;
  }
  .destination-heading .third.upper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    display: block !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .destination-heading .tiny-orange-call-out {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    margin: 0 0 6px 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #ef480e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    clear: both !important;
  }
  .destination-heading .heading-3 {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    clear: both !important;
    display: block !important;
    line-height: 1.05 !important;
  }
}