/* ==== Layout base ==== */
.container { max-width: 1040px; }

/* Halo/Arco violeta (deco) */
.arc{
  background: radial-gradient(120% 80% at 50% 115%,
              rgba(139,92,246,.55) 0%,
              rgba(139,92,246,.35) 20%,
              rgba(139,92,246,.15) 35%,
              rgba(0,0,0,0) 60%);
  filter: blur(18px);
}

/* Patrón de puntos sutil para tarjetas “glass” */
.dot-grid{
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, rgba(255,255,255,0) 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}

/* Borde degradado fino estilo Nubien (no bloquea clics) */
.border-gradient{ position: relative; }
.border-gradient::before{
  content:""; position:absolute; inset:0; padding:1px;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(139,92,246,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* Helper de radius + clipping (útil si lo quieres usar) */
.card-radius{ border-radius:16px; overflow:hidden; }

/* ==== Trust badges ==== */
.badges{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center }
.badge{
  padding:.35rem .6rem; border-radius:9999px; font-size:.75rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}

/* ==== Barra de progreso del countdown ==== */
.countdown-bar{ height:6px; background:rgba(255,255,255,.06); }
.countdown-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#8b5cf6,#a78bfa);
  transition:width .3s ease; border-radius:9999px;
}

/* ==== Sticky CTA desktop ==== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:16px; z-index: 100; display:none;
}
.sticky-cta-inner{
  margin:0 auto; max-width:1040px; display:flex; gap:12px; align-items:center;
  background:rgba(0,0,0,.7); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:10px 12px;
}

/* ==== Sección “Cómo funciona” (tres pasos) ==== */
.steps{ display:grid; gap:12px; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  position:relative; border-radius:16px; padding:18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.step-num{
  position:absolute; top:12px; right:14px; font-weight:700; opacity:.3;
}

/* Ocultar scrollbar en móviles (sin romper accesibilidad) */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}