:root{
  --font:"Geist","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --nav-h:68px;
  --pad:clamp(20px,4vw,40px);
  --max:1240px;
  --bg:#FFFFFF;--bg-soft:#F4F4F5;--bg-dot:#FAFAFA;--card:#FFFFFF;
  --ink:#111113;--ink-2:#6E6E73;--ink-3:#86868B;--line:#E5E5EA;--line-2:#D2D2D7;--hover:rgba(0,0,0,.05);
  --accent:#1B47F5;--accent-hover:#1236D6;--accent-soft:#ECEFFF;--accent-ink:#1435C8;
  --btn:#111113;--btn-ink:#FFFFFF;--btn-hover:#2C2C30;
  --btn2:#E8E8ED;--btn2-hover:#DCDCE1;
  --canvas:#161618;--canvas-2:#1F1F22;--canvas-3:#27272A;--canvas-line:#34343A;--canvas-ink:#F4F4F5;--canvas-soft:#9C9CA3;--canvas-dot:rgba(255,255,255,.07);
  --ok:#059669;--ok-soft:#E5F6EB;--ok-ink:#0E7A39;
  --amber:#C77700;--amber-soft:#FFF2DB;--amber-ink:#8A5300;
  --coral:#E0452B;--coral-soft:#FDECE8;
  --l1:#1B47F5;--l2:#E5620F;--l3:#13A05B;--l4:#D6336C;
  --dot:rgba(17,17,19,.10);
  --header-bg:rgba(245,245,247,.78);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 2px 6px rgba(0,0,0,.05),0 28px 70px rgba(0,0,0,.14);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;--bg-soft:#161617;--bg-dot:#0A0A0B;--card:#18181B;
    --ink:#F4F4F5;--ink-2:#A1A1AA;--ink-3:#86868B;--line:#27272A;--line-2:#3F3F46;--hover:rgba(255,255,255,.08);
    --accent:#4D72FF;--accent-hover:#6684FF;--accent-soft:#151C3A;--accent-ink:#8FA7FF;
    --btn:#F4F4F5;--btn-ink:#111113;--btn-hover:#FFFFFF;
    --btn2:#27272A;--btn2-hover:#3F3F46;
    --canvas:#111113;--canvas-2:#18181B;--canvas-3:#27272A;--canvas-line:#38383C;
    --ok:#34D399;--ok-soft:rgba(52,211,153,.14);--ok-ink:#5FE07F;
    --amber:#FFB340;--amber-soft:rgba(255,179,64,.14);--amber-ink:#FFC870;
    --coral:#FF6B52;--coral-soft:rgba(255,107,82,.14);
    --l1:#6D8BFF;--l2:#FF8A3D;--l3:#34D399;--l4:#FF6B9C;
    --dot:rgba(255,255,255,.09);
    --header-bg:rgba(28,28,30,.72);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 28px 70px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;--bg-soft:#161617;--bg-dot:#0A0A0B;--card:#18181B;
  --ink:#F4F4F5;--ink-2:#A1A1AA;--ink-3:#86868B;--line:#27272A;--line-2:#3F3F46;--hover:rgba(255,255,255,.08);
  --accent:#4D72FF;--accent-hover:#6684FF;--accent-soft:#151C3A;--accent-ink:#8FA7FF;
  --btn:#F4F4F5;--btn-ink:#111113;--btn-hover:#FFFFFF;
  --btn2:#27272A;--btn2-hover:#3F3F46;
  --canvas:#111113;--canvas-2:#18181B;--canvas-3:#27272A;--canvas-line:#38383C;
  --ok:#34D399;--ok-soft:rgba(52,211,153,.14);--ok-ink:#5FE07F;
  --amber:#FFB340;--amber-soft:rgba(255,179,64,.14);--amber-ink:#FFC870;
  --coral:#FF6B52;--coral-soft:rgba(255,107,82,.14);
  --l1:#6D8BFF;--l2:#FF8A3D;--l3:#34D399;--l4:#FF6B9C;
  --dot:rgba(255,255,255,.09);
  --header-bg:rgba(28,28,30,.72);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 28px 70px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.55;letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-1{--c:var(--l1)}.c-2{--c:var(--l2)}.c-3{--c:var(--l3)}.c-4{--c:var(--l4)}
.on-dark{--l1:#6D8BFF;--l2:#FF8A3D;--l3:#34D399;--l4:#FF6B9C}

/* Tipografía */
h1,h2,h3{color:var(--ink);font-weight:500;letter-spacing:-0.03em}
h1 em,h2 em,.statement-text em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em}
.h2{margin:0;font-size:clamp(2.2rem,1.25rem + 3vw,3.75rem);font-weight:500;line-height:1.02;letter-spacing:-0.045em;max-width:18ch;text-wrap:balance}
.lead{margin:20px 0 0;font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.45;color:var(--ink-2);max-width:52ch;letter-spacing:-0.015em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;font-family:var(--mono);font-size:.75rem;font-weight:500;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";width:8px;height:8px;flex:none;background:var(--accent)}
.on-dark .eyebrow{color:var(--canvas-soft)}
.on-dark .eyebrow::before{background:#6D8BFF}
.sec{padding-block:clamp(96px,11vw,144px)}
.sec-soft{background:var(--bg-soft)}
.sec-head{display:flex;flex-direction:column;align-items:center;margin:0 auto clamp(48px,6vw,80px);text-align:center}
.sec-head .h2,.sec-head .lead{margin-inline:auto}
.sec-head.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;text-align:left}
.sec-head.split .h2,.sec-head.split .lead{margin:0}

/* Botones y enlaces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:999px;border:0;font:inherit;font-size:1rem;font-weight:500;letter-spacing:-0.01em;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.btn:active{transform:scale(.98)}
.btn .ico{width:19px;height:19px}
.btn-primary{background:var(--btn);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-secondary{background:var(--btn2);color:var(--ink)}
.btn-secondary:hover{background:var(--btn2-hover)}
.btn-light{background:#FFFFFF;color:#111113}
.btn-light:hover{background:#E8E8ED}
.btn-glass{background:rgba(255,255,255,.12);color:#FFFFFF}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.875rem}
.btn-block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent-ink);font-weight:500;text-decoration:none}
.link-arrow .ico{width:16px;height:16px;stroke-width:2.2;transition:transform .25s}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}
.link-arrow:hover .ico{transform:translateX(3px)}

/* Cabecera flotante */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding:12px var(--pad) 0;pointer-events:none}
.header-bar{position:relative;pointer-events:auto;max-width:1200px;margin-inline:auto;display:flex;align-items:center;gap:20px;height:56px;padding:0 8px 0 20px;border-radius:999px;background:var(--header-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.is-scrolled .header-bar{border-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.07)}
.brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand svg{width:28px;height:28px;flex:none}
.brand-name{font-size:1.35rem;font-weight:600;letter-spacing:-0.05em;line-height:1}
.nav{margin-left:auto}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .2s,background-color .2s}
.nav-links a:hover{color:var(--ink);background:var(--hover)}
.menu-btn{display:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--btn2);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.menu-btn .ico{width:18px;height:18px}

/* Hero */
.hero{position:relative;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + clamp(56px,8vw,104px)) 0 clamp(72px,8vw,112px);background:var(--bg-dot);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 85%);mask-image:linear-gradient(to bottom,#000 35%,transparent 85%);pointer-events:none}
.hero > *{position:relative}
.hero-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.chip-live{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.chip-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:live 2s ease-in-out infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}50%{box-shadow:0 0 0 5px rgba(52,211,153,0)}}
.hero h1{margin:0;font-size:clamp(2.9rem,1.2rem + 5.6vw,6rem);font-weight:500;line-height:.98;letter-spacing:-0.055em;max-width:16ch;text-wrap:balance}
.hero h1 em{letter-spacing:-0.02em}
.hero-lead{margin:28px auto 0;max-width:46ch;font-size:clamp(1.1rem,1rem + .45vw,1.35rem);line-height:1.45;color:var(--ink-2);letter-spacing:-0.015em}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.hero-checks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-size:.9rem;color:var(--ink-2)}
.hero-checks li{display:inline-flex;align-items:center;gap:8px}
.hero-checks .ico{width:16px;height:16px;color:var(--ok);stroke-width:2.6}

/* Lienzo oscuro (estilo editor de flujos) */
.canvas{position:relative;border-radius:28px;background-color:var(--canvas);background-image:radial-gradient(var(--canvas-dot) 1px,transparent 1.3px);background-size:20px 20px;color:var(--canvas-ink);overflow:hidden}
.hero-stage{margin-top:clamp(56px,7vw,88px)}
.hero-canvas{transform-origin:50% 0;box-shadow:var(--shadow-lg)}
.canvas-bar{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--canvas-line);background:rgba(22,22,24,.7);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--canvas-soft)}
.cb-dots{display:flex;gap:6px}
.cb-dots i{width:10px;height:10px;border-radius:50%;background:var(--canvas-3)}
.canvas-bar b{font-weight:500;color:var(--canvas-ink)}
.cb-meta{margin-left:auto}
.fw-status{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(52,211,153,.12);color:#34D399}
.fw-status i{width:7px;height:7px;border-radius:50%;background:#34D399;animation:live 2s ease-in-out infinite}
.flow{position:relative;aspect-ratio:1000/360;container-type:inline-size;margin:clamp(12px,2vw,24px) clamp(8px,2vw,24px) clamp(16px,2vw,24px)}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire{fill:none;stroke:#4A4A52;stroke-width:2;stroke-linecap:round}
.wire-dash{stroke-dasharray:4 5}
.port{fill:var(--canvas);stroke:#6B6B73;stroke-width:1.5}
.pulse{fill:#FFFFFF;opacity:0}
.node{position:absolute;left:calc(var(--x) / 1000 * 100%);top:calc(var(--y) / 360 * 100%);width:7.2cqw;height:7.2cqw;margin:-3.6cqw 0 0 -3.6cqw}
.node-box{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:1.2cqw;background:var(--canvas-3);border:1.5px solid #3E3E45;color:var(--c,#FFFFFF);transition:border-color .3s,box-shadow .3s}
.node-trigger .node-box{border-radius:3.6cqw 1.2cqw 1.2cqw 3.6cqw}
.node-box .ico{width:3.2cqw;height:3.2cqw;stroke-width:1.7}
.node-label{position:absolute;top:calc(100% + 1.1cqw);left:50%;width:16cqw;margin-left:-8cqw;text-align:center;line-height:1.3}
.node-label b{display:block;font-size:max(11px,1.25cqw);font-weight:500;color:var(--canvas-ink)}
.node-label small{display:block;font-family:var(--mono);font-size:max(10px,1cqw);color:var(--canvas-soft)}
.node-state{position:absolute;top:-0.9cqw;right:-0.9cqw;width:2.2cqw;height:2.2cqw}
.node-state .spin,.node-state .ok-ico{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.node-state .spin{border-radius:50%;border:2px solid rgba(109,139,255,.25);border-top-color:#6D8BFF;animation:spin .8s linear infinite}
.node-state .ok-ico{width:100%;height:100%;border-radius:50%;background:#34D399;color:#09090B;display:grid;place-items:center}
.node-state .ok-ico svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.node.is-running .node-box{border-color:#6D8BFF;box-shadow:0 0 0 .6cqw rgba(109,139,255,.18)}
.node.is-running .spin{opacity:1}
.node.is-done .ok-ico{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.node-add{position:absolute;left:calc(930 / 1000 * 100%);top:calc(150 / 360 * 100%);width:2.4cqw;height:2.4cqw;margin-top:-1.2cqw;border-radius:.6cqw;border:1.5px dashed #5A5A62;display:grid;place-items:center;color:#8E8E93;font-size:max(12px,1.6cqw);line-height:1}
.toast{position:absolute;left:24px;bottom:24px;z-index:2;display:flex;align-items:center;gap:12px;max-width:min(340px,calc(100% - 48px));padding:12px 16px 12px 12px;border-radius:18px;background:rgba(255,255,255,.95);color:#111113;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.toast-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#059669;color:#FFFFFF;flex:none}
.toast-ico .ico{width:18px;height:18px;stroke-width:2.6}
.toast b{display:block;font-size:.875rem;font-weight:600;line-height:1.3}
.toast small{display:block;font-family:var(--mono);font-size:.7rem;color:#6E6E73}

/* Herramientas */
.tools{margin-top:clamp(56px,7vw,80px);text-align:center}
.tools p{margin:0 0 20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tools-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px}
.tools-row li{font-size:1.1rem;font-weight:500;letter-spacing:-0.03em;color:var(--ink-3)}

/* Frase que se lee con el scroll */
.statement{padding-block:clamp(110px,13vw,170px)}
.statement-text{margin:0;max-width:24ch;font-size:clamp(2rem,1.1rem + 3vw,4.2rem);font-weight:450;line-height:1.08;letter-spacing:-0.045em;text-wrap:pretty}

/* Antes y después */
.vs{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--card)}
.vs th{padding:20px 32px;text-align:left;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-soft);border-bottom:1px solid var(--line)}
.vs th:last-child{color:var(--ink)}
.vs th + th,.vs td + td{border-left:1px solid var(--line)}
.vs td{width:50%;padding:22px 32px;vertical-align:top;border-top:1px solid var(--line);line-height:1.45}
.vs tbody tr:first-child td{border-top:0}
.vs td:first-child{color:var(--ink-3)}
.vs .cell{display:flex;gap:14px;align-items:flex-start}
.mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px}
.mark .ico{width:13px;height:13px;stroke-width:2.8}
.vs td:first-child .mark{background:var(--bg-soft);color:var(--ink-3)}
.vs td:last-child .mark{background:var(--ok-soft);color:var(--ok)}
.badge{display:inline-flex;align-items:center;margin-left:10px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.04em;vertical-align:1px}
.compare-foot{display:flex;justify-content:center;margin-top:24px}

/* Sección negra */
.dark{position:relative;background:#000000;color:var(--canvas-ink)}
.dark h2,.dark h3{color:#F4F4F5}
.dark .lead{color:#A1A1AA}
.dark :focus-visible{outline-color:#FFFFFF}

/* Demostración paso a paso */
.demo{--d-card:#18181B;--d-card-2:#27272A;--d-line:#38383A;padding-block:clamp(110px,13vw,160px) clamp(72px,9vw,120px)}
.demo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000,transparent);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000,transparent);pointer-events:none}
.demo > .wrap{position:relative}
.demo-head{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(56px,7vw,96px);text-align:center}
.demo-head .h2{max-width:16ch}
.demo-head .lead{margin:20px auto 0;max-width:44ch}
.demo-stage{position:relative}
.demo-steps{display:grid;gap:clamp(72px,10vw,120px)}
.demo-step{display:grid;gap:32px;justify-items:center}
.demo-text{max-width:42ch;width:100%}
.line-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.line-tag::before{content:"";width:8px;height:8px;background:var(--c)}
.dark .line-tag{color:#A1A1AA}
.demo-text h3{font-size:clamp(2rem,1.1rem + 2.4vw,3.4rem);font-weight:500;line-height:1.02;letter-spacing:-0.05em;margin:0 0 20px;max-width:14ch;text-wrap:balance}
.demo-text p{margin:0;color:#A1A1AA;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.5;max-width:34ch}
.demo-progress{display:none}

.scene-wrap{position:relative;width:100%;max-width:520px}
.scene-wrap::before{content:"";position:absolute;inset:10% 8%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.3;filter:blur(56px)}
.scene{position:relative;display:flex;flex-direction:column;min-height:420px;padding:20px 24px 24px;border-radius:28px;border:1px solid var(--d-line);background:var(--d-card);color:#F4F4F5;box-shadow:0 30px 90px rgba(0,0,0,.6);font-size:15px;line-height:1.45}
.scene-bar{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--d-line);font-size:13px;font-weight:500;color:#A1A1AA}
.sb-dot{width:8px;height:8px;background:var(--c);flex:none}
.sb-time{margin-left:auto;font-family:var(--mono);font-size:11.5px}
.scene-foot{margin:auto 0 0;padding-top:20px;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:#A1A1AA}
.scene-foot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.scene .chat{gap:8px}
.bubble{margin:0;max-width:82%;padding:10px 15px;border-radius:20px}
.b-in{align-self:flex-start;background:var(--d-card-2);border-bottom-left-radius:6px}
.slot{position:relative;align-self:flex-end;max-width:82%}
.b-out{max-width:none;background:#0A84FF;color:#FFFFFF;border-bottom-right-radius:6px}
.typing{position:absolute;right:0;top:0;display:flex;gap:5px;padding:15px 16px;border-radius:20px;background:var(--d-card-2);opacity:0}
.typing i{width:7px;height:7px;border-radius:50%;background:#A1A1AA;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.sheet{border:1px solid var(--d-line);border-radius:16px;overflow:hidden;font-size:13.5px}
.sh-row{position:relative;display:grid;grid-template-columns:1fr 1.5fr .9fr 64px;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--d-line)}
.sh-row:first-child{border-top:0}
.sh-row > span{position:relative}
.sh-head{background:var(--d-card-2);color:#A1A1AA;font-family:var(--mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.hl{position:absolute;inset:0;background:var(--c);opacity:0}
.scene .tag-ok{background:rgba(52,211,153,.16);color:#6EE7B7}
.scene .tag-new{background:rgba(255,138,61,.18);color:#FFB27D}
.scene .tag-sent{background:rgba(255,107,156,.18);color:#FFA3C2}
.cal-day{font-size:22px;font-weight:600;letter-spacing:-0.03em;margin:0 0 12px}
.cal-hour{display:grid;grid-template-columns:52px 1fr;gap:12px;min-height:58px;padding-top:8px;border-top:1px solid var(--d-line);font-family:var(--mono);font-size:11.5px;color:#A1A1AA}
.event{align-self:start;padding:10px 12px;border-radius:12px;background:rgba(52,211,153,.18);border-left:3px solid var(--c);color:#F4F4F5;font-family:var(--font);font-size:14px;font-weight:600;line-height:1.3}
.event small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:#A1A1AA}
.reminder{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--d-card-2);font-size:13.5px}
.reminder .ico{width:18px;height:18px;color:var(--c)}
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inv-top strong{font-size:22px;font-weight:600;letter-spacing:-0.03em}
.inv-to{margin:4px 0 18px;color:#A1A1AA}
.inv-line,.scene .inv-total{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--d-line)}
.inv-line span:last-child,.scene .inv-total span:last-child{font-family:var(--mono);font-size:14px}
.scene .inv-total{font-size:18px;font-weight:600}
.scene .inv-pay{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:16px;border-radius:999px;background:#FFFFFF;color:#111113;font-weight:500}
.inv-via{margin:12px 0 0;text-align:center;font-size:13px;color:#A1A1AA}
.rep-paid{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--d-card-2)}
.rep-check{width:34px;height:34px;border-radius:50%;background:#34D399;display:grid;place-items:center;color:#09090B}
.rep-check svg{width:16px;height:16px}
.rep-paid strong{display:block;font-size:15px;font-weight:600}
.rep-paid small{color:#A1A1AA;font-size:12.5px}
.rep-paid > span:last-child{font-family:var(--mono);font-weight:600}
.rep-chart{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:22px}
.rep-chart div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.rep-chart i{display:block;width:100%;height:var(--h);border-radius:6px 6px 3px 3px;background:var(--c);opacity:.4}
.rep-chart div:nth-child(6) i{opacity:1}
.rep-chart span{font-family:var(--mono);font-size:11px;color:#A1A1AA}

/* Demostración fijada en escritorio */
.is-pinned .demo-stage{height:calc(100svh - var(--nav-h) - env(safe-area-inset-top,0px));min-height:560px}
.is-pinned .demo-steps{position:absolute;inset:0 0 64px;display:block}
.is-pinned .demo-step{position:absolute;inset:0;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,104px);align-items:center;justify-items:stretch}
.is-pinned .scene-wrap{justify-self:end}
.is-pinned .demo-progress{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);gap:8px;width:220px}
.dp-seg{position:relative;flex:1;height:3px;border-radius:2px;background:#27272A;overflow:hidden}
.dp-fill{position:absolute;inset:0;background:var(--c);transform-origin:left center}

/* Servicios con pestañas */
.tabbox{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--card)}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--bg-soft)}
.tab{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:0 24px;border:0;background:transparent;color:var(--ink-3);font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .2s,background-color .2s}
.tab + .tab{border-left:1px solid var(--line)}
.tab::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tab-mark{width:8px;height:8px;flex:none;background:var(--c);opacity:.4;transition:opacity .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink)}
.tab[aria-selected="true"]::before{transform:none}
.tab[aria-selected="true"] .tab-mark{opacity:1}
.panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(28px,4vw,56px)}
.panel[hidden]{display:none}
.panel h3{margin:0;font-size:clamp(1.7rem,1.2rem + 1.4vw,2.5rem);font-weight:500;line-height:1.06;letter-spacing:-0.045em;text-wrap:balance}
.panel-copy > p{margin:16px 0 0;color:var(--ink-2)}
.ideal{display:flex;gap:12px;margin:22px 0 0 !important;padding:14px 16px;border-radius:14px;background:var(--bg-soft);border-left:2px solid var(--c);font-size:.95rem;color:var(--ink-2)}
.ideal b{color:var(--ink);font-weight:600;white-space:nowrap}
.includes{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.includes li{display:flex;gap:12px;align-items:flex-start}
.includes .ico{width:18px;height:18px;color:var(--ok);stroke-width:2.6;margin-top:3px}
.panel .btn{margin-top:30px}
.tab-visual{padding:clamp(20px,3vw,32px);border-radius:22px;background-color:var(--bg-soft);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:18px 18px}

.mock{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;font-size:.875rem;line-height:1.45}
.mock-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.8125rem;font-weight:600;color:var(--ink)}
.mb-dot{width:8px;height:8px;background:var(--c,var(--ok));flex:none}
.mb-meta{margin-left:auto;font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.02em;color:var(--ink-2)}
.mock-body{padding:16px}
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.tag-ok{background:var(--ok-soft);color:var(--ok-ink)}
.tag-brand{background:var(--accent-soft);color:var(--accent-ink)}
.tag-amber{background:var(--amber-soft);color:var(--amber-ink)}
.chat{display:flex;flex-direction:column;gap:8px}
.mc{margin:0;max-width:84%;padding:9px 14px;border-radius:18px}
.mc.in{align-self:flex-start;background:var(--btn2);border-bottom-left-radius:5px}
.mc.out{align-self:flex-end;background:#0A84FF;color:#FFFFFF;border-bottom-right-radius:5px}
.chat .tag{align-self:flex-end;margin-top:4px}
.pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pcol{display:grid;align-content:start;gap:8px;padding:10px;border-radius:12px;background:var(--bg-soft)}
.pcol-h{margin:0 0 2px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.pcard{display:grid;gap:3px;padding:10px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.pcard b{font-size:.8125rem;font-weight:600}
.pcard small{font-size:.75rem;color:var(--ink-2)}
.pcard .tag{justify-self:start;margin-top:4px}
.appts{display:grid}
.appt{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.appt:first-child{border-top:0;padding-top:0}
.appt-time{font-family:var(--mono);font-weight:500;color:var(--ink-2);font-size:.75rem}
.appt-body b{display:block;font-size:.875rem;font-weight:600}
.appt-body small{color:var(--ink-2);font-size:.75rem}
.appt-free .appt-body{color:var(--ink-2);font-size:.8125rem;padding:8px 10px;border:1.5px dashed var(--line-2);border-radius:10px}
.inv-row,.mock .inv-total{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.inv-row:first-child{border-top:0;padding-top:0}
.inv-row span{color:var(--ink-2)}
.inv-row b,.mock .inv-total b{font-weight:600}
.mock .inv-total{font-size:1rem;font-weight:600;border-top:1.5px solid var(--ink)}
.inv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.mock .inv-pay{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-weight:500;font-size:.8125rem}
.inv-note{margin:12px 0 0;font-size:.8125rem;color:var(--ink-2)}
.route-title{margin:24px 0 14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.route{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.route::before{content:"";position:absolute;left:calc(12.5% - 4.5px);right:calc(12.5% - 4.5px);top:9px;height:5px;border-radius:3px;background:var(--c)}
.route li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:.8125rem;font-weight:500;line-height:1.3;color:var(--ink-2)}
.route li::before{content:"";position:relative;z-index:1;width:23px;height:23px;flex:none;border-radius:50%;background:var(--card);border:4px solid var(--ink)}

/* Calculadora */
.calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:stretch}
.calc-form{display:grid;gap:30px;align-content:start;padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--card)}
.range-field{display:grid;gap:10px}
.range-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.range-top label{font-weight:500}
.range-top output{font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--ink);padding:4px 11px;border-radius:999px;background:var(--bg-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.range-field small{color:var(--ink-3);font-size:.85rem;line-height:1.4}
.range{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;--fill:50%}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--fill),var(--line-2) var(--fill))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#FFFFFF;border:0;box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 3px 8px rgba(0,0,0,.18),0 3px 1px rgba(0,0,0,.05);transition:box-shadow .2s}
.range::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
.range::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#FFFFFF;border:0;box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 3px 8px rgba(0,0,0,.18)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(27,71,245,.25),0 3px 8px rgba(0,0,0,.18)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(27,71,245,.25)}
.calc-result{display:flex;flex-direction:column;padding:clamp(28px,4vw,48px)}
.calc-result :focus-visible{outline-color:#FFFFFF}
.res-label{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--canvas-soft)}
.res-big{margin:14px 0 6px;font-size:clamp(4rem,2.4rem + 5vw,6.5rem);font-weight:500;line-height:.95;letter-spacing:-0.06em;font-variant-numeric:tabular-nums}
.res-big small{margin-left:10px;font-size:.24em;font-weight:500;letter-spacing:-0.01em;color:var(--canvas-soft)}
.res-sub{margin:0;color:var(--canvas-soft)}
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:28px 0 22px}
.res-item{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--canvas-line)}
.res-item b{display:block;font-size:1.5rem;font-weight:500;letter-spacing:-0.04em;line-height:1.2;font-variant-numeric:tabular-nums}
.res-item span{font-size:.8rem;color:var(--canvas-soft)}
.res-note{margin:auto 0 0;font-size:.82rem;line-height:1.5;color:var(--canvas-soft)}
.calc-result .btn{margin-top:18px}

/* Sectores */
.sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sector{position:relative;display:flex;flex-direction:column;min-height:310px;padding:28px 26px 24px;border-radius:28px;background:var(--bg-soft);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sector:hover{transform:scale(1.015)}
.sector-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--card);color:var(--ink);margin-bottom:24px}
.sector h3{margin:0 0 8px;font-size:1.2rem;font-weight:600;line-height:1.25;letter-spacing:-0.03em}
.sector p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.chips{list-style:none;margin:auto 0 0;padding:20px 52px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-family:var(--mono);font-size:.64rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--card);color:var(--ink-2)}
.sector-go{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--bg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sector-go .ico{width:16px;height:16px;stroke-width:2.4}
.sector:hover .sector-go{transform:rotate(-45deg)}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:360px;padding:clamp(28px,3vw,40px);border-radius:28px;background:var(--card)}
.tile-wide{grid-column:span 2}
.tile h3{margin:0;font-size:clamp(1.4rem,1.15rem + .7vw,1.85rem);line-height:1.1;letter-spacing:-0.045em;max-width:18ch}
.tile p{margin:12px 0 0;color:var(--ink-2);max-width:42ch}
.tile-visual{margin-top:auto;padding-top:28px}
.tile.canvas{background-color:var(--canvas);background-image:radial-gradient(var(--canvas-dot) 1px,transparent 1.3px);background-size:20px 20px}
.tile.canvas h3{color:var(--canvas-ink)}
.tile.canvas p{color:var(--canvas-soft)}
.tile-full{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 56px;align-items:center;min-height:0}
.tile-full .tile-visual{margin:0;padding:0}
.alerts{display:grid;gap:10px;max-width:440px}
.alert{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--canvas-line);opacity:0;transform:translateY(16px);transition:opacity .6s .2s,transform .7s cubic-bezier(.2,.8,.2,1) .2s}
.alert + .alert{transition-delay:1.1s,1.1s}
.alert-dot{width:10px;height:10px;border-radius:50%;background:#FF9F0A;flex:none;box-shadow:0 0 0 6px rgba(255,159,10,.16)}
.alert-ok .alert-dot{background:#34D399;box-shadow:0 0 0 6px rgba(52,211,153,.16)}
.alert strong{display:block;font-size:.9375rem;font-weight:600;color:var(--canvas-ink)}
.alert small{color:var(--canvas-soft);font-size:.8125rem}
.alert time{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--canvas-soft);white-space:nowrap}
.tile.is-in .alert{opacity:1;transform:none}
.key-ico{width:68px;height:68px;color:var(--ink)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:16px;background:var(--bg-soft);font-weight:500;font-size:.9375rem}
.switch{position:relative;width:51px;height:31px;flex:none;border-radius:999px;background:var(--line-2);transition:background-color .4s .5s}
.switch i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .55s cubic-bezier(.3,1.4,.5,1) .5s}
.tile.is-in .switch{background:#059669}
.tile.is-in .switch i{transform:translateX(20px)}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px}
.bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.bars i{display:block;width:100%;height:var(--h);border-radius:6px 6px 3px 3px;background:var(--accent);transform:scaleY(.06);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.bars span{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.bars div:nth-child(2) i{transition-delay:.06s}.bars div:nth-child(3) i{transition-delay:.12s}.bars div:nth-child(4) i{transition-delay:.18s}.bars div:nth-child(5) i{transition-delay:.24s}.bars div:nth-child(6) i{transition-delay:.3s}.bars div:nth-child(7) i{transition-delay:.36s}
.tile.is-in .bars i{transform:none}
.quote{padding:4px 16px;border-radius:16px;background:var(--bg-soft);font-size:.9rem}
.q-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.q-row:first-child{border-top:0}
.q-row span{color:var(--ink-2)}
.q-row b{font-weight:600}
.q-total b{display:inline-flex;align-items:center;gap:6px;color:var(--ok-ink)}
.q-total .ico{width:16px;height:16px;stroke-width:2.6}
.tile-chat{padding:18px;border-radius:18px;background:var(--bg-soft);font-size:.92rem;line-height:1.45}
.tile-chat .mc.in{background:var(--card)}
.tile-chat .tag{align-self:flex-start;margin:4px 0 0}

/* Planes */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--card)}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,40px)}
.plan + .plan{border-left:1px solid var(--line)}
.plan-featured{background:var(--bg-soft)}
.plan-featured::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}
.plan-flag{position:absolute;top:clamp(26px,3vw,38px);right:clamp(26px,3vw,38px);padding:4px 10px;border-radius:999px;background:var(--accent);color:#FFFFFF;font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.plan-kicker{display:inline-flex;align-items:center;gap:9px;margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.plan-kicker::before{content:"";width:8px;height:8px;background:var(--line-2)}
.plan-featured .plan-kicker::before{background:var(--accent)}
.plan h3{margin:16px 0 10px;font-size:clamp(1.6rem,1.3rem + .8vw,2rem);line-height:1.08;letter-spacing:-0.045em}
.plan > p{margin:0;color:var(--ink-2)}
.plan-price{display:flex;flex-direction:column;gap:2px;margin:26px 0;padding:18px 0;border-block:1px solid var(--line)}
.plan-featured .plan-price{border-color:var(--line-2)}
.plan-price b{font-size:1.25rem;font-weight:500;letter-spacing:-0.03em}
.plan-price span{font-size:.875rem;color:var(--ink-3)}
.plan .includes{margin:0 0 32px;gap:11px}
.plan .includes li{font-size:.95rem}
.plan .btn{margin-top:auto}
.plans-note{margin:28px auto 0;max-width:62ch;text-align:center;color:var(--ink-2);font-size:.95rem}

/* Proceso */
.process-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}
.process-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 40px);align-self:start}
.process-head .lead{max-width:34ch}
.needs{margin:32px 0 20px;padding:24px;border-radius:22px;background:var(--card)}
.needs h3{margin:0 0 14px;font-size:1rem;font-weight:600;letter-spacing:-0.02em}
.needs .includes{margin:0;gap:10px}
.needs .includes li{font-size:.95rem;color:var(--ink-2)}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.step{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 16px;padding:clamp(28px,3.5vw,40px) 0;border-bottom:1px solid var(--line-2);color:var(--ink-3);transition:color .45s}
.step-num{display:inline-flex;align-items:center;gap:10px;align-self:start;padding-top:4px;font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--ink-3);transition:color .45s}
.step-num::before{content:"";width:8px;height:8px;background:var(--line-2);transition:background-color .45s}
.step-time{margin:0 0 6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase}
.step h3{margin:0 0 10px;font-size:clamp(1.4rem,1.15rem + .8vw,2rem);line-height:1.1;letter-spacing:-0.04em;color:inherit;transition:color .45s}
.step p{margin:0;max-width:50ch}
.step-get{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:8px 14px;border-radius:999px;background:var(--card);font-size:.875rem;font-weight:500;color:var(--ink)}
.step-get .ico{width:15px;height:15px;color:var(--ok);stroke-width:2.8}
.step.is-reached{color:var(--ink-2)}
.step.is-reached h3,.step.is-reached .step-num{color:var(--ink)}
.step.is-reached .step-num::before{background:var(--accent)}

/* Preguntas */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,96px)}
.faq-aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 32px);align-self:start}
.faq-aside .lead{margin-bottom:28px}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list details:first-child{border-top:1px solid var(--line-2)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding:22px 0;cursor:pointer;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);font-weight:500;line-height:1.3;letter-spacing:-0.03em}
.faq-list summary::-webkit-details-marker{display:none}
.plus{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--btn2);transition:transform .35s cubic-bezier(.4,0,.2,1),background-color .2s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.75px;border-radius:1px;background:var(--ink);transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-list summary:hover .plus{background:var(--btn2-hover)}
.faq-list details[open] .plus{transform:rotate(45deg)}
.faq-answer{overflow:hidden}
.faq-answer p{margin:0;padding:0 56px 26px 0;color:var(--ink-2);line-height:1.55}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-title{max-width:14ch}
.channels{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line-2)}
.channels li{border-bottom:1px solid var(--line-2)}
.channels a{display:flex;align-items:center;gap:16px;min-height:76px;padding:12px 4px;text-decoration:none;transition:padding .3s cubic-bezier(.2,.8,.2,1)}
.channels a:hover{padding-left:12px}
.ch-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;background:var(--card);color:var(--c)}
.ch-txt b{display:block;font-weight:500}
.ch-txt small{display:block;color:var(--ink-2);font-family:var(--mono);font-size:.8rem;overflow-wrap:anywhere}
.ch-arrow{margin-left:auto;width:18px;height:18px;color:var(--ink-3)}
.hours{display:flex;align-items:center;gap:10px;margin:20px 0 0;font-size:.9375rem;color:var(--ink-2)}
.hours .ico{width:18px;height:18px;color:var(--ink-3)}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.socials a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--btn2);text-decoration:none;font-weight:500;font-size:.875rem;transition:background-color .2s}
.socials a:hover{background:var(--btn2-hover)}
.form-card{padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--card);box-shadow:var(--shadow)}
.form-card h3{margin:0 0 6px;font-size:1.65rem;letter-spacing:-0.04em}
.form-card > p{margin:0 0 28px;color:var(--ink-2)}
.form{display:grid;gap:18px}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.field label{display:block;margin-bottom:8px;font-weight:500;font-size:.9375rem}
.opt{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:12px;border:1px solid transparent;background:var(--bg-soft);color:var(--ink);font:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.field textarea{min-height:124px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:var(--card);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.select .ico{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;color:var(--ink-2)}
.field [aria-invalid="true"]{border-color:var(--coral)}
.field-error{margin:7px 0 0;color:var(--coral);font-size:.875rem;font-weight:500}
.form-note{margin:2px 0 0;font-size:.875rem;color:var(--ink-2);text-align:center}
.form-note a{color:var(--accent-ink);font-weight:500}

/* Pie */
.site-footer{padding:clamp(24px,3vw,40px) 0 28px;background:var(--bg);font-size:.8125rem;color:var(--ink-2)}
.f-cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;padding:clamp(36px,5vw,64px);margin-bottom:clamp(48px,6vw,80px)}
.f-cta h2{margin:0;max-width:18ch;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.02;letter-spacing:-0.05em;color:var(--canvas-ink)}
.f-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.f-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.f-about p{margin:14px 0 0;max-width:34ch;line-height:1.5}
.f-col h2{margin:0 0 10px;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col a,.f-bottom a{display:inline-flex;align-items:center;min-height:34px;color:var(--ink-2);text-decoration:none}
.f-col a:hover,.f-bottom a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:44px;padding-top:16px;border-top:1px solid var(--line);font-size:.75rem}
.f-bottom p{margin:0}

/* Botón flotante */
.float-wrap{position:fixed;right:0;bottom:0;z-index:30;padding:0 max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 0;pointer-events:none}
.float-wa{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px 0 16px;border-radius:999px;background:rgba(17,17,19,.9);color:#FFFFFF;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-decoration:none;font-weight:500;font-size:.9375rem;box-shadow:0 10px 30px rgba(0,0,0,.22);transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s,background-color .2s}
.float-wa.is-visible{transform:none;opacity:1}
.float-wa:hover{background:#000000}
.float-wa .ico{width:20px;height:20px;color:#34D399}

.preload .hero-head,.preload .hero-canvas,.preload .tools{visibility:hidden}

/* Responsive */
@media (max-width:1020px){
  .menu-btn{display:inline-flex}
  .header-cta{margin-left:auto}
  .nav{position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;padding:8px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .nav.is-open{display:block}
  .nav-links{flex-direction:column}
  .nav-links a{min-height:48px;padding:0 16px;font-size:.78rem;color:var(--ink)}
  .sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-about{grid-column:span 2}
}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-wide{grid-column:span 2}
}
@media (max-width:900px){
  .sec-head.split,.panel,.faq-grid,.contact-grid,.process-grid,.calc,.plans,.tile-full{grid-template-columns:minmax(0,1fr)}
  .faq-aside,.process-head{position:static}
  .plan + .plan{border-left:0;border-top:1px solid var(--line)}
  .tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;min-height:56px;padding:0 18px}
}
@media (max-width:700px){
  .field-row{grid-template-columns:minmax(0,1fr)}
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vs,.vs tbody,.vs tr,.vs td{display:block;width:auto}
  .vs td{padding:16px 20px;border-left:0 !important}
  .vs td + td{border-top:1px dashed var(--line)}
  .vs tbody tr:first-child td + td{border-top:1px dashed var(--line)}
  .vs td::before{content:attr(data-label);display:block;margin-bottom:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .tile-wide{grid-column:auto}
  .tile{min-height:0}
  .sh-row{grid-template-columns:1fr 1.4fr 64px}
  .sh-row > :nth-child(4){display:none}
  .scene{min-height:0}
  .canvas,.tabbox,.plans,.vs,.sector,.tile,.calc-form,.form-card{border-radius:22px}
}
@media (max-width:639px){
  .cb-meta{display:none}
  .flow{aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;gap:18px;margin:20px 16px 16px}
  .flow::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:#3A3A40}
  .wires,.node-add{display:none}
  .node{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;display:flex;align-items:center;gap:14px}
  .node-box{width:56px;height:56px;flex:none;border-radius:14px}
  .node-trigger .node-box{border-radius:28px 14px 14px 28px}
  .node-box .ico{width:24px;height:24px}
  .node-label{position:static;width:auto;margin:0;text-align:left}
  .node-label b{font-size:.95rem}
  .node-label small{font-size:.72rem}
  .node-state{top:-6px;right:-6px;width:20px;height:20px}
  .node.is-running .node-box{box-shadow:0 0 0 4px rgba(109,139,255,.18)}
  .toast{position:relative;left:auto;bottom:auto;max-width:none;margin:0 16px 16px}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .f-about{grid-column:auto}
  .hero-ctas .btn{flex:1 1 100%}
}
@media (max-width:560px){
  .sectors{grid-template-columns:minmax(0,1fr)}
  .sector{min-height:0}
  .route{grid-template-columns:minmax(0,1fr);gap:14px}
  .route::before{left:9px;right:auto;top:12px;bottom:12px;width:5px;height:auto}
  .route li{flex-direction:row;text-align:left}
  .ideal{flex-direction:column;gap:4px}
  .step{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .header-cta{display:none}
  .menu-btn{margin-left:auto}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe .pcol:last-child{display:none}
  .res-item b{font-size:1.25rem}
}
/* ================================================================
   Estilo cálido inspirado en Anthropic: fondo marfil, sin rejillas
   de puntos, titulares con serifa y acento terracota.
   ================================================================ */
:root{
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --bg:#FAFAFA;--bg-soft:#F4F4F5;--bg-dot:#FAFAFA;--card:#FFFFFF;
  --ink:#18181B;--ink-2:#52525B;--ink-3:#71717A;--line:#E4E4E7;--line-2:#D4D4D8;--hover:rgba(20,20,19,.05);
  --accent:#059669;--accent-hover:#047857;--accent-soft:#D1FAE5;--accent-ink:#047857;
  --btn:#18181B;--btn-ink:#FAFAFA;--btn-hover:#3F3F46;
  --btn2:#E4E4E7;--btn2-hover:#E4E4E7;
  --canvas:#18181B;--canvas-2:#27272A;--canvas-3:#3F3F46;--canvas-line:#52525B;--canvas-ink:#FAFAFA;--canvas-soft:#A1A1AA;
  --l1:#059669;--l2:#B9842B;--l3:#4A73B5;--l4:#B5576E;
  --header-bg:rgba(250,249,245,.86);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#18181B;--bg-soft:#18181B;--bg-dot:#18181B;--card:#27272A;
    --ink:#FAFAFA;--ink-2:#A1A1AA;--ink-3:#71717A;--line:#3F3F46;--line-2:#52525B;--hover:rgba(250,249,245,.07);
    --accent:#34D399;--accent-hover:#6EE7B7;--accent-soft:#0B2A20;--accent-ink:#A7F3D0;
    --btn:#FAFAFA;--btn-ink:#18181B;--btn-hover:#FFFFFF;--btn2:#3F3F46;--btn2-hover:#52525B;
    --canvas:#18181B;--l1:#34D399;--l2:#E6BE73;--l3:#8FA9D9;--l4:#D98FA0;
    --header-bg:rgba(31,30,29,.82);
  }
}
:root[data-theme="dark"]{
  --bg:#18181B;--bg-soft:#18181B;--bg-dot:#18181B;--card:#27272A;
  --ink:#FAFAFA;--ink-2:#A1A1AA;--ink-3:#71717A;--line:#3F3F46;--line-2:#52525B;--hover:rgba(250,249,245,.07);
  --accent:#34D399;--accent-hover:#6EE7B7;--accent-soft:#0B2A20;--accent-ink:#A7F3D0;
  --btn:#FAFAFA;--btn-ink:#18181B;--btn-hover:#FFFFFF;--btn2:#3F3F46;--btn2-hover:#52525B;
  --canvas:#18181B;--l1:#34D399;--l2:#E6BE73;--l3:#8FA9D9;--l4:#D98FA0;
  --header-bg:rgba(31,30,29,.82);
}
.on-dark{--l1:#34D399;--l2:#E6BE73;--l3:#8FA9D9;--l4:#D98FA0}
.on-dark .eyebrow::before{background:#34D399}

/* Sin rejillas de puntos */
.hero::before,.demo::before{display:none}
.canvas,.tile.canvas,.tab-visual{background-image:none}
.dark{background:#18181B}

/* Titulares con serifa */
.hero h1,.h2,.f-cta h2,.statement-text,.demo-text h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.02em}
.hero h1{font-size:clamp(2.6rem,1rem + 4.6vw,5.2rem);line-height:1.04;max-width:18ch}
.h2{line-height:1.08}
h1 em,h2 em,.statement-text em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-0.02em}
.on-dark h2 em,.f-cta h2 em{color:#A7F3D0}
.statement-text{font-weight:400;line-height:1.15}

/* Botones y cabecera más sobrios */
.btn{border-radius:10px}
.btn-sm{border-radius:9px}
.header-bar{border-radius:16px}
.chip-live{border-radius:10px}
.node.is-running .node-box{border-color:#34D399;box-shadow:0 0 0 .6cqw rgba(52,211,153,.2)}
.node-state .spin{border-color:rgba(52,211,153,.25);border-top-color:#34D399}
.b-out,.mc.out{background:#059669}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(52,211,153,.25)}


/* Cómo funciona: un paso a la vez, sin scroll largo */
.demo{padding-block:clamp(88px,10vw,128px)}
.demo-head{margin-bottom:clamp(40px,5vw,64px)}
.demo-steps{display:grid;gap:0}
.demo-step{grid-area:1 / 1;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:center;justify-items:stretch;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.demo-step.is-active{opacity:1;visibility:visible}
.demo-step .scene-wrap{justify-self:end}
.demo-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:clamp(32px,4vw,48px)}
.dn{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:58px;padding:12px 16px 14px;border:0;border-radius:10px;background:#18181B;color:#A1A1AA;font:inherit;font-size:.9375rem;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.dn span{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#71717A}
.dn em{font-style:normal}
.dn:hover{background:#27272A;color:#FAFAFA}
.dn[aria-current="step"]{background:#3F3F46;color:#FAFAFA}
.dn .dp-fill{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left center}
.dn.is-done .dp-fill{transform:none}
@media (max-width:900px){
  .demo-step{grid-template-columns:minmax(0,1fr);align-items:start}
  .demo-step .scene-wrap{justify-self:center}
}
@media (max-width:560px){
  .dn{min-height:46px;padding:10px 0 12px;align-items:center}
  .dn-label{display:none}
}


/* Detalle de cada paso del flujo */
.cb-hint{margin-left:auto;color:var(--canvas-soft)}
.node{cursor:pointer;outline:none}
.node:hover .node-box{border-color:#6A6A72}
.node:focus-visible .node-box{outline:2px solid #34D399;outline-offset:4px}
.node.is-selected .node-box{border-color:#34D399;box-shadow:0 0 0 .6cqw rgba(52,211,153,.25)}
.node-panel{position:absolute;top:0;right:0;bottom:0;z-index:3;width:min(400px,92%);overflow:auto;padding:22px 24px 24px;background:#27272A;border-left:1px solid var(--canvas-line);color:#FAFAFA;box-shadow:-20px 0 50px rgba(0,0,0,.35);font-size:.9375rem;line-height:1.5}
.node-panel:not([hidden]){animation:np-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes np-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.np-top{display:flex;align-items:center;gap:10px}
.np-step{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#A1A1AA}
.np-type{padding:3px 8px;border-radius:6px;background:rgba(52,211,153,.16);color:#A7F3D0;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase}
.np-close{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:#3F3F46;color:#FAFAFA;font-size:1.1rem;line-height:1;cursor:pointer}
.np-close:hover{background:#52525B}
.node-panel h3{margin:16px 0 6px;color:#FAFAFA;font-family:var(--serif);font-size:1.6rem;font-weight:400;letter-spacing:-0.02em}
.node-panel p{margin:0;color:#A1A1AA}
.np-sec{margin-top:18px}
.np-sec h4{margin:0 0 6px;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#71717A}
.np-io{display:grid;gap:8px;margin-top:18px}
.np-io div{padding:10px 12px;border-radius:10px;background:#18181B;border:1px solid var(--canvas-line)}
.np-io b{display:block;margin-bottom:2px;font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#71717A}
.np-io span{font-family:var(--mono);font-size:.8rem;color:#FAFAFA}
.np-tools{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.np-tools li{padding:4px 9px;border-radius:6px;background:#3F3F46;font-size:.8rem;color:#FAFAFA}
.np-nav{display:flex;gap:8px;margin-top:22px}
.np-nav button{flex:1;min-height:40px;border:0;border-radius:10px;background:#3F3F46;color:#FAFAFA;font:inherit;font-size:.875rem;cursor:pointer}
.np-nav button:hover{background:#52525B}
.np-nav button:disabled{opacity:.35;cursor:default}
@media (max-width:639px){
  .cb-hint{display:none}
  .node-panel{position:relative;width:auto;margin:0 16px 16px;border:1px solid var(--canvas-line);border-radius:16px;box-shadow:none}
}


/* Ruta resaltada hasta el paso elegido */
.flow.has-route .wire{stroke:#34343A;transition:stroke .3s}
.flow.has-route .wire.on-route{stroke:#34D399;stroke-width:3}
.flow.has-route .node{transition:opacity .3s}
.flow.has-route .node:not(.on-route){opacity:.3}
.np-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.72rem;color:#A1A1AA}
.np-route li{padding:3px 8px;border-radius:6px;background:#18181B;border:1px solid var(--canvas-line)}
.np-route li:last-child{border-color:#34D399;color:#FAFAFA}
.np-route li + li::before{content:"→";margin:0 6px 0 -2px;color:#71717A}
@media (max-width:639px){.flow.has-route .node:not(.on-route){opacity:.4}}


/* Tipografías: Titillium Web para titulares y etiquetas, Figtree para el texto */
:root{
  --font:"Figtree","Segoe UI",system-ui,sans-serif;
  --serif:"Titillium Web","Segoe UI",sans-serif;
  --mono:"Titillium Web","Segoe UI",sans-serif;
}
body{letter-spacing:0}
.hero h1,.h2,.f-cta h2,.statement-text,.demo-text h3,.node-panel h3,h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-0.015em}
.hero h1{line-height:1.02}
h1 em,h2 em,.statement-text em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em}
.statement-text{font-weight:400}
.eyebrow,.nav-links a,.chip-live,.line-tag,.tab,.canvas-bar,.np-step,.np-type,.np-sec h4,.np-io b,.res-label,.plan-kicker,.plan-flag,.step-time,.step-num,.f-col h2,.tools p,.badge,.vs th,.route-title,.pcol-h,.sh-head,.dn span{font-weight:600;letter-spacing:.08em}
.np-io span,.node-label small,.toast small,.mb-meta,.appt-time,.sb-time,.scene-foot,.cal-hour,.inv-line span:last-child,.range-top output,.ch-txt small{font-family:var(--font);letter-spacing:0}
.btn,.brand-name{font-family:var(--serif);font-weight:600;letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  .chip-live i,.fw-status i,.node-state .spin,.typing i{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ================================================================
   Páginas internas
   ================================================================ */
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--hover)}
.page-hero{padding:clamp(56px,8vw,104px) 0 clamp(8px,2vw,24px)}
.page-hero h1{margin:0;font-family:var(--serif);font-size:clamp(2.4rem,1.2rem + 4vw,4.4rem);font-weight:600;line-height:1.04;letter-spacing:-0.015em;max-width:18ch;text-wrap:balance}
.page-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.page-hero .lead{margin-top:18px}
.page-hero + .sec{padding-top:clamp(40px,5vw,64px)}
.page-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.page-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:9px;background:var(--btn2);color:var(--ink);font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .2s}
.page-links a:hover{background:var(--btn2-hover)}
.explore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.explore-card{display:flex;flex-direction:column;min-height:260px;padding:clamp(26px,3vw,36px);border-radius:28px;background:var(--card);text-decoration:none;color:var(--ink);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.explore-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.explore-card .eyebrow{margin-bottom:16px}
.explore-card h3{margin:0 0 10px;font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-0.015em}
.explore-card p{margin:0;color:var(--ink-2)}
.explore-card .link-arrow{margin-top:auto;padding-top:20px}
.page-contact #contacto{padding-top:clamp(56px,8vw,104px)}
@media (max-width:900px){.explore{grid-template-columns:minmax(0,1fr)}.explore-card{min-height:0}}


/* ================================================================
   Paleta verde (inspirada en CRMs y agendas como Pipedrive y Calendly)
   ================================================================ */
:root{--bg:#FAFAFA;--btn:#059669;--btn-ink:#FFFFFF;--btn-hover:#047857;--header-bg:rgba(244,244,245,.88)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#09090B;--bg-soft:#09090B;--card:#27272A;--btn:#34D399;--btn-ink:#09090B;--btn-hover:#6EE7B7;--header-bg:rgba(9,9,11,.85)}
}
:root[data-theme="dark"]{--bg:#09090B;--bg-soft:#09090B;--card:#27272A;--btn:#34D399;--btn-ink:#09090B;--btn-hover:#6EE7B7;--header-bg:rgba(9,9,11,.85)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(52,211,153,.25)}

/* Verdes y marcas de "listo" en el mismo tono salvia */
:root{--ok:#059669;--ok-soft:#D1FAE5;--ok-ink:#059669}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok:#34D399;--ok-soft:rgba(52,211,153,.14);--ok-ink:#A7F3D0}}
:root[data-theme="dark"]{--ok:#34D399;--ok-soft:rgba(52,211,153,.14);--ok-ink:#A7F3D0}
.toast-ico{background:#059669}

/* Panel de pasos: barra de scroll fina y visible */
.node-panel{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#52525B transparent;scrollbar-gutter:stable}
.node-panel::-webkit-scrollbar{width:8px}
.node-panel::-webkit-scrollbar-track{background:transparent;margin:12px 0}
.node-panel::-webkit-scrollbar-thumb{background:#52525B;border-radius:999px;border:2px solid #27272A}
.node-panel::-webkit-scrollbar-thumb:hover{background:#71717A}

/* ================================================================
   Bento + neumorfismo
   Una sola superficie cálida; las piezas salen o se hunden con
   sombras suaves. Las zonas oscuras (flujo, demo, calculadora)
   se quedan como piezas de contraste dentro de la rejilla.
   ================================================================ */
:root{
  --neu:#F4F4F5;
  --neu-dark:rgba(113,113,122,.42);
  --neu-light:rgba(255,255,255,.92);
  --neu-out:9px 9px 20px var(--neu-dark),-9px -9px 20px var(--neu-light);
  --neu-out-sm:5px 5px 12px var(--neu-dark),-5px -5px 12px var(--neu-light);
  --neu-in:inset 4px 4px 9px var(--neu-dark),inset -4px -4px 9px var(--neu-light);
  --neu-in-sm:inset 2px 2px 5px var(--neu-dark),inset -2px -2px 5px var(--neu-light);
  --bg:var(--neu);--bg-soft:var(--neu);--bg-dot:var(--neu);--card:var(--neu);
  --ink-3:#71717A;--line:#E4E4E7;--line-2:#D4D4D8;
  --btn2:var(--neu);--btn2-hover:#FAFAFA;
  --header-bg:rgba(244,244,245,.9);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --neu:#18181B;--neu-dark:rgba(0,0,0,.5);--neu-light:rgba(255,255,255,.045);
    --bg:var(--neu);--bg-soft:var(--neu);--bg-dot:var(--neu);--card:var(--neu);
    --ink-3:#71717A;--line:#27272A;--line-2:#3F3F46;--btn2:var(--neu);--btn2-hover:#1F1F23;
    --header-bg:rgba(9,9,11,.9);
  }
}
:root[data-theme="dark"]{
  --neu:#18181B;--neu-dark:rgba(0,0,0,.5);--neu-light:rgba(255,255,255,.045);
  --bg:var(--neu);--bg-soft:var(--neu);--bg-dot:var(--neu);--card:var(--neu);
  --ink-3:#71717A;--line:#27272A;--line-2:#3F3F46;--btn2:var(--neu);--btn2-hover:#1F1F23;
  --header-bg:rgba(9,9,11,.9);
}

/* Botones: salen; al pulsarlos se hunden */
.btn{transition:background-color .2s,color .2s,box-shadow .25s,transform .2s}
.btn-primary{box-shadow:5px 5px 12px var(--neu-dark),-5px -5px 12px var(--neu-light)}
.btn-primary:hover{box-shadow:3px 3px 8px var(--neu-dark),-3px -3px 8px var(--neu-light)}
.btn-primary:active{box-shadow:inset 3px 3px 7px rgba(0,0,0,.28),inset -2px -2px 6px rgba(255,255,255,.12);transform:none}
.btn-secondary{box-shadow:var(--neu-out-sm)}
.btn-secondary:hover{box-shadow:3px 3px 8px var(--neu-dark),-3px -3px 8px var(--neu-light)}
.btn-secondary:active{box-shadow:var(--neu-in-sm);transform:none}

/* Cabecera y chips */
.header-bar,.site-header.is-scrolled .header-bar{border-color:transparent;box-shadow:var(--neu-out-sm)}
.nav-links a[aria-current="page"]{background:var(--neu);box-shadow:var(--neu-in-sm)}
.nav-links a:hover{background:transparent;box-shadow:var(--neu-in-sm)}
.menu-btn{background:var(--neu);box-shadow:var(--neu-out-sm)}
.nav{border-color:transparent}
.chip-live{border-color:transparent;box-shadow:var(--neu-out-sm)}
.page-links a{background:var(--neu);box-shadow:var(--neu-out-sm);transition:box-shadow .25s}
.page-links a:hover{background:var(--neu);box-shadow:var(--neu-in-sm)}
.socials a{background:var(--neu);box-shadow:var(--neu-out-sm)}
.socials a:hover{background:var(--neu);box-shadow:var(--neu-in-sm)}

/* Lienzos oscuros: piezas de contraste con sombra suave */
.canvas,.calc-result,.tile.canvas,.f-cta{box-shadow:12px 12px 28px var(--neu-dark),-8px -8px 22px var(--neu-light)}

/* Antes y después */
.vs{border-color:transparent;box-shadow:var(--neu-out)}
.vs th{background:transparent}

/* Servicios */
.tabbox{border-color:transparent;box-shadow:var(--neu-out)}
.tabs{background:transparent;border-bottom-color:var(--line);gap:10px;padding:12px}
.tab + .tab{border-left:0}
.tab{border-radius:16px;min-height:60px}
.tab::before{left:18px;right:18px;top:auto;bottom:8px;height:2px;border-radius:2px}
.tab[aria-selected="true"]{background:var(--neu);box-shadow:var(--neu-in-sm)}
.tab:hover:not([aria-selected="true"]){box-shadow:var(--neu-out-sm)}
.ideal{background:var(--neu);box-shadow:var(--neu-in-sm)}
.tab-visual{background-color:var(--neu);box-shadow:var(--neu-in)}
.mock{border-color:transparent;box-shadow:var(--neu-out-sm)}
.mc.in{background:var(--neu);box-shadow:var(--neu-in-sm)}
.pcol{background:var(--neu);box-shadow:var(--neu-in-sm)}
.pcard{border-color:transparent;box-shadow:3px 3px 7px var(--neu-dark),-3px -3px 7px var(--neu-light)}

/* Calculadora */
.calc{gap:24px}
.calc-form{box-shadow:var(--neu-out)}
.range-top output{background:var(--neu);box-shadow:var(--neu-in-sm)}
.range::-webkit-slider-runnable-track{height:8px;border-radius:999px;box-shadow:var(--neu-in-sm)}
.range::-webkit-slider-thumb{margin-top:-9px;box-shadow:3px 3px 7px var(--neu-dark),-2px -2px 6px var(--neu-light)}
.range::-moz-range-track{height:8px;border-radius:999px;box-shadow:var(--neu-in-sm)}
.range::-moz-range-progress{height:8px;border-radius:999px}

/* Sectores en rejilla bento */
.sectors{gap:22px;grid-auto-flow:dense}
.sector{background:var(--neu);box-shadow:var(--neu-out);transition:box-shadow .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.sector:hover{transform:translateY(-3px)}
.sector-ico{background:var(--neu);box-shadow:var(--neu-in-sm)}
.sector:nth-child(1),.sector:nth-child(5),.sector:nth-child(7),.sector:nth-child(8){grid-column:span 2}
.sector:nth-child(1) h3,.sector:nth-child(5) h3,.sector:nth-child(7) h3,.sector:nth-child(8) h3{font-size:1.45rem}

/* Compromisos (bento) */
.bento{gap:22px}
.tile{background:var(--neu);box-shadow:var(--neu-out)}
.switch-row,.quote,.tile-chat{background:var(--neu);box-shadow:var(--neu-in-sm)}
.switch{box-shadow:var(--neu-in-sm)}

/* Planes: de columnas con líneas a piezas bento */
.plans{gap:24px;border:0;border-radius:0;overflow:visible;background:transparent}
.plan{border-radius:28px;background:var(--neu);box-shadow:var(--neu-out)}
.plan + .plan{border-left:0}
.plan-featured{background:var(--neu);box-shadow:var(--neu-out),inset 0 0 0 2px var(--accent)}
.plan-featured::before{display:none}
.plan-price{border-color:var(--line)}

/* Proceso: cada paso es una pieza */
.needs{background:var(--neu);box-shadow:var(--neu-in)}
.steps{display:grid;gap:18px;border-top:0}
.step{padding:clamp(22px,3vw,30px) clamp(22px,3vw,30px);border-bottom:0;border-radius:24px;background:var(--neu);box-shadow:var(--neu-out-sm);transition:color .45s,box-shadow .45s}
.step.is-reached{box-shadow:var(--neu-out)}
.step-get{background:var(--neu);box-shadow:var(--neu-in-sm)}

/* Preguntas: tarjetas que se hunden al abrirse */
.faq-list{display:grid;gap:14px}
.faq-list details,.faq-list details:first-child{border:0;border-radius:22px;background:var(--neu);box-shadow:var(--neu-out-sm);transition:box-shadow .3s}
.faq-list details[open]{box-shadow:var(--neu-in-sm)}
.faq-list summary{padding:20px 24px;min-height:72px}
.faq-answer p{padding:0 56px 22px 24px}
.plus{background:var(--neu);box-shadow:var(--neu-out-sm)}
.faq-list summary:hover .plus{background:var(--neu);box-shadow:var(--neu-in-sm)}

/* Contacto */
.channels{display:grid;gap:14px;border-top:0}
.channels li{border-bottom:0}
.channels a{padding:12px 18px;border-radius:20px;background:var(--neu);box-shadow:var(--neu-out-sm);transition:box-shadow .3s,padding .3s cubic-bezier(.2,.8,.2,1)}
.channels a:hover{padding-left:18px;box-shadow:var(--neu-in-sm)}
.ch-ico{background:var(--neu);box-shadow:var(--neu-in-sm)}
.form-card{box-shadow:var(--neu-out)}
.field input,.field select,.field textarea{background:var(--neu);border-color:transparent;box-shadow:var(--neu-in-sm)}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--neu);border-color:var(--accent);box-shadow:var(--neu-in-sm),0 0 0 3px var(--accent-soft)}

/* Inicio: tarjetas para seguir explorando en bento */
.explore{gap:22px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto}
.explore-card{background:var(--neu);box-shadow:var(--neu-out)}
.explore-card:first-child{grid-row:span 2;justify-content:flex-start}
.explore-card:first-child h3{font-size:2.2rem}
.explore-card:hover{transform:translateY(-3px);box-shadow:var(--neu-out)}

/* Pie */
.site-footer{background:var(--neu)}
.f-bottom{border-top-color:var(--line)}

@media (max-width:1020px){
  .sector:nth-child(n){grid-column:auto}
  .sector:nth-child(1),.sector:nth-child(8){grid-column:span 2}
}
@media (max-width:900px){
  .plan + .plan{border-top:0}
  .explore{grid-template-columns:minmax(0,1fr)}
  .explore-card:first-child{grid-row:auto}
  .tabs{padding:10px;gap:8px}
}
@media (max-width:560px){
  .sector:nth-child(n){grid-column:auto}
  .step{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================
   Microinteracciones de botones
   ================================================================ */
.btn,.dn,.tab,.page-links a,.socials a,.np-nav button,.channels a,.menu-btn,.header-cta{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
/* Se elevan un poco al pasar el ratón y se hunden al pulsar */
.btn{transition:background-color .2s,color .2s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px)}
.btn:active,.dn:active,.tab:active,.page-links a:active,.socials a:active,.np-nav button:active,.menu-btn:active,.plus:active,.sector-go:active{transform:scale(.96);transition-duration:.08s}
/* Brillo que cruza el botón principal */
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);pointer-events:none;transition:none}
.btn-primary:hover::after{left:120%;transition:left .7s cubic-bezier(.2,.8,.2,1)}
/* Iconos que reaccionan */
.btn .ico,.channels a .ch-arrow,.ch-ico .ico{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.btn:hover .ico{transform:translateX(2px) rotate(-8deg) scale(1.08)}
.channels a:hover .ch-arrow{transform:translateX(4px)}
.channels a:hover .ch-ico .ico{transform:scale(1.12) rotate(-6deg)}
.explore-card .link-arrow .ico,.compare-foot .link-arrow .ico{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.explore-card:hover .link-arrow .ico{transform:translateX(5px)}
.sector-go{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.sector-go:hover{box-shadow:0 6px 14px rgba(0,0,0,.18)}
.plus{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,background-color .2s}
/* Onda al pulsar (la crea app.js) */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:ripple .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* Botón flotante de WhatsApp: latido suave y se estira al pasar */
.float-wa::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:wa-pulse 2.8s ease-out infinite}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%,100%{box-shadow:0 0 0 14px rgba(52,211,153,0)}}
.float-wa.is-visible:hover{transform:translateY(-3px) scale(1.03)}
.float-wa:active{transform:scale(.97)}
.float-wa .ico{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.float-wa:hover .ico{transform:rotate(-12deg) scale(1.15)}
/* Estado de envío del formulario */
.btn.is-sent{background:#059669;color:#FFFFFF}
.btn.is-sent .ico{animation:sent-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes sent-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@media (hover:none){.btn:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.float-wa.is-visible:hover{transform:none}
  .btn-primary::after,.float-wa::before,.ripple{display:none}
  .btn:hover .ico,.channels a:hover .ch-arrow,.explore-card:hover .link-arrow .ico{transform:none}
}
.float-wa{position:relative}

/* ================================================================
   Iconos minimalistas
   ================================================================ */
.tab-glyph{width:18px;height:18px;color:var(--c);opacity:.55;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.tab[aria-selected="true"] .tab-glyph,.tab:hover .tab-glyph{opacity:1}
.tab:hover .tab-glyph{transform:scale(1.12)}
.dn span{display:inline-flex;align-items:center;gap:6px}
.dn-ico{width:14px;height:14px;color:var(--c)}
.explore-ico,.plan-ico,.tile-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:14px;background:var(--neu);box-shadow:var(--neu-in-sm);color:var(--accent)}
.explore-ico .ico,.plan-ico .ico,.tile-ico .ico{width:20px;height:20px;stroke-width:1.7;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.explore-card:hover .explore-ico .ico,.plan:hover .plan-ico .ico,.tile:hover .tile-ico .ico{transform:scale(1.12) rotate(-6deg)}
.tile-ico{margin-bottom:16px}
.tile.canvas .tile-ico{background:rgba(255,255,255,.06);box-shadow:none;color:#34D399}
.tile-full .tile-ico{margin-bottom:16px}
.plan-ico{margin-bottom:16px}
.step-num::before{display:none}
.step-num{gap:8px}
.step-num .ico{width:17px;height:17px;color:var(--ink-3);transition:color .45s}
.step.is-reached .step-num .ico{color:var(--accent)}
.lbl-ico{width:17px;height:17px;margin-right:8px;color:var(--accent);vertical-align:-3px}
.page-links a{gap:7px}
.page-links a .ico{width:15px;height:15px;color:var(--accent)}

/* Chat de "Te acompañamos": plano, como un chat normal */
.tile-chat{background:var(--neu);box-shadow:none;border:1px solid var(--line)}
.tile-chat .mc.in{background:#FFFFFF;box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile-chat .mc.in{background:#27272A}}
:root[data-theme="dark"] .tile-chat .mc.in{background:#27272A}

/* ================================================================
   Glassmorfismo
   Solo en piezas que flotan sobre contenido (cabecera, menú móvil,
   botón de WhatsApp, aviso y panel del flujo), donde el desenfoque
   deja ver lo que pasa por detrás.
   ================================================================ */
:root{
  --glass:rgba(244,244,245,.56);
  --glass-strong:rgba(244,244,245,.96);
  --glass-border:rgba(255,255,255,.7);
  --glass-shadow:0 10px 34px rgba(24,24,27,.13),inset 0 1px 0 rgba(255,255,255,.75);
  --glass-blur:saturate(170%) blur(22px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --glass:rgba(9,9,11,.55);--glass-strong:rgba(9,9,11,.96);
    --glass-border:rgba(255,255,255,.09);
    --glass-shadow:0 10px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"]{
  --glass:rgba(9,9,11,.55);--glass-strong:rgba(9,9,11,.96);
  --glass-border:rgba(255,255,255,.09);
  --glass-shadow:0 10px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
}

/* Cabecera flotante */
.header-bar,.site-header.is-scrolled .header-bar{background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}

/* Menú desplegable en móvil */
@media (max-width:1020px){
  .nav{background:var(--glass-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
}

/* Botón de WhatsApp: cristal oscuro */
.float-wa{background:rgba(24,24,27,.84);border:1px solid rgba(255,255,255,.14);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.float-wa:hover{background:rgba(24,24,27,.94)}

/* Aviso del flujo: cristal claro sobre el lienzo */
.toast{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.6);backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.8)}

/* Panel de cada paso: cristal oscuro que deja ver el flujo detrás */
.node-panel{background:rgba(39,39,42,.6);border-left:1px solid rgba(255,255,255,.1);backdrop-filter:saturate(150%) blur(20px);-webkit-backdrop-filter:saturate(150%) blur(20px);box-shadow:-20px 0 50px rgba(0,0,0,.3),inset 1px 0 0 rgba(255,255,255,.05)}
.np-io div,.np-route li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
.np-route li:last-child{border-color:#34D399}
.np-tools li,.np-close,.np-nav button{background:rgba(255,255,255,.08)}
.np-close:hover,.np-nav button:hover{background:rgba(255,255,255,.15)}
.node-panel::-webkit-scrollbar-thumb{border-color:transparent;background-clip:padding-box}
@media (max-width:639px){
  .node-panel{border:1px solid rgba(255,255,255,.1)}
}

/* ================================================================
   Etiquetas y atajos minimalistas: sin caja, sin sombra
   ================================================================ */
.chip-live{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.chip-live i{box-shadow:0 0 0 4px var(--ok-soft)}

.page-links{gap:6px 26px}
.page-links a,.page-links a:hover{min-height:32px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-2);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:color .2s,background-size .3s cubic-bezier(.2,.8,.2,1)}
.page-links a:hover{color:var(--ink);background-size:100% 1px}
.page-links a .ripple{display:none}

.badge{padding:0;background:none;color:var(--accent)}

/* Sin puntos ni cuadritos delante de las etiquetas */
.chip-live i,.eyebrow::before,.plan-kicker::before{display:none}

/* ================================================================
   Volver al inicio: liquid glass
   Cristal casi transparente con poco desenfoque, borde de luz,
   brillo especular arriba y un leve "apretón" al tocarlo.
   ================================================================ */
.float-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.to-top{
  --lg-tint:rgba(255,255,255,.1);--lg-rim:rgba(255,255,255,.95);--lg-rim-2:rgba(255,255,255,.3);--lg-ink:var(--ink);
  position:relative;isolation:isolate;pointer-events:none;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.32),var(--lg-tint) 45%,rgba(255,255,255,.04));
  backdrop-filter:blur(5px) saturate(190%) brightness(1.06);-webkit-backdrop-filter:blur(5px) saturate(190%) brightness(1.06);
  box-shadow:inset 1.5px 1.5px 0 var(--lg-rim),inset -1px -1px 0 var(--lg-rim-2),inset 0 0 14px rgba(255,255,255,.35),0 10px 28px rgba(24,24,27,.2),0 2px 6px rgba(24,24,27,.12);
  color:var(--lg-ink);cursor:pointer;
  opacity:0;transform:translateY(16px) scale(.7);
  transition:opacity .35s,transform .55s cubic-bezier(.3,1.5,.5,1),box-shadow .3s;
}
.to-top::before{content:"";position:absolute;inset:3px 8px auto;z-index:-1;height:45%;border-radius:999px 999px 60% 60%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));opacity:.8;pointer-events:none}
.to-top::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 70% 85%,rgba(255,255,255,.45),transparent 45%);mix-blend-mode:overlay;pointer-events:none}
.to-top .ico{width:20px;height:20px;stroke-width:2;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top.is-visible:hover{transform:scale(1.08)}
.to-top:hover .ico{transform:translateY(-2px)}
.to-top.is-visible:active{transform:scale(1.04,.9);transition-duration:.15s}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .to-top{--lg-tint:rgba(255,255,255,.08);--lg-rim:rgba(255,255,255,.45);--lg-rim-2:rgba(255,255,255,.12);--lg-ink:#FAFAFA;background:linear-gradient(150deg,rgba(255,255,255,.2),var(--lg-tint) 45%,rgba(255,255,255,.03));box-shadow:inset 1.5px 1.5px 0 var(--lg-rim),inset -1px -1px 0 var(--lg-rim-2),inset 0 0 14px rgba(255,255,255,.1),0 10px 28px rgba(0,0,0,.45)}
  :root:not([data-theme="light"]) .to-top::before{opacity:.35}
}
:root[data-theme="dark"] .to-top{--lg-tint:rgba(255,255,255,.08);--lg-rim:rgba(255,255,255,.45);--lg-rim-2:rgba(255,255,255,.12);--lg-ink:#FAFAFA;background:linear-gradient(150deg,rgba(255,255,255,.2),var(--lg-tint) 45%,rgba(255,255,255,.03));box-shadow:inset 1.5px 1.5px 0 var(--lg-rim),inset -1px -1px 0 var(--lg-rim-2),inset 0 0 14px rgba(255,255,255,.1),0 10px 28px rgba(0,0,0,.45)}
:root[data-theme="dark"] .to-top::before{opacity:.35}
@media (prefers-reduced-motion:reduce){
  .to-top,.to-top .ico{transition:opacity .2s}
  .to-top,.to-top.is-visible:hover,.to-top.is-visible:active{transform:none}
}

/* Volver al inicio: esquina izquierda, opuesta a WhatsApp */
.to-top{position:fixed;left:max(18px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}

/* ================================================================
   Barra superior estilo Intercom
   Franja de aviso arriba, barra plana a todo el ancho, menú junto
   al logo en minúsculas, acciones a la derecha.
   ================================================================ */
.announce{position:relative;z-index:21;background:var(--ink);text-align:center}
.announce a{display:block;padding:8px var(--pad);color:var(--bg);font-size:.875rem;text-decoration:none}
.announce u{text-underline-offset:3px}
.announce a:hover u{text-decoration-thickness:2px}

.site-header{top:0;padding:0;background:var(--bg);border-bottom:1px solid var(--line);pointer-events:auto;transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(24,24,27,.06)}
.header-bar,.site-header.is-scrolled .header-bar{max-width:none;height:72px;padding:0 var(--pad);gap:28px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav{margin-left:0}
.nav-links{gap:2px}
.nav-links a,.nav-links a[aria-current="page"]{min-height:40px;padding:0 12px;border-radius:6px;font-family:var(--font);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;box-shadow:none}
.nav-links a:hover{background:var(--hover);box-shadow:none}
.nav-links a[aria-current="page"]{font-weight:600}

.header-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.header-link{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:6px;color:var(--ink);font-size:1rem;text-decoration:none;transition:background-color .2s}
.header-link:hover{background:var(--hover)}
.header-right .header-cta{min-height:40px;padding:0 14px;border-radius:4px;font-size:.875rem;box-shadow:none}
.header-right .header-cta:hover{box-shadow:none}
.header-sep{width:1px;height:40px;margin:0 6px;background:var(--line)}
.header-ghost{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--ink);border-radius:4px;color:var(--ink);font-size:.875rem;text-decoration:none;transition:background-color .2s,color .2s}
.header-ghost:hover{background:var(--ink);color:var(--bg)}
.header-ghost span{transition:transform .25s}
.header-ghost:hover span{transform:translateX(3px)}

@media (max-width:1020px){
  .header-bar{height:64px}
  .header-right{gap:6px}
  .header-link,.header-sep,.header-ghost{display:none}
  .nav{top:100%;left:var(--pad);right:var(--pad)}
}
@media (max-width:639px){
  .announce a{font-size:.8rem;padding:7px 16px}
}

/* Inicio: "Sigue explorando" con dos tarjetas iguales */
.explore{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
.explore-card:first-child{grid-row:auto}
.explore-card:first-child h3{font-size:1.7rem}
@media (max-width:900px){.explore{grid-template-columns:minmax(0,1fr)}}
/* Sectores sin flecha: tarjetas a la altura de su contenido */
.sector{min-height:0}
/* Que los botones flotantes no tapen el pie al final de la página */
.site-footer{padding-bottom:96px}


/* ================================================================
   Paleta: Eficiencia Líquida (negro carbón + verde esmeralda)
   ================================================================ */
:root{--bg:#F4F4F5;--bg-soft:#F4F4F5;--bg-dot:#F4F4F5;--card:#FFFFFF;--neu:#FFFFFF;
  --ink:#18181B;--ink-2:#52525B;--ink-3:#71717A;--line:#E4E4E7;--line-2:#D4D4D8;
  --btn:#059669;--btn-ink:#FFFFFF;--btn-hover:#047857;--btn2:#FFFFFF;--btn2-hover:#FAFAFA;--hover:rgba(24,24,27,.05);
  --accent:#059669;--accent-hover:#047857;--accent-ink:#047857;--accent-soft:#D1FAE5;
  --ok:#059669;--ok-soft:#D1FAE5;--ok-ink:#047857;--l1:#059669;
  --canvas:#18181B;--canvas-2:#27272A;--canvas-3:#3F3F46;--canvas-line:#52525B;--canvas-soft:#A1A1AA;--canvas-ink:#FAFAFA;
  --neu-dark:rgba(113,113,122,.22);--neu-light:rgba(255,255,255,.95);
  --header-bg:rgba(244,244,245,.9);--glass:rgba(244,244,245,.56);--glass-strong:rgba(244,244,245,.96);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
    --bg:#09090B;--bg-soft:#09090B;--bg-dot:#09090B;--card:#18181B;--neu:#18181B;
    --ink:#FAFAFA;--ink-2:#A1A1AA;--ink-3:#71717A;--line:#27272A;--line-2:#3F3F46;
    --btn:#10B981;--btn-ink:#09090B;--btn-hover:#34D399;--btn2:#18181B;--btn2-hover:#1F1F23;--hover:rgba(255,255,255,.06);
    --accent:#10B981;--accent-hover:#34D399;--accent-ink:#6EE7B7;--accent-soft:rgba(16,185,129,.14);
    --ok:#10B981;--ok-soft:rgba(16,185,129,.14);--ok-ink:#6EE7B7;--l1:#10B981;
    --canvas:#121214;--canvas-2:#27272A;--canvas-3:#3F3F46;--canvas-line:#52525B;--canvas-soft:#A1A1AA;--canvas-ink:#FAFAFA;
    --neu-dark:rgba(0,0,0,.55);--neu-light:rgba(255,255,255,.035);
    --header-bg:rgba(9,9,11,.9);--glass:rgba(9,9,11,.55);--glass-strong:rgba(24,24,27,.96);}}
:root[data-theme="dark"]{color-scheme:dark;
    --bg:#09090B;--bg-soft:#09090B;--bg-dot:#09090B;--card:#18181B;--neu:#18181B;
    --ink:#FAFAFA;--ink-2:#A1A1AA;--ink-3:#71717A;--line:#27272A;--line-2:#3F3F46;
    --btn:#10B981;--btn-ink:#09090B;--btn-hover:#34D399;--btn2:#18181B;--btn2-hover:#1F1F23;--hover:rgba(255,255,255,.06);
    --accent:#10B981;--accent-hover:#34D399;--accent-ink:#6EE7B7;--accent-soft:rgba(16,185,129,.14);
    --ok:#10B981;--ok-soft:rgba(16,185,129,.14);--ok-ink:#6EE7B7;--l1:#10B981;
    --canvas:#121214;--canvas-2:#27272A;--canvas-3:#3F3F46;--canvas-line:#52525B;--canvas-soft:#A1A1AA;--canvas-ink:#FAFAFA;
    --neu-dark:rgba(0,0,0,.55);--neu-light:rgba(255,255,255,.035);
    --header-bg:rgba(9,9,11,.9);--glass:rgba(9,9,11,.55);--glass-strong:rgba(24,24,27,.96);}
:root[data-theme="light"]{color-scheme:light}
.site-footer{background:var(--bg)}
/* Franja de aviso en modo oscuro: carbón, no blanca */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .announce{background:var(--neu);border-bottom:1px solid var(--line)}:root:not([data-theme="light"]) .announce a{color:var(--ink)}}
:root[data-theme="dark"] .announce{background:var(--neu);border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .announce a{color:var(--ink)}


/* ================================================================
   Inspiración Skiff
   Rejilla tenue detrás del hero, palabras en degradado, marco de
   producto, títulos con iconos de color, tarjetas con flecha,
   bloque oscuro contenido y cierre centrado con círculos de color.
   ================================================================ */
:root{--grid:rgba(24,24,27,.07);--grad-a:#047857;--grad-b:#10B981}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid:rgba(255,255,255,.06);--grad-a:#10B981;--grad-b:#6EE7B7}}
:root[data-theme="dark"]{--grid:rgba(255,255,255,.06);--grad-a:#10B981;--grad-b:#6EE7B7}

/* Títulos grandes con peso regular, como en Skiff */
.hero h1,.h2,.page-hero h1,.f-cta h2{font-weight:400;letter-spacing:-0.025em}

/* Hero: rejilla de líneas que se desvanece desde arriba */
.hero::before{display:block;content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;background-position:center -1px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 60% at 50% 0%,#000 25%,transparent 78%);pointer-events:none}

/* Palabras destacadas en degradado */
.hero h1 em,.f-cta h2 em,.page-hero h1 em{background:linear-gradient(100deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.1em;margin-right:-.1em}

/* Texto pequeño bajo los botones */
.hero-note{margin:16px 0 0;font-size:.875rem;color:var(--ink-3)}

/* Marco de producto alrededor del flujo */
.hero-canvas{box-shadow:0 0 0 10px var(--card),0 0 0 11px var(--line),0 40px 90px -30px rgba(24,24,27,.35)}

/* Títulos con icono de color delante de cada palabra */
.word-ico{white-space:nowrap;color:var(--c)}
.wi{display:inline-grid;place-items:center;width:.84em;height:.84em;margin:0 .16em 0 .04em;border-radius:.22em;background:var(--c);vertical-align:-.08em}
.wi .ico{width:.52em;height:.52em;color:#FFFFFF;stroke-width:2.2}
.page-hero h1:has(.word-ico){max-width:20ch;line-height:1.12}

/* Tarjetas: etiqueta de color y flecha ↗ en la esquina */
.explore-card{position:relative}
.explore-card .eyebrow{color:var(--c)}
.card-go{position:absolute;top:24px;right:24px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink-3);transition:color .2s,background-color .2s}
.card-go .ico{width:18px;height:18px;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.explore-card:hover .card-go{color:var(--ink);background:var(--hover)}
.explore-card:hover .card-go .ico{transform:rotate(-45deg) translateX(3px)}

/* "Cómo funciona": bloque oscuro contenido, con esquinas redondeadas */
.demo{margin-inline:max(var(--pad),calc((100% - 1360px) / 2));border-radius:clamp(24px,3vw,40px)}

/* Cierre: centrado, claro, con iconos apilados y círculos de color */
.f-cta{position:relative;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:clamp(56px,8vw,104px) 0;text-align:center;background:none;box-shadow:none;border-radius:0}
.f-cta h2{max-width:20ch;color:var(--ink);font-size:clamp(2.2rem,1.2rem + 3vw,3.8rem);line-height:1.06}
.f-cta-actions{justify-content:center;margin-top:32px}
.f-cta-note{margin:14px 0 0;font-size:.875rem;color:var(--ink-3)}
.f-cta-icons{display:flex;justify-content:center;margin-bottom:28px}
.f-cta-icons span{display:grid;place-items:center;width:52px;height:52px;margin-left:-10px;border-radius:15px;background:var(--c);color:#FFFFFF;box-shadow:0 0 0 4px var(--bg),0 10px 22px rgba(24,24,27,.14)}
.f-cta-icons span:first-child{margin-left:0;transform:rotate(-8deg)}
.f-cta-icons span:nth-child(2){transform:rotate(-2deg) translateY(-4px)}
.f-cta-icons span:nth-child(3){transform:rotate(4deg) translateY(-4px)}
.f-cta-icons span:last-child{transform:rotate(9deg)}
.f-cta-icons .ico{width:22px;height:22px;stroke-width:2}
.f-cta::before,.f-cta::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.f-cta::before{top:18%;left:calc(50% - 50vw - 110px);width:260px;height:260px;background:var(--accent)}
.f-cta::after{bottom:4%;right:calc(50% - 50vw - 80px);width:190px;height:190px;background:var(--l3)}
.site-footer > .wrap{position:relative;z-index:0}

@media (max-width:760px){
  .f-cta::before{width:150px;height:150px;left:calc(50% - 50vw - 95px);top:6%}
  .f-cta::after{width:120px;height:120px;right:calc(50% - 50vw - 80px);bottom:0}
}
@media (max-width:639px){
  .demo{margin-inline:12px;border-radius:24px}
  .demo > .wrap{padding-inline:16px}
  .hero-canvas{box-shadow:0 0 0 6px var(--card),0 0 0 7px var(--line),0 30px 60px -24px rgba(24,24,27,.3)}
  .card-go{top:18px;right:18px}
}
.site-footer{overflow-x:clip}
@media (max-width:639px){
  .f-cta::before{width:110px;height:110px;left:calc(50% - 50vw - 70px);top:2%}
  .f-cta::after{width:90px;height:90px;right:calc(50% - 50vw - 60px);bottom:2%}
}

/* ================================================================
   Barra combinada: Intercom + Skiff
   De Intercom: franja de aviso arriba, enlaces en letra normal,
   botón oscuro. De Skiff: cápsula centrada y flotante con cristal.
   ================================================================ */
:root{--pill-bg:rgba(255,255,255,.94)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pill-bg:rgba(24,24,27,.92)}}
:root[data-theme="dark"]{--pill-bg:rgba(24,24,27,.92)}

.site-header,.site-header.is-scrolled{top:0;padding:12px var(--pad) 0;background:transparent;border-bottom:0;box-shadow:none;pointer-events:none}
.header-bar,.site-header.is-scrolled .header-bar{pointer-events:auto;max-width:920px;height:60px;margin-inline:auto;padding:0 8px 0 22px;gap:16px;border:1px solid var(--line);border-radius:999px;background:var(--pill-bg);backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px);box-shadow:0 1px 2px rgba(24,24,27,.04),0 10px 30px rgba(24,24,27,.07)}
.site-header.is-scrolled .header-bar{box-shadow:0 1px 2px rgba(24,24,27,.05),0 14px 36px rgba(24,24,27,.1)}
.nav{margin-inline:auto}
.nav-links a,.nav-links a[aria-current="page"]{min-height:38px;padding:0 14px;border-radius:999px;font-size:.95rem}
.header-right{margin-left:0}
.header-right .header-cta{min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:none}
.header-right .header-cta:hover{background:var(--accent);color:var(--btn-ink);box-shadow:none}

@media (max-width:1020px){
  .header-bar,.site-header.is-scrolled .header-bar{height:56px;padding:0 6px 0 18px}
  .nav{top:calc(100% + 8px);left:0;right:0;margin:0}
  .header-right{margin-left:auto}
}
@media (max-width:639px){
  .site-header,.site-header.is-scrolled{padding:10px 12px 0}
}
@media (max-width:1020px){
  .nav,.nav.is-open{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);border-radius:24px}
}


/* ================================================================
   Migas de pan, CTA fijo en móvil y páginas nuevas
   ================================================================ */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0 0 20px;padding:0;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.crumbs li + li::before{content:"/";margin-right:8px;color:var(--ink-3);font-weight:400}
.crumbs a{color:var(--ink-3);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--accent)}

/* El botón de la cápsula se queda visible también en móvil */
@media (max-width:639px){
  .header-right .header-cta{display:inline-flex;min-height:38px;padding:0 14px;font-size:.8125rem}
  .header-bar,.site-header.is-scrolled .header-bar{gap:8px;padding:0 6px 0 16px}
}

/* Gracias y 404: contenido centrado */
.page-center{padding-bottom:clamp(72px,9vw,120px)}
.page-center .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.page-center h1{margin-inline:auto}
.page-center .lead{max-width:46ch}
.page-center .page-links{justify-content:center;margin-top:40px}
.center-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.thanks-ico{display:grid;place-items:center;width:64px;height:64px;margin-bottom:24px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.thanks-ico .ico{width:30px;height:30px;stroke-width:2.2}
.next-steps{display:grid;gap:12px;width:100%;max-width:520px;margin:44px 0 0;padding:0;list-style:none;text-align:left}
.next-steps li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--card);box-shadow:var(--neu-out-sm)}
.next-steps b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--btn-ink);font-size:.85rem}
.page-more{margin:32px 0 0;color:var(--ink-2)}
.page-more a,.faq-answer a,.form-note a{color:var(--accent-ink);text-underline-offset:3px}
.nf-code{margin:0 0 4px;font-family:var(--serif);font-size:clamp(5.5rem,3rem + 10vw,10rem);font-weight:600;line-height:1;letter-spacing:-0.04em;background:linear-gradient(100deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Política de privacidad: texto largo cómodo de leer */
.updated{margin:14px 0 0;font-size:.875rem;color:var(--ink-3)}
.prose{max-width:760px}
.prose h2{margin:44px 0 12px;font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);line-height:1.65}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:1.2em}
.prose li + li{margin-top:6px}
.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--accent-ink);text-underline-offset:3px}
.f-bottom a{color:var(--ink-2);text-decoration:none}
.f-bottom a:hover{color:var(--ink);text-decoration:underline}
.wrap.prose{max-width:var(--max)}
.prose > *{max-width:720px}

/* ================================================================
   Más natural
   Sin neumorfismo: tarjetas planas con borde fino.
   Un solo cristal (la cápsula de arriba); lo demás, sólido.
   Movimiento discreto: cambios de color y sombra, sin rebotes.
   ================================================================ */
:root{
  --neu-dark:rgba(24,24,27,.06);--neu-light:transparent;
  --neu-out:0 0 0 1px var(--line),0 1px 2px rgba(24,24,27,.04);
  --neu-out-sm:0 0 0 1px var(--line);
  --neu-in:inset 0 0 0 1px var(--line);
  --neu-in-sm:inset 0 0 0 1px var(--line);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--neu-dark:rgba(0,0,0,.35);--neu-light:transparent}}
:root[data-theme="dark"]{--neu-dark:rgba(0,0,0,.35);--neu-light:transparent}

/* Botones planos */
.btn-primary,.btn-primary:hover,.btn-primary:active{box-shadow:none}
.btn-secondary{box-shadow:0 0 0 1px var(--line)}
.btn-secondary:hover{box-shadow:0 0 0 1px var(--line-2)}
.btn-secondary:active{box-shadow:0 0 0 1px var(--line-2)}

/* Tarjetas: al pasar el ratón cambia el borde, no saltan */
.sector:hover,.explore-card:hover{transform:none}
.sector,.explore-card,.plan,.tile,.step,.faq-list details,.channels a{transition:box-shadow .25s,background-color .25s}
.sector:hover,.explore-card:hover,.channels a:hover{box-shadow:0 0 0 1px var(--line-2),0 6px 18px rgba(24,24,27,.06)}
.faq-list details[open]{box-shadow:0 0 0 1px var(--line-2)}

/* Un solo cristal: el resto de piezas flotantes son sólidas */
.to-top,:root[data-theme="dark"] .to-top{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(24,24,27,.1);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .to-top{background:var(--card);box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(0,0,0,.4)}}
.to-top::before,.to-top::after{display:none}
.to-top.is-visible:hover,.to-top.is-visible:active{transform:none}
.to-top:hover{box-shadow:0 0 0 1px var(--line-2),0 6px 16px rgba(24,24,27,.12)}
.float-wa{background:#18181B;border:1px solid rgba(255,255,255,.1);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.float-wa:hover{background:#27272A}
.toast{background:#FFFFFF;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.node-panel{background:var(--canvas-2);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Movimiento discreto */
.ripple,.btn-primary::after,.float-wa::before{display:none}
.btn:hover,.btn:active,.dn:active,.tab:active,.page-links a:active,.socials a:active,.np-nav button:active,.menu-btn:active,.plus:active{transform:none}
.btn:hover .ico,.channels a:hover .ch-ico .ico,.float-wa:hover .ico,.tab:hover .tab-glyph{transform:none}
.float-wa.is-visible:hover,.float-wa:active{transform:none}
.explore-card:hover .explore-ico .ico,.plan:hover .plan-ico .ico,.tile:hover .tile-ico .ico{transform:none}
.btn.is-sent .ico{animation:none}

/* Quién está detrás, casos y reseñas (aparecen cuando hay datos reales) */
.person{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.person:not(:has(.person-photo:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.person-photo{width:100%;height:auto;aspect-ratio:6/7;object-fit:cover;border-radius:24px;background:var(--card)}
.person-text{max-width:52ch}
.person-sign{margin:20px 0 0;font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--ink-2)}
.cases,.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.reviews:not(:empty){margin-top:18px}
.case,.review{margin:0;padding:26px;border-radius:22px;background:var(--card);box-shadow:var(--neu-out)}
.case-biz{margin:0 0 14px;font-weight:600;color:var(--ink)}
.case-steps{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.case-steps dt{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.case-steps dd{margin:0;color:var(--ink-2)}
.case-result{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--accent-ink)}
.review blockquote{margin:0}
.review blockquote p{margin:0;font-size:1.05rem;line-height:1.55;color:var(--ink)}
.review figcaption{margin-top:14px;font-size:.875rem;color:var(--ink-3)}
@media (max-width:760px){.person{grid-template-columns:minmax(0,1fr)}.person-photo{max-width:320px}}

/* ================================================================
   Modo claro en tono perla/crema (menos brillante que el blanco)
   El modo oscuro no cambia.
   ================================================================ */
:root{
  --bg:#F4F1EA;--bg-soft:#F4F1EA;--bg-dot:#F4F1EA;
  --card:#FAF8F3;--neu:#FAF8F3;--btn2:#FAF8F3;--btn2-hover:#F1EDE4;
  --line:#E5E0D5;--line-2:#D6D0C3;
  --header-bg:rgba(244,241,234,.9);--glass:rgba(244,241,234,.56);--glass-strong:rgba(244,241,234,.96);
  --pill-bg:rgba(250,248,243,.94);
  --grid:rgba(60,50,30,.07);
}
:root:not([data-theme="dark"]) .toast{background:#FAF8F3}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tile-chat .mc.in{background:#FFFDF8}}
:root[data-theme="light"] .tile-chat .mc.in{background:#FFFDF8}


/* ================================================================
   Planes seleccionables con detalle
   ================================================================ */
.plan[data-plan]{cursor:pointer}
.plan[data-plan]:hover{box-shadow:0 0 0 1px var(--line-2),0 6px 18px rgba(24,24,27,.06)}
.plan.plan-featured:not(.is-selected){box-shadow:var(--neu-out)}
.plan.is-selected,.plan.is-selected:hover{box-shadow:inset 0 0 0 2px var(--accent),0 12px 30px rgba(5,150,105,.12)}
.plan-choose .ico{width:18px;height:18px}
.plan-detail{margin-top:24px}
.pd{padding:clamp(24px,3.5vw,40px);border-radius:28px;background:var(--card);box-shadow:var(--neu-out)}
.pd-head .eyebrow{margin-bottom:8px;color:var(--accent-ink)}
.pd-head h3{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);font-weight:600;letter-spacing:-0.01em}
.pd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:28px}
.pd-grid h4{margin:0 0 8px;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pd-grid p{margin:0;color:var(--ink-2);line-height:1.6}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.pd:not([hidden]){animation:pd-in .35s ease}
@keyframes pd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1020px){.pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pd-grid{grid-template-columns:minmax(0,1fr)}.pd-actions .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.pd:not([hidden]){animation:none}}

/* ================================================================
   Logo NodePeak: la versión clara y la oscura se turnan según el modo
   ================================================================ */
.brand{gap:0}
.brand-logo{display:block;width:auto;height:30px}
.brand-logo--oscuro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-logo--claro{display:none}
  :root:not([data-theme="light"]) .brand-logo--oscuro{display:block}
}
:root[data-theme="dark"] .brand-logo--claro{display:none}
:root[data-theme="dark"] .brand-logo--oscuro{display:block}
.f-about .brand-logo{height:36px}
@media (max-width:639px){.header-bar .brand-logo{height:24px}}
@media (max-width:400px){.header-bar .brand-logo{height:21px}}