/* lpx: componentes interactivos de las landings de Desarrollo web (1luis.com) */
@property --lpn-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --lw-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lpxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lpxPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes lpxGrow{from{width:0}}
@keyframes lpxBar{to{width:100%}}
@keyframes lpxSpin{to{transform:rotate(360deg)}}
@keyframes lpxDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@keyframes lpxPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
@keyframes lpxStamp{from{opacity:0;transform:rotate(-8deg) scale(1.7)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes lpxBlink{50%{opacity:0}}
@keyframes lpnSpin{to{--lpn-a:360deg}}
@keyframes lwSpin{to{--lw-a:360deg}}
@keyframes lpsShine{0%,60%{left:-60%}100%{left:130%}}
.lpx li:before,.lpx li:after{content:none!important;display:none!important}
.lpx li{margin:0!important;padding-left:0!important}
.lpx [hidden],.lpi-panel[hidden],.lpp-panel[hidden],.lph-p[hidden],[data-only][hidden]{display:none!important}

/* ===== Hero: botones a secciones ===== */
.lpn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;max-width:640px}
.lpn a{--lpn-a:0deg;position:relative;display:block;border-radius:16px;padding:1.5px;text-decoration:none;color:var(--fg);background:conic-gradient(from var(--lpn-a),rgba(254,168,0,.18),#fea800 12%,rgba(254,168,0,.18) 26%,rgba(254,168,0,.18));animation:lpnSpin 5s linear infinite;transition:transform .25s,box-shadow .25s}
.lpn a:nth-child(2){animation-delay:-1.7s}.lpn a:nth-child(3){animation-delay:-3.4s}
.lpn a:hover,.lpn a:focus-visible{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(254,168,0,.7);outline:none}
.lpn .in{display:flex;align-items:center;gap:11px;height:100%;border-radius:14.5px;background:var(--panel);padding:11px 12px}
.lpn i.ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(254,168,0,.14);color:#fea800;font-size:16px;transition:background .25s,color .25s}
.lpn a:hover i.ic,.lpn a:focus-visible i.ic{background:#fea800;color:#111}
.lpn b{display:block;font-size:14.5px;line-height:1.2}
.lpn small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.lpn i.ar{margin-left:auto;color:var(--ink);font-size:12px;transition:transform .25s}
.lpn a:hover i.ar{transform:translateY(3px)}
section[id]{scroll-margin-top:130px}

/* ===== Selector de opciones (hero y secciones) ===== */
.lph{margin-top:28px;max-width:640px}
.lph.wide{max-width:none;margin-top:6px}
.lph-t{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:12px}
.lph-t:after{content:"";flex:1;height:1px;background:var(--line)}
.lph-opts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
.lph-opts button{position:relative;overflow:hidden;font:inherit;font-size:13px;font-weight:700;line-height:1.2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .2s}
.lph-opts button:hover{transform:translateY(-2px);border-color:rgba(254,168,0,.5)}
.lph-opts button:focus-visible{outline:2px solid #fea800;outline-offset:2px}
.lph-opts button i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--card);color:var(--ink);transition:background .2s,color .2s}
.lph-opts button[aria-selected="true"]{border-color:#fea800;background:rgba(254,168,0,.1)}
.lph-opts button[aria-selected="true"] i{background:#fea800;color:#111}
.lph-opts button .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:#fea800}
.lph.is-auto button[aria-selected="true"] .bar{animation:lpxBar 5s linear forwards}
.lph.is-paused button[aria-selected="true"] .bar{animation-play-state:paused}
.lph-card{margin-top:10px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 16px;min-height:118px}
.lph.wide .lph-card{padding:18px}
.lph-p.in{animation:lpxIn .35s ease both}
.lph-p b.t{display:block;font-size:15px;margin-bottom:4px}
.lph-p>p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--muted)}
.lph-p .ch{display:flex;flex-wrap:wrap;gap:6px}
.lph-p .ch span{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.lph-p .ch i{color:#22c55e;margin-right:5px}
.lph-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lph-vs>div{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px}
.lph-vs>div b{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:6px}
.lph-vs>div b i{color:#fea800}
.lph-vs>div p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.lph-vs .good{border-color:rgba(34,197,94,.4)}
.lph-vs .bad{border-color:rgba(248,113,113,.35)}
.lph-vs .good b i{color:#22c55e}.lph-vs .bad b i{color:#f87171}
.lph-vs code{display:block;margin-top:8px;font-size:11.5px;background:var(--chip);border-radius:8px;padding:6px 8px;word-break:break-all;color:var(--fg)}
.lph-imp{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.lph-imp.alto{background:rgba(248,113,113,.14);color:#f87171}.lph-imp.medio{background:rgba(254,168,0,.14);color:var(--ink)}

/* ===== Tarjeta lateral ===== */
.sl-side{position:relative}
.sl-side .sl-who{position:relative;flex-direction:column;text-align:center;gap:12px;padding:8px 0 18px}
.sl-side .sl-who:before{content:"";position:absolute;top:-24px;left:50%;width:240px;height:240px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(254,168,0,.24),transparent);pointer-events:none}
.sl-side .sl-who img{--lw-a:0deg;position:relative;width:172px;height:172px;padding:5px;border:4px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--lw-a),#fea800,#ffd36b 15%,#c27c00 30%,rgba(254,168,0,.12) 55%,#fea800) border-box;box-shadow:0 20px 44px -16px rgba(254,168,0,.65);animation:lwSpin 6s linear infinite;transition:transform .35s ease}
.sl-side .sl-who img:hover{transform:scale(1.05) rotate(-2deg)}
.sl-side .sl-who strong{font-size:22px;letter-spacing:-.01em}
.sl-side .sl-who span{font-size:13.5px}
.lps{display:grid;gap:14px}
.lps-li{position:absolute;top:158px;left:calc(50% + 42px);z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:#fea800;color:#111;border:3px solid var(--card);box-shadow:0 6px 16px -6px rgba(0,0,0,.6);text-decoration:none;transition:transform .2s,box-shadow .2s}
.lps-li:hover,.lps-li:focus-visible{transform:scale(1.12);box-shadow:0 8px 20px -6px rgba(254,168,0,.8);outline:none}
.lps-intro{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.lps-intro strong{color:var(--fg)}
.lps-impact{margin:0;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-left:3px solid #fea800;border-radius:10px;padding:10px 12px}
.lps-impact i{color:#fea800;margin-top:3px}
.lps-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lps-tl li{padding:10px 8px!important;border-radius:10px;background:var(--panel);border:1px solid var(--line);text-align:center}
.lps-tl b{display:block;color:#fea800;font-size:15px}
.lps-tl span{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.lps-price{position:relative;overflow:hidden;border-radius:16px;padding:18px;border:1px solid rgba(254,168,0,.55);background:radial-gradient(120% 90% at 100% 0%,rgba(254,168,0,.28),transparent 60%),var(--panel);box-shadow:0 18px 40px -20px rgba(254,168,0,.6)}
.lps-price:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-20deg);animation:lpsShine 4.5s ease-in-out infinite;pointer-events:none}
.lps-price small{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(254,168,0,.14);padding:4px 10px;border-radius:999px}
.lps-price .amt{display:flex;align-items:baseline;gap:8px;margin:12px 0 6px;flex-wrap:wrap}
.lps-price .from{font-size:14px;color:var(--muted);font-weight:600}
.lps-price .amt b{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.02em;background:linear-gradient(180deg,#ffd36b,#fea800);-webkit-background-clip:text;background-clip:text;color:transparent}
.lps-price .iva{font-size:14px;font-weight:700;color:var(--fg)}
.lps-price p{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.lps-price p:last-of-type{margin-bottom:14px}
.lps-price p i{color:#fea800;margin-top:2px}
.lps-price a{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#fea800;color:#111;font-weight:700;font-size:14.5px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.lps-price a:hover,.lps-price a:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(254,168,0,.85);outline:none}

/* ===== Explorador (pestañas + panel visual) ===== */
.lpi{margin:4px 0 22px}
.lpi-intro{color:var(--muted);margin:0 0 16px;font-size:15px}
.lpi-intro i{color:var(--ink);margin-right:6px}
.lpi-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.lpi-tabs{position:relative;display:flex;flex-direction:column;gap:6px}
.lpi-tab{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--fg);cursor:pointer;overflow:hidden;font:inherit;transition:background .2s,border-color .2s}
.lpi-tab:hover{background:var(--card)}
.lpi-tab:focus-visible{outline:2px solid #fea800;outline-offset:2px}
.lpi-tab.is-on{background:var(--card-h);border-color:rgba(254,168,0,.45)}
.lpi-n{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;min-width:16px}
.lpi-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--chip);color:var(--ink);flex:none;font-size:15px;transition:background .2s,color .2s}
.lpi-tab.is-on .lpi-ic{background:#fea800;color:#111}
.lpi-tl{display:flex;flex-direction:column;line-height:1.25}
.lpi-tl b{font-size:15px}
.lpi-tl small{font-size:12.5px;color:var(--muted)}
.lpi-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:#fea800}
.lpi.is-auto .lpi-tab.is-on .lpi-bar{animation:lpxBar 8s linear forwards}
.lpi.is-paused .lpi-tab.is-on .lpi-bar{animation-play-state:paused}
.lpi-stage{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;min-height:440px}
.lpi-panel,.lpp-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:center}
.lpi-panel.is-in .lpx-copy,.lpi-panel.is-in .lpx-vis,.lpp-panel.is-in .lpx-copy,.lpp-panel.is-in .lpx-vis{animation:lpxIn .45s ease both}
.lpi-panel.is-in .lpx-vis,.lpp-panel.is-in .lpx-vis{animation-delay:.08s}
.lpx-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700;margin:0 0 8px}
.lpx-copy h3{font-size:24px;line-height:1.2;margin:0 0 10px;font-weight:700}
.lpx-copy p{color:var(--muted);margin:0 0 14px;line-height:1.6}
.lpx-h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 8px}
.lpx-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.lpx-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.lpx-list li i{color:#fea800;margin-top:4px;font-size:13px}
.lpx-you{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:0 0 14px;line-height:1.45}
.lpx-you i{color:var(--ink);margin-top:3px}
.lpx-you b{color:var(--fg)}
.lpx-res{border-left:3px solid #fea800;background:var(--panel);border-radius:10px;padding:10px 14px}
.lpx-res small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink)}
.lpx-res b{font-size:15px}
.lpx-vis{position:relative;border-radius:14px;background:radial-gradient(120% 80% at 85% 0%,rgba(254,168,0,.10),transparent 60%),var(--panel);border:1px solid var(--line);padding:20px;min-height:340px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.lpx-note{font-size:11.5px;color:var(--muted);text-align:center;margin:0}

/* ===== Recorrido por etapas ===== */
.lpp{margin:4px 0 6px}
.lpp-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px;margin:0 0 18px}
.lpp-track{position:absolute;left:calc(50% / var(--n,5));right:calc(50% / var(--n,5));top:23px;height:2px;background:var(--line);border-radius:2px}
.lpp-fill{display:block;height:100%;width:0;background:#fea800;border-radius:2px;transition:width .5s ease}
.lpp-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:transparent;border:0;padding:0 2px;color:var(--fg);font:inherit;cursor:pointer}
.lpp-step:focus-visible{outline:2px solid #fea800;outline-offset:4px;border-radius:12px}
.lpp-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:16px;border:1px solid var(--line);background:var(--panel);color:var(--muted);transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.lpp-step:hover .lpp-dot{border-color:rgba(254,168,0,.6);color:var(--ink)}
.lpp-step.is-done .lpp-dot{border-color:rgba(254,168,0,.6);color:var(--ink);background:linear-gradient(rgba(254,168,0,.12),rgba(254,168,0,.12)),var(--panel)}
.lpp-step.is-on .lpp-dot{background:#fea800;color:#111;border-color:#fea800;box-shadow:0 0 0 5px var(--panel),0 0 0 6px rgba(254,168,0,.55)}
.lpp-k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.lpp-step.is-on .lpp-k,.lpp-step.is-done .lpp-k{color:var(--ink)}
.lpp-nm{font-size:14.5px;font-weight:700;line-height:1.2}
.lpp-bar{display:block;width:60px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0}
.lpp-bar i{display:block;height:100%;width:0;background:#fea800}
.lpp.is-auto .lpp-step.is-on .lpp-bar{opacity:1}
.lpp.is-auto .lpp-step.is-on .lpp-bar i{animation:lpxBar 9s linear forwards}
.lpp.is-paused .lpp-step.is-on .lpp-bar i{animation-play-state:paused}
.lpp-stage{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.lpp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.lpp-nav button{font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer}
.lpp-nav button:hover{border-color:rgba(254,168,0,.6)}
.lpp-nav [data-go="next"]{background:#fea800;border-color:#fea800;color:#111}
.lpp-nav button[disabled]{opacity:.35;cursor:default}

/* ===== Comparador agencia vs conmigo ===== */
.lpv{--bad:#f87171;--good:#22c55e;margin:6px 0 26px}
.lpv-box{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:radial-gradient(90% 70% at 100% 0%,rgba(254,168,0,.10),transparent 60%),var(--card);padding:24px}
.lpv-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.lpv-ask{display:flex;align-items:center;gap:12px}
.lpv-ask>i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fea800;color:#111;font-size:16px;flex:none}
.lpv-ask small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lpv-ask b{font-size:18px;line-height:1.25}
.lpv-sw{display:inline-flex;padding:5px;border-radius:999px;background:var(--panel);border:1px solid var(--line);gap:4px}
.lpv-sw button{font:inherit;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.lpv-sw button[aria-pressed="true"][data-m="ag"]{background:rgba(248,113,113,.16);color:var(--bad)}
.lpv-sw button[aria-pressed="true"][data-m="me"]{background:#fea800;color:#111}
.lpv-sw button:focus-visible,.lpv-cta:focus-visible,.lpv-again:focus-visible{outline:2px solid #fea800;outline-offset:2px}
.lpv-stage{padding:14px 0}
.lpv[data-m="ag"] .me,.lpv[data-m="me"] .ag{display:none!important}
.lpv-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.lpv-n{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;opacity:.18;transform:translateY(6px);transition:opacity .45s,transform .45s}
.lpv-n.on{opacity:1;transform:none}
.lpv-n .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--fg);font-size:17px;position:relative;z-index:1}
.lpv-n b{font-size:13.5px;line-height:1.2}
.lpv-n q{display:block;quotes:none;font-size:13px;line-height:1.4;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 10px;position:relative;width:100%}
.lpv-n q:before{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.lpv-n:nth-child(2) q{opacity:.9}.lpv-n:nth-child(3) q{opacity:.8}.lpv-n:nth-child(4) q{opacity:.7}.lpv-n:nth-child(5) q{opacity:.6}
.lpv-n em{display:block;font-style:normal;font-size:11.5px;line-height:1.35;color:var(--bad)}
.lpv-n em i{margin-right:4px}
.lpv-lk{position:absolute;top:22px;left:calc(-50% - 14px + 23px);width:calc(100% + 14px - 46px);height:2px;background:repeating-linear-gradient(90deg,var(--bad) 0 6px,transparent 6px 11px);opacity:.7}
.lpv-lk:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--bad)}
.lpv-lk span{position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--panel);border:1px solid var(--bad);color:var(--bad);font-size:10px;display:grid;place-items:center}
.lpv-hubw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.lpv-hub{position:relative;width:320px;height:300px;margin:0 auto}
.lpv-ring{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:2px dashed rgba(254,168,0,.35)}
.lpv[data-m="me"] .lpv-ring{animation:lpxSpin 30s linear infinite}
.lpv-av{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fea800,#c27c00);box-shadow:0 0 0 6px var(--card),0 0 0 8px #fea800,0 20px 50px -15px rgba(254,168,0,.6)}
.lpv-av img{position:absolute;width:250%;max-width:none;height:auto;left:-77%;top:-4%}
.lpv-chip{position:absolute;left:50%;top:50%;--r:120px;transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a)*-1));display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;background:var(--panel);border:1px solid rgba(254,168,0,.5);color:var(--fg);box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.lpv-chip i{color:#fea800}
.lpv-chip.pop{animation:lpvPop .4s cubic-bezier(.2,1.4,.5,1) both}
@keyframes lpvPop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.lpv-say{display:grid;gap:12px}
.lpv-say q{display:block;quotes:none;font-size:20px;line-height:1.35;font-weight:700}
.lpv-say q span{color:#fea800}
.lpv-say p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
.lpv-say small{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--good)}
.lpv-foot{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.lpv-meter>span{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.lpv-meter .tr{height:12px;border-radius:999px;background:var(--chip);overflow:hidden}
.lpv-meter .tr i{display:block;height:100%;width:32%;border-radius:999px;background:linear-gradient(90deg,#fea800,var(--bad));transition:width .6s ease}
.lpv[data-m="me"] .lpv-meter .tr i{background:linear-gradient(90deg,#fea800,var(--good))}
.lpv-meter small{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.lpv-stats{display:flex;gap:22px;margin-top:16px}
.lpv-stats div{display:flex;align-items:baseline;gap:6px}
.lpv-stats b{font-size:34px;line-height:1;font-weight:800}
.lpv-stats span{font-size:13px;color:var(--muted)}
.lpv[data-m="ag"] .lpv-stats b{color:var(--bad)}
.lpv[data-m="me"] .lpv-stats b{color:#fea800}
.lpv-res h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
.lpv-res ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lpv-res li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.lpv-res .ag i{color:var(--bad);margin-top:4px}
.lpv-res .me i{color:var(--good);margin-top:4px}
.lpv-res,.lpv-cta,.lpv-again{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
.lpv.done .lpv-res,.lpv.done .lpv-cta,.lpv.done .lpv-again{opacity:1;transform:none;pointer-events:auto}
.lpv-acts{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.lpv-cta{font:inherit;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:0;background:#fea800;color:#111;cursor:pointer;box-shadow:0 10px 30px -10px rgba(254,168,0,.7)}
.lpv.done[data-m="ag"] .lpv-cta{animation:lpvNudge 1.8s ease-in-out infinite 1s}
@keyframes lpvNudge{0%,100%{transform:none}50%{transform:translateX(4px)}}
.lpv-again{font:inherit;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer}
.lpv-lead{margin:0 0 14px;font-weight:700;font-size:17px}

/* ===== Primitivas visuales ===== */
.x-card{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px}
.x-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;font-weight:700;margin-bottom:8px}
.x-hd small{font-weight:500;color:var(--muted)}
.x-hd i{color:#fea800;margin-right:6px}
.x-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.x-chips span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.x-chips i{color:#22c55e;margin-right:4px}
.x-code{display:block;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.6;background:#0b0f14;color:#cbd5e1;border-radius:12px;padding:12px 14px;white-space:pre;overflow:auto;border:1px solid var(--line)}
.x-code .k{color:#fea800}.x-code .s{color:#86efac}.x-code .c{color:#64748b}
.x-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--chip);border:1px solid var(--line);align-self:center;flex-wrap:wrap;justify-content:center}
.x-seg button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:background .2s,color .2s}
.x-seg button[aria-pressed="true"]{background:#fea800;color:#111}
.x-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.x-check li{display:flex;gap:10px;align-items:center;font-size:13px;padding:8px 10px!important;border-radius:10px;border:1px solid var(--line);background:var(--card);transition:border-color .3s}
.x-check li .w{width:20px;text-align:center;color:var(--muted)}
.x-check li .w .fa-circle-notch{animation:lpxSpin .8s linear infinite}
.x-check li .w .fa-circle-check{display:none;color:#22c55e}
.x-check li.ok{border-color:rgba(34,197,94,.35)}
.x-check li.ok .w .fa-circle-notch{display:none}
.x-check li.ok .w .fa-circle-check{display:inline}
.x-check li small{margin-left:auto;font-size:10.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.x-log{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:#0b0f14;color:#a7f3d0;border-radius:10px;padding:9px 11px;opacity:0;transition:opacity .4s}
.x-check.all+.x-log{opacity:1}
.x-again{align-self:center;font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--chip);color:var(--fg);cursor:pointer}
.x-doc{display:grid;gap:10px}
.x-f label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.x-f span{display:block;font-size:13.5px;border-bottom:1px dashed var(--line);padding:3px 0 6px;min-height:26px}
.x-goal{display:flex;gap:12px;align-items:center;border:1px solid rgba(254,168,0,.45);background:rgba(254,168,0,.08);border-radius:12px;padding:10px 12px;font-size:13px;transition:opacity .4s,transform .4s}
.x-goal>i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fea800;color:#111;flex:none}
.x-goal small{display:block;color:var(--muted);font-size:11px}
.x-doc.typing~.x-goal{opacity:.25;transform:translateY(4px)}
.x-stamp-wrap{position:relative}
.x-stamp{position:absolute;right:14px;bottom:10px;transform:rotate(-8deg);border:2px solid #22c55e;color:#22c55e;background:var(--panel);font-weight:800;letter-spacing:.12em;padding:4px 10px;border-radius:8px;font-size:13px;text-transform:uppercase;z-index:2}
.is-in .x-stamp{animation:lpxStamp .4s cubic-bezier(.2,1.4,.5,1) both;animation-delay:1.5s}
.x-tree{display:grid;gap:8px;font-size:12.5px}
.x-tree .node{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card)}
.x-tree .node i{color:#fea800;width:16px;text-align:center}
.x-tree .node code{margin-left:auto;font-size:11px;color:var(--muted)}
.x-tree .node.root{border-color:rgba(254,168,0,.5);background:rgba(254,168,0,.08);font-weight:700}
.x-tree .kids{display:grid;gap:8px;margin-left:22px;padding-left:14px;border-left:2px dashed rgba(254,168,0,.35)}
.is-in .x-tree .node{animation:lpxIn .35s ease both}
.is-in .x-tree .kids .node:nth-child(2){animation-delay:.1s}.is-in .x-tree .kids .node:nth-child(3){animation-delay:.2s}.is-in .x-tree .kids .node:nth-child(4){animation-delay:.3s}.is-in .x-tree .kids .node:nth-child(5){animation-delay:.4s}
.x-dev{width:210px;max-width:100%;margin:0 auto;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);transition:width .45s ease}
[data-v="desk"] .x-dev{width:100%}
[data-v="tab"] .x-dev{width:72%}
.x-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden}
.x-bar em{font-style:normal;font-weight:700;font-size:10px;padding:2px 8px;border-radius:999px;background:rgba(254,168,0,.15);color:var(--ink)}
.x-bar .lock{color:#22c55e}
.x-pg{padding:10px;display:grid;gap:8px}
.x-hero{display:grid;gap:8px;grid-template-columns:1fr}
[data-v="desk"] .x-hero,[data-v="tab"] .x-hero{grid-template-columns:1.2fr 1fr;align-items:center}
.x-tx{display:grid;gap:5px}
.x-tx b{font-size:13px;line-height:1.2}
.x-ln{display:block;height:6px;border-radius:3px;background:var(--line)}
.x-ln.s{width:70%}.x-ln.xs{width:45%}
.x-btn{justify-self:start;background:#fea800;color:#111;font-size:10.5px;font-weight:700;border-radius:6px;padding:5px 10px;margin-top:2px}
.x-img{height:70px;border-radius:9px;background:linear-gradient(135deg,rgba(254,168,0,.55),rgba(254,168,0,.08))}
.x-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.x-cards span{height:34px;border-radius:7px;background:var(--chip);border:1px solid var(--line)}
.x-race{display:grid;gap:12px}
.x-race .rw{display:grid;grid-template-columns:130px minmax(0,1fr) 66px;gap:10px;align-items:center;font-size:12.5px}
.x-race .rw>span{color:var(--muted)}
.x-race .me>span{color:var(--fg);font-weight:700}
.x-race .tr{height:12px;border-radius:999px;background:var(--chip);overflow:hidden}
.x-race .tr i{display:block;height:100%;width:100%;border-radius:999px;background:var(--muted);opacity:.5}
.x-race .me .tr i{background:#fea800;opacity:1}
.is-in .x-race .tr i{animation:lpxGrow 3.6s cubic-bezier(.4,.1,.6,1) both}
.is-in .x-race .me .tr i{animation-duration:1.1s}
.x-race em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.x-race .me em{color:#22c55e}
.is-in .x-race em{animation:lpxPop .3s ease both;animation-delay:3.6s}
.is-in .x-race .me em{animation-delay:1.1s}
.x-cwv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-cwv div{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card);text-align:center}
.x-cwv b{display:block;font-size:12px;color:var(--muted);letter-spacing:.06em}
.x-cwv strong{display:block;font-size:19px;color:#22c55e;margin:2px 0}
.x-cwv small{font-size:11px;color:var(--muted);line-height:1.3;display:block}
.x-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-flow .st{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card);font-size:12.5px;text-align:center}
.x-flow .st>i{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 6px;border-radius:9px;background:rgba(254,168,0,.14);color:var(--ink)}
.x-flow .st b{display:block;margin-bottom:5px}
.x-flow code{display:block;font-size:10.5px;line-height:1.45;color:var(--ink);background:var(--chip);border-radius:6px;padding:4px;word-break:break-word}
.x-flow .st:not(:last-child):after{content:"\203A";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--ink);font-weight:700;font-size:18px;z-index:1}
.is-in .x-flow .st{animation:lpxPop .4s ease both}
.is-in .x-flow .st:nth-child(2){animation-delay:.35s}.is-in .x-flow .st:nth-child(3){animation-delay:.7s}
.x-bars{display:grid;gap:8px}
.x-bars .rr{display:grid;grid-template-columns:110px minmax(0,1fr) 40px;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.x-bars .rr b{color:var(--fg);text-align:right}
.x-bars .rb{height:10px;border-radius:999px;background:var(--chip);overflow:hidden}
.x-bars .rb i{display:block;height:100%;width:var(--w);background:#fea800;border-radius:999px}
.is-in .x-bars .rb i{animation:lpxGrow 1s ease both;animation-delay:.6s}
.x-live{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.x-live i{width:9px;height:9px;border-radius:50%;background:#22c55e;animation:lpxPulse 1.6s ease-out infinite}
.x-live span{font-weight:500;color:var(--muted)}
.x-spark{display:block;width:100%;height:auto}
.x-spark .ln{fill:none;stroke:#fea800;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600}
.x-spark .ar{fill:rgba(254,168,0,.12)}
.is-in .x-spark .ln{animation:lpxDraw 1.6s ease both}
.x-chat{display:grid;gap:10px}
.x-chat .q,.x-chat .a{max-width:88%;font-size:13px;line-height:1.45;padding:9px 12px;border-radius:14px}
.x-chat .q{justify-self:end;background:var(--chip);border:1px solid var(--line);border-bottom-right-radius:4px}
.x-chat .a{justify-self:start;background:var(--card);border:1px solid rgba(254,168,0,.35);border-bottom-left-radius:4px}
.x-chat .a b{color:#fea800}
.x-chat .src{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(254,168,0,.14);color:var(--ink)}
.is-in .x-chat .a{animation:lpxIn .4s ease both;animation-delay:.6s}
.x-art{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.x-art .img{height:64px;border-radius:9px;background:linear-gradient(135deg,rgba(254,168,0,.45),rgba(254,168,0,.06))}
.x-art b{display:block;font-size:13.5px;line-height:1.3}
.x-art small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:4px}
.x-links{display:grid;gap:6px;margin-top:10px}
.x-links a,.x-links span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:7px 10px;border-radius:9px;background:var(--chip);border:1px solid var(--line);color:var(--fg);text-decoration:none}
.x-links i{color:#fea800}
.x-serp{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);font-size:12.5px}
.x-serp .u{color:var(--muted);font-size:11.5px;display:flex;align-items:center;gap:6px}
.x-serp .u span{width:16px;height:16px;border-radius:50%;background:#fea800;display:inline-block}
.x-serp .tt{color:#8ab4f8;font-size:15px;margin:3px 0}
html:not(.dark) .x-serp .tt{color:#1a0dab}
.x-serp .ds{color:var(--muted);line-height:1.45}
.x-serp .rich{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:12px}
.x-serp .rich b{color:var(--fg)}
.x-serp .rich .st{color:#fea800}
.x-pay{display:grid;gap:8px}
.x-pay label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;cursor:pointer}
.x-pay label.on{border-color:#fea800;background:rgba(254,168,0,.08)}
.x-pay label i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--chip);color:var(--ink)}
.x-pay label small{margin-left:auto;color:var(--muted);font-size:11px}
.x-sum{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:10px 12px;border-radius:10px;background:var(--chip)}
.x-sum b{font-size:16px}
.x-pbtn{display:flex;justify-content:center;align-items:center;gap:8px;padding:11px;border-radius:10px;background:#fea800;color:#111;font-weight:700;font-size:13.5px}
.x-ship{display:grid;gap:8px}
.x-ship select{font:inherit;font-size:13px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
.x-ship .opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px}
.x-ship .opt i{color:#fea800;width:18px;text-align:center}
.x-ship .opt b{margin-left:auto}
.x-ship .opt.free{border-color:rgba(34,197,94,.4)}
.x-ship .opt.free b{color:#22c55e}
.x-prod{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.x-prod .img{height:96px;border-radius:10px;background:linear-gradient(135deg,rgba(254,168,0,.5),rgba(254,168,0,.06))}
.x-prod b{display:block;font-size:14px}
.x-prod .pr{font-size:18px;font-weight:800;color:#fea800;margin:4px 0}
.x-prod .stk{font-size:11.5px;color:#22c55e;font-weight:700}
.x-funnel{display:grid;gap:7px}
.x-funnel .f{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:12px}
.x-funnel .f span{color:var(--muted)}
.x-funnel .f code{font-size:10.5px;color:var(--ink)}
.x-funnel .f .tr{height:14px;border-radius:6px;background:var(--chip);overflow:hidden}
.x-funnel .f .tr i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#fea800,#ffd36b);border-radius:6px}
.x-funnel .f b{text-align:right}
.is-in .x-funnel .tr i{animation:lpxGrow .9s ease both}
.is-in .x-funnel .f:nth-child(2) .tr i{animation-delay:.15s}.is-in .x-funnel .f:nth-child(3) .tr i{animation-delay:.3s}.is-in .x-funnel .f:nth-child(4) .tr i{animation-delay:.45s}
.x-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--muted)}
.x-crumb b{color:var(--fg)}
.x-ovl{position:relative;height:200px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);--p:50%}
.x-ovl .lay{position:absolute;inset:0;padding:14px;display:grid;gap:8px;align-content:start}
.x-ovl .dsg{background:repeating-linear-gradient(45deg,rgba(254,168,0,.06) 0 10px,transparent 10px 20px),var(--card)}
.x-ovl .dev{clip-path:inset(0 0 0 var(--p));background:var(--panel)}
.x-ovl .tag{position:absolute;top:8px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;z-index:2}
.x-ovl .tag.l{left:8px;background:rgba(254,168,0,.18);color:var(--ink)}
.x-ovl .tag.r{right:8px;background:rgba(34,197,94,.18);color:#22c55e}
.x-ovl .hd{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fea800;z-index:3}
.x-ovl .hd:after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fea800;color:#111;display:grid;place-items:center;font-size:14px;font-weight:800}
.x-range{width:100%;accent-color:#fea800}
.x-spec{position:relative;border:1px dashed rgba(254,168,0,.5);border-radius:12px;padding:22px 18px 16px;background:var(--card)}
.x-spec .m{position:absolute;font-size:10px;font-weight:700;color:#111;background:#fea800;padding:2px 6px;border-radius:5px}
.x-spec .m.t{top:-9px;left:50%;transform:translateX(-50%)}
.x-spec .m.l{left:-10px;top:50%;transform:translateY(-50%) rotate(-90deg)}
.x-spec h5{margin:0 0 6px;font-size:20px;line-height:1.2}
.x-spec p{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.x-tok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.x-tok div{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card);font-size:11px;text-align:center}
.x-tok i{display:block;height:22px;border-radius:6px;margin-bottom:6px}
.x-demo{display:grid;gap:10px;justify-items:center}
.x-demo .hv{font:inherit;font-size:13px;font-weight:700;padding:10px 18px;border-radius:10px;border:1px solid #fea800;background:transparent;color:var(--fg);cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.x-demo .hv:hover,.x-demo .hv:focus-visible{background:#fea800;color:#111;transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(254,168,0,.8);outline:none}
.x-acc{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.x-acc button{font:inherit;width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:0;background:transparent;color:var(--fg);font-size:13px;font-weight:600;cursor:pointer}
.x-acc button i{transition:transform .3s;color:#fea800}
.x-acc .bd{max-height:0;overflow:hidden;transition:max-height .35s ease;font-size:12.5px;color:var(--muted);padding:0 12px}
.x-acc.open .bd{max-height:80px;padding-bottom:10px}
.x-acc.open button i{transform:rotate(45deg)}
.x-form{display:grid;gap:8px;width:100%}
.x-form input{font:inherit;font-size:13px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
.x-form input.err{border-color:#f87171}
.x-form .msg{font-size:12px;min-height:16px}
.x-form .msg.err{color:#f87171}.x-form .msg.ok{color:#22c55e}
.x-form button{font:inherit;font-size:13px;font-weight:700;padding:10px;border-radius:9px;border:0;background:#fea800;color:#111;cursor:pointer}
.x-a11y{display:grid;gap:10px}
.x-a11y .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px}
.x-a11y .row b{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(34,197,94,.15);color:#22c55e}
.x-a11y .sw{display:inline-flex;gap:6px;align-items:center}
.x-a11y .sw i{width:18px;height:18px;border-radius:5px;display:inline-block}
.x-file{display:flex;align-items:center;gap:12px}
.x-file>i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#fea800;color:#111;flex:none}
.x-file b{display:block;font-size:14px}
.x-file small{display:block;font-size:11.5px;color:var(--muted)}
.x-frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.x-frames div{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:6px;display:grid;gap:4px;font-size:10px;color:var(--muted);text-align:center}
.x-frames div i{display:block;height:44px;border-radius:5px;background:linear-gradient(135deg,rgba(254,168,0,.35),rgba(254,168,0,.05))}
.x-frames div.m i{height:60px;width:60%;margin:0 auto}
.is-in .x-frames div{animation:lpxPop .35s ease both}
.is-in .x-frames div:nth-child(2){animation-delay:.1s}.is-in .x-frames div:nth-child(3){animation-delay:.2s}.is-in .x-frames div:nth-child(4){animation-delay:.3s}
.x-typed:after{content:"";display:inline-block;width:2px;height:12px;background:currentColor;margin-left:1px;vertical-align:-2px;animation:lpxBlink 1s steps(1) infinite}

/* ===== Responsive ===== */
@media (max-width:1180px){.lpi-panel,.lpp-panel{grid-template-columns:minmax(0,1fr);gap:18px}.lpi-stage{min-height:0}}
@media (max-width:1100px){.lpv-chain{grid-template-columns:minmax(0,1fr);gap:16px}.lpv-n{display:grid;grid-template-columns:46px minmax(0,1fr);text-align:left;align-items:start;gap:4px 12px}.lpv-n .ic{grid-row:span 3}.lpv-n q:before{left:-6px;top:14px;transform:rotate(-45deg)}.lpv-lk{left:22px;top:-16px;width:2px;height:16px;background:repeating-linear-gradient(180deg,var(--bad) 0 4px,transparent 4px 7px)}.lpv-lk:after{display:none}.lpv-lk span{left:18px;top:-4px;transform:none}.lpv-hubw{grid-template-columns:minmax(0,1fr)}.lpv-foot{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.lpi-wrap{grid-template-columns:minmax(0,1fr)}.lpi-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;scrollbar-width:none}.lpi-tabs::-webkit-scrollbar{display:none}.lpi-tab{flex:none;width:auto;scroll-snap-align:start;padding:8px 12px;border-color:var(--line)}.lpi-tl small,.lpi-n{display:none}.lpi-ic{width:28px;height:28px;font-size:13px;border-radius:8px}.lpi-tl b{font-size:14px;white-space:nowrap}.lpi-stage,.lpp-stage{padding:16px}.lpx-vis{padding:14px;min-height:0}.lpx-copy h3{font-size:21px}.lpp-dot{width:40px;height:40px;font-size:14px}.lpp-track{top:20px}.lpp-nm{font-size:12px}.lpp-k{font-size:10px;letter-spacing:.08em}.lpp-bar{width:40px}}
@media (max-width:640px){.lpn{grid-template-columns:minmax(0,1fr)}.lph-opts{grid-template-columns:repeat(2,minmax(0,1fr))}.lph-opts button{flex-direction:row;align-items:center;padding:10px}.lph-vs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.lpp-steps{gap:2px}.lpp-k{display:none}.lpp-nm{font-size:11px;font-weight:600}.lpp-step:not(.is-on) .lpp-nm{color:var(--muted)}.lpp-nav button{padding:8px 12px}.lpp-nav .t{display:none}.lpv-box{padding:16px}.lpv-ask b{font-size:16px}.lpv-sw{width:100%}.lpv-sw button{flex:1;justify-content:center;font-size:12.5px;padding:10px 6px;gap:6px}.lpv-hub{width:280px;height:270px}.lpv-chip{--r:104px;font-size:11px;padding:5px 9px}.lpv-ring{width:208px;height:208px;margin:-104px 0 0 -104px}.lpv-av{width:112px;height:112px;margin:-56px 0 0 -56px}.lpv-say q{font-size:18px}.lpv-stats b{font-size:28px}.x-flow{grid-template-columns:minmax(0,1fr)}.x-flow .st:not(:last-child):after{content:"\2193";right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%)}.x-cwv strong{font-size:16px}.x-race .rw{grid-template-columns:96px minmax(0,1fr) 44px}.x-frames{grid-template-columns:repeat(2,minmax(0,1fr))}.x-funnel .f{grid-template-columns:96px minmax(0,1fr) 40px}.lps-price .amt b{font-size:38px}}
@media (prefers-reduced-motion:reduce){.lpx *,.lpx *:before,.lpx *:after,.lpn a,.sl-side .sl-who img,.lps-price:after{animation:none!important;transition:none!important}.lpn a{background:rgba(254,168,0,.6)}}

@media (max-width:520px){.lpp-step:not(.is-on) .lpp-nm{visibility:hidden}.lpp-step.is-on .lpp-nm{width:max-content;max-width:150px}}

/* comparador diseno/sitio v2 */
.x-ovl.v2{height:auto;background:var(--panel)}
.x-ovl.v2 .lay{padding:0;display:block;gap:0}
.x-ovl.v2 .dsg{position:relative;background:radial-gradient(rgba(96,165,250,.22) 1px,transparent 1.2px) 0 0/12px 12px,var(--card)}
.x-ovl.v2 .dev{position:absolute;inset:0;background:var(--panel)}
.x-ovl.v2 .tag{top:auto;bottom:8px}
.o-bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--muted)}
.o-bar>i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.o-bar b{margin-left:8px;font-weight:600}
.dsg .o-bar .u,.dev .o-bar .f{display:none}
.dev .o-bar{background:var(--card)}
.dev .o-bar .u{padding:2px 10px;border-radius:999px;background:var(--panel);color:var(--fg)}
.o-body{padding:16px 14px 40px;display:grid;gap:10px;justify-items:start}
.o-h{font-size:19px;font-weight:800;line-height:1.15;color:var(--fg)}
.o-p{font-size:12px;line-height:1.4;color:var(--muted)}
.o-btn{font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px}
.o-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:2px}
.o-cards>span{display:flex;align-items:center;gap:7px;padding:10px;border-radius:10px;font-size:11px;font-weight:600;min-width:0}
.o-cards i{width:18px;height:18px;border-radius:6px;flex:none}
.o-body em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.02em;color:#60a5fa;background:rgba(96,165,250,.14);padding:2px 6px;border-radius:4px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.dev .o-body em{visibility:hidden}
.dsg .o-h>span,.dsg .o-p>span,.dsg .o-btn,.dsg .o-cards>span{outline:1px dashed rgba(96,165,250,.75);outline-offset:3px}
.dsg .o-h>span{opacity:.75}
.dsg .o-btn{background:rgba(254,168,0,.14);color:var(--ink)}
.dsg .o-cards>span{color:var(--muted)}
.dsg .o-cards i{background:rgba(96,165,250,.28)}
.dev .o-btn{background:#fea800;color:#111;box-shadow:0 6px 18px -6px rgba(254,168,0,.7)}
.dev .o-cards>span{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg)}
.dev .o-cards i{background:#fea800}
.o-leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.o-leg>div{padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:12.5px;line-height:1.4;color:var(--muted)}
.o-leg b{display:block;font-size:12px;margin-bottom:2px;color:var(--ink)}
.o-leg>div+div b{color:#22c55e}
@media (max-width:520px){.o-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.o-cards>span:nth-child(3){display:none}.o-body em{display:none}.o-leg{grid-template-columns:minmax(0,1fr)}.o-h{font-size:17px}}

.o-body{justify-items:center;text-align:center}.o-bar b{margin:0 auto;transform:translateX(-14px)}

.dsg .o-bar b{margin:0 0 0 8px;transform:none}.dev .o-bar b.u{margin:0 0 0 auto;transform:none}.x-ovl.v2 .hd:after{top:14px}

/* visuales SEO */
.x-tbl{display:grid;gap:6px;font-size:12px}
.x-tbl .r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.x-tbl .r.h{background:transparent;border-color:transparent;padding:0 10px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.x-tbl .r span{min-width:0}
.x-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.x-tag.hi{background:rgba(239,68,68,.15);color:#ef4444}
.x-tag.md{background:rgba(245,158,11,.16);color:#d97706}
.x-tag.lo{background:rgba(34,197,94,.15);color:#16a34a}
.x-tag.nt{background:var(--chip);color:var(--muted)}
.x-map{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.x-map .mp{height:96px;position:relative;background:linear-gradient(90deg,transparent 48%,rgba(148,163,184,.18) 48% 52%,transparent 52%) 0 0/60px 60px,linear-gradient(0deg,transparent 48%,rgba(148,163,184,.18) 48% 52%,transparent 52%) 0 0/60px 60px,var(--panel)}
.x-map .pin{position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--chip);border:2px solid var(--line)}
.x-map .pin.me{background:#fea800;border-color:#fea800;box-shadow:0 0 0 6px rgba(254,168,0,.2)}
.x-map .li{display:grid;gap:0}
.x-map .it{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);font-size:12px}
.x-map .it b{display:block;font-size:12.5px}
.x-map .it small{color:var(--muted)}
.x-map .it .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;background:var(--chip);flex:none}
.x-map .it.me{background:rgba(254,168,0,.08)}
.x-map .it.me .n{background:#fea800;color:#111}
.x-map .st{color:#f59e0b;letter-spacing:1px}
.x-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.x-kpi>div{padding:10px;border-radius:10px;background:var(--card);border:1px solid var(--line);text-align:center}
.x-kpi b{display:block;font-size:20px;line-height:1.1;color:var(--ink)}
.x-kpi small{font-size:10.5px;color:var(--muted)}
.x-rev{display:grid;gap:8px}
.x-rev .c{padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:12.5px;line-height:1.45}
.x-rev .c .st{color:#f59e0b;letter-spacing:1px;font-size:12px}
.x-rev .c.rp{margin-left:22px;border-color:rgba(254,168,0,.35)}
.x-rev .c small{display:block;font-weight:700;font-size:11px;margin-bottom:3px;color:var(--muted)}
.x-nap{display:grid;gap:6px;font-size:12px}
.x-nap .r{display:grid;grid-template-columns:96px minmax(0,1fr) 20px;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.x-nap .r span:first-child{font-weight:700}
.x-nap .r i{color:#22c55e}
@media (max-width:520px){.x-kpi b{font-size:16px}.x-nap .r{grid-template-columns:78px minmax(0,1fr) 16px}}

@media (max-width:520px){.x-tbl .r{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.x-tbl .r span:nth-child(3){grid-column:1/-1;font-size:11px;color:var(--muted)}.x-tbl .r.h span:nth-child(3){display:none}}

/* diagnostico gratis destacado */
@property --dga{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --dgn{syntax:'<integer>';inherits:false;initial-value:0}
#diagnostico-gratis{position:relative;isolation:isolate;overflow:hidden;border:0!important;background:radial-gradient(70% 90% at 100% 0%,rgba(254,168,0,.20),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(254,168,0,.10),transparent 60%),linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px) 0 0/28px 28px,var(--panel,#0b0b0b)!important;box-shadow:0 0 0 1px rgba(254,168,0,.35),0 30px 80px -30px rgba(254,168,0,.45)}
#diagnostico-gratis::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:conic-gradient(from var(--dga),transparent 0 60%,#fea800 75%,#ffd27a 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:dgSpin 5s linear infinite;z-index:-1;pointer-events:none}
@keyframes dgSpin{to{--dga:360deg}}
#diagnostico-gratis .bv2-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:999px;background:rgba(254,168,0,.14);border:1px solid rgba(254,168,0,.45)}
#diagnostico-gratis .bv2-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#fea800;box-shadow:0 0 0 0 rgba(254,168,0,.7);animation:dgPulse 1.8s infinite}
@keyframes dgPulse{70%{box-shadow:0 0 0 10px rgba(254,168,0,0)}100%{box-shadow:0 0 0 0 rgba(254,168,0,0)}}
#diagnostico-gratis .bv2-h2{font-size:clamp(30px,4vw,46px)!important;line-height:1.08;background:linear-gradient(90deg,var(--fg,#fff) 0 45%,#fea800 75%,#ffd27a);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#diagnostico-gratis .sl-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"b v" "f v";gap:18px 32px;align-items:start;margin-top:8px}
.dg-badges{grid-area:b;display:flex;flex-wrap:wrap;gap:8px}
.dg-badges span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;background:var(--card,#141414);border:1px solid var(--line,#262626)}
.dg-badges i{color:#fea800}
#diagnostico-gratis .sa{grid-area:f}
#diagnostico-gratis .sa-in{min-height:66px;border-radius:16px!important;border:2px solid rgba(254,168,0,.55)!important;background:var(--card,#111)!important;box-shadow:0 0 0 6px rgba(254,168,0,.08),0 14px 40px -18px rgba(254,168,0,.6)}
#diagnostico-gratis .sa-in input{font-size:18px!important}
#diagnostico-gratis .sa-in i{color:#fea800!important}
#diagnostico-gratis .sa-btn{position:relative;overflow:hidden;min-height:66px!important;padding:0 28px!important;border-radius:16px!important;font-size:17px!important;box-shadow:0 14px 34px -12px rgba(254,168,0,.8)}
#diagnostico-gratis .sa-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:dgShine 3.2s ease-in-out infinite}
@keyframes dgShine{60%,100%{left:130%}}
.dg-vis{grid-area:v;position:relative;border-radius:18px;padding:20px;background:linear-gradient(180deg,rgba(254,168,0,.10),transparent 55%),var(--card,#111);border:1px solid rgba(254,168,0,.3);display:grid;gap:14px}
.dg-top{display:flex;align-items:center;gap:16px}
.dg-ring{position:relative;width:118px;height:118px;flex:none}
.dg-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dg-ring circle{fill:none;stroke-width:10}
.dg-ring .bg{stroke:var(--chip,#222)}
.dg-ring .fg{stroke:#fea800;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:dgRing 7s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(254,168,0,.6))}
@keyframes dgRing{0%,8%{stroke-dashoffset:100}45%,88%{stroke-dashoffset:13}100%{stroke-dashoffset:100}}
.dg-num{position:absolute;inset:0;display:grid;place-items:center;align-content:center;line-height:1}
.dg-num b{font-size:34px;font-weight:800;counter-reset:n var(--dgn);animation:dgCount 7s ease-in-out infinite}
.dg-num b::after{content:counter(n)}
.dg-num small{font-size:11px;color:var(--muted,#999);margin-top:3px}
@keyframes dgCount{0%,8%{--dgn:0}45%,88%{--dgn:87}100%{--dgn:0}}
.dg-hd small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#999)}
.dg-hd b{display:block;font-size:16px;margin:3px 0 2px}
.dg-hd span{font-size:12px;color:#22c55e;font-weight:700}
.dg-cats{list-style:none;margin:0;padding:0!important;display:grid;gap:7px}
.dg-cats li{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px!important;border-radius:11px;background:var(--panel,#0b0b0b);border:1px solid var(--line,#262626);font-size:13px;font-weight:600;overflow:hidden}
.dg-cats li::before{content:none!important}
.dg-cats li>i{color:#fea800;width:16px;text-align:center}
.dg-cats li em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;opacity:0;animation:dgMark 7s infinite}
.dg-cats li em.ok{background:rgba(34,197,94,.15);color:#16a34a}
.dg-cats li em.wn{background:rgba(245,158,11,.16);color:#d97706}
.dg-cats li::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#fea800;animation:dgBar 7s infinite}
.dg-cats li:nth-child(2) em,.dg-cats li:nth-child(2)::after{animation-delay:.5s}
.dg-cats li:nth-child(3) em,.dg-cats li:nth-child(3)::after{animation-delay:1s}
.dg-cats li:nth-child(4) em,.dg-cats li:nth-child(4)::after{animation-delay:1.5s}
@keyframes dgBar{0%,5%{width:0;opacity:1}30%{width:100%;opacity:1}34%,100%{width:100%;opacity:0}}
@keyframes dgMark{0%,30%{opacity:0;transform:scale(.6)}36%,88%{opacity:1;transform:none}100%{opacity:0}}
.dg-cap{margin:0!important;font-size:11.5px;color:var(--muted,#999);text-align:center}
#diagnostico-gratis .sl-body:has(#sa-out *){grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "f"}
#diagnostico-gratis .sl-body:has(#sa-out *) .dg-vis{display:none}
@media (max-width:900px){#diagnostico-gratis .sl-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "f" "v"}#diagnostico-gratis .sa-btn{width:100%}}
@media (max-width:520px){.dg-badges span{font-size:12px;padding:6px 10px}.dg-ring{width:96px;height:96px}.dg-num b{font-size:28px}}
@media (prefers-reduced-motion:reduce){#diagnostico-gratis::before,#diagnostico-gratis .sa-btn::after,#diagnostico-gratis .bv2-eyebrow::before{animation:none}.dg-ring .fg{animation:none;stroke-dashoffset:13}.dg-num b{animation:none;--dgn:87}.dg-cats li em{animation:none;opacity:1}.dg-cats li::after{display:none}}

#diagnostico-gratis .sl-body{grid-template-rows:auto 1fr}#diagnostico-gratis .sa{align-self:start}@media (max-width:900px){#diagnostico-gratis .sl-body{grid-template-rows:auto}}
@media (min-width:901px){#diagnostico-gratis{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:36px;align-content:start}#diagnostico-gratis>*{grid-column:1}#diagnostico-gratis .sl-body{display:contents}#diagnostico-gratis .dg-badges,#diagnostico-gratis .sa{grid-area:auto;grid-column:1}#diagnostico-gratis .sa{margin-top:16px}#diagnostico-gratis .dg-vis{grid-area:auto;grid-column:2;grid-row:1/7;align-self:start}#diagnostico-gratis:has(#sa-out *){grid-template-columns:minmax(0,1fr)}#diagnostico-gratis:has(#sa-out *) .dg-vis{display:none}}
#diagnostico-gratis .bv2-eyebrow{justify-self:start;width:auto}
#diagnostico-gratis .dg-vis{margin:0!important}#diagnostico-gratis .sa{margin-bottom:0!important}
.lph .x-check li .w .fa-circle-notch{display:none!important}.lph .x-check li .w .fa-circle-check{display:inline!important;color:#22c55e}.lph .x-check li{border-color:rgba(34,197,94,.35)}.lph .x-log{opacity:1}
.x-check li::before,.x-check li::after{content:none!important;display:none!important}