:root{
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;

  --accent:#00d4ff;
  --accent2:#b7ff2a;

  --shadow: 0 18px 50px rgba(2,6,23,.10);
  --radius2:26px;
  --max:980px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); }

body{
  /* DIFUMINADO UNIFORME EN TODA LA PÁGINA */
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(0,212,255,.16), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(183,255,42,.14), transparent 60%),
    radial-gradient(800px 420px at 50% 65%, rgba(0,212,255,.10), transparent 60%),
    radial-gradient(800px 420px at 50% 95%, rgba(183,255,42,.10), transparent 60%),
    #fff;
  background-attachment: fixed; /* clave para que se vea igual al hacer scroll */
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }

.card{
  background: rgba(255,255,255,.92);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}

/* Marco corporativo */
.brandCard{
  position: relative;
  border: 1px solid rgba(226,232,240,.95);
  overflow: hidden;
  transform: translateZ(0);
}
.brandCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(0,212,255,.95), rgba(183,255,42,.95));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .85;
}
.brandCard:hover{
  transform: translateY(-1px);
  transition: transform .12s ease;
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logoWrap{
  width:44px; height:44px;
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  display:grid; place-items:center;
  border: 1px solid rgba(226,232,240,.95);
}
.brand__logoImg{ width:100%; height:100%; object-fit: contain; padding: 4px; }
.brand__name{ font-weight:900; line-height:1.1; }
.brand__tag{ font-size:12px; color:var(--muted); margin-top:2px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(2,6,23,.12); }
.btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#071019;
}
.btn--xl{ padding: 14px 18px; border-radius: 18px; }

/* Hero */
.hero{ padding: 34px 0 24px; }
.center{ text-align:center; }

.badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom: 10px; }
.badge{
  display:inline-flex; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.86);
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.badge--beta{
  color:#071019;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.heroBrand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin: 6px 0 10px;
}
.heroBrand__logo{
  width:74px; height:74px;
  border-radius: 22px;
  background:#fff;
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  object-fit: contain;
  padding: 10px;
  border: 1px solid rgba(226,232,240,.95);
}
.heroBrand__name{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.65);
}

.title{
  margin: 8px 0 10px;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-weight: 900;
}
.accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.subtitle{
  margin: 0 auto 14px;
  max-width: 70ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
}

/* Promo */
.promo{ padding: 16px; margin: 14px auto 16px; text-align:left; max-width: 860px; }
.promo__title{ font-weight: 900; margin-bottom: 8px; }
.promo__text{ color: var(--muted); line-height: 1.65; }
.promo__prize{ margin-top: 10px; font-weight: 900; }
.promo__fine{ margin-top: 10px; font-size: 12px; color: rgba(15,23,42,.65); }
.link{ text-decoration: underline; text-underline-offset: 3px; }

.cta{ display:flex; flex-direction:column; gap:8px; align-items:center; margin: 12px 0 10px; }
.cta__note{ font-size: 12.5px; color: rgba(15,23,42,.65); }
.cta--bottom{ margin-top: 18px; }

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 12px;
}
.step{ padding: 14px; text-align:left; }
.step__k{
  width:30px; height:30px; border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 900;
  background: rgba(241,245,249,.9);
  border: 1px solid rgba(226,232,240,.95);
}
.step__t{ margin-top: 10px; font-size: 13.5px; }
.step__d{ margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.proof{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.pill{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.86);
  font-weight: 800;
  color: var(--muted);
  font-size: 13px;
}

.sectionDivider{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
  margin: 24px 0;
}

/* Carousel */
.carousel{ padding: 14px; text-align:left; max-width: 860px; margin: 0 auto; }
.carousel__top{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.carousel__title{ font-weight: 900; }

.iconbtn{
  width:40px; height:40px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background:#fff;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}

/* si por lo que sea JS tarda, el frame sigue ocupando espacio (no “desaparece”) */
.carousel__frame{
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.95);
  background: #0b1220;
  min-height: 220px;
}
.carousel__track{ display:flex; width:100%; transform: translateX(0); transition: transform .45s ease; }
.carousel__slide{ min-width: 100%; position: relative; aspect-ratio: 16/9; }
.carousel__slide img{ width:100%; height:100%; object-fit: cover; display:block; }
.carousel__tag{
  position:absolute; left: 12px; bottom: 12px;
  padding: 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(226,232,240,.95);
  font-size: 12px; color: #0f172a;
  backdrop-filter: blur(6px);
}
.carousel__dots{ display:flex; gap:8px; justify-content:center; margin-top: 10px; }
.dotbtn{ width:9px; height:9px; border-radius: 99px; border: 0; background: #cbd5e1; cursor:pointer; }
.dotbtn.is-active{ background:#0f172a; }

/* Blocks */
.block{ margin-top: 8px; }
.h2{ margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; }
.muted{ margin:0; color: var(--muted); line-height: 1.6; }

/* Features */
.features{
  margin: 12px auto 0;
  max-width: 860px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.feature{ padding: 14px; text-align:left; }
.feature__t{ font-weight: 900; }
.feature__p{ margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* Activity */
.activity{
  margin: 12px auto 0;
  max-width: 860px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.activityCard{ padding: 14px; text-align:left; }
.activityTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tag{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff; color: var(--muted); font-weight: 800;
}
.time{ font-size:12px; color: rgba(15,23,42,.65); }
.activityCard h3{ margin: 10px 0 8px; font-size: 14px; }
.activityCard p{ margin: 0; color: var(--muted); line-height:1.6; font-size: 13.5px; }

.footer{
  border-top: 1px solid rgba(226,232,240,.95);
  padding: 18px 0 28px;
  color: var(--muted);
}
.footer__inner{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
}
.sep{ opacity:.55; }

/* Responsive */
@media (max-width: 980px){
  .steps{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: 1fr; }
  .activity{ grid-template-columns: 1fr; }
  .promo{ text-align:left; }
}
@media (max-width: 520px){
  .heroBrand__logo{ width:64px; height:64px; border-radius: 20px; }
}