:root{
      /* Colores principales (variables para usar y ajustar) */
      --brand-1: #0066ff;
      --brand-2: #7c3aed;
      --accent: #00c2a8;
      --bg: #0b1020;
      --card-1: linear-gradient(135deg,#126EF8,#14AEC9);
      --card-2: linear-gradient(135deg,#0b1020,#00F3DF);
      --card-3: linear-gradient(135deg,#7c3aed,#ec4899);
      --card-4: linear-gradient(135deg,#FF3640,#E59F03);

      --text-light: #e6eef8;
      --muted: #aab6d6;

      /* Gameplay tuning variables */
      --game-shape-count: 28; /* cantidad de formas (puedes ajustar) */
      --game-speed-multiplier: 2; /* velocidad base (1 = normal) */
      --player-speed: 3.5; /* velocidad del "player" controlable */
    }

    /* Reset básicos */
    html,body{
      height:100%;
      background: radial-gradient(ellipse at top,#071029 0%, var(--bg) 60%);
      color:var(--text-light);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      margin:0;
      padding:0;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
            scroll-behavior: smooth; /* desactivamos nativo, usamos JS */

    }

    /* FULLSCREEN SVG canvas behind everything */
    #bg-game {
      position:fixed;
      inset:0;
      z-index:0;
      width:99%;
      height:100%;
      pointer-events:auto; /* to allow mouse interactions */
      display:block;
      background: transparent;
    }
    @media (max-width: 767px)
    { #bg-game {
      width: 97%;
    }
    }

    /* Page content wrapper sits above the game */
    .page-content {
      position:relative;
      z-index:10;
      min-height:100vh;
    }

    /* Sticky navbar with smooth delayed movement */
    .navbar-smooth {
      position:sticky;
      top:0;
      z-index:20;
      transition: box-shadow .3s ease;
      will-change: transform;
      background: rgba(8,12,25,0.6);
      backdrop-filter: blur(6px);
      border-bottom:1px solid rgba(255,255,255,0.03);
    }
    .navbar-smooth.scrolled {
      box-shadow: 0 8px 24px rgba(2,6,23,0.6);
    }

    /* Minimize button style */
    .btn-minimize {
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      border-radius:999px;
    }

    /* Sections */
    section {
      padding:6rem 0;
    }
    .hero {
      padding-top:6rem;
      padding-bottom:4rem;
      min-height:72vh;
      display:flex;
      align-items:center;
    }

    /* Cards gradient examples */
    .card-grad-1 { background: var(--card-1); color:var(--text-light); }
    .card-grad-2 { background: var(--card-2); color:var(--text-light); }
    .card-grad-3 { background: var(--card-3); color:var(--text-light); }
    .card-grad-4 { background: var(--card-4); color:var(--text-light); }

    /* Scroll reveal animation */
    .reveal {
      opacity:0;
      transform: translateY(24px) scale(.995);
      transition: opacity .7s cubic-bezier(.2,.9,.2,1), transform .7s cubic-bezier(.2,.9,.2,1);
      will-change: transform, opacity;
    }
    .reveal.is-visible {
      opacity:1;
      transform: translateY(0) scale(1);
    }

    /* Carousel placeholder svg images adjust */
    .carousel-placeholder {
      width:100%;
      height:360px;
      display:block;
      object-fit:cover;
    }

    /* Footer */
    footer {
      padding:3rem 0;
      color:var(--muted);
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    }

    /* When UI minimized, we hide the .ui-overlay content smoothly */
    .ui-hidden .ui-overlay {
      opacity:0;
      transform: translateY(20px);
      pointer-events:none;
      height:0 !important;
      overflow:hidden;
    }

    .ui-overlay {
      transition: opacity .45s ease, transform .45s ease;
    }

    /* small screens niceties */
    @media (max-width:768px){
      .hero { padding-top:5rem; padding-bottom:3rem; }
    }

    /* player indicator (optional small HUD) */
    .player-hud {
      position:fixed;
      right:2rem;
      bottom:1rem;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.04);
      padding:.6rem .8rem;
      border-radius:12px;
      z-index:25;
      color:var(--text-light);
      font-size:.9rem;
      backdrop-filter: blur(4px);
    }

    /* Efecto para el link activo del menú */
    .navbar-nav .nav-link.active {
      color:#FF6B6B;
      font-weight: bold;
      /* color: #92DA02; */
    }
    .nav-link:hover {
    color: #FF6B6B !important;
}

.navbar-nav .nav-link.active::after  {
  /* color: #fff !important;
  background: linear-gradient(45deg, #007bff, #00c6ff);
  border-radius: 8px;
  padding: 6px 12px;
  transition: all 0.3s ease; */
      /* color: var(--bs-nav-link-hover-color); */
          /* --bs-link-color-rgb: var(--bs-link-hover-color-rgb); */
              content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 6px;
    height: 3px;
    width: 50%;
    background: #FF6B6B;
    -webkit-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
 
#mobileMenuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  z-index: 998;
}

.mobile-menu {
  /* position: fixed;
  top: 0;
  right: -80%;
  width: 70%;
  height: 100%;
  background: #0b1020;
  padding: 1.5rem;
  z-index: 999;
  transition: right 0.35s ease; */
}

.mobile-menu.active {
  right: 0;
}

#mobileMenuOverlay.active {
  display: block;
}

.bg-white-75 {
  background: #fffffff1;
}

body { overflow-x: hidden; scroll-behavior: smooth; }
    /* header {
      position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(6px);
    }
    header .navbar-brand, header .nav-link {
      color: white !important;
      text-transform: uppercase;
      font-weight: 500;
    }
    header .nav-link.active {
      color: #0ff !important;
      font-weight: 600;
    }
    section {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem;
    } */
    /* #s1 { background: #111; color: white; }
    #s2 { background: #333; color: white; }
    #s3 { background: #555; color: white; }
    #s4 { background: #777; color: white; } */

    /* mobile menu */
    #mobileMenu {
      position: fixed; top: 0; right: -100%;
      width: 75%; max-width: 500px;
      height: 100vh;
      background: #0b1020;
      transition: right 0.35s ease;
      z-index: 9999;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    #mobileMenu.active { right: 0; }
    #mobileMenu .nav-link {
      /* display: block; color: white; font-size: 1.3rem; padding: .5rem 1rem; */
    }
    /* #mobileMenu .nav-link.active { color: #0ff; } */

    #mobileMenuOverlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.5);
      opacity: 0; visibility: hidden;
      transition: opacity 0.35s ease;
      z-index: 9998;
    }
    #mobileMenuOverlay.active {
      opacity: 1; visibility: visible;
    }
    .no-scroll { overflow: hidden; }


    /* -- */


    .glass {
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.tag-cloud {
  position: relative;
  height: 240px;
  overflow: hidden;
}
a.tag {
    position: absolute;
  background: #92da0248;
  /* color: #fff; */
  /* border: 1px solid rgba(255,255,255,0.3); */
  border-radius: 20px;
  padding: 6px 14px;
  /* font-size: 0.9rem; */
  /* white-space: nowrap; */
  /* user-select: none; */
  /* cursor: pointer; */
  /* box-shadow: 0 4px 10px rgba(0,0,0,0.2); */
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 1;
  margin: 10px;

}
span.tag {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
  user-select: none;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, background 0.3s ease;
}

.tag:hover {
  transform: scale(1.1);
  background: #92DA02;
}

/* .bg-primary-green-border {
  border: 1px solid #00ff9d;
} */



 #hosting .card {
    transition: height 1s ease;
  }
#hosting {
  position: relative;
  /* background: radial-gradient(circle at 20% 20%, #f8fff8, #e7f7ec); */
}

.glass {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
}

/* --- Tarjetas --- */
.plan-card {
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, padding-bottom 0.6s ease; /* ← añadida esta línea */
  min-height: 250px;
}

.plan-card:hover {
  transform: translateY(-1px);
  /* box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
}

.plan-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.plan-info {
  display: none;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: height 1s ease, opacity 0.8s ease; /* ← cambio aquí */
}


.plan-info.show {
  display: block;
  opacity: 1;
  height: auto;
}

/* Animación de items uno a uno */
.plan-info.show li {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s ease forwards;
}
.plan-info.show li:nth-child(1) { animation-delay: 0.1s; }
.plan-info.show li:nth-child(2) { animation-delay: 0.3s; }
.plan-info.show li:nth-child(3) { animation-delay: 0.5s; }
.plan-info.show li:nth-child(4) { animation-delay: 0.7s; }
.plan-info.show li:nth-child(5) { animation-delay: 0.9s; }

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

/* Lista */
.plan-info ul {
  list-style: none;
  padding-left: 0;
}
.plan-info li::before {
  content: "✔ ";
  color: #92DA02;
}


p, li, small, span ,h1,h2,h3,h4,h5 {
  cursor: context-menu !important;
}
.btn-close {
  filter: invert();
  position: absolute;
  top: 5%;
  right: 10%;
  scale: 1.2;

}
#planes img {
  max-width: 110px;
}
#planes figure {
  margin-bottom: 0px;
}