/* Clubniverse Business Clubs — Landing (tema cósmico oscuro)
   Estilos de soporte. Marca: club + universe → espacio profundo, órbitas, violeta. */

:root {
  --space-900: #080a1e;
  --space-800: #0b0e26;
  --space-700: #11142f;
  --space-600: #171a3d;
  --indigo: #6d6ff5;
  --violet: #7c3aed;
  --line: rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.07);
  --txt: rgba(255,255,255,0.72);
  --txt-soft: rgba(255,255,255,0.52);
}

html { scroll-behavior: smooth; }
body { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

body {
  background: var(--space-900);
  color: var(--txt);
  font-family: 'Manrope', system-ui, sans-serif;
}

/* ─── Fondo cósmico global (starfield + glows) ─── */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(124,58,237,0.28), transparent 60%),
    radial-gradient(900px 600px at 12% 18%, rgba(93,95,236,0.18), transparent 55%),
    radial-gradient(900px 700px at 50% 108%, rgba(124,58,237,0.16), transparent 60%),
    linear-gradient(180deg, #0a0c20 0%, #080a1e 100%);
}
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 60% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.3px 1.3px at 35% 80%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.2px 1.2px at 10% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.1px 1.1px at 70% 42%, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Tipografía de secciones ─── */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a3a4fb;
}
.section-title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}
.lead { color: var(--txt); }

/* logo lockup */
.logo-img { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(124,58,237,.4)); }
.logo-img-sm { height: 26px; }

/* ─── Glass panels ─── */
.glass {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(8px);
}

/* ─── Device frames con iframe escalado ─── */
.scaler { position: relative; overflow: hidden; width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); }
.scaler iframe {
  position: absolute; top: 0; left: 0;
  width: var(--w); height: var(--h);
  border: 0;
  transform: scale(var(--s)); transform-origin: top left;
  pointer-events: none;
}

/* Browser window chrome (dark) */
.browser-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #0f1124;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(124,58,237,0.12);
}
.browser-bar { height: 36px; background: #161936; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.browser-url { margin-left: 12px; font-size: 12px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px 12px; flex: 1; max-width: 280px; }

/* Phone frame */
.phone-frame { width: var(--pw); border-radius: 26px; background: #05060f; padding: 6px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8); }
.phone-frame .scaler { border-radius: 20px; overflow: hidden; }

/* ─── Orbit decoration (echoes the logo) ─── */
.orbit { position: absolute; border: 1px solid rgba(163,164,251,0.18); border-radius: 50%; }

/* ─── Trust slots ─── */
.trust-slot { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.4); border: 1px dashed rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 14px; }

/* ─── Problema → solución ─── */
.ps-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px;
  transition: border-color .2s, transform .2s, background .2s;
}
.ps-card:hover { border-color: rgba(124,58,237,0.5); transform: translateY(-2px); background: rgba(255,255,255,0.05); }
.ps-from { font-size: 14px; color: var(--txt-soft); text-decoration: line-through; text-decoration-color: rgba(236,106,94,0.6); }
.ps-arrow { color: #a3a4fb; font-size: 18px; font-weight: 700; }
.ps-to { grid-column: 1 / -1; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: #fff; }

/* ─── Pilares ─── */
.pillar {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 20px; padding: 26px;
  transition: background .2s, border-color .2s, transform .2s;
}
.pillar:hover { background: rgba(255,255,255,0.06); border-color: rgba(124,58,237,0.55); transform: translateY(-2px); }
.pillar-ic { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, rgba(93,95,236,0.35), rgba(124,58,237,0.35)); color: #c3c4ff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid rgba(163,164,251,0.25); }
.pillar-ic svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.pillar p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--txt-soft); }

/* ─── App features ─── */
.app-feat { position: relative; padding-left: 28px; color: var(--txt); }
.app-feat::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(124,58,237,0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c3c4ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ─── Tags ─── */
.tag { font-size: 13px; font-weight: 600; color: #c3c4ff; background: rgba(124,58,237,0.16); border: 1px solid rgba(163,164,251,0.2); border-radius: 999px; padding: 5px 13px; }

/* ─── Steps ─── */
.step { background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 20px; padding: 26px; position: relative; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg,#5d5fec,#7c3aed); margin-bottom: 16px; box-shadow: 0 6px 18px rgba(124,58,237,0.4); }
.step h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.step p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--txt-soft); }

/* ─── Use cases ─── */
.usecase { background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 20px; padding: 26px; transition: border-color .2s, transform .2s; }
.usecase:hover { border-color: rgba(124,58,237,0.5); transform: translateY(-2px); }
.usecase h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.usecase p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--txt-soft); }

/* ─── Security items ─── */
.sec-item { padding-top: 18px; border-top: 2px solid rgba(124,58,237,0.4); }
.sec-item h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.sec-item p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--txt-soft); }

/* ─── FAQ ─── */
.faq { padding: 4px 0; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-x::before, .faq-x::after { content: ''; position: absolute; background: #a3a4fb; border-radius: 2px; transition: transform .25s, opacity .25s; }
.faq-x::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-x::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq[open] .faq-x::after { transform: rotate(90deg); opacity: 0; }
.faq p { padding: 0 0 22px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt); max-width: 62ch; }

/* ─── Form ─── */
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--txt); margin-bottom: 5px; }
.form-input {
  width: 100%; height: 44px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 0 14px;
  font-size: 15px; font-family: inherit; color: #fff; background: rgba(255,255,255,0.05);
  transition: border-color .15s, box-shadow .15s;
}
textarea.form-input { height: auto; padding: 10px 14px; }
.form-input::placeholder { color: rgba(255,255,255,0.35); }
.form-input:focus { outline: none; border-color: #6d6ff5; box-shadow: 0 0 0 3px rgba(109,111,245,0.25); }
.form-input.invalid { border-color: #f4736b; box-shadow: 0 0 0 3px rgba(244,115,107,0.18); }

/* ─── Custom checkbox ─── */
.cn-check {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  cursor: pointer; flex-shrink: 0; position: relative;
  transition: background .15s, border-color .15s;
}
.cn-check:checked { background: linear-gradient(135deg,#5d5fec,#7c3aed); border-color: transparent; }
.cn-check:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cn-check:focus-visible { outline: 2px solid #6d6ff5; outline-offset: 2px; }

/* ─── Social ─── */
.social { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); transition: background .2s, color .2s; }
.social:hover { background: rgba(255,255,255,0.14); color: #fff; }