/* ============ BOXO LANDING — DESIGN SYSTEM ============ */
:root{
  /* Light mode — Boxo blue primary */
  --bg: oklch(0.985 0.003 260);
  --bg-soft: oklch(0.965 0.008 260);
  --ink: oklch(0.16 0.04 265);
  --ink-soft: oklch(0.42 0.03 265);
  --ink-faint: oklch(0.62 0.02 265);
  --line: oklch(0.90 0.01 265);
  --card: oklch(1 0 0);
  --primary: oklch(0.45 0.24 268);         /* Boxo blue #2020C4-ish */
  --primary-deep: oklch(0.32 0.22 268);
  --primary-soft: oklch(0.94 0.04 268);
  --accent-a: oklch(0.72 0.17 300);
  --accent-b: oklch(0.82 0.14 195);
  --accent-c: oklch(0.86 0.16 90);
  --shadow-sm: 0 1px 2px oklch(0.2 0.04 50 / 0.06), 0 2px 8px oklch(0.2 0.04 50 / 0.04);
  --shadow-md: 0 4px 12px oklch(0.2 0.04 50 / 0.08), 0 12px 40px oklch(0.2 0.04 50 / 0.06);
  --shadow-lg: 0 10px 30px oklch(0.2 0.04 50 / 0.10), 0 30px 80px oklch(0.2 0.04 50 / 0.10);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
}

[data-theme="dark"]{
  --bg: oklch(0.12 0.02 280);
  --bg-soft: oklch(0.17 0.03 280);
  --ink: oklch(0.97 0.01 80);
  --ink-soft: oklch(0.78 0.02 80);
  --ink-faint: oklch(0.55 0.02 80);
  --line: oklch(0.28 0.03 280);
  --card: oklch(0.18 0.035 280);
  --primary: oklch(0.78 0.18 42);
  --primary-deep: oklch(0.66 0.19 38);
  --primary-soft: oklch(0.32 0.08 40);
  --accent-a: oklch(0.74 0.18 300);
  --accent-b: oklch(0.80 0.15 195);
  --accent-c: oklch(0.88 0.16 90);
  --shadow-sm: 0 1px 2px #000a, 0 2px 8px #0006;
  --shadow-md: 0 4px 12px #0008, 0 12px 40px #0006;
  --shadow-lg: 0 10px 30px #000a, 0 30px 80px #0008;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .6s cubic-bezier(.4,0,.2,1), color .6s;
}
a{ color: inherit; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.serif{ font-family: 'Instrument Serif', 'Fraunces', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ============ LAYOUT ============ */
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ============ NAV ============ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
  transition: background .4s;
}
.nav-inner{
  max-width: 1240px; margin:0 auto; padding: 14px 28px;
  display:flex; align-items:center; justify-content: space-between; gap:24px;
}
.logo{
  display:flex; align-items:center; gap:10px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
}
.logo-mark{
  width: 96px; height: 56px;
  background-image: url('/assets/boxo-logo-blue.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* Shrink vertical padding so the enlarged logo doesn't grow the nav bar */
.nav-inner { padding: 0 28px; }
@media (max-width: 780px) {
  .nav-inner { padding: 0 14px; }
}
[data-theme="dark"] .logo-mark{ background-image: url('/assets/boxo-logo-navy.png'); }
.logo span{ display: none; }
.nav-links{ display:flex; gap: 28px; font-size: 14.5px; color: var(--ink-soft); }
.nav-links a{ text-decoration:none; transition: color .2s; }
.nav-links a:hover{ color: var(--primary); }
.nav-actions{ display:flex; gap: 10px; align-items:center; }
.theme-toggle{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-soft); display:grid; place-items:center;
  border: 1px solid var(--line); transition: transform .3s, background .3s;
}
.theme-toggle:hover{ transform: scale(1.08); }
.theme-toggle svg{ width: 18px; height: 18px; }
/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line);
  position: relative; cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
  padding: 0;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink, #0E0E1A);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease, background .3s ease;
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.on span:nth-child(2) { opacity: 0; }
.nav-toggle.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-theme="dark"] .nav-toggle span { background: #FFFFFF; }

@media (max-width: 780px){
  .nav-toggle { display: inline-flex; order: 99; }
  .nav-inner { gap: 12px; }
  /* Panel overlay — slides under the nav bar */
  .nav-links {
    display: flex !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 14px; right: 14px;
    flex-direction: column;
    gap: 0;
    padding: 8px 6px;
    background: var(--bg, #FFFFFF);
    border: 1px solid var(--line, rgba(20,20,40,0.08));
    border-radius: 16px;
    box-shadow: 0 24px 60px -18px rgba(15, 20, 45, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    z-index: 40;
  }
  .nav-links.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink, #0E0E1A);
  }
  .nav-links a:hover { background: var(--bg-soft, #F5F5FA); color: var(--primary); }
  [data-theme="dark"] .nav-links {
    background: #151524;
    border-color: rgba(255,255,255,0.08);
  }
  [data-theme="dark"] .nav-links a { color: #FFFFFF; }
  [data-theme="dark"] .nav-links a:hover { background: rgba(255,255,255,0.06); }
  /* On mobile, hide the secondary "Ingresar" button to save space; keep Empezar + theme */
  .nav-actions .btn-ghost { display: none; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap: 8px; padding: 14px 22px;
  border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn-primary{
  background: var(--primary); color: white;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--primary) 35%, transparent),
              inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px color-mix(in oklch, var(--primary) 50%, transparent),
              inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-ghost{
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--primary); }
.btn-sm{ padding: 9px 16px; font-size: 14px; }

/* ============ HERO ============ */
.hero{
  position: relative;
  padding: 84px 0 24px;
  min-height: 100vh;
  display:flex; align-items:center;
  overflow: hidden;
}
.hero-canvas{
  position:absolute; inset:0; z-index:0; pointer-events: none;
}
.hero-grid{
  position: relative; z-index: 2;
  display:grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items:center;
}
@media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr; gap: 40px; } }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  animation: floaty 4s ease-in-out infinite;
}
.hero-eyebrow .dot{
  width: 8px; height: 8px; border-radius:50%; background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 20%, transparent);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(-4px)} }
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.6} }

.hero-title{
  font-size: clamp(48px, 6vw, 86px);
  line-height: 1.0; letter-spacing: -0.035em;
  margin: 16px 0 16px; font-weight: 700;
}
.hero-title .word{
  display:inline-block; opacity: 0; transform: translateY(30px);
  animation: wordIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title .word:nth-child(1){ animation-delay: .05s; }
.hero-title .word:nth-child(2){ animation-delay: .15s; }
.hero-title .word:nth-child(3){ animation-delay: .25s; }
.hero-title .word:nth-child(4){ animation-delay: .35s; }
.hero-title .word:nth-child(5){ animation-delay: .45s; }
.hero-title .word:nth-child(6){ animation-delay: .55s; }
@keyframes wordIn{ to{ opacity:1; transform: translateY(0); } }

.hero-title .accent{
  background: linear-gradient(100deg, var(--primary), var(--accent-a) 60%, var(--primary));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title .word.accent{
  animation: wordIn .9s cubic-bezier(.2,.8,.2,1) .25s forwards, shimmer 6s linear .95s infinite;
}

/* ===== BOXO WALLET CARD (real layout) ===== */
.boxo-card{
  position: relative;
  width: 320px; aspect-ratio: 2/3;
  border-radius: 18px;
  overflow: hidden;
  color: white;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  padding: 14px;
}
.boxo-card .bc-watermark{
  position: absolute; inset: 0;
  background-image: url('/assets/boxo-logo-white.png');
  background-size: 180% auto; background-repeat: no-repeat;
  background-position: -40% 40%;
  opacity: .08; pointer-events: none;
}
.boxo-card .bc-top{
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 1;
}
.boxo-card .bc-logo{
  max-height: 34px; max-width: 50%;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 24px; letter-spacing: -0.02em; line-height: 1;
}
.boxo-card .bc-pow{
  font-size: 9px; opacity: .55; display: flex; align-items: center; gap: 3px;
}
.boxo-card .bc-pow img{ height: 9px; }
.boxo-card .bc-stamps{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px 6px; margin: 18px 6px 0; position: relative; z-index: 1;
}
.boxo-card .bc-stamp{
  aspect-ratio: 1; font-size: 22px;
  display: grid; place-items: center;
  filter: grayscale(1) opacity(0.35);
  transition: filter .4s;
}
.boxo-card .bc-stamp.on{ filter: grayscale(0) opacity(1); }
.boxo-card .bc-meta{
  display: flex; justify-content: space-between; margin-top: auto;
  position: relative; z-index: 1; padding: 0 4px;
}
.boxo-card .bc-meta .k{ font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 600; }
.boxo-card .bc-meta .v{ font-size: 20px; font-weight: 500; margin-top: 2px; }
.boxo-card .bc-qr{
  background: white; border-radius: 10px; padding: 8px;
  width: 120px; margin: 14px auto 0; position: relative; z-index: 1;
}
.boxo-card .bc-qr-grid{
  width: 100%; aspect-ratio: 1;
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  border-radius: 2px;
}
.boxo-card .bc-qr-lbl{ text-align: center; font-size: 9px; color: #555; margin-top: 4px; letter-spacing: .04em; }

/* Hero floating cards */
.hero-floating{
  position: absolute; transform-origin: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.hero-floating .boxo-card{ width: 240px; }
.hero-floating.f1{ top: 10px; left: -10px; animation: cardFloat1 5.5s ease-in-out infinite; z-index: 1; }
.hero-floating.f2{ bottom: 30px; right: -20px; animation: cardFloat2 6.5s ease-in-out infinite; z-index: 1; }
.hero-floating.f3{ top: 50%; left: 50%; transform: translate(-50%, -50%); animation: cardFloat3 7s ease-in-out infinite; z-index: 5; }

/* Hero iPhone (background card becomes a phone with Boxo card inside) */
.hero-iphone{
  --iphone-w: 264px;
  --iphone-h: 540px;
  width: var(--iphone-w);
  height: var(--iphone-h);
  border-radius: 52px;
  /* Titanium-like metallic frame */
  background:
    linear-gradient(180deg, #3a3a42 0%, #1a1a22 8%, #0f0f18 50%, #1a1a22 92%, #3a3a42 100%);
  padding: 5px;
  box-shadow:
    0 50px 100px -20px rgba(0,0,0,.55),
    0 20px 40px -10px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 2px rgba(255,255,255,.2),
    inset 0 -1px 2px rgba(255,255,255,.1);
  position: relative;
}

/* Side buttons (titanium rail) */
.hi-btn{
  position: absolute;
  background: linear-gradient(90deg, #2a2a32 0%, #4a4a52 50%, #2a2a32 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.2), inset 0 -1px 1px rgba(0,0,0,.4);
}
.hi-silent{ left: -2px; top: 98px; width: 4px; height: 28px; border-radius: 2px 0 0 2px; }
.hi-vol-up{ left: -2px; top: 140px; width: 4px; height: 44px; border-radius: 2px 0 0 2px; }
.hi-vol-dn{ left: -2px; top: 196px; width: 4px; height: 44px; border-radius: 2px 0 0 2px; }
.hi-power { right: -2px; top: 155px; width: 4px; height: 72px; border-radius: 0 2px 2px 0; }

/* Inner screen bezel (the thin black ring around the display) */
.hi-bezel{
  width: 100%; height: 100%;
  border-radius: 46px;
  background: #000;
  padding: 2px;
  overflow: hidden;
  position: relative;
}
.hi-screen{
  width: 100%; height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: linear-gradient(180deg, #f2f2f7 0%, #e5e5eb 100%);
  position: relative;
}

/* Dynamic Island */
.hi-island{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 94px;
  height: 30px;
  background: #000;
  border-radius: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}
.hi-island-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #333, #000 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Status bar — real iOS style */
.hi-status{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 0;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  position: relative;
  z-index: 5;
  font-family: -apple-system, 'SF Pro Text', 'Space Grotesk', sans-serif;
}
.hi-time{
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-left: 4px;
}
.hi-status-r{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #000;
}
.hi-sig{ width: 18px; height: 10px; }
.hi-wifi{ width: 16px; height: 12px; }
.hi-bat{
  display: inline-flex;
  align-items: center;
  width: 25px;
  height: 12px;
  border: 1.2px solid rgba(0,0,0,.45);
  border-radius: 3px;
  padding: 1px;
  position: relative;
  margin-left: 2px;
}
.hi-bat-tip{
  position: absolute;
  right: -3px;
  top: 3.5px;
  width: 1.5px; height: 5px;
  background: rgba(0,0,0,.45);
  border-radius: 0 1px 1px 0;
}
.hi-bat-fill{
  width: 72%; height: 100%;
  background: #000;
  border-radius: 1px;
}

/* Wallet header */
.hi-wallet-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 10px;
}
.hi-wallet-h{
  font-family: -apple-system, 'SF Pro Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #000;
  letter-spacing: -0.03em;
}
.hi-done{
  background: none;
  border: none;
  color: #007AFF;
  font-family: -apple-system, 'SF Pro Text', 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 0;
  cursor: default;
  letter-spacing: -0.01em;
}

/* Card stack — main card in front, two ghost cards peeking below */
.hi-card-stack{
  position: relative;
  padding: 0 14px;
}
.hi-card{
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 16px 32px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.08);
  position: relative;
  z-index: 3;
}
.hi-card-peek{
  position: absolute;
  left: 22px; right: 22px;
  height: 14px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #B8D4FF, #8BADFF);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  z-index: 2;
}
.hi-card-peek-1{
  bottom: -10px;
  background: linear-gradient(180deg, #FFE9B8, #FFCB77);
}
.hi-card-peek-2{
  bottom: -18px;
  left: 30px; right: 30px;
  background: linear-gradient(180deg, #C8E8D4, #8FCFA8);
  z-index: 1;
}

/* Home indicator */
.hi-home-indicator{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  border-radius: 3px;
  background: #000;
  opacity: 0.9;
}

/* ===== LOGOS/BRANDS CAROUSEL ===== */
.brands-marquee{
  position: relative;
  padding: 40px 0 70px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.brands-track{
  display: flex; gap: 24px; width: max-content;
  animation: marquee 22s linear infinite;
}
/* don't pause on hover — keep flowing */
.brand-card{
  flex-shrink: 0; width: 220px; aspect-ratio: 2/3;
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .3s;
}
.brand-card:hover{ transform: translateY(-6px) scale(1.03); }
.brand-card img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===== DEMO CARD LIVE (real Boxo layout) ===== */
.demo-card-wrap{
  display: flex; justify-content: center; align-items: center; padding: 20px;
}
.demo-card-wrap .boxo-card{ width: 340px; }

/* ===== BOOK DEMO MODAL ===== */
.modal-backdrop{
  position: fixed; inset: 0; z-index: 500;
  background: color-mix(in oklch, var(--ink) 40%, transparent);
  backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .3s;
}
.modal-backdrop.on{ display: flex; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal{
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 520px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  animation: modalIn .4s cubic-bezier(.2,.8,.2,1);
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
@keyframes modalIn{ from{ transform: scale(0.95) translateY(20px); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.modal-close{
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-soft); font-size: 18px; color: var(--ink-soft);
}
.modal h3{ margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.modal p.sub{ margin: 0 0 22px; color: var(--ink-soft); font-size: 14.5px; }
.modal .step-ind{ display: flex; gap: 6px; margin-bottom: 20px; }
.modal .step-ind span{ flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.modal .step-ind span.active{ background: var(--primary); }
.field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label{ font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.field input, .field textarea{
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  font-family: inherit; font-size: 14.5px; background: var(--bg); color: var(--ink);
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--primary); }
.slot-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px;
}
.slot{
  padding: 10px 6px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 13px; cursor: pointer; transition: all .2s;
  text-align: center;
}
.slot:hover{ border-color: var(--primary); }
.slot.active{ background: var(--primary); color: white; border-color: var(--primary); }
.date-picker{
  display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px;
}
.date-chip{
  flex-shrink: 0; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
  text-align: center; min-width: 68px; transition: all .2s;
}
.date-chip:hover{ border-color: var(--primary); }
.date-chip.active{ background: var(--primary); color: white; border-color: var(--primary); }
.date-chip .d{ font-size: 11px; text-transform: uppercase; opacity: .7; }
.date-chip .n{ font-size: 20px; font-weight: 700; line-height: 1; margin: 3px 0; }
.date-chip .m{ font-size: 11px; opacity: .7; }
.modal-actions{ display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn{ flex: 1; justify-content: center; }
.success-check{
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary);
  color: white; display: grid; place-items: center; font-size: 30px;
  margin: 0 auto 16px;
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{ from{ transform: scale(0); } to{ transform: scale(1); } }

/* ===== PRICING (new) ===== */
.plan-features-group{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 14px 0 4px; }
.plan.featured .plan-features-group{ color: rgba(255,255,255,.55); }
.plan-feat.off{ color: var(--ink-faint); opacity: .55; }
.plan-feat.off::before{ content: "✕"; color: var(--ink-faint); }
.plan.featured .plan-feat.off{ color: rgba(255,255,255,.4); }
.plan.featured .plan-feat.off::before{ color: rgba(255,255,255,.4); }
.billing-toggle{
  display: flex; gap: 8px; justify-content: center; margin: 0 0 32px;
  background: var(--bg-soft); padding: 4px; border-radius: 12px;
  max-width: fit-content; margin-inline: auto;
}
.billing-toggle button{
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
  transition: all .2s;
}
.billing-toggle button.on{ background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.billing-toggle .save{ color: var(--primary); font-size: 11px; margin-left: 4px; font-weight: 700; }

/* Rotating word */
.rotator-wrap{
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  animation-delay: .45s !important;
}
.rotator{
  display: inline-block;
  position: relative;
  min-height: 1.1em;
  line-height: 1;
  vertical-align: bottom;
  vertical-align: baseline;
  text-align: left;
}
.rot-word{
  display: inline-block;
  position: absolute;
  top: 0; left: 0;
  background: linear-gradient(100deg, var(--primary), var(--accent-a) 60%, var(--primary));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
  will-change: transform, opacity, filter;
  white-space: nowrap;
}
/* Incoming word absolute, outgoing stays in flow until removed */
.rotator > .rot-word{
  position: absolute;
}
.rotator > .rot-word:last-child{
  position: relative;
}
.rot-word.enter{
  animation: rotIn .4s cubic-bezier(.2,.8,.2,1) forwards, shimmer 6s linear infinite;
}
.rot-word.exit{
  animation: rotOut .3s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes rotIn{
  0%{ opacity: 0; transform: translateY(0.5em) rotateX(-70deg) scale(0.92); filter: blur(8px); }
  60%{ filter: blur(0); }
  100%{ opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}
@keyframes rotOut{
  0%{ opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
  100%{ opacity: 0; transform: translateY(-0.5em) rotateX(70deg) scale(0.92); filter: blur(8px); }
}
@keyframes shimmer{ 0%{background-position: 0% 50%} 100%{background-position: 200% 50%} }

.hero-sub{
  font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-soft);
  max-width: 560px; line-height: 1.5; margin-bottom: 24px;
  opacity: 0; animation: wordIn .8s .6s forwards;
}

.hero-ctas{
  display:flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: wordIn .8s .75s forwards;
}
.hero-stats{
  display:flex; gap: 36px; margin-top: 28px;
  opacity: 0; animation: wordIn .8s .9s forwards;
}
.hero-stats .stat{ display:flex; flex-direction:column; gap: 4px; }
.hero-stats .stat-num{ font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.hero-stats .stat-lbl{ font-size: 12.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============ HERO RIGHT — FLOATING CARDS ============ */
.hero-visual{
  position: relative; height: 560px;
  perspective: 1400px;
  opacity: 0; animation: wordIn 1.2s .4s forwards;
}
.planet{
  position:absolute; border-radius: 50%;
  filter: blur(40px); opacity: .5;
  pointer-events: none;
}
.planet-1{ width: 360px; height: 360px; top: 10%; left: 20%;
  background: radial-gradient(circle, var(--primary), transparent 70%); animation: orbit1 14s ease-in-out infinite; }
.planet-2{ width: 280px; height: 280px; bottom: 10%; right: 10%;
  background: radial-gradient(circle, var(--accent-a), transparent 70%); animation: orbit2 18s ease-in-out infinite; }
.planet-3{ width: 200px; height: 200px; top: 40%; right: 30%;
  background: radial-gradient(circle, var(--accent-b), transparent 70%); animation: orbit3 12s ease-in-out infinite; }
@keyframes orbit1{ 0%,100%{transform: translate(0,0)} 50%{transform: translate(30px,-20px)} }
@keyframes orbit2{ 0%,100%{transform: translate(0,0)} 50%{transform: translate(-20px,30px)} }
@keyframes orbit3{ 0%,100%{transform: translate(0,0)} 50%{transform: translate(20px,20px)} }

/* Wallet card */
.wallet-card{
  position:absolute;
  width: 340px; height: 210px;
  border-radius: 22px;
  padding: 20px;
  color: white;
  box-shadow: var(--shadow-lg);
  transform-style: preserve-3d;
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.wallet-card .shine{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.1) 100%);
  pointer-events: none;
}
.wc-top{ display:flex; justify-content: space-between; align-items: flex-start; }
.wc-brand{ font-weight:700; font-size: 15px; letter-spacing: -0.01em; }
.wc-logo{
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.22);
  display:grid; place-items:center; font-size: 14px; font-weight: 800;
  backdrop-filter: blur(10px);
}
.wc-body{ margin-top: 36px; }
.wc-label{ font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.wc-value{ font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.wc-bottom{ position:absolute; bottom: 16px; left: 20px; right: 20px; display:flex; justify-content:space-between; align-items:center; }
.wc-stamps{ display:flex; gap: 5px; }
.wc-stamp{ width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); }
.wc-stamp.on{ background: rgba(255,255,255,.9); border-color: transparent; }
.wc-qr{
  width: 44px; height: 44px; border-radius: 8px; background: white;
  display:grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,1fr); gap: 1px; padding: 4px;
}
.wc-qr span{ background: #111; border-radius: 1px; }

.wallet-card.cafe{
  background: linear-gradient(135deg, oklch(0.45 0.14 30), oklch(0.32 0.10 20));
  top: 30px; left: 40px;
  transform: rotate(-8deg);
  animation: cardFloat1 8s ease-in-out infinite;
}
.wallet-card.gym{
  background: linear-gradient(135deg, oklch(0.55 0.18 300), oklch(0.38 0.15 280));
  top: 180px; right: 20px;
  transform: rotate(6deg);
  animation: cardFloat2 9s ease-in-out infinite;
}
.wallet-card.salon{
  background: linear-gradient(135deg, oklch(0.68 0.18 45), oklch(0.50 0.17 30));
  bottom: 40px; left: 80px;
  transform: rotate(-4deg);
  animation: cardFloat3 10s ease-in-out infinite;
}
@keyframes cardFloat1{
  0%,100% { transform: rotate(0deg) translate(0,0); }
  25%     { transform: rotate(3deg) translate(10px,-18px); }
  50%     { transform: rotate(-2deg) translate(-8px,-28px); }
  75%     { transform: rotate(4deg) translate(6px,-14px); }
}
@keyframes cardFloat2{
  0%,100% { transform: rotate(0deg) translate(0,0); }
  25%     { transform: rotate(-3deg) translate(-12px,-22px); }
  50%     { transform: rotate(2deg) translate(8px,-32px); }
  75%     { transform: rotate(-4deg) translate(-6px,-16px); }
}
@keyframes cardFloat3{
  0%,100% { transform: translate(-50%, -50%) rotate(-2deg); }
  25%     { transform: translate(calc(-50% + 6px), calc(-50% - 10px)) rotate(0.5deg); }
  50%     { transform: translate(-50%, calc(-50% - 18px)) rotate(2deg); }
  75%     { transform: translate(calc(-50% - 6px), calc(-50% - 8px)) rotate(-1deg); }
}

/* Orbit ring */
.orbit-ring{
  position:absolute; top:50%; left:50%;
  width: 520px; height: 520px;
  border: 1.5px dashed color-mix(in oklch, var(--ink) 15%, transparent);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(0);
  animation: spin 40s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
.orbit-dot{
  position:absolute; width: 10px; height: 10px; border-radius:50%;
  background: var(--primary);
  box-shadow: 0 0 14px var(--primary);
}

/* ============ SECTION ============ */
section{ position: relative; padding: 48px 0; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12.5px; color: var(--primary); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 16px;
}
.section-eyebrow::before{
  content:""; width: 24px; height: 1.5px; background: var(--primary);
}
.section-title{
  font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em;
  font-weight: 700; margin: 0 0 18px; max-width: 760px;
}
.section-sub{
  font-size: 18px; color: var(--ink-soft); max-width: 620px; line-height: 1.5;
  margin: 0 0 40px;
}

/* ============ HOW IT WORKS ============ */
.how{
  background: var(--bg-soft);
  border-radius: 40px;
  margin: 0 28px;
  padding: 70px 0;
}
.steps{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  padding: 0 40px;
}
@media (max-width: 880px){ .steps{ grid-template-columns: 1fr; } }
.step{
  position: relative;
  padding: 32px;
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step-num{
  position: absolute; top: -18px; left: 32px;
  width: 44px; height: 44px; border-radius: 14px;
  display:grid; place-items:center; font-weight: 700; font-size: 18px;
  color: white; background: var(--primary);
  box-shadow: 0 6px 16px color-mix(in oklch, var(--primary) 40%, transparent);
}
.step-visual{
  height: 200px; margin: 16px 0 24px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--bg-soft), var(--card));
  display:grid; place-items:center;
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.step h3{ font-size: 22px; margin: 0 0 8px; letter-spacing: -0.02em; }
.step p{ color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }

/* ============ LIVE DEMO ============ */
.demo-stage{
  display:grid; grid-template-columns: auto 1fr; gap: 60px; align-items: start;
}
@media (max-width: 960px){ .demo-stage{ grid-template-columns: 1fr; } }
.demo-phone{
  position: relative;
  width: 320px; height: 680px;
  margin: 0 auto;
  border-radius: 48px;
  background: #0a0a12;
  padding: 12px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #333;
}
.demo-phone::before{
  content:""; position:absolute; top: 18px; left:50%; transform: translateX(-50%);
  width: 110px; height: 28px; border-radius: 14px; background: #000; z-index: 2;
}
.demo-screen{
  width: 100%; height: 100%; border-radius: 36px;
  background: linear-gradient(180deg, oklch(0.95 0.02 60), oklch(0.9 0.03 30));
  overflow: hidden; position: relative;
}
.demo-tweaks{
  display:flex; flex-direction: column; gap: 20px;
}

/* External controls below the phone */
.demo-external-controls {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dec-btn {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,0.05);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.1);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.dec-btn:hover { background: rgba(0,0,0,0.08); transform: translateY(-1px); }
.dec-btn-primary {
  background: #111;
  border-color: #111;
  color: #fff;
}
.dec-btn-primary:hover { background: #000; }
.dec-hint {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}
/* Stamp slots look clickable */
.demo-stamp { cursor: pointer; transition: transform .15s; }
.demo-stamp:hover { transform: scale(1.1); }
.demo-tweak{
  background: var(--card); border-radius: var(--radius-md);
  border: 1px solid var(--line); padding: 20px;
}
.demo-tweak h4{ margin:0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.swatches{ display:flex; gap: 10px; flex-wrap: wrap; }
.swatch{
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; transition: transform .2s;
  position: relative;
}
.swatch:hover{ transform: scale(1.12); }
.swatch.active{ border-color: var(--ink); }
.swatch.active::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color: white; font-size: 14px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.rw-chips{ display:flex; gap: 8px; flex-wrap: wrap; }
.rw-chip{
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: 13.5px; cursor: pointer; transition: all .2s;
  background: var(--card);
}
.rw-chip:hover{ border-color: var(--primary); }
.rw-chip.active{ background: var(--primary); color: white; border-color: var(--primary); }

.stamps-input{
  display:flex; align-items:center; gap: 14px;
}
.stamps-input input[type="range"]{ flex: 1; accent-color: var(--primary); }
.stamps-input .val{ font-weight: 700; min-width: 24px; text-align: center; font-size: 18px; }

/* ============ FEATURES ============ */
.features-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
}
.feat{
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: transform .4s, box-shadow .4s;
  min-height: 240px;
}
.feat:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feat-big{ grid-column: span 6; min-height: 320px; }
.feat-mid{ grid-column: span 6; }
.feat-sm{ grid-column: span 4; }
.feat-sm-wide{ grid-column: span 8; }
@media (max-width: 900px){
  .feat{ grid-column: span 12 !important; }
}
.feat h3{ font-size: 22px; margin: 0 0 8px; letter-spacing: -0.02em; }
.feat p{ color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin: 0; }
.feat .feat-visual{ position: absolute; right: -20px; bottom: -20px; opacity: .9; }

/* ============ SOCIAL PROOF ============ */
.logos-strip{
  display:flex; gap: 50px; align-items: center; justify-content: center;
  flex-wrap: wrap; opacity: .75;
}
.logo-chip{
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 26px; letter-spacing: -0.02em;
  color: var(--ink-soft);
}

/* ============ TESTIMONIALS ============ */
.testimonials{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px){ .testimonials{ grid-template-columns: 1fr; } }
.testi{
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .4s;
}
.testi:hover{ transform: translateY(-4px); }
.testi-quote{ font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; }
.testi-quote .q{ font-family: 'Instrument Serif', serif; font-size: 48px; color: var(--primary); line-height: .5; vertical-align: -22px; margin-right: 4px; }
.testi-person{ display:flex; gap: 12px; align-items:center; margin-top: auto; }
.testi-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-a), var(--primary));
  display:grid; place-items:center; color: white; font-weight: 700;
}
.testi-name{ font-weight: 600; font-size: 15px; }
.testi-role{ font-size: 13px; color: var(--ink-faint); }

/* ============ PRICING ============ */
.pricing{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
@media (max-width: 880px){ .pricing{ grid-template-columns: 1fr; } }
.plan{
  padding: 32px; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line);
  display:flex; flex-direction: column; gap: 20px;
  transition: transform .4s, box-shadow .4s;
  position: relative;
}
.plan:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan.featured{
  background: linear-gradient(160deg, var(--ink) 0%, oklch(0.25 0.04 280) 100%);
  color: white;
  border-color: transparent;
  transform: scale(1.04);
}
.plan.featured:hover{ transform: scale(1.04) translateY(-4px); }
.plan.featured .plan-name,
.plan.featured .plan-feat{ color: rgba(255,255,255,.8); }
.plan.featured .plan-price .n{ color: white; }
.plan-badge{
  position:absolute; top: -12px; right: 24px;
  background: var(--primary); color: white; padding: 5px 12px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.plan-name{ font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.plan-price{ display:flex; align-items: baseline; gap: 6px; }
.plan-price .n{ font-size: 52px; font-weight: 700; letter-spacing: -0.035em; }
.plan-price .per{ font-size: 14px; color: var(--ink-faint); }
.plan-desc{ font-size: 14px; color: var(--ink-soft); line-height: 1.5; min-height: 42px; }
.plan-feats{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; }
.plan-feat{ display:flex; gap: 10px; font-size: 14.5px; align-items: flex-start; }
.plan-feat::before{ content:"✓"; color: var(--primary); font-weight: 700; flex-shrink:0; }
.plan.featured .plan-feat::before{ color: var(--accent-c); }

/* ============ FAQ ============ */
.faq{
  max-width: 780px; margin: 0 auto;
}
.faq-item{
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-q{
  width: 100%; padding: 24px 0; display:flex; justify-content: space-between; align-items:center; gap: 20px;
  font-size: 19px; font-weight: 500; letter-spacing: -0.01em; text-align: left;
}
.faq-q:hover{ color: var(--primary); }
.faq-icon{
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line);
  display:grid; place-items:center; flex-shrink: 0; transition: all .3s;
  position: relative;
}
.faq-icon::before,
.faq-icon::after{
  content:""; position:absolute; background: currentColor;
}
.faq-icon::before{ width: 12px; height: 1.5px; }
.faq-icon::after{ width: 1.5px; height: 12px; transition: transform .3s; }
.faq-item.open .faq-icon{ background: var(--primary); border-color: var(--primary); color: white; }
.faq-item.open .faq-icon::after{ transform: rotate(90deg); }
.faq-a{
  max-height: 0; transition: max-height .4s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-a{ max-height: 300px; }
.faq-a-inner{ padding: 0 0 24px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

/* ============ FINAL CTA ============ */
.final-cta{
  position: relative;
  margin: 0 28px 60px;
  padding: 100px 40px;
  border-radius: 48px;
  background: linear-gradient(160deg, oklch(0.22 0.06 290), oklch(0.15 0.05 280) 60%, oklch(0.28 0.08 30));
  color: white;
  overflow: hidden;
  text-align: center;
}
.final-cta-inner{ position: relative; z-index: 2; }
.final-cta h2{
  font-size: clamp(42px, 6vw, 82px); letter-spacing: -0.035em; line-height: .95;
  margin: 0 0 20px; font-weight: 700;
}
.final-cta p{ font-size: 20px; opacity: .85; margin: 0 0 36px; max-width: 600px; margin-inline: auto; }
.final-cta .btn-ghost{
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: white;
  backdrop-filter: blur(10px);
}
.final-cta-bubbles{
  position: absolute; inset: 0; pointer-events: none;
}
.final-cta-bubble{
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 60%),
              radial-gradient(circle at 70% 70%, var(--primary), var(--accent-a));
  filter: blur(2px);
  animation: bubbleRise 12s linear infinite;
  opacity: .7;
}
@keyframes bubbleRise{
  0%{ transform: translateY(100%) scale(0.6); opacity: 0; }
  20%{ opacity: .7; }
  100%{ transform: translateY(-500%) scale(1.2); opacity: 0; }
}

/* ============ FOOTER ============ */
.footer{
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
}
.footer-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer h4{ font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 16px; }
.footer ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; }
.footer a{ text-decoration: none; color: var(--ink); font-size: 14.5px; transition: color .2s; }
.footer a:hover{ color: var(--primary); }
.footer-bottom{
  display:flex; justify-content: space-between; align-items:center;
  padding-top: 30px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-faint);
}

/* ============ CURSOR BUBBLES ============ */
.cursor-bubble{
  position: fixed; width: 14px; height: 14px; border-radius: 50%;
  pointer-events: none; z-index: 300;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), transparent 40%),
              radial-gradient(circle at 70% 70%, color-mix(in oklch, var(--primary) 60%, transparent), color-mix(in oklch, var(--accent-a) 40%, transparent));
  box-shadow: 0 0 12px color-mix(in oklch, var(--primary) 30%, transparent);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .cursor-bubble{ mix-blend-mode: screen; }

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s, transform .7s;
}
.reveal-stagger.in > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay: .45s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .55s; }

/* ============ TWEAKS PANEL ============ */
.tweaks-panel{
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 300px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 20px;
  box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; gap: 16px;
  font-size: 14px;
}
.tweaks-panel.on{ display: flex; }
.tweaks-panel h4{ margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.tweak-row{ display:flex; flex-direction:column; gap: 8px; }
.tweak-row label{ font-size: 12.5px; color: var(--ink-soft); }
.tweak-seg{
  display:flex; background: var(--bg-soft); border-radius: 10px; padding: 3px;
}
.tweak-seg button{
  flex:1; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); transition: all .2s;
}
.tweak-seg button.on{ background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ============ HERO VARIANT B (BUBBLE) ============ */
[data-hero="bubble"] .hero{
  background: linear-gradient(180deg, var(--bg), color-mix(in oklch, var(--accent-b) 8%, var(--bg)));
}
[data-hero="bubble"] .orbit-ring{ display: none; }
[data-hero="bubble"] .planet-1,
[data-hero="bubble"] .planet-2,
[data-hero="bubble"] .planet-3{
  filter: blur(30px);
  opacity: .7;
}

/* ============ UTILITIES ============ */
.center{ text-align: center; margin-inline: auto; }
.tcenter{ display:flex; flex-direction: column; align-items: center; }


/* ============================================================
   TIPOS DE TARJETAS
============================================================ */
.tipos-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 40px;
}

.tipo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.tipo-row.reverse .tipo-visual { order: 2; }

.tipo-visual {
  position: relative;
  aspect-ratio: 1 / 0.9;
  border-radius: 32px;
  background: linear-gradient(135deg, #F8F5F0 0%, #F0ECE4 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Solid tinted backgrounds for SVG-mockup rows; photo rows override to transparent below */
.tipo-row:nth-child(1) .tipo-visual { background: radial-gradient(ellipse at top left, #FFE9DE 0%, #FFF8F3 60%); }
.tipo-row:nth-child(2) .tipo-visual { background: radial-gradient(ellipse at top right, #1a1a24 0%, #0a0a12 70%); }
.tipo-row:nth-child(3) .tipo-visual { background: radial-gradient(ellipse at bottom left, #DDF6EC 0%, #F0FAF5 60%); }
.tipo-row:nth-child(4) .tipo-visual { background: radial-gradient(ellipse at top right, #FFF3D2 0%, #FFFAED 60%); }

/* Photo rows: no background so phone images float naturally */
.tipo-row .tipo-visual-photo { background: transparent !important; }

/* Photo-based visual (real phone photos replacing SVG mockups) */
.tipo-visual-photo {
  aspect-ratio: 1 / 1.05;
  padding: 24px 32px;
  overflow: hidden;
}
.tipo-photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}
.tipo-row:hover .tipo-photo { transform: scale(1.03); }
.tipo-photo-top { object-position: center top; }

/* Duo layout for gift card section - two images side by side, both fully visible */
.tipo-visual-duo {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 12px;
  min-height: 360px;
  overflow: visible;
}
.tipo-photo-duo {
  position: relative;
  height: auto;
  width: auto;
  max-width: 46%;
  max-height: 420px;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 22px 40px rgba(15, 30, 20, 0.22));
}
.tpd-back {
  transform: rotate(-4deg) translateY(8px);
  animation: duoFloatBack 6s ease-in-out infinite;
}
.tpd-front {
  transform: rotate(4deg) translateY(-8px) scale(1.5);
  transform-origin: center;
  animation: duoFloatFront 6s ease-in-out infinite;
}
@keyframes duoFloatBack {
  0%, 100% { transform: rotate(-4deg) translateY(8px); }
  50%      { transform: rotate(-6deg) translateY(2px); }
}
@keyframes duoFloatFront {
  0%, 100% { transform: rotate(4deg) translateY(-8px) scale(1.5); }
  50%      { transform: rotate(6deg) translateY(-14px) scale(1.5); }
}
.tipo-row:hover .tpd-back  { transform: rotate(-7deg) translateY(-4px); animation-play-state: paused; }
.tipo-row:hover .tpd-front { transform: rotate(7deg)  translateY(-14px) scale(1.5); animation-play-state: paused; }

@media (max-width: 760px) {
  .tipo-visual-duo { min-height: 280px; gap: 10px; }
  .tipo-photo-duo  { max-height: 320px; max-width: 47%; }
}

.tipo-phone {
  width: 260px;
  aspect-ratio: 9 / 17;
  background: #0E0E1A;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.08);
  position: relative;
  z-index: 2;
  transform: rotate(-4deg);
  transition: transform 0.4s ease;
}
.tipo-phone-right { transform: rotate(4deg); }
.tipo-row:hover .tipo-phone { transform: rotate(0deg) scale(1.02); }

.tp-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #000;
  border-radius: 12px;
  z-index: 3;
}

.tp-screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
}

.tp-card-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.25);
}

/* sparks on loyalty card */
.tipo-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tipo-sparks .spk {
  position: absolute;
  font-size: 24px;
  color: #FF6B35;
  animation: sparkFloat 3s ease-in-out infinite;
}
.tipo-sparks .spk-1 { top: 18%; left: 12%; animation-delay: 0s; font-size: 28px; color: #FFC647; }
.tipo-sparks .spk-2 { top: 28%; right: 14%; animation-delay: 0.6s; font-size: 20px; color: #FF6B35; }
.tipo-sparks .spk-3 { bottom: 22%; left: 18%; animation-delay: 1.2s; color: #FF4DA6; }

@keyframes sparkFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(-10px) rotate(15deg); opacity: 1; }
}

/* coupon float (tipo 2) */
.coupon-float {
  position: absolute;
  top: 22%;
  left: 14%;
  background: #FFF;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
  z-index: 3;
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: couponPulse 3s ease-in-out infinite;
}
.cf-strip {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #2020C4;
  letter-spacing: -0.02em;
}
.cf-txt {
  font-size: 10px;
  color: #555;
  font-weight: 500;
}
@keyframes couponPulse {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(-4deg) scale(1.04); }
}

/* gift ribbon (tipo 3) */
.gift-ribbon {
  position: absolute;
  bottom: 20%;
  right: 10%;
  background: #2BC48F;
  color: #FFF;
  padding: 14px 20px;
  border-radius: 16px;
  z-index: 3;
  transform: rotate(8deg);
  box-shadow: 0 20px 40px -12px rgba(43,196,143,0.5);
}
.gr-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.gr-lbl {
  font-size: 10px;
  opacity: 0.9;
  margin-top: 4px;
  font-weight: 500;
}
.gift-bow {
  position: absolute;
  top: 18%;
  right: 16%;
  font-size: 48px;
  animation: bowBounce 2.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes bowBounce {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-8px) rotate(10deg); }
}

/* VIP crown (tipo 4) */
.vip-crown {
  position: absolute;
  top: 18%;
  left: 14%;
  background: #FFF;
  border-radius: 50%;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -12px rgba(184,123,0,0.4);
  z-index: 3;
  animation: crownFloat 3s ease-in-out infinite;
}
@keyframes crownFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

/* Copy side */
.tipo-copy { padding: 0 16px; }
.tipo-tag {
  display: inline-flex;
  align-items: center;
  background: var(--tag, #FF6B35);
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tipo-copy h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #0E0E1A;
}
.tipo-copy > p {
  font-size: 17px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 28px;
}
.tipo-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tipo-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tb-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.tipo-benefits li > div { display: flex; flex-direction: column; }
.tipo-benefits strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0E0E1A;
  letter-spacing: -0.01em;
}
.tipo-benefits span {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

/* ========================================================= */
/* Dark mode overrides — fix contrast on tipos + benefits    */
/* ========================================================= */
[data-theme="dark"] .tipo-copy h3         { color: #FFFFFF; }
[data-theme="dark"] .tipo-copy > p        { color: rgba(255, 255, 255, 0.72); }
[data-theme="dark"] .tipo-benefits strong { color: #FFFFFF; }
[data-theme="dark"] .tipo-benefits span   { color: rgba(255, 255, 255, 0.55); }

/* Dark mode — pricing tags (swap to lighter --bub for contrast) */
[data-theme="dark"] .pbubble-tag {
  color: var(--bub);
  background: color-mix(in oklch, var(--bub) 18%, transparent);
}
[data-theme="dark"] .bt-save { background: rgba(34, 197, 94, 0.18); color: #4ADE80; }
[data-theme="dark"] .bt-btn.on .bt-save { background: #22C55E; color: #062B0F; }

/* ================================================= */
/* == Chooser modal — self vs assist               == */
/* ================================================= */
.chooser-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}
.chooser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 20, 40, 0.08);
  box-shadow: 0 20px 40px -24px rgba(15, 20, 45, 0.22);
  text-align: left;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  font-family: inherit;
  color: inherit;
}
.chooser-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 52px -24px rgba(15, 20, 45, 0.32);
}
.chooser-card-head { display: flex; align-items: center; gap: 12px; }
.chooser-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chooser-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: #0E0E1A;
  line-height: 1.2;
}
.chooser-card .start-feats { margin: 2px 0 0; gap: 8px; width: 100%; }
.chooser-card .start-feats li { font-size: 13.5px; }
.chooser-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(14, 14, 26, 0.4);
  transition: transform .3s ease, color .3s ease;
}
.chooser-card:hover .chooser-arrow {
  transform: translateX(4px);
  color: #2020C4;
}
.start-card-assist.chooser-card:hover .chooser-arrow { color: #FF4DA6; }

/* Shared .start-card card visuals used inside the chooser modal */
.start-card-self   { background: linear-gradient(150deg, #FFFFFF 0%, #EEF2FF 100%); }
.start-card-assist {
  background: linear-gradient(150deg, #FFFFFF 0%, #FFE5F1 100%);
  border-color: rgba(255, 77, 166, 0.24);
  box-shadow: 0 20px 40px -24px rgba(255, 77, 166, 0.30);
}
.start-card-assist:hover {
  box-shadow: 0 28px 52px -24px rgba(255, 77, 166, 0.38);
}
.start-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #E5307F 0%, #FF4DA6 100%);
  color: #FFFFFF;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 10px 20px -8px rgba(255, 77, 166, 0.55), 0 0 0 3px #FFFFFF;
  white-space: nowrap;
  z-index: 2;
}
.start-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}
.start-icon-self   { background: linear-gradient(145deg, #4F6FF5 0%, #2020C4 100%); }
.start-icon-assist { background: linear-gradient(145deg, #FF4DA6 0%, #E5307F 100%); }

.start-kicker {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(14, 14, 26, 0.55);
}
.start-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.start-feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #0E0E1A;
}
.start-feats li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(32, 32, 196, 0.12);
  color: #2020C4;
  font-size: 12px; font-weight: 800;
}
.start-card-assist .start-feats li > span {
  background: rgba(255, 77, 166, 0.14);
  color: #E5307F;
}

/* Dark mode */
[data-theme="dark"] .chooser-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .start-card-self {
  background: linear-gradient(150deg, rgba(79,111,245,0.08) 0%, rgba(32,32,196,0.14) 100%);
}
[data-theme="dark"] .start-card-assist {
  background: linear-gradient(150deg, rgba(255,77,166,0.08) 0%, rgba(229,48,127,0.18) 100%);
  border-color: rgba(255, 77, 166, 0.28);
}
[data-theme="dark"] .start-kicker { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .chooser-card h3 { color: #FFFFFF; }
[data-theme="dark"] .start-feats li { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .chooser-arrow { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .start-badge { box-shadow: 0 10px 20px -8px rgba(255, 77, 166, 0.55), 0 0 0 3px #0B0B15; }

@media (max-width: 520px) {
  .chooser-card { padding: 18px 18px 18px; gap: 10px; }
  .start-icon { width: 40px; height: 40px; border-radius: 10px; }
  .chooser-card h3 { font-size: 16px; }
}

/* ========================================================================
 * NEW (mockup-approved 2026-05-05): chooser visual + meta chips + fan hero
 * ====================================================================== */

.start-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 20, 40, 0.06);
}
@media (max-width: 520px) {
  .start-visual { padding: 8px 10px; }
  .start-visual .mini-phone { display: none; }
  .start-visual-text { font-size: 12.5px; line-height: 1.4; }
}
.start-visual-text {
  font-size: 12.5px;
  color: rgba(14, 14, 26, 0.7);
  font-weight: 500;
  line-height: 1.35;
}
.start-visual-text strong { color: #0E0E1A; font-weight: 700; }

[data-theme="dark"] .start-visual {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .start-visual-text { color: rgba(255, 255, 255, 0.78); }
[data-theme="dark"] .start-visual-text strong { color: #FFFFFF; }

.mini-phone {
  width: 62px; height: 108px;
  border-radius: 14px;
  background: #0d0d11;
  padding: 3px;
  flex-shrink: 0;
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.3);
}
.mini-phone-screen {
  width: 100%; height: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}
.mini-phone-top {
  height: 14px;
  background: #f7f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #888;
}
.mini-phone-card {
  margin: 6px;
  flex: 1;
  border-radius: 8px;
  padding: 5px 6px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 5px;
  line-height: 1;
}
.mini-phone-card.draft {
  background: repeating-linear-gradient(135deg, #d8d8e3, #d8d8e3 4px, #c8c8d3 4px, #c8c8d3 8px);
  color: #777;
}
.mini-phone-card.brand-final {
  background: linear-gradient(145deg, #1a3d6b 0%, #3a6fb0 100%);
}
.mini-phone-card .pcb-name {
  font-weight: 700;
  font-size: 6px;
  letter-spacing: -0.01em;
}
.mini-phone-card .pcb-stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 2px;
}
.mini-phone-card .pcb-stamp {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  min-height: 4px;
}
.mini-phone-card .pcb-stamp.filled { background: rgba(255, 255, 255, 0.85); }
.mini-phone-card .pcb-foot {
  font-size: 4.5px;
  opacity: 0.7;
  font-weight: 600;
}
.mini-phone-card .placeholder {
  font-weight: 700;
  font-size: 5px;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.06em;
}
.mini-phone-card .ph-line {
  height: 2px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  margin: 1px 0;
}
.mini-phone-card .ph-line.short { width: 50%; }

.start-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.start-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 40, 0.08);
  font-size: 11.5px;
  color: rgba(14, 14, 26, 0.7);
  font-weight: 500;
}
.start-card-self  .start-meta-chip { border-color: rgba(32, 32, 196, 0.18); }
.start-card-assist .start-meta-chip { border-color: rgba(255, 77, 166, 0.20); }

[data-theme="dark"] .start-meta-chip {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

/* /c hero: fanned card images mobile-only "ancla rápida" above the eyebrow.
 * Hidden on desktop because the big iPhone+Wallet hero-visual lives to the right. */
.fan-wrap { display: none; }
@media (max-width: 960px) {
  .fan-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 12px 0 -30px;
    height: 380px;
    position: relative;
    flex-shrink: 0;
    pointer-events: none;
  }
  .fan-card {
    position: absolute;
    top: 0;
    width: 240px;
    border-radius: 20px;
    box-shadow:
      0 36px 48px -20px rgba(20, 20, 80, 0.45),
      0 10px 20px rgba(0, 0, 0, 0.14);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, rgba(0,0,0,.4) 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, black 70%, rgba(0,0,0,.4) 90%, transparent 100%);
    display: block;
  }
  .fan-card:nth-child(1) { transform: translateX(-105px) rotate(-13deg) translateY(14px); z-index: 1; }
  .fan-card:nth-child(2) { transform: translateY(-2px) rotate(0deg);                       z-index: 3; }
  .fan-card:nth-child(3) { transform: translateX(105px)  rotate(13deg)  translateY(14px); z-index: 2; }

  /* Hide the original right-side hero-visual on mobile — the fan above
     already shows real cards. No need for the iPhone+Wallet duplicate below. */
  .hero .hero-visual { display: none !important; }

  /* /c mobile: hide subhead + stats so the new layout is just
     fan(cards) → eyebrow → headline → CTA.
     !important because /c has a head-level <style> with !important rules
     that share specificity with these selectors. */
  .hero .hero-sub,
  .hero .hero-stats { display: none !important; }
}

/* /c is the "no-motion" variant of the landing. Keep the planet bubbles for
 * visual consistency with / but freeze them — no orbit animation. */
[data-hero="cosmic"] .hero-canvas .planet { animation: none !important; }

/* Assist modal flow visual */
.assist-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}
.assist-flow-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-soft, #F5F5FA);
  border-radius: 14px;
  padding: 14px 16px;
}
.afs-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E5307F 0%, #FF4DA6 100%);
  color: #FFFFFF;
  font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(255, 77, 166, 0.45);
}
.assist-flow-step-highlight {
  background: linear-gradient(135deg, rgba(255, 77, 166, 0.10) 0%, rgba(229, 48, 127, 0.06) 100%) !important;
  border: 1px solid rgba(255, 77, 166, 0.20);
}
.assist-flow-step strong.afs-accent { color: #E5307F; font-weight: 800; }
[data-theme="dark"] .assist-flow-step-highlight {
  background: linear-gradient(135deg, rgba(255, 77, 166, 0.18) 0%, rgba(229, 48, 127, 0.10) 100%) !important;
  border-color: rgba(255, 77, 166, 0.30);
}
[data-theme="dark"] .assist-flow-step strong.afs-accent { color: #FF77BA; }
.assist-flow-step strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0E0E1A;
  margin-bottom: 2px;
}
.assist-flow-step p {
  margin: 0;
  font-size: 13.5px;
  color: #55556B;
  line-height: 1.45;
}
[data-theme="dark"] .assist-flow-step {
  background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .assist-flow-step strong { color: #FFFFFF; }
[data-theme="dark"] .assist-flow-step p { color: rgba(255,255,255,0.65); }

@media (max-width: 860px) {
  .tipos-grid { gap: 24px; margin-top: 28px; }
  .tipo-row { grid-template-columns: 1fr; gap: 24px; }
  .tipo-row.reverse .tipo-visual { order: 0; }
  .tipo-visual { aspect-ratio: 4 / 3; }
  .tipo-visual-photo { aspect-ratio: 4 / 4.2; padding: 16px; }
  .tipo-phone { width: 200px; }
}

/* ============================================================
   FLOW TABS V2 (Cómo funciona)
============================================================ */
/* Dark plate that hosts the flow tabs + illustrations so contrast works against the light .how bg */
.flow-dark-plate {
  background: linear-gradient(180deg, #0E0E1A 0%, #181826 100%);
  border-radius: 32px;
  padding: 12px 32px 56px;
  margin: 48px 0 0;
  box-shadow: 0 30px 80px -30px rgba(14,14,26,0.4);
}

.flow-tabs-v2[hidden] { display: none !important; }
.flow-tabs-v2 {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 40px;
  padding: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  width: fit-content;
  backdrop-filter: blur(10px);
}
.flow-tab-v2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: none;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.3s ease;
}
.flow-tab-v2:hover { color: #FFF; }
.flow-tab-v2.on {
  background: #FFF;
  color: #0E0E1A;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.ft-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.flow-tab-v2.on[data-flow="cliente"] .ft-dot { background: #FF6B35; }
.flow-tab-v2.on[data-flow="negocio"] .ft-dot { background: #2020C4; }
.flow-tab-v2.on[data-flow="gift"] .ft-dot { background: #2BC48F; }

.flow-stage-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Reorder: Negocio → Cliente → Gift card */
.flow-stage-v2 > [data-panel="negocio"],
.flow-stage-v2 > .flow-section-head:has(+ [data-panel="negocio"]) { order: 1; }
.flow-stage-v2 > [data-panel="cliente"],
.flow-stage-v2 > .flow-section-head:has(+ [data-panel="cliente"]) { order: 2; }
.flow-stage-v2 > [data-panel="gift"],
.flow-stage-v2 > .flow-section-head:has(+ [data-panel="gift"]) { order: 3; }
.flow-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 56px;
}
.flow-panel:last-child { margin-bottom: 0; }
.flow-panel.on { display: grid; }

/* Section header above each flow panel */
.flow-section-head {
  text-align: center;
  margin: 32px 0 8px;
  padding: 0 20px;
}
.flow-section-head:first-child,
.flow-section-head:has(+ [data-panel="negocio"]) { margin-top: 0; }
.fs-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--fs) 22%, transparent);
  color: var(--fs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid color-mix(in oklch, var(--fs) 40%, transparent);
  white-space: nowrap;
}
.flow-section-head h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #FFF;
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}

.fp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  position: relative;
}
.fp-badge {
  --b: #FF6B35;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--b);
  color: #FFF;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 800;
  z-index: 4;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.3);
}
.fp-illus {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  background: transparent;
  border: none;
  padding: 0;
  margin: 28px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-illus .fp-svg { width: 100%; height: 100%; }
.fp-svg {
  width: 100%;
  height: 100%;
}
.fp-step h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFF;
  margin: 0 0 6px;
}
.fp-step p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  margin: 0;
  max-width: 200px;
}

.fp-arrow {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
  position: relative;
  align-self: center;
  margin-top: 0;
}
.fp-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 8px solid rgba(255,255,255,0.3);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* SVG animations */
.fp-scan-line {
  animation: scanSweep 2s ease-in-out infinite;
}
@keyframes scanSweep {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(70px); opacity: 0.4; }
}

.fp-pointer {
  animation: pointerNudge 2.5s ease-in-out infinite;
}
@keyframes pointerNudge {
  0%, 100% { transform: translate(110px, 100px); }
  50% { transform: translate(100px, 90px); }
}

.fp-cursor {
  animation: cursorBlink 1s ease-in-out infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.fp-card-drop {
  animation: cardDrop 2.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes cardDrop {
  0% { transform: translateY(-16px); opacity: 0; }
  40%, 100% { transform: translateY(0); opacity: 1; }
}

.fp-sparks circle,
.fp-sparks path {
  animation: sparkPop 2.2s ease-in-out infinite;
  transform-origin: center;
}
.fp-sparks circle:nth-child(2) { animation-delay: 0.2s; }
.fp-sparks circle:nth-child(3) { animation-delay: 0.4s; }
.fp-sparks circle:nth-child(4) { animation-delay: 0.6s; }
.fp-sparks circle:nth-child(5) { animation-delay: 0.3s; }
.fp-sparks path:nth-child(6) { animation-delay: 0.5s; }
.fp-sparks path:nth-child(7) { animation-delay: 0.8s; }

@keyframes sparkPop {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* business flow */
.bp-stamp-1, .bp-stamp-2 { animation: stampExisting 3s ease infinite; }
.bp-stamp-3.bp-new {
  animation: stampNew 3s ease infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes stampNew {
  0%, 40% { transform: scale(0); opacity: 0; }
  55% { transform: scale(1.6); opacity: 1; }
  70%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes stampExisting {
  0%, 100% { opacity: 1; }
}
.bp-plus {
  animation: plusRise 3s ease infinite;
}
@keyframes plusRise {
  0%, 40% { transform: translate(78px, 56px); opacity: 0; }
  55% { transform: translate(78px, 40px); opacity: 1; }
  80% { transform: translate(78px, 20px); opacity: 1; }
  100% { transform: translate(78px, 0); opacity: 0; }
}
.bp-chart {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: chartDraw 3s ease-in-out infinite;
}
@keyframes chartDraw {
  0% { stroke-dashoffset: 160; }
  60%, 100% { stroke-dashoffset: 0; }
}

.gift-flow {
  stroke-dasharray: 3 3;
  animation: dashMove 1s linear infinite;
}
@keyframes dashMove {
  to { stroke-dashoffset: -12; }
}

/* responsive: stack flow panels on small screens */
@media (max-width: 960px) {
  .flow-panel { grid-template-columns: 1fr; gap: 8px; }
  .fp-arrow { display: none; }
  .fp-illus { max-width: 260px; }
}


/* ===== #como decorative bg (white metaballs + orbs) ===== */
#como { position: relative; overflow: hidden; }
.como-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.como-metaballs {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: 0.7;
  mix-blend-mode: overlay;
  animation: comoMetaDrift 24s ease-in-out infinite alternate;
}
.como-metaballs circle { animation: comoBlob 8s ease-in-out infinite alternate; transform-origin: center; }
.como-metaballs circle:nth-child(2) { animation-duration: 11s; animation-delay: -2s; }
.como-metaballs circle:nth-child(3) { animation-duration: 14s; animation-delay: -4s; }
.como-metaballs circle:nth-child(4) { animation-duration: 9s; animation-delay: -1s; }
.como-metaballs circle:nth-child(5) { animation-duration: 17s; animation-delay: -6s; }
@keyframes comoMetaDrift {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-3%, 2%); }
  100% { transform: translate(2%,-2%); }
}
@keyframes comoBlob {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(30px,-20px) scale(1.15); }
}

.como-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 72%);
  filter: blur(2px);
  animation: comoOrbFloat 14s ease-in-out infinite alternate;
}
.como-orb-1 { width: 120px; height: 120px; top: 18%; left: 8%; animation-duration: 16s; }
.como-orb-2 { width: 80px; height: 80px; top: 62%; right: 12%; animation-duration: 12s; animation-delay: -3s; }
.como-orb-3 { width: 55px; height: 55px; top: 38%; right: 22%; animation-duration: 18s; animation-delay: -6s; opacity: 0.8; }
@keyframes comoOrbFloat {
  0%   { transform: translate(0,0); }
  100% { transform: translate(40px,-30px); }
}

/* Ensure content sits above decor */
#como .how, #como .wrap { position: relative; z-index: 1; }




/* ===== PRICING — Soft Pastel v4 ===== */
#precios { position: relative; overflow: hidden; padding: 80px 0 96px; }

.price-decor {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.pb-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.4;
  animation: pbOrb 20s ease-in-out infinite alternate;
}
.pb-orb-1 { width: 380px; height: 380px; background: #B794F4; top: -80px; left: -60px; animation-delay: 0s; }
.pb-orb-2 { width: 340px; height: 340px; background: #7DA7F5; top: 30%; right: -80px; animation-delay: -5s; animation-duration: 24s; }
.pb-orb-3 { width: 260px; height: 260px; background: #CBD5E1; bottom: -60px; left: 30%; animation-delay: -8s; animation-duration: 18s; opacity: 0.35; }
@keyframes pbOrb {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(50px,-30px) scale(1.12); }
}
#precios .wrap { position: relative; z-index: 1; }

/* Toolbar: region + billing side by side, centered */
.pricing-toolbar {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 28px; flex-wrap: wrap;
}
.region-toggle, .billing-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(20,20,40,0.08);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 20px -10px rgba(20,20,40,0.15);
}
.rt-label { font-size: 12px; color: rgba(20,20,40,0.6); padding: 0 10px; font-weight: 500; }
.rt-btn, .bt-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: none; background: transparent;
  color: rgba(20,20,40,0.7);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.rt-btn:hover, .bt-btn:hover { background: rgba(20,20,40,0.05); color: #0B0B1F; }
.rt-btn.on, .bt-btn.on {
  background: #0B0B1F; color: #FFF;
  box-shadow: 0 4px 12px -4px rgba(20,20,40,0.4);
}
.bt-save {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: #DCFCE7; color: #166534;
  letter-spacing: 0.02em;
}
.bt-btn.on .bt-save { background: #22C55E; color: #FFF; }

[data-theme="dark"] .region-toggle, [data-theme="dark"] .billing-toggle {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .rt-label { color: rgba(245,242,237,0.6); }
[data-theme="dark"] .rt-btn, [data-theme="dark"] .bt-btn { color: rgba(245,242,237,0.7); }
[data-theme="dark"] .rt-btn:hover, [data-theme="dark"] .bt-btn:hover { background: rgba(255,255,255,0.08); color: #FFF; }
[data-theme="dark"] .rt-btn.on, [data-theme="dark"] .bt-btn.on { background: #F5F2ED; color: #0B0B1F; }

/* Grid */
.bubble-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 48px auto 0;
  align-items: stretch;
}

/* Bubble card */
.pbubble {
  position: relative;
  background: var(--bub-soft, #F8FAFC);
  border-radius: 32px;
  padding: 40px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 20px 50px -24px rgba(20,20,40,0.18);
  border: 1.5px solid color-mix(in oklch, var(--bub) 15%, transparent);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2,0.9,0.3,1),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
  animation: pbubbleFloat 8s ease-in-out infinite;
}
.pbubble:nth-child(2) { animation-delay: -2s; }
.pbubble:nth-child(3) { animation-delay: -4s; }
@keyframes pbubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.pbubble:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 70px -20px color-mix(in oklch, var(--bub) 45%, transparent);
  border-color: color-mix(in oklch, var(--bub) 40%, transparent);
  animation-play-state: paused;
}

/* Halo */
.pbubble-halo {
  position: absolute;
  top: -30%; left: 50%;
  width: 130%; height: 70%;
  background: radial-gradient(ellipse at center, color-mix(in oklch, var(--bub) 35%, transparent) 0%, transparent 60%);
  transform: translateX(-50%) scale(0.7);
  opacity: 0.5;
  transition: transform 0.7s ease, opacity 0.5s ease;
  pointer-events: none; z-index: 0;
}
.pbubble:hover .pbubble-halo { transform: translateX(-50%) scale(1); opacity: 1; }

/* Featured: soft gradient bg (not dark) */
.pbubble.is-featured {
  background: linear-gradient(165deg, #FFFFFF 0%, var(--bub-soft) 100%);
  border-color: color-mix(in oklch, var(--bub) 50%, transparent);
  transform: scale(1.03);
  z-index: 2;
  box-shadow: 0 30px 70px -18px color-mix(in oklch, var(--bub) 45%, transparent),
              0 0 0 2px color-mix(in oklch, var(--bub) 35%, transparent);
}
.pbubble.is-featured:hover { transform: scale(1.03) translateY(-10px); }

.pbubble-pulse {
  position: absolute; inset: -2px;
  border-radius: 34px;
  background: conic-gradient(from 0deg, transparent, var(--bub), transparent 40%);
  z-index: -1;
  animation: pbConic 5s linear infinite;
  opacity: 0.6;
}
@keyframes pbConic { to { transform: rotate(360deg); } }

/* Popular badge */
.pbubble-badge {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--bub);
  color: #FFF;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 8px 20px -6px color-mix(in oklch, var(--bub) 55%, transparent);
  z-index: 3;
}
.pb-sparkle { display: inline-block; animation: pbSpark 2.2s ease-in-out infinite; }
@keyframes pbSpark {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%     { transform: scale(1.3) rotate(180deg); opacity: 0.7; }
}

/* Top block */
.pbubble-top { position: relative; z-index: 1; text-align: center; }
.pbubble-tag {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bub) 22%, transparent);
  color: var(--bub-dark);
  margin-bottom: 14px;
}
.pbubble-from {
  font-size: 12px;
  color: rgba(20,20,40,0.5);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  text-transform: lowercase;
}
.pbubble-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  color: #0B0B1F;
}
.pb-currency { font-size: 24px; font-weight: 600; color: currentColor; opacity: 0.7; }
.pb-num {
  font-size: clamp(48px, 5.5vw, 72px);
  letter-spacing: -0.04em;
  color: var(--bub-dark);
  transition: color 0.3s ease;
}
.pb-unit { font-size: 12px; font-weight: 500; opacity: 0.55; margin-left: 4px; color: rgba(20,20,40,0.8); }

.pbubble-sub {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(20,20,40,0.6);
  line-height: 1.45;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

/* Feature list */
.pbubble-feats {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
  position: relative; z-index: 1;
}
.pbubble-feats li {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(20,20,40,0.8);
  padding: 10px 12px 10px 32px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  position: relative;
  transition: background 0.3s ease;
}
.pbubble-feats li::before {
  content: '✓';
  position: absolute;
  left: 12px; top: 10px;
  color: var(--bub-dark);
  font-weight: 800;
  font-size: 12px;
}
.pbubble-feats li strong {
  color: #0B0B1F;
  font-weight: 700;
}
.pbubble:hover .pbubble-feats li { background: rgba(255,255,255,0.95); }

/* CTA */
.pbubble-cta {
  position: relative;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  background: #0B0B1F;
  color: #FFF;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2,0.9,0.3,1),
              box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
  z-index: 1;
}
.pbubble-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bub);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.2,0.9,0.3,1);
  z-index: -1;
  border-radius: inherit;
}
.pbubble-cta:hover::before { transform: translateY(0); }
.pbubble-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px color-mix(in oklch, var(--bub) 55%, transparent);
  color: #FFF;
}
.pb-arrow { display: inline-block; transition: transform 0.35s ease; }
.pbubble-cta:hover .pb-arrow { transform: translateX(4px); }

.pbubble-cta.primary {
  background: var(--bub-dark);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--bub) 80%, transparent);
  animation: pbCtaPulse 2.4s ease-in-out infinite;
}
.pbubble-cta.primary::before { background: #0B0B1F; }
.pbubble-cta.primary:hover {
  animation: none;
  background: #0B0B1F;
  color: #FFF;
  box-shadow: 0 16px 32px -8px color-mix(in oklch, var(--bub) 65%, transparent);
}
@keyframes pbCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--bub) 55%, transparent); }
  50%      { box-shadow: 0 0 0 14px color-mix(in oklch, var(--bub) 0%, transparent); }
}

.pbubble-fine {
  font-size: 11px;
  color: rgba(20,20,40,0.55);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Trust row */
.pbubble-trust {
  margin: 44px auto 0;
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-size: 13px;
  color: rgba(20,20,40,0.7);
  text-align: center;
}
.pbubble-trust .tdot { opacity: 0.35; }
[data-theme="dark"] .pbubble-trust { color: rgba(245,242,237,0.7); }

/* Dark theme */
[data-theme="dark"] .pbubble {
  background: color-mix(in oklch, var(--bub) 10%, #1A1530);
  border-color: color-mix(in oklch, var(--bub) 25%, transparent);
  color: #F5F2ED;
}
[data-theme="dark"] .pbubble.is-featured {
  background: linear-gradient(165deg, #1A1530 0%, color-mix(in oklch, var(--bub) 18%, #1A1530) 100%);
}
[data-theme="dark"] .pbubble-price { color: #F5F2ED; }
[data-theme="dark"] .pb-num { color: color-mix(in oklch, var(--bub) 40%, #F5F2ED); }
[data-theme="dark"] .pb-unit { color: rgba(245,242,237,0.7); }
[data-theme="dark"] .pbubble-sub { color: rgba(245,242,237,0.65); }
[data-theme="dark"] .pbubble-from { color: rgba(245,242,237,0.5); }
[data-theme="dark"] .pbubble-feats li {
  background: rgba(255,255,255,0.06);
  color: rgba(245,242,237,0.85);
}
[data-theme="dark"] .pbubble-feats li strong { color: #FFF; }
[data-theme="dark"] .pbubble:hover .pbubble-feats li { background: rgba(255,255,255,0.09); }
[data-theme="dark"] .pbubble-cta { background: #F5F2ED; color: #0B0B1F; }
[data-theme="dark"] .pbubble-cta:hover { color: #FFF; }
[data-theme="dark"] .pbubble-cta.primary { color: #FFF; }
[data-theme="dark"] .pbubble-cta.primary:hover { color: #FFF; }
[data-theme="dark"] .pbubble-fine { color: rgba(245,242,237,0.5); }

@media (max-width: 960px) {
  .bubble-pricing { grid-template-columns: 1fr; gap: 28px; max-width: 440px; }
  .pbubble.is-featured { transform: none; }
  .pbubble.is-featured:hover { transform: translateY(-10px); }
  .pbubble { padding: 36px 24px 26px; }
  .pbubble-badge { top: -12px; }
  .pb-orb { opacity: 0.25; }
  .pricing-toolbar { flex-direction: column; gap: 10px; }
}


/* ============ SECTION SPACING (tightened) ============ */
section { padding: 56px 0; }
@media (max-width: 768px) { section { padding: 44px 0; } }

/* ===== DASHBOARD — race-mode ===== */
.dashboard-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FAFBFE 0%, #F3F5FA 100%);
  padding: 80px 0 88px;
}
[data-theme="dark"] .dashboard-section {
  background: linear-gradient(180deg, #0E0E1F 0%, #14142A 100%);
}
.dash-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.db-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.3;
}
.db-1 { width: 420px; height: 420px; background: #7DA7F5; top: -100px; right: -80px; animation: pbOrb 24s ease-in-out infinite alternate; }
.db-2 { width: 360px; height: 360px; background: #B794F4; bottom: -100px; left: -80px; animation: pbOrb 20s ease-in-out infinite alternate-reverse; }
.db-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(20,20,40,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20,20,40,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  opacity: 0.6;
}
[data-theme="dark"] .db-grid {
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}

.dashboard-section .wrap { position: relative; z-index: 1; }
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.dash-left { display: flex; flex-direction: column; gap: 18px; }

/* Big KPI hero */
.kpi-hero {
  margin-top: 8px;
  padding: 22px 24px;
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid rgba(20,20,40,0.06);
  box-shadow: 0 14px 36px -18px rgba(20,20,40,0.15);
  position: relative;
  overflow: hidden;
}
.kpi-hero::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 180px; height: 180px;
  background: radial-gradient(circle, color-mix(in oklch, var(--primary) 30%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.kh-label {
  font-size: 12px; font-weight: 600;
  color: rgba(20,20,40,0.55);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.kh-value {
  display: flex; align-items: baseline;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  margin-top: 6px;
}
.kh-x {
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 60%, #0B0B1F) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kh-mult {
  font-size: clamp(32px, 3vw, 44px);
  color: var(--primary);
  margin-left: 4px;
}
.kh-bar {
  height: 6px;
  background: rgba(20,20,40,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
}
.kh-bar span {
  display: block;
  width: 92%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), color-mix(in oklch, var(--primary) 60%, #FFB547));
  border-radius: 999px;
  transform-origin: left center;
  animation: khBarGrow 2.2s cubic-bezier(0.2,0.8,0.2,1) forwards;
  transform: scaleX(0);
}
@keyframes khBarGrow { to { transform: scaleX(1); } }
.kh-sub {
  font-size: 12px;
  color: rgba(20,20,40,0.5);
  margin-top: 8px;
}
[data-theme="dark"] .kpi-hero {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .kh-label, [data-theme="dark"] .kh-sub { color: rgba(245,242,237,0.55); }
[data-theme="dark"] .kh-bar { background: rgba(255,255,255,0.08); }

/* KPI cards row */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.dash-kpi {
  background: #FFFFFF;
  border: 1px solid rgba(20,20,40,0.06);
  border-radius: 16px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dash-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(20,20,40,0.15);
  border-color: color-mix(in oklch, var(--primary) 35%, transparent);
}
.dk-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.dk-lbl {
  font-size: 11.5px;
  color: rgba(20,20,40,0.6);
  line-height: 1.25;
}
.dk-spark {
  position: absolute;
  right: 10px; top: 10px;
  width: 50px; height: 14px;
  color: color-mix(in oklch, var(--primary) 70%, transparent);
  opacity: 0.75;
}
.dk-spark svg { width: 100%; height: 100%; }
[data-theme="dark"] .dash-kpi {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .dk-lbl { color: rgba(245,242,237,0.6); }

/* RIGHT: tablet frame */
.dash-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}
.tablet-frame {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 4 / 2.95;
  background: linear-gradient(160deg, #2a2a3a 0%, #1a1a28 100%);
  border-radius: 28px;
  padding: 14px;
  box-shadow:
    0 50px 100px -30px rgba(20,20,40,0.5),
    0 0 0 2px rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(0,0,0,0.5);
  animation: tabletFloat 8s ease-in-out infinite;
}
@keyframes tabletFloat {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-10px) rotate(0.4deg); }
}
.tablet-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #FFF;
}
.tablet-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tablet-img.active { opacity: 1; }
.tablet-home {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 4px;
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
}

/* tablet dots toggle */
.tablet-dots {
  position: absolute;
  bottom: -44px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.td-dot {
  width: 30px; height: 6px;
  border-radius: 999px;
  background: rgba(20,20,40,0.2);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.td-dot.on { background: var(--primary); width: 40px; }
.td-dot:hover { background: rgba(20,20,40,0.35); }
.td-dot.on:hover { background: var(--primary); }
[data-theme="dark"] .td-dot { background: rgba(255,255,255,0.2); }

/* floating stats */
.float-stat {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid rgba(20,20,40,0.06);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 28px -10px rgba(20,20,40,0.2);
  z-index: 2;
  animation: fsFloat 6s ease-in-out infinite;
}
.fs1 { top: 8%; left: -20px; animation-delay: 0s; }
.fs2 { bottom: 18%; right: -20px; animation-delay: -2s; }
.fs3 { top: 50%; right: 10%; animation-delay: -4s; }
@keyframes fsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.fs-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--primary) 16%, transparent);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}
.fs-icon.fs-green { background: #DCFCE7; color: #166534; }
.fs-icon.fs-purple { background: #F3E8FF; color: #7C3AED; }
.fs-v { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #0B0B1F; line-height: 1; }
.fs-l { font-size: 11px; color: rgba(20,20,40,0.55); margin-top: 4px; line-height: 1.2; white-space: nowrap; }
[data-theme="dark"] .float-stat {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
}
[data-theme="dark"] .fs-v { color: #F5F2ED; }
[data-theme="dark"] .fs-l { color: rgba(245,242,237,0.55); }

@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: 1fr; gap: 36px; }
  .dash-right { min-height: 360px; }
  .tablet-frame { max-width: 440px; }
  .fs1 { left: 0; top: -12px; }
  .fs2 { right: 0; }
  .fs3 { display: none; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
}

/* ===== FEATURES — Bento v3 ===== */
#caracteristicas { padding: 72px 0 80px; }

.features-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 18px;
  margin-top: 48px;
  max-width: 1240px;
  margin-inline: auto;
}
.fb {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(20,20,40,0.06);
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.fb:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -24px rgba(20,20,40,0.2);
  border-color: color-mix(in oklch, var(--primary) 30%, transparent);
}
.fb-text { position: relative; z-index: 2; }
.fb-kicker {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fb h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0B0B1F;
  line-height: 1.15;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.fb p {
  font-size: 14px;
  color: rgba(20,20,40,0.7);
  line-height: 1.45;
  margin: 0;
  max-width: 52ch;
}

.fb-visual {
  position: relative;
  flex: 1;
  min-height: 140px;
  margin-top: auto;
}

/* Grid placements */
.fb-wallet { grid-column: span 6; grid-row: span 2; min-height: 320px; background: linear-gradient(145deg, #FEFCF7 0%, #FFF1DB 100%); }
.fb-push   { grid-column: span 3; grid-row: span 2; background: linear-gradient(145deg, #F4F7FE 0%, #E8EFFD 100%); }
.fb-fast   { grid-column: span 3; background: linear-gradient(145deg, #F9F5FE 0%, #EEE1FA 100%); }
.fb-branch { grid-column: span 3; background: linear-gradient(145deg, #F0FDF4 0%, #DCFCE7 100%); }
.fb-gift   { grid-column: span 2; grid-row: span 2; background: linear-gradient(145deg, #FEF3F2 0%, #FFE2DB 100%); min-height: 320px; }
.fb-seg    { grid-column: span 2; background: linear-gradient(145deg, #FFF9E6 0%, #FFF0B8 100%); }
.fb-api    { grid-column: span 2; background: linear-gradient(145deg, #F5F5FA 0%, #E8E8F0 100%); }

[data-theme="dark"] .fb {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .fb h3 { color: #F5F2ED; }
[data-theme="dark"] .fb p { color: rgba(245,242,237,0.7); }
[data-theme="dark"] .fb-wallet { background: linear-gradient(145deg, rgba(255,181,71,0.08) 0%, rgba(255,181,71,0.14) 100%); }
[data-theme="dark"] .fb-push   { background: linear-gradient(145deg, rgba(125,167,245,0.08) 0%, rgba(125,167,245,0.14) 100%); }
[data-theme="dark"] .fb-fast   { background: linear-gradient(145deg, rgba(183,148,244,0.08) 0%, rgba(183,148,244,0.14) 100%); }
[data-theme="dark"] .fb-branch { background: linear-gradient(145deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.12) 100%); }
[data-theme="dark"] .fb-gift   { background: linear-gradient(145deg, rgba(255,107,53,0.08) 0%, rgba(255,107,53,0.14) 100%); }
[data-theme="dark"] .fb-seg    { background: linear-gradient(145deg, rgba(250,204,21,0.06) 0%, rgba(250,204,21,0.12) 100%); }
[data-theme="dark"] .fb-api    { background: linear-gradient(145deg, rgba(148,163,184,0.08) 0%, rgba(148,163,184,0.14) 100%); }

/* Wallet card stack */
.fb-wallet .fb-visual { display: flex; align-items: flex-end; justify-content: flex-end; }
.fbw-card {
  position: absolute;
  width: 62%;
  max-width: 320px;
  border-radius: 16px;
  box-shadow: 0 20px 40px -16px rgba(20,20,40,0.3);
  transition: transform 0.5s cubic-bezier(0.2,0.9,0.3,1);
}
.fbw-back  { bottom: 40px; right: 30px;  transform: rotate(-10deg); z-index: 1; }
.fbw-mid   { bottom: 24px; right: 90px; transform: rotate(4deg);   z-index: 2; }
.fbw-front { bottom: 8px;  right: 60px; transform: rotate(-2deg); z-index: 3; }
.fb-wallet:hover .fbw-back  { transform: rotate(-14deg) translateY(-10px); }
.fb-wallet:hover .fbw-mid   { transform: rotate(8deg) translateY(-18px); }
.fb-wallet:hover .fbw-front { transform: rotate(-4deg) translateY(-26px); }
.fbw-wallet-hint {
  position: absolute; bottom: 16px; left: 0;
  display: flex; gap: 8px;
  z-index: 4;
}
.fbw-tag {
  padding: 6px 12px;
  background: rgba(11,11,31,0.9);
  color: #FFF;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

/* Push card stack */
.fb-push .fb-visual { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.push-stack { position: relative; flex: 1; height: 140px; }
.push-card {
  position: absolute;
  width: 90%;
  background: #FFFFFF;
  border: 1px solid rgba(20,20,40,0.08);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 24px -12px rgba(20,20,40,0.2);
}
.push-1 { top: 0; left: 0; z-index: 2; animation: pushPop 3.5s ease-in-out infinite; }
.push-2 { top: 20px; left: 18px; opacity: 0.7; z-index: 1; transform: scale(0.96); }
@keyframes pushPop {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-3px); }
}
.pp-app {
  font-size: 10.5px;
  color: rgba(20,20,40,0.55);
  font-weight: 500;
  margin-bottom: 4px;
}
.pp-title {
  font-size: 13px;
  font-weight: 700;
  color: #0B0B1F;
  margin-bottom: 2px;
}
.pp-body {
  font-size: 12px;
  color: rgba(20,20,40,0.7);
  line-height: 1.35;
}
.fb-stat {
  text-align: center;
  flex: 0 0 auto;
}
.fs-big {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}
.fs-note {
  font-size: 11px;
  color: rgba(20,20,40,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Fast (timer) */
.fb-timer { display: flex; align-items: center; justify-content: center; position: relative; }
.ft-ring { width: 120px; height: 120px; animation: ftSpin 18s linear infinite; }
@keyframes ftSpin { to { transform: rotate(360deg); } }
.ft-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ft-big {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #0B0B1F;
  line-height: 1;
}
.ft-unit {
  font-size: 11px;
  color: rgba(20,20,40,0.6);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 4px;
}
[data-theme="dark"] .ft-big { color: #F5F2ED; }
[data-theme="dark"] .ft-unit, [data-theme="dark"] .fs-note { color: rgba(245,242,237,0.6); }
[data-theme="dark"] .push-card { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .pp-title { color: #F5F2ED; }
[data-theme="dark"] .pp-body { color: rgba(245,242,237,0.75); }
[data-theme="dark"] .pp-app { color: rgba(245,242,237,0.55); }

/* Map / branch pins */
.fb-map { display: flex; align-items: center; justify-content: center; }
.fbm-grid {
  position: relative;
  width: 100%; height: 160px;
  background-image: linear-gradient(rgba(20,20,40,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20,20,40,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: 14px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 100%);
}
.fbm-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.br-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.2), 0 4px 8px rgba(255,107,53,0.35);
  z-index: 2;
}
.br-ping {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: brPing 2.4s ease-out infinite;
}
@keyframes brPing {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Gift card stack */
.fb-gift .fb-visual { display: flex; align-items: flex-end; justify-content: center; }
.fbg-card {
  position: absolute;
  width: 75%; max-width: 200px;
  border-radius: 14px;
  box-shadow: 0 16px 32px -12px rgba(20,20,40,0.3);
  transition: transform 0.5s cubic-bezier(0.2,0.9,0.3,1);
}
.fbg-1 { bottom: 20px; left: 50%; transform: translateX(-50%) rotate(-6deg); z-index: 2; }
.fbg-2 { bottom: 40px; left: 50%; transform: translateX(-60%) rotate(8deg); z-index: 1; opacity: 0.85; }
.fb-gift:hover .fbg-1 { transform: translateX(-50%) rotate(-8deg) translateY(-8px); }
.fb-gift:hover .fbg-2 { transform: translateX(-60%) rotate(12deg) translateY(-4px); }
.fbg-bow {
  position: absolute; top: 20px; right: 20px;
  font-size: 36px;
  filter: drop-shadow(0 4px 12px rgba(255,107,53,0.4));
  animation: bowBounce 3s ease-in-out infinite;
}
@keyframes bowBounce {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50%     { transform: translateY(-6px) rotate(8deg); }
}

/* Segments */
.fb-segments { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; justify-content: center; padding-top: 8px; }
.seg-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(20,20,40,0.08);
  font-size: 12.5px;
  font-weight: 600;
  color: #0B0B1F;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 14px -8px rgba(20,20,40,0.15);
  animation: segFloat 4s ease-in-out infinite;
}
.seg-chip span {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--primary);
  font-size: 12px;
}
.seg-chip.s2 { animation-delay: -1s; }
.seg-chip.s3 { animation-delay: -2s; }
.seg-chip.s4 { animation-delay: -3s; }
@keyframes segFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
[data-theme="dark"] .seg-chip { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: #F5F2ED; }

/* API / logos */
.fb-logos { display: flex; flex-direction: column; gap: 8px; justify-content: center; padding-top: 12px; }
.fl-row { display: flex; gap: 8px; }
.fl-logo {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(20,20,40,0.06);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(20,20,40,0.75);
  text-align: center;
  transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fl-logo:hover {
  transform: translateY(-2px);
  color: var(--primary);
  border-color: color-mix(in oklch, var(--primary) 35%, transparent);
}
[data-theme="dark"] .fl-logo { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); color: rgba(245,242,237,0.7); }

/* Responsive bento */
@media (max-width: 1080px) {
  .features-bento { grid-template-columns: repeat(4, 1fr); }
  .fb-wallet { grid-column: span 4; }
  .fb-push { grid-column: span 4; grid-row: span 1; }
  .fb-fast, .fb-branch { grid-column: span 2; }
  .fb-gift { grid-column: span 4; grid-row: span 1; min-height: 260px; }
  .fb-seg, .fb-api { grid-column: span 2; }
}
@media (max-width: 640px) {
  .features-bento { grid-template-columns: 1fr; }
  .fb, .fb-wallet, .fb-push, .fb-fast, .fb-branch, .fb-gift, .fb-seg, .fb-api {
    grid-column: span 1;
    grid-row: auto;
    min-height: 240px;
  }
}

/* ================================================ */
/* == Wallet feature: twin icon circles (no imgs) == */
/* ================================================ */
.fb-visual-wallet-icons {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 8px;
  min-height: 180px;
}
.fbw-icon-circle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0E0E1A;
  box-shadow:
    0 24px 50px -14px rgba(18, 18, 40, 0.28),
    0 0 0 1px rgba(18, 18, 40, 0.04) inset;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.fbw-icon-apple  { transform: rotate(-6deg) translateY(0); }
.fbw-icon-google { transform: rotate(6deg)  translateY(0); }
.fb-wallet:hover .fbw-icon-apple  { transform: rotate(-10deg) translateY(-10px); }
.fb-wallet:hover .fbw-icon-google { transform: rotate(10deg)  translateY(-10px); }
.fbw-icon-glyph {
  width: 56px; height: 56px;
  display: inline-block;
}
.fbw-icon-apple  .fbw-icon-glyph { color: #0E0E1A; }
.fbw-icon-google .fbw-icon-glyph { color: #2020C4; }
.fbw-icon-label {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(18, 18, 40, 0.6);
}
[data-theme="dark"] .fbw-icon-circle { background: rgba(255,255,255,0.08); color: #FFF; }
[data-theme="dark"] .fbw-icon-apple  .fbw-icon-glyph { color: #FFF; }
[data-theme="dark"] .fbw-icon-google .fbw-icon-glyph { color: #9CB4FF; }
[data-theme="dark"] .fbw-icon-label  { color: rgba(255,255,255,0.65); }

.fbw-spark {
  position: absolute;
  color: #FFB547;
  font-size: 18px;
  animation: fbwSpark 3.2s ease-in-out infinite;
  pointer-events: none;
}
.fbw-spark-1 { top: 14%;  left: 18%;  animation-delay: 0s; }
.fbw-spark-2 { top: 22%;  right: 14%; animation-delay: 1s; color: #FF6B35; }
.fbw-spark-3 { bottom: 14%; left: 46%; animation-delay: 2s; color: #2BC48F; }
@keyframes fbwSpark {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 0.9; }
  50%      { transform: scale(1.4) rotate(180deg); opacity: 0.4; }
}

/* =================================================== */
/* == Gift feature: giant bow + chips (no card imgs) == */
/* =================================================== */
.fb-visual-gift-icons {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px;
  min-height: 180px;
}
.fbg-giant-bow {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 20px 28px rgba(255, 77, 166, 0.35));
  transform: rotate(-6deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.fb-gift:hover .fbg-giant-bow { transform: rotate(6deg) scale(1.08); }
.fbg-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.fbg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(18, 18, 40, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: #0E0E1A;
  box-shadow: 0 6px 14px -6px rgba(18, 18, 40, 0.18);
}
[data-theme="dark"] .fbg-chip {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: #FFF;
}
.fbg-spark {
  position: absolute;
  font-size: 14px;
  color: #FF4DA6;
  animation: fbwSpark 3s ease-in-out infinite;
}
.fbg-s1 { top: 8%;  left: 12%;  animation-delay: 0.3s; }
.fbg-s2 { top: 14%; right: 10%; animation-delay: 1.2s; color: #2BC48F; }
.fbg-s3 { bottom: 12%; right: 22%; animation-delay: 2.1s; color: #FFB547; }

/* ==================================================== */
/* == Pricing: "Más popular" badge — sobresale arriba == */
/* ==================================================== */
.pbubble.is-featured { overflow: visible; }
.pbubble .pbubble-badge {
  top: -22px;
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 0.16em;
  background: linear-gradient(135deg, var(--bub-dark, #3B6FD9) 0%, var(--bub, #7DA7F5) 100%);
  color: #FFFFFF;
  white-space: nowrap;
  box-shadow:
    0 12px 26px -8px color-mix(in oklch, var(--bub-dark, #3B6FD9) 60%, transparent),
    0 0 0 3px #FFFFFF;
  z-index: 10;
}
[data-theme="dark"] .pbubble .pbubble-badge {
  box-shadow:
    0 12px 26px -8px color-mix(in oklch, var(--bub-dark, #3B6FD9) 60%, transparent),
    0 0 0 3px #0B0B15;
}
@media (max-width: 760px) {
  .pbubble .pbubble-badge { top: -18px; padding: 7px 14px; font-size: 11px; }
}

/* =========================================================== */
/* == BRIEF QUESTIONNAIRE — inline replacement of Tally     == */
/* =========================================================== */

/* Modal needs to be wider + scrollable for the brief */
.modal.modal-brief {
  max-width: 580px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.modal.modal-brief h3 { padding-right: 44px; font-size: 20px; }
.modal.modal-brief p.sub { margin-bottom: 16px; }
.modal.modal-brief #modalBody {
  overflow-y: auto;
  flex: 1;
  margin-right: -8px;
  padding-right: 8px;
}
.modal.modal-brief #modalBody::-webkit-scrollbar { width: 6px; }
.modal.modal-brief #modalBody::-webkit-scrollbar-thumb { background: rgba(14,14,26,.18); border-radius: 3px; }

/* Brief progress header */
.brief-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brief-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.brief-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2020C4, #4F8DFF);
  border-radius: 4px;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.brief-step-counter { color: var(--primary); font-weight: 700; }

/* Time badge — prominent on step 1 */
.brief-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #EDF1FF, #DCE4FF);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid rgba(32, 32, 196, .15);
  animation: pulseBadge 2.4s ease-in-out infinite;
}
.brief-time-badge strong { font-weight: 800; }
.brief-time-badge-icon { font-size: 15px; }
@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(32, 32, 196, .25); }
  50%      { box-shadow: 0 0 0 6px rgba(32, 32, 196, 0); }
}

/* Submission progress overlay */
.brief-submitting {
  text-align: center;
  padding: 24px 16px;
}
.brief-submitting-spinner {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid var(--bg-soft);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.brief-submitting h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--ink);
}
.brief-submitting-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  margin: 16px auto 0;
}
.brief-submitting-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: left;
  transition: all .25s ease;
}
.brief-submitting-stage.active {
  background: linear-gradient(135deg, #EDF1FF, #FFFFFF);
  color: var(--primary);
  font-weight: 600;
}
.brief-submitting-stage.done {
  background: #E6F8EE;
  color: #0D8E55;
}
.brief-submitting-stage-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--card);
  display: grid; place-items: center;
  font-size: 11px;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
}
.brief-submitting-stage.active .brief-submitting-stage-icon {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.brief-submitting-stage.done .brief-submitting-stage-icon {
  background: #0D8E55;
  color: white;
  border-color: #0D8E55;
}

/* Step content slide animation */
.brief-step {
  animation: briefSlideIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes briefSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Step header with kicker + title */
.brief-step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
.brief-step-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.brief-step-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.2;
}
.brief-step-desc {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 22px;
  line-height: 1.5;
}
.brief-step-desc .accent { color: var(--primary); font-weight: 600; }

/* Visual pick cards (used in tipo + extras) */
.brief-pick-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}
.brief-pick-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.brief-pick-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) {
  .brief-pick-grid.cols-2 { grid-template-columns: 1fr; }
  .brief-pick-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Compact pick — used inside step 2 for redemption rules + cupon types */
.brief-pick.brief-pick-compact {
  padding: 14px 16px;
  gap: 6px;
  border-width: 1.5px;
}
.brief-pick.brief-pick-compact h4 { font-size: 14px; }
.brief-pick.brief-pick-compact p { font-size: 12.5px; line-height: 1.35; }
.brief-pick-mini-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.brief-pick.is-selected .brief-pick-mini-icon {
  background: rgba(32, 32, 196, .12);
  color: var(--primary);
}
.brief-pick.brief-pick-compact.is-selected::after {
  width: 20px; height: 20px;
  font-size: 12px;
  top: 10px;
  right: 10px;
}

/* Step 1 — compact "tipo" cards (4 fit in viewport, with mini previews) */
.brief-tipo-kicker { margin-bottom: 4px; }
.brief-tipo-title { font-size: 18px; margin-bottom: 14px; }
.brief-tipo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.brief-pick.brief-pick-tipo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px 11px;
  border-width: 1.5px;
  border-radius: 12px;
  text-align: left;
}
.brief-pick.brief-pick-tipo:hover { transform: translateY(-1px); }
.brief-pick-tipo-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brief-pick-tipo-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brief-pick.brief-pick-tipo h4 {
  font-size: 13px;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.brief-pick.brief-pick-tipo p {
  font-size: 11.5px;
  line-height: 1.3;
  margin: 0;
  color: var(--ink-soft);
  min-height: 30px;
}
.brief-pick.brief-pick-tipo.is-selected::after {
  width: 18px; height: 18px;
  font-size: 10px;
  top: 8px;
  right: 8px;
}

/* Mini preview chip per card */
.brief-pick-tipo-preview {
  margin-top: auto;
  padding: 7px 9px 8px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--bub-color, #2020C4), var(--bub-color-2, #4F8DFF));
  color: white;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.brief-pick-tipo-preview-stamps {
  display: flex;
  gap: 2px;
}
.brief-pick-tipo-preview-stamps span {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  font-size: 8px;
  line-height: 1;
}
.brief-pick-tipo-preview-stamps span.on {
  background: rgba(255,255,255,.95);
  color: var(--bub-color, #2020C4);
}
.brief-pick-tipo-preview-big {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brief-pick-tipo-preview-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: .9;
}

/* Profile pre-step — friendly chip questions */
.brief-profile-q {
  margin-bottom: 18px;
}
.brief-profile-q:last-of-type { margin-bottom: 22px; }
.brief-profile-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.brief-profile-label .req { color: #E53935; font-size: 11px; margin-left: 2px; }
.brief-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brief-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(20, 20, 40, 0.1);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
  line-height: 1.1;
}
.brief-chip:hover {
  border-color: rgba(32, 32, 196, .35);
  transform: translateY(-1px);
}
.brief-chip.is-on {
  background: linear-gradient(135deg, #2020C4, #4F8DFF);
  border-color: var(--primary);
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 14px -8px rgba(32, 32, 196, .55);
}
.brief-chip-icon { font-size: 14px; line-height: 1; }
.brief-chip.is-on .brief-chip-icon { filter: brightness(1.15); }

/* Inline section label inside step body */
.brief-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 6px 0 10px;
}
.brief-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 2px solid rgba(20, 20, 40, 0.08);
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.brief-pick:hover {
  border-color: rgba(32, 32, 196, .35);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -20px rgba(15, 20, 45, 0.25);
}
.brief-pick.is-selected {
  border-color: var(--primary);
  background: linear-gradient(180deg, #F4F5FF, #FFFFFF 60%);
  box-shadow: 0 22px 40px -22px rgba(32, 32, 196, .35);
}
.brief-pick.is-selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.brief-pick-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.brief-pick-icon-sellos { background: linear-gradient(135deg, #EDF1FF, #DCE4FF); color: #2020C4; }
.brief-pick-icon-puntos { background: linear-gradient(135deg, #F2EAFF, #E2D2FF); color: #6B2BC4; }
.brief-pick-icon-on { background: linear-gradient(135deg, #E6F8EE, #D1F0DD); color: #0D8E55; }
.brief-pick-icon-off { background: var(--bg-soft); color: var(--ink-faint); }
.brief-pick h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.brief-pick p {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.brief-pick-mini-card {
  margin-top: 8px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bub-color, #2020C4), var(--bub-color-2, #4F8DFF));
  color: white;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brief-pick-mini-stamps {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.brief-pick-mini-stamps span {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  font-size: 12px;
}
.brief-pick-mini-stamps span.on { background: rgba(255,255,255,.95); color: var(--bub-color, #2020C4); }
.brief-pick-mini-pts {
  font-size: 22px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Field with icon */
.brief-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.brief-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
}
.brief-field-label .req { color: #E53935; font-size: 11px; }
.brief-field-label .ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg-soft);
  display: grid; place-items: center;
  font-size: 12px;
}
.brief-field-hint {
  font-size: 12px;
  color: var(--ink-soft);
  margin: -2px 0 4px;
  line-height: 1.4;
}
.brief-field input,
.brief-field textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  font-family: inherit;
  font-size: 14.5px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-sizing: border-box;
}
.brief-field input:focus,
.brief-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(32, 32, 196, .12);
}
.brief-field textarea { resize: vertical; min-height: 76px; }
.brief-field-with-prefix {
  position: relative;
}
.brief-field-with-prefix .prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 14.5px;
  pointer-events: none;
}
.brief-field-with-prefix input { padding-left: 30px; }
.brief-field-suffix {
  position: relative;
}
.brief-field-suffix .suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
.brief-field-suffix input { padding-right: 44px; }

/* Char counter for textareas */
.brief-charcount {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.brief-charcount.warn { color: #E53935; }

/* Two-column field row */
.brief-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .brief-row { grid-template-columns: 1fr; } }

/* Toggle card with conditional reveal */
.brief-toggle-card {
  border: 2px solid rgba(20, 20, 40, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: white;
  transition: all .25s ease;
}
.brief-toggle-card.is-on {
  border-color: var(--primary);
  background: linear-gradient(180deg, #F4F5FF, #FFFFFF 70%);
}
.brief-toggle-head {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.brief-toggle-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.brief-toggle-card.is-on .brief-toggle-icon {
  background: linear-gradient(135deg, #FFE2F0, #FFD7B6);
}
.brief-toggle-text { flex: 1; }
.brief-toggle-text strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.brief-toggle-text span {
  font-size: 12.5px;
  color: var(--ink-soft);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}
.brief-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 24px;
  background: var(--line);
  cursor: pointer;
  transition: background .25s ease;
}
.brief-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.brief-toggle-card.is-on .brief-switch { background: var(--primary); }
.brief-toggle-card.is-on .brief-switch::after { transform: translateX(18px); }
.brief-toggle-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(20, 20, 40, 0.12);
  display: none;
  animation: briefFadeIn .25s ease;
}
.brief-toggle-card.is-on .brief-toggle-body { display: block; }
@keyframes briefFadeIn { from{opacity:0;} to{opacity:1;} }

/* Quantity stepper */
.brief-stepper {
  display: inline-flex;
  align-items: stretch;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: white;
}
.brief-stepper button {
  width: 40px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  background: white;
  cursor: pointer;
  transition: background .15s;
}
.brief-stepper button:hover { background: var(--bg-soft); }
.brief-stepper input {
  width: 56px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  border: none;
  background: white;
  color: var(--ink);
  -moz-appearance: textfield;
}
.brief-stepper input::-webkit-outer-spin-button,
.brief-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.brief-stepper input:focus { outline: none; }
.brief-stepper-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 10px;
  align-self: center;
}

/* Message-with-preview component */
.brief-msg-card {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(20, 20, 40, 0.05);
}
.brief-msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.brief-msg-emoji {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 17px;
  background: white;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.brief-msg-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  flex: 1;
}
.brief-msg-title small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 1px;
}
.brief-msg-card textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 13.5px;
  background: white;
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.brief-msg-card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(32, 32, 196, .12);
}
.brief-msg-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.brief-msg-suggest button {
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(20, 20, 40, 0.1);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}
.brief-msg-suggest button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* File upload zones */
.brief-drop {
  border: 2px dashed rgba(20, 20, 40, 0.18);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  background: linear-gradient(180deg, #FAFBFF, #FFFFFF);
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
}
.brief-drop:hover,
.brief-drop.is-drag {
  border-color: var(--primary);
  background: linear-gradient(180deg, #F0F2FF, #FFFFFF);
}
.brief-drop input[type="file"] { display: none; }
.brief-drop-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #EDF1FF, #DCE4FF);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-size: 22px;
}
.brief-drop strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.brief-drop span {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.brief-file-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brief-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: white;
  border: 1px solid rgba(20, 20, 40, 0.08);
  border-radius: 10px;
  font-size: 13px;
  animation: briefFadeIn .25s ease;
}
.brief-file-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.brief-file-thumb.is-icon {
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--ink-soft);
}
.brief-file-meta { flex: 1; min-width: 0; }
.brief-file-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-file-meta span {
  font-size: 11.5px;
  color: var(--ink-faint);
}
.brief-file-remove {
  width: 26px; height: 26px;
  border-radius: 8px;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 16px;
  background: transparent;
  transition: all .15s;
}
.brief-file-remove:hover { background: #FDECEA; color: #E53935; }

/* Color picker block */
.brief-color {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-soft);
  border-radius: 14px;
}
.brief-color-swatch {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--swatch, #2020C4);
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px var(--swatch, #2020C4), inset 0 0 0 3px rgba(255,255,255,.5);
  transition: background .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.brief-color-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.brief-color-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brief-color-input label {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}
.brief-color-input input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 14px;
  text-transform: uppercase;
  background: white;
}
.brief-color-input input:focus {
  outline: none;
  border-color: var(--primary);
}
.brief-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.brief-color-presets button {
  width: 28px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s;
  border: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.2);
}
.brief-color-presets button:hover { transform: scale(1.12); }

/* Brief footer with back/next */
.brief-footer {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--card) 22%);
}
.brief-footer .btn { flex: 1; justify-content: center; }
.brief-footer .btn.btn-back { flex: 0 0 auto; }
.brief-footer .btn.btn-back svg { margin-right: 4px; }

/* Final success step */
.brief-success {
  text-align: center;
  padding: 8px 0 4px;
}
.brief-success-burst {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2020C4, #4F8DFF);
  color: white;
  display: grid;
  place-items: center;
  font-size: 40px;
  margin: 0 auto 18px;
  box-shadow: 0 24px 48px -12px rgba(32, 32, 196, .45);
  animation: popIn .55s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.brief-success-burst::before,
.brief-success-burst::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(32, 32, 196, .25);
  animation: burstRing 1.6s ease-out infinite;
}
.brief-success-burst::after { animation-delay: .8s; }
@keyframes burstRing {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.4); opacity: 0; }
}
.brief-success h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.brief-success p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 22px;
}
.brief-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 6px;
}
.brief-share-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFFFFF, #F4F5FF);
  border: 1.5px solid rgba(32, 32, 196, .14);
  text-align: left;
  transition: all .25s ease;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}
.brief-share-card * { text-decoration: none; }
.brief-share-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 18px 32px -22px rgba(32, 32, 196, .35);
}
.brief-share-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
  background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
  flex-shrink: 0;
}
.brief-share-icon.referral { background: linear-gradient(135deg, #FDE68A, #FCD34D); }
.brief-share-text { flex: 1; }
.brief-share-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
}
.brief-share-text span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.brief-share-arrow {
  font-size: 18px;
  color: var(--ink-faint);
}
.brief-success-mock {
  margin: 24px auto 0;
  max-width: 220px;
}
.brief-success-mock img { width: 100%; border-radius: 24px; }

/* Inline error */
.brief-error {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #FDECEA;
  color: #B71C1C;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: briefFadeIn .2s ease;
}
.brief-error::before { content: "⚠"; font-size: 14px; }

/* Resume banner (saved progress) */
.brief-resume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FDE68A;
  border-radius: 10px;
  font-size: 12.5px;
  color: #92580B;
  margin-bottom: 14px;
}
.brief-resume button {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #B45309;
  text-decoration: underline;
  background: none;
  cursor: pointer;
}


/* ============================================================
   CAMPAIGN /c OVERRIDES
   Only applies to the campaign landing at theboxo.com/c
   ============================================================ */

/* ----- Hero / Final CTA: button + caption stack (column layout) ----- */
.hero-ctas.cta-with-caption {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.hero-ctas.cta-with-caption .btn { align-self: flex-start; }
.hero-ctas.cta-with-caption .hero-cta-caption {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  text-align: left;
  padding-left: 6px;
}

.final-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.final-cta-stack .hero-cta-caption {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  text-align: center;
}

/* ----- Footer campaign disclaimer ----- */
.footer-campaign .footer-disclaimer {
  padding: 28px 0 20px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.footer-campaign .footer-disclaimer p {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.footer-campaign .footer-disclaimer p:last-child { margin-bottom: 0; }
.footer-campaign .footer-disclaimer a {
  color: var(--primary);
  text-decoration: underline;
}
.footer-campaign .footer-bottom {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 12px;
}

/* ----- Mobile: hide header extras (Jorge request) ----- */
@media (max-width: 768px) {
  #themeToggle,
  .nav-cta {
    display: none !important;
  }
}

/* ----- Mobile-only flow carousel (static HTML, CSS-only visibility) ----- */
.mfc { display: none; }
body .flow-stage-v2 { display: block; }

@media (max-width: 768px) {
  /* Hide the original 3-panel desktop stack on mobile */
  body .flow-stage-v2 { display: none !important; }
  body .flow-dark-plate {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Show the static mobile carousel */
  .mfc {
    display: block;
    margin: 12px -16px 0;
  }
  .mfc-hint {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(14, 14, 26, 0.55);
    margin: 0 16px 10px;
  }
  .mfc-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 16px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mfc-track::-webkit-scrollbar { display: none; }
  .mfc-step {
    flex: 0 0 80%;
    min-width: 80%;
    max-width: 80%;
    scroll-snap-align: start;
    background: #0E0E1A;
    color: #FFF;
    border-radius: 18px;
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 18px 40px rgba(14, 14, 26, 0.12);
    min-height: 220px;
  }
  .mfc-chip {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--mfc-chip, #FF4DA6) 28%, transparent);
    color: var(--mfc-chip, #FF4DA6);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid color-mix(in oklch, var(--mfc-chip, #FF4DA6) 50%, transparent);
  }
  .mfc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mfc-chip, #FF4DA6);
    color: #FFF;
    font-weight: 800;
    font-size: 12px;
    margin-top: 4px;
  }
  .mfc-step h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin: 6px 0 2px;
    color: #FFF;
    letter-spacing: -0.01em;
  }
  .mfc-step p {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
  }
}

/* ----- Mobile: compact horizontal scroll for "15 minutos" flow -----
   Body prefix for extra specificity; Safari iOS can be fussy about
   media-query cascade vs. base rules, so every rule uses !important. */
@media (max-width: 768px) {
  body #como .how { padding: 32px 0 !important; }
  body #como .section-title { font-size: 30px !important; line-height: 1.1 !important; }
  body #como .section-sub { font-size: 14px !important; margin-bottom: 18px !important; }
  body .flow-dark-plate { padding: 14px 0 18px !important; }
  body .flow-section-head { margin: 10px 0 4px !important; padding: 0 16px !important; }
  body .flow-section-head h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 4px 0 !important;
    text-wrap: balance !important;
  }
  body .flow-section-head .fs-chip { font-size: 10px !important; margin-bottom: 4px !important; }

  /* Horizontal scroll-snap carousel per panel */
  body .flow-panel,
  body .flow-panel.on {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 4px 16px 12px !important;
    margin: 0 0 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    grid-template-columns: none !important;
  }
  body .flow-panel::-webkit-scrollbar { display: none !important; }

  /* Compact step cards */
  body .flow-panel .fp-step {
    flex: 0 0 78% !important;
    min-width: 78% !important;
    max-width: 78% !important;
    scroll-snap-align: start !important;
    padding: 14px !important;
    min-height: 0 !important;
  }
  body .flow-panel .fp-illus {
    max-width: 96px !important;
    width: 96px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  body .flow-panel .fp-illus .fp-svg {
    width: 96px !important;
    height: 96px !important;
  }
  body .flow-panel .fp-step h4 { font-size: 15px !important; margin: 4px 0 2px !important; }
  body .flow-panel .fp-step p { font-size: 13px !important; line-height: 1.45 !important; }
  body .flow-panel .fp-badge { transform: scale(0.85); transform-origin: left top; }
  body .flow-panel .fp-arrow { display: none !important; }

  /* Swipe hint under each section title */
  body .flow-section-head::after {
    content: '← swipe →';
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
}

/* ============================================================
   NO-MOTION OVERRIDE — IG preview / performance
   Pausa todas las animaciones y transiciones, y fuerza la
   visibilidad de los elementos que dependían de ellas para
   aparecer (hero words, reveal, stagger, v2-reveal, cards).
   ============================================================ */
*, *::before, *::after {
  animation: none !important;
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  transition: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

.hero-title .word,
.hero-title .word.accent,
.reveal,
.reveal-stagger > *,
[data-v2-reveal],
[data-v2-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}

/* Floating hero cards / orbits / tickers / marquees / bubbles / planets:
   detener en frame inicial. animation:none ya viene del * de arriba,
   esto es defensivo para garantizar que ningún transform residual
   de keyframes quede aplicado. */
.hero-floating,
.float-card,
.orbit,
.orbit-ring,
.v2-ticker-track,
.marquee,
.brands-track,
.planet,
.planet-1,
.planet-2,
.planet-3,
.como-orb,
.como-metaballs circle,
.pb-orb,
.pbubble,
.final-cta-bubble,
.cursor-bubble {
  animation: none !important;
}
/* transform: none aplicado solo a elementos que NO dependen de transform
   para posicionarse. .hero-floating.f3 usa translate(-50%,-50%) para
   centrarse, así que NO va aquí — animation:none ya lo deja estático. */
.float-card,
.orbit,
.v2-ticker-track,
.marquee,
.brands-track,
.planet,
.como-orb,
.pb-orb,
.final-cta-bubble {
  transform: none !important;
}

/* Hero word rotator: la palabra saliente se oculta al instante
   (el JS la remueve del DOM ~350ms después). Evita que dos palabras
   queden superpuestas cuando se desactivan las animaciones. */
.rot-word.exit { opacity: 0 !important; }

/* Eliminar la sección "Cómo funciona / La configuras en 15 minutos"
   de la vista /c (markup ya borrado, esto es defensivo). */
#como { display: none !important; }
.nav-links a[href="#como"] { display: none !important; }
/* Cursor bubbles: deshabilitar el rastro animado del cursor */
#cursor-bubbles { display: none !important; }

/* ===== Phone field con prefijo +52 fijo (México) ===== */
.phone-row{ display: flex; align-items: stretch; gap: 0; }
.phone-row .phone-flag{
  display: flex; align-items: center; padding: 0 12px;
  background: var(--bg-soft, #F5F5FA);
  border: 1.5px solid var(--line);
  border-right: none;
  border-radius: 12px 0 0 12px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; user-select: none;
}
.phone-row input{
  border-radius: 0 12px 12px 0 !important;
  border-left: none !important;
  flex: 1; min-width: 0;
}
.phone-row input:focus{ border-left: none !important; }

/* ===== Honeypot anti-bot ===== */
.hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  tab-index: -1;
}