/* Fuentes servidas desde el propio sitio: ninguna petición a Google (aviso de privacidad) */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('f-inter-latin-ext.a28eb6d3.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('f-inter-latin.c9407645.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('f-inter-latin-ext.a28eb6d3.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('f-inter-latin.c9407645.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('f-inter-latin-ext.a28eb6d3.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('f-inter-latin.c9407645.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('f-intertight-latin-ext.3c299662.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('f-intertight-latin.83d548cd.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('f-intertight-latin-ext.3c299662.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('f-intertight-latin.83d548cd.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('f-intertight-latin-ext.3c299662.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('f-intertight-latin.83d548cd.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('f-jetbrainsmono-latin-ext.9c38cb2d.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('f-jetbrainsmono-latin.2c32b9b3.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('f-jetbrainsmono-latin-ext.9c38cb2d.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('f-jetbrainsmono-latin.2c32b9b3.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ /* página clara; la consola conserva su propio tema oscuro */ --bg:#F7F7F3; --bg2:#FFFFFF; --txt:#0F1115; --dim:#5C6270; --dim2:#6B7280; /* 4.5:1 sobre --bg (antes #9AA0AC = 2.44:1, ilegible) */ --hair:rgba(15,20,40,.09); --hair2:rgba(15,20,40,.16); --navy:#0E2455; --blue:#2E5BFF; --blue-hi:#87A5FF; /* --navy y --blue son colores de marca: no cambian con el tema. Cuando se usan como TEXTO hay que pasar por estos, que sí giran en oscuro. */ --acento-txt:#0E2455; /* marino → lima */ --info-txt:#1F44CC; /* azul → azul claro */ /* Un solo color de marca. Sin segundo acento, la jerarquía se gana por INVERSIÓN: lo importante va en marino sólido con letra papel, lo secundario va en papel con filete marino. */ --papel:#F7F7F3; --glow:rgba(46,91,255,.35); --sombra-navy:rgba(14,36,85,.28); --white:#FFFFFF; --nav-bg:rgba(247,247,243,.75); --stage1:#EBEFF8; --stage2:#F1EFE7; --ok:#1FA35C; --wa:#25D366; /* Tokens de la consola. Eran oscuros (ventana de producto flotando en contraste). En el mundo de la etiqueta el objeto oscuro se leía como ajeno, así que la consola pasa a papel y la estructura la carga el marino, igual que los campos tabulados de arriba. */ --c-bg:#FFFFFF; --c-hair:#E4E6EA; /* filete gris neutro, no marino translúcido */ --c-txt:#111318; --c-dim:#565C66; --c-dim2:#767C87; /* Grafitos de producto: la ventana no lleva el color de la marca adentro. El marino es de la PÁGINA; adentro de la consola manda el gris, como en cualquier software serio. */ /* Tres tonos que NO se repiten entre sí, para que cada capa se lea aparte: la barra de arriba es la más clara, el dato es el medio. */ --c-chrome:#EDEEF1; /* barra de título: gris muy claro */ --c-chrome-txt:#3C424C; --c-chrome-line:#DCDEE4; --c-fill:#5B6472; /* el dato: barras, avatar, burbuja del agente */ --c-fill2:#CDD1D8; /* el mismo dato, en reposo */ --c-panel:#FAFAFB; /* fondo de tarjeta */ /* Semáforo financiero. Adentro el color sólo aparece cuando SIGNIFICA algo: verde bien, ámbar atención, rojo mal. Nunca decorativo. */ --c-ok:#0E7A3C; --c-warn:#A96A05; --c-bad:#B3261E; /* Inter Tight para titulares y cifras. Una sola familia manda el peso (Inter Tight), otra el texto corrido (Inter) y otra el dato crudo (JetBrains Mono). Space Grotesk salió: era neutral pero plana en tamaño grande y no levantaba la voz. */ --disp:"Inter Tight",Inter,sans-serif; --body:"Inter",-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body);background:var(--bg);color:var(--txt); -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden; } ::selection{background:var(--blue);color:#fff} .wrap{max-width:1240px;width:100%;margin:0 auto;padding:0 32px} /* width:100%: dentro de flex-column, los margin auto encogen el wrap */ a{color:inherit;text-decoration:none} /* etiqueta que sólo leen los lectores de pantalla */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* La retícula de fondo (.grid-bg) se retiró el 21 sep 2026: una malla de 110px con máscara radial en el hero. Se leía como hoja de cuaderno y le quitaba limpieza a la portada. Para devolverla: este bloque más un
al abrir el de cada página. position:fixed; inset:0; z-index:0; pointer-events:none; background-image: dos linear-gradient de 1px con var(--hair); background-size:110px 110px; opacity:.35; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%) */ /* .label se retiró: era el eyebrow encima de cada titular, puro eco */ h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.038em;line-height:1.02;color:var(--txt)} h1{font-size:clamp(2.6rem,5.8vw,4.6rem)} h2{font-size:clamp(2rem,4.4vw,3.3rem)} /* En construimos y calculadora el titular de apertura es el h1 de la página, pero visualmente es un titular de sección: mismo tamaño que un h2, para que el cambio de etiqueta no mueva el diseño. */ .sec-head h1{font-size:clamp(2rem,4.4vw,3.3rem)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border-radius:99px;font-weight:600;font-size:.93rem; border:1px solid transparent;cursor:pointer;transition:all .25s cubic-bezier(.3,.7,.3,1); font-family:var(--body);background:transparent; } .btn-solid{background:var(--navy);color:var(--papel)} /* en el nav el sólido ya lo usa el destacado, así que el CTA se invierte a contorno: con un color, la jerarquía es lleno contra filete */ .nav-r .btn-solid{background:transparent;color:var(--navy);border:2px solid var(--navy)} .nav-r .btn-solid:hover{background:var(--navy);color:var(--papel);box-shadow:none;transform:none} .btn-solid:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(14,36,85,.45)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 34px -10px var(--glow)} .btn-blue:hover{transform:translateY(-2px);box-shadow:0 18px 46px -10px var(--glow)} .btn-lime{background:var(--navy);color:var(--papel);box-shadow:0 10px 30px -14px var(--sombra-navy)} .btn-lime:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px var(--sombra-navy)} /* En la banda de cierre el fondo YA es marino, así que un botón marino desaparece (contraste 1:1). Con un solo color, sobre fondo oscuro la jerarquía se invierte: papel lleno con letra marino. */ .final .btn-lime{background:var(--papel);color:var(--navy);box-shadow:none} .final .btn-lime:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,0,0,.5)} .btn-hair{border-color:var(--hair2);color:var(--txt);background:var(--white)} .btn-hair:hover{border-color:var(--navy)} .btn-wa{background:var(--wa);color:#06301A} .btn-wa:hover{transform:translateY(-2px)} .rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s} /* ---------- Nav ---------- */ nav{ position:fixed;top:0;left:0;right:0;z-index:90; background:var(--nav-bg);backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid var(--hair); } .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px} /* logos originales: PNG transparentes con trazo marino, sin chip ni máscara */ .brand{display:flex;align-items:center;gap:14px;perspective:600px} /* la X gira sobre su eje al tocarla y rebota al soltar */ .brand .b-sym{ height:29px;width:auto;display:block;transform-style:preserve-3d; transition:transform .75s cubic-bezier(.34,1.56,.64,1); } .brand:hover .b-sym{transform:rotateY(360deg) scale(1.12)} /* .spin: mismo giro disparado por clic o toque (en móvil no hay hover) */ .brand .b-sym.spin{transform:rotateY(360deg) scale(1.12)} .brand:active .b-sym{transform:rotateY(360deg) scale(.92);transition-duration:.15s} .brand .b-word{ height:29px;width:auto;display:block; transition:transform .5s cubic-bezier(.34,1.56,.64,1); } .brand:hover .b-word{transform:translateX(3px)} .nav-r{display:flex;align-items:center;gap:14px} .nav-r .btn{padding:11px 22px;font-size:.85rem} /* --- destacado: la única división visible en la barra --- */ /* seis enlaces planos competían entre sí; ahora sólo esta ruta pide el clic y el resto vive en la hoja del menú */ /* letras en lima sobre marino: el lima sobre blanco da 1.4:1 y no se lee; sobre el marino llega a 9:1 y además el neón resalta más */ .nav-feat{ display:inline-flex;align-items:center;gap:9px; padding:10px 18px 10px 15px;border-radius:999px; border:1px solid var(--navy);background:var(--navy); font-family:var(--body);font-size:.85rem;font-weight:600; color:var(--papel);letter-spacing:.005em;white-space:nowrap; transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s; } .nav-feat i{ width:7px;height:7px;border-radius:50%;background:var(--papel); flex:none;animation:featPulse 2.4s ease-out infinite; } @keyframes featPulse{ 0% {box-shadow:0 0 0 0 rgba(247,247,243,.7)} 70% {box-shadow:0 0 0 7px rgba(247,247,243,0)} 100%{box-shadow:0 0 0 0 rgba(247,247,243,0)} } .nav-feat:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(14,36,85,.65),0 0 0 3px rgba(14,36,85,.18); } /* --- botón hamburguesa: dos trazos que se cruzan al abrir --- */ .burger{ width:42px;height:42px;border-radius:12px;flex:none; border:1px solid var(--hair2);background:var(--white);cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; transition:border-color .2s,background .2s; } .burger:hover{border-color:var(--navy)} .burger i{ display:block;width:17px;height:1.5px;border-radius:2px;background:var(--txt); transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s; } .burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)} .burger[aria-expanded="true"] i:last-child {transform:translateY(-3.25px) rotate(-45deg)} /* --- hoja del menú --- */ .menu-veil{ position:fixed;inset:74px 0 0;z-index:88;background:rgba(10,11,20,.28); backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s; } .menu-veil.open{opacity:1;pointer-events:auto} .menu-sheet{ /* mismo borde derecho que .wrap (1240 máx. + 32 de padding) para que caiga bajo el botón */ /* 100% (no 100vw) para que la barra de scroll no la desalinee */ position:fixed;z-index:89;top:74px;right:max(32px,calc((100% - 1240px)/2 + 32px)); width:min(380px,calc(100vw - 32px)); background:var(--bg2);border:1px solid var(--hair);border-radius:20px; box-shadow:0 40px 90px -30px rgba(10,20,50,.35),0 2px 6px rgba(10,20,50,.06); padding:10px;margin-top:10px; opacity:0;transform:translateY(-10px) scale(.985);pointer-events:none; transition:opacity .28s,transform .28s cubic-bezier(.2,.7,.2,1); } .menu-sheet.open{opacity:1;transform:none;pointer-events:auto} .menu-sheet a{ display:block;padding:13px 15px;border-radius:13px; transition:background .2s,transform .2s; } .menu-sheet a:hover{background:var(--bg);transform:translateX(3px)} .menu-sheet a b{ display:block;font-family:var(--disp);font-size:.98rem;font-weight:600; color:var(--txt);letter-spacing:-.01em; } .menu-sheet a span{display:block;font-size:.82rem;color:var(--dim);margin-top:3px;line-height:1.45} .menu-sheet hr{border:0;border-top:1px solid var(--hair);margin:8px 15px} /* el destacado ya está en la barra: sólo aparece en la hoja cuando la barra lo esconde */ .menu-sheet .ms-feat,.menu-sheet .ms-feat + hr{display:none} .ms-feat b::before{ content:'';display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--navy);margin-right:9px;vertical-align:middle; } .menu-sheet a[aria-current]{background:var(--bg)} .menu-sheet a[aria-current] b::after{content:' · aquí está';color:var(--dim2);font-weight:400;font-size:.8rem} /* firma del menú: marca arriba, descriptor abajo — no una línea suelta */ .menu-foot{display:flex;align-items:center;gap:10px;padding:8px 15px 12px} .menu-foot img{height:18px;width:auto;flex:none;opacity:.9} .menu-foot span{display:block;font-size:.8rem;line-height:18px;color:var(--dim)} @media(max-width:520px){ .brand{gap:9px} .brand .b-sym,.brand .b-word{height:20px} /* a 375 px el logo y el CTA se tocaban: se recorta el respiro del nav */ nav .wrap{padding:0 16px} .nav-r{gap:8px} .nav-r .btn{padding:9px 13px;font-size:.75rem;white-space:nowrap} .burger{width:38px;height:38px;border-radius:11px} /* en móvil el destacado no cabe junto al CTA: pasa a encabezar la hoja */ .nav-feat{display:none} .menu-sheet .ms-feat,.menu-sheet .ms-feat + hr{display:block} .menu-sheet{right:16px;left:16px;width:auto} } /* ---------- Hero ---------- */ .hero{position:relative;padding:170px 0 0;text-align:center;overflow:hidden;z-index:1} .aurora{ position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.35; background: radial-gradient(34% 26% at 50% 12%, rgba(46,91,255,.28) 0%, transparent 100%), radial-gradient(26% 22% at 18% 30%, rgba(14,36,85,.14) 0%, transparent 100%), radial-gradient(26% 22% at 84% 26%, rgba(90,130,255,.16) 0%, transparent 100%); animation:drift 16s ease-in-out infinite alternate; } @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,3%,0) scale(1.06)}} /* ícono APX en 3D como FONDO del hero: gigante, fantasmal, girando — y el scroll le da la vuelta completa (360°) */ .hero > .wrap{position:relative;z-index:1} .line{display:block;overflow:hidden} .line > span{display:block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.75,.2,1) forwards} .line:nth-child(2) > span{animation-delay:.12s} @keyframes rise{to{transform:none}} h1 .blue{ background:linear-gradient(95deg,var(--navy) 0%,var(--blue) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* marcador lima: gradiente de fondo + box-decoration-break para que pinte en cada línea si el titular se parte en pantallas chicas */ .hero-sub{ margin:28px auto 0;max-width:36em;color:var(--dim);font-size:1.08rem; opacity:0;animation:fade 1s ease .5s forwards; } @keyframes fade{to{opacity:1}} .hero-cta{display:flex;gap:14px;margin-top:38px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fade 1s ease .65s forwards} /* ---------- Consola (ventana oscura sobre página clara) ---------- */ /* escenario: tapete con malla de degradados en colores de marca (estilo Linear/Vercel). Aquí entraría una foto real de operación del cliente, si algún día se autoriza. */ .stage{ position:relative;overflow:hidden; background:linear-gradient(150deg, var(--stage1) 0%, var(--stage2) 100%); /* el tapete de foto se ve más: la industria detrás del producto */ border:3px solid var(--navy);border-radius:0;padding:clamp(22px,4.4vw,64px); } .stage::before{ content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0; background: radial-gradient(40% 46% at 10% 14%, rgba(46,91,255,.40) 0%, transparent 66%), radial-gradient(36% 42% at 90% 22%, rgba(46,91,255,.16) 0%, transparent 64%), radial-gradient(50% 54% at 70% 94%, rgba(14,36,85,.34) 0%, transparent 68%); filter:blur(30px); } /* textura fina de retícula: da sensación de plano técnico, no de gradiente vacío */ .stage::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(to right, rgba(14,36,85,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(14,36,85,.055) 1px, transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 78%); mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 78%); } .stage > *{position:relative;z-index:1} /* ---- foto de operación real de fondo ---- Si el archivo no existe, el degradado de arriba se ve igual (degrada sin romper). Las fotos van en assets/ con estos nombres. */ .stage.foto{background-color:#0A0C12} /* Si el archivo no existe, se ve el degradado y nada se rompe. */ /* WebP, no JPG (21 sep 2026): mismas fotos a la mitad del peso, de 1,073 KB a 521 KB. Van detrás de un velo marino, así que aguantan la compresión sin que se note. Los JPG originales siguen en assets/ como fuente, pero ya no se publican. Si un navegador no soportara WebP, .stage.foto tiene su color de fondo y el degradado: degrada sin romperse. */ .stage.f-flujo{--foto:url('foto-flujo.webp')} /* tubos de luz · consola del hero */ .stage.f-cruce{--foto:url('foto-cruce.webp')} /* cruce peatonal · 01 front office */ .stage.f-domo{--foto:url('foto-domo.webp')} /* cúpula · 02 back office */ .stage.f-curvas{--foto:url('foto-curvas.webp')} /* nervaduras · 03 inteligencia */ /* Las fotos de reserva (puerto, ductos, esquina, patio) siguen en assets/ pero sin regla aquí: una clase que ningún HTML usa es código muerto, y hacer-publicar.py tampoco sube esas imágenes. Para volver a usar alguna, agregue su regla .stage.f- y la clase en el HTML. */ .stage.foto::before{ background-image:var(--foto); background-size:cover;background-position:center; filter:none;inset:0;opacity:1; } /* velo de marca sobre la foto: mantiene contraste y la vuelve "de APX" */ .stage.foto::after{ background-image: linear-gradient(150deg, rgba(14,36,85,.58) 0%, rgba(10,12,18,.40) 55%, rgba(46,91,255,.30) 100%), linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:cover, 34px 34px, 34px 34px; -webkit-mask-image:none;mask-image:none; } .console-frame{ margin:76px auto 0;max-width:1244px;position:relative;text-align:left; opacity:0;animation:fade 1.1s ease .85s forwards;padding:0 32px; } /* sin esquinas redondeadas ni sombra difusa: en el mundo de la etiqueta el filete es la profundidad */ .console{ background:var(--c-bg);border:0;border-radius:0;overflow:hidden; box-shadow:12px 12px 0 rgba(17,19,24,.13); } /* franja de rótulo, no ventana de macOS: la consola es un instrumento dentro de la etiqueta, no una app flotando */ /* franja marino: todo lo de adentro hereda papel. Antes heredaba el negro de la página y el texto desaparecía sobre el fondo oscuro. */ .c-bar{color:var(--c-chrome-txt); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 18px; border-bottom:1px solid var(--c-chrome-line);background:var(--c-chrome); } .c-bar .tl{display:flex;gap:7px} .c-bar .tl i{width:11px;height:11px;border-radius:0} .c-bar .tl i:first-child{background:#FF5F57}.c-bar .tl i:nth-child(2){background:#FEBC2E}.c-bar .tl i:nth-child(3){background:#28C840} /* min-width:0 para que una celda de grid pueda encogerse; sin eso el título empujaba el marco y se salía de la ventana */ .c-bar b{font-family:var(--mono);font-weight:600;font-size:.8rem;letter-spacing:.16em; text-transform:uppercase;color:var(--c-chrome-txt);text-align:center;white-space:nowrap; min-width:0;overflow:hidden;text-overflow:ellipsis} /* el título de cada ventana vive sobre la franja marino, no sobre papel */ .win .c-bar b,.win .c-bar span{color:var(--c-chrome-txt)} /* La insignia de estado del marco se retiró el 21 sep 2026. Decía "EN VIVO" sobre datos inventados, que es una afirmación falsa, y ninguna etiqueta alternativa terminó de convencer. Sin insignia el sitio no afirma nada: sólo muestra una interfaz, que es lo que hace cualquier captura de producto. Los términos de uso cubren el carácter ilustrativo. El marco conserva sus tres columnas de rejilla, así que el título sigue centrado. */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} .c-grid{display:grid;grid-template-columns:1.05fr 1.15fr .95fr;min-height:430px} /* .c-grid .c-dash y no .c-dash a secas: la regla base vive más abajo en el archivo y con la misma especificidad le ganaba a esta, así que el tablero nunca se ocultaba */ @media(max-width:960px){.c-grid{grid-template-columns:1fr 1fr}.c-grid .c-dash{display:none}} @media(max-width:640px){.c-grid{grid-template-columns:1fr}.c-wa{border-left:0!important;border-top:1px solid var(--c-hair)}} .c-tasks{padding:20px;border-right:1px solid var(--c-hair)} @media(max-width:640px){.c-tasks{border-right:0}} .c-h{ font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--c-dim2);margin:6px 0 12px; display:flex;justify-content:space-between;align-items:center; } .c-h em{font-style:normal;color:var(--c-txt)} .task{ display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--c-hair); border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.015);animation:pop .4s ease both; } .task .meta{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:#5C6270;flex-shrink:0;padding-left:8px} @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .task .ico{flex-shrink:0;width:17px;height:17px;margin-top:2px} .task.run .ico{border:2px solid #E3E5EA;border-top-color:var(--c-fill);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .task.done .ico{color:var(--c-ok)} .task b{display:block;font-size:.82rem;font-weight:600;color:var(--c-txt);line-height:1.35} .task span{font-size:.72rem;color:var(--c-dim2);font-family:var(--mono)} .c-wa{border-right:1px solid var(--c-hair);display:flex;flex-direction:column;background:#0B141A} /* Bandeja de atención en papel. Antes imitaba WhatsApp (verde #005C4B, fondo #0B141A, palomitas azules): la marca de otro producto dentro de la suya, y encima el único objeto oscuro de la página. Ahora es una bandeja con la tipografía y el filete de APX. */ .wa-top{ display:flex;align-items:center;gap:12px;padding:14px 16px; background:#FAFAF8;border-bottom:1px solid var(--c-hair);color:var(--txt); } .wa-top .av{ width:34px;height:34px;border-radius:0;background:var(--c-fill); display:flex;align-items:center;justify-content:center;font-size:.7rem; font-weight:700;color:var(--papel);font-family:var(--disp);letter-spacing:.02em; } .wa-top b{font-size:.86rem;color:var(--txt);display:block;line-height:1.25;font-weight:600} .wa-top span{font-size:.68rem;color:var(--c-dim);font-family:var(--mono)} .wa-body{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;justify-content:flex-end} .wam{ max-width:84%;padding:10px 13px;font-size:.79rem;line-height:1.5; animation:pop .35s ease both;position:relative; } .wam small{ display:block;text-align:right;font-size:.6rem;margin-top:5px;font-family:var(--mono); letter-spacing:.04em; } /* el cliente: papel con filete, alineado a la izquierda */ .wam.in{ background:#FFFFFF;border:1px solid var(--c-hair);color:var(--txt); align-self:flex-start; } .wam.in small{color:var(--c-dim2)} /* el agente: marino sólido, alineado a la derecha. La jerarquía por inversión, igual que en el resto del sitio. */ .wam.out{background:var(--c-fill);color:#F4F5F7;align-self:flex-end} .wam.out small{color:rgba(244,245,247,.78)} .wam.out small::after{content:" · entregado"} .wa-tag{ align-self:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em; color:var(--c-dim2);border-top:1px solid var(--c-hair); padding:9px 0 3px;margin-bottom:2px;width:100%;text-align:center; } /* panel de documento: el "editor" de APX, equivalente al panel de código de Cursor */ .c-doc{display:flex;flex-direction:column;border-right:1px solid var(--c-hair);background:#FCFCFD;overflow:hidden} .doc-tabs{display:flex;border-bottom:1px solid var(--c-hair);background:#F1F2F5;flex-shrink:0;overflow-x:auto;scrollbar-width:none} .doc-tabs::-webkit-scrollbar{display:none} .doc-tabs{overflow:hidden} /* Las cuatro salían con "…": cuatro pestañas cortadas se leen como una interfaz rota. Se ajusta el tamaño al contenido en vez de repartir el ancho en partes iguales. */ .doc-tabs span{ font-family:var(--mono);font-size:.6rem;color:#5C6270;padding:10px 12px; border-right:1px solid var(--c-hair);white-space:nowrap;flex:0 0 auto; } .doc-tabs span.on{color:var(--c-txt);background:#FFFFFF;position:relative} .doc-tabs span.on::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c-ok)} .doc-body{flex:1;padding:16px 18px;overflow:hidden;font-family:var(--mono);font-size:.7rem;line-height:1.85} .doc-body .row{display:flex;gap:10px;animation:pop .35s ease both} .doc-body .k{color:#5C6270;min-width:84px;flex-shrink:0} .doc-body .v{color:#1B2333} .doc-body .v.ok{color:var(--c-ok)} .doc-body .v.hi{color:var(--c-txt)} .doc-body hr{border:0;border-top:1px dashed var(--c-hair);margin:10px 0} .doc-foot{ border-top:1px solid var(--c-hair);padding:11px 16px;display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:.63rem;color:#7A8296;flex-shrink:0;background:#F2F2EE; } .doc-foot .badge{color:#0E6B36} .doc-foot .right{margin-left:auto;color:#5C6272} /* panel de código con resaltado, estilo editor (patrón Cursor) */ .code{ flex:1;overflow:hidden;padding:14px 0 14px 0;font-family:var(--mono); font-size:.68rem;line-height:1.9;background:#FCFCFD; } .code .ln{display:flex;gap:14px;padding:0 16px;animation:pop .3s ease both;white-space:pre} .code .n{color:#A7AEBF;min-width:18px;text-align:right;flex-shrink:0;user-select:none} .code .c{color:#1A1D24;overflow:hidden;text-overflow:ellipsis} /* paleta de editor, la que ya conoce cualquiera que haya visto código: azul palabra clave, morado función, verde cadena, ámbar número */ .code .kw{color:#1F44CC} /* palabra clave */ .code .fn{color:#7B3FA8} /* función */ .code .st{color:#10704A} /* cadena */ .code .nu{color:#A85B12} /* número */ .code .cm{color:#8A90A0;font-style:italic} /* comentario */ .code .op{color:#5C6270} .code-cursor{display:inline-block;width:7px;height:.95em;background:var(--c-fill);vertical-align:-2px;animation:blink 1.1s steps(2) infinite} @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}} .c-dash{padding:20px;display:flex;flex-direction:column;gap:14px} .d-card{border:1px solid var(--c-hair);border-radius:0;padding:16px;background:var(--c-panel)} .d-card .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--c-dim2)} .d-card .v{font-family:var(--disp);font-size:1.7rem;font-weight:700;letter-spacing:-.03em;margin-top:6px;color:var(--c-txt)} .d-card .v em{font-style:normal;font-size:.8rem;color:var(--c-ok);margin-left:8px;font-family:var(--mono)} .bars{display:flex;gap:6px;align-items:flex-end;height:74px;margin-top:12px} /* barras en gris: en software financiero la barra es estructura, no marca. El color se reserva para el mes en curso, que sí significa algo. */ .bars i{flex:1;background:var(--c-fill2);border-radius:0;transition:height 1.2s cubic-bezier(.3,.7,.3,1)} .bars i:last-child{background:var(--c-fill)} .d-foot{font-family:var(--mono);font-size:.62rem;color:var(--c-dim2);display:flex;justify-content:space-between} .d-foot b{color:var(--c-dim2);font-weight:500} /* la línea de presupuesto: contexto debajo de la cifra grande, porque un número solo no dice si el mes va bien */ .d-sub{font-family:var(--mono);font-size:.65rem;color:var(--c-dim);margin-top:7px;letter-spacing:.01em} .d-sub b{color:var(--c-ok);font-weight:600} /* tabla de indicadores: renglones tabulados, como los lee un director en un estado de resultados, no tarjetas sueltas con un dato cada una */ .fin{border:1px solid var(--c-hair);background:var(--c-panel);padding:4px 16px;flex:1;display:flex;flex-direction:column;justify-content:center} .fin-row{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:13px 0;border-bottom:1px solid var(--c-hair); } .fin-row:last-child{border-bottom:0} .fin-row span{font-size:.76rem;color:var(--c-dim);letter-spacing:.005em} .fin-row b{ font-family:var(--disp);font-size:1.02rem;font-weight:600; letter-spacing:-.015em;color:var(--c-txt);font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:9px; } /* la variación al lado de la cifra, en el semáforo de siempre: verde si mejoró contra el mes pasado, rojo si empeoró, ámbar si hay que verlo */ .fin-row em{ font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:500; letter-spacing:.02em; } .fin-row em.up{color:var(--c-ok)} .fin-row em.dn{color:var(--c-bad)} .fin-row em.wr{color:var(--c-warn)} /* ---------- métricas ---------- */ .stats{margin-top:0;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(4,1fr)} @media(max-width:860px){.stats{grid-template-columns:1fr 1fr}} .stat{padding:34px 26px 40px;border-right:1px solid var(--hair);text-align:left} .stat:last-child{border-right:0} @media(max-width:860px){.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--hair)}} .stat b{font-family:var(--disp);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.038em;display:block;line-height:1;color:var(--txt)} .stat b i{font-style:normal;color:var(--blue)} .stat span{display:block;margin-top:10px;font-size:.82rem;color:var(--dim);max-width:16em} section{position:relative;z-index:1} .sec{padding:130px 0} @media(max-width:800px){.sec{padding:80px 0}} .sec-head{margin-bottom:70px} /* ---------- Clientes ---------- */ .clients{background:var(--white);color:var(--txt);padding:110px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} /* línea de confianza sobre los logos (patrón "Trusted by" de Cursor) */ .clients h2{max-width:14em} .clients-sub{color:var(--dim);margin-top:18px;max-width:36em;font-size:1.02rem} /* logos de clientes: fila quieta y compacta; al clic se abre la ficha de la empresa */ .cl-row{display:flex;justify-content:center;gap:24px;margin-top:56px;flex-wrap:wrap} .cl-tile{ background:var(--white);border:1px solid var(--hair);border-radius:18px; padding:30px 52px 22px;cursor:pointer;font-family:inherit; display:flex;flex-direction:column;align-items:center;gap:16px; transition:transform .3s cubic-bezier(.3,.7,.3,1), box-shadow .3s, border-color .3s; } /* PNG planos pre-generados en el marino corporativo #0E2455 (pixel a pixel, sin filtros) */ .cl-tile img{height:98px;object-fit:contain;display:block} @media(max-width:700px){.cl-tile{padding:20px 30px 16px}.cl-tile img{height:66px}} .cl-tile:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(14,36,85,.3);border-color:var(--navy)} .cl-tile.on{border-color:var(--navy)} /* invitación explícita al clic */ .cl-tile .hint{ font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--dim2);transition:color .2s ease; } .cl-tile:hover .hint, .cl-tile.on .hint{color:var(--acento-txt)} .cl-detail{ max-width:720px;margin:0 auto;overflow:hidden;max-height:0;opacity:0; transition:max-height .45s ease, opacity .35s ease, margin-top .35s ease; } .cl-detail.open{max-height:460px;opacity:1;margin-top:26px} .cl-detail-in{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:30px 34px} /* el renglón de grupo: sitúa a la empresa antes de decir su nombre */ .cl-grupo{ display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.17em; text-transform:uppercase;color:var(--dim2);margin-bottom:11px; } .cl-detail-in h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:10px} .cl-detail-in p{color:var(--dim);font-size:.95rem} /* lo que APX construyó: bloque de contenido, ya no una nota de pendiente */ .cl-detail-in .todo{ display:block;margin-top:18px;padding:16px 20px; background:var(--bg);border-left:3px solid var(--navy);border-radius:0; font-size:.92rem;line-height:1.6;color:var(--txt); } .cl-detail-in .todo b{ display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);margin-bottom:8px;font-weight:500; } .clients-note{ margin-top:60px;padding-top:28px;border-top:1px solid var(--hair); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center; } .clients-note p{font-size:.95rem;color:var(--dim);max-width:44em} .clients-note p b{color:var(--txt);font-weight:600} /* ---------- Sistemas: bloque de texto + ventana de demo (estilo Cursor) ---------- */ .caps{display:flex;flex-direction:column;gap:96px;margin-top:24px} .cap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center} .cap.flip .cap-txt{order:2} .cap.flip .win{order:1} @media(max-width:900px){.cap{grid-template-columns:1fr;gap:30px}.cap.flip .cap-txt{order:1}.cap.flip .win{order:2}} .cap-txt .n{font-family:var(--mono);color:var(--dim2);font-size:.85rem;letter-spacing:.1em;display:block;margin-bottom:14px} .cap-txt h3{font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.025em;margin-bottom:14px} .cap-txt p{color:var(--dim);font-size:1rem;max-width:30em} /* ventana de demo genérica: oscura sobre página clara, como la consola */ .win{ background:var(--c-bg);border:1px solid #D7D9DE;border-radius:16px;overflow:hidden; box-shadow:0 40px 90px -30px rgba(14,36,85,.38), 0 18px 40px -26px rgba(14,36,85,.28); } .win .wa-stage{background:#FFFFFF;display:flex;flex-direction:column;min-height:340px} .win .wa-stage .wa-body{min-height:0} /* feed tipo terminal para automatización */ .pipe{padding:20px 18px;font-family:var(--mono);font-size:.78rem;display:flex;flex-direction:column;gap:10px;min-height:280px;justify-content:flex-end} .pl{display:flex;gap:10px;align-items:baseline;animation:pop .35s ease both;line-height:1.5} .pl .f{color:var(--txt);flex-shrink:0} .pl .a{color:var(--c-dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pl .s{margin-left:auto;flex-shrink:0} .pl .s.ok{color:var(--c-ok)} .pl .s.warn{color:#FFC24B} .pipe-foot{ border-top:1px solid var(--c-hair);padding:12px 18px;font-family:var(--mono);font-size:.66rem; color:var(--c-dim2);display:flex;justify-content:space-between;letter-spacing:.08em; } .pipe-foot b{color:var(--c-dim2);font-weight:500} /* dashboard grande para inteligencia */ /* El tablero de dirección va en retrato: una columna, tarjetas apiladas. Rompe el ritmo de tres rectángulos anchos idénticos, y de paso deja ver la foto vertical que hay detrás. */ .dash2{padding:20px;display:grid;grid-template-columns:1fr;gap:14px;min-height:520px} .stage.alta{align-items:center} @media(max-width:900px){.dash2{min-height:0}} .dash2 .col{display:flex;flex-direction:column;gap:14px} .dash2 .bars{height:150px} .dash2 .col{gap:14px} /* en retrato la ventana no llena el ancho de su columna */ .stage.alta .win{max-width:420px;margin:0 auto} /* franja "cualquier reto" */ .any{ margin-top:96px;border:1px solid var(--hair);border-radius:16px;padding:42px 44px;background:var(--white); display:flex;align-items:center;gap:30px;flex-wrap:wrap; } .any .grow{flex:1;min-width:280px} .any h3{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:8px} .any p{color:var(--dim);font-size:1rem;max-width:44em} /* subtítulo de ciclo de venta en cada pilar */ /* capacidades técnicas: lo que APX puede construir más allá de la operación */ /* la rejilla .cap-* se retiró: seis tarjetas iguales no demostraban nada */ /* tarjetas por reto: el visitante se encuentra por su dolor, no por su industria */ .reto-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px} @media(max-width:820px){.reto-grid{grid-template-columns:1fr}} .reto{ text-align:left;background:var(--white);border:1px solid var(--hair);border-radius:18px; padding:34px 32px;cursor:pointer;font-family:var(--body);position:relative;overflow:hidden; transition:transform .3s cubic-bezier(.3,.7,.3,1), box-shadow .3s, border-color .3s; display:flex;flex-direction:column;justify-content:flex-start; } /* mismo gesto que las opciones del menú: se corre un poco hacia donde lleva */ .reto:hover{transform:translateX(4px);box-shadow:0 24px 50px -28px rgba(14,36,85,.28);border-color:var(--navy)} .reto::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--navy); transform:scaleY(0);transition:transform .3s ease;transform-origin:top; } .reto:hover::before{transform:scaleY(1)} .reto h3{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:10px} .reto p{color:var(--dim);font-size:.94rem} /* sin flecha: contaminaba la tarjeta. Toda la caja es el botón; se reconoce por el movimiento y la barra al pasar el cursor. El lector de pantalla recibe la frase completa por el aria-label. */ /* cualquier industria: la primera frase del párrafo, en el color del texto */ .ind-frase{display:block;color:var(--txt);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;margin-bottom:6px} /* ---------- La cifra: calculadora de la inatención ---------- */ .cifra-box{ margin-top:56px;background:var(--white);border:1px solid var(--hair);border-radius:20px; padding:44px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center; } @media(max-width:860px){.cifra-box{grid-template-columns:1fr;padding:30px 24px;gap:34px}} .sl{margin-bottom:26px} .sl:last-child{margin-bottom:0} .sl label{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;color:var(--dim);margin-bottom:10px} .sl label b{color:var(--txt);font-weight:650;white-space:nowrap} input[type=range]{ width:100%;appearance:none;-webkit-appearance:none;height:5px;border-radius:99px;outline:none;cursor:pointer; background:linear-gradient(to right, var(--navy) var(--p,50%), var(--hair2) var(--p,50%)); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff; border:5px solid var(--navy);cursor:grab; } .cifra-out{text-align:center} .cifra-out .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2)} .cifra-out .big{ font-family:var(--disp);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;letter-spacing:-.035em; line-height:1.05;margin:12px 0 4px;color:var(--navy); } .cifra-out .per{color:var(--dim);font-size:.92rem;margin-bottom:20px} .cifra-out .split{display:flex;justify-content:center;gap:26px;margin-bottom:24px;flex-wrap:wrap} .cifra-out .split div{text-align:center} .cifra-out .split b{display:block;font-family:var(--disp);font-size:1.15rem;color:var(--txt)} .cifra-out .split span{font-size:.72rem;color:var(--dim2)} .cifra-out .note{font-size:.76rem;color:var(--dim2);max-width:26em;margin:16px auto 0} /* ---------- Método ---------- */ .method{background:var(--white);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .steps{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--hair)} @media(max-width:860px){.steps{grid-template-columns:1fr}} .step{padding:40px 34px 46px;border-right:1px solid var(--hair)} @media(max-width:860px){.step{border-right:0;border-bottom:1px solid var(--hair)}} .step .k{font-family:var(--mono);font-size:.7rem;color:var(--info-txt);letter-spacing:.16em;margin-bottom:18px;display:block} .step h3{font-size:1.3rem;margin-bottom:10px} .step p{color:var(--dim);font-size:.92rem} /* ---------- Final (banda marino) ---------- */ .final{ padding:150px 0 130px;text-align:center;position:relative;overflow:hidden; background:linear-gradient(180deg,#0A1128 0%,var(--navy) 100%);color:#fff; } .final .aurora{opacity:.5;filter:blur(70px); background: radial-gradient(34% 26% at 50% 10%, rgba(59,108,255,.5) 0%, transparent 100%), radial-gradient(26% 22% at 84% 40%, rgba(90,130,255,.25) 0%, transparent 100%); } .final h2{font-size:clamp(2.6rem,6.4vw,4.8rem);max-width:13em;margin:0 auto;color:#fff} .final p{color:#9BAAC9;margin:26px auto 44px;max-width:30em;font-size:1.05rem} .final .row-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* caja de contacto directo: abre el correo del visitante ya redactado */ /* Contacto en una línea. Antes: caja de 660 px con cuatro campos y un textarea. Un formulario grande al cierre compite con el CTA y pide más de lo que un primer contacto necesita. */ .contacto-linea{ margin:44px auto 0;display:flex;align-items:center;justify-content:center; gap:18px;flex-wrap:wrap; } .contacto-linea span{ font-family:var(--mono);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:#9BAAC9; } .cb-mail{ font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.35rem); letter-spacing:-.01em;color:var(--papel); padding:11px 22px;border:1px solid rgba(247,247,243,.42); transition:background .2s ease,border-color .2s ease; } .cb-mail:hover{background:rgba(247,247,243,.1);border-color:var(--papel)} @media(max-width:520px){ .contacto-linea{gap:12px} .cb-mail{font-size:.98rem;padding:10px 16px} } footer{padding:70px 0 40px;position:relative;z-index:1;background:#0A1128;border-top:1px solid rgba(255,255,255,.08)} .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:60px} @media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;gap:36px}} .f-brand img{width:96px;height:auto;display:block;filter:brightness(0) invert(1);opacity:.92} .f-brand small{display:block;margin-top:16px;color:#9AA8C8;font-size:.85rem;max-width:20em;line-height:1.6} .f-col h4{ font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:#8E9CC4;margin-bottom:18px; } .f-col a,.f-col button{ display:block;color:#9BAAC9;font-size:.9rem;padding:6px 0;transition:color .2s; background:none;border:none;cursor:pointer;font-family:var(--body);text-align:left;width:100%; } .f-col a:hover,.f-col button:hover{color:#fff} .f-bottom{ border-top:1px solid rgba(255,255,255,.08);padding-top:28px; display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; } .f-bottom small{color:#6E7FA3;font-size:.8rem;font-family:var(--mono)} /* el legal vive en la barra de abajo, junto al ©: es donde se busca, y no compite con las columnas de navegación */ .f-bottom .f-legal{ color:#6E7FA3;font-size:.8rem;font-family:var(--mono); transition:color .25s ease; } .f-bottom .f-legal:hover{color:var(--papel)} /* los dos legales juntos a la derecha del ©, separados por un filete */ .f-legales{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .f-legales .f-legal + .f-legal{padding-left:18px;border-left:1px solid rgba(255,255,255,.14)} .f-bottom .f-legal[aria-current="page"]{color:var(--papel)} /* ---------- Chat flotante (oscuro: es el producto) ---------- */ #chat-fab{ position:fixed;right:28px;bottom:28px;z-index:100;width:60px;height:60px;border-radius:50%; background:var(--navy);border:none;cursor:pointer;box-shadow:0 14px 40px -10px var(--sombra-navy); display:flex;align-items:center;justify-content:center;transition:transform .2s ease; } #chat-fab:hover{transform:scale(1.08)} #chat-fab svg{width:25px;height:25px;color:var(--papel)} #chat-fab .ping{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--wa);border:2.5px solid #fff} #chat-panel{ position:fixed;right:28px;bottom:102px;z-index:100;width:min(390px,calc(100vw - 44px)); background:#12141C;border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden; box-shadow:0 50px 100px -20px rgba(10,17,40,.55);display:flex;flex-direction:column;height:520px; opacity:0;transform:translateY(18px) scale(.97);pointer-events:none;transition:all .3s cubic-bezier(.2,.8,.3,1); } #chat-panel.open{opacity:1;transform:none;pointer-events:auto} .cp-top{background:#0D1730;padding:15px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--c-hair)} .cp-top .dot{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 10px var(--wa)} .cp-top strong{font-size:.9rem;font-family:var(--disp);letter-spacing:.02em;color:#fff;margin-right:auto} .cp-top small{margin-left:auto;font-size:.62rem;letter-spacing:.04em;color:#7487B8;font-family:var(--mono)} .cp-top button{background:none;border:none;color:#7487B8;cursor:pointer;font-size:1.1rem;line-height:1;padding:2px 4px} /* estilo terminal: "VIPER ›" antes de cada mensaje, monospace, sin burbujas */ .cp-body{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;background:#0E1016} .msg{max-width:100%;font-family:var(--mono);font-size:.8rem;line-height:1.65;animation:pop .3s ease both} .msg.bot{color:#D8DEEA;align-self:stretch} .msg.bot::before{content:"VIPER › ";color:#8FA6D8;font-weight:500;letter-spacing:.04em} .msg.bot strong{color:#fff;font-weight:600} .msg.user{color:#F7F7F3;align-self:flex-end;text-align:right} .msg.user::before{content:"› "} .typing{display:flex;gap:4px;padding:4px 0;align-items:center} .typing i{width:6px;height:6px;border-radius:50%;background:var(--c-dim2);animation:tb 1.3s infinite} .typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s} @keyframes tb{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}} .cp-foot{padding:12px;border-top:1px solid var(--c-hair);background:#12141C} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{ padding:8px 13px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:transparent; font-size:.75rem;font-weight:500;color:#D5DAE6;cursor:pointer;transition:all .15s ease;font-family:var(--mono); } .chip:hover{background:var(--papel);border-color:var(--papel);color:var(--navy)} .cp-in{display:flex;gap:8px} .cp-in input{ flex:1;padding:11px 13px;border:1px solid rgba(255,255,255,.16);border-radius:8px;font-size:.8rem; font-family:var(--mono);outline:none;background:#0E1016;color:#fff; } .cp-in input::placeholder{color:#5C6272} .cp-in input:focus{border-color:#8FA6D8} .cp-in button{padding:0 16px;background:var(--papel);color:var(--navy);border:0;border-radius:8px;cursor:pointer;font-weight:600;font-family:var(--mono);font-size:.8rem} /* nota de privacidad al pie, estilo consultora */ /* ---------- Lo que construimos ---------- */ /* .rubro y no .cap: la portada ya usa .cap para los bloques de Sistemas y las dos reglas se pisaban entre páginas. */ /* Cada fila se abre y muestra su información: una sola a la vez, así el ojo nunca recibe más de una idea. Sin pantalla al lado. */ /* ---------- puerta a la calculadora ---------- */ /* La calculadora era la sección más larga de Qué construimos y competía con los rubros. Ahora es una puerta: quien quiera la cifra, entra. */ .puerta{ display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap; margin-top:52px;padding:34px 38px;background:var(--white); border:1px solid var(--hair);cursor:pointer; transition:border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease; } .puerta:hover{ border-color:var(--navy);transform:translateY(-3px); box-shadow:0 24px 50px -30px rgba(14,36,85,.34); } .puerta .k{ display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.2em; text-transform:uppercase;color:var(--dim2);margin-bottom:12px; } .puerta h3{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:11px} .puerta p{color:var(--dim2);font-size:.95rem;line-height:1.6;max-width:44ch} .puerta-cta{ flex:none;font-weight:600;font-size:.93rem;color:var(--papel); background:var(--navy);padding:15px 28px;border-radius:99px;white-space:nowrap; transition:transform .3s cubic-bezier(.2,.7,.2,1); } .puerta:hover .puerta-cta{transform:translateX(4px)} @media(max-width:640px){ .puerta{padding:26px 22px;gap:20px} .puerta-cta{width:100%;text-align:center} } /* migaja de regreso arriba de la calculadora */ .volver{margin-bottom:20px} .volver a{ font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim2);transition:color .25s ease; } .volver a:hover{color:var(--navy)} .rubros{margin-top:52px;border-top:1px solid var(--hair)} .rubro{ display:block;width:100%;text-align:left;cursor:pointer; background:transparent;border:0;border-bottom:1px solid var(--hair); padding:26px 4px 26px 0;font-family:var(--body);position:relative; transition:padding-left .38s cubic-bezier(.2,.7,.2,1); } /* el nombre y su etiqueta en el mismo renglón: de un vistazo se ve cuáles rubros son agentes y cuáles son software que se construye */ .rubro b{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-family:var(--disp);font-size:1.35rem;font-weight:700; letter-spacing:-.032em;color:var(--dim);transition:color .3s ease; } .rubro b{ display:block;font-family:var(--disp);font-size:1.35rem;font-weight:700; letter-spacing:-.032em;color:var(--dim);transition:color .3s ease; } .rubro p{ color:var(--dim2);font-size:.98rem;line-height:1.62;max-width:60ch; max-height:0;opacity:0;margin-top:0;overflow:hidden; transition:max-height .42s cubic-bezier(.2,.7,.2,1), opacity .3s ease, margin-top .42s cubic-bezier(.2,.7,.2,1); } .rubro:hover b{color:var(--txt)} .rubro.on{padding-left:20px} .rubro.on b{color:var(--txt)} .rubro.on p{max-height:16rem;opacity:1;margin-top:13px} /* el filete que marca cuál está abierta */ .rubro::before{ content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px; background:var(--navy);transform:scaleY(0);transform-origin:center; transition:transform .38s cubic-bezier(.2,.7,.2,1); } .rubro.on::before{transform:scaleY(1)} .rubro:focus-visible{outline:2px solid var(--blue);outline-offset:3px} @media(max-width:820px){ .rubros{margin-top:38px} .rubro{padding:22px 4px 22px 0} .rubro b{font-size:1.18rem} .rubro p{max-width:100%} } /* ---------- Las ventanas de demo en pantalla angosta ---------- */ /* A 375 px el título tenía 92 px para 243: se cortaba siempre. En vez de encoger la letra hasta lo ilegible, se libera espacio quitando lo decorativo y se recorta la descripción, no el nombre del archivo. */ @media(max-width:560px){ .c-bar{grid-template-columns:auto 1fr;gap:8px;padding:10px 12px} .c-bar .tl{display:none} .c-bar b{text-align:left;font-size:.68rem;letter-spacing:.1em} .pl .a{display:none} .pl{gap:8px} .doc-body,.code{font-size:.62rem} .doc-tabs span{font-size:.55rem;padding:8px 9px} /* en 375px el pie del tablero no cabe en un renglón y se corta a la derecha; se apila en dos y se achica */ .d-foot{flex-wrap:wrap;gap:4px;font-size:.56rem} .d-sub{font-size:.6rem} .fin{padding:2px 13px} .fin-row{padding:11px 0} .fin-row span{font-size:.72rem} .fin-row b{font-size:.95rem} } /* ---------- páginas legales ---------- */ /* Un aviso de privacidad se lee distinto al resto del sitio: renglón más corto, más aire entre párrafos y jerarquía por numeración, no por peso. Se lee poco pero se consulta con lupa. */ .legal-fecha{ font-family:var(--mono);font-size:.7rem;letter-spacing:.1em; color:var(--dim2);margin-top:18px;text-transform:uppercase; } .legal-cuerpo{max-width:62ch;margin-top:52px} .legal-cuerpo h2{ font-size:1.1rem;font-weight:700;letter-spacing:-.02em; margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--hair); } .legal-cuerpo h2:first-child{margin-top:0;padding-top:0;border-top:0} .legal-cuerpo p{color:var(--dim);font-size:.98rem;line-height:1.72;margin-bottom:14px} .legal-cuerpo p b{color:var(--txt);font-weight:600} .legal-cuerpo ul{margin:0 0 16px 0;padding-left:0;list-style:none} .legal-cuerpo li{ color:var(--dim);font-size:.98rem;line-height:1.7; padding:6px 0 6px 22px;position:relative; } .legal-cuerpo li::before{ content:"";position:absolute;left:4px;top:.95em; width:5px;height:1px;background:var(--dim2); } .legal-cuerpo a{color:var(--acento-txt);text-decoration:underline;text-underline-offset:3px} .legal-cierre{ margin-top:44px;padding-top:26px;border-top:1px solid var(--hair); font-size:.88rem!important;color:var(--dim2)!important; } @media(max-width:640px){ .legal-cuerpo{margin-top:36px} .legal-cuerpo h2{margin-top:34px;padding-top:20px} } /* ---------- 404 ---------- */ /* Una 404 no debe ser un callejón: dice qué pasó en una línea y ofrece las rutas reales. Ojo: se sirve desde CUALQUIER dirección (/a/b/c), así que en 404.html todas las rutas de assets y enlaces van absolutas desde la raíz. Con rutas relativas la página saldría sin estilos. */ .nf{min-height:58vh;display:flex;align-items:center} .nf-k{ display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em; text-transform:uppercase;color:var(--dim2);margin-bottom:16px; } .nf h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:18px} .nf-sub{color:var(--dim);font-size:1.02rem;max-width:34em;margin-bottom:44px} /* OJO: esto NO puede ser un