/* MultiDocs v8 — oscuro y sobrio (base «La app») + papeles y cobalto («Adiós al papeleo») */
:root{
  --bg:#0b0d11; --bg2:#101318; --win:#14171d; --win2:#191d24; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --tx:#eef0f4; --tx2:#b4b9c5; --mu:#8a90a0;
  --acc:#4466ff; --acc-d:#3352e6; --acc-soft:rgba(68,102,255,.16);
  --ok:#3ccf98; --ok-soft:rgba(60,207,152,.14); --wait:#f2b450; --wait-soft:rgba(242,180,80,.14); --bad:#ff7a66; --bad-soft:rgba(255,122,102,.14);
  --sig:#2b4bd8; --paper:#fff; --pink:#ff5a36;
  --wrap:1200px; --gut:24px; --nav-h:64px; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.55 Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;line-height:1.04}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--mu)}
.label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tx2);margin-bottom:18px}
.label::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--acc)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:#fff;color:#0b0d11;font-weight:600;font-size:16px;border:0;transition:background .2s,transform .2s}
.btn:hover{background:#dfe3ec}
.btn-sm{min-height:36px;padding:0 15px;font-size:14px}
.btn-lg{min-height:52px;padding:0 26px;font-size:17px}
.btn-acc{background:var(--acc);color:#fff}
.btn-acc:hover{background:var(--acc-d)}
.btn-ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.lnk{color:var(--tx);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.lnk::after{content:"→";transition:transform .2s}
.lnk:hover::after{transform:translateX(3px)}

/* ---------- logo-firma ---------- */
.logo{width:128px;height:32px;overflow:visible}
.logo text{font:700 25px Onest,sans-serif;letter-spacing:-.045em;fill:currentColor}
.logo path{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.logo-xl{width:min(980px,100%);height:auto;margin:0 auto 64px;color:#fff}
.logo-xl path{stroke-width:1.3}

/* ---------- cabecera ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.solid{background:rgba(11,13,17,.82);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:var(--nav-h);display:flex;align-items:center;gap:36px}
.nav-links{display:flex;gap:30px;margin-right:auto}
.nav-links a{font-size:15px;font-weight:500;color:var(--tx2);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--tx)}
.burger{display:none;width:44px;height:44px;border:0;background:none;position:relative;margin-right:-10px}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--tx);transition:transform .3s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:var(--nav-h) 0 0;z-index:49;background:var(--bg);padding:12px var(--gut) 32px;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.menu.open{visibility:visible;opacity:1;transition:opacity .25s}
.menu nav a{display:flex;justify-content:space-between;padding:16px 0;font-size:26px;font-weight:700;letter-spacing:-.03em;border-bottom:1px solid var(--line)}
.menu nav a span{color:var(--mu);font-weight:400}

/* ---------- secciones ---------- */
.sec{padding:130px 0}
.sec-2{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:780px;margin-bottom:56px}
.head.c{margin-left:auto;margin-right:auto;text-align:center}
.head.c .label{justify-content:center}
.head h2{font-size:clamp(36px,5vw,64px)}
.head p:not(.label){margin-top:18px;font-size:clamp(18px,1.7vw,21px);color:var(--tx2);max-width:640px}
.head.c p:not(.label){margin-left:auto;margin-right:auto}

/* ---------- app (ventana) ---------- */
.win{background:var(--win);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#2a2e37}
.win-bar span{margin-left:8px;font-size:13px;color:var(--mu)}
.app{display:grid;grid-template-columns:210px 1fr;height:100%}
.side{border-right:1px solid var(--line);padding:16px 10px;font-size:14px;color:var(--tx2);display:flex;flex-direction:column;gap:2px}
.side .logo{width:110px;height:28px;margin:0 8px 18px;color:var(--tx)}
.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.side a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.side a.on{background:var(--win2);color:var(--tx)}
.side .who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line);font-size:13px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;background:#2a3350;color:#cdd6ff}
.av.g{background:#173a2e;color:#9ff0cc}.av.o{background:#3d2a17;color:#ffd39a}.av.p{background:#35203a;color:#f2b8ff}
.main{padding:20px 22px;min-width:0;position:relative;overflow:hidden}
.top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.top h3{font-size:20px;letter-spacing:-.02em}
.top .srch{flex:1;max-width:280px;margin-left:auto;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13.5px;color:var(--mu)}
.top .nb{background:#fff;color:#0b0d11;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg2)}
.kpi small{color:var(--mu);font-size:13px}
.kpi b{display:block;font-size:28px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:2px}
.rows{position:relative}
.rw{display:grid;grid-template-columns:1.7fr 1fr 130px 104px;gap:14px;align-items:center;padding:11px 10px;border-top:1px solid var(--line);font-size:14px;transition:background .3s,opacity .4s}
.rw small{display:block;color:var(--mu);font-size:12.5px}
.rw .nm{display:flex;align-items:center;gap:10px;min-width:0}
.rw .nm>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi{width:26px;height:32px;border-radius:4px;background:#fff;flex:none;position:relative}
.fi::after{content:"";position:absolute;left:5px;right:5px;top:7px;height:12px;background:repeating-linear-gradient(#cfd3db 0 1.5px,transparent 1.5px 4px)}
.bar{height:6px;border-radius:3px;background:#232731;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:3px;width:0}
.pill{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:99px;justify-self:start;white-space:nowrap}
.p-w{background:var(--wait-soft);color:var(--wait)}.p-o{background:var(--ok-soft);color:var(--ok)}.p-a{background:var(--acc-soft);color:#9db0ff}.p-n{background:rgba(255,255,255,.07);color:var(--tx2)}.p-b{background:var(--bad-soft);color:var(--bad)}
.rw.hl{background:var(--win2);border-radius:8px}
.rw.off{opacity:0}

/* hoja de papel */
.paper{background:var(--paper);color:#1b1d22;border-radius:4px;padding:7%;font-size:12.5px;line-height:1.55;position:relative}
.paper .ph{display:flex;gap:10px;align-items:center;border-bottom:1px solid #e4e5e8;padding-bottom:10px;margin-bottom:14px}
.paper .pl{width:30px;height:30px;border-radius:5px;background:#1b3a6b;color:#fff;font-weight:700;font-size:11px;display:grid;place-items:center;flex:none}
.paper .ph b{font-size:13px}
.paper .ph small{display:block;color:#7a7f89;font-size:11px}
.paper .pt{font-weight:700;text-align:center;letter-spacing:.04em;margin-bottom:12px;font-size:12.5px}
.paper p{margin-bottom:8px}
.paper .sgl{position:absolute;left:8%;width:38%;bottom:11%;border-top:1px solid #9a9ea8;padding-top:5px;font-size:11px;color:#7a7f89;text-align:center}
.paper .sgl.r{left:auto;right:8%}
.ink path{fill:none;stroke:var(--sig);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}

/* ---------- hero ---------- */
.hero{height:480vh;position:relative}
.pin{position:sticky;top:0;height:100svh;overflow:hidden}
.copy{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 6vh);text-align:center;padding:0 var(--gut);z-index:4}
.copy .label{justify-content:center}
.copy .h1{font-weight:700;font-size:clamp(48px,8vw,116px);letter-spacing:-.055em;line-height:.94}
.copy .h1 .muted{color:#5d6475}
.copy p{font-size:clamp(18px,1.7vw,21px);color:var(--tx2);max-width:640px;margin:22px auto 0}
.copy .row-b{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hwin{position:absolute;left:50%;top:50%;width:min(1080px,94vw);height:min(600px,calc(100svh - 150px));z-index:2}
.hwin .win{height:100%}
.hwin .app{height:calc(100% - 39px)}
.sheet{position:absolute;left:0;top:0;width:150px;background:#fff;color:#1b1d22;border-radius:6px;padding:13px 12px;font-size:10.5px;line-height:1.35;z-index:3;will-change:transform}
.sheet b{display:block;font-size:12.5px;margin-bottom:7px;letter-spacing:-.01em}
.sheet i{display:block;height:5px;border-radius:3px;background:#e6e7eb;margin-bottom:5px}
.sheet i:nth-of-type(2){width:82%}.sheet i:nth-of-type(3){width:60%}
.sheet u{display:block;margin-top:12px;border-top:1px solid #a9adb5;padding-top:4px;text-decoration:none;color:#8a8f99;font-size:9.5px}
.det{position:absolute;inset:0;background:var(--win);display:grid;grid-template-columns:1.15fr .85fr;gap:22px;padding:20px 22px;transform-origin:0 0;opacity:0;pointer-events:none}
.det .paper{height:100%;overflow:hidden}
.det .ink{position:absolute;left:10%;bottom:14%;width:34%;height:12%}
.tl h4{font-size:19px;margin-bottom:6px}
.tl>small{display:block;color:var(--mu);font-size:13.5px;margin-bottom:16px}
.ev{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;opacity:.28;transition:opacity .35s}
.ev.on{opacity:1}
.ev b{width:10px;height:10px;border-radius:50%;background:var(--ok);margin-top:5px;flex:none}
.ev small{display:block;color:var(--mu)}
.done{margin-top:16px;display:inline-flex;gap:8px;align-items:center;background:var(--ok-soft);color:var(--ok);border-radius:99px;padding:8px 14px;font-weight:600;font-size:14px;opacity:0;transition:opacity .35s}
.hcap{position:absolute;left:0;right:0;bottom:max(18px,3vh);display:grid;justify-items:center;z-index:5;pointer-events:none;padding:0 var(--gut)}
.hcap p{grid-area:1/1;display:flex;align-items:center;gap:10px;background:#fff;color:#0b0d11;border-radius:999px;padding:9px 18px 9px 9px;font-weight:700;font-size:clamp(16px,1.6vw,19px);letter-spacing:-.02em;opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s}
.hcap p.on{opacity:1;transform:none;transition:opacity .4s .15s,transform .45s .15s}
.hcap b{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:14px}

/* ---------- escenas por pasos (8 áreas) ---------- */
.scrolly{position:relative}
.sc-pin{position:sticky;top:0;height:100svh;overflow:hidden;padding-top:var(--nav-h)}
.sc-in{height:100%;display:flex;flex-direction:column;padding-top:min(4vh,36px);padding-bottom:min(3vh,28px)}
.sc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sc-head h2{font-size:clamp(30px,3.8vw,50px)}
.sc-head .lnk{white-space:nowrap;font-size:15px}
.sc-chips{display:flex;gap:8px;margin:22px 0 18px;overflow-x:auto;scrollbar-width:none;flex:none}
.sc-chips::-webkit-scrollbar{display:none}
.sc-chips button{border:1px solid var(--line2);background:transparent;border-radius:999px;padding:9px 15px;font-size:14.5px;font-weight:500;color:var(--tx2);white-space:nowrap;display:flex;gap:8px;align-items:center;transition:background .25s,color .25s,border-color .25s}
.sc-chips button i{font-style:normal;font-size:12px;color:var(--mu)}
.sc-chips button[aria-selected=true]{background:#fff;color:#0b0d11;border-color:#fff}
.sc-chips button[aria-selected=true] i{color:#5d6475}
.sc-stage{position:relative;flex:1;min-height:0}
.sc-card{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;transform-origin:50% 40%}
.sc-card.on{opacity:1;visibility:visible;transition:opacity .45s}
.area{height:100%;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:stretch;background:var(--win);border:1px solid var(--line2);border-radius:18px;padding:clamp(22px,3.4vw,44px);overflow:hidden}
.a-txt{display:flex;flex-direction:column}
.a-n{font-size:14px;font-weight:600;color:var(--mu);margin-bottom:12px}
.a-txt h3{font-size:clamp(28px,3.2vw,42px);margin-bottom:12px}
.a-txt>p{font-size:clamp(16px,1.5vw,19px);color:var(--tx2)}
.a-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px}
.a-list li{display:flex;gap:10px;font-size:15.5px;color:var(--tx)}
.a-list li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--acc-soft) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%239db0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");flex:none;margin-top:4px}
.a-txt .lnk{margin-top:auto;padding-top:18px;font-size:15px}
.a-ui{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:20px;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.sc-card.on .a-ui>*{animation:up .5s both}
.sc-card.on .a-ui>*:nth-child(2){animation-delay:.1s}.sc-card.on .a-ui>*:nth-child(3){animation-delay:.2s}.sc-card.on .a-ui>*:nth-child(4){animation-delay:.3s}.sc-card.on .a-ui>*:nth-child(5){animation-delay:.4s}.sc-card.on .a-ui>*:nth-child(6){animation-delay:.5s}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* piezas de interfaz dentro de las áreas */
.ui-t{font-size:13px;font-weight:600;color:var(--mu)}
.ui-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--win)}
.ui-row small{display:block;color:var(--mu);font-size:12.5px}
.ui-row .pill{margin-left:auto}
.ui-srch{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--tx2);display:flex;gap:8px;align-items:center}
.ui-srch svg{width:15px;height:15px;stroke:var(--mu);fill:none;stroke-width:2}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12.5px;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--tx2)}
.flow{display:grid;gap:10px}
.node{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:14px;background:var(--win);display:flex;justify-content:space-between;gap:8px;align-items:center}
.node.cond{border-style:dashed;border-color:rgba(242,180,80,.5);color:var(--wait)}
.node small{color:var(--mu);font-size:12.5px}
.branch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.arrow{text-align:center;color:var(--mu);font-size:14px;line-height:1}
.fb{display:grid;grid-template-columns:110px 1fr;gap:12px;min-height:0}
.fb-pal{display:grid;gap:6px;align-content:start}
.fb-pal span{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;color:var(--tx2)}
.fb-form{background:#fff;color:#1b1d22;border-radius:10px;padding:14px;display:grid;gap:9px;font-size:13px}
.fb-form label{display:grid;gap:4px;font-weight:600;font-size:12.5px;color:#444}
.fb-form .in{border:1px solid #d9dbe0;border-radius:7px;padding:7px 9px;font-weight:400;color:#1b1d22}
.fb-form .rule{font-size:12px;color:#8a5a00;background:#fff4dc;border-radius:6px;padding:6px 8px;font-weight:500}
.ext{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.inv{background:#fff;color:#1b1d22;border-radius:8px;padding:14px;font-size:12px;line-height:1.5;position:relative}
.inv b{font-size:14px}
.inv mark{background:rgba(68,102,255,.18);outline:1.5px solid #4466ff;border-radius:3px;padding:0 2px;color:#1b1d22}
.fx{display:grid;gap:8px;align-content:start}
.fx div{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13.5px;display:flex;justify-content:space-between;gap:8px;background:var(--win)}
.fx div span{color:var(--mu)}
.fx em{font-style:normal;font-size:12px;color:var(--ok)}
.gen{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.gen .paper{font-size:11.5px;padding:12px}
.gen mark{background:rgba(68,102,255,.15);color:#2b4bd8;border-radius:3px;padding:0 3px;font-size:11px}
.chans{display:flex;gap:6px;flex-wrap:wrap}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding:8px 4px 0;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:var(--acc);border-radius:4px 4px 0 0;opacity:.85}
.bars i:nth-child(even){background:#6d86ff}
.intg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.intg span{border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;text-align:center;color:var(--tx2);background:var(--win)}
.soon{display:inline-block;font-size:12px;font-weight:600;color:var(--wait);background:var(--wait-soft);border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:middle}

/* ---------- cifras de control (sin inventos: de la demo) ---------- */
.control{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.control div{padding:28px;border-right:1px solid var(--line)}
.control div:last-child{border-right:0}
.control b{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.control p{color:var(--tx2);font-size:16px}

/* ---------- método de implantación ---------- */
.method{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line2);counter-reset:m}
.method li{list-style:none;padding:24px 18px 0 0;position:relative}
.method li::before{counter-increment:m;content:"0" counter(m);display:block;font-size:14px;font-weight:600;color:var(--acc);margin-bottom:16px}
.method li::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.method b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.method p{color:var(--tx2);font-size:15px}
.method{padding:0;margin:0}

/* ---------- sectores (papeles de color, de la propuesta B) ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sct{border-radius:20px;padding:30px;min-height:420px;display:flex;flex-direction:column;position:relative;overflow:hidden;color:#fff;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sct:hover{transform:translateY(-4px)}
.sct.s1{background:#2448ff}.sct.s2{background:#ff5a36}.sct.s3{background:#12805a}
.sct small{font-size:14px;font-weight:600;opacity:.85}
.sct h3{font-size:clamp(26px,2.4vw,32px);margin:10px 0 12px}
.sct p{opacity:.9;font-size:16px}
.sct .lnk{color:#fff;margin-top:18px}
.sct .mini{position:absolute;left:30px;right:30px;bottom:-30px;transform:rotate(-3deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sct:hover .mini{transform:rotate(0) translateY(-10px)}
.sct .mini .paper{font-size:10.5px;padding:16px}
.others{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.others a{border:1px solid var(--line2);border-radius:16px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .2s}
.others a:hover{background:rgba(255,255,255,.04)}
.others b{font-size:19px;letter-spacing:-.02em}
.others span{color:var(--mu);font-size:14.5px;display:block}

/* ---------- validez y seguridad ---------- */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lv{border:1px solid var(--line2);border-radius:16px;padding:28px;background:var(--win)}
.lv.main{border-color:var(--acc)}
.lv em{font-style:normal;font-size:13px;font-weight:600;color:#9db0ff}
.lv h3{font-size:23px;margin:10px 0}
.lv p{color:var(--tx2)}
.secu{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.secu b{display:block;font-size:17px;margin-bottom:6px}
.secu p{color:var(--tx2);font-size:15px}

/* ---------- precio ---------- */
.bill{display:flex;justify-content:center;margin-bottom:28px}
.bill-sw{display:flex;border:1px solid var(--line2);border-radius:999px;padding:4px}
.bill-sw button{border:0;background:none;border-radius:999px;padding:10px 20px;font-size:15px;font-weight:600;color:var(--tx2)}
.bill-sw button[aria-pressed=true]{background:#fff;color:#0b0d11}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{border:1px solid var(--line2);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:16px;background:var(--win)}
.plan.main{border-color:var(--acc);background:linear-gradient(var(--win),var(--win)) padding-box}
.plan h3{font-size:22px}
.plan .who{color:var(--mu);margin-top:-8px}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:52px;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.price span{color:var(--mu)}
.equiv{font-size:14px;color:var(--mu);margin-top:-8px}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15.5px;color:var(--tx2)}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.plan .btn{margin-top:auto}
.price-note{text-align:center;margin-top:22px;color:var(--mu);font-size:15px}
.cmp{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:18px;overflow:hidden}
.cmp-ctl{padding:30px;display:grid;gap:22px;align-content:start;border-right:1px solid var(--line)}
.cmp-ctl h3{font-size:24px}
.cmp-ctl label{display:grid;grid-template-columns:1fr auto;gap:8px;font-weight:500;color:var(--tx2)}
.cmp-ctl output{font-size:24px;font-weight:700;color:var(--tx)}
.cmp-ctl input{grid-column:1/-1;accent-color:var(--acc);width:100%;height:28px}
.cmp-out{padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;background:var(--bg2)}
.cmp-col{border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:6px;background:var(--win)}
.cmp-col span{font-size:14px;color:var(--mu)}
.cmp-col b{font-size:30px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cmp-col small{font-size:13px;color:var(--mu)}
.cmp-col.us{border-color:var(--acc)}
.cmp-col.us b{color:#9db0ff}
.cmp-save{grid-column:1/-1;font-size:20px}
.cmp-save b{color:var(--ok)}
.cmp-note{font-size:13.5px;color:var(--mu);margin-top:12px}

/* ---------- carta ---------- */
.letter{max-width:660px;margin:0 auto;background:#fff;color:#1b1d22;border-radius:6px;padding:clamp(28px,5vw,56px);font-size:19px;line-height:1.6;transform:rotate(-.8deg)}
.letter p+p{margin-top:16px}
.letter .hi{font-weight:700}
.l-sign{margin:24px 0 26px;color:#6a6f79;font-size:15px}
.l-sign svg{width:220px;height:56px;overflow:visible}
.l-sign path{fill:none;stroke:var(--sig);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.letter .btn{background:#0b0d11;color:#fff}

/* ---------- página producto ---------- */
.p-hero{padding:calc(var(--nav-h) + 90px) 0 60px}
.p-hero h1{font-size:clamp(44px,6.4vw,88px);letter-spacing:-.05em;max-width:980px}
.p-hero p{font-size:clamp(18px,1.8vw,22px);color:var(--tx2);max-width:680px;margin-top:22px}
.p-nav{position:sticky;top:var(--nav-h);z-index:30;background:rgba(11,13,17,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.p-nav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.p-nav .wrap::-webkit-scrollbar{display:none}
.p-nav a{white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:500;color:var(--tx2);border:1px solid transparent}
.p-nav a.on{background:#fff;color:#0b0d11}
.p-sec{padding:110px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 60px)}
.p-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.p-sec h2{font-size:clamp(32px,4vw,52px);margin-bottom:14px}
.p-sec .lead{font-size:clamp(17px,1.6vw,20px);color:var(--tx2);max-width:560px}
.p-ui{position:sticky;top:calc(var(--nav-h) + 90px)}
.p-ui .a-ui{min-height:360px}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-top:40px}
.caps h4{font-size:16px;letter-spacing:-.01em;margin-bottom:12px;color:var(--tx)}
.caps ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.caps li{font-size:15px;color:var(--tx2);padding-left:18px;position:relative;line-height:1.45}
.caps li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.areas-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.areas-sum a{border:1px solid var(--line2);border-radius:14px;padding:20px;background:var(--win);transition:border-color .2s,transform .3s}
.areas-sum a:hover{border-color:#5a6175;transform:translateY(-2px)}
.areas-sum i{font-style:normal;font-size:13px;color:var(--mu)}
.areas-sum b{display:block;font-size:19px;letter-spacing:-.02em;margin:8px 0 6px}
.areas-sum span{font-size:14.5px;color:var(--tx2)}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.use{border:1px solid var(--line2);border-radius:16px;padding:24px;background:var(--win)}
.use h3{font-size:21px;margin-bottom:12px}
.use ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.use li{font-size:15px;color:var(--tx2);padding-left:16px;position:relative}
.use li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--acc)}

/* ---------- páginas de sector ---------- */
.s-hero{height:380vh;position:relative}
.s-copy{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 6vh);padding:0 var(--gut);text-align:center;z-index:3}
.s-copy h1{font-size:clamp(44px,7vw,100px);letter-spacing:-.055em;line-height:.95;max-width:1000px;margin:0 auto}
.s-copy p{font-size:clamp(18px,1.7vw,21px);color:var(--tx2);max-width:620px;margin:20px auto 0}
.s-doc{position:absolute;left:50%;top:50%;width:min(540px,calc(100vw - 32px));z-index:2}
.s-doc .paper{aspect-ratio:1/1.25}
.s-doc .fld{position:absolute;border-radius:4px;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px;background:#e8edff;color:#2b4bd8;outline:1.5px solid #2b4bd8;opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.s-doc .fld.g{background:#e2f4ea;color:#12805a;outline-color:#12805a}
.s-doc .fld.on{opacity:1;transform:none}
.s-doc .fld.done{background:transparent;outline-style:dashed;outline-width:1px}
.s-doc .ink{position:absolute;z-index:2}
.stamp{position:absolute;right:8%;top:56%;border:3px solid #12805a;color:#12805a;font-weight:800;font-size:24px;letter-spacing:.06em;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.9);transform:rotate(-9deg) scale(1.4);opacity:0;transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.stamp.on{opacity:1;transform:rotate(-9deg) scale(1)}
.season{height:420vh;position:relative}
.season-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;width:100%;height:100%}
.season h2{font-size:clamp(30px,3.8vw,48px)}
.scaps{display:grid;margin-top:22px}
.scaps p{grid-area:1/1;font-size:19px;color:var(--tx2);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.scaps p.on{opacity:1;transform:none;transition:opacity .45s .2s,transform .5s .2s}
.scaps b{color:var(--tx)}
.scard{background:var(--win);border:1px solid var(--line2);border-radius:16px;padding:22px}
.days{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.days div{text-align:center;padding:8px 2px;font-size:13px;color:var(--mu);border-right:1px solid var(--line);transition:background .3s,color .3s}
.days div:last-child{border-right:0}
.days b{display:block;font-size:19px;font-weight:700;color:var(--mu)}
.days div.past b{color:var(--tx)}
.days div.on{background:#fff;color:#0b0d11}
.days div.on b{color:#0b0d11}
.stat{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.stat b{font-size:42px;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{color:var(--mu);font-size:15px}
.ppl{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pp{border-radius:7px;background:var(--bg2);border:1px solid var(--line);padding:8px 4px;text-align:center;font-size:13px;font-weight:500;color:var(--mu);transition:background .35s,color .35s,border-color .35s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp.ok{background:var(--ok-soft);border-color:rgba(60,207,152,.35);color:var(--ok)}
.pp.ping{background:var(--wait-soft);border-color:rgba(242,180,80,.35);color:var(--wait)}
.pp.late{background:var(--bad-soft);border-color:rgba(255,122,102,.35);color:var(--bad)}
.note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--bg2);font-size:15px;color:var(--tx2)}
.faq{max-width:840px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:19px;font-weight:600;letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:26px;font-weight:400;color:var(--mu);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 22px 0;color:var(--tx2)}
.cta-end{text-align:center;padding:140px 0}
.cta-end h2{font-size:clamp(36px,5.4vw,72px);margin-bottom:18px}
.cta-end p{color:var(--tx2);font-size:20px;margin-bottom:30px}

/* demo */
.pg-demo .nav{background:rgba(11,13,17,.82);border-bottom-color:var(--line)}
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;padding:calc(var(--nav-h) + 80px) 0 120px}
.demo h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.05em}
.demo .lead{margin-top:18px;font-size:19px;color:var(--tx2)}
.demo ul{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:12px;color:var(--tx2)}
.demo li{padding-left:26px;position:relative}
.demo li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.form{border:1px solid var(--line2);border-radius:18px;padding:32px;display:grid;gap:16px;background:var(--win)}
.form .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:7px;font-size:14px;font-weight:500;color:var(--tx2)}
.form input,.form select{font:inherit;font-size:17px;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;background:var(--bg2);color:var(--tx);min-height:50px;width:100%}
.form input:focus,.form select:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.form .btn{min-height:52px;margin-top:6px}
.form .small{font-size:13px;color:var(--mu);text-align:center}
.done-box{text-align:center;padding:40px 10px}
.done-box h3{font-size:28px;margin-bottom:10px}
.done-box p{color:var(--tx2)}

/* pie */
.foot{border-top:1px solid var(--line);padding:80px 0 30px;color:var(--tx2);font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.foot h3{font-size:14px;color:var(--tx);letter-spacing:0;margin-bottom:12px}
.foot-grid a{display:block;padding:4px 0}
.foot-grid a:hover{color:var(--tx)}
.foot-legal{padding-top:20px;font-size:13.5px;color:var(--mu)}

/* aparición */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav-links{display:none}
  .nav .btn-sm{margin-left:auto}
  .burger{display:block}
  .menu .btn{width:100%}
  .method{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .areas-sum{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .sec{padding:96px 0}
  .area{grid-template-columns:1fr;gap:18px;align-content:start;overflow:hidden}
  .a-list{display:none}
  .a-txt .lnk{display:none}
  .control{grid-template-columns:1fr 1fr}
  .control div:nth-child(2){border-right:0}
  .control div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sectors,.others,.levels,.plans,.uses{grid-template-columns:1fr}
  .sct{min-height:340px}
  .secu{grid-template-columns:1fr 1fr}
  .cmp{grid-template-columns:1fr}
  .cmp-ctl{border-right:0;border-bottom:1px solid var(--line)}
  .p-grid{grid-template-columns:1fr;gap:32px}
  .p-ui{position:static}
  .season-grid{grid-template-columns:1fr;gap:18px;align-content:start;padding-top:20px}
  .demo{grid-template-columns:1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:14px}
  .top .srch{display:none}
  .kpis{gap:6px}.kpi{padding:9px 10px}.kpi b{font-size:22px}.kpi small{font-size:12px}
  .rw{grid-template-columns:1fr auto;gap:6px 10px;padding:10px 6px}
  .rw .bar{grid-column:1/-1;grid-row:2}
  .rw .wh{display:none}
  .det{grid-template-columns:1fr;padding:12px;gap:10px;align-content:start}
  .det .paper{height:300px}
  .tl h4{font-size:16px}.tl>small{margin-bottom:6px}.ev{padding:6px 0;font-size:13px}
  .sheet{width:118px;font-size:9.5px;padding:10px}.sheet b{font-size:11px}
}
@media (max-width:640px){
  :root{--gut:18px}
  body{font-size:16px}
  .sec{padding:80px 0}
  .head{margin-bottom:36px}
  .copy{top:calc(var(--nav-h) + 4vh)}
  .copy .h1{font-weight:700;font-size:48px}
  .copy .row-b .btn{flex:1}
  .hwin{width:calc(100vw - 20px);height:calc(100svh - 170px)}
  .sc-head .lnk{display:none}
  .sc-head .label{display:none}
  .sc-head h2{font-size:28px}
  .sc-chips{margin:14px calc(-1 * var(--gut)) 12px;padding:0 var(--gut)}
  .area{padding:20px;border-radius:16px}
  .a-txt h3{font-size:26px;margin-bottom:6px}
  .a-n{margin-bottom:6px}
  .a-ui{padding:14px;gap:8px}
  .ui-row{padding:9px 10px;font-size:13.5px}
  .fb{grid-template-columns:1fr}.fb-pal{display:none}
  .ext{grid-template-columns:1fr}.ext .inv{display:none}
  .control{grid-template-columns:1fr}
  .control div{border-right:0;border-bottom:1px solid var(--line)}
  .control div:last-child{border-bottom:0}
  .method{grid-template-columns:1fr 1fr}
  .secu{grid-template-columns:1fr}
  .cmp-out{grid-template-columns:1fr;padding:20px}
  .cmp-ctl{padding:20px}
  .caps{grid-template-columns:1fr}
  .areas-sum{grid-template-columns:1fr}
  .letter{font-size:17px}
  .s-copy h1{font-size:42px}
  .form{padding:20px}.form .f2{grid-template-columns:1fr}
  .ppl{gap:4px}.pp{font-size:12.5px;padding:7px 2px}
  .scaps p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.sb-t{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.uses .use h3{font-size:19px}
.caps ul[data-secu]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 32px}
.caps:has(ul[data-secu]){grid-template-columns:1fr !important}
@media (max-width:900px){.caps ul[data-secu]{grid-template-columns:1fr}}
.s-hero .pin{padding-top:0}
.btn{white-space:nowrap}
.s-doc .paper{aspect-ratio:auto;padding-bottom:34%}
@media (max-width:760px){
  .nav .btn-sm{padding:0 12px;font-size:13.5px;min-height:34px}
  .det .paper{height:auto;max-height:300px;font-size:11px}
  .det .paper p:nth-of-type(3){display:none}
  .det .paper{padding-bottom:26%}
  .det .ink{bottom:9%}
  .s-doc .paper{font-size:11.5px;padding:6% 6% 34%}
  .copy .row-b .btn{padding:0 14px;font-size:16px}
}
.s-doc .fld.done{color:transparent}
.stamp{top:3%;right:5%;font-size:20px}
@media (max-width:760px){.det .paper{height:260px;max-height:none}}
/* ---------- revisión móvil ---------- */
@media (max-width:900px){
  .p-grid,.area,.uses,.sectors,.others,.levels,.plans,.cmp,.season-grid{grid-template-columns:minmax(0,1fr)}
  .caps{grid-template-columns:minmax(0,1fr)}
  .p-sec{padding:64px 0}
  .p-ui .a-ui{min-height:0}
}
@media (max-width:640px){
  .copy .label::before,.s-copy .label::before{display:none}
  .copy .label,.s-copy .label{margin-bottom:12px}
  .branch{grid-template-columns:1fr}
  .node{font-size:13.5px;padding:9px 10px}
  .node .pill{font-size:12px;padding:3px 8px}
  .ui-row .pill{font-size:12px;padding:3px 8px}
  .a-ui .ui-row small{font-size:12.5px}
  .area .a-ui{max-height:none}
  .method li{padding-right:12px}
  .p-hero{padding:calc(var(--nav-h) + 48px) 0 40px}
  .areas-sum a{padding:16px}
  .sec-2 .head,.sec .head{margin-bottom:32px}
}
.ev small{font-size:13px}
.ui-row>span:not(.pill):not(.av){flex:1;min-width:0}
@media (max-width:640px) and (max-height:700px){.a-txt>p{display:none}.a-n{display:none}}

/* cabecera: entrar y firmar gratis */
.nav-quiet{font-size:15px;font-weight:500;color:var(--tx2)}
.nav-quiet:hover{color:var(--tx)}
.nav-in{gap:22px}
.nav-links{margin-right:auto}
.menu-foot{display:grid;gap:10px}
@media (max-width:1040px){.nav-quiet,.nav-demo{display:none}.nav .nav-free{margin-left:auto;background:#fff;color:#0b0d11;box-shadow:none}}

/* ---------- entrar ---------- */
.login{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding-top:var(--nav-h)}
.lg-side{border-right:1px solid var(--line);padding:clamp(32px,6vw,80px);display:flex;flex-direction:column;justify-content:center;gap:22px;background:var(--bg2)}
.lg-side h2{font-size:clamp(30px,3.4vw,44px)}
.lg-side p{color:var(--tx2);font-size:18px}
.lg-side .tip{border:1px solid var(--line2);border-radius:14px;padding:18px;background:var(--win)}
.lg-side .tip b{display:block;margin-bottom:4px}
.lg-main{display:flex;align-items:center;justify-content:center;padding:40px var(--gut)}
.lg-card{width:min(420px,100%);display:grid;gap:14px}
.lg-card h1{font-size:32px;letter-spacing:-.04em;margin-bottom:6px}
.lg-card>p{color:var(--tx2);margin-bottom:8px}
.sso{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--tx);font-weight:600;font-size:16px}
.sso:hover{background:rgba(255,255,255,.05)}
.sso i{width:20px;height:20px;border-radius:4px;flex:none}
.sso .g{background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);border-radius:50%}
.sso .m{background:linear-gradient(90deg,#f25022 50%,#7fba00 50%) top/100% 50% no-repeat,linear-gradient(90deg,#00a4ef 50%,#ffb900 50%) bottom/100% 50% no-repeat}
.or{display:flex;align-items:center;gap:12px;color:var(--mu);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.lg-card label{display:grid;gap:7px;font-size:14px;font-weight:500;color:var(--tx2)}
.lg-card input{font:inherit;font-size:17px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;background:var(--bg2);color:var(--tx);min-height:50px}
.lg-card input:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.lg-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--tx2)}
.lg-row a{color:#9db0ff}
.lg-card .btn{min-height:52px;width:100%}
.lg-msg{font-size:14px;color:var(--wait);background:var(--wait-soft);border-radius:10px;padding:10px 12px;display:none}
.lg-foot{font-size:14.5px;color:var(--tx2);text-align:center;margin-top:8px}
.lg-foot a{color:#9db0ff}
@media (max-width:900px){.login{grid-template-columns:1fr}.lg-side{order:2;border-right:0;border-top:1px solid var(--line)}}

/* ---------- firmar gratis ---------- */
.fr-hero{padding:calc(var(--nav-h) + 64px) 0 36px;text-align:center}
.fr-hero h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.05em}
.fr-hero p{color:var(--tx2);font-size:clamp(17px,1.7vw,21px);max-width:640px;margin:18px auto 0}
.fr-hero .priv{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-size:14px;color:var(--ok);background:var(--ok-soft);border-radius:99px;padding:6px 12px}
.tool{max-width:1000px;margin:0 auto 100px;border:1px solid var(--line2);border-radius:18px;background:var(--win);overflow:hidden}
.t-steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.t-steps div{padding:14px 16px;display:flex;gap:10px;align-items:center;font-weight:600;color:var(--mu);font-size:15px}
.t-steps b{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:13px;flex:none}
.t-steps .on{color:var(--tx)}.t-steps .on b{background:#fff;color:#0b0d11;border-color:#fff}
.t-steps .ok b{background:var(--ok);border-color:var(--ok);color:#0b0d11}
.t-pane{padding:24px}
.drop{border:1.5px dashed var(--line2);border-radius:14px;padding:56px 20px;text-align:center;display:grid;gap:12px;justify-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.drop.over,.drop:hover{border-color:var(--acc);background:var(--acc-soft)}
.drop svg{width:44px;height:44px;stroke:var(--tx2);fill:none;stroke-width:1.6}
.drop b{font-size:20px}
.drop span{color:var(--mu);font-size:15px}
.t-alt{text-align:center;margin-top:14px;font-size:15px;color:var(--tx2)}
.t-alt button{background:none;border:0;color:#9db0ff;font-weight:600;padding:6px}
.t-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.t-bar .btn{min-height:42px;font-size:15px}
.t-bar .hint{color:var(--mu);font-size:14px;margin-left:auto}
.pages{display:grid;gap:16px;justify-items:center;background:#0e1014;border-radius:12px;padding:16px;max-height:70svh;overflow:auto}
.pg{position:relative;background:#fff;box-shadow:none;max-width:100%;touch-action:pan-y}
.pg canvas{display:block;width:100%;height:auto}
.pg.armed{cursor:crosshair;outline:2px dashed var(--acc);outline-offset:3px}
.ov{position:absolute;border:1.5px dashed transparent;touch-action:none;cursor:move}
.ov.sel{border-color:var(--acc)}
.ov img{width:100%;height:100%;display:block;pointer-events:none}
.ov .tx{font:500 14px Onest,sans-serif;color:#111;white-space:nowrap;line-height:1;pointer-events:none}
.ov .del{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;border:0;background:#0b0d11;color:#fff;font-size:14px;display:none;padding:0}
.ov .rs{position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;border-radius:50%;background:var(--acc);border:2px solid #fff;display:none;touch-action:none;cursor:nwse-resize}
.ov.sel .del,.ov.sel .rs{display:block}
.t-next{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.done-pane{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dp-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg2);display:grid;gap:12px;align-content:start}
.dp-card h3{font-size:22px}
.dp-card p{color:var(--tx2);font-size:15px}
.dp-card label{display:grid;gap:6px;font-size:14px;color:var(--tx2)}
.dp-card input,.dp-card textarea{font:inherit;font-size:16px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--win);color:var(--tx)}
.dp-card textarea{min-height:80px;resize:vertical}
.dp-card .btn{width:100%}
.dp-note{font-size:13.5px;color:var(--mu)}
.upsell{grid-column:1/-1;border:1px solid var(--acc);border-radius:14px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.upsell b{font-size:18px}
.upsell p{color:var(--tx2);font-size:15px}
.sigm{position:fixed;inset:0;z-index:90;background:rgba(5,6,9,.7);display:grid;place-items:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.sigm.on{opacity:1;visibility:visible;transition:opacity .2s}
.sigm-box{background:var(--win);border:1px solid var(--line2);border-radius:18px;width:min(560px,100%);padding:22px;display:grid;gap:14px}
.sigm-box h3{font-size:22px}
.sigm-box p{color:var(--tx2);font-size:15px}
.spad{height:220px;border-radius:12px;background:#fff;position:relative;touch-action:none}
.spad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.spad::after{content:"";position:absolute;left:24px;right:24px;bottom:54px;border-top:1px solid #c8cbd2;pointer-events:none}
.sigm-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.fr-feats{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 var(--gut) 40px}
.fr-feats b{display:block;font-size:19px;margin-bottom:6px}
.fr-feats p{color:var(--tx2);font-size:15.5px}
@media (max-width:760px){
  .t-steps div{padding:12px 8px;font-size:13.5px;gap:6px}
  .t-steps b{width:22px;height:22px;font-size:12px}
  .t-pane{padding:14px}
  .drop{padding:36px 14px}
  .t-bar .hint{margin-left:0;width:100%}
  .pages{padding:8px;max-height:62svh}
  .done-pane{grid-template-columns:1fr}
  .fr-feats{grid-template-columns:1fr}
}

/* =========================================================
   v9 · CLARO, CÁLIDO Y GRANDE (modelo zernio, pensado para personas mayores)
   ========================================================= */
:root{
  --bg:#f5f2ec; --bg2:#ece7de; --win:#ffffff; --win2:#f7f5f0; --line:rgba(30,25,15,.09); --line2:rgba(30,25,15,.16);
  --tx:#1d1c1a; --tx2:#47443e; --mu:#6b6760;
  --acc:#2448ff; --acc-d:#1a37d6; --acc-soft:rgba(36,72,255,.10);
  --ok:#0f7a4f; --ok-soft:#dff3e8; --wait:#8a5200; --wait-soft:#fdeed3; --bad:#b4321b; --bad-soft:#fbe4de;
}
html,body{background:var(--bg)}
body{font-size:18px;color:var(--tx)}
.btn{background:var(--tx);color:#fff}
.btn:hover{background:#000}
.btn-acc{background:var(--acc);color:#fff}.btn-acc:hover{background:var(--acc-d)}
.btn-ghost{background:#fff;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn-ghost:hover{background:var(--win2)}
.btn-lg{min-height:60px;padding:0 30px;font-size:19px}
.nav.solid{background:rgba(245,242,236,.9)}
.nav .nav-free{background:var(--acc);color:#fff;box-shadow:none}
.nav .nav-free:hover{background:var(--acc-d)}
.nav .nav-demo{background:#fff;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line2)}
.nav-links a{font-size:16px}
.logo-xl{color:var(--tx)}
.label{color:var(--acc)}
.label::before{display:none}
.sc-chips button[aria-selected=true],.days div.on,.p-nav a.on,.bill-sw button[aria-pressed=true],.d-tabs button[aria-selected=true]{background:var(--tx);color:#fff;border-color:var(--tx)}
.days div.on b{color:#fff}
.bar{background:var(--bg2)}
.fi{border:1px solid var(--line2)}
.kpi{background:var(--win2)}
.p-a{background:var(--acc-soft);color:var(--acc)}
.p-n{background:var(--bg2);color:var(--tx2)}
.av{background:#e4e9ff;color:#1a37d6}.av.g{background:#dff3e8;color:#0f7a4f}.av.o{background:#fdeed3;color:#8a5200}.av.p{background:#f3e3fa;color:#7a2c95}
.lv em,.cmp-col.us b,.lg-row a,.lg-foot a{color:var(--acc)}
.p-nav{background:rgba(245,242,236,.92)}
.pages{background:var(--bg2)}
.side a.on{background:var(--win2)}
.win{box-shadow:none}
.sec-2{background:var(--bg2)}
.a-list li::before{background:var(--acc-soft) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%232448ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.top .nb{background:var(--tx);color:#fff}
.letter{box-shadow:none;outline:1px solid var(--line)}
.sigm{background:rgba(20,18,14,.55)}
.foot{background:var(--bg2)}

/* --- franja de aviso arriba (como zernio) --- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:51;background:var(--acc);color:#fff;text-align:center;font-size:15px;font-weight:600;padding:9px 16px}
.topbar a{text-decoration:underline;text-underline-offset:3px}
body.has-top .nav{top:38px;transition:top .25s,background .3s,border-color .3s}
body.has-top.past .nav{top:0}
body.has-top main{padding-top:38px}
body.has-top .menu{top:calc(var(--nav-h) + 38px)}
body.has-top.past .menu{top:var(--nav-h)}

/* --- portada sencilla --- */
.home-hero{padding:calc(var(--nav-h) + 56px) 0 40px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line2);border-radius:999px;padding:7px 14px;font-size:15px;font-weight:600;color:var(--tx2);margin-bottom:22px}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.home-hero h1{font-size:clamp(44px,7.2vw,96px);letter-spacing:-.05em;line-height:1;max-width:980px;margin:0 auto}
.home-hero h1 .sw{position:relative;white-space:nowrap}
.home-hero h1 .sw svg{position:absolute;left:-2%;width:104%;bottom:-.16em;height:.4em;overflow:visible}
.home-hero h1 .sw path{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;animation:swd 1.3s .5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes swd{to{stroke-dashoffset:0}}
.home-hero .sub{font-size:clamp(19px,2vw,24px);color:var(--tx2);max-width:640px;margin:22px auto 0;line-height:1.45}
.home-tool{max-width:900px;margin:40px auto 0;text-align:left}
.home-tool .tool{margin-bottom:0}
.reassure{display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;margin-top:22px;font-size:16px;color:var(--tx2)}
.reassure span::before{content:"✓ ";color:var(--ok);font-weight:700}
/* herramienta grande y clara */
.tool{border:1.5px solid var(--line2);background:#fff;border-radius:22px}
.t-steps div{font-size:17px;padding:16px 18px}
.t-steps b{width:32px;height:32px;font-size:15px}
.t-steps .on b{background:var(--acc);border-color:var(--acc);color:#fff}
.t-steps .on{color:var(--tx)}
.drop{border:2.5px dashed #b8bfd8;background:#f8f9ff;padding:52px 20px}
.drop svg{width:56px;height:56px;stroke:var(--acc)}
.drop b{font-size:26px;letter-spacing:-.02em}
.drop span{font-size:17px;color:var(--tx2)}
.drop .btn{pointer-events:none;margin-top:6px}
.t-alt{font-size:17px}
.t-alt button{color:var(--acc);font-size:17px}
.t-bar .btn{min-height:54px;font-size:17px}
.t-bar .hint{font-size:16px;color:var(--tx2)}
.t-next .btn{min-height:56px;font-size:18px}
.dp-card{background:var(--win2)}
.dp-card .btn{min-height:56px;font-size:18px}
.dp-card input,.dp-card textarea{background:#fff;font-size:17px}
.sigm-box{background:#fff}
.sigm-box .btn{min-height:54px;font-size:17px}
.ov .rs{width:26px;height:26px;right:-13px;bottom:-13px}
.ov .del{width:30px;height:30px;font-size:17px;top:-15px;right:-15px}
/* --- dos caminos grandes --- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path{background:#fff;border:1.5px solid var(--line2);border-radius:22px;padding:34px;display:flex;flex-direction:column;gap:14px}
.path .ico{width:64px;height:64px;border-radius:18px;background:var(--acc-soft);display:grid;place-items:center;font-size:30px}
.path h3{font-size:30px}
.path p{font-size:18px;color:var(--tx2)}
.path ol{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.path li{display:flex;gap:14px;align-items:flex-start;font-size:18px}
.path li::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.path .btn{align-self:flex-start;margin-top:auto}
/* --- teléfono grande para quien firma --- */
.easy{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.easy h2{font-size:clamp(34px,4.6vw,58px)}
.easy .big-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.easy .big-list li{font-size:20px;display:flex;gap:14px;align-items:flex-start}
.easy .big-list li b{font-size:20px}
.easy .big-list li::before{content:"✓";width:34px;height:34px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-weight:800;flex:none}
.bigphone{width:340px;height:700px;border-radius:52px;border:12px solid #1d1c1a;background:#fff;margin:0 auto;position:relative;overflow:hidden}
.bigphone::before{content:"";position:absolute;top:10px;left:50%;width:100px;height:28px;margin-left:-50px;border-radius:16px;background:#1d1c1a;z-index:2}
.bp-in{position:absolute;inset:0;padding:56px 20px 22px;display:flex;flex-direction:column;gap:14px}
.bp-from{display:flex;gap:12px;align-items:center}
.bp-from .av{width:46px;height:46px;font-size:15px}
.bp-from b{display:block;font-size:18px}
.bp-from span{font-size:15px;color:var(--mu)}
.bp-in h4{font-size:26px;letter-spacing:-.03em;line-height:1.15}
.bp-in p{font-size:18px;color:var(--tx2)}
.bp-doc{border:1.5px solid var(--line2);border-radius:14px;padding:16px;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bp-doc span{color:var(--acc);font-weight:700}
.bp-btn{margin-top:auto;min-height:64px;border-radius:16px;background:var(--acc);color:#fff;font-size:21px;font-weight:700;display:grid;place-items:center}
.bp-help{text-align:center;font-size:15px;color:var(--mu)}
/* --- precios tipo zernio --- */
.ptable{max-width:760px;margin:0 auto;background:#fff;border:1.5px solid var(--line2);border-radius:22px;overflow:hidden}
.ptable .pr{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line);font-size:19px}
.ptable .pr:last-child{border-bottom:0}
.ptable .pr b{font-size:24px;letter-spacing:-.02em;text-align:right}
.ptable .pr.free b{color:var(--ok)}
.ptable .pr small{display:block;font-size:15px;color:var(--mu)}
.pnotes{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-size:16px;color:var(--tx2)}
.pnotes span::before{content:"✓ ";color:var(--ok);font-weight:700}
@media (max-width:900px){.paths,.easy{grid-template-columns:1fr}.easy{gap:36px}}
@media (max-width:640px){
  body{font-size:17px}
  .topbar{font-size:14px;padding:8px 12px}
  .home-hero{padding-top:calc(var(--nav-h) + 28px)}
  .home-hero h1{font-size:44px}
  .home-hero .sub{font-size:19px}
  .home-tool{margin-top:28px}
  .t-steps div{font-size:15px;padding:12px 8px;justify-content:center}
  .drop{padding:34px 14px}
  .drop b{font-size:23px}
  .path{padding:24px}
  .path h3{font-size:26px}
  .bigphone{width:310px;height:640px}
  .ptable .pr{padding:16px 18px;font-size:17px}
  .ptable .pr b{font-size:20px}
}

.lg-wrap{width:min(440px,100%);display:grid;gap:22px}
.lg-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border-radius:14px;padding:5px}
.lg-tabs button{border:0;background:none;border-radius:10px;min-height:50px;font-size:17px;font-weight:600;color:var(--tx2)}
.lg-tabs button[aria-pressed=true]{background:#fff;color:var(--tx);box-shadow:0 0 0 1px var(--line)}
.lg-card input{background:#fff}
.lg-side{background:var(--bg2)}
.topbar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:38px;line-height:20px}@media (max-width:640px){.tb-l{display:none}}
.pages{max-height:none !important;overflow:visible}

/* =========================================================
   v10 · vuelven los colores de la v8 (oscuro + cobalto), con la estructura sencilla y grande de la v9
   ========================================================= */
:root{
  --bg:#0b0d11; --bg2:#101318; --win:#14171d; --win2:#191d24; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --tx:#eef0f4; --tx2:#b9bec9; --mu:#9298a7;
  --acc:#4466ff; --acc-d:#3352e6; --acc-soft:rgba(68,102,255,.16);
  --ok:#3ccf98; --ok-soft:rgba(60,207,152,.14); --wait:#f2b450; --wait-soft:rgba(242,180,80,.14); --bad:#ff7a66; --bad-soft:rgba(255,122,102,.14);
}
html,body{background:var(--bg)}
.btn{background:#fff;color:#0b0d11}
.btn:hover{background:#dfe3ec}
.btn-acc{background:var(--acc);color:#fff}.btn-acc:hover{background:var(--acc-d)}
.btn-ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.nav.solid{background:rgba(11,13,17,.86)}
.nav .nav-demo{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line2)}
.label{color:#8fa3ff}
.sc-chips button[aria-selected=true],.days div.on,.p-nav a.on,.bill-sw button[aria-pressed=true]{background:#fff;color:#0b0d11;border-color:#fff}
.days div.on b{color:#0b0d11}
.bar{background:#232731}
.kpi{background:var(--bg2)}
.p-a{background:var(--acc-soft);color:#9db0ff}
.p-n{background:rgba(255,255,255,.07);color:var(--tx2)}
.av{background:#2a3350;color:#cdd6ff}.av.g{background:#173a2e;color:#9ff0cc}.av.o{background:#3d2a17;color:#ffd39a}.av.p{background:#35203a;color:#f2b8ff}
.lv em,.cmp-col.us b,.lg-row a,.lg-foot a{color:#9db0ff}
.p-nav{background:rgba(11,13,17,.88)}
.top .nb{background:#fff;color:#0b0d11}
.logo-xl{color:#fff}
.foot{background:var(--bg)}
.sec-2{background:var(--bg2)}
.a-list li::before{background:var(--acc-soft) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%239db0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sigm{background:rgba(5,6,9,.75)}
.sigm-box{background:var(--win)}
/* portada sencilla, en oscuro */
.badge{background:var(--win);border-color:var(--line2);color:var(--tx2)}
.home-hero h1 .sw path{stroke:var(--acc)}
.tool{background:var(--win);border-color:var(--line2)}
.t-steps .on b{background:var(--acc);border-color:var(--acc);color:#fff}
.drop{background:rgba(68,102,255,.06);border-color:rgba(143,163,255,.45)}
.drop svg{stroke:#8fa3ff}
.drop span{color:var(--tx2)}
.t-alt button{color:#9db0ff}
.pages{background:#0e1014}
.dp-card{background:var(--bg2)}
.dp-card input,.dp-card textarea{background:var(--win);color:var(--tx)}
.path{background:var(--win);border-color:var(--line2)}
.path li::before{background:#fff;color:#0b0d11}
.bigphone{border-color:#2a2e37;background:#fff;color:#1d1c1a}
.bigphone::before{background:#2a2e37}
.bp-in p,.bp-from span,.bp-help{color:#5b5953}
.bp-in .av{background:#e4e9ff;color:#1a37d6}
.bp-doc{border-color:#d9d6cf;color:#1d1c1a}
.bp-doc span{color:#2448ff}
.bp-btn{background:#2448ff}
.easy .big-list li::before{background:var(--ok-soft);color:var(--ok)}
.ptable{background:var(--win);border-color:var(--line2)}
.ptable .pr.free b{color:var(--ok)}
.lg-side{background:var(--bg2)}
.lg-tabs{background:var(--win2)}
.lg-tabs button[aria-pressed=true]{background:#fff;color:#0b0d11;box-shadow:none}
.lg-card input{background:var(--bg2)}
.letter{outline:none}
/* filas que se deslizan: nunca un botón cortado contra el borde */
.sc-chips,.p-nav .wrap,.d-tabs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);scroll-padding-inline:28px}
.sc-chips{padding-left:22px;padding-right:22px;margin-left:-22px;margin-right:-22px}
@media (max-width:640px){.sc-chips{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut)}}
.sc-chips::after,.p-nav .wrap::after{content:"";flex:0 0 8px}
/* ---------- enviar a firmar ---------- */
.ov.field{background:rgba(68,102,255,.14);border:2px dashed #4466ff;border-radius:6px;display:grid;place-items:center}
.ov.field .fl{font:700 13px Onest,sans-serif;color:#1a37d6;pointer-events:none;text-align:center}
.ov.field.sel{border-style:solid}
.sendform{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sendform fieldset{border:1px solid var(--line2);border-radius:14px;padding:18px;margin:0;display:grid;gap:12px}
.sendform legend{font-weight:700;font-size:18px;padding:0 6px}
.sendform legend small,.sendform label small{font-weight:400;color:var(--mu);font-size:14px}
.sendform label{display:grid;gap:7px;font-size:15px;color:var(--tx2)}
.sendform input,.sendform textarea{font:inherit;font-size:17px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;background:var(--bg2);color:var(--tx);min-height:52px}
.sendform textarea{min-height:90px;resize:vertical}
.sendform input:focus,.sendform textarea:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.sendform .full{grid-column:1/-1}
.err{grid-column:1/-1;color:var(--bad);background:var(--bad-soft);border-radius:10px;padding:12px 14px}
.sent{text-align:center;padding:30px 10px;display:grid;gap:12px;justify-items:center}
.sent h2{font-size:36px}
.sent p{font-size:19px;color:var(--tx2);max-width:560px}
.ok-big{width:84px;height:84px;border-radius:50%;background:var(--ok);color:#06150e;font-size:44px;font-weight:800;display:grid;place-items:center}
.ok-big.bad{background:var(--bad)}
@media (max-width:760px){.sendform{grid-template-columns:1fr}}
/* ---------- página de quien firma (muy sencilla) ---------- */
body.pg-firma .topbar,body.pg-firma .nav-links,body.pg-firma .nav-quiet,body.pg-firma .nav-free,body.pg-firma .nav-demo,body.pg-firma .burger,body.pg-firma .foot{display:none}
body.pg-firma main{padding-top:0}
body.pg-firma .nav{top:0}
.signer{padding:calc(var(--nav-h) + 28px) 0 140px}
.sg-head{max-width:760px;margin:0 auto 22px}
.sg-head h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.04em}
.sg-head>p{font-size:21px;color:var(--tx2);margin-top:10px;line-height:1.45}
.sg-msg{background:var(--win);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;font-style:italic}
.sg-steps{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.sg-steps li{display:flex;gap:12px;align-items:center;font-size:19px}
.sg-steps li::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;background:#fff;color:#0b0d11;display:grid;place-items:center;font-weight:800;flex:none}
.sg-where{margin-top:18px;background:none;border:0;color:#9db0ff;font-size:18px;font-weight:600;padding:8px 0}
.signer .pages{max-width:800px;margin:0 auto}
.sg-field{position:absolute;background:#fff3b0;outline:2.5px solid #e2b500;border-radius:6px;display:grid;place-items:center;cursor:pointer;animation:sgp 1.6s ease-in-out infinite}
.sg-field span{font:800 15px Onest,sans-serif;color:#6b5100}
.sg-field.done{background:transparent;outline:1.5px dashed #9aa0ad;animation:none}
.sg-field img{max-width:100%;max-height:100%}
@keyframes sgp{50%{background:#ffe680}}
.sg-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:rgba(11,13,17,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:center}
.sg-bar .btn{width:min(520px,100%);min-height:66px;font-size:23px;border-radius:18px}
.sg-state{max-width:640px;margin:8vh auto 0;text-align:center;display:grid;gap:14px;justify-items:center}
.sg-state h1{font-size:clamp(32px,5vw,46px);letter-spacing:-.04em}
.sg-state p{font-size:20px;color:var(--tx2)}
[hidden]{display:none !important}

/* la herramienta, ahora debajo de la escena de los papeles */
.home-hero.tool-sec{padding-top:110px;border-top:1px solid var(--line)}
.tool-h{font-size:clamp(40px,6vw,80px);letter-spacing:-.05em;line-height:1;max-width:980px;margin:0 auto}
.tool-h .sw{position:relative;white-space:nowrap}
.tool-h .sw svg{position:absolute;left:-2%;width:104%;bottom:-.16em;height:.4em;overflow:visible}
.tool-h .sw path{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;animation:swd 1.3s .5s cubic-bezier(.5,0,.2,1) forwards}
.hero .copy{top:calc(var(--nav-h) + 38px + 4vh)}
body.past .hero .copy{top:calc(var(--nav-h) + 4vh)}
@media (max-width:640px){.home-hero.tool-sec{padding-top:72px}.tool-h{font-size:40px}.copy .row-b{flex-direction:column;align-items:stretch}.copy .row-b .btn{flex:none;min-height:56px}}
.nav-links a,.nav-quiet,.nav .btn{white-space:nowrap}

/* ---------- cabecera limpia (v11) ---------- */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
.nav-links{margin:0;justify-content:center;gap:6px;align-items:center}
.nav-links>a,.dd-btn{font-size:15.5px;font-weight:500;color:var(--tx2);padding:9px 14px;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s;background:none;border:0;display:inline-flex;align-items:center;gap:6px}
.nav-links>a:hover,.dd-btn:hover,.dd.open .dd-btn{color:var(--tx);background:rgba(255,255,255,.06)}
.nav-links>a[aria-current]{color:var(--tx)}
.dd{position:relative}
.dd-btn svg{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px);width:320px;background:var(--win);border:1px solid var(--line2);border-radius:16px;padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.dd-menu a{display:block;padding:12px 14px;border-radius:10px}
.dd-menu a:hover,.dd-menu a[aria-current]{background:var(--win2)}
.dd-menu b{display:block;font-size:15.5px;font-weight:600}
.dd-menu span{display:block;font-size:14px;color:var(--mu);margin-top:2px}
.nav-end{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.nav-end .btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.topbar{display:none}
body main{padding-top:0}
@media (max-width:1040px){
  .nav-in{display:flex}
  .nav-links{display:none}
  .nav-end{margin-left:auto;gap:8px}
  .nav-end .nav-quiet{display:none}
}
.menu{overflow-y:auto;justify-content:flex-start;gap:24px}
.menu nav a{font-size:21px;padding:13px 0}
.menu-foot{padding-bottom:24px}

/* ---------- final de «Firmar gratis»: descargar o enviar ---------- */
.end{max-width:680px;margin:0 auto;display:grid;gap:18px;text-align:center}
.end-ok{display:inline-flex;align-items:center;gap:10px;justify-self:center;background:var(--ok-soft);color:var(--ok);font-weight:700;border-radius:999px;padding:9px 16px 9px 9px;font-size:17px}
.end-ok span{width:28px;height:28px;border-radius:50%;background:var(--ok);color:#06150e;display:grid;place-items:center;font-size:15px}
.end-q{font-size:clamp(26px,3.4vw,36px)}
.end-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{background:var(--bg2);border:1.5px solid var(--line2);border-radius:20px;padding:28px 18px;display:grid;justify-items:center;gap:8px;color:var(--tx);transition:border-color .2s,background .2s}
.choice:hover{border-color:var(--acc);background:var(--acc-soft)}
.choice svg{width:44px;height:44px;fill:none;stroke:#8fa3ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.choice b{font-size:23px;letter-spacing:-.02em}
.choice span{font-size:16px;color:var(--tx2)}
.mailform{display:grid;gap:14px;text-align:left;background:var(--bg2);border:1px solid var(--line2);border-radius:18px;padding:20px}
.mailform label{display:grid;gap:7px;font-size:16px;color:var(--tx2)}
.mailform small{color:var(--mu)}
.mailform input,.mailform textarea{font:inherit;font-size:18px;border:1px solid var(--line2);border-radius:12px;padding:13px 14px;background:var(--win);color:var(--tx);min-height:54px}
.mailform textarea{min-height:84px;resize:vertical}
.mailform input:focus,.mailform textarea:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.mailform .btn{width:100%}
.end-done{display:flex;gap:12px;align-items:center;text-align:left;background:var(--ok-soft);border-radius:16px;padding:16px 18px;font-size:18px}
.end-done span{width:34px;height:34px;border-radius:50%;background:var(--ok);color:#06150e;display:grid;place-items:center;font-weight:800;flex:none}
.end-name{font-size:14px;color:var(--mu)}
@media (max-width:560px){.end-choices{grid-template-columns:1fr}.choice{padding:22px 16px;grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:14px}.choice svg{grid-row:span 2;width:40px;height:40px}}
.t-bar .mode{display:contents}
.t-bar .mode[hidden]{display:none !important}

/* =========================================================
   v12 · BLANCO (mismo diseño, fondo blanco y azul cobalto)
   ========================================================= */
:root{
  --bg:#ffffff; --bg2:#f5f6f8; --win:#ffffff; --win2:#f3f4f7; --line:#e6e8ee; --line2:#d5d9e2;
  --tx:#14161b; --tx2:#454b58; --mu:#6a7080;
  --acc:#2448ff; --acc-d:#1a37d6; --acc-soft:#ebefff;
  --ok:#0f7a4f; --ok-soft:#e1f4ea; --wait:#8a5200; --wait-soft:#fdf0d8; --bad:#b4321b; --bad-soft:#fce6e1;
}
html,body{background:#fff;color:var(--tx)}
.btn{background:var(--tx);color:#fff}.btn:hover{background:#000}
.btn-acc{background:var(--acc);color:#fff}.btn-acc:hover{background:var(--acc-d)}
.btn-ghost{background:#fff;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line2)}.btn-ghost:hover{background:var(--bg2)}
.nav.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
.nav-links>a:hover,.dd-btn:hover,.dd.open .dd-btn{background:var(--bg2)}
.dd-menu{background:#fff}
.label{color:var(--acc)}
.logo-xl{color:var(--tx)}
.copy .h1 .muted{color:#a2a8b5}
.sec-2{background:var(--bg2);border-color:var(--line)}
.foot{background:#fff}
/* escena de los papeles: app blanca, papeles con borde */
.win{background:#fff;border-color:var(--line2)}
.win-bar i{background:#e3e6ec}
.side{background:#fafbfc}
.side a.on{background:#eef1f6}
.kpi{background:var(--bg2);border-color:var(--line)}
.bar{background:#e9ecf2}
.fi{border:1px solid var(--line2);background:#fff}
.rw.hl{background:#f3f5f9}
.top .nb{background:var(--tx);color:#fff}
.top .srch{border-color:var(--line2)}
.sheet{border:1px solid #d9dde5}
.det{background:#fff}
.det .paper{outline:1px solid var(--line2)}
.hcap p{background:var(--tx);color:#fff}
.av{background:#e8edff;color:#1a37d6}.av.g{background:#e1f4ea;color:#0f7a4f}.av.o{background:#fdf0d8;color:#8a5200}.av.p{background:#f4e6fa;color:#7a2c95}
.p-a{background:var(--acc-soft);color:var(--acc)}.p-n{background:var(--bg2);color:var(--tx2)}
.p-o{background:var(--ok-soft);color:var(--ok)}.p-w{background:var(--wait-soft);color:var(--wait)}
/* chips, pestañas, días */
.sc-chips button{background:#fff;border-color:var(--line2);color:var(--tx2)}
.sc-chips button[aria-selected=true],.days div.on,.p-nav a.on,.bill-sw button[aria-pressed=true]{background:var(--tx);color:#fff;border-color:var(--tx)}
.days div.on b{color:#fff}
.p-nav{background:rgba(255,255,255,.94)}
/* tarjetas y bloques */
.area,.lv,.plan,.use,.ptable,.control,.cmp,.others a,.areas-sum a,.scard,.tool,.path{background:#fff;border-color:var(--line2)}
.a-ui{background:var(--bg2);border-color:var(--line)}
.ui-row,.node,.fx div,.intg span,.cmp-col{background:#fff;border-color:var(--line)}
.cmp-out{background:var(--bg2)}
.cmp-col.us b,.lv em,.lg-row a,.lg-foot a,.t-alt button,.sg-where{color:var(--acc)}
.a-list li::before{background:var(--acc-soft) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%232448ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.letter{outline:1px solid var(--line2);box-shadow:none}
.bigphone{border-color:#14161b}
.bigphone::before{background:#14161b}
/* herramienta Firmar gratis */
.badge{background:#fff;border-color:var(--line2);color:var(--tx2)}
.drop{background:#f6f8ff;border-color:#b9c4f2}
.drop svg,.choice svg{stroke:var(--acc)}
.pages{background:var(--bg2)}
.pg{outline:1px solid var(--line2)}
.choice{background:#fff;border-color:var(--line2)}
.choice:hover{background:var(--acc-soft);border-color:var(--acc)}
.mailform,.dp-card{background:var(--bg2);border-color:var(--line2)}
.mailform input,.mailform textarea,.sendform input,.sendform textarea,.form input,.form select,.lg-card input,.dp-card input,.dp-card textarea{background:#fff;color:var(--tx);border-color:var(--line2)}
.sendform fieldset{border-color:var(--line2)}
.path li::before{background:var(--tx);color:#fff}
.end-ok span,.ok-big{color:#fff}
.t-steps .on b{background:var(--acc);border-color:var(--acc);color:#fff}
.sigm{background:rgba(20,22,27,.5)}
.sigm-box{background:#fff;border-color:var(--line2)}
/* páginas */
.lg-side{background:var(--bg2)}
.lg-tabs{background:var(--bg2)}
.lg-tabs button[aria-pressed=true]{background:#fff;color:var(--tx);box-shadow:0 0 0 1px var(--line2)}
.sg-steps li::before{background:var(--tx);color:#fff}
.sg-bar{background:rgba(255,255,255,.95);border-top-color:var(--line)}
.sg-msg{background:var(--bg2);border-color:var(--line)}
.menu{background:#fff}
.form{background:var(--bg2);border-color:var(--line2)}
.drop .btn,.drop span.btn{color:#fff}

/* campos para que rellene la otra persona */
.fadd-t{width:100%;font-size:16px;color:var(--tx2)}
.fadd{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.fadd button{min-height:48px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;font-size:16px;font-weight:600;color:var(--tx)}
.fadd button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ov.field.f-text,.ov.field.f-date{background:rgba(15,122,79,.10);border-color:#0f7a4f}
.ov.field.f-text .fl,.ov.field.f-date .fl{color:#0b5e3c;font-size:12px}
.ov.field.f-check{background:rgba(138,82,0,.12);border-color:#8a5200}
.ov.field.f-check .fl{color:#8a5200;font-size:14px}

/* quien firma: datos para rellenar */
.fill{max-width:760px;margin:0 auto 22px;background:var(--bg2);border:1.5px solid var(--line2);border-radius:20px;padding:22px}
.fill h2{font-size:26px;letter-spacing:-.03em}
.fill>p{color:var(--tx2);margin:4px 0 16px;font-size:17px}
.fill-list{display:grid;gap:14px}
.fill-row{display:grid;gap:7px;font-size:18px;font-weight:600}
.fill-row input{font:inherit;font-weight:400;font-size:20px;min-height:60px;border:2px solid var(--line2);border-radius:14px;padding:12px 16px;background:#fff;color:var(--tx)}
.fill-row input:focus{outline:3px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.fill-check{display:flex;align-items:center;gap:14px;font-size:19px;background:#fff;border:2px solid var(--line2);border-radius:14px;padding:14px 16px;min-height:60px}
.fill-check input{width:30px;height:30px;accent-color:var(--acc);flex:none}
.fill-err{max-width:760px;margin:0 auto 16px;background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:12px 16px;font-size:18px;font-weight:600}
.sg-field.sg-data{background:rgba(15,122,79,.10);outline:2px dashed #0f7a4f;animation:none}
.sg-field.sg-data span{color:#0b5e3c;font:600 12px Onest,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.sg-field.sg-data.has{background:rgba(255,255,255,.6);outline:1px dashed #9aa0ad}
.sg-field.sg-data.has span{color:#111;font-weight:500;font-size:12.5px}
.sg-field.t-check span{font-size:15px}
/* etiquetas de los datos: una línea, pequeñas, nunca se salen */
.ov.field.f-text .fl,.ov.field.f-date .fl{font-size:10.5px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:94%}
.sg-field.sg-data span{line-height:1}
/* landing Firmar gratis */
.fr-top .home-tool{scroll-margin-top:calc(var(--nav-h) + 12px)}
.fr-kinds{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin:0 auto}
.fr-kinds span{font-size:18px;font-weight:500;background:var(--bg2);border:1.5px solid var(--line2);border-radius:14px;padding:12px 18px}
.head.c .lead{max-width:620px;margin:14px auto 0;font-size:19px;color:var(--tx2)}
/* precio único */
.uprice{display:grid;grid-template-columns:1fr 1.25fr;gap:16px;max-width:900px;margin:0 auto;align-items:start}
.up-card{background:#fff;text-align:left;color:var(--tx);border:1.5px solid var(--line2);border-radius:22px;padding:32px;display:flex;flex-direction:column;gap:14px}
.up-card.main{border:2px solid var(--acc)}
.up-card h3{font-size:26px}
.up-who{color:var(--tx2);font-size:17px;margin-top:-8px}
.up-price{display:flex;align-items:baseline;gap:10px}
.up-price b{font-size:56px;letter-spacing:-.04em;line-height:1}
.up-price span{font-size:18px;color:var(--tx2)}
.up-yr{font-size:16px;color:var(--tx2);margin-top:-4px}
.up-card ul{list-style:none;padding:0;margin:4px 0;display:grid;gap:10px}
.up-card li{font-size:17px;padding-left:28px;position:relative}
.up-card li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.up-card .btn{align-self:stretch;justify-content:center;margin-top:6px}
.up-small{font-size:15px;color:var(--mu);text-align:center}
#precio .price-note a{color:var(--acc)}
@media (max-width:760px){.uprice{grid-template-columns:1fr}.up-card{padding:24px}.up-card.main{order:-1}.up-price b{font-size:48px}}

h1.label{letter-spacing:normal;line-height:inherit;font-weight:600}
.copy .h1{color:var(--tx);margin:0 auto;max-width:none}
/* guías */
.g-art{padding:calc(var(--nav-h) + 40px) 0 72px}
.g-wrap{max-width:740px;margin:0 auto;padding:0 var(--gut)}
.g-wrap.g-wide{max-width:1040px}
.g-crumbs{font-size:15px;color:var(--mu);margin-bottom:18px}
.g-crumbs a{color:var(--tx2)}
.g-art h1{font-size:clamp(36px,5vw,56px);letter-spacing:-.045em;line-height:1.05}
.g-intro{font-size:clamp(19px,2vw,22px);color:var(--tx2);line-height:1.5;margin-top:18px}
.g-meta{font-size:15px;color:var(--mu);margin:16px 0 8px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.g-body{font-size:18px;line-height:1.65;color:var(--tx)}
.g-body h2,.g-faqh,.g-rel h2{font-size:clamp(26px,3vw,32px);letter-spacing:-.03em;margin:44px 0 14px}
.g-body p{margin:0 0 16px}
.g-body a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.g-body ul{padding-left:22px;margin:0 0 16px;display:grid;gap:8px}
.g-steps{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:14px;counter-reset:g}
.g-steps li{position:relative;padding-left:52px;min-height:36px}
.g-steps li::before{counter-increment:g;content:counter(g);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.g-cta{margin:32px 0;background:var(--acc-soft);border-radius:20px;padding:26px}
.g-cta b{display:block;font-size:22px;letter-spacing:-.02em}
.g-cta p{color:var(--tx2);margin:6px 0 16px}
.g-cta .btn{text-decoration:none;color:#fff}
.g-table{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 18px;display:block;overflow-x:auto}
.g-table th,.g-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top;min-width:120px}
.g-table th{font-weight:600;background:var(--bg2)}
.g-model{background:var(--bg2);border:1.5px solid var(--line2);border-radius:16px;padding:22px;font-size:17px;margin:0 0 14px}
.g-note{font-size:15px;color:var(--mu)}
.g-faqh{margin-top:48px}
.g-rel{margin-top:40px}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:28px}
.g-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--line2);border-radius:18px;padding:22px;color:var(--tx);text-decoration:none}
.g-card:hover{border-color:var(--acc)}
.g-card small{font-size:14px;font-weight:600;color:var(--acc)}
.g-card b{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.g-card span{font-size:16px;color:var(--tx2)}
.g-more{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:28px;font-size:17px}
.g-more a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .g-table,.g-table tbody,.g-table tr,.g-table td{display:block;width:100%}
  .g-table thead{display:none}
  .g-table tr{border:1.5px solid var(--line2);border-radius:14px;padding:6px 14px;margin-bottom:12px}
  .g-table td{border:0;padding:8px 0;min-width:0}
  .g-table td:first-child{font-weight:700;font-size:18px}
  .g-table td:not(:first-child)[data-l]:not([data-l=""])::before{content:attr(data-l);display:block;font-size:14px;font-weight:600;color:var(--mu);margin-bottom:2px}
}