/* === Diseño neon suave con variables y temas === */
:root {
  --bg: #0c0f14;
  --bg-soft: #121723;
  --text: #e6e8ec;
  --muted: #a7afc0;
  --card: #151a25;
  --primary: #7c5cff;      /* acento */
  --primary-2: #28e7ff;    /* cian */
  --ring: 0 0 22px;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

html[data-theme="light"]{
  --bg: #f7f8fc;
  --bg-soft: #ffffff;
  --text: #0e1220;
  --muted: #47506b;
  --card: #ffffff;
  --primary: #5b5bd6;
  --primary-2: #00bcd4;
  --shadow: 0 8px 28px rgba(10, 12, 21, 0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(124,92,255,.12), transparent 60%),
              radial-gradient(900px 700px at 100% 0%, rgba(40,231,255,.10), transparent 55%),
              var(--bg);
  line-height:1.5;
}

/* Orbes decorativos */
.bg-orbs{
  position:fixed; inset:0; pointer-events:none; filter:blur(40px); opacity:.7;
}
.bg-orbs .orb{
  position:absolute; width:460px; height:460px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--primary), transparent 60%);
  animation: float 16s ease-in-out infinite;
}
.bg-orbs .orb-1{ left:-120px; top:-140px; }
.bg-orbs .orb-2{ right:-160px; top:20%; background: radial-gradient(circle at 30% 30%, var(--primary-2), transparent 60%); animation-duration:18s;}
.bg-orbs .orb-3{ left:30%; bottom:-180px; animation-duration:22s;}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-25px) }
}

/* Helpers */
.container{ max-width:1100px; margin-inline:auto; padding:24px; }

.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.brand{ display:flex; align-items:center; gap:16px; }
.brand-mark{ width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(124,92,255,.45)); }
.brand-text h1{ margin:0; font-size:clamp(22px,3vw,28px); letter-spacing:.3px; }
.brand-text p{ margin:2px 0 0; color:var(--muted); font-size:14px; }

/* Toggle tema */
.toggle{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, var(--bg-soft), color-mix(in oklab, var(--bg) 70%, black 10%));
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  padding:10px 14px; border-radius:999px; color:var(--text); cursor:pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.toggle:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--text) 16%, transparent); }
.toggle .toggle-label{ font-weight:600; font-size:14px; }
.toggle .icon-sun, .toggle .icon-moon{ filter: drop-shadow(0 0 10px rgba(255,255,255,.15)); }

/* Logos carrusel */
.logos{ overflow:hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.logos-track{
  display:flex; align-items:center; gap:48px;
  padding:22px 0; min-width:max-content;
  animation: scrollX 28s linear infinite;
}
.logos img{ height:36px; opacity:.9; transition: transform .2s ease, opacity .2s ease; filter:grayscale(.1); }
.logos img:hover{ transform: scale(1.06); opacity:1; filter:none; }
@keyframes scrollX{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
body.reduce-motion .logos-track{ animation:none }

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center;
  margin-top: 10px;
}
.hero-copy h2{ font-size:clamp(28px, 4vw, 40px); margin:.2rem 0 0.6rem; }
.hero-copy p{ color:var(--muted); margin:0 0 18px; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin: 8px 0 16px; }
.btn{
  --ring-color: color-mix(in oklab, var(--primary) 55%, white 0%);
  display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:12px 16px; font-weight:700; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease, background .2s ease;
}
.btn-primary{
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--primary) 80%, var(--primary-2) 20%), transparent 70%),
    linear-gradient(90deg, color-mix(in oklab, var(--primary) 70%, black 10%), color-mix(in oklab, var(--primary-2) 70%, black 10%));
  color:white; box-shadow: 0 10px 30px rgba(124,92,255,.35), 0 6px 18px rgba(40,231,255,.25);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 38px rgba(124,92,255,.42), 0 8px 24px rgba(40,231,255,.30); }
.btn-ghost{
  background:transparent; color:var(--text);
  border-color: color-mix(in oklab, var(--text) 16%, transparent);
}
.btn-ghost:hover{ border-color: color-mix(in oklab, var(--text) 28%, transparent); transform: translateY(-2px); }
.btn-outline{
  background: var(--bg-soft); color:var(--text);
  border-color: color-mix(in oklab, var(--text) 12%, transparent);
}
.btn-outline:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--text) 28%, transparent); }

.whats{ width:18px; height:18px }

.perks{ display:grid; grid-template-columns:1fr; gap:6px; padding-left: 18px; margin: 10px 0 0; }
.perks li{ color:var(--muted) }

.hero-art{
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 80%, black 10%), var(--bg-soft));
  border:1px solid color-mix(in oklab, var(--text) 8%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px; text-align:center;
}
.hero-art img{ width:100%; height:auto; border-radius:12px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.hero-art figcaption{ font-size:13px; color:var(--muted); margin-top:8px; }

/* Cards */
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top: 18px;
}
.card{
  background: var(--card);
  border:1px solid color-mix(in oklab, var(--text) 9%, transparent);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); border-color: color-mix(in oklab, var(--text) 18%, transparent); box-shadow: 0 12px 34px rgba(0,0,0,.38); }
.card h3{ margin:0 0 6px; font-size:20px; }
.card p{ margin:0 0 10px; color:var(--muted); }
.card ul{ margin:0 0 14px 18px; color:var(--muted); }
.card .btn{ width:100%; text-align:center; }

/* Pulso cuando se hace click en "Ver beneficios" */
.card.pulse{
  animation: pulse 1s ease;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(124,92,255,.5); transform: translateY(-2px); }
  100%{ box-shadow: 0 0 0 14px rgba(124,92,255,0); transform: translateY(0); }
}

/* Footer */
.footer{ text-align:center; color:var(--muted); padding-bottom: 40px; }
.footer a{ color:var(--text); text-underline-offset: 3px; }

/* Responsivo */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .cards{ grid-template-columns: 1fr; }
  .logos-track{ gap:32px }
}