:root{
  --white:#fff; --paper:#FAFAFB; --wash:#F6F5FA;
  --ink:#0B0B0F; --ink-2:#2B2B34; --muted:#6E6E7E; --faint:#A7A7B4;
  --line:#ECECF1; --line-2:#E2E2EA;
  --violet:#7C3AED; --violet-deep:#5B21B6; --violet-wash:#F4F1FE; --violet-line:#E4DBFB;
  --green:#25D366;
  --gold:#F5B300; --gold-2:#FFC53D;
  --serif:'Playfair Display', 'Playfair Fallback', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans:'Inter', 'Inter Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --r:18px; --r-lg:28px;
  --shadow-s:0 2px 8px rgba(16,12,40,.04), 0 12px 32px -12px rgba(16,12,40,.10);
  --shadow-m:0 4px 14px rgba(16,12,40,.05), 0 28px 60px -24px rgba(16,12,40,.16);
  --shadow-v:0 12px 34px -10px rgba(124,58,237,.42);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
[id]{scroll-margin-top:96px}
@media(max-width:760px){html{scroll-padding-top:76px} [id]{scroll-margin-top:76px}}
html,body{overflow-x:hidden}
body{
  background:var(--white); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:17px; line-height:1.6; overflow-x:hidden;
}
::selection{background:var(--violet); color:#fff}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px}
section{position:relative}
.sec{padding:clamp(96px,11vw,168px) 0}
.sec--tight{padding:clamp(72px,8vw,112px) 0}
.hr{height:1px; background:var(--line); border:0}

/* ---------- tipografía ---------- */
.display{font-family:var(--serif); font-weight:900; letter-spacing:-.02em; line-height:1.02; color:var(--ink)}
.display em{font-style:italic; font-weight:700; color:var(--violet); letter-spacing:-.01em}
h1.display{font-size:clamp(3rem,6.4vw,5.6rem)}
h2.display{font-size:clamp(2.3rem,4.4vw,3.9rem)}
h3{font-family:var(--sans); font-weight:800; letter-spacing:-.01em}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--violet);
  background:var(--violet-wash); border:1px solid var(--violet-line);
  padding:9px 16px; border-radius:100px;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--violet)}
.eyebrow--plain{background:transparent; border-color:transparent; padding:0; color:var(--faint)}
.lede{font-size:clamp(1.05rem,1.35vw,1.22rem); color:var(--muted); max-width:52ch; line-height:1.62}
.kicker{font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.98rem; font-weight:700; letter-spacing:-.01em;
  padding:17px 30px; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn-primary{background:var(--violet); color:#fff; box-shadow:var(--shadow-v)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 44px -10px rgba(124,58,237,.55); background:#6D28D9}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-s)}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--ink); box-shadow:var(--shadow-m)}
.btn-sm{padding:12px 22px; font-size:.88rem}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}


/* ---------- botón instagram ---------- */
.btn-ig{position:relative; background:#fff; color:var(--ink); border:1.5px solid var(--line-2); box-shadow:var(--shadow-s); overflow:hidden}
.btn-ig svg{width:19px; height:19px; flex:0 0 auto; transition:transform .4s var(--ease)}
.btn-ig::before{
  content:''; position:absolute; inset:0; border-radius:100px; padding:1.5px;
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s var(--ease);
}
.btn-ig:hover{transform:translateY(-2px); box-shadow:var(--shadow-m); border-color:transparent}
.btn-ig:hover::before{opacity:1}
.btn-ig:hover svg{transform:scale(1.06)}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent; transition:border-color .4s, background .4s;
}
nav.scrolled{border-bottom-color:var(--line); background:rgba(255,255,255,.86)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:32px; height:76px}
.logo{font-family:var(--serif); font-weight:900; font-size:1.45rem; letter-spacing:-.02em; display:flex; align-items:center}
.logo .ya{color:var(--violet)}
.logo .tm{font-family:var(--sans); font-size:.55rem; font-weight:700; color:var(--faint); margin-left:3px; align-self:flex-start; margin-top:6px}
.logo .arrow{width:11px; height:14px; margin-right:8px; fill:var(--violet)}
nav ul{display:flex; gap:30px; list-style:none}
nav ul a{font-size:.9rem; font-weight:500; color:var(--muted); transition:color .25s; position:relative}
nav ul a::after{content:''; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--ink); transition:width .35s var(--ease)}
nav ul a:hover{color:var(--ink)} nav ul a:hover::after{width:100%}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.3s}

/* ---------- hero ---------- */
.hero{padding:180px 0 clamp(80px,9vw,130px); position:relative; overflow:hidden}
.hero-ghost{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-weight:900; font-size:clamp(9rem,20vw,20rem);
  color:#F4F3F8; letter-spacing:-.04em; line-height:1; user-select:none; pointer-events:none; z-index:0;
  white-space:nowrap;
}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.hero h1{margin:26px 0 22px}
.hero-cta{display:flex; gap:14px; margin:34px 0 0; flex-wrap:wrap}
.hero-meta{display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap}
.avatars{display:flex}
.avatars span{
  width:34px; height:34px; border-radius:50%; border:2px solid #fff; margin-left:-10px;
  display:grid; place-items:center; font-size:.72rem; font-weight:800; color:#fff;
  background:linear-gradient(140deg,#8B5CF6,#6D28D9); box-shadow:var(--shadow-s);
}
.avatars span:first-child{margin-left:0}
.hero-meta small{font-size:.84rem; color:var(--muted); line-height:1.4; display:block}
.hero-meta b{color:var(--ink); font-weight:700}
.stars{color:var(--gold); letter-spacing:2px; font-size:.86rem; text-shadow:0 1px 2px rgba(180,120,0,.18)}

/* chat mock */
.mock{
  position:relative; border:1.5px dashed var(--line-2); border-radius:var(--r-lg);
  padding:38px; background:linear-gradient(180deg,#FDFDFE,#F7F6FB);
}
.mock::before{
  content:''; position:absolute; inset:-40px; z-index:-1;
  background:radial-gradient(closest-side, rgba(124,58,237,.10), transparent 70%);
  filter:blur(10px);
}
.phone{
  width:100%; max-width:310px; margin:0 auto; background:#0C0C10; border-radius:26px;
  padding:16px 14px 14px; box-shadow:0 30px 60px -22px rgba(12,10,30,.45), 0 2px 0 rgba(255,255,255,.06) inset;
}
.notch{width:74px; height:5px; border-radius:6px; background:#2C2C36; margin:0 auto 14px}
.bub{border-radius:13px; padding:10px 13px; font-size:.83rem; line-height:1.45; margin-bottom:9px; max-width:84%}
.bub.meta{background:#1B1B22; color:#7E7E90; font-weight:600; font-size:.72rem; display:inline-block}
.bub.in{background:#1B1B22; color:#E6E6F0}
.bub.out{background:var(--violet); color:#fff; margin-left:auto; box-shadow:0 8px 20px -8px rgba(124,58,237,.7)}
.bub.hide{opacity:0; transform:translateY(6px)}
.bub.show{animation:bubIn .5s var(--ease) forwards}
@keyframes bubIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.typing{display:flex; gap:4px; padding:11px 13px; background:#1B1B22; border-radius:13px; width:fit-content}
.typing i{width:5px; height:5px; border-radius:50%; background:#6E6E80; animation:tp 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.35; transform:none}30%{opacity:1; transform:translateY(-3px)}}
.wa-chip{
  margin-top:6px; background:var(--green); color:#fff; font-size:.78rem; font-weight:700;
  text-align:center; padding:10px; border-radius:11px;
}
.mock-foot{display:flex; justify-content:space-between; margin-top:26px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.spark{position:absolute; left:26px; top:120px; width:58px; height:58px; border-radius:50%; background:var(--violet-wash); display:grid; place-items:center}
.spark svg{width:22px; height:22px; fill:var(--violet)}

/* ---------- casos ---------- */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:60px}
.case-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.case:hover .case-card{transform:translateY(-6px); box-shadow:var(--shadow-m)}
.chip{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet); background:var(--violet-wash); border:1px solid var(--violet-line);
  padding:7px 14px; border-radius:100px; margin-bottom:20px;
}
.browser{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-s); background:#fff; margin-bottom:16px;
}
.browser .bar{height:28px; background:#F7F7FA; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; padding:0 12px}
.browser .bar i{width:7px; height:7px; border-radius:50%; background:#E1E1E8; display:block}
.browser .shot{aspect-ratio:16/7.4; overflow:hidden}
.browser .shot img{width:100%; height:100%; object-fit:cover; object-position:top}
.case h3{margin-top:22px; font-size:1.1rem}
.case p{font-size:.85rem; color:var(--muted); margin-top:5px}

/* ---------- sistema (un solo servicio) ---------- */
.system{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.system-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start}
.pack{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:8px;
  box-shadow:var(--shadow-m);
}
.pack-head{
  background:var(--ink); color:#fff; border-radius:22px; padding:26px 30px;
  display:flex; justify-content:space-between; align-items:center;
}
.pack-head .t{font-family:var(--serif); font-weight:900; font-size:1.5rem; letter-spacing:-.01em}
.pack-head .t sup{font-family:var(--sans); font-size:.5rem; vertical-align:super; opacity:.6}
.pack-head .s{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#8E8EA0; margin-top:4px}
.pack-head .badge{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:8px 13px; border-radius:100px; text-transform:uppercase}
.pack ul{list-style:none; padding:14px 8px 6px}
.pack li{display:flex; align-items:center; gap:14px; padding:15px 22px; border-bottom:1px solid var(--line); font-weight:600; font-size:.98rem; color:var(--ink-2)}
.pack li:last-child{border-bottom:0}
.pack li .ck{width:24px; height:24px; border-radius:50%; background:var(--violet-wash); display:grid; place-items:center; flex:0 0 auto}
.pack li .ck svg{width:11px; height:11px; stroke:var(--violet); stroke-width:2.6; fill:none}
.pack-foot{padding:20px 26px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.pack-foot .one{font-size:.8rem; color:var(--muted)}
.pack-foot .one b{color:var(--ink)}

/* ---------- flujo IA ---------- */
/* ---------- flujo de 5 etapas ---------- */
.flow{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:64px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-s);
}
.fl-step{
  position:relative; padding:34px 24px 32px; border-right:1px solid var(--line);
  transition:background .45s var(--ease);
}
.fl-step:last-child{border-right:0}
.fl-step:nth-child(even){background:var(--paper)}
.fl-i{
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px; margin-bottom:20px;
  background:linear-gradient(150deg, rgba(124,58,237,.22), rgba(124,58,237,.08));
  border:1px solid var(--violet-line);
  transition:transform .55s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.fl-i svg{
  width:25px; height:25px; fill:none; stroke:var(--violet-deep);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.fl-i svg .acc{stroke:var(--violet); stroke-width:2}
.fl-step.on .fl-i,
.fl-step:hover .fl-i{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(150deg,var(--violet),var(--violet-deep));
  box-shadow:0 14px 28px -14px rgba(124,58,237,.95);
}
.fl-step.on .fl-i svg,
.fl-step:hover .fl-i svg{stroke:#fff}
.fl-step.on .fl-i svg .acc,
.fl-step:hover .fl-i svg .acc{stroke:#E3D5FF}
.flow .n{font-size:.7rem; font-weight:800; letter-spacing:.16em; color:var(--violet); margin-bottom:10px}
.flow h4{font-size:1.02rem; font-weight:800; letter-spacing:-.01em; margin-bottom:6px}
.flow p{font-size:.86rem; color:var(--muted); line-height:1.5}
/* la flecha que conecta una etapa con la siguiente */
.fl-step:not(:last-child)::after{
  content:''; position:absolute; top:47px; right:-7px; z-index:2;
  width:13px; height:13px; border-top:1.6px solid var(--violet-line); border-right:1.6px solid var(--violet-line);
  transform:rotate(45deg); background:transparent;
}

/* entrada escalonada al aparecer */
.flow.in .fl-step{animation:flIn .95s var(--ease) both}
.flow.in .fl-step:nth-child(1){animation-delay:.05s}
.flow.in .fl-step:nth-child(2){animation-delay:.14s}
.flow.in .fl-step:nth-child(3){animation-delay:.23s}
.flow.in .fl-step:nth-child(4){animation-delay:.32s}
.flow.in .fl-step:nth-child(5){animation-delay:.41s}
@keyframes flIn{from{opacity:0; transform:translateY(32px)}to{opacity:1; transform:none}}

/* --- celular: línea de tiempo vertical compacta --- */
@media(max-width:820px){
  .flow{
    grid-template-columns:1fr; margin-top:40px; border-radius:22px;
    padding:6px 4px; background:#fff;
  }
  .fl-step{
    display:grid; grid-template-columns:44px 1fr; align-items:start; gap:14px;
    padding:14px 16px; border-right:0; background:transparent !important;
  }
  .fl-i{width:38px; height:38px; border-radius:12px; margin:0}
  .fl-i svg{width:21px; height:21px}
  .fl-body{padding-top:1px}
  .flow .n{display:inline-block; font-size:.6rem; letter-spacing:.14em; margin:0 0 3px}
  .flow h4{font-size:1rem; margin-bottom:2px}
  .flow p{font-size:.85rem; line-height:1.45}
  /* el hilo que une las etapas */
  .fl-step:not(:last-child)::after{
    content:''; position:absolute; top:56px; bottom:-2px; left:37px; right:auto;
    width:2px; height:auto; border:0; transform:none; border-radius:2px;
    background:linear-gradient(180deg,var(--violet-line),rgba(124,58,237,.08));
  }
  .fl-step:hover .fl-i{transform:none}
}
@media(max-width:380px){
  .fl-step{grid-template-columns:38px 1fr; gap:12px; padding:12px 12px}
  .fl-i{width:34px; height:34px; border-radius:11px}
  .fl-i svg{width:19px; height:19px}
  .fl-step:not(:last-child)::after{left:29px; top:50px}
  .flow p{font-size:.82rem}
}

/* ---------- métricas ---------- */


/* ---------- pasos ---------- */
.steps{margin-top:64px; border-top:1px solid var(--line)}
.step{
  display:grid; grid-template-columns:80px 1fr 220px; gap:32px; align-items:center;
  padding:34px 8px; border-bottom:1px solid var(--line); transition:background .4s, padding .5s var(--ease);
}
.step:hover{background:var(--paper); padding-left:20px}
.step .rn{font-family:var(--serif); font-weight:700; font-size:1.4rem; color:var(--faint)}
.step h4{font-size:1.22rem; font-weight:800; letter-spacing:-.015em; margin-bottom:5px}
.step p{color:var(--muted); font-size:.94rem}
.step .when{text-align:right; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--violet)}

/* ---------- prueba en vivo ---------- */
.tryit{
  margin-top:clamp(48px,6vw,76px); overflow:hidden;
  background:
    radial-gradient(680px 420px at 88% -10%, rgba(124,58,237,.34), transparent 68%),
    linear-gradient(150deg, #17141F 0%, #0C0A14 100%);
  color:#fff; border-radius:var(--r-lg); padding:clamp(44px,5vw,72px);
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  box-shadow:0 40px 80px -40px rgba(12,10,30,.5); position:relative; overflow:hidden;
}
.tryit::after{content:none}
.tryit h2{font-family:var(--serif); font-weight:900; font-size:clamp(1.9rem,3.2vw,2.7rem); letter-spacing:-.02em; line-height:1.1; position:relative}
.tryit h2 em{color:#A78BFA; font-style:italic}
.tryit p{color:#9E9EB0; margin-top:14px; max-width:44ch; position:relative}
.tryit .btn{position:relative}

/* ---------- oferta ---------- */
.offer{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.offer-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-m); max-width:760px; margin:56px auto 0;
}
.offer-top{padding:44px 44px 32px; text-align:center; border-bottom:1px solid var(--line)}
.price{display:flex; align-items:baseline; justify-content:center; gap:14px; margin:20px 0 6px}
.price .old{font-size:1.15rem; color:var(--faint); text-decoration:line-through}
.price .now{font-family:var(--serif); font-weight:900; font-size:clamp(3rem,5.4vw,4.4rem); letter-spacing:-.03em}
.price .cur{font-size:.8rem; font-weight:700; letter-spacing:.14em; color:var(--faint); text-transform:uppercase}
.offer-list{display:grid; grid-template-columns:1fr 1fr; gap:0}
.offer-list div{padding:16px 24px; font-size:.92rem; font-weight:600; color:var(--ink-2); display:flex; gap:11px; align-items:center; border-bottom:1px solid var(--line)}
.offer-list div:nth-child(odd){border-right:1px solid var(--line)}
.offer-list .ck{color:var(--violet); font-weight:800}
.offer-foot{padding:32px 44px 40px; text-align:center}
.offer-foot .btn{width:100%; max-width:420px}
.offer-foot .btn-ig{font-weight:700}
.guarantee{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; font-size:.84rem; color:var(--muted)}

/* ---------- faq ---------- */
.faq{max-width:820px; margin:56px auto 0; border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%; background:none; border:0; text-align:left; cursor:pointer; padding:26px 40px 26px 0;
  font-family:var(--sans); font-size:1.05rem; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  position:relative; transition:color .3s;
}
.q button:hover{color:var(--violet)}
.q button::after{content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.3rem; font-weight:400; color:var(--faint); transition:transform .45s var(--ease), color .3s}
.q.open button::after{transform:translateY(-50%) rotate(45deg); color:var(--violet)}
.q .a{max-height:0; overflow:hidden; transition:max-height .55s var(--ease)}
.q .a p{padding:0 40px 28px 0; color:var(--muted); font-size:.97rem}

/* ---------- cta final ---------- */
.final{text-align:center; padding:clamp(110px,12vw,180px) 0}
.final h2{margin-bottom:22px}
.final .lede{margin:0 auto}
.final .btns{display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#fff; padding:80px 0 40px}
.f-top{display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08)}
footer .logo{color:#fff; font-size:1.6rem}
footer .logo .arrow{fill:#A78BFA}
footer .logo .ya{color:#A78BFA}
footer p{color:#8B8B9C; font-size:.92rem; max-width:34ch; margin-top:16px}
.f-col h5{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#6E6E80; margin-bottom:18px; font-weight:700}
.f-col a{display:block; color:#C9C9D4; font-size:.92rem; padding:6px 0; transition:color .25s}
.f-col a:hover{color:#fff}
.f-bot{display:flex; justify-content:space-between; align-items:center; padding-top:32px; gap:20px; flex-wrap:wrap; font-size:.8rem; color:#6E6E80}
.f-bot .legal{display:flex; gap:20px; flex-wrap:wrap}
.f-bot .legal a{cursor:pointer}
.f-note{font-size:.74rem; color:#5A5A6B; margin-top:22px; max-width:70ch; line-height:1.6}

/* ---------- floats ---------- */
.fab{position:fixed; right:24px; bottom:124px; z-index:70; display:flex; flex-direction:column; align-items:center; gap:13px}
.fab-item{
  position:relative; width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); opacity:0; transform:translateY(16px) scale(.5);
  pointer-events:none; transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.fab.open .fab-item{opacity:1; transform:none; pointer-events:auto}
.fab.open .fab-item:nth-child(2){transition-delay:.06s}
.fab-item svg{width:24px; height:24px; fill:#fff}
.fab-item:hover{transform:translateY(-3px) scale(1.06)}
.fab-ig{background:linear-gradient(135deg,#F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
  box-shadow:0 12px 30px -10px rgba(214,41,118,.7), inset 0 1px 0 rgba(255,255,255,.4)}
.fab-wa{background:linear-gradient(150deg,#3BE07E 0%, #25D366 45%, #12A150 100%);
  box-shadow:0 12px 30px -10px rgba(18,161,80,.7), inset 0 1px 0 rgba(255,255,255,.45)}

.fab-main{
  position:relative; width:58px; height:58px; border-radius:50%; cursor:pointer; padding:0;
  background:linear-gradient(150deg,#fff 0%, #F4F1FF 100%);
  border:1px solid rgba(124,58,237,.28); display:grid; place-items:center;
  box-shadow:0 14px 34px -12px rgba(124,58,237,.45), 0 2px 8px rgba(12,10,30,.14), inset 0 1px 0 #fff;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.fab-main::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(124,58,237,.42);
  animation:pulse 2.6s infinite; pointer-events:none;
}
.fab-main:hover{transform:translateY(-3px) scale(1.06); box-shadow:0 20px 44px -12px rgba(124,58,237,.6), inset 0 1px 0 #fff}
.fab-main svg{position:absolute; transition:opacity .35s var(--ease), transform .45s var(--ease)}
.fab-main .ic-net{width:25px; height:25px; fill:none; stroke:var(--violet); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fab-main .ic-x{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; opacity:0; transform:rotate(-90deg) scale(.6)}
.fab.open .fab-main{background:linear-gradient(150deg,#A78BFA 0%, #7C3AED 48%, #5B21B6 100%); border-color:rgba(255,255,255,.26); box-shadow:0 16px 38px -12px rgba(124,58,237,.7)}
.fab.open .fab-main::after{display:none}
.fab.open .fab-main .ic-net{opacity:0; transform:rotate(90deg) scale(.6)}
.fab.open .fab-main .ic-x{opacity:1; transform:none}


/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:90; background:rgba(12,10,25,.5); backdrop-filter:blur(6px); display:none; padding:24px; overflow-y:auto}
.modal.open{display:grid; place-items:center}
.modal-box{background:#fff; border-radius:var(--r-lg); max-width:680px; width:100%; padding:44px; box-shadow:var(--shadow-m); animation:bubIn .4s var(--ease)}
.modal-box h3{font-family:var(--serif); font-weight:900; font-size:1.7rem; margin-bottom:6px}
.modal-box .kicker{margin-bottom:24px}
.modal-box p{color:var(--muted); font-size:.94rem; margin-bottom:14px}
.modal-box b{color:var(--ink)}
.modal-close{position:absolute; top:20px; right:24px; background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--faint)}
.modal-box{position:relative}

/* ---------- plan a medida ---------- */
.plan--custom{
  border:1.5px solid rgba(255,255,255,.16);
  background:
    radial-gradient(360px 360px at calc(100% + 40px) -50px, rgba(167,139,250,.30), transparent 70%),
    radial-gradient(320px 320px at -30px calc(100% + 30px), rgba(124,58,237,.16), transparent 70%),
    var(--ink);
}
.plan--custom .plan-ribbon{background:#fff; color:var(--ink); box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.plan .price .custom{font-family:var(--serif); font-weight:900; font-size:clamp(1.9rem,3vw,2.35rem); color:#fff; letter-spacing:-.02em}
.plan-note--dark{font-size:.8rem; color:#8E8EA0; line-height:1.45; margin-top:14px; text-align:center}
.btn-diag{background:#fff; color:var(--ink); border-color:transparent; box-shadow:0 12px 30px -14px rgba(255,255,255,.5)}
.btn-diag:hover{transform:translateY(-2px); background:#fff; box-shadow:0 20px 40px -16px rgba(255,255,255,.6)}
.btn-diag svg{width:18px; height:18px; stroke:var(--violet-deep); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ---------- carrusel de trabajos ---------- */
.works{position:relative; margin-top:56px}
.works-track{
  display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 2px 26px; margin:0 -2px; scrollbar-width:none; -ms-overflow-style:none;
}
.works-track::-webkit-scrollbar{display:none}
.work{flex:0 0 calc((100% - 26px)/2); scroll-snap-align:center}
@media(max-width:900px){.work{flex:0 0 88%}}
.work-card{
  background:var(--paper); border:1px solid var(--line); border-radius:26px; padding:14px 14px 4px;
  box-shadow:var(--shadow-s); height:100%; display:flex; flex-direction:column;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.work:hover .work-card{transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:var(--violet-line)}
.work-shot{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff}
.work-shot .bar{height:30px; background:#F7F7FA; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; padding:0 13px}
.work-shot .bar i{width:7px; height:7px; border-radius:50%; background:#E1E1E8; display:block}
.work-shot .im{aspect-ratio:16/9.4; overflow:hidden}
.work-shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.work-cat{
  position:absolute; top:44px; left:14px; z-index:2;
  font-size:.63rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(12,10,25,.66); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18);
  padding:7px 13px; border-radius:100px;
}
.work-shot--sec{
  width:56%; margin:-15% 0 0 auto; position:relative; z-index:2;
  border-radius:14px; box-shadow:0 26px 50px -22px rgba(12,10,30,.55);
  transition:transform .6s var(--ease);
}
.work-shot--sec .bar{height:22px; padding:0 10px; gap:4px}
.work-shot--sec .bar i{width:5px; height:5px}
.work:hover .work-shot--sec{transform:translateY(-5px)}
.work-meta{padding:22px 14px 26px; display:flex; flex-direction:column; flex:1}
.work-meta h3{font-family:var(--serif); font-weight:900; font-size:1.22rem; letter-spacing:-.01em; color:var(--ink)}
.work-meta .sol{display:flex; align-items:center; gap:9px; margin-top:10px; font-size:.86rem; color:var(--muted); line-height:1.45}
.work-meta .sol::before{content:''; width:16px; height:1.5px; background:var(--violet); flex:0 0 auto; border-radius:2px}
.work-meta .link{
  margin-top:auto; padding-top:18px; font-size:.8rem; font-weight:800; letter-spacing:.05em;
  text-transform:lowercase; color:var(--violet-deep); display:inline-flex; align-items:center; gap:7px;
}
.work-meta .link span{transition:transform .4s var(--ease)}
.work:hover .work-meta .link span{transform:translateX(4px)}

/* ---------- diagnóstico ---------- */
.modal-box--form{max-width:760px; padding:40px 40px 36px}
@media(max-width:620px){.modal-box--form{padding:32px 22px 28px}}
.dg-intro{color:var(--muted); font-size:.96rem; line-height:1.6; margin-bottom:26px}
.dg-form{display:flex; flex-direction:column; gap:22px}
.dg-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:620px){.dg-row{grid-template-columns:1fr}}
.dg-f label,.dg-legend{display:block; font-size:.78rem; font-weight:800; letter-spacing:.02em; color:var(--ink); margin-bottom:9px}
.dg-f .opt{font-weight:600; color:var(--faint); letter-spacing:0}
.dg-f input[type=text],.dg-f input[type=tel],.dg-f select,.dg-f textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-2); border-radius:14px; padding:14px 16px; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.dg-f textarea{resize:vertical; min-height:92px; line-height:1.5}
.dg-f select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A8C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px}
.dg-f input:focus,.dg-f select:focus,.dg-f textarea:focus{border-color:var(--violet); box-shadow:0 0 0 4px rgba(124,58,237,.13)}
.dg-f.err input,.dg-f.err select,.dg-f.err textarea{border-color:#E0483C; box-shadow:0 0 0 4px rgba(224,72,60,.10)}
.dg-msg{display:none; font-size:.8rem; font-weight:700; color:#C63A2F; margin-top:7px}
.dg-f.err .dg-msg{display:block}
.dg-chips{display:flex; flex-wrap:wrap; gap:9px}
.dg-chips input{position:absolute; opacity:0; pointer-events:none}
.dg-chips label{
  margin:0; cursor:pointer; font-size:.84rem; font-weight:600; letter-spacing:0; color:var(--ink-2);
  background:#fff; border:1.5px solid var(--line-2); border-radius:100px; padding:10px 16px;
  transition:all .3s var(--ease); user-select:none;
}
.dg-chips label:hover{border-color:var(--violet-line); color:var(--violet-deep)}
.dg-chips input:checked + label{
  background:var(--violet-wash); border-color:var(--violet); color:var(--violet-deep); font-weight:700;
}
.dg-chips input:focus-visible + label{box-shadow:0 0 0 4px rgba(124,58,237,.16)}
.dg-chips .wide{flex:1 1 100%; text-align:center}
.dg-sep{height:1px; background:var(--line); margin:2px 0}
.dg-foot{display:flex; flex-direction:column; gap:14px; margin-top:4px}
.dg-foot .btn{width:100%; padding:19px 26px; font-size:.94rem}
.dg-legal{font-size:.78rem; color:var(--faint); text-align:center; line-height:1.5}
.dg-done{
  display:none; align-items:center; gap:12px; margin-top:22px; padding:18px 20px; border-radius:16px;
  background:rgba(37,211,102,.10); border:1px solid rgba(37,211,102,.35); color:#0F7B3F;
  font-size:.95rem; font-weight:700;
}
.dg-done.on{display:flex; animation:bubIn .4s var(--ease)}
.dg-done svg{width:20px; height:20px; stroke:#12A150; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

/* ---------- trabajos sobre fondo profundo ---------- */
.works-sec{
  background:
    radial-gradient(760px 540px at 88% -14%, rgba(124,58,237,.34), transparent 68%),
    radial-gradient(640px 500px at -8% 110%, rgba(124,58,237,.20), transparent 70%),
    var(--ink);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.works-sec .display{color:#fff}
.works-sec .display em{color:#C9B3FF}
.works-sec .lede{color:#A9A9BC}
.works-sec .eyebrow{color:#C9B3FF; background:rgba(124,58,237,.16); border-color:rgba(167,139,250,.34)}
.works-sec .eyebrow .dot{background:#A78BFA}
.works-sec .work-card{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.10);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.7);
}
.works-sec .work:hover .work-card{border-color:rgba(167,139,250,.55); box-shadow:0 40px 80px -30px rgba(124,58,237,.45)}
.works-sec .work-shot{border-color:rgba(255,255,255,.12)}
.works-sec .work-shot--sec{box-shadow:0 26px 50px -20px rgba(0,0,0,.8)}
.works-sec .work-meta h3{color:#fff}
.works-sec .work-meta .sol{color:#A9A9BC}
.works-sec .work-meta .sol::before{background:#A78BFA}
.works-sec .work-meta .link{color:#C9B3FF}
.works-sec .rev-nav button{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8);
}
.works-sec .rev-nav button:hover{background:rgba(255,255,255,.12); border-color:#A78BFA; color:#fff}
.works-sec .rev-nav button[disabled]{opacity:.28; border-color:rgba(255,255,255,.14); color:#8E8EA0}
.works-sec .rev-dots i{background:rgba(255,255,255,.22)}
.works-sec .rev-dots i.on{background:#A78BFA}

/* ---------- botón de prueba gratis ---------- */
.btn-free{
  position:relative; overflow:hidden; color:var(--ink); background:#fff;
  border:0; gap:10px; isolation:isolate;
  box-shadow:0 14px 34px -16px rgba(124,58,237,.55);
}
.btn-free::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:linear-gradient(120deg,#7C3AED,#25D366,#A78BFA,#7C3AED);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:freeflow 6s linear infinite; z-index:-1;
}
@keyframes freeflow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.btn-free::after{
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(124,58,237,.16), transparent);
  transition:left .9s var(--ease);
}
.btn-free:hover{transform:translateY(-2px); box-shadow:0 22px 44px -18px rgba(124,58,237,.7)}
.btn-free:hover::after{left:150%}
.free-tag{
  font-size:.66rem; font-weight:900; letter-spacing:.12em; color:#fff;
  background:var(--green); padding:5px 10px; border-radius:100px; flex:0 0 auto;
  box-shadow:0 4px 12px -6px rgba(18,161,80,.8);
}
@media(max-width:760px){
  /* en pantallas angostas los tres botones del hero quedan iguales */
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%; justify-content:center; white-space:normal}
}
@media(max-width:640px){
  .free-tag{font-size:.6rem; padding:4px 9px}
  .freeband h3{font-size:1.5rem}
  .freeband p{font-size:.95rem}
  .freeband .btn-free{width:100%; justify-content:center}
}

/* ---------- franja de prueba gratis ---------- */
.freeband{background:var(--white); border-top:1px solid var(--line)}
.freeband-in{
  position:relative; overflow:hidden; max-width:1060px; margin:0 auto; border-radius:28px;
  padding:50px 52px; display:flex; align-items:center; justify-content:space-between;
  gap:34px; flex-wrap:wrap; text-align:left;
  background:
    radial-gradient(520px 320px at 100% -30%, rgba(124,58,237,.16), transparent 70%),
    radial-gradient(420px 300px at -6% 130%, rgba(37,211,102,.12), transparent 70%),
    linear-gradient(150deg,#fff, #FBFAFE 60%, var(--wash));
  border:1px solid var(--violet-line); box-shadow:0 28px 60px -34px rgba(124,58,237,.35);
}
.freeband-in::after{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),transparent);
}
.freeband-txt{flex:1 1 420px; min-width:0}
.freeband .step{
  display:inline-flex; align-items:center; gap:8px; font-size:.7rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--violet); margin-bottom:10px;
}
.freeband .step::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(37,211,102,.18)}
.freeband h3{font-family:var(--serif); font-weight:900; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; line-height:1.15}
.freeband h3 em{color:var(--violet-deep); font-style:italic}
.freeband p{color:var(--muted); font-size:1rem; line-height:1.55; margin-top:12px; max-width:46ch}
.freeband .fine{font-size:.82rem; color:var(--faint); margin-top:14px}
@media(max-width:980px){.freeband-in{padding:44px 38px; gap:26px}}
@media(max-width:820px){
  .freeband-in{flex-direction:column; align-items:stretch; text-align:center; padding:36px 22px}
  .freeband p{max-width:none}
  .freeband .step{justify-content:center}
  .freeband .btn-free{width:100%; justify-content:center}
}

/* ================= EXPERIENCIAS (prueba gratis + diagnóstico) ============ */
.xp{
  position:fixed; inset:0; z-index:95; display:none;
  background:rgba(6,5,12,.74); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:26px; overscroll-behavior:contain;
}
.xp.open{display:grid; place-items:center; animation:xpFade .28s var(--ease)}
@keyframes xpFade{from{opacity:0}to{opacity:1}}

.xp-panel{
  position:relative; width:min(700px,100%); max-height:min(88vh,940px);
  display:flex; flex-direction:column; border-radius:30px; overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(620px 420px at 105% -12%, rgba(124,58,237,.34), transparent 68%),
    radial-gradient(520px 400px at -12% 108%, rgba(124,58,237,.20), transparent 70%),
    #0A0910;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation:xpIn .42s var(--ease);
}
@keyframes xpIn{from{opacity:0; transform:translateY(22px) scale(.985)}to{opacity:1; transform:none}}
.xp-panel::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.65),transparent);
}

.xp-close{
  position:absolute; top:18px; right:18px; z-index:3; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#CFCCE0;
  font-size:1rem; cursor:pointer; display:grid; place-items:center;
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.xp-close:hover{background:rgba(255,255,255,.14); color:#fff; transform:rotate(90deg)}

.xp-scroll{
  overflow-y:auto; overscroll-behavior:contain; padding:46px 46px 40px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.xp-scroll::-webkit-scrollbar{width:8px}
.xp-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px}
.xp-scroll::-webkit-scrollbar-track{background:transparent}

.xp-kicker{
  display:inline-flex; align-items:center; gap:9px; font-size:.7rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:#C9B3FF; margin-bottom:16px;
}
.xp-kicker::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(37,211,102,.2)}
.xp h3{font-family:var(--serif); font-weight:900; font-size:clamp(1.7rem,4.2vw,2.3rem); line-height:1.14; letter-spacing:-.02em; color:#fff}
.xp h3 em{color:#C9B3FF; font-style:italic}
.xp-intro{color:#A6A2BC; font-size:1rem; line-height:1.6; margin-top:14px}

.xp-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.xp-tags span{
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#BDB6D6; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:8px 14px; border-radius:100px;
}
.xp-tags span.hot{color:#8BE9B0; border-color:rgba(37,211,102,.4); background:rgba(37,211,102,.10)}

.xp-sep{height:1px; background:rgba(255,255,255,.09); margin:34px 0 30px}

.xp-form{display:flex; flex-direction:column; gap:26px}
.xp-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.xp-f label,.xp-legend{display:block; font-size:.84rem; font-weight:700; color:#E6E3F2; margin-bottom:11px}
.xp-f .opt{font-weight:500; color:#807B99}
.xp-f input[type=text],.xp-f input[type=tel],.xp-f select,.xp-f textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.13);
  border-radius:16px; padding:17px 18px; outline:none;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.xp-f input::placeholder,.xp-f textarea::placeholder{color:#6E6889}
.xp-f textarea{resize:vertical; min-height:104px; line-height:1.55}
.xp-f select{
  appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A4C4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:19px;
}
.xp-f select option{background:#141122; color:#fff}
.xp-f input:focus,.xp-f select:focus,.xp-f textarea:focus{
  border-color:rgba(167,139,250,.75); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(124,58,237,.22);
}
.xp-f.err input,.xp-f.err select,.xp-f.err textarea{border-color:#F0685C; box-shadow:0 0 0 4px rgba(240,104,92,.16)}
.xp-msg{display:none; font-size:.82rem; font-weight:600; color:#FF9A8F; margin-top:9px}
.xp-f.err .xp-msg{display:block}

.xp-chips{display:flex; flex-wrap:wrap; gap:10px}
.xp-chips input{position:absolute; opacity:0; pointer-events:none}
.xp-chips label{
  margin:0; cursor:pointer; font-size:.88rem; font-weight:600; color:#C3BFD8;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.13);
  border-radius:100px; padding:12px 18px; user-select:none;
  transition:background .3s var(--ease), border-color .3s, color .3s, transform .3s var(--ease);
}
.xp-chips label:hover{border-color:rgba(167,139,250,.5); color:#fff}
.xp-chips input:checked + label{
  background:rgba(124,58,237,.24); border-color:rgba(167,139,250,.9); color:#fff; font-weight:700;
}
.xp-chips input:focus-visible + label{box-shadow:0 0 0 4px rgba(124,58,237,.28)}
.xp-chips .wide{flex:1 1 100%; text-align:center}

.xp-foot{display:flex; flex-direction:column; gap:15px; margin-top:6px}
.xp-cta{
  width:100%; padding:21px 26px; font-size:1rem; border:0; cursor:pointer;
  background:linear-gradient(135deg,#8B5CF6,#6D28D9); color:#fff;
  box-shadow:0 20px 44px -18px rgba(124,58,237,.95);
}
.xp-cta:hover{transform:translateY(-2px); box-shadow:0 28px 56px -20px rgba(124,58,237,1)}
.xp-legal{font-size:.82rem; color:#7E7999; text-align:center; line-height:1.6}
.xp-legal b{color:#A8A2C4; font-weight:700}

.xp-done{
  display:none; align-items:center; gap:13px; margin-top:26px; padding:20px 22px; border-radius:18px;
  background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.42); color:#8BE9B0;
  font-size:1rem; font-weight:700;
}
.xp-done.on{display:flex; animation:xpIn .35s var(--ease)}
.xp-done svg{width:22px; height:22px; stroke:#25D366; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

/* ---- etapas (diagnóstico) ---- */
.xp-prog{display:flex; gap:8px; margin:26px 0 4px}
.xp-prog i{flex:1; height:5px; border-radius:4px; background:rgba(255,255,255,.12); transition:background .45s var(--ease)}
.xp-prog i.on{background:linear-gradient(90deg,#A78BFA,#7C3AED)}
.xp-stage{display:none; flex-direction:column; gap:26px; animation:xpIn .35s var(--ease)}
.xp-stage.on{display:flex}
.xp-stage-t{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#8E88AC}
.xp-nav{display:flex; gap:12px; align-items:center; margin-top:4px}
.xp-back{
  flex:0 0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#C3BFD8; padding:19px 24px; cursor:pointer;
}
.xp-back:hover{background:rgba(255,255,255,.12); color:#fff}
.xp-nav .xp-cta{flex:1}

@media(max-width:640px){
  .xp{padding:0}
  .xp.open{place-items:stretch}
  .xp-panel{width:100%; max-height:100%; height:100%; border-radius:0; border:0}
  .xp-scroll{padding:74px 22px 40px; -webkit-overflow-scrolling:touch}
  .xp-row{grid-template-columns:1fr; gap:22px}
  .xp-form{gap:24px}
  .xp-close{top:14px; right:14px}
  .xp-f input,.xp-f select,.xp-f textarea{font-size:16px}  /* evita el zoom de iOS */
  .xp-cta{padding:19px 22px}
  .xp-nav{flex-direction:column-reverse}
  .xp-back,.xp-nav .xp-cta{width:100%}
}

/* ---------- ajustes 2.0 ---------- */
.hero-free{
  position:relative; margin-top:20px; padding-left:18px;
  font-size:1rem; line-height:1.62; color:var(--muted);
}
.hero-free::before{
  content:''; position:absolute; left:0; top:5px; bottom:5px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--violet),rgba(124,58,237,.15));
}
.hero-free b{display:block; color:var(--ink); font-weight:800; letter-spacing:-.01em}
.hero-free span{display:block; margin-top:3px}

/* foco visible y consistente en todo lo interactivo */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--violet); outline-offset:3px; border-radius:8px;
}

/* transiciones un poco más cortas = sensación más fluida */

/* nada de scroll lateral en ningún tamaño */
img, svg, video, canvas{max-width:100%}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

@media(max-width:640px){
  .hero-free{font-size:.95rem}
}

/* CTA principal: la prueba gratis */
.btn-free--hero{
  color:#fff;
  background:linear-gradient(135deg,#8B5CF6,#6D28D9);
  box-shadow:0 20px 42px -18px rgba(124,58,237,.95);
}
.btn-free--hero .free-tag{background:#fff; color:var(--violet-deep)}
.btn-free--hero:hover{box-shadow:0 26px 54px -20px rgba(124,58,237,1)}
.hero-cta .btn-ghost{color:var(--ink); border-color:var(--line-strong, var(--line))}
.proc-note{
  margin:34px auto 0; max-width:680px; text-align:center;
  font-size:.95rem; color:var(--faint); line-height:1.6;
}
.final .btns{justify-content:center}

/* pastilla de Instagram del hero */
.hero-social{margin-top:26px; padding-top:24px; border-top:1px solid var(--line)}
.ig-pill{
  display:inline-flex; align-items:center; gap:11px; padding:11px 18px 11px 14px;
  border-radius:100px; border:1px solid var(--line); background:#fff;
  font-size:.9rem; font-weight:700; color:var(--ink-2); text-decoration:none;
  box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.ig-pill:hover{transform:translateY(-2px); border-color:var(--violet-line); box-shadow:var(--shadow-m)}
.ig-pill svg{
  width:21px; height:21px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round;
  color:#C13584;
}
.ig-pill b{color:var(--faint); font-weight:600; font-size:.85rem}
.ig-pill:hover b{color:var(--violet-deep)}
@media(max-width:640px){
  .hero-social{margin-top:18px}
  .ig-pill{width:100%; justify-content:center; padding:13px 18px; font-size:.88rem}
  .ig-pill b{display:none}
}

/* ---------- qué estás comprando ---------- */
.buying{position:relative; text-align:center}
.buy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; text-align:left}
.buy-card{
  position:relative; display:flex; flex-direction:column; gap:0; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:32px 30px 28px;
  text-decoration:none; text-align:left; font-family:var(--sans); cursor:pointer;
  box-shadow:var(--shadow-s); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.buy-card::after{
  content:''; position:absolute; inset:-40% -10% auto auto; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.16), transparent 68%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none;
}
.buy-card:hover{transform:translateY(-6px); border-color:var(--violet-line); box-shadow:var(--shadow-m)}
.buy-card:hover::after{opacity:1}
.buy-i{
  position:relative; z-index:1; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--violet),var(--violet-deep)); margin-bottom:22px;
  box-shadow:0 12px 26px -14px rgba(124,58,237,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
.buy-i svg{width:27px; height:27px; stroke:#fff; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
.buy-i svg .acc{stroke:#D9C7FF; stroke-width:2}
.buy-card:hover .buy-i{transform:translateY(-2px) rotate(-3deg)}
.buy-i{transition:transform .5s var(--ease)}
.buy-card h3{position:relative; z-index:1; font-family:var(--serif); font-weight:900; font-size:1.32rem; letter-spacing:-.01em; color:var(--ink)}
.buy-card h3 sup{font-size:.5em; vertical-align:super}
.buy-card p{position:relative; z-index:1; color:var(--muted); font-size:.96rem; line-height:1.6; margin-top:11px}
.buy-go{
  position:relative; z-index:1; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.buy-go b{color:var(--violet); font-size:1.05rem; transition:transform .45s var(--ease)}
.buy-card:hover .buy-go b{transform:translateX(5px)}
.buy-card--hot{border-color:var(--violet-line); box-shadow:0 26px 60px -34px rgba(124,58,237,.6)}
.buy-card--hot::after{opacity:.7}
.buy-tag{
  position:absolute; top:20px; right:20px; z-index:2; font-size:.62rem; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; padding:6px 12px; border-radius:100px;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  box-shadow:0 8px 18px -9px rgba(124,58,237,.9);
}

/* ---------- bloque IA dentro del sistema ---------- */
.ia-block{
  margin-top:clamp(64px,7vw,104px); padding-top:clamp(48px,5vw,72px);
  border-top:1px solid var(--line); text-align:center;
}
.ia-block .lede{margin-left:auto; margin-right:auto}
.ia-block h3{font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.1; letter-spacing:-.025em; color:var(--ink)}
.ia-block h3 em{color:var(--violet-deep); font-style:italic}
.ia-block .flow{margin-top:44px; text-align:left}

/* ---------- cierre oscuro, para que la base no quede blanca ---------- */
.final{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(720px 460px at 50% -10%, rgba(124,58,237,.42), transparent 70%),
    radial-gradient(560px 420px at 8% 110%, rgba(124,58,237,.22), transparent 72%),
    var(--ink);
}
.final .eyebrow{color:#C9B3FF; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05)}
.final .display{color:#fff}
.final .display em{color:#C9B3FF}
.final .lede{color:#A9A5C0}
.btn-ghost--dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.24)}
.btn-ghost--dark:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.42); color:#fff}

@media(max-width:980px){
  .buy-grid{grid-template-columns:1fr; gap:16px; margin-top:38px}
  .buy-card{padding:28px 24px 24px}
  .system-grid{grid-template-columns:1fr; gap:44px}
}
@media(max-width:640px){
  .ia-block{margin-top:52px; padding-top:42px}
  .buy-i{width:48px; height:48px; margin-bottom:18px}
  .buy-card h3{font-size:1.22rem}
}

/* =================== RITMO CROMÁTICO =================== */
/* halo violeta reutilizable, muy sutil, para las secciones claras */
.glow-soft{position:relative; isolation:isolate}
.glow-soft::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 92% -6%, rgba(124,58,237,.13), transparent 66%),
    radial-gradient(520px 400px at -6% 104%, rgba(124,58,237,.09), transparent 70%);
}

/* costura entre secciones: una línea que se desvanece hacia los bordes */
.seam{position:relative}
.seam::after{
  content:''; position:absolute; left:12%; right:12%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet-line),transparent);
}

/* "qué estás comprando": claro con halo */
.buying{background:var(--white)}

/* planes: claro con halo, para que las tarjetas oscuras floten */
.plans{position:relative; overflow:hidden}
.plans::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 520px at 50% -8%, rgba(124,58,237,.16), transparent 66%);
}
.plans > .wrap{position:relative; z-index:1}

/* sistema + IA: bloque oscuro con glow, el corazón tecnológico */
.system{
  position:relative; overflow:hidden; color:#fff; border:0;
  background:
    radial-gradient(820px 560px at 88% -12%, rgba(124,58,237,.40), transparent 68%),
    radial-gradient(640px 520px at -8% 108%, rgba(124,58,237,.24), transparent 70%),
    var(--ink);
}
.system > .wrap{position:relative; z-index:1}
.system .eyebrow{color:#C9B3FF; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05)}
.system .display{color:#fff}
.system .display em{color:#C9B3FF}
.system .lede{color:#A9A5C0}
.system .lede b{color:#fff !important}
.system .ia-block{border-top-color:rgba(255,255,255,.12)}
.system .ia-block h3{color:#fff}
.system .ia-block h3 em{color:#C9B3FF}
/* la tarjeta del pack se mantiene clara: contrasta y sigue siendo la protagonista */
.system .pack{box-shadow:0 46px 100px -40px rgba(0,0,0,.7)}
/* el flujo, en superficie oscura translúcida */
.system .flow{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8); backdrop-filter:blur(6px);
}
.system .flow .fl-step{border-right-color:rgba(255,255,255,.09)}
.system .flow .fl-step:nth-child(even){background:rgba(255,255,255,.03)}
.system .fl-i{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.system .fl-i svg{stroke:#C9B3FF}
.system .fl-i svg .acc{stroke:#8B5CF6}
.system .fl-step.on .fl-i,
.system .fl-step:hover .fl-i{background:linear-gradient(150deg,#8B5CF6,#6D28D9)}
.system .fl-step:not(:last-child)::after{border-color:rgba(167,139,250,.45)}
/* sin linea vertical decorativa en el bloque IA */
.system .flow .fl-step::after{background:none}
@media(max-width:820px){
  .system .flow{background:rgba(255,255,255,.04)}
  .system .flow .fl-step::after{content:none}
}
.system .flow .n{color:#C9B3FF}
.system .flow h4{color:#fff}
.system .flow p{color:#9E9AB8}
.system .tryit{
  background:
    radial-gradient(620px 420px at 104% -24%, rgba(124,58,237,.38), transparent 70%),
    rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -45px rgba(0,0,0,.9);
}

/* proceso: claro con halo */
#proceso{background:var(--white)}

/* faq: superficie papel, cierra la parte clara antes del bloque oscuro final */
#faq{background:var(--paper); border-top:1px solid var(--line)}

/* =================== ANIMACIONES =================== */
/* glow que se enciende al entrar en pantalla */
.glow-in{position:relative}
.glow-in::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(124,58,237,0);
  transition:box-shadow 1.1s var(--ease);
}
.glow-in.in::after{box-shadow:0 0 60px -18px rgba(124,58,237,.55)}

/* parallax suavísimo, solo transform (barato para la GPU) */
.plx{will-change:transform; transition:transform .1s linear}

/* microinteracción de las tarjetas al presionar */
.buy-card:active,.plan:active,.rev:active{transform:translateY(-2px) scale(.995)}

/* brillo que recorre el botón principal al pasar el mouse */
.btn-free--hero{position:relative; overflow:hidden}
.btn-free--hero::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform:skewX(-18deg); opacity:0;
}
.btn-free--hero:hover::after{animation:sheen .9s var(--ease) forwards}
@keyframes sheen{from{left:-60%; opacity:1}to{left:120%; opacity:0}}

/* =================== PLANES EN CELULAR =================== */
@media(max-width:1040px){
  .plans-grid{max-width:560px}
}
@media(max-width:620px){
  .plans-grid{max-width:100%; gap:34px; margin-top:38px}
  .plan{padding:32px 22px 26px; border-radius:20px}
  /* fuera las alturas mínimas del grid de escritorio: en celular cortan el contenido */
  .plan-name,.plan-tag,.plan-sub,.plan-note,.plan-allof,.plan-list{min-height:0 !important}
  .plan-name{font-size:1.28rem; line-height:1.25; margin-bottom:2px}
  .plan-tag{font-size:.9rem; line-height:1.5; margin-top:8px}
  .plan .price{margin:18px 0 4px; flex-wrap:wrap; row-gap:2px}
  .plan .price .now{font-size:2.05rem; line-height:1.1; word-break:normal}
  .plan .price .cur{font-size:.8rem}
  .plan-sub{font-size:.85rem; line-height:1.5; margin-top:8px}
  .plan-allof{margin-top:20px; padding-top:18px}
  .plan-list{gap:13px}
  .plan-list li{font-size:.92rem}
  .plan-foot{padding-top:24px}
  .plan-foot .btn{
    padding:17px 14px; font-size:.88rem; gap:9px; white-space:nowrap; line-height:1.2;
    letter-spacing:-.015em;
  }
  .plan-foot .mp-mark{width:30px; height:23px}
  .plan-foot .btn .ar{margin-left:0}
  .plan-note{font-size:.82rem; margin-top:13px}
  .plan-ribbon{font-size:.62rem; padding:7px 15px}
  .how-link{margin-top:12px}
}
@media(max-width:340px){
  .plan-foot .btn{font-size:.74rem; letter-spacing:-.02em}
  .plan-foot .mp-mark{width:23px; height:18px}
}
@media(max-width:380px){
  .plan{padding:28px 18px 24px}
  .plan .price .now{font-size:1.85rem}
  .plan-foot .btn{font-size:.8rem; padding:16px 10px; gap:7px}
  .plan-foot .mp-mark{width:26px; height:20px}
}

/* sin parallax ni brillos si el sistema pide menos movimiento */
@media(prefers-reduced-motion:reduce){
  .plx{transform:none !important}
  .btn-free--hero:hover::after{animation:none}
  .glow-in.in::after{box-shadow:none}
}

/* ==================== ESCAPARATE ==================== */
.showcase{
  position:relative; isolation:isolate; overflow:hidden;
  margin:0 0 clamp(64px,8vw,110px);
  padding:clamp(44px,5vw,72px) clamp(28px,4vw,60px);
  border-radius:32px; border:1px solid rgba(255,255,255,.09);
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center; gap:clamp(32px,4vw,60px);
}

/* fondo real con zoom lento: una captura nuestra, oscurecida y difuminada */
.show-bg{position:absolute; inset:0; z-index:-2; overflow:hidden; border-radius:32px}
.show-bg-im{
  position:absolute; inset:-6%;
  background-position:center top; background-size:cover; opacity:.30;
  filter:blur(3px) saturate(.75) brightness(.55);
  transform:scale(1.02);
  animation:showZoom 30s ease-in-out infinite alternate;
}
@keyframes showZoom{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(0,-2.5%,0)}
}
.show-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(105deg, var(--ink) 8%, rgba(12,10,20,.86) 42%, rgba(12,10,20,.55) 100%),
    radial-gradient(700px 460px at 88% 10%, rgba(124,58,237,.34), transparent 66%);
}

.show-kicker{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#8E88AC; margin-bottom:20px;
}
.show-title{
  font-family:var(--serif); font-weight:900; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(2.1rem,4vw,3.4rem); color:#fff; margin:0 0 20px;
}
.show-title em{color:#C9B3FF; font-style:italic}
.show-lede{color:#A6A2BC; font-size:1.02rem; line-height:1.65; margin:0 0 30px; max-width:44ch}

/* ventana de escritorio: coherente con la captura que mostramos */
.show-stage{position:relative}
.brw{
  margin:0; border-radius:16px; overflow:hidden; background:#12101B;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 60px 120px -45px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform:perspective(1600px) rotateY(-6deg) rotateX(1.6deg);
  transition:transform 1s var(--ease);
}
.showcase:hover .brw{transform:perspective(1600px) rotateY(-3deg) rotateX(1deg)}
.brw-bar{
  display:flex; align-items:center; gap:14px; padding:11px 14px;
  background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.09);
}
.brw-dots{display:flex; gap:6px}
.brw-dots i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.2)}
.brw-url{
  flex:1; font-size:.72rem; color:#8E88AC; letter-spacing:.02em; text-align:center;
  background:rgba(0,0,0,.28); border-radius:100px; padding:5px 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brw-view{
  position:relative; height:clamp(300px,34vw,420px); background:#0A0910;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
.brw-view::-webkit-scrollbar{width:7px}
.brw-view::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:8px}
.brw-hint{
  position:absolute; left:50%; bottom:10px; translate:-50% 0; z-index:2; pointer-events:none;
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#CFCBE2;
  background:rgba(10,9,16,.72); backdrop-filter:blur(6px); padding:6px 12px; border-radius:100px;
  border:1px solid rgba(255,255,255,.14); transition:opacity .4s var(--ease);
}
.brw-view.scrolled + .brw-hint{opacity:0}
.brw-view img{width:100%; height:auto; display:block; object-fit:contain}

/* el panel real del asistente, recortado de la web del cliente */
.show-panel{
  position:absolute; right:-26px; bottom:-38px; width:min(244px,46%); margin:0;
  border-radius:18px; overflow:hidden; background:#0A0910;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 46px 90px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.show-panel img{width:100%; height:auto; display:block; object-fit:contain}
.brw,.show-panel{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.brw.in,.show-panel.in{opacity:1; transform:none}
.show-panel{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){.brw,.show-panel{opacity:1; transform:none}}
.show-panel figcaption{
  padding:10px 12px; font-size:.66rem; line-height:1.4; color:#A6A2BC;
  background:rgba(255,255,255,.05); border-top:1px solid rgba(255,255,255,.09);
}

@media(max-width:980px){
  .showcase{grid-template-columns:1fr; padding:38px 22px 44px; border-radius:26px; gap:30px}
  .show-lede{max-width:100%}
  .brw{transform:none}
  .showcase:hover .brw{transform:none}
  .show-stage{display:grid; grid-template-columns:1fr; gap:16px}
  .show-panel{position:relative; right:auto; bottom:auto; width:100%; max-width:320px; margin:0 auto}
  .show-panel figcaption{font-size:.72rem}
}
@media(max-width:560px){
  .showcase{padding:32px 18px 38px}
  .show-title{font-size:clamp(1.8rem,7.4vw,2.3rem)}
  .show-lede{font-size:.96rem}
  .brw-view{height:clamp(280px,72vw,380px)}
  .brw-bar{padding:9px 11px}
  .brw-url{font-size:.64rem}
}

/* ==================== CINTA DE RUBROS ==================== */
.marq{
  position:relative; overflow:hidden; padding:22px 0;
  background:var(--ink); border-block:1px solid rgba(255,255,255,.08);
}
.marq::before,.marq::after{
  content:''; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.marq::before{left:0; background:linear-gradient(90deg,var(--ink),transparent)}
.marq::after{right:0; background:linear-gradient(270deg,var(--ink),transparent)}
.marq-in{display:flex; width:max-content; animation:marqRun 34s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq-row{display:flex; align-items:center; gap:26px; padding-right:26px}
.marq-row span{
  font-size:.82rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); white-space:nowrap;
}
.marq-row i{font-style:normal; font-size:.6rem; color:var(--violet)}
@keyframes marqRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:640px){
  .marq{padding:17px 0}
  .marq-row span{font-size:.72rem; letter-spacing:.13em}
  .marq-row{gap:20px; padding-right:20px}
}

/* ==================== ZOOM LENTO EN LAS CAPTURAS ==================== */
.work-shot .im{overflow:hidden}
.work-shot .im img{transition:transform 1.2s var(--ease)}
.work.in .work-shot .im img{animation:kenBurns 22s ease-in-out infinite alternate}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.07)}}
.work-card:hover .work-shot .im img{transform:scale(1.03)}

@media(prefers-reduced-motion:reduce){
  .show-bg-im,.brw-view img,.marq-in,.sc-live,
  .work.in .work-shot .im img{animation:none !important}
  .plx-s,.plx-m,.plx-l,.plx-xl{transform:none !important}
}

/* ==================== PLANES: para quién es ==================== */
.plan-for{
  display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:#8E88AC; margin-bottom:14px;
  padding:6px 12px; border-radius:100px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
}
.plan-for--hot{color:#C9B3FF; border-color:rgba(167,139,250,.45); background:rgba(124,58,237,.16)}
@media(max-width:620px){.plan-for{font-size:.6rem; margin-bottom:11px}}

/* ==================== PORTFOLIO: revelado al hover ==================== */
.work-card{transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease)}
.work-card:hover{transform:translateY(-7px)}
.work-card .sol{transition:color .45s var(--ease)}
.work-card:hover .sol{color:var(--violet-deep)}
.work-shot{position:relative}
.work-shot::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(12,10,30,.28));
  opacity:0; transition:opacity .55s var(--ease);
}
.work-card:hover .work-shot::after{opacity:1}

/* ==================== BOTONES: estados completos ==================== */
.btn:active{transform:translateY(1px) scale(.994)}
.btn[disabled],.btn.is-loading{pointer-events:none; opacity:.7}
.btn.is-loading .ar{animation:btnSpin .8s linear infinite; display:inline-block}
@keyframes btnSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
}

/* ==================== HEADER ==================== */
#nav{transition:background .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
#nav.shrunk{
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 10px 34px -24px rgba(12,10,30,.6);
}
#nav.shrunk .nav-in{padding-top:11px; padding-bottom:11px}
.nav-in{transition:padding .45s var(--ease)}
#navlinks a{position:relative}
#navlinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; border-radius:2px;
  background:var(--violet); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
#navlinks a:hover::after,#navlinks a:focus-visible::after{transform:scaleX(1); transform-origin:left}

/* ==================== TIPOGRAFÍA CINÉTICA ==================== */
.kin i{font-style:inherit; display:inline-block; opacity:0; transform:translateY(22px)}
.kin.in i{animation:kinUp .95s cubic-bezier(.16,1,.3,1) both}
@keyframes kinUp{to{opacity:1; transform:none}}

/* ==================== CHAT FLOTANTE SIN TAPAR NADA ==================== */
@media(max-width:640px){
  .final{padding-bottom:calc(clamp(64px,9vw,120px) + 74px)}
  .xp.open{z-index:120}
}

@media(prefers-reduced-motion:reduce){
  .sc-pulse,.sc-ring{animation:none; display:none}
  .kin i{opacity:1; transform:none; animation:none}
}

/* ---------- reveal ---------- */
.js .rv{
  opacity:0; transform:translateY(38px) scale(.985);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
  will-change:opacity, transform;
}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .spark{display:none}
  .hero-in,.system-grid,.cases,.f-top{grid-template-columns:1fr}
  .hero-in{gap:52px}
  .flow{grid-template-columns:1fr 1fr}
  .flow div{border-bottom:1px solid var(--line)}
  nav ul{display:none}
  .nav-toggle{display:block}
  nav.open ul{
    display:flex; position:absolute; top:76px; left:0; right:0; background:#fff;
    flex-direction:column; padding:24px 32px; gap:18px; border-bottom:1px solid var(--line);
  }
  .step{grid-template-columns:52px 1fr; gap:18px}
  .step .when{grid-column:2; text-align:left; margin-top:6px}
}
@media(max-width:640px){
  .wrap{padding:0 22px}
  .works-track{gap:16px}
  .work-card{padding:11px 11px 2px; border-radius:22px}
  .work-meta{padding:18px 10px 22px}
  .work-meta h3{font-size:1.08rem}
  .rev-nav button{width:42px; height:42px}
  .proof{padding:22px 18px}
  .hero{padding:140px 0 80px}
  .flow,.offer-list{grid-template-columns:1fr}
  .offer-list div:nth-child(odd){border-right:0}
  .pack-head{flex-direction:column; align-items:flex-start; gap:14px}
  .tryit{flex-direction:column; align-items:flex-start}
  .nav-cta{display:none}
}