/* ── Reca landing — mismos colores que el tema de las apps ─────────────── */
:root {
  --brand: #00E676;
  --brand-dark: #00C853;
  --brand-ink: #00894a;
  --ink: #121212;
  --ink-2: #1E1E1E;
  --soft: #F3FBF7;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1d2329;
  --bs-body-bg: #ffffff;
  --bs-link-color: var(--brand-ink);
  --bs-link-hover-color: var(--brand-dark);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; letter-spacing: -.02em; }
.xsmall { font-size: .75rem; }
.text-brand { color: var(--brand) !important; }
.text-brand-dark { color: var(--brand-ink) !important; }
.text-white-75 { color: rgba(255, 255, 255, .78) !important; }
.text-muted-2 { color: #9aa5ae; }
.bg-soft { background: var(--soft); }
.bg-dark-brand { background: radial-gradient(circle at 15% 0%, rgba(0, 230, 118, .12), transparent 45%), var(--ink); }

.section { padding: 110px 0; }
@media (max-width: 767px) { .section { padding: 72px 0; } }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn-brand {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 230, 118, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 230, 118, .4); }
.btn-outline-light { border-radius: 999px; font-weight: 600; }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.navbar { padding: 18px 0; transition: padding .3s ease, box-shadow .3s ease; }
.navbar.scrolled { background: rgba(18, 18, 18, .92); backdrop-filter: blur(10px); padding: 10px 0; box-shadow: 0 4px 20px rgba(0, 0, 0, .25); }
.navbar-brand { font-size: 1.5rem; }
.navbar .nav-link { font-weight: 500; color: rgba(255, 255, 255, .8); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--brand); }
@media (max-width: 991px) {
  .navbar-collapse { background: rgba(18, 18, 18, .97); margin: 12px -12px 0; padding: 12px 20px 20px; border-radius: 16px; }
}

/* ── Parallax ──────────────────────────────────────────────────────────── */
.parallax { position: relative; overflow: hidden; isolation: isolate; }
.parallax-bg {
  position: absolute; inset: -40% 0; z-index: -2; /* main.js ajusta top/bottom */
  background-size: cover; background-position: center;
  will-change: transform;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 130px 0 90px; }
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(18, 18, 18, .94) 0%, rgba(18, 18, 18, .78) 50%, rgba(18, 18, 18, .55) 100%); }
.hero-glow { position: absolute; width: 620px; height: 620px; right: -120px; top: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 230, 118, .28), transparent 65%); filter: blur(10px); }
.badge-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--brand); background: rgba(0, 230, 118, .12); border: 1px solid rgba(0, 230, 118, .35); }
.hero-facts { color: rgba(255, 255, 255, .85); font-weight: 500; }
.hero-facts i { margin-right: 6px; }
.scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .6); font-size: 1.6rem; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* Mockup del celular */
.phone { width: 290px; height: 590px; border-radius: 44px; padding: 12px; background: #050505; position: relative; box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 2px #2b2b2b, 0 0 70px rgba(0, 230, 118, .18); will-change: transform; }
.phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 20px; background: #050505; z-index: 3; }
.phone-screen { height: 100%; border-radius: 34px; overflow: hidden; position: relative; background: var(--ink); }
.mock-map {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 47%, #2a2f33 47%, #2a2f33 53%, transparent 53%) 0 0 / 120px 120px,
    linear-gradient(0deg, transparent 47%, #2a2f33 47%, #2a2f33 53%, transparent 53%) 0 0 / 120px 120px,
    linear-gradient(35deg, transparent 49%, #31373c 49%, #31373c 51.5%, transparent 51.5%),
    #1b1f22;
}
.pin { position: absolute; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--brand); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.pin i { transform: rotate(45deg); color: var(--ink); font-size: .95rem; }
.pin-active { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, .6); } 100% { box-shadow: 0 0 0 18px rgba(0, 230, 118, 0); } }
.me-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #4aa3ff; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(74, 163, 255, .25); }
.mock-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px 20px; background: var(--ink-2); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .4); }
.mock-handle { width: 40px; height: 4px; border-radius: 4px; background: #444; margin: 0 auto 12px; }
.chip-price { font-size: .75rem; font-weight: 700; color: var(--ink); background: var(--brand); padding: 4px 10px; border-radius: 999px; }
.mock-timer { background: #151515; border-radius: 14px; padding: 12px; }
.timer-value { font-size: 1.9rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mock-progress { height: 6px; background: #2a2a2a; border-radius: 6px; }
.mock-progress .progress-bar { background: var(--brand); border-radius: 6px; }

/* ── Encabezados de sección ────────────────────────────────────────────── */
.eyebrow { display: inline-block; margin-bottom: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); }
.eyebrow-dark { color: var(--brand); }

/* ── Qué es ────────────────────────────────────────────────────────────── */
.mini-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 16px; height: 100%; box-shadow: 0 6px 24px rgba(16, 40, 30, .06); }
.mini-card > i { font-size: 1.3rem; color: var(--brand-ink); background: rgba(0, 230, 118, .14); width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; }

.img-stack { position: relative; padding: 0 0 70px 40px; }
.img-stack .img-main { width: 100%; border-radius: 24px; box-shadow: 0 30px 60px rgba(16, 40, 30, .18); }
.img-stack .img-float { position: absolute; left: 0; bottom: 0; width: 46%; border-radius: 20px; border: 6px solid #fff; box-shadow: 0 20px 40px rgba(16, 40, 30, .2); }
.float-badge { position: absolute; right: 18px; bottom: 40px; background: var(--ink); color: #fff; font-weight: 600; font-size: .9rem; padding: 10px 16px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.float-badge i { color: var(--brand); }

/* ── Categorías ────────────────────────────────────────────────────────── */
.cat-card { position: relative; border-radius: 24px; overflow: hidden; height: 380px; box-shadow: 0 20px 50px rgba(16, 40, 30, .12); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat-card:hover img { transform: scale(1.06); }
.cat-body { position: absolute; inset: auto 0 0 0; padding: 70px 24px 24px; color: #fff; background: linear-gradient(transparent, rgba(10, 10, 10, .88)); }
.cat-body > i { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px; background: var(--brand); color: var(--ink); font-size: 1.2rem; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--soft); font-weight: 600; color: #2b3a33; }
.chip i { color: var(--brand-ink); }

/* ── Cómo funciona ─────────────────────────────────────────────────────── */
.step { position: relative; height: 100%; padding: 32px 24px 26px; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.step:hover { transform: translateY(-6px); border-color: rgba(0, 230, 118, .5); background: rgba(0, 230, 118, .06); }
.step > i { display: block; font-size: 2rem; color: var(--brand); margin-bottom: 12px; }
.step p { color: rgba(255, 255, 255, .7); margin: 0; }
.step-num { position: absolute; top: 18px; right: 20px; font-size: 3rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .07); }
.guarantee { display: flex; gap: 16px; align-items: center; max-width: 820px; margin: 0 auto; padding: 20px 24px; border-radius: 18px; background: rgba(0, 230, 118, .1); border: 1px solid rgba(0, 230, 118, .3); color: rgba(255, 255, 255, .85); }
.guarantee > i { font-size: 2rem; color: var(--brand); }

/* ── Banda parallax ────────────────────────────────────────────────────── */
.band { padding: 150px 0; }
.band-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(18, 18, 18, .82), rgba(18, 18, 18, .88)); }
.band-quote { font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 800; color: #fff; line-height: 1.2; margin: 0; letter-spacing: -.02em; }

/* ── Aliados ───────────────────────────────────────────────────────────── */
.ally { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px 18px; border-radius: 16px; background: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(16, 40, 30, .06); transition: transform .25s ease, box-shadow .25s ease; }
.ally:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 40, 30, .12); }
.ally i { font-size: 1.4rem; color: var(--brand-ink); }
.benefit > i { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; background: var(--ink); color: var(--brand); font-size: 1.3rem; }
.img-rounded-wrap { position: relative; padding-bottom: 40px; }
.earn-card { position: absolute; right: -10px; bottom: 0; background: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: 0 20px 40px rgba(16, 40, 30, .18); }
@media (max-width: 575px) { .earn-card { right: 10px; } }
.ally-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 24px 28px; border-radius: 22px; background: var(--ink); color: #fff; }
.ally-step { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.ally-step span { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--brand); color: var(--ink); font-weight: 800; }
@media (max-width: 991px) { .ally-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ally-steps { grid-template-columns: 1fr; } }

/* ── CTA descarga ──────────────────────────────────────────────────────── */
.cta { padding: 140px 0; }
.cta-overlay { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 40%, rgba(0, 230, 118, .2), transparent 55%), linear-gradient(rgba(18, 18, 18, .82), rgba(18, 18, 18, .92)); }
.shadow-glow { box-shadow: 0 0 60px rgba(0, 230, 118, .45); }
.store-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .25); text-align: left; transition: transform .2s ease, border-color .2s ease; }
.store-btn:hover { color: #fff; transform: translateY(-2px); border-color: var(--brand); }
.store-btn i { font-size: 1.9rem; }
.store-btn span { display: flex; flex-direction: column; font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.store-btn small { font-size: .7rem; font-weight: 500; opacity: .75; }
.store-btn-disabled { opacity: .55; cursor: default; }
.store-btn-disabled:hover { transform: none; border-color: rgba(255, 255, 255, .25); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq .accordion-item { border: 0; margin-bottom: 12px; border-radius: 16px !important; overflow: hidden; background: var(--soft); }
.faq .accordion-button { font-weight: 600; background: var(--soft); padding: 20px 22px; }
.faq .accordion-button:not(.collapsed) { color: var(--ink); box-shadow: none; background: rgba(0, 230, 118, .14); }
.faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(0, 230, 118, .35); }
.faq .accordion-body { color: #4a5560; padding: 4px 22px 22px; background: rgba(0, 230, 118, .14); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: var(--ink); padding: 56px 0 32px; }
.footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer a:hover { color: var(--brand); }
.footer .list-inline-item:not(:last-child) { margin-right: 1.4rem; }

/* ── Accesibilidad: sin movimiento si el usuario lo pidió ──────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint, .pin-active { animation: none; }
  .parallax-bg, [data-speed] { transform: none !important; }
}