/* ============ TWIN RESALE PREMIUM — LANDING ============ */
:root{
  --bg:           #0a0510;
  --bg-2:         #120822;
  --bg-3:         #1a0f35;
  --surface:      rgba(28, 16, 56, 0.55);
  --surface-2:    rgba(20, 10, 40, 0.85);
  --border:       rgba(168, 139, 247, 0.18);
  --border-2:     rgba(168, 139, 247, 0.35);

  --purple-900:   #2d1b69;
  --purple-700:   #6d28d9;
  --purple-500:   #8b5cf6;
  --purple-400:   #a78bfa;
  --lilac:        #c4b5fd;

  --green-500:    #10b981;
  --green-600:    #059669;
  --green-glow:   rgba(16, 185, 129, 0.35);

  --vinted:       #09b1ba;
  --gold:         #fbbf24;

  --text:         #f5f3ff;
  --text-muted:   #a8a3b8;
  --text-dim:     #7a7390;

  --radius:       18px;
  --radius-sm:    12px;
  --radius-lg:    24px;

  --shadow-lg:    0 30px 80px -20px rgba(139, 92, 246, 0.35);
  --shadow-cta:   0 12px 30px -8px rgba(16, 185, 129, 0.55);
  --shadow-cta-h: 0 18px 45px -10px rgba(16, 185, 129, 0.75);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

.container{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--narrow{ max-width: 860px; }

/* ===== Typography ===== */
.h1, .h2, .hero__title,
.h1 *, .h2 *, .hero__title *{
  /* Nunca partir palabras a la mitad. Si no cabe, salta entera a siguiente linea */
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:manual !important;
  -webkit-hyphens:manual !important;
  -ms-hyphens:manual !important;
  text-wrap:balance;
}
.h1, .h2{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.h1{ font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.h2{ font-size: clamp(1.8rem, 4vw, 3rem); }

.gradient-text{
  background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-green{
  background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike{ text-decoration: line-through; text-decoration-color: #6b7280; color: var(--text-dim); }

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.01em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  white-space: nowrap;
}
.btn--sm{ padding: 10px 18px; font-size: .85rem; }
.btn--lg{ padding: 18px 30px; font-size: 1.05rem; }
.btn--xl{ padding: 22px 38px; font-size: 1.15rem; }
.btn--block{ display: flex; width: 100%; }

.btn--cta{
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  color: #042a1a;
  box-shadow: var(--shadow-cta);
  position: relative;
  overflow: hidden;
}
.btn--cta::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.btn--cta:hover{ transform: translateY(-2px); box-shadow: var(--shadow-cta-h); filter: brightness(1.08); }
.btn--cta:hover::before{ transform: translateX(100%); }
.btn__arrow{ transition: transform .2s; }
.btn--cta:hover .btn__arrow{ transform: translateX(4px); }

/* ===== Pill / eyebrow ===== */
.pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid var(--border-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--lilac);
  text-transform: uppercase;
}
.pill__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: .5; }
}
.eyebrow{
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--purple-400);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ===== Sections ===== */
.section{ padding: clamp(70px, 10vw, 130px) 0; position: relative; }
.section--dark{ background: linear-gradient(180deg, #08040f 0%, #0d0620 100%); }
.section--urgent{ background: linear-gradient(135deg, #1a0530 0%, #0a1f14 100%); }

.section__head{ text-align: center; max-width: 820px; margin: 0 auto 60px; }
.section__sub{ color: var(--text-muted); font-size: 1.1rem; margin-top: 18px; }

/* ===== Reveal animation ===== */
.reveal{ opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ============ NAV ============ */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 5, 16, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav__inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
.logo{
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.15rem;
}
.logo__mark{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  font-size: .85rem; font-weight: 800;
  box-shadow: 0 8px 20px -4px rgba(139,92,246,.6);
}
.logo__dot{ color: var(--green-500); }
.nav__links{ display: flex; gap: 28px; font-size: .92rem; color: var(--text-muted); }
.nav__links a:hover{ color: var(--text); }
.nav__cta{ box-shadow: 0 8px 22px -6px rgba(16,185,129,.6); }

@media (max-width: 840px){
  .nav__links{ display: none; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  padding: 140px 0 80px;
  overflow: hidden;
}
.hero__bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .5;
}
.blob--1{
  width: 560px; height: 560px;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  top: -150px; left: -150px;
}
.blob--2{
  width: 520px; height: 520px;
  background: radial-gradient(circle, #10b981, transparent 70%);
  bottom: -200px; right: -100px;
  opacity: .35;
}
.grid-lines{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168, 139, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 139, 247, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero__inner{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
.hero__title{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.3rem, 5.8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 20px 0 22px;
}
.hero__sub{
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 32px; }
.hero__meta{ display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-muted); font-size: .9rem; }

.hero__proof{ display: flex; align-items: center; gap: 14px; }
.hero__proof p{ color: var(--text-muted); font-size: .9rem; }

.avatars{ display: flex; }
.avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .9rem;
  background: linear-gradient(135deg, var(--c, #8b5cf6), color-mix(in srgb, var(--c, #8b5cf6) 60%, black));
  color: white;
  border: 2px solid var(--bg);
  margin-left: -10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.avatar:first-child{ margin-left: 0; }
.avatar--more{ background: linear-gradient(135deg, #1a0f35, #2d1b69); font-size: .7rem; color: var(--lilac); }
.avatar--photo{ overflow:hidden; padding:0; }
.avatar--photo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.avatar--lg{ width: 46px; height: 46px; }

/* Tape */
.hero__tape{
  margin-top: 80px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(139,92,246,0.04);
  padding: 16px 0;
}
.tape{
  display: flex; gap: 28px;
  animation: tape 40s linear infinite;
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 600; font-size: .85rem; letter-spacing: 0.15em;
}
@keyframes tape{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Mock phone */
.mock-phone{
  position: relative;
  width: 320px; max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  background: linear-gradient(155deg, #1a0f35, #0a0510);
  border-radius: 44px;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(139,92,246,0.25);
}
.mock-phone__notch{
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 22px;
  background: #000; border-radius: 999px; z-index: 2;
}
.mock-phone__screen{
  background: linear-gradient(180deg, #120822, #08040f);
  border-radius: 32px;
  padding: 42px 16px 18px;
  min-height: 520px;
}
.mock-tg__header{
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mock-tg__name{ font-weight: 700; font-size: .95rem; }
.mock-tg__status{ font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.dot-live{ width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px rgba(16,185,129,.2); animation: pulse 1.5s infinite; }
.mock-tg__body{ padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mock-msg{
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 14px; padding: 12px;
}
.mock-msg--alt{ background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); }
.mock-msg__tag{
  display: inline-block;
  font-size: .65rem; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(251,191,36,0.15); color: var(--gold);
  margin-bottom: 8px;
}
.mock-msg__tag--green{ background: rgba(16,185,129,0.18); color: var(--green-500); }
.mock-msg__title{ font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.mock-msg__grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.mock-msg__grid > div{
  background: rgba(0,0,0,.25); padding: 8px; border-radius: 8px; text-align: center;
}
.mock-msg__grid span{ display: block; color: var(--text-dim); font-size: .65rem; margin-bottom: 3px; }
.mock-msg__grid b{ font-size: .85rem; color: var(--lilac); }
.mock-msg--alt .mock-msg__grid b{ color: #6ee7b7; }
.mock-typing{
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: .75rem;
  padding: 8px 12px;
}
.mock-typing span{
  width: 5px; height: 5px; border-radius: 50%; background: var(--purple-400);
  animation: blink 1.4s infinite;
}
.mock-typing span:nth-child(2){ animation-delay: .2s; }
.mock-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink{ 0%,80%,100%{opacity: .3;} 40%{opacity: 1;} }

@media (max-width: 920px){
  .hero__inner{ grid-template-columns: 1fr; text-align: center; }
  .hero__sub{ margin-left: auto; margin-right: auto; }
  .hero__cta{ justify-content: center; }
  .hero__meta{ justify-content: center; }
  .hero__proof{ justify-content: center; }
}

/* ============ TRANSFORMACIÓN ============ */
.transform{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: stretch;
}
.transform__col{
  padding: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
}
.transform__col--before{
  background: linear-gradient(160deg, rgba(40,20,60,0.4), rgba(20,10,30,0.6));
}
.transform__col--after{
  background: linear-gradient(160deg, rgba(16,185,129,0.08), rgba(139,92,246,0.1));
  border-color: rgba(16,185,129,0.25);
  box-shadow: 0 20px 60px -20px rgba(16,185,129,.2);
}
.transform__label{
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: 0.2em;
  color: #9ca3af;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(107,114,128,0.15);
  margin-bottom: 18px;
}
.transform__label--after{
  color: var(--green-500); background: rgba(16,185,129,0.15);
}
.transform__col ul{ list-style: none; display: flex; flex-direction: column; gap: 14px; }
.transform__col li{ display: flex; gap: 12px; font-size: 1rem; color: var(--text); line-height: 1.5; }
.transform__col--before li{ color: var(--text-muted); }
.x{ color: #ef4444; font-weight: 700; flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(239,68,68,0.12); font-size: .7rem; }
.v{ color: var(--green-500); font-weight: 700; flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(16,185,129,0.15); font-size: .7rem; }
.transform__arrow{
  display: grid; place-items: center;
  font-size: 2.5rem; color: var(--purple-400);
  align-self: center;
}

@media (max-width: 860px){
  .transform{ grid-template-columns: 1fr; }
  .transform__arrow{ transform: rotate(90deg); padding: 8px 0; }
}

/* ============ VSL ============ */
.vsl{ max-width: 960px; margin: 0 auto; }
.vsl__thumb{
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(139,92,246,0.4), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(16,185,129,0.25), transparent 60%),
    linear-gradient(135deg, #1a0f35, #0a0510);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  transition: transform .3s ease;
  color: white;
}
.vsl__thumb:hover{ transform: translateY(-4px); }
.vsl__overlay{
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,0.35) 80%);
}
.vsl__badge{
  position: absolute; top: 20px; left: 20px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
  font-size: .75rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--lilac);
  border: 1px solid var(--border-2);
}
.vsl__caption{
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  text-align: left;
  font-weight: 600; font-size: 1.05rem;
}
.vsl__play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 92px; height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  display: grid; place-items: center;
  box-shadow: 0 20px 60px -10px rgba(139,92,246,.7);
  transition: transform .3s ease;
}
.vsl__thumb:hover .vsl__play{ transform: translate(-50%,-50%) scale(1.08); }
.vsl__play::before{
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(168,139,247,.5);
  animation: ring 2s infinite;
}
@keyframes ring{
  0%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(1.4); opacity: 0; }
}

/* ============ FOR YOU ============ */
.for-you{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.for-you__card{
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  display: flex; gap: 16px; align-items: flex-start;
  transition: transform .2s, border-color .2s;
}
.for-you__card:hover{ transform: translateY(-3px); border-color: var(--border-2); }
.for-you__icon{
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(16,185,129,0.15));
  font-size: 1.4rem;
}
.for-you__card p{ font-size: 1rem; color: var(--text); }

/* ============ CHATS / TESTIMONIOS ============ */
.chats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.chat{
  background: linear-gradient(180deg, #1a0f35, #120822);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.5);
}
.chat__header{
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.chat__header b{ display: block; font-size: .95rem; }
.chat__header small{ color: var(--text-dim); font-size: .75rem; }
.chat__msg{
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.45;
  word-wrap: break-word;
}
.chat__msg--in{
  background: #23163f;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  color: var(--text);
}
.chat__msg--out{
  background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  color: white;
}
.chat__msg b{ color: var(--green-500); font-weight: 700; }
.chat__msg--out b{ color: #6ee7b7; }

.legal{
  text-align: center;
  color: var(--text-dim);
  font-size: .78rem;
  margin-top: 40px;
  font-style: italic;
}

/* ============ CTA MID ============ */
.cta-mid{ padding: 30px 0; }
.cta-mid__card{
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2d1b69 0%, #5b21b6 100%);
  position: relative; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(91,33,182,0.7);
}
.cta-mid__card::before{
  content:''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(16,185,129,0.3), transparent 50%);
  pointer-events: none;
}
.cta-mid__card > *{ position: relative; }
.cta-mid__card h3{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.cta-mid__card p{ color: var(--lilac); }

/* ============ ECOSISTEMA / PILLARS ============ */
.pillar{ margin-bottom: 60px; }
.pillar:last-child{ margin-bottom: 0; }
.pillar__head{
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.pillar__num{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem; font-weight: 700;
  background: linear-gradient(135deg, var(--purple-400), var(--green-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pillar__head h3{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700;
}
.pillar__head h3 small{
  display: block;
  font-size: .9rem; color: var(--text-muted);
  font-weight: 500; margin-top: 4px;
}
.pillar__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.eco-card{
  position: relative;
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.eco-card:hover{
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: 0 25px 60px -20px rgba(139,92,246,.35);
}
.eco-card h4{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  margin-bottom: 10px;
}
.eco-card p{ color: var(--text-muted); font-size: .95rem; line-height: 1.55; }

.eco-card--star{
  background: linear-gradient(160deg, rgba(139,92,246,0.18), rgba(16,185,129,0.08));
  border-color: rgba(251,191,36,0.4);
  box-shadow: 0 25px 60px -20px rgba(251,191,36,0.15);
}
.eco-card__badge{
  position: absolute; top: -10px; right: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #d97706);
  font-size: .65rem; font-weight: 700; letter-spacing: 0.12em;
  color: #422006;
  box-shadow: 0 8px 20px -5px rgba(251,191,36,.5);
}

/* ============ BONUS ============ */
.bonus{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}
.bonus__card{
  position: relative;
  padding: 40px 34px;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #1a0f35, #0a0510);
  border: 1px solid var(--border-2);
  overflow: hidden;
}
.bonus__card::before{
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%);
  pointer-events: none;
}
.bonus__tag{
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--gold);
  padding: 5px 12px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 999px;
  margin-bottom: 18px;
}
.bonus__card h3{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.7rem; font-weight: 700;
  margin-bottom: 12px;
}
.bonus__card p{ color: var(--text-muted); margin-bottom: 18px; }
.bonus__card ul{ list-style: none; margin-bottom: 22px; }
.bonus__card li{
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--text);
  font-size: .95rem;
}
.bonus__card li::before{
  content: '✓'; position: absolute; left: 0; top: 8px;
  color: var(--green-500); font-weight: 700;
}
.bonus__value{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(16,185,129,0.08);
  border: 1px dashed rgba(16,185,129,0.3);
  color: var(--green-500);
  font-weight: 700;
  font-size: .95rem;
}

/* ============ GUARANTEE ============ */
.guarantee{
  display: flex; gap: 30px; align-items: center;
  max-width: 960px; margin: 0 auto;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(139,92,246,0.08));
  border: 1px solid rgba(16,185,129,0.25);
}
.guarantee__icon{
  flex-shrink: 0;
  color: var(--green-500);
}
.guarantee h3{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem; font-weight: 700;
  margin-bottom: 10px;
}
.guarantee p{ color: var(--text-muted); font-size: 1rem; }

@media (max-width: 700px){
  .guarantee{ flex-direction: column; text-align: center; padding: 30px; }
}

/* ============ OFFER SUMMARY ============ */
.offer-summary{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: start;
}
.offer-summary__list{
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.offer-row{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  font-size: .97rem;
}
.offer-row:last-child{ border-bottom: 0; }
.offer-row--bonus{ color: var(--gold); }
.check{
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(16,185,129,0.18);
  color: var(--green-500);
  font-weight: 700; font-size: .75rem;
}
.check--gold{ background: rgba(251,191,36,0.18); color: var(--gold); }

.offer-summary__value{
  padding: 36px 30px;
  background: linear-gradient(155deg, rgba(139,92,246,0.18), rgba(16,185,129,0.1));
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -25px rgba(139,92,246,.4);
  position: sticky; top: 100px;
}
.value-line{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
}
.value-line--now{
  border-top: 1px solid var(--border);
  margin-top: 8px; padding-top: 18px;
  font-size: 1.1rem;
}
.price-tag{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem; font-weight: 700;
  background: linear-gradient(135deg, #6ee7b7, var(--green-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price-tag small{ font-size: 1rem; font-weight: 500; color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); }
.offer-summary__value .btn{ margin-top: 20px; }
.offer-summary__fine{ text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: 14px; }

@media (max-width: 900px){
  .offer-summary{ grid-template-columns: 1fr; }
  .offer-summary__value{ position: static; }
}

/* ============ PRICING ============ */
.pricing{ display: grid; place-items: center; }
.pricing__card{
  position: relative;
  width: 100%; max-width: 520px;
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #1a0f35, #0a0510);
  border: 1px solid var(--border-2);
  text-align: center;
  box-shadow: 0 40px 100px -30px rgba(139,92,246,0.6);
  overflow: hidden;
}
.pricing__glow{
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(139,92,246,0.4), transparent 70%);
  pointer-events: none;
}
.pricing__tag{
  position: relative;
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: 0.2em;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(139,92,246,0.15);
  border: 1px solid var(--border-2);
  color: var(--lilac);
  margin-bottom: 26px;
}
.pricing__price{ position: relative; display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.pricing__amount{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 5.5rem; font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--lilac));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing__currency{ font-size: 2.2rem; font-weight: 700; color: var(--lilac); }
.pricing__period{ font-size: 1.1rem; color: var(--text-muted); margin-left: 4px; }
.pricing__lead{ position: relative; margin: 18px 0 26px; color: var(--text-muted); }
.pricing__list{
  list-style: none;
  text-align: left;
  max-width: 360px;
  margin: 0 auto 30px;
  position: relative;
}
.pricing__list li{
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--text);
  font-size: .95rem;
  border-bottom: 1px dashed var(--border);
}
.pricing__list li:last-child{ border-bottom: 0; }
.pricing__list li::before{
  content: '✓';
  position: absolute; left: 0; top: 10px;
  color: var(--green-500); font-weight: 700;
}
.pricing__fine{ position: relative; color: var(--text-muted); font-size: .82rem; margin-top: 14px; }

/* ============ URGENCIA ============ */
.urgency{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  padding: 50px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1a0530 0%, #0a1f14 100%);
  border: 1px solid rgba(139,92,246,0.3);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.urgency::before{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(139,92,246,0.25), transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(16,185,129,0.18), transparent 50%);
  pointer-events: none;
}
.urgency > *{ position: relative; }
.urgency__pill{
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5;
  font-size: .72rem; font-weight: 700; letter-spacing: 0.15em;
  margin-bottom: 18px;
}
.urgency h3{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 700;
  line-height: 1.15; margin-bottom: 12px;
}
.urgency p{ color: var(--text-muted); }

.countdown{
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.countdown__unit{
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border-2);
  padding: 18px 14px;
  border-radius: 14px;
  min-width: 84px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.countdown__unit b{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem; font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--lilac));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.countdown__unit span{
  display: block;
  margin-top: 6px;
  font-size: .7rem; color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.countdown__sep{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem; font-weight: 700;
  color: var(--purple-400);
}

@media (max-width: 860px){
  .urgency{ grid-template-columns: 1fr; padding: 34px; text-align: center; }
}

/* ============ FAQ ============ */
.faq{ display: flex; flex-direction: column; gap: 12px; }
.faq__item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.faq__item[open]{ border-color: var(--border-2); background: var(--surface-2); }
.faq__item summary{
  padding: 22px 26px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{
  content: '+';
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(139,92,246,0.15);
  color: var(--lilac);
  font-size: 1.3rem; font-weight: 700;
  flex-shrink: 0;
  transition: transform .3s, background .2s;
}
.faq__item[open] summary::after{ content: '−'; transform: rotate(180deg); background: rgba(16,185,129,0.2); color: var(--green-500); }
.faq__item summary:hover{ color: var(--lilac); }
.faq__body{
  padding: 0 26px 22px;
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.65;
}

/* ============ FINAL CTA ============ */
.final-cta{
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0510 0%, #1a0f35 100%);
}
.final-cta__bg{ position: absolute; inset: 0; z-index: 0; }
.final-cta__inner{
  position: relative; z-index: 1;
  text-align: center; max-width: 860px; margin: 0 auto;
}
.final-cta__inner .pill{ margin-bottom: 24px; }
.final-cta__inner .h1{ margin-bottom: 24px; }
.final-cta__inner > p{
  color: var(--text-muted);
  font-size: 1.15rem;
  margin-bottom: 36px;
}
.final-cta__meta{
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  margin-top: 28px;
  color: var(--text-muted); font-size: .92rem;
}

/* ============ FOOTER ============ */
.footer{
  padding: 40px 0 120px;
  border-top: 1px solid var(--border);
  background: #050208;
}
.footer__inner{
  display: grid; gap: 20px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.footer__brand{
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: .9rem;
}
.footer__links{ display: flex; gap: 24px; justify-content: center; }
.footer__links a{ color: var(--text-muted); font-size: .9rem; }
.footer__links a:hover{ color: var(--text); }
.footer__disclaimer{
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  font-size: .78rem;
  margin-top: 20px;
  max-width: 800px;
  margin-left: auto; margin-right: auto;
  font-style: italic;
}
@media (max-width: 720px){
  .footer__inner{ grid-template-columns: 1fr; text-align: center; }
  .footer__brand{ justify-content: center; }
}

/* ============ STICKY MOBILE CTA ============ */
.sticky-cta{
  display: none;
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  padding: 16px 22px;
  text-align: center;
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  color: #042a1a;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: var(--shadow-cta-h);
  z-index: 90;
  animation: slideUp .5s ease;
}
@keyframes slideUp{
  from{ transform: translateY(80px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
@media (max-width: 720px){
  .sticky-cta{ display: block; }
  .footer{ padding-bottom: 100px; }
}

/* ============ RESPONSIVE POLISH ============ */
@media (max-width: 520px){
  .hero{ padding-top: 110px; }
  .hero__cta{ flex-direction: column; align-items: stretch; }
  .hero__cta .btn{ width: 100%; }
  .cta-mid__card{ padding: 28px; }
  .bonus__card{ padding: 30px 24px; }
  .pricing__card{ padding: 36px 24px; }
  .pricing__amount{ font-size: 4.4rem; }
  .countdown__unit{ min-width: 70px; padding: 14px 10px; }
  .countdown__unit b{ font-size: 1.8rem; }
  .faq__item summary{ padding: 18px 20px; font-size: .98rem; }
}

/* =======================================================================
   ADD-ONS v2: hero mock pixelado · VSL timeline · WhatsApp chats ·
   Multi-visual (iPhone + folder iOS) · Bonus hook · Urgency fine print
   ======================================================================= */

/* ===== Hero mock-msg: thumbnail "producto oculto" ===== */
.mock-msg__thumb{
  position: relative;
  height: 78px;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid rgba(139,92,246,0.25);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 4px, transparent 4px 10px),
    radial-gradient(ellipse at 30% 55%, #c7c0b8 0%, #6b6258 35%, transparent 60%),
    radial-gradient(ellipse at 65% 65%, #e5e1d8 0%, #8a8277 30%, transparent 60%),
    linear-gradient(160deg, #1a0f35, #0a0510);
}
.mock-msg__thumb--blurred{
  filter: blur(5px) saturate(.7);
  image-rendering: pixelated;
}
.mock-msg__thumb-lock{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.3rem;
  filter: none;
  z-index: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
}
.mock-msg__title--hidden{
  filter: blur(3px);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  user-select: none;
}
.mock-msg__grid--6{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  row-gap: 4px;
}
.mock-msg__grid--6 > div{ padding: 6px 4px; }
.mock-msg__grid--6 .blurred{
  filter: blur(3px);
  letter-spacing: .15em;
  color: var(--lilac);
}
.mock-msg__sub{
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.4;
  margin-top: 2px;
}

/* ===== VSL timeline simulado + slot para <video> real ===== */
.vsl__thumb{ position: relative; }
.vsl__caption{ bottom: 38px; }
.vsl__timeline{
  position: absolute; left: 20px; right: 20px; bottom: 16px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
  z-index: 3;
  backdrop-filter: blur(6px);
}
.vsl__timeline-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--purple-400), var(--green-500));
  box-shadow: 0 0 12px rgba(139,92,246,.6);
  will-change: width;
  transition: none;
}
.vsl__time{ font-variant-numeric: tabular-nums; }
.vsl__player{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  background: #000;
  display: block;
}

/* ===== Testimonios WhatsApp (reemplaza .chats) ===== */
.wa-chats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.wa-chat{
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a0f35, #120822);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 25px 60px -20px rgba(139,92,246,.35),
    0 20px 50px -15px rgba(0,0,0,.55);
}
.wa-chat__topbar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(16,185,129,0.20), rgba(16,185,129,0.05));
  border-bottom: 1px solid var(--border);
}
.wa-chat__who{ flex: 1; min-width: 0; }
.wa-chat__who b{ display: block; font-size: .95rem; }
.wa-chat__who small{ color: #6ee7b7; font-size: .72rem; }
.wa-chat__badge{
  font-size: .62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(139,92,246,0.18);
  border: 1px solid var(--border-2);
  color: var(--lilac);
  white-space: nowrap;
}
.wa-chat__body{
  position: relative;
  flex: 1;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    radial-gradient(circle at 8% 10%, rgba(139,92,246,0.09), transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(16,185,129,0.08), transparent 45%),
    #0d0720;
}
.wa-chat__body::before{
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: .7;
}
.wa-chat__body > *{ position: relative; z-index: 1; }
.wa-msg{
  position: relative;
  max-width: 82%;
  padding: 8px 12px 20px;
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.wa-msg b{ font-weight: 700; color: #6ee7b7; }
.wa-msg--in{
  background: #1e1332;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  color: var(--text);
}
.wa-msg--in::before{
  content: '';
  position: absolute; bottom: 0; left: -6px;
  width: 10px; height: 10px;
  background: #1e1332;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.wa-msg--out{
  background: linear-gradient(180deg, #10593f, #0e4a34);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  color: #e6fff5;
}
.wa-msg--out::before{
  content: '';
  position: absolute; bottom: 0; right: -6px;
  width: 10px; height: 10px;
  background: #0e4a34;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.wa-msg--out b{ color: #a7f3d0; }
.wa-msg__time{
  display:block;
  text-align:right;
  font-size:10.5px;
  color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}
.wa-msg__time .wa-check{ margin-left:3px; }
.wa-msg--in .wa-msg__time{ color: rgba(255,255,255,.38); }
.wa-check{ color:#53bdeb; font-size:.85em; letter-spacing:-1px; font-weight:700; }

.wa-msg--photo{ padding: 6px 6px 20px; }
.wa-photo{
  display: block;
  width: 220px; max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 14px rgba(0,0,0,.55);
}
.wa-photo svg{ display: block; width: 100%; height: auto; }

@media (max-width: 720px){
  .wa-chat__body{ padding: 14px 10px; }
  .wa-msg{ max-width: 88%; }
  .wa-photo{ width: 100%; }
}

/* ===== Multi-visual: iPhone con carpeta iOS ===== */
.multi-visual{
  display: flex;
  justify-content: center;
  margin: 10px 0 22px;
}
.multi-visual__phone{
  position: relative;
  width: 220px;
  height: 310px;
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(155deg, #2a1550, #0a0510);
  border: 1.5px solid rgba(168,139,247,0.4);
  box-shadow:
    0 30px 60px -15px rgba(139,92,246,.55),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
}
.multi-visual__island{
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 20px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
}
.multi-visual__bg{
  position: absolute; inset: 10px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 28% 20%, rgba(139,92,246,0.7), transparent 50%),
    radial-gradient(circle at 78% 82%, rgba(16,185,129,0.5), transparent 50%),
    linear-gradient(165deg, #2a1a60, #0a0520);
  filter: blur(8px);
  opacity: .9;
  z-index: 1;
}
.multi-visual__folder{
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  padding: 14px 14px 16px;
  border-radius: 22px;
  background: rgba(15,10,30,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.6);
  z-index: 2;
}
.multi-visual__folder-head{
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.multi-visual__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.multi-app{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.multi-app__icon{
  width: 54px; height: 54px;
  border-radius: 15px;
  background: linear-gradient(150deg, #09b1ba, #067a83);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  box-shadow:
    0 6px 12px -4px rgba(9,177,186,.6),
    inset 0 0 0 1px rgba(255,255,255,0.15);
}
.multi-app span{
  font-size: .66rem;
  color: rgba(255,255,255,.88);
  font-weight: 500;
}

/* ===== Bonus hook (frase final destacada) ===== */
.bonus__card .bonus__hook{
  margin: 6px 0 18px !important;
  color: var(--lilac);
  font-size: 1rem;
  line-height: 1.45;
}
.bonus__card .bonus__hook b{
  font-weight: 700;
  background: linear-gradient(135deg, #c4b5fd, #6ee7b7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bonus__card h3 small{
  display: inline;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

/* ===== Urgency fine print ===== */
.urgency__fine{
  margin-top: 14px;
  font-size: .82rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ==============================================================
   VISUAL BOOST (logo img, polaroid, cursor, packages, 3D tilt)
   ============================================================== */

/* --- logo con imagen redonda --- */
.logo__mark{
  overflow:hidden;
  padding:0;
  background:#0b0515;
  border:1px solid rgba(192,132,252,.3);
  box-shadow:0 0 20px rgba(139,92,246,.35);
}
.logo__mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar--lg.avatar--img{ overflow:hidden; padding:0; }
.avatar--lg.avatar--img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- polaroid foto equipo en hero --- */
.hero__photo{
  position:absolute;
  bottom:40px;
  left:30px;
  width:190px;
  aspect-ratio:9/14;
  border-radius:18px;
  overflow:hidden;
  background:#0b0515;
  transform:rotate(-6deg);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.85),
    0 0 0 6px rgba(255,255,255,.04),
    0 0 40px rgba(139,92,246,.18);
  transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s;
  z-index:3;
}
.hero__photo:hover{
  transform:rotate(-2deg) scale(1.05);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.9),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 60px rgba(139,92,246,.4);
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__photo-label{
  position:absolute;
  bottom:10px; left:10px; right:10px;
  font-size:11px;
  color:#fff;
  background:rgba(10,5,25,.7);
  backdrop-filter:blur(8px);
  border-radius:10px;
  padding:6px 10px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.08);
}
@media (max-width:1024px){ .hero__photo{ display:none; } }

/* --- cursor custom + trail (solo desktop hover fino) --- */
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor,
  body.has-custom-cursor *{ cursor:none !important; }
  body.has-custom-cursor input,
  body.has-custom-cursor textarea{ cursor:text !important; }

  .cursor-dot,.cursor-trail{
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    z-index:9999;
    will-change:transform;
  }
  .cursor-dot{
    width:8px; height:8px;
    background:#c084fc;
    border-radius:50%;
    box-shadow:0 0 14px rgba(192,132,252,.8), 0 0 28px rgba(192,132,252,.4);
    transition:width .2s, height .2s, background .2s, box-shadow .2s;
  }
  .cursor-trail{
    width:38px; height:38px;
    border:1.5px solid rgba(192,132,252,.45);
    border-radius:50%;
    transition:width .3s ease, height .3s ease, border-color .3s;
  }
  .cursor-dot.is-hover{
    width:16px; height:16px;
    background:#10b981;
    box-shadow:0 0 18px rgba(16,185,129,.9), 0 0 36px rgba(16,185,129,.5);
  }
  .cursor-trail.is-hover{
    width:64px; height:64px;
    border-color:rgba(16,185,129,.55);
  }
}

/* --- paquetes negros flotando de fondo --- */
.pkg-field{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.pkg{
  position:absolute;
  opacity:.09;
  animation:pkg-float 22s ease-in-out infinite;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
  will-change:transform;
}
.pkg svg{ width:100%; height:100%; display:block; }
.pkg--1{ top:8%;  left:4%;  width:88px;  height:118px; animation-duration:24s; animation-delay:-2s;  --r:-12deg; }
.pkg--2{ top:28%; left:86%; width:62px;  height:84px;  animation-duration:28s; animation-delay:-8s;  --r:14deg;  }
.pkg--3{ top:58%; left:10%; width:96px;  height:130px; animation-duration:26s; animation-delay:-14s; --r:8deg;   }
.pkg--4{ top:78%; left:78%; width:72px;  height:98px;  animation-duration:30s; animation-delay:-5s;  --r:-18deg; opacity:.07;}
.pkg--5{ top:45%; left:48%; width:54px;  height:74px;  animation-duration:34s; animation-delay:-20s; --r:5deg;   opacity:.04;}
.pkg--6{ top:18%; left:58%; width:78px;  height:106px; animation-duration:27s; animation-delay:-11s; --r:-6deg;  }
.pkg--7{ top:68%; left:38%; width:64px;  height:88px;  animation-duration:32s; animation-delay:-16s; --r:20deg;  opacity:.05;}
.pkg--8{ top:90%; left:20%; width:82px;  height:112px; animation-duration:29s; animation-delay:-3s;  --r:-10deg; opacity:.06;}
@keyframes pkg-float{
  0%,100%{ transform:translate3d(0,0,0) rotate(var(--r,0deg)); }
  50%    { transform:translate3d(18px,-36px,0) rotate(calc(var(--r,0deg) + 6deg)); }
}

/* aseguramos que el contenido queda por encima del campo de paquetes */
.nav, section, footer, .sticky-cta{ position:relative; z-index:1; }

/* --- 3D tilt --- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.2,.9,.3,1);
  will-change:transform;
}
.tilt__shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 45%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.tilt:hover .tilt__shine{ opacity:1; }
[data-tilt]{ position:relative; }

/* --- mejoras sutiles extra --- */
.btn--cta{ transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s, filter .25s; }
.btn--cta:hover{ filter:brightness(1.08); }
.avatar{ transition:transform .3s ease, box-shadow .3s; }
.avatar:hover{ transform:translateY(-4px) scale(1.08); }
.mock-phone{ transition:transform .6s cubic-bezier(.2,.9,.3,1); }
.mock-phone:hover{ transform:translateY(-6px) rotateY(-4deg); }

/* ==============================================================
   VISUAL BOOST v2 — fallbacks, packages+parallax, notifications,
                     scarcity bar, ROI calc, VSL viewers
   ============================================================== */

/* --- fallback del logo: si la imagen falla, se ve el gradiente "TR" --- */
.logo__mark{ position:relative; }
.logo__mark::before{
  content:"TR";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.9em;
  background:linear-gradient(135deg, #8b5cf6, #10b981);
  border-radius:inherit;
  z-index:0;
}
.logo__mark img{ position:relative; z-index:1; }
.avatar--lg.avatar--img{ position:relative; }
.avatar--lg.avatar--img::before{
  content:"TR";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800;
  background:var(--c, #8b5cf6);
  border-radius:inherit;
  z-index:0;
}
.avatar--lg.avatar--img img{ position:relative; z-index:1; }

.hero__photo{ background:linear-gradient(160deg, #2a1a3a 0%, #0b0515 60%); }
.hero__photo::before{
  content:"OPERACION REAL";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.45); font-weight:800; font-size:12px;
  letter-spacing:.1em; text-align:center; padding:20px;
  z-index:0;
}
.hero__photo img{ position:relative; z-index:1; }

/* --- paquetes v2 --- */
.pkg-field{ perspective:900px; }
.pkg{ transform-style:preserve-3d; animation-timing-function:ease-in-out; }
.pkg-plus{
  position:absolute;
  width:70px; height:96px; opacity:.09;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.7));
  animation:pkg-float 24s ease-in-out infinite;
}
.pkg-plus svg{ width:100%; height:100%; display:block; }
.pkg-plus--a{ top:14%; left:72%; animation-duration:23s; animation-delay:-4s; --r:-18deg; }
.pkg-plus--b{ top:52%; left:2%;  animation-duration:31s; animation-delay:-13s;--r:22deg;  opacity:.07;}
.pkg-plus--c{ top:88%; left:55%; animation-duration:26s; animation-delay:-7s; --r:-5deg; }
.pkg-plus--d{ top:6%;  left:38%; animation-duration:33s; animation-delay:-19s;--r:11deg; opacity:.06; width:54px; height:74px;}
.pkg-plus--e{ top:36%; left:22%; animation-duration:29s; animation-delay:-2s; --r:-14deg;opacity:.10; width:94px; height:128px;}
.pkg-plus--f{ top:72%; left:92%; animation-duration:25s; animation-delay:-16s;--r:9deg;  opacity:.05; width:58px; height:80px;}

/* --- live notification popper (social proof) --- */
.notif-popper{
  position:fixed;
  bottom:90px; left:20px;
  z-index:95;
  max-width:320px;
}
.notif{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, rgba(20,12,35,.92), rgba(10,5,25,.92));
  backdrop-filter:blur(14px);
  border:1px solid rgba(192,132,252,.25);
  border-radius:14px;
  padding:12px 16px 12px 12px;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateX(-120%) scale(.9);
  opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.3,1), opacity .4s;
}
.notif.is-in{ transform:translateX(0) scale(1); opacity:1; }
.notif__av{
  width:40px; height:40px; flex-shrink:0;
  border-radius:50%;
  background:var(--c, linear-gradient(135deg, #8b5cf6, #ec4899));
  color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(139,92,246,.4), 0 0 0 2px rgba(10,5,20,.95);
  overflow:hidden;
  position:relative;
}
.notif__av--photo{ padding:0; }
.notif__av--photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.notif__av::after{
  content:""; position:absolute; right:-1px; bottom:-1px;
  width:12px; height:12px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 2px rgba(10,5,20,.95), 0 0 8px rgba(16,185,129,.7);
}
.notif__body{ color:#fff; font-size:13px; line-height:1.35; }
.notif__body b{ font-weight:700; color:#fff; }
.notif__body span{ color:#b8afce; font-size:11px; display:block; margin-top:2px; }
@media (max-width:600px){
  .notif-popper{ bottom:80px; left:10px; right:10px; max-width:unset; }
}

/* --- scarcity bar (cupos restantes) --- */
.scarcity-bar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(90deg, #8b5cf6, #ec4899 50%, #f59e0b);
  color:#fff;
  padding:8px 16px;
  text-align:center;
  font-size:13px; font-weight:600;
  display:flex; justify-content:center; align-items:center; gap:14px;
  box-shadow:0 4px 20px rgba(139,92,246,.35);
}
.scarcity-bar__dot{
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px #fff;
  animation:pulse-fast 1.4s ease-in-out infinite;
}
.scarcity-bar b{ font-weight:800; }
@keyframes pulse-fast{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
@media (max-width:600px){ .scarcity-bar{ font-size:11.5px; gap:8px; padding:7px 10px; } }

/* --- ROI calculator widget --- */
.roi{
  position:relative;
  background:linear-gradient(160deg, rgba(28,16,44,.85), rgba(10,5,25,.95));
  border:1px solid rgba(192,132,252,.2);
  border-radius:24px;
  padding:40px 36px;
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(139,92,246,.35);
}
.roi::before{
  content:""; position:absolute; inset:-2px;
  background:conic-gradient(from 180deg, transparent 0deg, rgba(192,132,252,.25) 30deg, transparent 60deg);
  animation:roi-spin 6s linear infinite;
  z-index:0; border-radius:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}
@keyframes roi-spin{ to{ transform:rotate(360deg); } }
.roi__inner{ position:relative; z-index:1; display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:800px){ .roi__inner{ grid-template-columns:1fr; gap:28px; } }

.roi__title{ font-size:1.6rem; font-weight:800; margin:0 0 6px; color:#fff; }
.roi__title span{
  background:linear-gradient(90deg, #c084fc, #10b981);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.roi__sub{ color:#b8afce; font-size:.95rem; margin:0 0 20px; }

.roi__slider{ margin-bottom:14px; }
.roi__slider label{
  display:flex; justify-content:space-between; align-items:center;
  color:#e7e3f1; font-size:.88rem; margin-bottom:6px; font-weight:600;
}
.roi__slider label b{ color:#c084fc; font-weight:800; font-size:1rem; }
.roi__slider input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:10px;
  background:linear-gradient(90deg, #8b5cf6 var(--fill, 30%), rgba(255,255,255,.08) var(--fill, 30%));
  outline:none; cursor:pointer;
}
.roi__slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid #8b5cf6;
  box-shadow:0 0 0 6px rgba(139,92,246,.2), 0 6px 14px rgba(0,0,0,.4);
  cursor:grab;
  transition:transform .15s;
}
.roi__slider input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.roi__slider input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid #8b5cf6;
  box-shadow:0 0 0 6px rgba(139,92,246,.2);
  cursor:grab;
}

.roi__result{
  background:linear-gradient(160deg, rgba(139,92,246,.18), rgba(16,185,129,.12));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
}
.roi__result-label{ color:#b8afce; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:6px; }
.roi__amount{
  font-size:3rem; font-weight:900;
  background:linear-gradient(90deg, #c084fc, #10b981);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1; display:block; margin:4px 0;
  font-variant-numeric:tabular-nums;
  transition:transform .3s;
}
.roi__result.is-bump .roi__amount{ transform:scale(1.05); }
.roi__vs{ color:#8a8298; font-size:.8rem; margin-top:10px; }
.roi__vs b{ color:#10b981; font-weight:800; }

/* --- VSL viewers live counter --- */
.vsl{ position:relative; }
.vsl-live{
  position:absolute; top:16px; right:16px;
  background:rgba(220,38,38,.92);
  color:#fff; font-weight:700; font-size:12px;
  padding:5px 10px; border-radius:8px;
  display:flex; align-items:center; gap:6px;
  box-shadow:0 8px 20px rgba(220,38,38,.4);
  letter-spacing:.03em;
  z-index:5;
}
.vsl-live::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px #fff;
  animation:pulse-fast 1.2s ease-in-out infinite;
}

/* --- CTA shine effect --- */
.btn--cta{ position:relative; overflow:hidden; }
.btn--cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-150%) skewX(-20deg);
  transition:transform .6s;
  pointer-events:none;
}
.btn--cta:hover::after{ transform:translateX(150%) skewX(-20deg); }

/* --- ticker compradores --- */
.buyer-ticker{
  overflow:hidden; white-space:nowrap;
  background:rgba(10,5,25,.6);
  border-top:1px solid rgba(192,132,252,.15);
  border-bottom:1px solid rgba(192,132,252,.15);
  padding:10px 0;
  color:#b8afce; font-size:12px;
  font-variant-numeric:tabular-nums;
}
.buyer-ticker__inner{
  display:inline-flex; gap:28px;
  animation:ticker-scroll 180s linear infinite;
  padding-left:100%;
  align-items:center;
}
.buyer-ticker__inner span{
  display:inline-flex; align-items:center; gap:8px;
}
.buyer-ticker__av{
  width:22px; height:22px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  border:1.5px solid rgba(16,185,129,.45);
  box-shadow:0 0 8px rgba(16,185,129,.18);
}
.buyer-ticker__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.buyer-ticker:hover .buyer-ticker__inner{ animation-play-state:paused; }
.buyer-ticker__inner span b{ color:#10b981; font-weight:700; }
@keyframes ticker-scroll{ to{ transform:translateX(-100%); } }

/* --- spots bar --- */
.spots{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(220,38,38,.12);
  border:1px solid rgba(220,38,38,.3);
  border-radius:100px;
  padding:6px 14px;
  font-size:13px; font-weight:600; color:#fca5a5;
  margin-top:12px;
}
.spots__bar{
  width:80px; height:6px; background:rgba(220,38,38,.2);
  border-radius:10px; overflow:hidden;
  position:relative;
}
.spots__bar::after{
  content:""; position:absolute; top:0; left:0;
  height:100%; width:var(--fill, 30%);
  background:linear-gradient(90deg, #ef4444, #f59e0b);
  border-radius:inherit;
  transition:width 1s cubic-bezier(.2,.9,.3,1);
}
.spots__num{ color:#fff; font-weight:800; }

/* ==============================================================
   VISUAL BOOST v3 — magnetic buttons, count-up, confetti,
                     polish para imágenes reales
   ============================================================== */

/* --- polish del logo con imagen real --- */
.logo__mark{
  position:relative;
  isolation:isolate;
}
.logo__mark::after{
  content:"";
  position:absolute; inset:-2px;
  background:conic-gradient(from 0deg, #8b5cf6, #ec4899, #10b981, #8b5cf6);
  border-radius:inherit;
  z-index:-1;
  animation:logo-ring 8s linear infinite;
  opacity:.7;
}
.logo__mark img{
  border-radius:inherit;
  transition:transform .4s cubic-bezier(.2,.9,.3,1);
}
.logo:hover .logo__mark img{ transform:scale(1.08); }
@keyframes logo-ring{ to{ transform:rotate(360deg); } }

/* avatar del chat con glow morado suave */
.avatar--lg.avatar--img{
  box-shadow:0 0 0 2px rgba(139,92,246,.4), 0 0 20px rgba(139,92,246,.3);
}
.avatar--lg.avatar--img img{ border-radius:inherit; }

/* --- polaroid hero ahora con imagen real: más fiel y con movimiento --- */
.hero__photo{
  animation:polaroid-sway 6s ease-in-out infinite;
}
@keyframes polaroid-sway{
  0%,100%{ transform:rotate(-6deg); }
  50%    { transform:rotate(-3.5deg) translateY(-4px); }
}
.hero__photo:hover{ animation-play-state:paused; }
.hero__photo img{ transition:transform .8s cubic-bezier(.2,.9,.3,1); }
.hero__photo:hover img{ transform:scale(1.06); }

/* halo detrás de la polaroid */
.hero__photo::after{
  content:"";
  position:absolute; inset:-20px;
  background:radial-gradient(circle, rgba(139,92,246,.3), transparent 60%);
  z-index:-1;
  filter:blur(20px);
  opacity:.6;
  pointer-events:none;
}

/* --- magnetic buttons (visual follow) --- */
.btn--cta, .btn--xl, .btn--lg{
  transition:transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s, filter .2s;
}

/* --- count-up numbers glow on update --- */
.count-up{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  transition:color .3s, text-shadow .3s;
}
.count-up.is-flash{
  color:#c084fc;
  text-shadow:0 0 20px rgba(192,132,252,.7);
}

/* --- confetti canvas overlay --- */
.confetti-layer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9998;
}

/* --- price-tag glow al hover en el pricing card --- */
.pricing__card:hover .pricing__amount{
  text-shadow:0 0 30px rgba(192,132,252,.5);
}

/* --- microinteracción en la ROI card: glow al mover --- */
.roi__result{ transition:box-shadow .3s, transform .3s; }
.roi:hover .roi__result{
  box-shadow:0 20px 50px -10px rgba(139,92,246,.4), 0 0 0 1px rgba(192,132,252,.2) inset;
}

/* --- scroll indicator en hero (chevron parpadeante) --- */
.hero__scroll-hint{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.4);
  font-size:11px;
  letter-spacing:.2em;
  font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:fade-pulse 2.5s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
.hero__scroll-hint svg{ width:18px; height:18px; animation:bounce-down 2s ease-in-out infinite; }
@keyframes fade-pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
@keyframes bounce-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (max-width:900px){ .hero__scroll-hint{ display:none; } }

/* --- badge "verificado" con check tipo tw --- */
.badge-verified{
  display:inline-flex; align-items:center; gap:4px;
  color:#60a5fa; font-weight:700; font-size:.78em;
}
.badge-verified svg{ width:14px; height:14px; fill:#60a5fa; }

/* --- highlight súbito del número de spots al cambiar --- */
.spots__num{ transition:color .25s, text-shadow .25s; }
.spots__num.is-dec{ color:#fca5a5; text-shadow:0 0 12px rgba(220,38,38,.6); }

/* --- mejora mock-phone: reflejo sutil en pantalla --- */
.mock-phone__screen{
  position:relative;
  overflow:hidden;
}
.mock-phone__screen::before{
  content:""; position:absolute;
  top:0; left:-100%;
  width:80%; height:100%;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 50%, transparent 80%);
  animation:screen-glare 7s ease-in-out infinite;
  pointer-events:none;
  z-index:10;
}
@keyframes screen-glare{
  0%,100%{ left:-100%; }
  60%,70%{ left:150%; }
}

/* --- logo__text microanimación --- */
.logo__text{ transition:letter-spacing .3s; }
.logo:hover .logo__text{ letter-spacing:.01em; }
.logo__dot{ color:#10b981; animation:dot-blink 1.8s ease-in-out infinite; }
@keyframes dot-blink{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ==============================================================
   VISUAL BOOST v4 — aurora bg, noise, scroll progress, income
   ticker, garantia, payment logos, pricing toggle, ripple,
   spotlight cursor, typewriter, stat bumps
   ============================================================== */

/* --- AURORA MESH (full-bleed animated bg) --- */
.aurora{
  position:fixed;
  inset:-10%;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}
.aurora::before,
.aurora::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.35;
  will-change:transform;
}
.aurora::before{
  width:52vw; height:52vw;
  top:-10%; left:-10%;
  background:radial-gradient(circle, #8b5cf6, transparent 65%);
  animation:aurora-a 18s ease-in-out infinite alternate;
}
.aurora::after{
  width:60vw; height:60vw;
  bottom:-20%; right:-15%;
  background:radial-gradient(circle, #10b981, transparent 65%);
  animation:aurora-b 22s ease-in-out infinite alternate;
}
.aurora__c{
  position:absolute;
  width:40vw; height:40vw; top:30%; left:40%;
  background:radial-gradient(circle, #ec4899, transparent 65%);
  border-radius:50%;
  filter:blur(90px);
  opacity:.28;
  animation:aurora-c 25s ease-in-out infinite alternate;
}
@keyframes aurora-a{
  0%  { transform:translate(0,0)       scale(1); }
  100%{ transform:translate(20vw,15vh) scale(1.2); }
}
@keyframes aurora-b{
  0%  { transform:translate(0,0)         scale(1); }
  100%{ transform:translate(-18vw,-12vh) scale(1.15); }
}
@keyframes aurora-c{
  0%  { transform:translate(-10vw,-5vh) scale(1); }
  100%{ transform:translate(8vw,12vh)   scale(1.25); }
}

/* --- NOISE TEXTURE (SVG-like via data-URI gradient approximation) --- */
.noise{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}

/* --- SCROLL PROGRESS BAR --- */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:var(--p, 0%);
  background:linear-gradient(90deg, #8b5cf6, #ec4899, #10b981);
  z-index:999;
  transition:width .1s linear;
  box-shadow:0 0 10px rgba(192,132,252,.7);
}

/* --- SPOTLIGHT CURSOR GLOW --- */
.spotlight{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(
    600px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(139,92,246,.08),
    transparent 60%
  );
  transition:background 0.15s ease;
}
@media (hover:none) { .spotlight { display:none; } }

/* --- LIVE INCOME TICKER --- */
.income-live{
  position:relative;
  margin:0 auto 60px;
  max-width:720px;
  padding:24px 32px;
  background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(139,92,246,.08));
  border:1px solid rgba(16,185,129,.25);
  border-radius:20px;
  display:flex; align-items:center; gap:20px;
  box-shadow:0 20px 50px -20px rgba(16,185,129,.3);
  overflow:hidden;
}
.income-live::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(16,185,129,.1), transparent);
  transform:translateX(-100%);
  animation:income-shine 4s ease-in-out infinite;
}
@keyframes income-shine{ 50%,100%{ transform:translateX(100%); } }
.income-live__icon{
  width:48px; height:48px;
  background:linear-gradient(135deg, #10b981, #059669);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  box-shadow:0 8px 24px rgba(16,185,129,.4);
  position:relative; z-index:1;
}
.income-live__body{ position:relative; z-index:1; }
.income-live__label{
  color:#b8afce; font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
}
.income-live__amount{
  color:#10b981; font-size:1.9rem; font-weight:900;
  font-variant-numeric:tabular-nums;
  display:block; line-height:1.1;
  text-shadow:0 0 20px rgba(16,185,129,.4);
}
.income-live__sub{ color:#e7e3f1; font-size:.85rem; opacity:.75; }
@media (max-width:600px){
  .income-live{ padding:16px 20px; gap:14px; }
  .income-live__amount{ font-size:1.5rem; }
  .income-live__icon{ width:40px; height:40px; font-size:20px; }
}

/* --- GUARANTEE SECTION --- */
.guarantee{
  position:relative;
  padding:56px 40px;
  background:
    radial-gradient(circle at 20% 50%, rgba(16,185,129,.15), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(139,92,246,.12), transparent 50%),
    linear-gradient(160deg, #10061a, #1a0f25);
  border:1px solid rgba(16,185,129,.2);
  border-radius:24px;
  overflow:hidden;
}
.guarantee__inner{
  display:grid; grid-template-columns:auto 1fr; gap:32px;
  align-items:center; position:relative; z-index:1;
}
.guarantee__shield{
  width:120px; height:140px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.guarantee__shield svg{ width:100%; height:100%; }
.guarantee__shield::after{
  content:"";
  position:absolute; inset:-20%;
  background:radial-gradient(circle, rgba(16,185,129,.35), transparent 60%);
  filter:blur(20px);
  z-index:-1;
  animation:shield-glow 3s ease-in-out infinite;
}
@keyframes shield-glow{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
.guarantee__title{
  font-size:1.6rem; font-weight:800; margin:0 0 8px;
  color:#fff;
}
.guarantee__title span{
  background:linear-gradient(90deg, #10b981, #34d399);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.guarantee__text{ color:#b8afce; line-height:1.55; margin:0; }
.guarantee__text b{ color:#fff; font-weight:700; }
@media (max-width:700px){
  .guarantee{ padding:36px 24px; }
  .guarantee__inner{ grid-template-columns:1fr; text-align:center; gap:20px; }
  .guarantee__shield{ margin:0 auto; width:90px; height:105px; }
}

/* --- PAYMENT LOGOS + TRUST BADGES --- */
.trust{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:18px 30px;
  margin:36px 0 0;
  padding:24px 16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.trust__label{
  color:#8a8298; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.15em;
  font-weight:700;
  margin:0;
}
.trust__logos{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.trust__logo{
  height:22px;
  display:inline-flex; align-items:center;
  padding:6px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:#e7e3f1;
  font-weight:800; font-size:.78rem;
  letter-spacing:.03em;
  transition:transform .2s, background .2s;
}
.trust__logo:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); }
.trust__badge{
  display:inline-flex; align-items:center; gap:6px;
  color:#10b981; font-weight:700; font-size:.8rem;
}
.trust__badge svg{ width:16px; height:16px; }

/* --- PRICING TOGGLE (mensual/anual) --- */
.price-toggle{
  display:inline-flex;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
  padding:4px;
  margin:0 auto 22px;
  position:relative;
}
.price-toggle__btn{
  background:none; border:none;
  color:#b8afce;
  padding:8px 18px;
  border-radius:100px;
  font-weight:700; font-size:.85rem;
  cursor:pointer;
  transition:color .25s;
  z-index:1;
  font-family:inherit;
}
.price-toggle__btn.is-active{ color:#fff; }
.price-toggle__slide{
  position:absolute;
  top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px);
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius:100px;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 6px 16px rgba(139,92,246,.35);
}
.price-toggle[data-mode="yearly"] .price-toggle__slide{ transform:translateX(100%); }
.price-toggle__save{
  position:absolute;
  top:-10px; right:-10px;
  background:#10b981; color:#fff;
  font-size:9px; font-weight:800;
  padding:3px 7px;
  border-radius:10px;
  letter-spacing:.05em;
  box-shadow:0 4px 10px rgba(16,185,129,.45);
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* ocultamos/mostramos los valores según modo */
.pricing[data-mode="monthly"] [data-yearly]{ display:none !important; }
.pricing[data-mode="yearly"]  [data-monthly]{ display:none !important; }

.pricing__savings{
  display:inline-block;
  background:rgba(16,185,129,.15);
  border:1px solid rgba(16,185,129,.4);
  color:#34d399;
  font-size:.75rem; font-weight:700;
  padding:3px 10px;
  border-radius:100px;
  margin-top:10px;
  letter-spacing:.02em;
}

/* --- RIPPLE EFFECT --- */
.ripple-host{ position:relative; overflow:hidden; }
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:scale(0);
  animation:ripple .6s ease-out;
  pointer-events:none;
}
@keyframes ripple{ to{ transform:scale(2.5); opacity:0; } }

/* --- HERO TYPEWRITER --- */
.typewriter{
  display:inline-block;
  position:relative;
}
.typewriter::after{
  content:"|";
  margin-left:2px;
  animation:caret .9s steps(1) infinite;
  color:#10b981;
}
@keyframes caret{ 50%{ opacity:0; } }

/* --- STAT BUMPS ---*/
.stat-card{
  background:linear-gradient(160deg, rgba(20,12,35,.6), rgba(10,5,25,.7));
  border:1px solid rgba(192,132,252,.12);
  border-radius:18px;
  padding:24px 22px;
  transition:transform .3s, border-color .3s, box-shadow .3s;
  position:relative;
  overflow:hidden;
}
.stat-card:hover{
  transform:translateY(-6px);
  border-color:rgba(192,132,252,.35);
  box-shadow:0 20px 40px -20px rgba(139,92,246,.4);
}
.stat-card__num{
  font-size:2.4rem; font-weight:900;
  background:linear-gradient(90deg, #c084fc, #10b981);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  line-height:1;
  display:block;
  margin-bottom:6px;
}
.stat-card__label{ color:#b8afce; font-size:.85rem; }
.stats-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:24px;
}
@media (max-width:700px){ .stats-row{ grid-template-columns:1fr; } }

/* --- gradient border card — universal class --- */
.g-border{
  position:relative;
  background:rgba(10,5,25,.6);
  border-radius:20px;
  isolation:isolate;
}
.g-border::before{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(135deg, #8b5cf6, #10b981, #ec4899, #8b5cf6);
  background-size:300% 300%;
  border-radius:inherit;
  z-index:-1;
  animation:g-border-move 5s linear infinite;
  opacity:.6;
}
@keyframes g-border-move{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* --- ENHANCED CTAs --- */
.btn--cta{
  background-size:200% 200%;
  animation:cta-breath 4s ease-in-out infinite;
}
@keyframes cta-breath{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* --- SMOOTH BG GRID DOTS (subtle) --- */
.dot-grid{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.25;
  background-image:radial-gradient(rgba(192,132,252,.18) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* --- EMOJI REACTION AROUND STATS --- */
.reactions{
  position:absolute;
  top:10px; right:10px;
  display:flex; gap:4px;
  font-size:14px;
  opacity:.6;
}
.reactions span{
  padding:2px 6px;
  background:rgba(255,255,255,.05);
  border-radius:100px;
  font-weight:600; color:#e7e3f1;
  font-size:11px;
  display:inline-flex; align-items:center; gap:2px;
}

/* ==============================================================
   VISUAL BOOST v5 — bento grid, how-it-works, before/after,
                     money-lost, side-dot nav, objections,
                     real countdown, scrollbar, glitch
   ============================================================== */

/* --- GLOBAL: custom scrollbar + selection --- */
::selection{ background:rgba(139,92,246,.4); color:#fff; }
::-moz-selection{ background:rgba(139,92,246,.4); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0b0515; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #8b5cf6, #ec4899 50%, #10b981);
  border-radius:10px;
  border:2px solid #0b0515;
}
::-webkit-scrollbar-thumb:hover{ filter:brightness(1.2); }

html{ scrollbar-color:#8b5cf6 #0b0515; scrollbar-width:thin; }

/* --- NAV LINK gradient underline --- */
.nav__links a{
  position:relative;
  transition:color .25s;
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-4px;
  height:2px;
  background:linear-gradient(90deg, #8b5cf6, #10b981);
  transition:right .3s cubic-bezier(.2,.9,.3,1);
  border-radius:2px;
}
.nav__links a:hover::after{ right:0; }

/* --- SIDE DOT NAV (floating, glass pill) — ultra compacto --- */
.side-nav{
  position:fixed;
  right:10px; top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex; flex-direction:column; gap:5px;
  padding:4px 2.5px;
  background:rgba(14,8,28,.5);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(192,132,252,.14);
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  pointer-events:auto;
}
.side-nav__dot{
  position:relative;
  width:2.5px; height:2.5px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:background .25s ease, transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease;
  border:none;
  padding:0;
}
.side-nav__dot:hover{
  background:rgba(192,132,252,.75);
  transform:scale(1.5);
}
.side-nav__dot.is-active{
  background:linear-gradient(135deg,#c084fc,#ec4899);
  transform:scale(1.7);
  box-shadow:0 0 3px rgba(192,132,252,.8), 0 0 6px rgba(236,72,153,.3);
}
.side-nav__dot::after{
  content:attr(data-label);
  position:absolute;
  right:18px; top:50%; transform:translateY(-50%) translateX(4px);
  background:rgba(20,12,35,.95);
  backdrop-filter:blur(10px);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:4px 9px; border-radius:6px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  border:1px solid rgba(192,132,252,.25);
}
.side-nav__dot:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:1100px){ .side-nav{ display:none; } }

/* --- HOW IT WORKS 3-STEPS --- */
.hiw{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; position:relative; }
.hiw-step{
  position:relative;
  background:linear-gradient(160deg, rgba(20,12,35,.6), rgba(10,5,25,.7));
  border:1px solid rgba(192,132,252,.15);
  border-radius:20px;
  padding:28px 24px;
  transition:transform .3s, border-color .3s;
}
.hiw-step:hover{ transform:translateY(-6px); border-color:rgba(192,132,252,.45); }
.hiw-step__num{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff; font-weight:900; font-size:18px;
  border-radius:14px;
  margin-bottom:16px;
  box-shadow:0 10px 24px rgba(139,92,246,.35);
  position:relative;
}
.hiw-step__num::before{
  content:""; position:absolute; inset:-3px;
  border-radius:inherit;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  filter:blur(10px); opacity:.5; z-index:-1;
}
.hiw-step__title{ color:#fff; font-size:1.2rem; font-weight:800; margin:0 0 8px; }
.hiw-step__text{ color:#b8afce; line-height:1.55; margin:0; font-size:.93rem; }
.hiw-step__icon{
  position:absolute; top:20px; right:20px;
  width:32px; height:32px; opacity:.4;
  transition:opacity .3s, transform .3s;
}
.hiw-step:hover .hiw-step__icon{ opacity:1; transform:scale(1.15); }

/* connectors entre pasos */
.hiw-step::after{
  content:""; position:absolute;
  right:-24px; top:50%; transform:translateY(-50%);
  width:24px; height:2px;
  background:linear-gradient(90deg, rgba(192,132,252,.6), rgba(192,132,252,0));
  z-index:1;
}
.hiw-step:last-child::after{ display:none; }
@media (max-width:900px){
  .hiw{ grid-template-columns:1fr; }
  .hiw-step::after{ display:none; }
}

/* --- BENTO GRID --- */
.bento{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(170px, auto);
  gap:14px;
}
.bento__cell{
  position:relative;
  background:linear-gradient(160deg, rgba(20,12,35,.7), rgba(10,5,25,.85));
  border:1px solid rgba(192,132,252,.12);
  border-radius:20px;
  padding:24px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), border-color .3s, box-shadow .3s;
}
.bento__cell:hover{
  transform:translateY(-4px);
  border-color:rgba(192,132,252,.4);
  box-shadow:0 30px 60px -20px rgba(139,92,246,.3);
}
.bento__cell--wide{ grid-column:span 2; }
.bento__cell--tall{ grid-row:span 2; }
.bento__cell--hero{ grid-column:span 2; grid-row:span 2; }
.bento__eyebrow{
  display:inline-block;
  color:#c084fc;
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.15em;
  margin-bottom:10px;
}
.bento__title{
  color:#fff; font-size:1.3rem; font-weight:800;
  margin:0 0 8px; line-height:1.15;
}
.bento__title--lg{ font-size:1.8rem; }
.bento__text{ color:#b8afce; line-height:1.5; font-size:.9rem; margin:0; }
.bento__emoji{
  font-size:2rem;
  display:block;
  margin-bottom:10px;
  filter:drop-shadow(0 6px 10px rgba(139,92,246,.4));
}
.bento__gradient{
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(139,92,246,.12), transparent 60%);
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.bento__cell:hover .bento__gradient{ opacity:1; }
.bento__glow{
  position:absolute; bottom:-40%; right:-20%;
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.25), transparent 70%);
  filter:blur(20px);
}
.bento__cell--highlighted{
  background:linear-gradient(160deg, rgba(139,92,246,.18), rgba(236,72,153,.12));
  border-color:rgba(236,72,153,.3);
}
@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2, 1fr); }
  .bento__cell--wide,
  .bento__cell--hero{ grid-column:span 2; }
  .bento__cell--tall{ grid-row:auto; }
}
@media (max-width:550px){
  .bento{ grid-template-columns:1fr; }
  .bento__cell,
  .bento__cell--wide,
  .bento__cell--hero{ grid-column:span 1; }
}

/* --- BEFORE / AFTER DRAG SLIDER --- */
.ba{
  position:relative;
  max-width:760px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  user-select:none;
  cursor:ew-resize;
  border:1px solid rgba(192,132,252,.2);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  background:#0b0515;
}
.ba__half{
  position:absolute; top:0; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:30px;
  text-align:center;
}
.ba__half--before{
  left:0; width:100%;
  background:linear-gradient(135deg, #2b1818, #4a1a1a);
  color:#fca5a5;
  z-index:1;
}
.ba__half--after{
  left:0; width:100%;
  background:linear-gradient(135deg, #0f2c20, #0c3826 50%, #122e4a);
  color:#6ee7b7;
  z-index:2;
  clip-path:inset(0 0 0 var(--ba, 50%));
}
.ba__label{
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.2em;
  margin-bottom:12px; opacity:.8;
}
.ba__num{
  font-size:clamp(2.4rem, 6vw, 4rem);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin:0 0 8px;
  text-shadow:0 0 30px currentColor;
}
.ba__text{
  font-size:.95rem;
  opacity:.85;
  margin:0; max-width:280px;
}
.ba__handle{
  position:absolute; top:0; bottom:0;
  left:var(--ba, 50%);
  width:4px;
  background:linear-gradient(180deg, transparent, #fff, transparent);
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
}
.ba__knob{
  position:absolute; top:50%; left:var(--ba, 50%);
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  border-radius:50%;
  background:#fff;
  color:#0b0515;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 4px rgba(139,92,246,.3);
  z-index:6;
  pointer-events:none;
  font-weight:800;
  font-size:18px;
}
.ba__knob::before{ content:"‹"; margin-right:2px; }
.ba__knob::after{ content:"›"; margin-left:2px; }

/* --- MONEY LOST COUNTER --- */
.money-lost{
  position:relative;
  background:
    radial-gradient(circle at 30% 50%, rgba(220,38,38,.18), transparent 60%),
    linear-gradient(160deg, rgba(31,10,10,.7), rgba(10,5,25,.9));
  border:1px solid rgba(220,38,38,.25);
  border-radius:22px;
  padding:48px 40px;
  text-align:center;
  overflow:hidden;
}
.money-lost::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(220,38,38,.5) 30deg, transparent 90deg);
  animation:roi-spin 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}
.money-lost__eyebrow{
  display:inline-block;
  color:#fca5a5;
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.2em;
  margin-bottom:12px;
}
.money-lost__title{
  color:#fff; font-size:clamp(1.5rem, 3vw, 2.2rem);
  font-weight:900; margin:0 0 22px; line-height:1.15;
}
.money-lost__title span{
  color:#ef4444;
  text-shadow:0 0 30px rgba(239,68,68,.5);
}
.money-lost__amount{
  display:inline-block;
  font-size:clamp(3rem, 8vw, 5rem);
  font-weight:900;
  background:linear-gradient(180deg, #ef4444, #b91c1c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin:6px 0;
  filter:drop-shadow(0 0 20px rgba(239,68,68,.4));
  position:relative;
}
.money-lost__amount::before{ content:"−"; margin-right:4px; }
.money-lost__sub{ color:#b8afce; margin:16px 0 0; font-size:.95rem; }
.money-lost__cta{ margin-top:24px; }

/* --- OBJECTIONS --- */
.obj-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.obj-card{
  position:relative;
  background:linear-gradient(160deg, rgba(20,12,35,.6), rgba(10,5,25,.7));
  border:1px solid rgba(192,132,252,.15);
  border-radius:18px;
  padding:24px 22px;
  overflow:hidden;
  cursor:pointer;
  min-height:160px;
  transition:transform .3s, border-color .3s;
}
.obj-card:hover{ transform:translateY(-4px); border-color:rgba(192,132,252,.5); }
.obj-card__q{
  color:#fff; font-weight:800; font-size:1.05rem;
  line-height:1.3; margin:0 0 10px;
  display:flex; align-items:flex-start; gap:10px;
}
.obj-card__q::before{
  content:"?"; flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, #ec4899, #8b5cf6);
  color:#fff; font-weight:900; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(139,92,246,.4);
}
.obj-card__a{
  color:#b8afce; font-size:.9rem; line-height:1.55;
  margin:0;
  transition:opacity .3s;
  opacity:.7;
}
.obj-card:hover .obj-card__a{ opacity:1; color:#e7e3f1; }
.obj-card__hint{
  position:absolute; bottom:12px; right:14px;
  color:#c084fc; font-size:.72rem; font-weight:700;
  opacity:0; transform:translateY(4px);
  transition:opacity .25s, transform .25s;
}
.obj-card:hover .obj-card__hint{ opacity:.8; transform:translateY(0); }
@media (max-width:900px){ .obj-grid{ grid-template-columns:1fr; } }

/* --- REAL COUNTDOWN en scarcity bar --- */
.scarcity-bar__timer{
  font-variant-numeric:tabular-nums;
  font-weight:900;
  background:rgba(0,0,0,.25);
  padding:2px 8px;
  border-radius:6px;
  min-width:68px;
  display:inline-block;
  letter-spacing:.04em;
}

/* --- GLITCH effect en número final --- */
.glitch{
  position:relative;
  display:inline-block;
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
}
.glitch::before{
  color:#10b981;
  transform:translate(-2px, 0);
  clip-path:polygon(0 0, 100% 0, 100% 40%, 0 40%);
  animation:glitch-top 3s infinite linear;
}
.glitch::after{
  color:#ec4899;
  transform:translate(2px, 0);
  clip-path:polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  animation:glitch-bot 3s infinite linear;
}
@keyframes glitch-top{
  0%,90%,100%{ transform:translate(0,0); }
  92%{ transform:translate(-3px, -1px); }
  94%{ transform:translate(2px, 0); }
  96%{ transform:translate(-1px, 1px); }
}
@keyframes glitch-bot{
  0%,90%,100%{ transform:translate(0,0); }
  92%{ transform:translate(3px, 1px); }
  94%{ transform:translate(-2px, 0); }
  96%{ transform:translate(1px, -1px); }
}

/* --- REVEAL with stagger delay --- */
.reveal[data-stagger]{ transition-delay:calc(var(--i, 0) * 80ms); }

/* ==============================================================
   LEAD CAPTURE FORM
   ============================================================== */
.lead{
  position:relative;
  background:
    radial-gradient(circle at 20% 30%, rgba(139,92,246,.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(16,185,129,.15), transparent 50%),
    linear-gradient(160deg, rgba(20,12,35,.8), rgba(10,5,25,.95));
  border:1px solid rgba(192,132,252,.18);
  border-radius:24px;
  padding:48px 40px;
  overflow:hidden;
  isolation:isolate;
}
.lead::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, transparent, rgba(192,132,252,.35) 25%, transparent 50%, rgba(16,185,129,.3) 75%, transparent);
  animation:roi-spin 10s linear infinite;
  z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

.lead__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
  position:relative; z-index:1;
}
@media (max-width:820px){ .lead__inner{ grid-template-columns:1fr; gap:28px; } }

.lead__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:#c084fc;
  font-size:.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.15em;
  margin-bottom:14px;
}
.lead__eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#c084fc; box-shadow:0 0 10px #c084fc;
  animation:pulse-fast 1.4s ease-in-out infinite;
}
.lead__title{
  color:#fff; font-weight:900;
  font-size:clamp(1.5rem, 3vw, 2rem);
  line-height:1.15;
  margin:0 0 14px;
}
.lead__title span{
  background:linear-gradient(90deg, #c084fc, #10b981);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead__text{ color:#b8afce; line-height:1.55; margin:0 0 20px; font-size:.95rem; }

.lead__perks{
  list-style:none; padding:0; margin:0 0 4px;
  display:grid; gap:8px;
}
.lead__perks li{
  display:flex; align-items:center; gap:10px;
  color:#e7e3f1; font-size:.9rem;
}
.lead__perks li::before{
  content:""; flex-shrink:0;
  width:18px; height:18px; border-radius:50%;
  background:
    linear-gradient(135deg, #10b981, #059669) content-box,
    linear-gradient(135deg, #10b981, #059669);
  background-clip:content-box;
  position:relative;
  box-shadow:0 0 0 1px rgba(16,185,129,.3);
}
.lead__perks li::after{
  content:"✓"; color:#fff; font-size:11px; font-weight:900;
  position:absolute;
  transform:translate(-14px,0);
  width:18px; text-align:center;
  line-height:18px;
}

/* --- form --- */
.lead__form{
  position:relative;
  background:rgba(10,5,25,.5);
  border:1px solid rgba(192,132,252,.25);
  border-radius:16px;
  padding:20px;
  backdrop-filter:blur(8px);
}
.lead__field{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:12px;
}
.lead__input{
  flex:1 1 220px;
  min-width:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:14px 16px;
  color:#fff;
  font-size:.95rem;
  font-family:inherit;
  transition:border-color .25s, background .25s;
  outline:none;
}
.lead__input::placeholder{ color:#6b6480; }
.lead__input:focus{
  border-color:rgba(192,132,252,.6);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(139,92,246,.18);
}
.lead__submit{
  flex-shrink:0;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:14px 22px;
  font-weight:800;
  font-family:inherit;
  font-size:.95rem;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s, box-shadow .2s, filter .2s;
  box-shadow:0 10px 24px rgba(139,92,246,.35);
  position:relative; overflow:hidden;
}
.lead__submit:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.lead__submit:disabled{ opacity:.7; cursor:wait; }

/* honeypot — hidden but present for bots */
.lead__hp{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px; height:1px;
}

.lead__fine{
  color:#8a8298; font-size:.78rem; line-height:1.5; margin:6px 0 0;
}
.lead__fine a{ color:#c084fc; text-decoration:underline; }

.lead__status{
  margin-top:10px;
  padding:10px 14px;
  border-radius:10px;
  font-size:.88rem; font-weight:600;
  display:none;
  align-items:center; gap:8px;
}
.lead__status.is-show{ display:flex; animation:lead-pop .4s cubic-bezier(.2,.9,.3,1); }
.lead__status--ok{
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.35);
  color:#6ee7b7;
}
.lead__status--err{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fca5a5;
}
@keyframes lead-pop{ 0%{opacity:0; transform:translateY(-4px);} 100%{opacity:1; transform:translateY(0);} }

/* loading spinner dentro del botón */
.lead__submit .sp{
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:sp 0.8s linear infinite;
  display:none;
}
.lead__submit.is-loading .sp{ display:inline-block; }
.lead__submit.is-loading .lead__submit-text{ opacity:.6; }
@keyframes sp{ to{ transform:rotate(360deg); } }

/* éxito compacto: sustituye todo el form */
.lead__form.is-done .lead__form-body{ display:none; }
.lead__done{ display:none; text-align:center; padding:8px 0; }
.lead__form.is-done .lead__done{ display:block; }
.lead__done__icon{
  width:52px; height:52px; margin:0 auto 10px;
  border-radius:50%;
  background:linear-gradient(135deg, #10b981, #059669);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px; font-weight:900;
  box-shadow:0 10px 28px rgba(16,185,129,.4);
  animation:lead-pop-big .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes lead-pop-big{
  0%  { transform:scale(.4); opacity:0; }
  70% { transform:scale(1.1); }
  100%{ transform:scale(1); opacity:1; }
}
.lead__done h4{ color:#fff; margin:0 0 6px; font-size:1.05rem; }
.lead__done p{ color:#b8afce; margin:0; font-size:.88rem; line-height:1.5; }

/* compact footer variant */
.footer-lead{
  display:flex; gap:8px; flex-wrap:wrap;
  max-width:380px;
  margin-top:14px;
}
.footer-lead input{
  flex:1 1 180px; min-width:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:10px 12px;
  color:#fff; font-size:.85rem; font-family:inherit;
}
.footer-lead button{
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff; border:none;
  border-radius:8px; padding:10px 16px;
  font-weight:800; font-size:.85rem; cursor:pointer;
  font-family:inherit;
  transition:filter .2s, transform .2s;
}
.footer-lead button:hover{ filter:brightness(1.15); transform:translateY(-2px); }

/* ==============================================================
   BOOST v6 — realismo chat (foto real, sold-cards, voice notes,
              reactions), live sales feed, hover glow intenso
   ============================================================== */

/* --- wa-photo mejorado: acepta <img> + tiene grain + sombra --- */
.wa-photo{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  background:#000;
  transform:translateZ(0);
}
.wa-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:3/2;
  filter:saturate(1.05) contrast(1.02);
}
.wa-photo::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
  opacity:.06;
  mix-blend-mode:overlay;
  pointer-events:none;
}
/* gradient vignette sutil */
.wa-photo::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35));
  pointer-events:none;
  z-index:1;
}
/* zoom on hover */
.wa-photo img{ transition:transform .6s cubic-bezier(.2,.9,.3,1); }
.wa-chat:hover .wa-photo img{ transform:scale(1.04); }

/* foto con object-position para mostrar la parte de paquetes */
.wa-photo--pkg-close img{ object-position:center 70%; aspect-ratio:4/3; }

/* --- SOLD CARD estilo Vinted dentro del chat --- */
.sold-card{
  display:flex; gap:10px;
  background:linear-gradient(135deg, rgba(9,177,186,.1), rgba(9,177,186,.05));
  border:1px solid rgba(9,177,186,.25);
  border-radius:12px;
  padding:10px;
  margin-top:2px;
  font-size:12.5px;
  position:relative;
  overflow:hidden;
  max-width:240px;
}
.sold-card__thumb{
  flex-shrink:0;
  width:54px; height:54px;
  border-radius:8px;
  background:linear-gradient(135deg, #2a2030, #1a1220);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
  font-size:20px;
}
.sold-card__body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:2px 0; }
.sold-card__brand{ color:#09b1ba; font-size:9px; font-weight:900; letter-spacing:.15em; }
.sold-card__name{
  color:#fff; font-weight:600; font-size:12.5px;
  line-height:1.25;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
}
.sold-card__price{
  display:flex; align-items:center; gap:6px;
  margin-top:4px;
}
.sold-card__price b{ color:#10b981; font-size:13px; font-weight:900; }
.sold-card__price small{
  color:#666; text-decoration:line-through; font-size:11px;
}
.sold-card__sold-badge{
  position:absolute; top:6px; right:6px;
  background:#10b981; color:#fff;
  font-size:8.5px; font-weight:900;
  padding:2px 6px; border-radius:4px;
  letter-spacing:.08em;
  box-shadow:0 4px 10px rgba(16,185,129,.4);
}

/* --- WA VOICE NOTE message --- */
.wa-voice{
  display:flex; align-items:center; gap:10px;
  min-width:220px;
}
.wa-voice__play{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, #10b981, #059669);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(16,185,129,.3);
  transition:transform .2s;
  border:none;
}
.wa-voice__play:hover{ transform:scale(1.1); }
.wa-voice__play svg{ width:14px; height:14px; fill:#fff; }
.wa-voice__bars{
  flex:1; height:28px;
  display:flex; align-items:center; gap:2px;
}
.wa-voice__bars span{
  flex:1;
  background:rgba(255,255,255,.4);
  border-radius:2px;
  min-height:3px;
}
.wa-voice--in .wa-voice__bars span{ background:rgba(192,132,252,.6); }
.wa-voice__time{
  color:rgba(255,255,255,.55);
  font-size:11px;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.wa-voice__bars span{ animation:voice-bar 1.6s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes voice-bar{
  0%,100%{ height:20%; }
  50%    { height:90%; }
}

/* --- WA REACTION chips --- */
.wa-react{
  display:inline-flex; gap:4px;
  margin-top:-6px;
  margin-bottom:4px;
  position:relative;
  z-index:2;
}
.wa-react span{
  background:#2a1f38;
  border:1px solid rgba(192,132,252,.3);
  border-radius:100px;
  padding:2px 7px;
  font-size:11px;
  color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
  display:inline-flex; align-items:center; gap:3px;
}
.wa-react span b{ color:#b8afce; font-weight:700; font-size:10px; }

/* --- CHECK MARKS azules para outgoing seen --- */
.wa-check{ color:#53bdeb; letter-spacing:-1px; font-size:12px; }

/* --- MEJOR LOOK DE CHAT --- */
.wa-chat{
  background:linear-gradient(180deg, rgba(20,12,35,.5), rgba(10,5,25,.8));
  border:1px solid rgba(192,132,252,.12);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s, border-color .35s;
}
.wa-chat:hover{
  transform:translateY(-6px);
  border-color:rgba(192,132,252,.4);
  box-shadow:
    0 30px 60px -20px rgba(139,92,246,.35),
    0 0 0 1px rgba(192,132,252,.2) inset;
}
.wa-chat__body{
  background:
    radial-gradient(circle at 10% 10%, rgba(139,92,246,.06), transparent 40%),
    linear-gradient(180deg, #0d0718, #0a0513);
  padding:14px;
}
.wa-msg{
  max-width:85%;
  padding:9px 12px;
  border-radius:10px;
  font-size:13.5px;
  line-height:1.4;
  margin-bottom:6px;
  position:relative;
  word-wrap:break-word;
}
.wa-msg--in{
  background:#1f1830;
  color:#f1ecf7;
  border-top-left-radius:4px;
}
.wa-msg--out{
  background:linear-gradient(135deg, #124e3f, #0f6b52);
  color:#e7fff5;
  margin-left:auto;
  border-top-right-radius:4px;
}
/* v6 override garantiza display:block text-align:right consistente (sin float) */
.wa-msg .wa-msg__time{
  display:block;
  text-align:right;
  font-size:10.5px;
  color:rgba(255,255,255,.45);
  margin-top:4px;
  margin-left:0;
  float:none;
  font-variant-numeric:tabular-nums;
}
.wa-msg--photo{
  padding:4px;
  max-width:260px;
}
.wa-msg b{ font-weight:700; color:#fff; }
.wa-msg--in b{ color:#c084fc; }
.wa-msg--out b{ color:#6ee7b7; }

.wa-chat__topbar{
  background:linear-gradient(180deg, #1a1028, #120a20);
  border-bottom:1px solid rgba(192,132,252,.12);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.wa-chat__who b{ color:#fff; display:block; font-size:14px; }
.wa-chat__who small{ color:#6ee7b7; font-size:11px; }
.wa-chat__badge{
  margin-left:auto;
  background:rgba(139,92,246,.18);
  border:1px solid rgba(192,132,252,.4);
  color:#c084fc;
  font-size:10px; font-weight:800;
  padding:4px 9px;
  border-radius:100px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* --- typing indicator --- */
.wa-typing{
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 14px;
  background:#1f1830;
  border-radius:10px;
  border-top-left-radius:4px;
  color:#888;
  font-size:12px;
  max-width:120px;
  margin-bottom:6px;
}
.wa-typing span{
  width:5px; height:5px;
  border-radius:50%;
  background:#888;
  animation:typing-bounce 1.4s ease-in-out infinite;
}
.wa-typing span:nth-child(2){ animation-delay:.2s; }
.wa-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typing-bounce{
  0%,100%{ transform:translateY(0); opacity:.4; }
  50%    { transform:translateY(-4px); opacity:1; }
}

/* --- LIVE SALES FEED (banner horizontal) --- */
.sales-feed{
  position:relative;
  background:linear-gradient(90deg, rgba(16,185,129,.08), rgba(139,92,246,.06));
  border:1px solid rgba(16,185,129,.15);
  border-radius:14px;
  overflow:hidden;
  margin-top:24px;
  padding:14px 0;
}
.sales-feed::before,
.sales-feed::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2;
  pointer-events:none;
}
.sales-feed::before{
  left:0;
  background:linear-gradient(90deg, #0a0513, transparent);
}
.sales-feed::after{
  right:0;
  background:linear-gradient(-90deg, #0a0513, transparent);
}
.sales-feed__track{
  display:flex; gap:14px;
  animation:sales-scroll 45s linear infinite;
  white-space:nowrap;
  padding-left:14px;
}
@keyframes sales-scroll{ to{ transform:translateX(-50%); } }
.sales-tile{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(20,12,35,.7);
  border:1px solid rgba(192,132,252,.15);
  padding:8px 14px 8px 10px;
  border-radius:100px;
  flex-shrink:0;
}
.sales-tile__ico{
  width:26px; height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, #10b981, #059669);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:900;
  box-shadow:0 3px 8px rgba(16,185,129,.3);
}
.sales-tile__body{ font-size:12.5px; color:#e7e3f1; }
.sales-tile__body b{ color:#10b981; font-weight:800; }
.sales-tile__body small{ color:#8a8298; font-size:10.5px; margin-left:4px; }

/* --- HOVER GLOW intenso en cards clave --- */
.bento__cell,
.hiw-step,
.obj-card,
.stat-card,
.eco-card,
.bonus__card,
.cta-mid__card,
.pricing__card{
  transition:transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s, border-color .3s;
}
.bento__cell:hover,
.hiw-step:hover,
.obj-card:hover,
.stat-card:hover,
.eco-card:hover{
  box-shadow:
    0 30px 60px -20px rgba(139,92,246,.4),
    0 0 0 1px rgba(192,132,252,.3) inset,
    0 0 40px rgba(139,92,246,.12);
}

/* --- TEXT REVEAL word-by-word al entrar en viewport --- */
.text-reveal .tr-word{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease-out, transform .6s cubic-bezier(.2,.9,.3,1);
}
.text-reveal.is-visible .tr-word{
  opacity:1; transform:translateY(0);
  transition-delay:calc(var(--wi, 0) * 40ms);
}

/* --- efecto hero__title con subrayado mini gradient al hover --- */
.hero__title .gradient-text,
.hero__title .gradient-text-green{
  background-size:200% 100%;
  animation:grad-move 4s ease-in-out infinite alternate;
}
@keyframes grad-move{
  from{ background-position:0% 50%; }
  to  { background-position:100% 50%; }
}

/* --- emoji reactions inline a mensajes --- */
.wa-msg-wrap{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:6px; }
.wa-msg-wrap--out{ align-items:flex-end; }
.wa-msg-wrap .wa-msg{ margin-bottom:0; }
.wa-msg-wrap .wa-react{ margin-top:-8px; margin-left:12px; }
.wa-msg-wrap--out .wa-react{ margin-left:0; margin-right:12px; }

/* ==============================================================
   CHATBOT WIDGET
   ============================================================== */

/* --- FAB (botón flotante) --- */
.cb-fab{
  position:fixed;
  bottom:22px; right:22px;
  z-index:90;
  width:60px; height:60px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:
    0 14px 30px rgba(139,92,246,.5),
    0 0 0 6px rgba(139,92,246,.1);
  transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s;
  animation:cb-pulse 2s ease-in-out infinite;
}
.cb-fab:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 20px 40px rgba(139,92,246,.6), 0 0 0 8px rgba(139,92,246,.15); }
.cb-fab svg{ width:26px; height:26px; fill:#fff; transition:transform .4s cubic-bezier(.2,.9,.3,1); }
.cb-fab.is-open svg.cb-fab__chat{ display:none; }
.cb-fab:not(.is-open) svg.cb-fab__close{ display:none; }
@keyframes cb-pulse{
  0%,100%{ box-shadow:0 14px 30px rgba(139,92,246,.5), 0 0 0 6px rgba(139,92,246,.1); }
  50%    { box-shadow:0 14px 30px rgba(139,92,246,.5), 0 0 0 14px rgba(139,92,246,0); }
}

/* badge contador */
.cb-fab__badge{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px;
  padding:0 6px;
  background:#10b981; color:#fff;
  border-radius:100px;
  font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #0b0515;
  box-shadow:0 4px 10px rgba(16,185,129,.4);
}
.cb-fab__badge.is-hidden{ display:none; }

/* --- WIDGET ventana --- */
.cb-win{
  position:fixed;
  bottom:94px; right:22px;
  z-index:89;
  width:380px;
  max-width:calc(100vw - 28px);
  height:560px;
  max-height:calc(100vh - 120px);
  background:linear-gradient(180deg, #140a22 0%, #0a0513 100%);
  border:1px solid rgba(192,132,252,.25);
  border-radius:20px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(192,132,252,.1) inset;
  opacity:0; transform:translateY(20px) scale(.95);
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.2,.9,.3,1), transform .3s cubic-bezier(.2,.9,.3,1);
}
.cb-win.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* --- Header --- */
.cb-head{
  padding:16px 18px;
  background:linear-gradient(135deg, #1c102e, #140a22);
  border-bottom:1px solid rgba(192,132,252,.15);
  display:flex; align-items:center; gap:12px;
  flex-shrink:0;
}
.cb-head__av{
  width:40px; height:40px; border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#fff; font-size:14px;
  box-shadow:0 0 0 2px rgba(192,132,252,.3);
  flex-shrink:0;
  position:relative;
}
.cb-head__av img{ width:100%; height:100%; object-fit:cover; }
.cb-head__av::before{
  content:""; position:absolute; bottom:-1px; right:-1px;
  width:10px; height:10px; border-radius:50%;
  background:#10b981;
  border:2px solid #140a22;
  box-shadow:0 0 8px rgba(16,185,129,.6);
}
.cb-head__info{ flex:1; min-width:0; }
.cb-head__name{ color:#fff; font-weight:800; font-size:14px; line-height:1.2; }
.cb-head__status{ color:#6ee7b7; font-size:11px; display:flex; align-items:center; gap:5px; }
.cb-head__status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#10b981; box-shadow:0 0 6px #10b981;
  animation:pulse-fast 1.4s ease-in-out infinite;
}

/* --- Body: mensajes --- */
.cb-body{
  flex:1;
  overflow-y:auto;
  padding:16px 16px 8px;
  display:flex; flex-direction:column;
  gap:8px;
  background:
    radial-gradient(circle at 30% 10%, rgba(139,92,246,.08), transparent 50%),
    #0a0513;
  scroll-behavior:smooth;
}
.cb-body::-webkit-scrollbar{ width:6px; }
.cb-body::-webkit-scrollbar-thumb{ background:rgba(192,132,252,.3); border-radius:10px; }

/* --- Mensaje --- */
.cb-msg{
  max-width:82%;
  padding:10px 13px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.45;
  animation:cb-pop .35s cubic-bezier(.2,.9,.3,1);
  word-wrap:break-word;
}
.cb-msg b{ color:#c084fc; font-weight:700; }
.cb-msg--bot{
  background:#1f1830;
  color:#f1ecf7;
  border-top-left-radius:4px;
  align-self:flex-start;
}
.cb-msg--bot b{ color:#c084fc; }
.cb-msg--user{
  background:linear-gradient(135deg, #124e3f, #0f6b52);
  color:#e7fff5;
  border-top-right-radius:4px;
  align-self:flex-end;
}
.cb-msg--user b{ color:#6ee7b7; }
@keyframes cb-pop{
  0%  { opacity:0; transform:translateY(6px) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* mensaje con CTA botón */
.cb-msg__cta{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px;
  padding:7px 12px;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff !important;
  border-radius:8px;
  font-size:12px; font-weight:800;
  text-decoration:none;
  transition:filter .2s, transform .2s;
  box-shadow:0 6px 14px rgba(139,92,246,.4);
}
.cb-msg__cta:hover{ filter:brightness(1.12); transform:translateY(-1px); }

/* typing indicator */
.cb-typing{
  align-self:flex-start;
  padding:12px 14px;
  background:#1f1830;
  border-top-left-radius:4px;
  border-radius:14px;
  display:inline-flex; align-items:center; gap:4px;
  animation:cb-pop .3s cubic-bezier(.2,.9,.3,1);
}
.cb-typing span{
  width:5px; height:5px; border-radius:50%;
  background:#888;
  animation:typing-bounce 1.4s ease-in-out infinite;
}
.cb-typing span:nth-child(2){ animation-delay:.2s; }
.cb-typing span:nth-child(3){ animation-delay:.4s; }

/* --- Quick replies chips --- */
.cb-quick{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 16px 4px;
  flex-shrink:0;
}
.cb-quick__chip{
  background:rgba(139,92,246,.12);
  border:1px solid rgba(192,132,252,.35);
  color:#e7e3f1;
  font-size:12px; font-weight:600;
  padding:7px 12px;
  border-radius:100px;
  cursor:pointer;
  font-family:inherit;
  transition:all .2s;
  line-height:1;
  white-space:nowrap;
}
.cb-quick__chip:hover{
  background:rgba(139,92,246,.25);
  border-color:rgba(192,132,252,.6);
  transform:translateY(-1px);
}

/* --- Input footer --- */
.cb-foot{
  padding:12px 14px;
  background:#120820;
  border-top:1px solid rgba(192,132,252,.12);
  display:flex; gap:8px; align-items:center;
  flex-shrink:0;
}
.cb-foot input{
  flex:1; min-width:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
  padding:10px 16px;
  color:#fff;
  font-size:13px;
  font-family:inherit;
  outline:none;
  transition:border-color .2s, background .2s;
}
.cb-foot input:focus{
  border-color:rgba(192,132,252,.6);
  background:rgba(255,255,255,.08);
}
.cb-foot input::placeholder{ color:#6b6480; }
.cb-foot__send{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, filter .2s;
  box-shadow:0 6px 14px rgba(139,92,246,.35);
}
.cb-foot__send:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.cb-foot__send svg{ width:16px; height:16px; fill:#fff; }

/* --- tag "powered" sutil --- */
.cb-credit{
  text-align:center;
  color:#6b6480;
  font-size:10px;
  padding:4px 0 8px;
  flex-shrink:0;
  background:#120820;
}
.cb-credit b{ color:#c084fc; font-weight:700; }

/* --- mobile --- */
@media (max-width:500px){
  .cb-win{
    right:10px; left:10px; bottom:86px;
    width:auto;
    height:calc(100vh - 110px);
    border-radius:16px;
  }
  .cb-fab{ bottom:14px; right:14px; width:54px; height:54px; }
  .cb-fab svg{ width:22px; height:22px; }
}

/* ==============================================================
   VIDEO PLAYER — soporte mp4/youtube/vimeo
   ============================================================== */
.vsl__player-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#0b0515;
  border:1px solid rgba(192,132,252,.2);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.vsl__player-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
/* Contenedor del video: se ajusta al aspect-ratio natural del video (sin letterbox) */
.vsl-stage{
  position:relative;
  margin:0 auto;
  /* aspect-ratio se fija dinámicamente por JS al cargar metadata del video
     (fallback 9/16 vertical típico WhatsApp) */
  aspect-ratio:var(--vr, 9/16);
  width:auto;
  max-width:min(520px, 100%);
  max-height:82vh;
  background:#000;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(192,132,252,.2);
  box-shadow:
    0 40px 90px -30px rgba(139,92,246,.35),
    0 30px 70px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.04) inset;
  display:flex; align-items:center; justify-content:center;
}
.vsl-stage[data-orient="landscape"]{ max-width:min(960px, 100%); }
video.vsl__player{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border-radius:inherit;
  background:#000;
  object-fit:cover;
}
video.vsl__player::-webkit-media-controls-panel{
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
}
/* Play pulsante custom (solo visible antes de reproducir) */
.vsl-stage__play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:84px; height:84px;
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  border:none;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  z-index:3;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px rgba(139,92,246,.5);
  animation:vsl-pulse 2s ease-out infinite;
  transition:transform .3s;
}
.vsl-stage__play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.vsl-stage__play svg{ width:36px; height:36px; margin-left:4px; }
.vsl-stage.is-playing .vsl-stage__play{ display:none; }
@keyframes vsl-pulse{
  0%  { box-shadow:0 0 0 0 rgba(139,92,246,.55), 0 20px 50px rgba(139,92,246,.5); }
  100%{ box-shadow:0 0 0 40px rgba(139,92,246,0), 0 20px 50px rgba(139,92,246,.5); }
}

/* sold-card thumb soporta <img> de paquete real */
.sold-card__thumb{ overflow:hidden; padding:0; }
.sold-card__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ==============================================================
   COOKIE BANNER GDPR
   ============================================================== */
.ck-banner{
  position:fixed;
  bottom:20px; left:20px;
  z-index:85;
  max-width:420px;
  background:linear-gradient(135deg, rgba(20,12,35,.97), rgba(10,5,25,.97));
  border:1px solid rgba(192,132,252,.25);
  border-radius:14px;
  padding:16px 18px;
  backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  color:#e7e3f1;
  font-size:13px;
  line-height:1.5;
  transform:translateY(calc(100% + 30px));
  transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.ck-banner.is-show{ transform:translateY(0); }
.ck-banner p{ margin:0 0 12px; }
.ck-banner a{ color:#c084fc; text-decoration:underline; }
.ck-banner__row{ display:flex; gap:8px; justify-content:flex-end; }
.ck-banner button{
  border:none;
  border-radius:8px;
  padding:8px 14px;
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
  font-family:inherit;
  transition:filter .2s, transform .2s;
}
.ck-banner__accept{
  background:linear-gradient(135deg, #8b5cf6, #ec4899);
  color:#fff;
  box-shadow:0 6px 14px rgba(139,92,246,.35);
}
.ck-banner__accept:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.ck-banner__reject{
  background:rgba(255,255,255,.05);
  color:#b8afce;
  border:1px solid rgba(255,255,255,.1);
}
.ck-banner__reject:hover{ background:rgba(255,255,255,.1); color:#fff; }
@media (max-width:600px){
  .ck-banner{ left:10px; right:10px; bottom:14px; max-width:unset; padding:14px; font-size:12.5px; }
}

/* ==============================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Deshabilita animaciones para usuarios que las tienen desactivadas
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .aurora,
  .dot-grid,
  .noise,
  .pkg-field,
  .hero__photo,
  .logo__mark::after,
  .buyer-ticker__inner,
  .sales-feed__track,
  .cursor-dot,
  .cursor-trail,
  .vsl-stage__play,
  .scarcity-bar__dot{ animation:none !important; }
  .cursor-dot, .cursor-trail{ display:none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor *{ cursor:auto !important; }
  .pkg, .pkg-plus{ display:none !important; }
}

/* Focus visible para accesibilidad */
:focus-visible{
  outline:2px solid #c084fc;
  outline-offset:2px;
  border-radius:4px;
}
.btn:focus-visible,
button:focus-visible{
  outline-offset:3px;
}

/* ==============================================================
   LEADERBOARD — Top miembros del mes (aspiracional)
   ============================================================== */
.lb{
  background:linear-gradient(160deg, rgba(20,12,35,.7), rgba(10,5,25,.9));
  border:1px solid rgba(192,132,252,.2);
  border-radius:24px;
  padding:36px 32px;
  position:relative;
  overflow:hidden;
  max-width:760px;
  margin:0 auto;
}
.lb::before{
  content:""; position:absolute; inset:-1px;
  background:conic-gradient(from 90deg, transparent, rgba(192,132,252,.3) 25%, transparent 60%);
  animation:roi-spin 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
  border-radius:inherit;
}
.lb__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px;
}
.lb__title{
  color:#fff; font-size:1.2rem; font-weight:800; margin:0;
}
.lb__title span{
  background:linear-gradient(90deg, #fbbf24, #f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lb__month{
  background:rgba(192,132,252,.12);
  border:1px solid rgba(192,132,252,.3);
  color:#c084fc;
  font-size:.78rem; font-weight:700;
  padding:4px 10px;
  border-radius:100px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.lb__rows{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.lb__row{
  display:grid;
  grid-template-columns:40px 40px 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
  border-radius:14px;
  transition:transform .25s, border-color .25s, background .25s;
}
.lb__row:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.04);
  border-color:rgba(192,132,252,.3);
}
.lb__pos{
  font-weight:900; font-size:1.1rem; text-align:center;
  color:#8a8298; font-variant-numeric:tabular-nums;
}
.lb__row--gold   .lb__pos{ color:#fbbf24; }
.lb__row--silver .lb__pos{ color:#d1d5db; }
.lb__row--bronze .lb__pos{ color:#fdba74; }
.lb__medal{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  font-weight:900;
  color:#fff;
  background:var(--c, linear-gradient(135deg, #8b5cf6, #ec4899));
  box-shadow:0 0 0 2px rgba(192,132,252,.2);
  font-family:'Space Grotesk', sans-serif;
}
.lb__row--gold   .lb__medal{ background:linear-gradient(135deg, #fbbf24, #d97706); box-shadow:0 0 0 2px rgba(251,191,36,.3), 0 0 20px rgba(251,191,36,.3); }
.lb__row--silver .lb__medal{ background:linear-gradient(135deg, #e5e7eb, #9ca3af); box-shadow:0 0 0 2px rgba(209,213,219,.3); color:#1f2937; }
.lb__row--bronze .lb__medal{ background:linear-gradient(135deg, #fdba74, #c2410c); box-shadow:0 0 0 2px rgba(251,146,60,.3); }
.lb__name{
  color:#fff; font-weight:700; font-size:.95rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb__name small{ color:#8a8298; font-weight:500; font-size:.8rem; display:block; margin-top:2px; }
.lb__bar{
  width:100px; height:8px;
  background:rgba(255,255,255,.06);
  border-radius:10px;
  overflow:hidden;
  position:relative;
}
.lb__bar::after{
  content:""; position:absolute; top:0; left:0;
  height:100%; width:var(--p, 50%);
  background:linear-gradient(90deg, #8b5cf6, #10b981);
  border-radius:inherit;
  transition:width 1.5s cubic-bezier(.2,.9,.3,1);
}
.lb__row--gold   .lb__bar::after{ background:linear-gradient(90deg, #fbbf24, #f59e0b); }
.lb__row--silver .lb__bar::after{ background:linear-gradient(90deg, #e5e7eb, #9ca3af); }
.lb__row--bronze .lb__bar::after{ background:linear-gradient(90deg, #fdba74, #c2410c); }
.lb__amount{
  font-weight:900; font-size:1.05rem;
  color:#10b981;
  font-variant-numeric:tabular-nums;
  min-width:82px; text-align:right;
}
.lb__row--gold   .lb__amount{ color:#fbbf24; }
.lb__footer{
  margin-top:20px;
  text-align:center;
  color:#b8afce;
  font-size:.85rem;
  position:relative; z-index:1;
}
.lb__footer b{ color:#fff; }
@media (max-width:600px){
  .lb{ padding:24px 20px; }
  .lb__row{ grid-template-columns:30px 36px 1fr auto; gap:10px; padding:10px 12px; }
  .lb__bar{ display:none; }
  .lb__amount{ font-size:.95rem; min-width:68px; }
}

/* ==============================================================
   COMMUNITY TOTAL — contador grande del mes
   ============================================================== */
.com-total{
  position:relative;
  text-align:center;
  padding:50px 24px;
  border-radius:22px;
  background:
    radial-gradient(circle at 30% 40%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(16,185,129,.18), transparent 55%),
    linear-gradient(160deg, rgba(12,6,22,.9), rgba(6,3,14,.95));
  border:1px solid rgba(192,132,252,.18);
  overflow:hidden;
  max-width:760px;
  margin:0 auto 32px;
}
.com-total::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(16,185,129,.06));
  pointer-events:none;
}
.com-total__label{
  color:#10b981; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.2em;
  margin-bottom:12px; display:block;
}
.com-total__num{
  display:block;
  font-size:clamp(3rem, 10vw, 6rem);
  font-weight:900;
  line-height:1;
  background:linear-gradient(180deg, #c084fc, #10b981 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 60px rgba(192,132,252,.3);
  margin:8px 0;
  position:relative; z-index:1;
}
.com-total__sub{ color:#b8afce; font-size:.95rem; position:relative; z-index:1; }
.com-total__sub b{ color:#10b981; }
.com-total__chips{
  display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.com-total__chip{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#e7e3f1;
  padding:5px 12px;
  border-radius:100px;
  font-size:.78rem; font-weight:600;
}
.com-total__chip b{ color:#10b981; }

/* ==============================================================
   BOOST v8 — Loading screen, constellation canvas, live typing,
              3D parallax avanzado, scroll 3D entries,
              number morphing, rainbow underlines
   ============================================================== */

/* --- LOADING SCREEN --- */
.loader{
  position:fixed; inset:0;
  z-index:10000;
  background:linear-gradient(160deg, #0b0515 0%, #050210 100%);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:26px;
  transition:opacity .7s ease-out, visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__logo{
  width:88px; height:88px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  background:#0b0515;
  animation:loader-logo-pop .9s cubic-bezier(.2,.9,.3,1);
}
.loader__logo img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.loader__logo::before,
.loader__logo::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  z-index:0;
}
.loader__logo::before{
  background:conic-gradient(from 0deg, #8b5cf6, #ec4899, #10b981, #8b5cf6);
  animation:loader-ring 1.4s linear infinite;
}
.loader__logo::after{
  inset:2px;
  background:#0b0515;
  z-index:0;
}
@keyframes loader-ring{ to{ transform:rotate(360deg); } }
@keyframes loader-logo-pop{
  0%  { transform:scale(.4); opacity:0; }
  80% { transform:scale(1.1); }
  100%{ transform:scale(1); opacity:1; }
}
.loader__brand{
  color:#fff; font-size:1.1rem; font-weight:900;
  letter-spacing:.06em;
  opacity:0; animation:loader-fade-in .7s ease-out .4s forwards;
}
.loader__brand span{
  background:linear-gradient(90deg, #c084fc, #10b981);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.loader__bar{
  width:220px; height:3px;
  background:rgba(255,255,255,.06);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  opacity:0; animation:loader-fade-in .7s ease-out .5s forwards;
}
.loader__bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #8b5cf6, #ec4899, #10b981);
  border-radius:inherit;
  animation:loader-progress 2s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:left;
  transform:scaleX(0);
}
@keyframes loader-fade-in{ to{ opacity:1; } }
@keyframes loader-progress{
  0%  { transform:scaleX(0); }
  100%{ transform:scaleX(1); }
}

/* --- CONSTELLATION CANVAS BACKGROUND --- */
.constellation{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.constellation canvas{
  width:100%;
  height:100%;
  display:block;
}

/* --- LIVE TYPING cursor en mock phone --- */
.mock-msg--typing .mock-msg__title--typing::after{
  content:"|";
  margin-left:2px;
  animation:mock-caret .9s steps(1) infinite;
  color:#10b981;
  font-weight:400;
}
@keyframes mock-caret{ 50%{ opacity:0; } }
.mock-msg__title--typing{
  letter-spacing:0;
  color:#fff !important;
  filter:none !important;
}
.mock-msg__title--typing *{ filter:none !important; }

/* --- 3D PARALLAX MULTI-LAYER HERO --- */
.hero__inner{
  perspective:1200px;
  transform-style:preserve-3d;
}
.hero__right{
  transform-style:preserve-3d;
  will-change:transform;
}
.hero__right > *{
  transform-style:preserve-3d;
  will-change:transform;
}
.hero__photo{
  transform:rotate(-6deg) translateZ(80px);
}
.mock-phone{
  transform:translateZ(40px);
}
.hero__right[data-mouse-parallax] .hero__photo{
  transform:rotate(calc(-6deg + var(--px, 0) * 0.6deg)) translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px), 80px);
  transition:transform .25s ease-out;
}
.hero__right[data-mouse-parallax] .mock-phone{
  transform:translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -10px), 40px) rotateY(calc(var(--px, 0) * -2deg)) rotateX(calc(var(--py, 0) * 2deg));
  transition:transform .35s ease-out;
}

/* --- SECTION SCROLL-DRIVEN 3D ENTRANCES --- */
@supports (animation-timeline: view()) {
  .section-3d{
    animation:section-3d-in linear;
    animation-timeline:view();
    animation-range:entry 0% entry 60%;
  }
  @keyframes section-3d-in{
    from{
      opacity:0;
      transform:perspective(1000px) rotateX(6deg) translateY(40px);
    }
    to{
      opacity:1;
      transform:perspective(1000px) rotateX(0) translateY(0);
    }
  }
}

/* --- RAINBOW ANIMATED UNDERLINE en h2 --- */
.h2 .gradient-text,
.h2 .gradient-text-green{
  position:relative;
  background-size:200% 100%;
  animation:grad-slide 5s ease-in-out infinite;
}
@keyframes grad-slide{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
.h2 .gradient-text::after,
.h2 .gradient-text-green::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-4px;
  height:2px;
  background:linear-gradient(90deg, #8b5cf6, #ec4899, #10b981, #8b5cf6);
  background-size:300% 100%;
  border-radius:2px;
  animation:underline-pulse 3s linear infinite;
  opacity:.45;
}
@keyframes underline-pulse{
  0%  { background-position:0% 50%; }
  100%{ background-position:300% 50%; }
}

/* --- NUMBER MORPH transition --- */
.num-morph{
  display:inline-flex;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
}
.num-morph__digit{
  display:inline-block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}

/* --- ENHANCED CTA on click flash --- */
.btn--cta{
  position:relative;
  isolation:isolate;
}
.btn--cta:active{
  transform:scale(.97);
}
@keyframes cta-flash{
  0%  { box-shadow:0 0 0 0 rgba(139,92,246,.6), 0 8px 20px rgba(139,92,246,.4); }
  100%{ box-shadow:0 0 0 40px rgba(139,92,246,0), 0 8px 20px rgba(139,92,246,.4); }
}
.btn--cta.is-clicked{ animation:cta-flash .6s ease-out; }

/* --- HERO PHOTO HOVER LIFT 3D --- */
.hero__photo{ transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s; }
.hero__photo:hover{
  transform:rotate(-2deg) translateZ(120px) scale(1.06) !important;
  box-shadow:
    0 60px 100px -20px rgba(0,0,0,.9),
    0 0 0 6px rgba(255,255,255,.08),
    0 0 80px rgba(139,92,246,.5) !important;
}

/* --- SHINE PASS sobre cards al reveal --- */
.reveal.is-visible .bento__cell,
.reveal.is-visible .hiw-step,
.reveal.is-visible .obj-card{
  position:relative;
  overflow:hidden;
}

/* --- REDUCED MOTION: desactiva TODO lo pesado --- */
@media (prefers-reduced-motion: reduce){
  .constellation,
  .loader{ display:none !important; }
  .hero__right[data-mouse-parallax] .hero__photo,
  .hero__right[data-mouse-parallax] .mock-phone{
    transform:none !important;
    transition:none !important;
  }
}

/* --- KEY MOMENT: section heading con numero gigante de fondo --- */
.ghost-num{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(10rem, 30vw, 22rem);
  font-weight:900;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(192,132,252,.06);
  pointer-events:none;
  z-index:0;
  font-family:'Space Grotesk', sans-serif;
  user-select:none;
}

/* Mejora scrollbar: más dramática */
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #8b5cf6 0%, #ec4899 33%, #f59e0b 66%, #10b981 100%);
  background-size:100% 200%;
  animation:scroll-rainbow 6s linear infinite;
}
@keyframes scroll-rainbow{
  0%  { background-position:0% 0%; }
  100%{ background-position:0% 200%; }
}

/* ==============================================================
   BOOST v9 — FINAL POLISH
   Mouse aura · Slot-machine digits · Hero word-split ·
   Text wave hover · Euro bills · Nav island · Brush highlight ·
   Jelly CTAs · Section dividers
   ============================================================== */

/* --- MOUSE AURA (blob gigante que sigue cursor) --- */
.m-aura{
  position:fixed;
  top:0; left:0;
  z-index:-1;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.22) 0%, rgba(236,72,153,.09) 40%, transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  opacity:0;
  transition:opacity .6s;
  mix-blend-mode:screen;
  will-change:transform;
}
body.m-aura-on .m-aura{ opacity:1; }
@media (hover:none){ .m-aura{ display:none; } }

/* --- SLOT MACHINE DIGIT ANIMATION --- */
.slot{
  display:inline-flex;
  vertical-align:baseline;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.slot__digit{
  display:inline-block;
  height:1em;
  overflow:hidden;
  position:relative;
  min-width:.55em;
  text-align:center;
}
.slot__digit__track{
  display:flex;
  flex-direction:column;
  transition:transform .8s cubic-bezier(.2,1.2,.3,1);
}
.slot__digit__track > span{
  display:block;
  height:1em;
  line-height:1;
}
.slot__sep{
  display:inline-block;
  min-width:.25em;
  text-align:center;
}

/* --- HERO HEADLINE WORD-SPLIT ENTRANCE --- */
.hero__title .hw{
  display:inline-block;
  opacity:0;
  transform:translateY(28px) rotateX(-20deg);
  transform-origin:bottom;
  transition:opacity .6s cubic-bezier(.2,.9,.3,1), transform .7s cubic-bezier(.2,.9,.3,1);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.hero__title.is-mounted .hw{
  opacity:1;
  transform:translateY(0) rotateX(0);
}

/* --- TEXT WAVE on h2 hover --- */
.h2 .tw-letter{
  display:inline-block;
  transition:transform .3s cubic-bezier(.3, 1.5, .4, 1);
}
.h2:hover .tw-letter{
  animation:tw-wave .7s ease-in-out;
  animation-delay:calc(var(--li, 0) * 30ms);
}
@keyframes tw-wave{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

/* --- EURO BILL falling particles (canvas overlay existente, añadimos variante billete) --- */
/* sin CSS específico — se dibuja en canvas */

/* --- NAV ISLAND (shrink on scroll, Apple-style) --- */
.nav{
  transition:padding .4s cubic-bezier(.2,.9,.3,1), backdrop-filter .4s, background .4s;
  padding-top:16px; padding-bottom:16px;
}
.nav.is-island{
  padding-top:8px; padding-bottom:8px;
  backdrop-filter:blur(20px);
  background:rgba(10,5,22,.7);
}
.nav.is-island .nav__inner{
  transition:max-width .4s cubic-bezier(.2,.9,.3,1), border-radius .4s;
  max-width:960px;
  margin:0 auto;
  padding:8px 22px;
  background:rgba(20,12,35,.55);
  border:1px solid rgba(192,132,252,.18);
  border-radius:100px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);
}

/* --- HERO SUBTITLE brush highlight --- */
.hero__sub{
  position:relative;
}
.hero__sub b{
  position:relative;
  display:inline-block;
  z-index:1;
  color:#fff !important;
}
.hero__sub b::before{
  content:"";
  position:absolute;
  inset:-2px -4px;
  background:linear-gradient(120deg, rgba(139,92,246,.3), rgba(16,185,129,.2));
  border-radius:4px;
  transform:scaleX(0);
  transform-origin:left;
  z-index:-1;
  animation:brush-in 1.2s cubic-bezier(.6, 0, .2, 1) .8s forwards;
}
@keyframes brush-in{ to{ transform:scaleX(1); } }

/* --- GELATIN WOBBLE en CTAs al hover --- */
.btn--cta.btn--lg,
.btn--cta.btn--xl{
  transition:transform .25s cubic-bezier(.3, 1.5, .6, 1), box-shadow .2s, filter .2s;
}
.btn--cta.btn--lg:hover,
.btn--cta.btn--xl:hover{
  animation:jelly .5s ease-out;
}
@keyframes jelly{
  0%  { transform:scale(1,1); }
  30% { transform:scale(1.08,.92); }
  50% { transform:scale(.95,1.05); }
  70% { transform:scale(1.03,.97); }
  100%{ transform:scale(1,1); }
}

/* --- SECTION SVG DIVIDER — onda morada fina entre secciones importantes --- */
.section-divider{
  position:relative;
  height:48px;
  margin:-1px 0;
  overflow:hidden;
  pointer-events:none;
}
.section-divider svg{
  position:absolute;
  left:0; right:0; bottom:0;
  width:120%; height:100%;
  transform:translateX(-10%);
}
.section-divider path{
  fill:none;
  stroke:url(#divGrad);
  stroke-width:2;
  opacity:.35;
}

/* --- GRADIENT TEXT con sheen que pasa --- */
.gradient-text,
.gradient-text-green{
  position:relative;
  isolation:isolate;
}

/* --- TILT ENHANCED: shine mejorado que sigue cursor --- */
.tilt__shine{
  background:radial-gradient(circle 400px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 50%);
  mix-blend-mode:overlay;
}

/* --- HERO Phone con sheen reflection cada 6s --- */
.mock-phone__screen{
  position:relative;
  overflow:hidden;
}
.mock-phone__screen::after{
  content:"";
  position:absolute;
  top:0; left:-150%;
  width:80%; height:200%;
  background:linear-gradient(100deg, transparent 30%, rgba(192,132,252,.12) 50%, transparent 70%);
  transform:rotate(-12deg);
  animation:phone-sheen 8s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes phone-sheen{
  0%   { left:-150%; }
  25%,100%{ left:150%; }
}

/* --- CURSOR MAGNETIC ZONES (items con data-magnet se "aspiran" al cursor) --- */
[data-magnet]{
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
  will-change:transform;
}

/* --- BUTTONS CTA con arrow que salta --- */
.btn__arrow{
  display:inline-block;
  transition:transform .3s cubic-bezier(.2,1.4,.6,1);
}
.btn--cta:hover .btn__arrow{
  transform:translateX(6px);
}

/* --- SECTION BADGES motion --- */
.eyebrow{
  position:relative;
  padding-left:26px;
}
.eyebrow::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:16px; height:2px;
  background:linear-gradient(90deg, #8b5cf6, transparent);
  transform:translateY(-50%);
}
.eyebrow::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:#c084fc;
  transform:translate(-1px, -50%);
  animation:eyebrow-pulse 2.5s ease-in-out infinite;
  box-shadow:0 0 8px #c084fc;
}
@keyframes eyebrow-pulse{
  0%,100%{ opacity:1; transform:translate(-1px,-50%) scale(1); }
  50%    { opacity:.3; transform:translate(-1px,-50%) scale(1.6); }
}

/* --- REDUCED MOTION overrides --- */
@media (prefers-reduced-motion: reduce){
  .m-aura{ display:none !important; }
  .hero__title .hw{ opacity:1 !important; transform:none !important; }
  .hero__sub b::before{ transform:scaleX(1) !important; animation:none !important; }
  .mock-phone__screen::after{ animation:none !important; }
}

/* =====================
   MOBILE SAFE — desactiva cosas pesadas en moviles <720px
   (aurora, dot-grid, noise, mouse aura, canvas constelacion)
   para que el HTML standalone cargue rapido en movil
   ===================== */
@media (max-width: 720px){
  .aurora,
  .constellation,
  .m-aura,
  .dot-grid,
  .noise,
  .pkg-field,
  .cursor-dot,
  .cursor-trail,
  .spotlight{
    display:none !important;
  }
  body.has-custom-cursor,
  body.has-custom-cursor *{ cursor:auto !important; }
  /* Menos blur y efectos pesados en movil */
  .aurora::before,
  .aurora::after,
  .aurora__c{ display:none !important; }
}

/* =====================
   MOBILE DEFENSIVE — fuerza visibilidad + renderizado correcto en <=720px
   Evita que animaciones sin terminar dejen palabras invisibles
   ===================== */
@media (max-width: 720px){
  /* Palabras del hero NO pueden quedar ocultas por animation no terminada */
  .hero__title .hw,
  .text-reveal .tr-word,
  .h2 .tw-letter{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    display:inline !important;
  }
  .hero__title,
  .h1,
  .h2,
  .h2 *,
  .hero__title *{
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    hyphens:manual !important;
    -webkit-hyphens:manual !important;
  }
  /* Gradient text sin animacion en movil — evita parpadeo en Safari */
  .gradient-text,
  .gradient-text-green,
  .hero__title .gradient-text,
  .hero__title .gradient-text-green{
    animation:none !important;
    background-size:100% 100% !important;
  }
  /* Typewriter: mostrar la palabra entera sin animar */
  .typewriter::after{ display:none !important; }

  /* Side nav oculto (muchos dots a la derecha en movil interfieren) */
  .side-nav{ display:none !important; }

  /* Scroll progress bar mas visible pero sin glow que pete CPU */
  .scroll-progress{ height:2px; box-shadow:none !important; }

  /* Gradient underline de h2 quitado — puede no renderizar en Safari con line-break */
  .h2 .gradient-text::after,
  .h2 .gradient-text-green::after{ display:none !important; }

  /* Logo sin anillo animado (ahorra GPU) */
  .logo__mark::after{ animation:none !important; opacity:.4; }

  /* Polaroid sin sway + sin halo blur pesado */
  .hero__photo{ animation:none !important; }
  .hero__photo::after{ display:none !important; }

  /* Botones: sin jelly hover (en movil no hay hover) */
  .btn--cta.btn--lg:hover,
  .btn--cta.btn--xl:hover{ animation:none !important; }

  /* Ghost numbers gigantes detras de secciones: ocultar */
  .ghost-num{ display:none !important; }

  /* Loader fuente tamaño — asegurar fit */
  .loader__brand{ font-size:1rem; }
}

/* =====================
   EXTRA: font-display swap para no ocultar texto
   ===================== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }

/* ==============================================================
   MOBILE PERFORMANCE v2 — fluidez máxima, todo optimizado
   ============================================================== */

/* Skip rendering de secciones off-screen hasta que sean visibles
   Enorme ahorro de CPU en móviles mientras se scrollea. */
@supports (content-visibility: auto) {
  section,
  .section,
  .buyer-ticker,
  .sales-feed,
  footer{
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
}

/* Touch: smooth scroll nativo + mejor inercia iOS */
html{
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* iPhone safe-area (notch/home indicator) */
body{
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta{
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.scarcity-bar{
  padding-top: calc(8px + env(safe-area-inset-top));
}

/* Touch targets >= 44px (guidelines Apple/Google) */
.btn,
.side-nav__dot,
.cb-foot__send,
.wa-voice__play,
.price-toggle__btn,
.ck-banner button,
.cb-quick__chip{
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* =====================
   MOBILE <=720px — TODO optimizado para fluidez
   ===================== */
@media (max-width: 720px){
  /* ---- Rendering: quitar TODO lo caro ---- */
  *{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform-style: flat !important;
  }
  .aurora,
  .constellation,
  .m-aura,
  .dot-grid,
  .noise,
  .pkg-field,
  .cursor-dot,
  .cursor-trail,
  .spotlight,
  .side-nav,
  .ghost-num{ display:none !important; }

  /* Sin animaciones 3D costosas */
  [data-tilt],
  .tilt,
  .hero__photo,
  .mock-phone,
  .bento__cell{
    transform: none !important;
    will-change: auto !important;
  }

  /* Glows / shadows reducidos (mucho más rápido) */
  .btn--cta{ box-shadow: 0 8px 20px rgba(139,92,246,.3) !important; }
  .bento__cell,
  .hiw-step,
  .obj-card,
  .stat-card,
  .eco-card,
  .bonus__card,
  .cta-mid__card,
  .pricing__card,
  .lb{
    box-shadow: 0 8px 20px rgba(0,0,0,.3) !important;
  }

  /* Menos blur en elementos con filtro */
  .hero__bg .blob{ filter:blur(40px) !important; }

  /* ---- Layout compacto ---- */
  .section{ padding: 44px 0 !important; }
  .container{ padding-left:18px; padding-right:18px; }

  /* Typography ajustada */
  .h2{ font-size: clamp(1.35rem, 5.6vw, 1.9rem) !important; line-height:1.22; }
  .hero__title{ font-size: clamp(1.65rem, 6.8vw, 2.3rem) !important; line-height:1.2; }
  body{ font-size: 15px; }
  .hero__sub{ font-size:1rem; }

  /* ROI 1 columna */
  .roi__inner{ grid-template-columns: 1fr !important; gap:18px; }
  .roi{ padding:28px 22px !important; }
  .roi__amount{ font-size:2.4rem; }

  /* Bento 1 columna se aplica en bloque separado fuera */

  /* WA chats scroll horizontal (swipe) en móvil */
  .wa-chats{
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 18px 14px;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .wa-chats::-webkit-scrollbar{ display:none; }
  .wa-chat{
    flex: 0 0 88%;
    scroll-snap-align: start;
  }

  /* Lead form stacked */
  .lead{ padding: 28px 20px !important; }
  .lead__inner{ grid-template-columns: 1fr !important; gap:22px; }

  /* Pricing: margen menor + toggle centrado */
  .pricing__card{ padding: 28px 20px !important; }
  .price-toggle{ margin-bottom: 18px; }

  /* Leaderboard más compacto */
  .lb{ padding: 20px 16px !important; }
  .lb__row{ gap: 8px; padding: 9px 10px; }
  .lb__name small{ display:none; } /* subtitulo oculto para ahorrar espacio */

  /* How it works 1 col sin connectors */
  .hiw{ grid-template-columns: 1fr !important; }
  .hiw-step::after{ display:none !important; }

  /* Objections 1 col */
  .obj-grid{ grid-template-columns: 1fr !important; }
  .obj-card__hint{ display:none; } /* "pasa el cursor" no tiene sentido en móvil */
  .obj-card .obj-card__a{ opacity: 1 !important; color:#e7e3f1 !important; }

  /* Money lost más compacto */
  .money-lost{ padding: 32px 22px !important; }
  .money-lost__amount{ font-size: clamp(2.4rem, 12vw, 4rem) !important; }

  /* Community total más compacto */
  .com-total{ padding: 34px 20px !important; }

  /* Trust logos wrap mejor */
  .trust{ padding: 18px 10px; gap: 12px 14px; }
  .trust__logo{ font-size: .7rem; padding: 5px 9px; }

  /* Before/After más alto para touch */
  .ba{ aspect-ratio: 4/5 !important; }
  .ba__num{ font-size: clamp(2rem, 9vw, 3rem); }

  /* Cookie banner: más pequeño y abajo centrado */
  .ck-banner{
    left: 10px; right: 10px; bottom: 80px;
    max-width: unset; padding: 12px 14px;
    font-size: 12.5px;
  }

  /* Chatbot FAB: más pequeño y con safe-area */
  .cb-fab{
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: 14px;
    width: 52px; height: 52px;
  }
  .cb-fab svg{ width: 20px; height: 20px; }
  .cb-win{
    bottom: calc(80px + env(safe-area-inset-bottom));
    right: 10px; left: 10px;
    width: auto;
    height: calc(100vh - 110px - env(safe-area-inset-bottom));
  }

  /* Sticky CTA: más visible y ancho completo */
  .sticky-cta{
    left: 10px; right: 10px; bottom: 10px;
    width: auto;
  }

  /* Hero tape ticker: más lento (ocupa menos CPU) */
  .tape{ animation-duration: 40s !important; }
  .buyer-ticker__inner{ animation-duration: 240s !important; }
  .sales-feed__track{ animation-duration: 80s !important; }

  /* Input / select: tamaños mínimos iOS (evita zoom al focus) */
  input[type="email"],
  input[type="text"],
  textarea{
    font-size: 16px !important; /* iOS no hará zoom si es >=16px */
  }

  /* Stat cards stack */
  .stats-row{ grid-template-columns: 1fr !important; }
}

/* =====================
   MOBILE <=420px — ultra compacto
   ===================== */
@media (max-width: 420px){
  .hero__title{ font-size: 1.8rem !important; }
  .pricing__amount{ font-size: 3.4rem !important; }
  .roi__amount{ font-size: 2rem !important; }
  .section__sub{ font-size: .95rem; }
}

/* Bento 1 columna en pantallas ultra pequeñas (extraído del @media anidado) */
@media (max-width: 480px){
  .bento{ grid-template-columns: 1fr !important; }
  .bento__cell,
  .bento__cell--wide,
  .bento__cell--hero,
  .bento__cell--tall{
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}

/* ========================================================
   IPHONE WHATSAPP CHAT — look exacto de capturas reales
   ======================================================== */
.ip-chats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
  max-width:1200px;
  margin:0 auto;
  padding:0 10px;
}
.ip-chat{
  position:relative;
  max-width:360px;
  margin:0 auto;
  width:100%;
  background:#000;
  border-radius:42px;
  overflow:hidden;
  padding:0;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 10px #1a1a1e,
    0 0 0 11px #2a2a30;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column;
  /* fondo tropical palm — gradient evocativo */
  background:
    radial-gradient(ellipse at 70% 30%, rgba(18,58,36,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(14,42,28,.45) 0%, transparent 60%),
    linear-gradient(180deg, #0a1510 0%, #081510 40%, #05100c 100%);
}
.ip-chat::before{
  /* hojas palmera sutiles */
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(10,80,40,.25), transparent 30%),
    radial-gradient(circle at 20% 75%, rgba(14,70,40,.2), transparent 28%);
  pointer-events:none;
  z-index:0;
}
.ip-chat > *{ position:relative; z-index:1; }
.ip-chat__status{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 22px 6px;
  font-size:13px; font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}
.ip-chat__clock{ font-variant-numeric:tabular-nums; font-weight:600; }
.ip-chat__signal{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.04em;
}
.ip-chat__battery{
  display:inline-block; width:22px; height:11px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:3px;
  position:relative;
  background:linear-gradient(90deg, #30d158 75%, transparent 75%);
}
.ip-chat__battery::after{
  content:""; position:absolute; right:-3px; top:3px;
  width:2px; height:5px; background:rgba(255,255,255,.6); border-radius:0 1px 1px 0;
}

/* Topbar WhatsApp */
.ip-chat__topbar{
  display:flex; align-items:center; gap:10px;
  padding:6px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.3);
}
.ip-chat__back{
  width:20px; height:20px; display:inline-flex; flex-shrink:0;
}
.ip-chat__back svg{ width:100%; height:100%; }
.ip-chat__av{
  width:38px; height:38px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:#222;
}
.ip-chat__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.ip-chat__who{ flex:1; min-width:0; line-height:1.2; }
.ip-chat__who b{ display:block; font-weight:700; font-size:16px; color:#fff; }
.ip-chat__who small{ color:rgba(255,255,255,.55); font-size:12px; font-weight:400; }
.ip-chat__icon{
  width:22px; height:22px; display:inline-flex; flex-shrink:0;
  opacity:.9;
}
.ip-chat__icon svg{ width:100%; height:100%; }

/* Body — la conversacion */
.ip-chat__body{
  flex:1;
  padding:16px 12px 10px;
  display:flex; flex-direction:column; gap:4px;
  min-height:360px;
}
.ip-msg{
  max-width:78%;
  padding:8px 12px 10px;
  border-radius:16px;
  font-size:14.5px;
  line-height:1.35;
  position:relative;
  color:#fff;
  word-wrap:break-word;
  overflow-wrap:break-word;
  margin-bottom:2px;
}
.ip-msg b{ font-weight:700; color:#c084fc; }
.ip-msg--in{
  align-self:flex-start;
  background:rgba(38,40,44,.92);
  border-bottom-left-radius:4px;
}
.ip-msg--out{
  align-self:flex-end;
  background:linear-gradient(180deg, #1a5c3c 0%, #145a37 100%);
  border-bottom-right-radius:4px;
}
.ip-msg--out b{ color:#a7f3d0; }
.ip-msg__time{
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  color:rgba(255,255,255,.45);
  font-weight:400;
  white-space:nowrap;
  float:right;
  margin-top:4px;
  transform:translateY(3px);
}
.ip-msg--out .ip-msg__time{ color:rgba(200,240,220,.7); }
.ip-check{ color:#53bdeb; font-weight:700; margin-left:3px; letter-spacing:-1px; }

/* Sold card estilo Vinted dentro del chat */
.ip-sold{
  align-self:flex-start;
  max-width:86%;
  background:rgba(18,22,26,.95);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  position:relative;
  margin:4px 0 6px;
}
.ip-sold__thumb{
  width:82px; height:82px;
  border-radius:8px;
  overflow:hidden;
  background:#000;
}
.ip-sold__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ip-sold__body{
  display:flex; flex-direction:column; gap:4px;
  min-width:0; justify-content:center;
  position:relative;
}
.ip-sold__badge{
  position:absolute; top:-4px; right:0;
  background:#10b981; color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:4px 8px; border-radius:6px;
}
.ip-sold__brand{
  color:#09b1ba; font-size:13px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
}
.ip-sold__name{
  color:#fff; font-size:14px; font-weight:700;
  line-height:1.25;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.ip-sold__price{
  display:flex; align-items:baseline; gap:8px; margin-top:2px;
}
.ip-sold__price b{
  color:#c084fc;
  font-size:15px; font-weight:800;
}
.ip-sold__price small{
  color:rgba(255,255,255,.4);
  font-size:12px;
  text-decoration:line-through;
}
.ip-sold__time{
  position:absolute; right:10px; bottom:6px;
  font-size:11px; color:rgba(255,255,255,.4);
}

/* Input bar iOS */
.ip-chat__input{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 8px;
  background:rgba(0,0,0,.55);
  border-top:1px solid rgba(255,255,255,.06);
}
.ip-chat__plus,
.ip-chat__iicon{
  width:22px; height:22px; display:inline-flex; flex-shrink:0;
  opacity:.85;
}
.ip-chat__plus svg,
.ip-chat__iicon svg{ width:100%; height:100%; }
.ip-chat__field{
  flex:1; height:30px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
}
.ip-chat__home{
  height:8px;
  display:flex; justify-content:center; align-items:center;
  padding-bottom:8px;
  background:rgba(0,0,0,.55);
}
.ip-chat__home::after{
  content:"";
  width:120px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.55);
}

/* En móvil muy estrecho, reducir padding */
@media (max-width:420px){
  .ip-chat{ border-radius:34px; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 7px #1a1a1e, 0 0 0 8px #2a2a30; }
  .ip-msg{ font-size:14px; }
}

/* Sales tile photos */
.sales-tile__ico--photo{
  overflow:hidden; padding:0;
}
.sales-tile__ico--photo img{
  width:100%; height:100%; object-fit:cover;
  border-radius:inherit; display:block;
}

/* ========================================================
   IPHONE SHOTS — capturas reales de WhatsApp como testimonios
   ======================================================== */
.ip-shots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
  max-width:1100px;
  margin:0 auto;
  padding:0 10px;
  justify-items:center;
}
.ip-shot{
  margin:0;
  max-width:340px;
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:transform .4s cubic-bezier(.2,.9,.3,1);
}
.ip-shot:hover{
  transform:translateY(-6px);
}
.ip-shot img{
  width:100%;
  max-width:320px;
  height:auto;
  border-radius:40px;
  display:block;
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 0 8px #1a1a1e,
    0 0 0 9px #2a2a30,
    0 0 50px rgba(139,92,246,.15);
}
.ip-shot figcaption{
  font-size:13px; color:rgba(255,255,255,.65);
  text-align:center;
  letter-spacing:.02em;
}
.ip-shot figcaption b{ color:#c084fc; font-weight:800; }

@media (max-width:420px){
  .ip-shot img{
    border-radius:32px;
    box-shadow:
      0 18px 40px rgba(0,0,0,.5),
      0 0 0 6px #1a1a1e,
      0 0 0 7px #2a2a30;
  }
}