/* Vaulta — fintech UI inspired by Ripio / Lemon / Belo */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Core palette — deep night + violet + lime */
  --bg: #07070c;
  --bg-elevated: #0d0d14;
  --surface: rgba(22, 22, 32, 0.85);
  --surface-solid: #14141e;
  --surface-2: #1c1c28;
  --surface-hover: #22222f;

  --accent: #a78bfa;          /* violet like Ripio */
  --accent-strong: #8b5cf6;
  --accent-glow: rgba(139, 92, 246, 0.35);
  --lime: #c8f542;            /* lemon-ish CTA */
  --lime-text: #0a0a0a;
  --teal: #34d399;
  --gold: #fbbf24;

  --text: #f4f4f7;
  --text-dim: #9494a8;
  --text-muted: #6b6b80;
  --danger: #f87171;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --vault-green: #8b5cf6;
  --vault-green-light: #a78bfa;

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line);
  --shadow-glow: 0 0 60px rgba(139, 92, 246, 0.18);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Ambient background mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(200, 245, 66, 0.06), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(52, 211, 153, 0.06), transparent 50%);
}

#app, main, .page, #landing, #auth-screen {
  position: relative;
  z-index: 1;
}

h1, h2, h3, .font-serif {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* —— Logo —— */
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0;
  letter-spacing: -0.04em;
  color: var(--text);
}
.logo span {
  background: linear-gradient(135deg, var(--accent), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* —— Brand buttons (map Tailwind vault-* to new system) —— */
.bg-vault-600 {
  background: linear-gradient(135deg, #9b6dff 0%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
  border: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.bg-vault-600:hover,
.hover\:bg-vault-500:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.45);
  color: #fff !important;
}
.bg-vault-600:active {
  transform: translateY(0);
}

/* Lime primary CTA variant */
.btn-lime,
button.btn-lime {
  background: var(--lime) !important;
  color: var(--lime-text) !important;
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 24px rgba(200, 245, 66, 0.25);
}
.btn-lime:hover {
  filter: brightness(1.05);
}

.text-vault-400,
.text-vault-300 {
  color: var(--accent) !important;
}
.border-vault-600 {
  border-color: rgba(139, 92, 246, 0.55) !important;
}
.ring-vault-500 {
  --tw-ring-color: var(--accent-strong) !important;
}
.bg-vault-600\/10 {
  background-color: rgba(139, 92, 246, 0.12) !important;
}
.bg-vault-700 {
  background-color: var(--surface-2) !important;
}

/* —— Glass cards —— */
.card,
.bg-slate-900,
.bg-slate-850 {
  background: var(--surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius) !important;
}

.bg-slate-950 {
  background: var(--bg-elevated) !important;
}
.bg-slate-800,
.bg-slate-850 {
  background: var(--surface-2) !important;
}
.border-slate-700,
.border-slate-800,
.border-slate-800\/60 {
  border-color: var(--line) !important;
}
.text-slate-400,
.text-slate-500 {
  color: var(--text-dim) !important;
}
.text-slate-300,
.text-slate-200,
.text-slate-100 {
  color: var(--text) !important;
}
.text-white {
  color: #fff !important;
}

/* Inputs */
input, select, textarea {
  background: var(--bg) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* —— Landing —— */
#landing {
  min-height: 100vh;
  background: transparent;
}

#landing header,
.landing-nav {
  background: rgba(7, 7, 12, 0.65) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line) !important;
}

.landing-hero-title,
#landing h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Hero gradient orb */
.landing-orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* Demo balance card — glass phone-like */
.demo-card,
#landing .bg-gradient-to-br {
  background: linear-gradient(160deg, rgba(40, 35, 60, 0.9), rgba(18, 18, 28, 0.95)) !important;
  border: 1px solid rgba(167, 139, 250, 0.25) !important;
  box-shadow: var(--shadow-glow), var(--shadow-card);
  border-radius: 24px !important;
}

/* Trust chips */
#landing .rounded-full {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line-strong) !important;
  backdrop-filter: blur(8px);
}

/* Feature sections */
.feature-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
.feature-tile:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}

/* —— App shell —— */
#app-shell aside,
aside.sidebar,
#sidebar {
  background: rgba(10, 10, 16, 0.9) !important;
  border-right: 1px solid var(--line) !important;
  backdrop-filter: blur(20px);
}

.nav-btn {
  border-radius: 12px !important;
  transition: background 0.15s, color 0.15s;
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.nav-btn.active,
.nav-btn[aria-current="page"] {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--accent) !important;
}

/* Top bar stats */
#app header,
.app-header {
  background: rgba(7, 7, 12, 0.7) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line) !important;
}

/* Balance big number */
.balance-hero,
#total-balance {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Asset rows */
.asset-row {
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.asset-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Deposit bonus */
.deposit-bonus-banner {
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.18), rgba(200, 245, 66, 0.08));
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: var(--radius);
}

/* Toast */
.toast,
#toast {
  background: var(--surface-solid) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card);
}

/* Auth modal */
#auth-modal .card,
.auth-card {
  background: var(--surface-solid) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--shadow-glow), var(--shadow-card);
}

/* Auth modal close (X): shrink + tuck it into the corner (small polish,
   keeps it clear of the tab row below with room to spare). */
button[onclick="closeAuth()"] {
  top: 0.5rem !important;
  right: 0.5rem !important;
  padding: 0.375rem !important;
}
button[onclick="closeAuth()"] svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Auth modal tab switcher (Iniciar sesión / Crear cuenta): the row had a
   large reserved right-hand gutter (pr-10 = 2.5rem) meant to clear the
   close button, but the close button sits well above it — the gutter just
   left a dead strip of dark background and made the active (purple) tab
   look like it didn't fill its own space. Drop it back down to match the
   row's own p-1 so both tabs fill the row symmetrically. */
.flex.bg-slate-950.rounded-xl.p-1.mb-6.border.border-slate-800.relative.z-20.pr-10 {
  padding-right: 0.25rem !important;
}

/* Ahorro/Préstamo term-selector pills (Flexible/3m/6m/12m, Abierto/30/90
   días): JS toggles a plain `.active` class on click, but there was no CSS
   rule for it — the highlighted look only ever came from Tailwind color
   classes hardcoded on the first button in the raw HTML. So the first
   option stayed highlighted forever and clicking another one never
   visually selected it. Style `.active` directly (with !important so it
   wins over any leftover hardcoded classes) so the highlight actually
   follows the click. */
.term-btn, .loan-term-btn {
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.term-btn.active, .loan-term-btn.active {
  border-color: rgba(139, 92, 246, 0.55) !important;
  background-color: rgba(139, 92, 246, 0.12) !important;
  color: var(--accent) !important;
}
.term-btn:not(.active), .loan-term-btn:not(.active) {
  border-color: var(--line-strong) !important;
  background-color: transparent !important;
  color: var(--text-dim) !important;
}

/* Rounded pills like Lemon/Belo */
.rounded-xl { border-radius: 16px !important; }
.rounded-2xl { border-radius: 20px !important; }
.rounded-full { border-radius: 999px !important; }

/* Mobile bottom nav */
.mobile-nav,
#mobile-nav {
  background: rgba(10, 10, 16, 0.92) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line) !important;
  padding-bottom: var(--safe-bottom);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Subtle entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
#landing .grid > div:first-child {
  animation: fadeUp 0.6s ease both;
}
#landing .grid > div:last-child {
  animation: fadeUp 0.7s 0.1s ease both;
}

/* Level badge */
.level-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(200, 245, 66, 0.1));
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

/* QR white pad */
#deposit-qr-img {
  border-radius: 12px;
}

/* Select options */
option {
  background: #14141e;
  color: #f4f4f7;
}

/* —— Landing scroll reveals —— */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

@keyframes pulse-slow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
.animate-bounce-slow {
  animation: bounce-slow 2.2s ease-in-out infinite;
}

#landing-screen details summary::-webkit-details-marker { display: none; }
#landing-screen details[open] {
  border-color: rgba(139, 92, 246, 0.35) !important;
}

#info-modal.flex { display: flex; }
.footer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.spark-wrap {
  height: 36px !important;
  max-height: 36px;
  overflow: hidden;
}
.spark-wrap canvas {
  max-height: 36px !important;
}


/* Feature icons */
.feat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.feat-icon-violet { background: rgba(139,92,246,0.15); color: #c4b5fd; }
.feat-icon-emerald { background: rgba(52,211,153,0.12); color: #6ee7b7; }
.feat-icon-amber { background: rgba(251,191,36,0.12); color: #fcd34d; }
.feat-icon-sky { background: rgba(56,189,248,0.12); color: #7dd3fc; }
.feat-icon-rose { background: rgba(244,63,94,0.12); color: #fda4af; }

/* Smooth landing scroll + alternating panels */
html { scroll-behavior: smooth; }
#landing-screen {
  transition: background-color 0.7s ease;
}
.land-section {
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
.land-section.land-dark {
  background: rgba(7, 7, 12, 0.35);
}
.land-section.land-light {
  background: rgba(255, 255, 255, 0.035);
}



/* Settings mobile padding for bottom nav */
#page-settings {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
  #page-settings { padding-bottom: 1.5rem; }
}


/* Banner-to-banner smooth snap on landing */
html {
  scroll-behavior: smooth;
}
@media (min-width: 768px) {
  html.landing-snap-on {
    scroll-snap-type: y proximity;
  }
}
.land-snap {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: min(100vh, 900px);
}
/* Hero always full viewport snap */
section.land-snap.min-h-screen {
  min-height: 100vh;
  scroll-snap-stop: always;
}

/* Smooth continuous landing background (no hard cuts) */
body.land-scroll-root {
  transition: background-color 1.2s ease;
  background-color: #07070c;
}
.land-section {
  transition: background-color 1s ease;
}

/* ===== Mobile landing page: less scroll, less "zoomed in" ===== */

/* Snap-scrolling only turns on at md/768px+ (see html.landing-snap-on
   above), but `.land-snap`'s fixed min-height was applying at every size —
   so on a phone, even a short section (e.g. the "USDT / 24/7 / Swap" strip
   or "Transparencia primero") was stretched to ~900px/100vh tall for no
   reason, padding it out with empty space and forcing extra scrolling.
   Below md, let sections size to their actual content instead. The hero
   keeps a full-screen feel via svh (matches the real visible viewport on
   mobile browsers, avoiding the address-bar jump 100vh causes). */
@media (max-width: 767px) {
  .land-snap {
    min-height: auto !important;
  }
  section.land-snap.min-h-screen {
    min-height: 100svh !important;
  }

  /* py-24 (6rem top+bottom) per section adds up fast down a phone screen;
     tighten it so sections feel like a normal page, not an empty scroll.
     The hero (min-h-screen) keeps its own spacing untouched. */
  section.land-snap:not(.min-h-screen) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Two columns on phones for the short, icon-led feature tiles ("Todo lo
   que necesitás en una cuenta") and the 3-stat story strip ("USDT / 24/7 /
   Swap") — each item is short enough that 2-per-row still reads fine, and
   it roughly halves how far you scroll through them. Tailwind already
   gives these 2 columns at its own sm: (640px) breakpoint; this just
   extends that same look down to narrower phones too, instead of starting
   as a single stacked column below 640px. */
@media (max-width: 639px) {
  .grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-5,
  .grid.sm\:grid-cols-3.gap-8.text-center.reveal {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid.sm\:grid-cols-2.lg\:grid-cols-3.gap-5 .feature-tile {
    padding: 1.125rem !important;
  }

  /* The 3-item "USDT / 24/7 / Swap" strip becomes 2 columns above — its
     3rd item (Swap) would otherwise land alone in the 2nd row stuck to the
     left. Span it across both columns so it sits centered instead. */
  .grid.sm\:grid-cols-3.gap-8.text-center.reveal > div:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* A touch more breathing room on the sides of the landing page on phones —
   px-4 (1rem) reads a little tight edge-to-edge on a small screen. */
@media (max-width: 639px) {
  #landing-screen .px-4 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ===== Hero entrance animations ===== */
/* The hero headline and the demo balance card both currently just fade up
   together with the rest of their block via .reveal. Give each of them its
   own distinct, slightly staggered entrance so the hero feels more
   intentional: the headline sharpens into focus first, then the demo card
   settles in just after. Runs once on load (these are above the fold). */
#landing-screen h1[data-i18n="landing.hero"] {
  animation: heroTitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes heroTitleReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.rounded-3xl.border-violet-500\/20.bg-gradient-to-br.shadow-violet-900\/40 {
  animation: heroCardReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes heroCardReveal {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #landing-screen h1[data-i18n="landing.hero"],
  .rounded-3xl.border-violet-500\/20.bg-gradient-to-br.shadow-violet-900\/40 {
    animation: none;
  }
}

/* ===== Products section: subtler per-card link + fixed network claim ===== */
/* Each product card used to end in a full, solid, "Regístrate para..."
   button — four of those stacked in one grid reads as repetitive/spammy.
   Style them as a quiet text link instead; a single strong CTA below the
   whole grid (added in index.html) now carries the actual conversion. */
.card-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.15s ease, color 0.15s ease;
}
.card-cta-link:hover {
  gap: 0.625rem;
  color: var(--text);
}

/* Smooth scrolling removed per request — plain scroll, user-controlled. */
html {
  scroll-behavior: auto !important;
}

/* ===== Hero: smaller on phones so a peek of what's below is visible ===== */
/* On a phone, the title + subtitle + chips alone were already filling the
   whole screen (min-h-screen), so there was no visual hint that more
   content (description, demo card, buttons, and the rest of the page)
   exists below. Shrinking type/spacing and dropping the forced full-screen
   height lets more of the page actually show in one view. */
@media (max-width: 639px) {
  section.land-snap.min-h-screen.hero-section {
    min-height: auto !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-title {
    font-size: 1.875rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.75rem !important;
  }
  .hero-sub {
    font-size: 1rem !important;
    margin-bottom: 0.875rem !important;
  }
  .hero-desc {
    font-size: 0.8125rem !important;
    margin-bottom: 1.25rem !important;
  }
  .hero-chips {
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .hero-chips > div {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }
}

/* Landing header when the user is already signed in (came back via logo) */
.logged-in-only { display: none; }
body.is-logged-in .logged-in-only { display: inline-flex !important; }
body.is-logged-in .logged-out-only { display: none !important; }