/* Reset mínimo */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  background: #0c0f14;
  color: #e6e9ef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mint { color:#4FE1A0; }

.container { max-width: 980px; margin: 0 auto; padding: 24px; }

/* Header */
.header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0 20px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:44px; height:44px; border-radius:12px; object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.title { font-weight:700; letter-spacing:.2px; font-size:18px; }
.starline { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:13px; }
.starline img { height:16px; }

/* Hero */
.hero {
  position:relative; overflow:hidden; border-radius:24px;
  background: radial-gradient(1200px 600px at 30% -10%, rgba(79, 209, 197,.18), transparent 60%),
              radial-gradient(1000px 500px at 100% 10%, rgba(123, 97, 255,.16), transparent 60%),
              linear-gradient(180deg, #121722 0%, #0c0f14 100%);
  padding:48px 28px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px rgba(0,0,0,.35);
}
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; }
.hero h1 { font-size: clamp(28px, 4.2vw, 44px); line-height:1.05; margin:0 0 12px; }
.kicker {
  display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px;
  letter-spacing:.4px; text-transform:uppercase; color:#93e7d2;
  background:rgba(147,231,210,.12); border:1px solid rgba(147,231,210,.24); margin-bottom:12px;
}
.deck { color:#b5bdc8; font-size:16px; line-height:1.5; margin-bottom:20px; }

/* CTA */
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.cta-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; font-weight:700; font-size:16px; border-radius:14px;
  background: linear-gradient(180deg, #4FE1A0 0%, #28C790 100%);
  color:#0a0e13; border:none; text-decoration:none; cursor:pointer;
  box-shadow:0 10px 24px rgba(26,206,151,.35); transition:transform .08s ease, filter .2s ease;
}
.cta-primary:hover { transform: translateY(-1px); filter: saturate(1.06); }
.cta-secondary { color:#cdd3dd; font-weight:600; text-decoration:underline; text-underline-offset:3px; opacity:.9; }
.small-note { font-size:12px; color:#9aa3af; margin-top:6px; }

/* Media card */
.hero-media { border-radius:18px; overflow:hidden; background:#0a0e13; border:1px solid rgba(255,255,255,.06); box-shadow:0 20px 50px rgba(0,0,0,.35); aspect-ratio:16/10; }
.hero-media video { width:100%; height:100%; object-fit:cover; display:block; }

/* Benefits */
.benefits { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px; }
.benefit { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); color:#cfd6e3; font-size:13px; }
.steps { margin-top:26px; }
.steps-grid { grid-template-columns: repeat(3,1fr); }

/* Trust row */
.trust { display:flex; align-items:center; gap:16px; margin-top:22px; opacity:.9; flex-wrap:wrap; }

/* Floating notifications */
.notif { position:fixed; left:20px; bottom:20px; z-index:60; display:none; padding:12px; width:280px; background:rgba(12,15,20,.92); border:1px solid rgba(255,255,255,.06); border-radius:14px; box-shadow:0 18px 38px rgba(0,0,0,.45); }
.notif-avatar { width:40px; height:40px; border-radius:10px; object-fit:cover; margin-right:10px; box-shadow:0 6px 14px rgba(0,0,0,.35); }
.notif-body { display:inline-block; vertical-align:top; }
.hide { display:none !important; }

/* Sticky promo bar */
.promo-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; background:linear-gradient(90deg, rgba(79,225,160,.15), rgba(123,97,255,.12)); border-top:1px solid rgba(255,255,255,.06); backdrop-filter:blur(6px); font-size:14px; color:#cfe6dc; }
.promo-bar .pill { padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#e6e9ef; font-weight:600; }

/* Responsive */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-media { order:-1; aspect-ratio:16/9; }
  .benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .container { padding:16px; }
  .benefits { grid-template-columns: 1fr; }
  .notif { left:12px; right:12px; width:auto; }
}/* --- CTA arriba del título: centrado + highlight --- */
.cta-hero {
  margin: 12px 0 10px;
  display: flex;
  justify-content: center;
}

.cta-hero .cta-primary {
  /* que se vea un poco más protagonista */
  padding: 16px 24px;
  font-size: 16px;
  border-radius: 16px;
}

/* Efecto de atención en el botón (pulso + shine) */
.cta-pulse {
  position: relative;
  isolation: isolate;
  box-shadow: 0 14px 28px rgba(26,206,151,.35);
  animation: cta-bump 2.2s ease-in-out infinite;
}

/* Barrido de brillo diagonal */
.cta-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-160%) skewX(-12deg);
  animation: cta-shine 3.4s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Halo suave que late */
.cta-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(79,225,160,.25), rgba(79,225,160,0));
  filter: blur(10px);
  opacity: 0;
  animation: cta-glow 2.2s ease-in-out infinite;
  z-index: -1;
}

@keyframes cta-bump {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-1px) scale(1.03); }
}

@keyframes cta-shine {
  0%,20%  { transform: translateX(-160%) skewX(-12deg); opacity: 0; }
  25%     { opacity: .7; }
  45%     { transform: translateX(160%)  skewX(-12deg); opacity: 0; }
  100%    { transform: translateX(160%)  skewX(-12deg); opacity: 0; }
}

@keyframes cta-glow {
  0%,100% { opacity: 0; }
  50%     { opacity: .55; }
}

/* Mejoras en mobile: ancho cómodo para el dedo */
@media (max-width: 560px) {
  .cta-hero .cta-primary { width: 100%; max-width: 360px; }
}

/* Accesibilidad: respetar reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-pulse,
  .cta-pulse::before,
  .cta-pulse::after { animation: none !important; }
}