/* ══════════════════════════════════════════════════════════════
   PÁGINAS WEB — landing con narrativa de scroll (estilo producto)
   Mismo sistema «Líquido morado»: #6B3997, tinta #0B0612,
   Inter Tight + Instrument Serif. Todo vive bajo .pw.
══════════════════════════════════════════════════════════════ */
.pw { --ink:#0B0612; --ink-2:#120A1C; --ink-3:#1A1026; --purple:#6B3997; --purple-2:#8A55C4; --lilac:#CDB0F2; --cream:#F6F1FB;
      --muted:rgba(246,241,251,.62); --dim:rgba(246,241,251,.38); --line:rgba(255,255,255,.09);
      --sans:'Inter Tight','Inter',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif; --ease:cubic-bezier(.2,.7,.2,1);
      background:var(--ink); color:var(--cream); font-family:var(--sans); overflow-x:clip; }
.pw *, .pw *::before, .pw *::after { box-sizing:border-box; }
.pw .wrap { max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,48px); position:relative; z-index:2; }
.pw .serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.pw .grad { background:linear-gradient(100deg,#E9D8FF 0%,#B98AF0 45%,#8A55C4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding:.06em .16em .14em .05em; margin:-.06em -.16em -.14em -.05em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.pw .eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--lilac); }
.pw .eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--lilac); box-shadow:0 0 14px var(--lilac); }
.pw h2 { font-weight:800; font-size:clamp(2.3rem,5.4vw,5rem); line-height:.95; letter-spacing:-.045em; margin:18px 0 0; }
.pw .lead { color:var(--muted); font-size:clamp(1.02rem,1.3vw,1.22rem); line-height:1.6; max-width:40rem; }
.pw .centro { text-align:center; }
.pw .centro .lead { margin-left:auto; margin-right:auto; }
.pw .glass { background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--line);
             border-radius:26px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.pw .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; font:600 15px/1 var(--sans);
           padding:17px 26px; border-radius:999px; text-decoration:none; transition:transform .25s, box-shadow .25s, background .25s; }
.pw .btn-main { background:var(--cream); color:var(--ink); box-shadow:0 10px 40px -10px rgba(205,176,242,.55); }
.pw .btn-main:hover { transform:translateY(-2px); box-shadow:0 18px 50px -12px rgba(205,176,242,.85); }
.pw .btn-morado { background:var(--purple); color:#fff; box-shadow:0 12px 40px -12px rgba(107,57,151,.95); }
.pw .btn-morado:hover { background:#7B45AB; transform:translateY(-2px); }
.pw .btn-ghost { background:rgba(255,255,255,.06); color:var(--cream); border:1px solid var(--line); }
.pw .btn-ghost:hover { background:rgba(255,255,255,.12); }
.pw .btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Aparición */
.pw .rv { opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.pw .rv.in { opacity:1; transform:none; }

/* ── Barra superior ── */
.pw-nav { position:fixed; inset:0 0 auto 0; z-index:50; transition:background .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
.pw-nav.solida { background:rgba(11,6,18,.72); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom-color:var(--line); }
.pw-nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px; }
.pw-nav img { height:30px; width:auto; display:block; }
.pw-nav nav { display:flex; align-items:center; gap:28px; }
.pw-nav nav a { color:var(--muted); font-size:14px; font-weight:500; text-decoration:none; transition:color .2s; }
.pw-nav nav a:hover { color:var(--cream); }
.pw-nav .btn { padding:11px 18px; font-size:13.5px; }

/* ── Hero ── */
.pw-hero { position:relative; min-height:100svh; padding:130px 0 80px; overflow:hidden; display:flex; align-items:center; }
.pw-hero .grid { display:grid; grid-template-columns:6fr 5fr; gap:clamp(30px,5vw,72px); align-items:center; width:100%; }
.pw-hero h1 { font-weight:800; font-size:clamp(3rem,8.4vw,7.6rem); line-height:.9; letter-spacing:-.055em; margin:22px 0 28px; }
.pw-hero h1 .w { display:inline-block; overflow:hidden; vertical-align:top;
        padding:.14em .12em .24em; margin:-.14em -.12em -.24em; }
.pw-hero h1 .w > span { display:inline-block; transform:translateY(110%); animation:pw-sube 1.1s var(--ease) forwards; }
@keyframes pw-sube { to { transform:none; } }
.pw-hero .lead strong { color:var(--cream); font-weight:600; }
.pw-hero .desde { display:inline-block; margin-top:18px; padding:10px 16px; border-radius:999px;
        background:rgba(107,57,151,.22); border:1px solid rgba(205,176,242,.3); color:var(--cream); font-size:15px; }
.pw-hero .desde b { font-weight:700; }
.pw-hero .desde i { margin-left:6px; vertical-align:-2px; }
.pw-hero .rasgos { display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin:34px 0 26px; max-width:560px; }
.pw-hero .rasgo { display:flex; align-items:center; gap:12px; font-size:14.5px; color:rgba(246,241,251,.82); }
.pw-hero .rasgo i { flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:16px; color:var(--lilac);
        background:rgba(107,57,151,.22); border:1px solid rgba(205,176,242,.18); }
.pw-hero .micro { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); line-height:1.7; }
.pw-hero .nota { margin-top:14px; display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; font-size:13px; line-height:1.55; color:var(--muted);
        background:rgba(107,57,151,.1); border:1px solid rgba(205,176,242,.16); text-decoration:none; transition:background .3s; }
.pw-hero .nota:hover { background:rgba(107,57,151,.2); }
.pw-hero .nota strong { color:var(--cream); }
.pw-hero .nota i { color:var(--lilac); font-size:17px; margin-top:1px; }
.pw-luz { position:absolute; left:0; top:0; width:46vw; height:46vw; max-width:720px; max-height:720px; border-radius:50%; pointer-events:none; z-index:1;
        background:radial-gradient(circle,rgba(185,138,240,.32),rgba(107,57,151,.12) 40%,transparent 68%); filter:blur(20px); opacity:0; transition:opacity .6s; mix-blend-mode:screen; }
.pw-hero.activo .pw-luz { opacity:1; }
.pw-bajar { display:none; position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
        font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.pw-bajar span { width:1px; height:44px; background:linear-gradient(var(--lilac),transparent); animation:pw-gota 2.2s ease-in-out infinite; transform-origin:top; }
@media (min-height:1000px) and (min-width:981px) { .pw-bajar { display:flex; } }
@keyframes pw-gota { 0% { transform:scaleY(0); } 50% { transform:scaleY(1); } 100% { transform:scaleY(1); opacity:0; } }

/* ── Escenario con scroll: el sitio se arma frente a ti ── */
.pw-show { position:relative; height:560vh; }
.pw-show .fijo { position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.pw-show .fijo > .wrap { width:100%; }
.pw-show .fijo::before { content:''; position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(60% 55% at 70% 50%,rgba(107,57,151,.28),transparent 70%); }
.pw-show .grid { display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px,4vw,70px); align-items:center; width:100%; }
.pw-show .textos { position:relative; min-height:320px; }
.pw-show .paso { position:absolute; inset:0 0 auto 0; opacity:0; transform:translateY(26px); filter:blur(6px);
        transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); pointer-events:none; }
.pw-show .paso.on { opacity:1; transform:none; filter:none; pointer-events:auto; }
.pw-show .paso .num { font-size:12px; font-weight:600; letter-spacing:.2em; color:var(--lilac); }
.pw-show .paso h3 { font-size:clamp(2.2rem,4.6vw,4.3rem); font-weight:800; letter-spacing:-.045em; line-height:.95; margin:16px 0 18px; }
.pw-show .paso p { color:var(--muted); font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.6; max-width:30rem; margin:0; }
.pw-show .puntos { display:flex; gap:8px; margin-top:34px; position:absolute; left:0; bottom:-70px; }
.pw-show .puntos i { width:28px; height:3px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; position:relative; }
.pw-show .puntos i b { position:absolute; inset:0; background:var(--lilac); transform:scaleX(var(--f,0)); transform-origin:left; }

/* El dispositivo: un marco que se transforma de navegador a teléfono */
.pw .escena { position:relative; height:min(62vh,560px); display:grid; place-items:center; perspective:1600px; }
.pw .dev { position:relative; width:min(100%,780px); aspect-ratio:16/10.4; border-radius:18px; background:#0E0816;
        border:1px solid rgba(255,255,255,.12); box-shadow:0 60px 120px -40px rgba(107,57,151,.75), 0 0 0 1px rgba(205,176,242,.06) inset;
        overflow:hidden; transition:width 1s var(--ease), aspect-ratio 1s var(--ease), border-radius 1s var(--ease), transform 1.2s var(--ease);
        transform:rotateX(var(--inc,8deg)) scale(var(--esc,.94)); }
.pw .dev .barra { height:34px; display:flex; align-items:center; gap:6px; padding:0 14px; background:linear-gradient(#1D1228,#150D1F);
        border-bottom:1px solid rgba(255,255,255,.06); transition:height .8s var(--ease), opacity .5s; }
.pw .dev .barra i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.pw .dev .barra span { flex:1; margin-left:10px; max-width:260px; height:18px; border-radius:6px; background:rgba(0,0,0,.35); font:500 10.5px/18px ui-monospace,Menlo,monospace;
        color:rgba(255,255,255,.45); text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 8px; }
.pw .dev .pantalla { position:absolute; inset:34px 0 0 0; overflow:hidden; background:#140B20; transition:inset .8s var(--ease); }
.pw .dev .pantalla img { position:absolute; left:0; top:0; width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top;
        opacity:0; transition:opacity .7s var(--ease); transform:translateY(var(--rec,0%)); will-change:transform; }
.pw .dev .pantalla img.on { opacity:1; }
.pw .dev .isla { position:absolute; top:10px; left:50%; width:84px; height:24px; margin-left:-42px; border-radius:20px; background:#000; z-index:5; opacity:0; transition:opacity .5s; }
/* Modo teléfono */
.pw .dev.tel { width:min(46%,300px,27vh); aspect-ratio:9/19.2; border-radius:44px; border:7px solid #1D1228; box-shadow:0 60px 120px -30px rgba(107,57,151,.85), 0 0 0 1px rgba(205,176,242,.2); }
.pw .dev.tel .barra { height:0; opacity:0; }
.pw .dev.tel .pantalla { inset:0; border-radius:36px; }
.pw .dev.tel .isla { opacity:1; }
/* Paneles que aparecen sobre el dispositivo */
.pw .panel { position:absolute; z-index:6; padding:20px 22px; border-radius:20px; min-width:250px;
        background:rgba(18,10,28,.82); border:1px solid rgba(205,176,242,.22); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
        box-shadow:0 30px 70px -20px rgba(0,0,0,.7); opacity:0; transform:translateY(24px) scale(.96); transition:opacity .6s var(--ease), transform .7s var(--ease); pointer-events:none; }
.pw .panel.on { opacity:1; transform:none; }
.pw .panel h4 { margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lilac); }
.pw .panel.vitales { right:-2%; bottom:6%; width:300px; }
.pw .vital { margin-bottom:13px; }
.pw .puntaje { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.pw .puntaje b { font-size:44px; font-weight:800; letter-spacing:-.05em; line-height:1; color:#7EE2A8; font-variant-numeric:tabular-nums; }
.pw .puntaje span { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.pw .panel .fuente { margin:12px 0 0; font-size:10.5px; color:var(--dim); }
/* La barra muestra cuánto de la meta de Google consume el sitio: más corta, mejor */
.pw .vital:last-of-type { margin-bottom:0; }
.pw .vital div { display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px; }
.pw .vital div b { font-weight:600; }
.pw .vital div span { color:#7EE2A8; font-weight:700; font-variant-numeric:tabular-nums; }
.pw .vital u { display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; text-decoration:none; }
.pw .vital u::after { content:''; display:block; height:100%; width:var(--v,0%); border-radius:6px; background:linear-gradient(90deg,#4ADE80,#7EE2A8);
        transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease); }
.pw .panel.on .vital u::after { transform:scaleX(1); }
.pw .panel.on .vital:nth-of-type(3) u::after { transition-delay:.15s; }
.pw .panel.on .vital:nth-of-type(4) u::after { transition-delay:.3s; }
.pw .vital small { display:block; font-size:11px; color:var(--dim); margin-top:5px; }
.pw .panel.busca { left:-4%; top:12%; width:340px; }
.pw .caja-busca { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line); font-size:13.5px; margin-bottom:14px; min-height:42px; }
.pw .caja-busca i { color:var(--lilac); }
.pw .caja-busca .cursor { display:inline-block; width:1.5px; height:15px; background:var(--lilac); margin-left:1px; animation:pw-parpadeo 1s steps(2) infinite; vertical-align:middle; }
@keyframes pw-parpadeo { 50% { opacity:0; } }
.pw .resultado { padding:12px 14px; border-radius:14px; background:rgba(107,57,151,.18); border:1px solid rgba(205,176,242,.25); opacity:0; transform:translateY(8px); transition:.6s var(--ease) .1s; }
.pw .resultado.on { opacity:1; transform:none; }
.pw .resultado small { display:block; font-size:11.5px; color:var(--dim); }
.pw .resultado b { display:block; color:#CDB0F2; font-size:15px; margin:3px 0 4px; font-weight:600; }
.pw .resultado span { font-size:12.5px; color:var(--muted); line-height:1.45; display:block; }
.pw .resultado em { font-style:normal; float:right; font-size:10.5px; font-weight:700; letter-spacing:.12em; color:#7EE2A8; }
.pw .panel.datos { right:-3%; top:10%; width:310px; }
.pw .grafica { height:110px; position:relative; }
.pw .grafica svg { width:100%; height:100%; overflow:visible; }
.pw .grafica path.linea { fill:none; stroke:url(#pwTrazo); stroke-width:3; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.8s var(--ease); }
.pw .grafica path.area { fill:url(#pwArea); opacity:0; transition:opacity 1s .6s; }
.pw .panel.on .grafica path.linea { stroke-dashoffset:0; }
.pw .panel.on .grafica path.area { opacity:1; }
.pw .eventos { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pw .eventos span { font-size:11px; font-weight:600; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--muted); }
.pw .eventos span.lead { background:rgba(126,226,168,.14); color:#7EE2A8; }

/* ── Frase que se ilumina con el scroll ── */
.pw-frase { padding:clamp(120px,18vh,220px) 0; }
.pw-frase p { font-size:clamp(2.1rem,5.6vw,5.4rem); font-weight:800; line-height:1.02; letter-spacing:-.045em; margin:0; max-width:15em; }
.pw-frase p span { color:rgba(246,241,251,.13); transition:color .35s; }
.pw-frase p span.on { color:var(--cream); }
.pw-frase p span.serif.on { color:#CDB0F2; }

/* ── Portafolio horizontal ── */
.pw-galeria { position:relative; }
.pw-galeria .fijo { position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.pw-galeria .cabeza { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.pw-galeria .cabeza h2 { font-size:clamp(2.2rem,4.4vw,4.2rem); }
.pw-galeria .pista { display:flex; gap:28px; will-change:transform;
        padding:0 clamp(20px,4vw,48px) 0 max(clamp(20px,4vw,48px), calc((100vw - 1280px) / 2 + clamp(20px,4vw,48px))); }
.pw-galeria .pieza { flex:none; width:min(58vw,800px,calc((100svh - 360px) * 1.6)); color:inherit; text-decoration:none; }
.pw-galeria .marco { position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden; background:#140B20; border:1px solid var(--line);
        transition:transform .6s var(--ease), box-shadow .6s, border-color .6s; }
.pw-galeria .pieza:hover .marco { transform:translateY(-8px); box-shadow:0 50px 100px -40px rgba(107,57,151,.9); border-color:rgba(205,176,242,.3); }
.pw-galeria .marco > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; transition:object-position 6s cubic-bezier(.45,0,.25,1); }
.pw-galeria .pieza:hover .marco > img { object-position:50% 100%; }
.pw-galeria .cel { position:absolute; right:4%; bottom:-14%; width:19%; aspect-ratio:9/19; border-radius:22px; overflow:hidden; border:4px solid #1D1228;
        box-shadow:0 30px 60px -20px rgba(0,0,0,.8); background:#140B20; transition:transform .7s var(--ease); }
.pw-galeria .pieza:hover .cel { transform:translateY(-18%); }
.pw-galeria .cel img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.pw-galeria .pie { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-top:20px; padding:0 4px; }
.pw-galeria .pie small { display:block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lilac); margin-bottom:8px; }
.pw-galeria .pie b { font-size:clamp(1.1rem,1.6vw,1.5rem); font-weight:700; letter-spacing:-.025em; line-height:1.2; display:block; max-width:32em; }
.pw-galeria .pie i { font-style:normal; flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); transition:.4s var(--ease); }
.pw-galeria .pieza:hover .pie i { background:var(--cream); color:var(--ink); transform:rotate(45deg); }
.pw-galeria .todos { flex:none; width:min(34vw,420px); aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:18px;
        padding:40px; border-radius:20px; border:1px dashed rgba(205,176,242,.35); color:var(--cream); text-decoration:none; align-self:flex-start; transition:background .4s; }
.pw-galeria .todos:hover { background:rgba(107,57,151,.18); }
.pw-galeria .todos b { font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.pw-galeria .avance { height:2px; background:rgba(255,255,255,.08); margin:46px clamp(20px,4vw,48px) 0; border-radius:2px; overflow:hidden; }
.pw-galeria .avance b { display:block; height:100%; background:linear-gradient(90deg,var(--purple),var(--lilac)); transform:scaleX(var(--g,0)); transform-origin:left; }

/* ── Qué construimos: tarjetas con luz que sigue al mouse ── */
.pw-construye { padding:140px 0 120px; }
.pw-bento { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:60px; }
.pw-luzcard { position:relative; grid-column:span 2; padding:34px 30px; border-radius:26px; background:rgba(255,255,255,.03); border:1px solid var(--line); overflow:hidden; isolation:isolate; }
.pw-luzcard.big { grid-column:span 3; padding:44px 40px; min-height:300px; background:linear-gradient(150deg,rgba(107,57,151,.22),rgba(255,255,255,.02)); }
.pw-luzcard::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s;
        background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),rgba(185,138,240,.2),transparent 45%); }
.pw-luzcard::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s;
        background:radial-gradient(300px circle at var(--x,50%) var(--y,50%),rgba(205,176,242,.8),transparent 50%);
        -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.pw-luzcard:hover::before, .pw-luzcard:hover::after { opacity:1; }
.pw-luzcard i.ic { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; font-size:22px; color:#fff; margin-bottom:26px;
        background:linear-gradient(135deg,var(--purple),#B98AF0); box-shadow:0 12px 30px -10px rgba(107,57,151,.9); }
.pw-luzcard:not(.big) i.ic { background:rgba(107,57,151,.22); color:var(--lilac); box-shadow:none; border:1px solid rgba(205,176,242,.18); }
.pw-luzcard h3 { margin:0 0 12px; font-size:clamp(1.3rem,1.9vw,1.9rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
.pw-luzcard:not(.big) h3 { font-size:1.25rem; }
.pw-luzcard p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:30rem; }

/* ── Auditoría ── */
.pw-audit { position:relative; padding:150px 0; overflow:hidden; }
.pw-audit .buscador { display:flex; gap:10px; padding:8px; border-radius:999px; max-width:700px; margin:44px auto 0;
        background:rgba(255,255,255,.06); border:1px solid rgba(205,176,242,.25); box-shadow:0 30px 80px -30px rgba(107,57,151,.9); transition:border-color .3s, box-shadow .3s; }
.pw-audit .buscador:focus-within { border-color:rgba(205,176,242,.6); box-shadow:0 30px 90px -20px rgba(138,85,196,1); }
.pw-audit .buscador input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--cream); font:500 17px var(--sans); padding:0 20px; }
.pw-audit .buscador input::placeholder { color:var(--dim); }
.pw-audit .error { max-width:700px; margin:16px auto 0; text-align:center; font-size:14px; color:#fca5a5; padding:12px 16px; border-radius:14px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); }
.pw-audit .escaneo { max-width:700px; margin:26px auto 0; aspect-ratio:16/7; border-radius:18px; position:relative; overflow:hidden; border:1px solid var(--line); background:#120A1C; }
.pw-audit .escaneo .fila-sk { position:absolute; left:6%; height:10px; border-radius:6px; background:rgba(255,255,255,.06); }
.pw-audit .escaneo .laser { position:absolute; left:0; right:0; height:70px; top:-70px; background:linear-gradient(transparent,rgba(185,138,240,.35)); border-bottom:2px solid #CDB0F2;
        box-shadow:0 6px 30px rgba(205,176,242,.6); animation:pw-laser 2.2s var(--ease) infinite; }
@keyframes pw-laser { to { top:100%; } }
.pw-audit .escaneo p { position:absolute; left:0; right:0; bottom:18px; text-align:center; margin:0; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lilac); }
.pw-audit .resultados { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; margin-top:50px; }
.pw-audit .captura { border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#140B20; box-shadow:0 40px 90px -40px rgba(107,57,151,.8); }
.pw-audit .captura .barra { height:32px; display:flex; align-items:center; gap:6px; padding:0 14px; background:linear-gradient(#1D1228,#150D1F); }
.pw-audit .captura .barra i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.pw-audit .captura .barra span { margin-left:10px; font:500 11px ui-monospace,Menlo,monospace; color:var(--dim); }
.pw-audit .captura img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.pw-audit .hallazgo { display:flex; gap:16px; padding:18px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--line); margin-bottom:12px;
        animation:pw-entra .7s var(--ease) both; }
@keyframes pw-entra { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.pw-audit .hallazgo > i { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:18px; color:var(--lilac); background:rgba(107,57,151,.22); }
.pw-audit .hallazgo b { display:block; font-size:15px; margin-bottom:5px; }
.pw-audit .hallazgo p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.55; }
.pw-audit .hallazgo .impacto { margin-top:8px; padding-left:11px; border-left:2px solid rgba(205,176,242,.5); color:#CDB0F2; }

/* ── Números ── */
.pw-numeros { padding:110px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pw-numeros .fila4 { display:grid; grid-template-columns:repeat(4,1fr); }
.pw-numeros .n { text-align:center; padding:10px 20px; border-right:1px solid var(--line); }
.pw-numeros .n:last-child { border-right:0; }
.pw-numeros .n b { display:block; font-size:clamp(3.2rem,7vw,6.4rem); font-weight:800; letter-spacing:-.06em; line-height:1; font-variant-numeric:tabular-nums; }
.pw-numeros .n span { display:block; margin-top:14px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ── Paquetes ── */
.pw-paquetes { position:relative; padding:150px 0 130px; overflow:hidden; }
.pw-selector { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:6px; border-radius:999px; margin:40px auto 0; width:fit-content; max-width:100%;
        background:rgba(255,255,255,.05); border:1px solid var(--line); position:relative; }
.pw-selector button { position:relative; z-index:1; border:0; background:none; color:var(--muted); font:600 14px var(--sans); padding:12px 20px; border-radius:999px; cursor:pointer; transition:color .3s, background .3s; }
.pw-selector button.on { color:var(--ink); background:var(--cream); }
.pw-incluye { display:grid; grid-template-columns:auto repeat(3,1fr); gap:28px; align-items:center; max-width:1000px; margin:44px auto 0; padding:22px 30px; border-radius:22px;
        background:linear-gradient(120deg,rgba(107,57,151,.25),rgba(255,255,255,.02)); border:1px solid rgba(205,176,242,.25); }
.pw-incluye > span { font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lilac); line-height:1.5; max-width:13em; }
.pw-incluye div { display:flex; gap:12px; align-items:center; }
.pw-incluye div i { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--lilac); font-size:18px; background:rgba(107,57,151,.3); }
.pw-incluye b { display:block; font-size:15px; }
.pw-incluye small { display:block; font-size:12.5px; color:var(--muted); }
.pw-planes { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; align-items:stretch; }
.pw-plan { position:relative; display:flex; flex-direction:column; padding:40px 26px 30px; border-radius:26px; background:rgba(255,255,255,.03); border:1px solid var(--line);
        transition:transform .6s var(--ease), opacity .5s, border-color .5s, background .5s, box-shadow .6s; isolation:isolate; overflow:hidden; }
.pw-plan::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s; background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(185,138,240,.18),transparent 50%); }
.pw-plan:hover::before { opacity:1; }
.pw-planes.eligiendo .pw-plan:not(.elegido) { opacity:.55; transform:scale(.98); }
.pw-plan.elegido { border-color:rgba(205,176,242,.7); background:linear-gradient(165deg,rgba(107,57,151,.35),rgba(255,255,255,.03) 70%); transform:translateY(-10px);
        box-shadow:0 50px 100px -40px rgba(107,57,151,1); }
.pw-plan .sello { position:absolute; top:0; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:0 0 10px 10px;
        background:var(--cream); color:var(--ink); }
.pw-plan.medida { border-style:dashed; border-color:rgba(205,176,242,.4); }
.pw-plan h3 { margin:0; font-size:1.3rem; font-weight:800; letter-spacing:-.03em; }
.pw-plan .gancho { margin:6px 0 24px; font-size:13.5px; color:var(--lilac); }
.pw-plan .precio { display:flex; align-items:flex-start; gap:4px; line-height:1; }
.pw-plan .precio sup { font-size:18px; font-weight:600; color:var(--muted); margin-top:8px; }
.pw-plan .precio b { font-size:clamp(3rem,4.4vw,3.9rem); font-weight:800; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.pw-plan .precio.beetle b { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.3rem,3.4vw,3rem); letter-spacing:-.02em; line-height:1; }
.pw-plan .nota { margin:10px 0 20px; font-size:12px; color:var(--dim); }
.pw-plan .ideal { margin:0 0 18px; font-size:14px; color:var(--muted); line-height:1.55; }
.pw-plan ul { list-style:none; padding:18px 0 0; margin:0 0 26px; border-top:1px solid var(--line); flex:1; }
.pw-plan li { display:flex; gap:10px; font-size:14px; line-height:1.4; color:rgba(246,241,251,.82); margin-bottom:11px; }
.pw-plan li i { color:var(--lilac); margin-top:2px; flex:none; }
.pw-plan .btn { width:100%; }
.pw-paquetes .letra { max-width:760px; margin:34px auto 0; text-align:center; font-size:12.5px; line-height:1.6; color:var(--dim); }

/* ── Pasos con línea que se llena ── */
.pw-pasos { padding:140px 0; }
.pw-linea { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:70px; }
.pw-linea::before, .pw-linea::after { content:''; position:absolute; left:0; right:0; top:27px; height:2px; background:rgba(255,255,255,.08); }
.pw-linea::after { background:linear-gradient(90deg,var(--purple),var(--lilac)); transform:scaleX(var(--l,0)); transform-origin:left; }
.pw-linea .p { position:relative; z-index:1; }
.pw-linea .p .bola { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:15px; background:#140B20; border:1px solid var(--line);
        color:var(--muted); transition:background .5s, color .5s, border-color .5s, box-shadow .5s; }
.pw-linea .p.on .bola { background:var(--cream); color:var(--ink); border-color:var(--cream); box-shadow:0 0 40px rgba(205,176,242,.55); }
.pw-linea h3 { margin:28px 0 10px; font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:800; letter-spacing:-.04em; }
.pw-linea p { margin:0; color:var(--muted); font-size:15.5px; line-height:1.6; max-width:22rem; }

/* ── Cierre ── */
.pw-cierre { position:relative; padding:170px 0 150px; overflow:hidden; text-align:center; }
.pw-cierre h2 { font-size:clamp(2.8rem,7.4vw,7rem); }
.pw-cierre .lead { margin:26px auto 40px; }
.pw-cierre .lead strong { color:var(--cream); }
.pw-cierre .micro { margin-top:28px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* ── Responsive ── */
@media (max-width:1100px) {
    .pw-planes { grid-template-columns:1fr 1fr; }
    .pw .panel.busca { left:0; } .pw .panel.vitales, .pw .panel.datos { right:0; }
}
/* ── Celular: la página medía 19 pantallas y los precios empezaban en el 72%.
      Aquí se acorta el escenario (de 5 pasos a 3) y se recorta el aire de cada sección. ── */
@media (max-width:980px) {
    .pw-show { height:240vh; }
    .pw-show .paso.solo-escritorio { display:none; }
    .pw-frase { padding:70px 0; }
    .pw-construye { padding:80px 0 70px; }
    .pw-bento { margin-top:36px; gap:12px; }
    .pw-luzcard { padding:26px 24px; }
    .pw-luzcard.big { padding:30px 26px; }
    .pw-luzcard i.ic { margin-bottom:18px; }
    .pw-audit { padding:90px 0; }
    .pw-audit .buscador { margin-top:30px; }
    .pw-numeros { padding:70px 0; }
    .pw-paquetes { padding:90px 0 80px; }
    .pw-selector { margin-top:28px; }
    .pw-incluye { margin-top:28px; padding:20px 22px; }
    .pw-planes { margin-top:24px; }
    .pw-plan { padding:34px 24px 26px; }
    .pw-pasos { padding:80px 0; }
    .pw-linea { margin-top:44px; }
    .pw-cierre { padding:100px 0 90px; }
    .pw-galeria.nativa .fijo { padding:80px 0 70px; }
    .pw-galeria .cabeza { margin-bottom:26px; }

    .pw-nav nav a:not(.btn) { display:none; }
    .pw-hero { padding-top:110px; }
    .pw-hero .grid { grid-template-columns:1fr; }
    .pw-bajar { display:none; }
    .pw-show .grid { grid-template-columns:1fr; gap:10px; }
    .pw-show .textos { min-height:200px; }
    .pw-show .paso h3 { font-size:clamp(1.9rem,7.5vw,2.6rem); margin:10px 0 10px; }
    .pw-show .paso p { font-size:15px; }
    .pw-show .puntos { position:static; margin:0; }
    .pw .escena { height:min(48svh,420px); }
    .pw .panel { min-width:0; padding:14px 16px; }
    .pw .panel.vitales, .pw .panel.datos { width:240px; bottom:2%; top:auto; }
    .pw .panel.busca { width:270px; top:4%; }
    .pw-bento { grid-template-columns:1fr 1fr; }
    .pw-luzcard.big { grid-column:span 2; }
    .pw-luzcard { grid-column:span 1; }
    .pw-luzcard:last-child { grid-column:span 2; }
    .pw-audit .resultados { grid-template-columns:1fr; }
    .pw-numeros .fila4 { grid-template-columns:1fr 1fr; row-gap:40px; }
    .pw-numeros .n:nth-child(2) { border-right:0; }
    .pw-incluye { grid-template-columns:1fr; gap:16px; }
    .pw-galeria .pieza { width:78vw; }
}
@media (max-width:640px) {
    .pw-hero h1 { font-size:clamp(2.9rem,14vw,4.2rem); }
    .pw-hero .rasgos { grid-template-columns:1fr; }
    .pw .dev.tel { width:min(44%,22svh); }
    .pw .panel .grafica { height:70px; }
    .pw .panel .eventos { display:none; }
    .pw-bento { grid-template-columns:1fr; }
    .pw-luzcard, .pw-luzcard.big, .pw-luzcard:last-child { grid-column:auto; }
    .pw-luzcard.big { min-height:0; padding:34px 28px; }
    .pw-planes { grid-template-columns:1fr; }
    .pw-plan.elegido { transform:none; }
    .pw-selector { border-radius:22px; }
    .pw-selector button { padding:10px 14px; font-size:13px; }
    .pw-linea { grid-template-columns:1fr; gap:34px; }
    .pw-linea::before, .pw-linea::after { left:27px; right:auto; top:0; bottom:0; width:2px; height:auto; }
    .pw-linea::after { transform:scaleY(var(--l,0)); transform-origin:top; }
    .pw-linea .p { padding-left:80px; }
    .pw-linea .p .bola { position:absolute; left:0; top:0; }
    .pw-linea h3 { margin-top:10px; }
    .pw-audit .buscador { flex-direction:column; border-radius:24px; }
    .pw-audit .buscador input { padding:14px 16px; text-align:center; }
    .pw-galeria .pieza { width:84vw; }
    .pw-galeria .todos { width:70vw; }
}
/* Sin animación: todo visible, sin escenario fijo */
@media (prefers-reduced-motion:reduce) {
    .pw .rv { opacity:1; transform:none; transition:none; }
    .pw-hero h1 .w > span { animation:none; transform:none; }
    .pw .lq i, .pw-bajar span, .pw-audit .escaneo .laser { animation:none; }
    .pw-frase p span { color:var(--cream); }
}

/* Galería en táctil o angosta: carrusel nativo con imán, sin fijar la sección */
.pw-galeria.nativa { height:auto !important; }
.pw-galeria.nativa .fijo { position:static; height:auto; padding:130px 0 110px; }
.pw-galeria.nativa .pista { overflow-x:auto; scroll-snap-type:x mandatory; transform:none !important; scrollbar-width:none; padding-bottom:40px; }
.pw-galeria.nativa .pista::-webkit-scrollbar { display:none; }
.pw-galeria.nativa .pieza, .pw-galeria.nativa .todos { scroll-snap-align:center; }
.pw-galeria.nativa .avance { display:none; }

/* ── Hero: botones y visual de sitios reales ── */
.pw-hero .ctas { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px; }
.pw-hero .nota { margin-top:22px; max-width:520px; }
.pw-hero-vis { position:relative; height:min(66vh,600px); cursor:pointer; }
.pw-hero-vis:focus-visible { outline:2px solid var(--lilac); outline-offset:14px; border-radius:20px; }
.pw-hero-vis .toca { position:absolute; left:50%; top:50%; z-index:4; transform:translate(-50%,-50%) scale(.9); opacity:0; transition:.45s var(--ease);
        padding:13px 22px; border-radius:999px; background:var(--cream); color:var(--ink); font-size:14px; font-weight:700; white-space:nowrap;
        box-shadow:0 20px 50px -12px rgba(0,0,0,.7); pointer-events:none; }
.pw-hero-vis:hover .toca, .pw-hero-vis:focus-visible .toca { opacity:1; transform:translate(-50%,-50%) scale(1); }
.pw-hero-vis:hover .navegador { border-color:rgba(205,176,242,.35); }
.pw-hero-vis .capa { position:absolute; transition:transform .9s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.pw-hero-vis .navegador { left:0; top:8%; width:92%; border-radius:16px; overflow:hidden; background:#0E0816; border:1px solid rgba(255,255,255,.12);
        box-shadow:0 60px 120px -40px rgba(107,57,151,.85); animation:pw-flota 9s ease-in-out infinite; }
.pw-hero-vis .navegador .barra { height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:linear-gradient(#1D1228,#150D1F); }
.pw-hero-vis .navegador .barra i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }
.pw-hero-vis .navegador .barra span { margin-left:10px; font:500 10.5px ui-monospace,Menlo,monospace; color:rgba(255,255,255,.45); }
.pw-hero-vis .navegador .pant { aspect-ratio:16/10; overflow:hidden; }
.pw-hero-vis .pant img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.pw-hero-vis .telefono { right:0; bottom:2%; width:34%; aspect-ratio:9/19; border-radius:32px; overflow:hidden; border:6px solid #1D1228; background:#140B20;
        box-shadow:0 50px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(205,176,242,.2); animation:pw-flota 9s ease-in-out -4.5s infinite; }
.pw-hero-vis .telefono .pant { height:100%; }
.pw-hero-vis .chip-vis { left:6%; bottom:6%; display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:999px; font-size:13px; font-weight:600;
        background:rgba(18,10,28,.8); border:1px solid rgba(205,176,242,.25); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.pw-hero-vis .chip-vis .punto { width:8px; height:8px; border-radius:50%; background:#7EE2A8; box-shadow:0 0 12px #7EE2A8; }
@keyframes pw-flota { 50% { translate:0 -12px; } }

@media (max-width:980px) {
    .pw-hero-vis { height:min(64vw,460px); margin-top:10px; }
}
@media (max-width:640px) {
}
@media (prefers-reduced-motion:reduce) {
    .pw-hero-vis .navegador, .pw-hero-vis .telefono { animation:none; }
}

/* Atajos de un toque bajo los botones del hero */
.pw-hero .tap-rapido { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.pw-hero .tap-rapido button { display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:11px 16px; border-radius:999px;
        font:600 13.5px var(--sans); color:var(--cream); background:rgba(255,255,255,.05); border:1px solid var(--line);
        transition:background .25s, border-color .25s, transform .25s; }
.pw-hero .tap-rapido button span { color:var(--lilac); transition:transform .25s; }
.pw-hero .tap-rapido button:hover { background:rgba(107,57,151,.3); border-color:rgba(205,176,242,.4); transform:translateY(-1px); }
.pw-hero .tap-rapido button:hover span { transform:translateX(3px); }

/* ── Celular: lo que decide (precio + botones) tiene que caber en la primera pantalla.
      El navegador de Instagram deja ~700 px útiles, y ahí los botones caían fuera. ── */
@media (max-width:640px) {
    .pw-hero { padding:96px 0 60px; min-height:0; }
    .pw-hero .grid > div:first-child { display:flex; flex-direction:column; }
    .pw-hero .eyebrow { order:1; }
    .pw-hero h1 { order:2; font-size:clamp(2.1rem,10.5vw,3rem); margin:14px 0 14px; }
    .pw-hero .lead { order:3; font-size:15.5px; margin:0 0 16px; }
    .pw-hero .lead br { display:none; }
    .pw-hero .caja-desde { order:4; }
    .pw-hero .desde { order:4; font-size:14px; padding:9px 14px; margin:0 0 16px; }
    .pw-hero .ctas { order:5; margin:0 0 14px; }
    .pw-hero .ctas .btn { flex:1; justify-content:center; padding:15px 18px; }
    .pw-hero .tap-rapido { order:6; margin:0 0 20px; }
    .pw-hero .tap-rapido button { padding:10px 14px; font-size:13px; }
    .pw-hero .rasgos { order:7; margin:0 0 18px; gap:10px; }
    .pw-hero .micro { order:8; }
    .pw-hero .nota { order:9; }
    .pw-hero-vis { order:10; }
}

/* 9 oct 2026: suscripción. Mensualidad con «/mes» y la IA como segunda opción bajo «Contratar» */
.pw-plan .precio small { align-self:flex-end; margin:0 0 8px 2px; font-size:16px; font-weight:600; color:var(--muted); }
.pw-plan a.btn { justify-content:center; text-decoration:none; }
.pw-plan .pw-ia { display:block; width:100%; margin-top:10px; padding:4px 0; border:0; background:none; color:var(--lilac, #CDB0F2); font-weight:600; font-size:13px; font-family:inherit; cursor:pointer; }
.pw-plan .pw-ia:hover { text-decoration:underline; }

.pw-plan .pw-gratis { margin:10px 0 0; font-size:12.5px; text-align:center; color:var(--muted, rgba(246,241,251,.64)); }
.pw-plan .pw-links { display:flex; justify-content:center; gap:18px; margin-top:6px; }
.pw-plan .pw-links a { font-size:13px; font-weight:700; color:var(--cream, #F6F1FB); text-decoration:underline; text-underline-offset:3px; padding:4px 0; }
.pw-plan .pw-links .pw-ia { width:auto; margin:0; }