@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
    @font-face{font-family:'Inter';src:url('/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
    @font-face{font-family:'Inter';src:url('/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
    @font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
    @font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
    @font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
    :root{
      --bg:#FFFFFF;--alt:#F6F9FC;--panel:#FFFFFF;--ink:#0B1B2B;--body:#42566B;--dim:#5F7085;
      --line:#E3EAF2;--teal:#0F766E;--petrol:#0F766E;--teal2:#14B8A6;--teal-soft:#E6FAF7;--wa:#25D366;--wa-ink:#053B1D;
      --warn:#F7931A;--ff:'Inter',system-ui,sans-serif;--ffd:'Space Grotesk','Inter',sans-serif;
      --sh:0 1px 2px rgba(11,27,43,.04),0 8px 24px rgba(11,27,43,.06);
      --sh2:0 2px 6px rgba(11,27,43,.06),0 16px 40px rgba(11,27,43,.10);
      /* --- Accesibilidad: escala tipografica y area tactil (WCAG 2.2) ---
         Piso de 14px en texto secundario y 16px en texto base; todo en rem
         para que respete el tamano que el usuario fije en su navegador.
         Los controles crecen con min-height, nunca con alto fijo. */
      --fs-label:.9375rem;  /* 15px */
      --fs-sm:1rem;         /* 16px */
      --fs-base:1.0625rem;  /* 17px */
      --fs-lead:clamp(1.0625rem,1rem + .35vw,1.1875rem);
      --focus:#0F766E;--focus-on-dark:#B9E9E1;
      --tap:24px;--tap-touch:44px;
      /* Ritmo vertical (D5): las 16 bandas medidas devolvian pt=64 pb=64 sin
         una sola excepcion — un peine plano donde ninguna seccion se lee
         como capitulo. */
      --step-1:56px;--step-2:76px;--step-3:112px}
    *{box-sizing:border-box;margin:0}
    html{scroll-behavior:smooth;font-size:100%;-webkit-text-size-adjust:100%}
    body{background:var(--bg);color:var(--body);font-family:var(--ff);line-height:1.55;font-size:var(--fs-base);-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    img{max-width:100%}
    /* Anillo de foco visible en el 100% de los controles. Nunca outline:none
       sin sustituto; sobre banda oscura solo cambia la tinta. */
    :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
    .final :focus-visible,.nv-head :focus-visible{outline-color:var(--focus-on-dark)}
    .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
    header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
    .nav{display:flex;align-items:center;gap:22px;height:66px}
    .brand{display:flex;align-items:center;gap:10px;min-height:var(--tap-touch);font-family:var(--ffd);font-weight:700;font-size:1.1875rem;color:var(--ink)}
    .brand img{width:30px;height:30px}
    .brand .oz{color:var(--teal)}
    .nav-links{display:flex;gap:16px;font-size:.875rem;font-weight:500;color:var(--body);align-items:center}
    /* Cada enlace del menu es objetivo tactil por si mismo: min-height mas
       relleno, nunca un alto fijo que volveria a fallar con texto grande. */
    .nav-links>a{display:inline-flex;align-items:center;min-height:var(--tap);padding:5px 2px;white-space:nowrap}
    .nav-links>a:hover{color:var(--teal)}
    .sp{flex:1}
    .wa-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-touch);background:var(--wa);color:var(--wa-ink);font-weight:700;padding:10px 18px;border-radius:999px;font-size:.875rem;white-space:nowrap;box-shadow:var(--sh)}
    .wa-btn:hover{filter:brightness(1.04)}
    /* dropdowns de navegacion (CSS puro) */
    .dd{position:relative}
    .dd>button{background:none;border:none;font:inherit;font-weight:500;color:var(--body);cursor:pointer;padding:5px 2px;min-height:var(--tap);display:flex;align-items:center;gap:4px}
    .dd>button:after{content:"▾";font-size:.75rem;color:var(--dim)}
    .dd>button:hover{color:var(--teal)}
    .dd-menu{position:absolute;top:calc(100% + 12px);left:-14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:8px;min-width:250px;display:none;z-index:60}
    .dd-menu:before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
    .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
    .dd-menu a{display:block;padding:10px 12px;border-radius:9px;font-size:var(--fs-label);color:var(--body)}
    .dd-menu a:hover{background:var(--teal-soft);color:var(--teal)}
    .dd-menu a b{display:block;color:var(--ink);font-size:var(--fs-sm);font-weight:600}
    /* menu movil */
    .mnav{display:none;position:relative}
    /* 44x44 reales sin tocar el display del <summary>: se llega con relleno
       y alto de linea. Cambiar display en un summary ha roto el desplegable
       nativo en versiones de Safari, y aqui no hace falta. */
    .mnav summary{list-style:none;cursor:pointer;font-size:1.375rem;color:var(--ink);padding:9px 12px;border:1px solid var(--line);border-radius:10px;line-height:1.2;min-width:var(--tap-touch);min-height:var(--tap-touch);text-align:center}
    .mnav summary::-webkit-details-marker{display:none}
    .mnav[open] .mnav-panel{display:flex}
    .mnav-panel{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:12px;min-width:240px;display:none;flex-direction:column;z-index:70;max-height:calc(100vh - 100px);overflow:auto}
    .mnav-panel a{display:flex;align-items:center;min-height:var(--tap-touch);padding:10px;border-radius:8px;font-size:var(--fs-sm);color:var(--body)}
    .mnav-panel a:hover{background:var(--teal-soft);color:var(--teal)}
    .mnav-panel .mh{font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding:10px 10px 2px}
    @media(max-width:1120px){.nav-links{display:none}.mnav{display:block}
    /* El panel se ancla a la CABECERA, no al <details>. El boton de menu no
       esta pegado al borde derecho (el boton de WhatsApp va despues), asi que
       un `right:0` medido desde .mnav sacaba el panel por la izquierda y
       cortaba los rotulos por debajo de 430px. Con .mnav en static el bloque
       contenedor pasa a ser <header> -su backdrop-filter ya lo hacia bloque
       contenedor- y right:24px lo alinea con el resto del contenido. */
    .mnav{position:static}
    .mnav-panel{right:24px;left:auto;top:calc(100% + 10px);
      width:min(320px,calc(100vw - 48px));min-width:0}}
    /* En movil el boton de la cabecera ya no encoge la letra por debajo del
       piso: conserva 14px y 44px de alto, y se le permite partir en dos
       lineas para no empujar al boton de menu fuera de la pantalla. */
    @media(max-width:480px){
      .nav{gap:10px}
      .brand{font-size:1.0625rem}
      .brand img{width:26px;height:26px}
      .wa-btn{padding:8px 12px;font-size:.875rem;white-space:normal;text-align:center;line-height:1.25}
    }
    .hero{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"head head" "copy viz";column-gap:44px;row-gap:6px;align-items:start;padding:56px 24px 52px;position:relative;isolation:isolate}
    .hero-head{grid-area:head;max-width:none;margin-bottom:18px}
    .hero-copy{grid-area:copy;align-self:start}
    .hero .flowin{grid-area:viz}
    @media(max-width:900px){.hero{grid-template-columns:1fr;grid-template-areas:"head" "copy" "viz";padding:44px 24px 36px}
      .hero-head{margin-bottom:18px}}
    .k{display:inline-block;background:var(--teal-soft);color:var(--teal);font-weight:700;font-size:var(--fs-label);letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
    h1{font-family:var(--ffd);font-weight:700;color:var(--ink);font-size:clamp(2.25rem,5.2vw,3.75rem);line-height:1.02;letter-spacing:-.022em;margin:14px 0 0;text-wrap:balance}
    h1 .hl{color:var(--teal)}
    .sub{font-size:clamp(1.0625rem,1rem + .35vw,1.125rem);max-width:56ch;color:var(--body)}
    .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-touch);background:var(--wa);color:var(--wa-ink);font-weight:700;padding:15px 26px;border-radius:999px;font-size:var(--fs-base);box-shadow:var(--sh2)}
    .btn:hover{filter:brightness(1.04)}
    .btn2{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-touch);background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:600;padding:14px 24px;border-radius:999px;font-size:var(--fs-base)}
    .btn2:hover{border-color:var(--teal);color:var(--teal)}
    .hero-note{font-size:var(--fs-label);color:var(--dim);margin-top:14px}
    .hero-note b{color:var(--body)}
    /* ---------- flujo en vivo (ventanas animadas) ---------- */
    .flowin{background:linear-gradient(160deg,#EAF7F4,#F2F7FD);border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:var(--sh2)}
    .fwin{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
    .fw-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:#FBFDFF}
    .fw-dots i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px}
    .fw-title{font-size:var(--fs-label);font-weight:600;color:var(--body);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .fw-live{font-size:var(--fs-label);color:var(--teal);font-weight:800;display:flex;align-items:center;gap:5px;letter-spacing:.04em}
    .fw-live i{width:7px;height:7px;border-radius:50%;background:var(--wa);animation:fblink 1.4s infinite}
    @keyframes fblink{0%,100%{opacity:1}50%{opacity:.25}}
    .fw-b{padding:13px 15px;display:flex;flex-direction:column}
    .fnode{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--line);border-radius:13px;padding:9px 12px;background:#fff;transition:all .35s;opacity:.5}
    .fnode .fic{width:38px;height:38px;border-radius:10px;background:var(--alt);display:flex;align-items:center;justify-content:center;flex:none}
    .fnode .fic svg,.fnode .fic img{width:24px;height:24px}
    .fnode b{display:block;font-size:1.0625rem;color:var(--ink);font-family:var(--ffd);line-height:1.25}
    .fnode .fst{font-size:var(--fs-label);color:var(--dim);display:block;margin-top:1px}
    .fnode.run{opacity:1;border-color:var(--teal);box-shadow:0 4px 18px rgba(15,118,110,.18);transform:translateX(3px)}
    .fnode.run .fst{color:var(--teal);font-weight:600}
    .fnode.done{opacity:1}
    .fnode.done .fst{color:#15803D;font-weight:600}
    .fline{width:2px;height:16px;margin-left:30px;background:repeating-linear-gradient(180deg,#B9C6D4 0 4px,transparent 4px 9px);position:relative;flex:none}
    .fline::after{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:0}
    .fline.go::after{animation:ftravel .55s linear forwards}
    @keyframes ftravel{0%{top:-4px;opacity:1}100%{top:14px;opacity:0}}
    .fapr{display:flex;gap:7px;margin-top:6px}
    .fbtn{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-label);font-weight:700;border-radius:8px;padding:4px 11px;border:1.5px solid var(--line);color:var(--dim);background:#fff;transition:.25s}
    .fbtn.ok.hit{background:var(--wa);color:#04220f;border-color:var(--wa);transform:scale(1.06)}
    .fres{margin-top:11px;background:linear-gradient(135deg,#E9FBF3,#F0FBF9);border:1.5px solid rgba(37,211,102,.45);border-radius:13px;padding:11px 14px;font-size:var(--fs-label);color:var(--ink);opacity:0;transform:translateY(6px);transition:.45s}
    .fres.on{opacity:1;transform:none}
    .fw-note{font-size:var(--fs-label);color:var(--dim);padding:10px 14px;border-top:1px solid var(--line);background:#FBFDFF}
    @media(prefers-reduced-motion:reduce){.fw-live i{animation:none}.fnode.run{transform:none}}
    .band{background:#0B1B2B;border-block:none;padding:44px 0}
    .band-m{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
    /* Contrastes verificados sobre #0B1B2B: blanco 17,41:1 · #A9BCCE 8,93:1 ·
       #7BE7DA >10:1. --teal da 3,18:1 aqui y NO puede usarse para texto. */
    .bm-n b{display:block;font-family:var(--ffd);font-size:clamp(2.25rem,4vw,2.75rem);line-height:1.05;letter-spacing:-.02em;color:#FFFFFF;text-wrap:balance}
    .bm-src{display:block;margin-top:8px;font-size:var(--fs-label);color:#A9BCCE;max-width:46ch}
    .bm-n .more{margin-top:8px;font-size:var(--fs-sm);color:#7BE7DA}
    .bm-cap{list-style:none;padding:0;display:grid;gap:10px;font-size:var(--fs-sm);color:#D6E2EC}
    .bm-cap li{display:flex;gap:9px;align-items:flex-start}
    .bm-cap li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:#7BE7DA}
    @media(max-width:820px){.band-m{grid-template-columns:1fr;gap:22px}}
    section{padding:var(--step-2) 0}
    .sec-k{color:var(--teal);font-weight:700;font-size:var(--fs-label);letter-spacing:.05em;text-transform:uppercase}
    h2{font-family:var(--ffd);font-weight:700;color:var(--ink);font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.10;letter-spacing:-.016em;max-width:26ch;margin:10px 0 12px;text-wrap:balance}
    .final h2{max-width:20ch;margin-inline:auto}
    .sec-sub{font-size:var(--fs-lead);max-width:54ch;margin-bottom:34px}
    /* ---------- tarjetas de beneficios / prueba ---------- */
    .pil{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
    .pi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--sh);display:flex;flex-direction:column}
    .pi .ic{width:40px;height:40px;border-radius:10px;background:var(--teal-soft);display:flex;align-items:center;justify-content:center}
    .pi .ic svg{width:22px;height:22px}
    .pi h3{font-family:var(--ffd);color:var(--ink);font-size:1.1875rem;line-height:1.28;letter-spacing:-.01em;margin:12px 0 6px}
    .pi p{font-size:var(--fs-sm)}
    .wtick{color:var(--teal);font-weight:700}
    /* ---------- hub corporativo: tecnologías + robot ---------- */
    .demo-grid{grid-template-columns:1fr minmax(400px,.82fr);align-items:center;gap:clamp(48px,7vw,110px);display:grid;margin-top:8px}
    .techviz{min-width:0}
    .tv-hub{width:100%;height:auto;display:block;overflow:visible}
    .tv-ring{fill:none;stroke:var(--teal);stroke-width:1.1;opacity:.26;stroke-dasharray:5 9;animation:tvSpin 30s linear infinite}
    .tv-ring-b{opacity:.16;stroke-dasharray:3 11;animation-duration:44s;animation-direction:reverse}
    @keyframes tvSpin{to{stroke-dashoffset:-280}}
    .tv-wire{stroke:var(--teal);stroke-width:1.9;fill:none;opacity:.3;stroke-dasharray:20 118;stroke-dashoffset:138;animation:tvFlow 4.8s linear infinite}
    .tv-wires .tv-wire:nth-child(1){animation-delay:0s}
    .tv-wires .tv-wire:nth-child(2){animation-delay:.6s}
    .tv-wires .tv-wire:nth-child(3){animation-delay:1.2s}
    .tv-wires .tv-wire:nth-child(4){animation-delay:1.8s}
    .tv-wires .tv-wire:nth-child(5){animation-delay:2.4s}
    .tv-wires .tv-wire:nth-child(6){animation-delay:3s}
    .tv-wires .tv-wire:nth-child(7){animation-delay:3.6s}
    .tv-wires .tv-wire:nth-child(8){animation-delay:4.2s}
    @keyframes tvFlow{0%{stroke-dashoffset:138;opacity:.14}20%{opacity:.95}70%{opacity:.95}100%{stroke-dashoffset:0;opacity:.14}}
    .tv-tile{fill:#fff;stroke:var(--line);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:tvWake 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .6s)}
    @keyframes tvWake{0%,100%{stroke:var(--line);transform:scale(1)}10%,20%{stroke:var(--warn);transform:scale(1.09)}}
    .tv-lab{font-family:var(--ffd);font-size:12.5px;font-weight:650;fill:#42566B}
    .tv-sat:hover .tv-tile{stroke:var(--teal);stroke-width:2;animation:none;transform:scale(1.09)}
    .tv-mq{overflow:hidden;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
    .tv-track{display:flex;gap:10px;width:max-content;animation:tvMq 46s linear infinite}
    .tv-mq:hover .tv-track{animation-play-state:paused}
    @keyframes tvMq{to{transform:translateX(-50%)}}
    .tv-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:var(--fs-label);font-weight:600;color:var(--ink);white-space:nowrap}
    .tv-d{width:9px;height:9px;border-radius:50%;flex:none}
    .tv-note{margin-top:16px;font-size:var(--fs-sm);color:var(--dim);line-height:1.6;max-width:52ch}
    .tv-chip svg{width:18px;height:18px;flex:none}
    .tv-mq{margin-top:12px}
    .tv-mq-rev .tv-track{animation-direction:reverse;animation-duration:40s}
    .tv-mq-t{margin:22px 0 0;font-size:var(--fs-sm);color:var(--body);max-width:56ch}
    .tv-mq-t b{color:var(--ink)}
    @media(max-width:1180px){.demo-grid{grid-template-columns:1fr;gap:44px}}
    @media(max-width:980px){.tv-lab{font-size:15px}}
    @media(max-width:720px){.demo-grid{min-width:0}}
    @media(max-width:640px){.demo-grid{grid-template-columns:minmax(0,1fr)}.fw-title{white-space:normal}}
    @media(prefers-reduced-motion:reduce){.tv-wire{stroke-dasharray:none;stroke-dashoffset:0;opacity:.45}}
    /* ---------- robot NOVA (acento cyan exclusivo del personaje) ---------- */
    .rb{--rb-cyan:#20c8e4;--rb-soft:#7fe3f4;--rb-screen:#0c1a2b;--rb-ink:#0B1B2B}
    .rb-float{transform-box:fill-box;transform-origin:center;animation:rb-float 5.6s ease-in-out infinite}
    @keyframes rb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    .rb-aura{fill:var(--rb-cyan);opacity:.13;transform-box:fill-box;transform-origin:center;animation:rb-breathe 4.6s ease-in-out infinite}
    @keyframes rb-breathe{0%,100%{opacity:.10;transform:scale(1)}50%{opacity:.20;transform:scale(1.05)}}
    .rb-shell{fill:#fff;stroke:var(--rb-ink);stroke-width:2.2}
    .rb-hi{fill:#ffffff;opacity:.55}
    .rb-brow{fill:var(--rb-screen)}
    .rb-stalk{stroke:#b6c1c7;stroke-width:3.4;stroke-linecap:round}
    .rb-cone{fill:#b6c1c7}
    .rb-ball{fill:var(--rb-cyan)}
    .rb-ballhi{fill:#eafaff}
    .rb-ballglow{fill:var(--rb-cyan);opacity:.4;transform-box:fill-box;transform-origin:center;animation:rb-ping 2.2s ease-out infinite}
    @keyframes rb-ping{0%{transform:scale(.65);opacity:.6}70%,100%{transform:scale(1.8);opacity:0}}
    .rb-screen{fill:var(--rb-screen)}
    .rb-trace{fill:none;stroke:var(--rb-cyan);stroke-width:1.5;stroke-linecap:round;opacity:.6;stroke-dasharray:5 9;animation:rb-flow 3.4s linear infinite}
    .rb-trace-2{animation-delay:.85s}.rb-trace-3{animation-delay:1.7s}.rb-trace-4{animation-delay:2.55s}
    @keyframes rb-flow{to{stroke-dashoffset:-28}}
    .rb-dot{fill:var(--rb-cyan)}
    .rb-eyeglow{fill:var(--rb-cyan);opacity:.28;transform-box:fill-box;transform-origin:center;animation:rb-breathe 3s ease-in-out infinite}
    .rb-eye{transform-box:fill-box;transform-origin:center;animation:rb-blink 4.2s ease-in-out infinite}
    .rb-eye-2{animation-delay:.06s}
    @keyframes rb-blink{0%,45%,100%{transform:scaleY(1)}48%,51%{transform:scaleY(.12)}}
    .rb-iris{fill:var(--rb-cyan)}
    .rb-pupil{fill:#06131f}
    .rb-eyehi{fill:#eafaff}
    .rb-smile{fill:none;stroke:var(--rb-cyan);stroke-width:4.2;stroke-linecap:round}
    .rb-glowlight{fill:var(--rb-cyan);animation:rb-glow 2.6s ease-in-out infinite}
    .rb-glowlight-2{animation-delay:1.3s}
    @keyframes rb-glow{0%,100%{opacity:.5}50%{opacity:1}}
    .rb-ear{fill:#e3e9ec;stroke:#95a3aa;stroke-width:2}
    .rb-earring{fill:#c2ccd2;stroke:#95a3aa;stroke-width:1.6}
    .rb-chin{fill:#e3e9ec;stroke:#95a3aa;stroke-width:2}
    .rb-cejaline{fill:none;stroke:var(--rb-cyan);stroke-width:3.4;stroke-linecap:round}
    .rb-ceja{transform-box:fill-box;transform-origin:center;animation:rb-ceja 4.2s ease-in-out infinite}
    @keyframes rb-ceja{0%,42%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
    .rb-halo{fill:none;stroke:var(--rb-cyan);stroke-width:2.4;opacity:.5;transform-box:fill-box;transform-origin:center;animation:rb-halo 6s ease-in-out infinite}
    @keyframes rb-halo{0%,100%{transform:rotate(-9deg) scale(1);opacity:.38}50%{transform:rotate(9deg) scale(1.1);opacity:.75}}
    @media(prefers-reduced-motion:reduce){
      .rb-float,.rb-aura,.rb-ballglow,.rb-trace,.rb-eyeglow,.rb-eye,.rb-glowlight,
      .rb-ceja,.rb-halo{animation:none !important;transform:none !important}
      .rb-halo{opacity:.5 !important}
      .rb-aura{opacity:.14 !important}.rb-eyeglow{opacity:.26 !important}
      .rb-glowlight{opacity:.9 !important}.rb-trace{opacity:.55 !important}
    }
    /* ---------- banda Power Automate ---------- */
    .pa-band{background:linear-gradient(135deg,#E6FAF7,#F2F7FD);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:38px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
    .pa-band b{font-family:var(--ffd);color:var(--ink);font-size:1.1875rem;display:block;margin-bottom:2px}
    .pa-band span{font-size:var(--fs-sm);color:var(--body);max-width:64ch;display:block}
    .pa-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-touch);background:var(--teal);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px;font-size:var(--fs-sm);white-space:nowrap;box-shadow:var(--sh)}
    .pa-btn:hover{filter:brightness(1.06)}
    @media(max-width:560px){.pa-btn{white-space:normal;text-align:center}}
    /* ---------- tarjetas de solución ---------- */
    .ags{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
    .ag{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh);display:flex;flex-direction:column}
    .ag-top{display:flex;align-items:center;gap:12px}
    .ag-ic{background:var(--teal-soft);border-radius:12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:none}
    .ag-ic svg{width:24px;height:24px}
    .ag h3{font-family:var(--ffd);color:var(--ink);font-size:1.1875rem;line-height:1.28;letter-spacing:-.01em;line-height:1.25}
    .ag p{font-size:var(--fs-sm);margin:12px 0 14px}
    .ag-tier{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-label);color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
    .ag-tier b{color:var(--teal);font-size:var(--fs-sm)}
    .ag:hover{border-color:var(--teal);box-shadow:var(--sh2)}
    /* "Conocer ->" y demas enlaces de avance: median 23px de alto. */
    .more{margin-top:22px;font-weight:600;color:var(--teal);font-size:var(--fs-base);display:inline-flex;align-items:center;min-height:var(--tap)}
    .steps3{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;counter-reset:paso;margin-top:10px}
    @media(max-width:1120px){.steps3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
      .st{padding:24px}}
    .st{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--sh);position:relative}
    .st:before{counter-increment:paso;content:counter(paso);position:absolute;top:-14px;left:20px;background:var(--teal);color:#fff;font-family:var(--ffd);font-weight:700;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem}
    .st h3{font-family:var(--ffd);color:var(--ink);font-size:1.1875rem;line-height:1.28;letter-spacing:-.01em;margin:8px 0 6px}
    .st p{font-size:var(--fs-sm)}
    .gar{display:flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--teal);border-radius:999px;padding:8px 15px;font-size:var(--fs-label);font-weight:600}
    .cases3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
    .cs{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh)}
    .cs .cb{padding:15px 17px}
    .cs b{font-family:var(--ffd);color:var(--ink);font-size:1.125rem}
    .cs p{font-size:var(--fs-sm);margin-top:4px}
    .cs .thumb{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E8F7F4,#EDF3FB)}
    .cs .thumb svg{width:58px;height:58px}
    /* caso real estructurado */
    .case-real{background:#fff;border:1.5px solid rgba(37,211,102,.45);border-radius:18px;padding:26px 28px;box-shadow:var(--sh)}
    .cr-tag{display:inline-block;background:#E9FBF3;color:#0F7A3D;font-size:var(--fs-label);font-weight:800;letter-spacing:.05em;padding:5px 12px;border-radius:20px}
    .case-real h3{font-family:var(--ffd);color:var(--ink);font-size:1.375rem;line-height:1.24;margin:10px 0 14px}
    .cr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-bottom:14px}
    .cr-grid b{display:block;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
    .cr-grid span{font-size:var(--fs-sm);color:var(--ink)}
    /* seguridad */
    .seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:8px}
    .seg{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-size:var(--fs-sm)}
    .seg .si{width:32px;height:32px;border-radius:9px;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;flex:none}
    .seg .si svg{width:18px;height:18px}
    .seg b{color:var(--ink)}
    /* ---------- inteligencia competitiva ---------- */
    .ic-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
    @media(max-width:880px){.ic-grid{grid-template-columns:1fr}}
    .ic-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
    .ic-list li{display:flex;gap:10px;font-size:var(--fs-base);align-items:flex-start}
    .ic-list .wtick{flex:none}
    .ic-list b{color:var(--ink)}
    .icwin{background:linear-gradient(160deg,#EAF7F4,#F2F7FD);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--sh2)}
    .icw-in{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
    .icw-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:#FBFDFF}
    .ica{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
    .ica:last-child{border-bottom:none}
    .ica .em{width:30px;height:30px;border-radius:8px;background:var(--alt);display:flex;align-items:center;justify-content:center;flex:none}
    .ica .em svg{width:17px;height:17px}
    .ica b{display:block;color:var(--ink);font-size:1.0625rem;font-family:var(--ffd);line-height:1.3}
    .ica span{font-size:var(--fs-label);color:var(--dim)}
    .ica.hot{background:#FFF9F0}
    .ica.hot .em{background:#FFF3E0}
    .icw-note{font-size:var(--fs-label);color:var(--dim);padding:10px 14px;border-top:1px solid var(--line);background:#FBFDFF}
    .ic-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .ic-tools{font-size:var(--fs-sm);color:var(--dim);margin-top:16px;max-width:80ch}
    .ic-tools b{color:var(--body)}
    .fund{display:flex;gap:24px;align-items:center;background:var(--alt);border:1px solid var(--line);border-radius:18px;padding:28px;flex-wrap:wrap}
    .fund img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--sh)}
    .fund b{font-family:var(--ffd);color:var(--ink);font-size:1.1875rem;display:block}
    .fund .rol{color:var(--teal);font-size:var(--fs-sm);font-weight:600;margin-bottom:6px;display:block}
    .fund p{font-size:var(--fs-base);max-width:64ch}
    .fund a{color:var(--teal);font-weight:600}
    .pi .more{margin-top:10px;font-size:var(--fs-sm)}
    .faq details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;box-shadow:var(--sh)}
    .faq summary{padding:17px 20px;min-height:var(--tap-touch);cursor:pointer;font-weight:600;color:var(--ink);font-size:var(--fs-base);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";color:var(--teal);font-family:var(--ffd);font-size:20px;line-height:1}
    .faq details[open] summary:after{content:"–"}
    .faq .fa{padding:0 20px 17px;font-size:var(--fs-sm);max-width:75ch}
    .final{background:linear-gradient(135deg,#0F766E,#0B7A70);border-radius:22px;color:#fff;text-align:center;padding:52px 28px;margin-bottom:8px}
    .final h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem)}
    .final p{color:#D9F5F1;font-size:var(--fs-lead);max-width:56ch;margin:8px auto 24px}
    .final .btn{box-shadow:0 10px 30px rgba(0,0,0,.22)}
    footer{border-top:1px solid var(--line);padding:34px 0;font-size:var(--fs-sm);color:var(--dim);background:var(--alt)}
    .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:22px}
    @media(max-width:760px){.fg{grid-template-columns:1fr 1fr}}
    footer b{color:var(--ink);font-size:var(--fs-label);display:block;margin-bottom:8px;font-family:var(--ffd)}
    /* Los enlaces del pie median 22px de alto: ahora el enlace mismo es el
       objetivo tactil, 24px en escritorio y 44px con dedo. */
    footer a{display:flex;align-items:center;min-height:var(--tap);margin:2px 0;color:var(--dim)}
    footer a:hover{color:var(--teal)}
    .fbrand{display:flex;align-items:center;gap:9px;font-family:var(--ffd);font-weight:700;color:var(--ink);margin-bottom:8px}
    .fbrand img{width:24px;height:24px}
    .copy{margin-top:22px;font-size:var(--fs-label);color:var(--dim)}
    /* padding-block agranda el rectangulo de toque del enlace en linea sin
       mover la linea base ni el alto de la linea. */
    .copy a{padding-block:5px}
    .fsoc{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
    .fsoc-lbl{font-size:var(--fs-label);color:var(--dim);margin-right:2px}
    footer .fsoc a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;border:1px solid var(--line);border-radius:9px;color:var(--dim);background:var(--panel);transition:color .18s ease,border-color .18s ease}
    footer .fsoc a:hover,footer .fsoc a:focus-visible{color:var(--teal);border-color:var(--teal)}
    .fsoc svg{width:17px;height:17px;display:block}
    .fsoc+.copy{margin-top:16px}
    /* ---------- NOVA (chat del sitio, tema claro) ---------- */
    #nova{position:fixed;right:20px;bottom:20px;z-index:90;font-family:var(--ff)}
    #nova .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}
    .nv-fab{position:relative;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:var(--teal);box-shadow:0 6px 22px rgba(15,118,110,.35);display:flex;align-items:center;justify-content:center;animation:nvBob 3.6s ease-in-out infinite}
    .nv-fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--teal);animation:nvPulse 2.2s ease-out infinite;pointer-events:none}
    .nv-fab img{width:44px;height:44px;border-radius:50%;background:#fff;padding:3px;animation:nvWave 7s ease-in-out infinite}
    .nv-fab:hover{filter:brightness(1.06)}
    .nv-dot{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:var(--wa);border:2.5px solid #fff}
    @keyframes nvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    @keyframes nvPulse{0%{transform:scale(1);opacity:.75}75%,100%{transform:scale(1.7);opacity:0}}
    @keyframes nvWave{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-10deg)}94%{transform:rotate(10deg)}}
    @media(prefers-reduced-motion:reduce){.nv-fab{animation:none}.nv-fab::before{animation:none;opacity:0}.nv-fab img{animation:none}}
    .nv-panel{position:absolute;right:0;bottom:76px;width:min(370px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 60px rgba(11,27,43,.22);overflow:hidden;display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 120px))}
    .nv-panel[hidden]{display:none}
    .nv-head{display:flex;align-items:center;justify-content:space-between;background:var(--teal);color:#fff;padding:12px 16px;font-size:var(--fs-label);font-weight:600}
    .nv-x{background:none;border:none;color:#fff;font-size:1rem;cursor:pointer;padding:2px 6px;border-radius:6px;min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
    .nv-x:hover{background:rgba(255,255,255,.18)}
    .nv-note{font-size:var(--fs-label);color:var(--dim);padding:9px 16px;border-bottom:1px solid var(--line);background:var(--alt);margin:0}
    .nv-log{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;min-height:180px}
    .nv-msg{display:flex;gap:8px;align-items:flex-end}
    .nv-msg p{margin:0;padding:9px 13px;border-radius:13px;font-size:var(--fs-sm);line-height:1.5;max-width:85%}
    .nv-bot p{background:var(--alt);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
    .nv-bot p a{color:var(--teal);font-weight:600}
    .nv-user{justify-content:flex-end}
    .nv-user p{background:var(--teal);color:#fff;border-bottom-right-radius:4px}
    .nv-ava{width:24px;height:24px;border-radius:50%;background:var(--teal-soft);padding:2px;flex:none}
    .nv-dots{display:inline-flex;gap:4px;padding:2px 0}
    .nv-dots i{width:6px;height:6px;border-radius:50%;background:var(--teal2);animation:nvBlink 1.2s infinite}
    .nv-dots i:nth-child(2){animation-delay:.2s}.nv-dots i:nth-child(3){animation-delay:.4s}
    @keyframes nvBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
    .nv-chips{display:flex;flex-wrap:wrap;gap:7px;padding:8px 14px}
    .nv-chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 13px;min-height:var(--tap);font-size:var(--fs-label);color:var(--teal);cursor:pointer;font-weight:600}
    .nv-chip:hover{border-color:var(--teal);background:var(--teal-soft)}
    .nv-input{display:flex;gap:8px;padding:11px 13px;border-top:1px solid var(--line);background:#fff}
    /* 16px en el campo: por debajo de eso Safari en iPhone hace zoom al
       enfocar y descoloca la pagina. */
    .nv-input input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;min-height:var(--tap-touch);font-size:var(--fs-base);font-family:var(--ff);color:var(--ink);outline:none;background:#fff}
    .nv-input input:focus{border-color:var(--teal)}
    /* outline:none arriba: aqui se le devuelve un anillo propio. */
    .nv-input input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
    .nv-send{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:0 16px;min-height:var(--tap-touch);font-size:var(--fs-label);font-weight:700;cursor:pointer}
    .nv-send:hover{filter:brightness(1.06)}
    .nv-hint{position:absolute;right:74px;bottom:8px;background:#fff;border:1px solid var(--line);border-radius:14px;border-bottom-right-radius:4px;box-shadow:var(--sh2);padding:11px 15px;min-height:var(--tap-touch);font-size:var(--fs-label);color:var(--body);cursor:pointer;text-align:left;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.3s}
    .nv-hint.on{opacity:1;transform:none}
    .nv-hint b{display:block;color:var(--ink);font-family:var(--ffd);font-size:var(--fs-sm)}
    .skip-link{position:fixed;top:12px;left:12px;z-index:300;background:#0B7A70;color:#FFFFFF;padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .16s ease-out}
    .skip-link:focus{transform:translateY(0)}
    #contenido:focus{outline:none}
    @media(prefers-reduced-motion:reduce){.skip-link{transition:none}}
    /* ============================================================
       AREA TACTIL EN PANTALLA DE DEDO (WCAG 2.2 SC 2.5.5, AAA)
       En escritorio el minimo es 24x24 (SC 2.5.8, AA); en pantalla
       tactil sube a 44x44. Se consulta tambien el puntero grueso,
       para que un portatil tactil reciba el objetivo grande.
       Siempre min-height/min-width, nunca height fijo.
       ============================================================ */
    @media (max-width:820px),(pointer:coarse){
      .nav-links>a,.dd>button,footer a,.more,.pi .more,
      .nv-chip,.nv-x{min-height:var(--tap-touch)}
      footer .fsoc a{width:var(--tap-touch);height:var(--tap-touch)}
    }
    /* Enlaces dentro del texto corrido: padding-block agranda su
       rectangulo de toque sin mover la linea base ni el interlineado.
       No se suben a 44px porque en un parrafo los rectangulos de
       lineas contiguas se solaparian y el toque erraria de destino;
       la SC 2.5.8 exceptua precisamente este caso. */
    .sec-sub a,.fa a,.copy a,.ic-list a,.ag p a,.pa-band span a,.seg a,.cs p a,
    section p a:not([class]){padding-block:4px}
  /* --- Testimonios ---------------------------------------------------------
   Cita primero, firma despues: el lector juzga el contenido antes de saber
   quien lo dijo, que es como se leen de verdad. Sin comillas decorativas ni
   fotos: no hay retratos autorizados y una silueta generica seria relleno. */
.tst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:20px;margin-top:28px}
.tst{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;display:flex;flex-direction:column;gap:16px;break-inside:avoid}
.tst blockquote{margin:0;flex:1}
.tst blockquote p{margin:0;font-size:1.25rem;line-height:1.45;font-weight:600;color:var(--body)}
.tst figcaption{display:flex;flex-direction:column;gap:2px;padding-top:14px;
  border-top:1px solid var(--line)}
.tst figcaption b{color:var(--ink);font-size:1rem}
.tst figcaption span{color:var(--dim);font-size:.875rem}
@media(max-width:640px){.tst{padding:18px 18px}}
.tst-mas{margin-top:22px}
.tst-mas a{font-weight:600}

/* --- Carrusel de testimonios --------------------------------------------
   Movimiento lento y continuo. Tres cosas que un carrusel de texto necesita y
   uno de iconos no:
   1. Se DETIENE al pasar el raton y al recibir el foco de teclado. WCAG 2.2.2
      exige poder pausar cualquier cosa que se mueva sola mas de cinco segundos,
      y sin eso no hay manera de terminar de leer una frase.
   2. Se apaga por completo con prefers-reduced-motion: queda una fila que se
      desplaza a mano, no un carrusel congelado a medias.
   3. La pista va duplicada para que el bucle no tenga costura; la copia lleva
      aria-hidden para que un lector de pantalla no lea ocho testimonios dos veces. */
.tst-mq{overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scroll-snap-type:x proximity;margin-top:26px;padding-bottom:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tst-track{display:flex;gap:20px;width:max-content}
.tst-c{width:min(84vw,380px);flex:none;margin:0;scroll-snap-align:start}
.tst-nav{display:flex;gap:8px;margin-top:14px}
.tst-nav button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap-touch);min-height:var(--tap-touch);border:1.5px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.06);color:#E7EEF5;font-size:1rem;cursor:pointer}
.tst-nav button:hover{border-color:#7BE7DA;color:#7BE7DA}

@media(prefers-reduced-motion:reduce){
  .tst-track{animation:none}
  .tst-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}


    /* NOTA DE MANTENIMIENTO: este bloque es una copia literal del que
       vive en corp.css. El home no carga corp.css (tiene su hoja en linea),
       y enlazarla entera reescribiria su base. Si se toca uno, tocar el otro. */
/* ============================================================
   ARSENAL TECNOLOGICO  (.ars-*)
   Portado desde la seccion #arsenal del sitio personal del
   fundador (BrandingProfesional/website, cv.css). Los dibujos
   SVG se copian intactos: son activos propios. Aqui solo se
   adapta el color y el encuadre a la paleta blanca/teal.

   La interaccion original se conserva entera y toda en CSS,
   sin una linea de JS nueva:
     - deriva flotante continua de cada icono, con las fases
       desincronizadas por grupos de cuatro;
     - realce al pasar el puntero: la ficha sube, el icono
       crece y el borde se tine de teal;
     - entrada escalonada de las fichas al aparecer la reja.
   La entrada se cuelga de la clase .reveal que ya observa
   interact.js: la reja es el disparador y las fichas heredan
   el retardo. Las fichas NO llevan tabindex: son rotulos, no
   controles, y meterlas en el orden de tabulacion anadiria 23
   paradas que no hacen nada. El realce solo decora; ninguna
   etiqueta esta oculta, asi que con teclado no se pierde dato.
   ============================================================ */
.ars-featured{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(18px,3.4vw,40px);align-items:center;
  border:1px solid rgba(15,118,110,.42);border-radius:18px;
  background:linear-gradient(120deg,rgba(15,118,110,.10),rgba(20,184,166,.05) 55%,transparent);
  box-shadow:var(--sh);
  padding:clamp(20px,3vw,34px);
  margin:6px 0 16px;position:relative;overflow:hidden}
/* barrido de luz sobre el borde superior: el mismo scan-line del original */
.ars-featured::after{
  content:"";position:absolute;top:0;left:-35%;width:30%;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal2),transparent);
  animation:ars-scan 4.5s linear infinite}
@keyframes ars-scan{to{left:105%}}
.ars-f-ic{line-height:0;flex:none}
.ars-f-ic svg{width:clamp(58px,6.4vw,86px);height:auto;overflow:visible;
  filter:drop-shadow(0 6px 14px rgba(15,108,189,.20))}
/* chevrones fluyendo: el dato recorre el logo */
.ars-ch{transform-box:fill-box;animation:ars-chev 2.6s ease-in-out infinite}
.ars-ch2{animation-delay:.28s}
.ars-ch3{animation-delay:.56s}
@keyframes ars-chev{
  0%,100%{opacity:.68;transform:translateX(0)}
  18%{opacity:1;transform:translateX(2.5px)}
  40%{opacity:.84;transform:translateX(0)}}
.ars-f-body{min-width:0}
.ars-f-tag{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--petrol);margin-bottom:8px}
.ars-f-body h3{font-size:clamp(22px,3vw,32px);letter-spacing:-.015em;margin-bottom:8px}
.ars-f-body p{font-size:15px;max-width:56ch}
.ars-f-cert{display:flex;align-items:center;gap:12px;flex:none;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);line-height:1.6}
.ars-code{font-family:var(--ffd);font-weight:700;font-size:15px;color:var(--petrol);
  border:1px solid rgba(15,118,110,.45);border-radius:9px;padding:9px 12px;white-space:nowrap}
@media(max-width:860px){
  .ars-featured{grid-template-columns:auto 1fr}
  .ars-f-cert{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}}
@media(max-width:520px){
  .ars-featured{grid-template-columns:1fr}}

.ars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:10px;list-style:none;margin:0;padding:0}
.ars-tool{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 10px 14px;text-align:center;box-shadow:var(--sh);
  transition:border-color .2s,transform .2s,box-shadow .2s;outline-offset:3px}
.ars-tool:hover,.ars-tool:focus-visible{
  border-color:rgba(15,118,110,.55);transform:translateY(-4px);box-shadow:var(--sh2)}
.ars-ic{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 10px;
  border-radius:13px;background:var(--alt);border:1px solid var(--line);
  transition:background .2s,border-color .2s}
.ars-tool:hover .ars-ic,.ars-tool:focus-visible .ars-ic{
  background:var(--teal-soft);border-color:rgba(15,118,110,.35)}
/* El realce usa la propiedad independiente `scale` y no `transform`: la deriva
   flotante ya escribe `transform` desde una animacion, y una animacion gana a
   la declaracion. Como `scale` se compone aparte, el icono crece sin pelearse
   con la deriva y sin saltar al entrar o salir el puntero. */
.ars-ic svg{width:30px;height:30px;transition:scale .25s ease-out}
.ars-tool:hover .ars-ic svg,.ars-tool:focus-visible .ars-ic svg{scale:1.16}
.ars-n{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:3px}
.ars-t{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);transition:color .2s}
.ars-tool:hover .ars-t,.ars-tool:focus-visible .ars-t{color:var(--petrol)}
.ars-note{font-size:var(--fs-label);color:var(--dim);margin-top:18px;max-width:74ch}

/* deriva continua de los iconos, fases desincronizadas por grupos de cuatro */
@keyframes ars-float{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(2px,-4px)}
  50%{transform:translate(-1.2px,-6.5px)}
  75%{transform:translate(-2.4px,-2.4px)}}
.ars-grid.is-in .ars-ic svg{animation:ars-float 5.2s ease-in-out infinite}
.ars-f-ic svg{animation:ars-float 6.2s ease-in-out infinite}
.ars-grid.is-in .ars-tool:nth-child(4n+1) .ars-ic svg{animation-delay:-.6s;animation-duration:4.6s}
.ars-grid.is-in .ars-tool:nth-child(4n+2) .ars-ic svg{animation-delay:-1.9s;animation-duration:5.8s}
.ars-grid.is-in .ars-tool:nth-child(4n+3) .ars-ic svg{animation-delay:-3.1s;animation-duration:5s}
.ars-grid.is-in .ars-tool:nth-child(4n) .ars-ic svg{animation-delay:-2.4s;animation-duration:6.4s}
.ars-grid.is-in .ars-tool:nth-child(3n+1) .ars-ic svg{animation-direction:alternate}
/* Entrada escalonada de las fichas: la reja lleva .reveal y dispara a las
   hijas. Igual que .reveal, se guarda tras `scripting: enabled` para que sin
   JS la seccion se vea completa desde el primer pintado: ninguna ficha puede
   quedar invisible por depender de una animacion. */
@media (scripting: enabled){
  .ars-grid.reveal{opacity:1;transform:none;transition:none}
  .ars-grid .ars-tool{opacity:0;transform:translateY(16px);
    transition:opacity .5s ease-out,transform .5s ease-out,
               border-color .2s,box-shadow .2s}
  .ars-grid.is-in .ars-tool{opacity:1;transform:none}
  .ars-grid.is-in .ars-tool:hover,.ars-grid.is-in .ars-tool:focus-visible{
    transform:translateY(-4px);transition-delay:0s}
  .ars-grid .ars-tool:nth-child(1){transition-delay:0ms}
  .ars-grid .ars-tool:nth-child(2){transition-delay:40ms}
  .ars-grid .ars-tool:nth-child(3){transition-delay:80ms}
  .ars-grid .ars-tool:nth-child(4){transition-delay:120ms}
  .ars-grid .ars-tool:nth-child(5){transition-delay:160ms}
  .ars-grid .ars-tool:nth-child(6){transition-delay:200ms}
  .ars-grid .ars-tool:nth-child(7){transition-delay:240ms}
  .ars-grid .ars-tool:nth-child(8){transition-delay:280ms}
  .ars-grid .ars-tool:nth-child(9){transition-delay:320ms}
  .ars-grid .ars-tool:nth-child(10){transition-delay:360ms}
  .ars-grid .ars-tool:nth-child(11){transition-delay:400ms}
  .ars-grid .ars-tool:nth-child(12){transition-delay:440ms}
  .ars-grid .ars-tool:nth-child(13){transition-delay:480ms}
  .ars-grid .ars-tool:nth-child(14){transition-delay:520ms}
  .ars-grid .ars-tool:nth-child(15){transition-delay:560ms}
  .ars-grid .ars-tool:nth-child(16){transition-delay:600ms}
  .ars-grid .ars-tool:nth-child(17){transition-delay:640ms}
  .ars-grid .ars-tool:nth-child(18){transition-delay:680ms}
  .ars-grid .ars-tool:nth-child(19){transition-delay:720ms}
  .ars-grid .ars-tool:nth-child(20){transition-delay:760ms}
  .ars-grid .ars-tool:nth-child(21){transition-delay:800ms}
  .ars-grid .ars-tool:nth-child(22){transition-delay:840ms}
  .ars-grid .ars-tool:nth-child(23){transition-delay:880ms}
}
/* Sin movimiento: la regla global de corp.css ya anula animaciones y
   transiciones, pero las fichas nacen en opacity:0 dentro del bloque de
   arriba y sin este contrapeso se quedarian invisibles. */
@media(prefers-reduced-motion:reduce){
  .ars-grid .ars-tool{opacity:1;transform:none}
  .ars-featured::after{display:none}}

    /* --- Proceso plegable (#demostracion) ---------------------------------
       Sustituye al segundo widget de flujo animado. El contenido es otro
       proceso distinto al del hero (factura de proveedor, no pedido); lo que
       se repetia era la FORMA, y es la forma lo que cambia aqui. Mismo
       vocabulario que .faq: un solo lenguaje de plegable en toda la pagina. */
    .proc details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;box-shadow:var(--sh)}
    .proc summary{padding:16px 20px;min-height:var(--tap-touch);cursor:pointer;font-weight:700;font-family:var(--ffd);color:var(--ink);font-size:1.1875rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .proc summary::-webkit-details-marker{display:none}
    .proc summary:after{content:"+";color:var(--teal);font-family:var(--ffd);font-size:20px;line-height:1}
    .proc details[open] summary:after{content:"–"}
    .proc p{padding:0 20px 17px;font-size:var(--fs-sm);max-width:60ch}

    /* --- Evidencia: texto y grabacion lado a lado -------------------------
       El unico medio de calidad de produccion que la firma posee vivia en otra
       pagina detras de un enlace de texto. preload="none" hace que hasta el
       clic solo viajen los 82 KB del poster, no los 1,9 MB del video, asi que
       el LCP no se mueve. */
    .cr-2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start}
    @media(max-width:900px){.cr-2{grid-template-columns:1fr}}
    .cr-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);background:#0B1B2B}
    .cr-src{margin-top:10px;font-size:var(--fs-label);color:var(--dim)}

    /* --- #inteligencia: congelada por orden del dueno ---------------------
       Los tokens de C1 la alcanzarian por herencia. Estas cuatro lineas la
       dejan exactamente con la escala que tenia antes del cambio. */
    #inteligencia h2{font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.15;letter-spacing:normal;max-width:none}
    #inteligencia .sec-k{font-size:.875rem}
    #inteligencia .sec-sub{font-size:clamp(1rem,.94rem + .28vw,1.125rem);max-width:62ch}
    #inteligencia{padding:64px 0}

    /* --- Prueba de tercero en el hero (C4) --------------------------------
       Sustituye a tres afirmaciones propias por lo unico verificable por un
       tercero que la firma tiene arriba del pliegue: certificaciones emitidas
       por Microsoft y el numero real de testimonios firmados. El par teal
       sobre teal-soft ya estaba validado en 5,07:1 para .k y .gar. */
    .hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:var(--fs-label);color:var(--body)}
    .hero-proof .hp-b{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-height:var(--tap)}
    .hero-proof b{font-family:var(--ffd);color:var(--ink);font-size:1rem}
    .hero-proof a{color:var(--teal);font-weight:600}
    .hp-code{font-family:var(--ffd);font-weight:700;font-size:var(--fs-label);color:var(--teal);background:var(--teal-soft);border-radius:6px;padding:2px 8px}
    .flow-nota{font-size:var(--fs-label);color:var(--dim);margin-top:10px;text-align:center}

    /* --- Anclas oscuras (D2) ---------------------------------------------
       Con la banda de cifras, los testimonios y el cierre en #0B1B2B, el lector
       se orienta por memoria visual en vez de leer para saber donde esta.
       Se escriben las DOS familias de clase por si algun rotulo vuelve a .k. */
    .tst-home{background:#0B1B2B;color:#E7EEF5}
    .tst-home h2{color:#FFFFFF}
    .tst-home .k,.tst-home .sec-k{background:rgba(20,184,166,.14);color:#7BE7DA}
    .tst-home .sub,.tst-home .sec-sub{color:#A9BCCE}
    .tst-home .tst{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
    .tst-home .tst blockquote p{color:#E7EEF5}
    .tst-home .tst figcaption{border-top-color:rgba(255,255,255,.14)}
    .tst-home .tst figcaption b{color:#FFFFFF}
    .tst-home .tst figcaption span{color:#A9BCCE}
    .tst-home .tst-mas a{color:#7BE7DA}
    .tst-home .btn2{background:transparent;color:#E7EEF5;border-color:rgba(255,255,255,.45)}

    /* --- D4. Una tarjeta lleva borde O sombra, nunca las dos --------------
       233 elementos con filete de 1px que da 1,213:1 contra blanco: no separa,
       solo anade cuatro lineas por caja que compiten con el texto. .faq
       conserva el suyo: es un control que hay que leer como fila pulsable. */
    .pi,.ag,.st,.cs{border-color:transparent}

    /* --- D5. Ritmo vertical: tres pasos en vez de 64px en todas las bandas */
    .sec-tight{padding:var(--step-1) 0}
    .sec-chapter{padding:var(--step-3) 0}

    /* --- Aparicion al entrar en pantalla (E1) -----------------------------
       BLOQUEANTE del resto: la regla base .reveal vivia solo en corp.css, que
       el home no carga, asi que poner class="reveal" no producia nada.
       La guarda `scripting: enabled` es la misma que ya protege .ars-grid:
       sin JS ninguna seccion puede nacer invisible.
       El transition-duration:.2s del hover evita que el realce del puntero
       herede los 0,5 s de la entrada. */
    @media (scripting: enabled){
      .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease-out,transform .6s ease-out}
      .reveal.is-in{opacity:1;transform:none}
      .stagger.reveal{opacity:1;transform:none;transition:none}
      .stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out,border-color .2s,box-shadow .2s}
      .stagger.is-in>*{opacity:1;transform:none}
      .stagger.is-in>*:hover,.stagger.is-in>*:focus-visible{transition-delay:0s;transition-duration:.2s}
      .stagger>*:nth-child(2){transition-delay:60ms}
      .stagger>*:nth-child(3){transition-delay:120ms}
      .stagger>*:nth-child(4){transition-delay:180ms}
      .stagger>*:nth-child(5){transition-delay:240ms}
      .stagger>*:nth-child(6){transition-delay:300ms}
      .stagger>*:nth-child(7){transition-delay:360ms}
      .stagger>*:nth-child(8){transition-delay:420ms}
    }
    @media(prefers-reduced-motion:reduce){.reveal,.stagger>*{opacity:1;transform:none;transition:none}}

    /* --- E3. Pausar lo decorativo fuera de pantalla -----------------------
       Medido en el pie: 85 animaciones corriendo, 3 dentro del viewport y 82
       fuera. Compositor y bateria para pixeles que nadie mira. */
    .anim-off,.anim-off *{animation-play-state:paused !important}

    /* --- E4. Niebla de fondo del hero -------------------------------------
       La tecnica de mayor retorno visual por linea del sitio ajeno: profundidad
       sin una peticion de red. Tres capas en un pseudo-elemento, no diez divs,
       y sin filter: la suavidad la da el degradado al caer a transparente.
       La primera capa va a .10 y no a .16 por un fallo silencioso: con .16 el
       fondo queda #D9F4F1 y --dim cae a 4,38:1, bajo AA — y los auditores
       automaticos no lo verian, porque miden contra el background computado. */
    .hero::before{content:"";position:absolute;inset:-6% 0 -8%;z-index:-1;pointer-events:none;
      background:
        radial-gradient(38% 46% at 14% 24%, rgba(20,184,166,.10), transparent 68%),
        radial-gradient(34% 42% at 80% 16%, rgba(15,118,110,.13), transparent 70%),
        radial-gradient(42% 40% at 64% 94%, rgba(15,118,110,.08), transparent 72%);
      animation:hero-drift 26s ease-in-out infinite alternate}
    @keyframes hero-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2.4%,1.2%,0) scale(1.05)}}

    /* --- E5. Vocabulario de hover ----------------------------------------
       Mejora sobre el original, que aplica el mismo realce a todo: aqui solo
       levantan las tarjetas que SON un enlace. .pi, .st y .seg son <div> sin
       destino, y levantarlas prometeria un clic que no existe. */
    .ag,.cs{transition:border-color .2s,transform .2s,box-shadow .2s}
    .ag:hover,.ag:focus-visible,.cs:hover,.cs:focus-visible{border-color:rgba(15,118,110,.55);transform:translateY(-4px);box-shadow:var(--sh2)}
    .pi,.st,.seg{transition:border-color .2s,box-shadow .2s}
    .pi:hover,.st:hover,.seg:hover{box-shadow:var(--sh2)}

    /* --- E6. Las seis fugas de prefers-reduced-motion ---------------------
       Con `reduce` el home bajaba de 87 a 47 animaciones, pero sobrevivian seis
       familias en #demostracion y #herramientas. Ninguno de los ocho bloques
       existentes las apagaba. Las marquesinas no se congelan a medias: se
       entregan al lector, igual que .tst-mq. */
    @media(prefers-reduced-motion:reduce){
      .hero::before{animation:none}
      .ag:hover,.cs:hover{transform:none}
      .tv-wire{stroke-dasharray:none;stroke-dashoffset:0;opacity:.45;animation:none}
      .tv-ring,.tv-tile,.tv-track{animation:none}
      .tv-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
      .ars-grid .ars-tool{opacity:1;transform:none}
      .ars-featured::after{display:none}
      .ars-grid.is-in .ars-ic svg,.ars-f-ic svg,.ars-ch{animation:none}
    }

    /* --- Evidencia de ejecucion (#evidencia) ------------------------------
       El 19/19 manda. Las diecinueve marcas no son adorno: un "100%" hay que
       creerlo, diecinueve palomitas se CUENTAN. Es la diferencia entre decir
       el numero y ensenarlo, que es justo lo que esta seccion promete.
       Superficie oscura dentro de seccion clara para que lea como pieza de
       evidencia y no como otra banda. Contrastes verificados sobre #0B1B2B:
       blanco 17,41:1 · #A9BCCE 8,93:1 · #7BE7DA >10:1. --teal da 3,18:1 aqui
       y no se usa para texto. */
    .ev-run{background:#0B1B2B;border-radius:var(--r-lg,20px);padding:30px 32px;margin:26px 0 0;color:#D6E2EC}
    @media(max-width:640px){.ev-run{padding:24px 20px}}
    .evr-tag{display:inline-block;background:rgba(20,184,166,.14);color:#7BE7DA;font-size:var(--fs-label);
      font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
    .evr-top{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin:20px 0 0}
    .evr-n{margin:0;flex:none}
    .evr-n b{display:block;font-family:var(--ffd);font-size:clamp(3.25rem,7vw,4.75rem);line-height:.92;
      letter-spacing:-.035em;color:#FFFFFF}
    .evr-n b span{color:#7BE7DA}
    .evr-k{display:block;margin-top:8px;font-size:var(--fs-lead);color:#FFFFFF;font-weight:600}
    /* Diecinueve marcas, una por ejecucion. Se pueden contar. */
    .evr-ticks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px;width:min(100%,430px);margin-left:auto}
    @media(max-width:720px){.evr-ticks{margin-left:0}}
    .evr-ticks i{display:block;aspect-ratio:1;border-radius:7px;background:rgba(123,231,218,.16);
      border:1px solid rgba(123,231,218,.5);position:relative}
    .evr-ticks i:after{content:"";position:absolute;left:32%;top:18%;width:24%;height:48%;
      border:2px solid #7BE7DA;border-top:0;border-left:0;transform:rotate(42deg)}
    .evr-lead{font-size:var(--fs-lead);color:#E7EEF5;max-width:62ch;margin:24px 0 0}
    .evr-lead b{color:#FFFFFF}
    .evr-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:26px;
      padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
    @media(max-width:860px){.evr-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
    @media(max-width:460px){.evr-g{grid-template-columns:1fr}}
    .evr-g b{display:block;font-family:var(--ffd);font-size:1.5rem;line-height:1.1;color:#FFFFFF;
      letter-spacing:-.02em}
    .evr-g span{display:block;margin-top:5px;font-size:var(--fs-label);color:#A9BCCE;line-height:1.45}
    .evr-pie{margin:24px 0 0;font-size:var(--fs-label);color:#A9BCCE;max-width:78ch;line-height:1.55}
    .evr-pie b{color:#D6E2EC}

    /* Auditoría septiembre 2026: jerarquía, lectura y control del movimiento. */
    .hero h1{max-width:23ch;line-height:1.08;font-size:clamp(2.25rem,4.7vw,3.75rem)}
    .hero-head{margin-bottom:22px}
    .hero-proof{border-top:1px solid var(--line);padding-top:18px}
    .hero-note{line-height:1.6}
    .flow-nota{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 18px}
    .motion-toggle{font:inherit;font-size:.875rem;color:var(--teal);background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-height:44px;cursor:pointer}
    html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}
    @media(max-width:600px){.hero .cta-row{align-items:stretch;gap:10px}.hero .cta-row a{width:100%;text-align:center;padding-inline:16px}.hero .k{border-radius:10px;line-height:1.6}.flow-nota{justify-content:flex-start}.hero h1{max-width:none}}
/* Accesos a las secciones recuperadas, sin ocultar su contenido. */
.home-jumps{display:flex;flex-wrap:wrap;gap:10px 22px;padding-block:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.9rem}
.home-jumps a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:4px}
#casos-interactivos .cv-heading{align-items:start}
#casos-interactivos .cv-grid{margin-top:24px}
#casos-interactivos .cv-actions{margin-top:26px}
/* Una descarga fallida del JS no puede hacer desaparecer el contenido. */
html:not(.js) .reveal,html:not(.js) .stagger>*,html:not(.js) .ars-grid .ars-tool{opacity:1;transform:none;transition:none}
/* Incluye los fondos y brillos generados por pseudoelementos. */
.anim-off::before,.anim-off::after,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}