: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;
  }

  .grid-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(to right, var(--hair) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
    background-size:110px 110px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
            mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
    opacity:.35;
  }

  /* .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)}

  .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:11px;padding:8px 15px 12px}
  .menu-foot img{height:18px;width:auto;flex:none;opacity:.9}
  .menu-foot b{
    display:block;font-family:var(--disp);font-size:.8rem;font-weight:700;
    letter-spacing:.16em;color:var(--navy);
  }
  .menu-foot span{display:block;font-size:.76rem;color:var(--dim);margin-top:2px}

  @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. */
  .stage.f-flujo{--foto:url('foto-flujo.0ee41381.jpg')}       /* tubos de luz   · consola del hero */
  .stage.f-cruce{--foto:url('foto-cruce.d76087ba.jpg')}       /* cruce peatonal · 01 front office  */
  .stage.f-puerto{--foto:url('foto-puerto.jpg')}     /* puerto aéreo   · 02 back office   */
  .stage.f-curvas{--foto:url('foto-curvas.d229dda1.jpg')}     /* nervaduras     · 03 inteligencia  */
  /* de reserva, por si quiere cambiar alguna */
  .stage.f-domo{--foto:url('foto-domo.494951fd.jpg')}
  .stage.f-ductos{--foto:url('foto-ductos.jpg')}
  .stage.f-esquina{--foto:url('foto-esquina.jpg')}
  .stage.f-patio{--foto:url('foto-patio.jpg')}
  .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)}
  .c-live{
    justify-self:end;font-family:var(--mono);font-size:.62rem;color:var(--c-ok);
    display:flex;align-items:center;gap:7px;letter-spacing:.12em;
    white-space:nowrap;   /* se partía en dos renglones en las ventanas angostas */
  }
  .c-live i{width:7px;height:7px;border-radius:50%;background:#1FA35C;box-shadow:0 0 8px rgba(31,163,92,.55);animation:pulse 1.8s infinite}
  @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;
  }
  .reto:hover{transform:translateY(-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}
  /* la flecha sustituye al renglón "Platicar de este reto": toda la caja ya
     es el botón, así que la palabra sobraba. El lector de pantalla recibe la
     frase completa por el aria-label. */
  .reto::after{
    content:"→";display:block;margin-top:20px;font-size:1.2rem;line-height:1;
    color:var(--dim2);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),color .3s ease;
  }
  .reto:hover::after{color:var(--navy);transform:translateX(7px)}

  /* ---------- 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)}

  /* ---------- 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(--navy)}
  #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}
    .c-live{font-size:.56rem;gap:5px}
    .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}
  }

  /* ---------- Movimiento reducido ---------- */
  /* Para quien activó "reducir movimiento" en su sistema, normalmente por
     mareo o vértigo. No se apaga todo con un 0.01ms global: eso también mata
     la retroalimentación útil. Se quita el DESPLAZAMIENTO (lo que marea) y se
     conservan los cambios de color y de opacidad, que informan sin mover. */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}

    /* el contenido aparece en su sitio, sin subir desde abajo */
    .rv{opacity:1;transform:none;transition:none}

    /* nada de levantarse, encogerse ni girar al pasar el cursor */
    .btn:hover,.nav-feat:hover,.cl-tile:hover,.reto:hover,
    .menu-sheet a:hover{transform:none}
    .brand:hover .b-sym,.brand .b-sym.spin,.brand:active .b-sym,
    .brand:hover .b-word{transform:none;transition:none}

    /* el punto lima deja de latir; se queda encendido */
    .nav-feat i{animation:none}

    /* la hoja del menú aparece y desaparece sin deslizarse */
    .menu-sheet{transition:opacity .2s ease}
    .menu-sheet:not(.open){transform:none}
    .menu-sheet.open{transform:none}

    /* el color sí sigue transicionando: es la señal de que algo respondió */
  }