/* ==========================================================================
   NORBEX — Dirección visual «sala de control»
   --------------------------------------------------------------------------
   Sustituye a styles.css y proposal.css.

   Paleta del kit de identidad aprobado, ejecutada en profundidad:
   #0B1F3B · #2563EB · #00D4FF · #64748B · #F1F5F9
   ========================================================================== */

:root{
  --abismo:#04091A;
  --noche:#0B1F3B;
  --noche-clara:#12294B;
  --azul:#2563EB;
  --cian:#00D4FF;
  --acero:#64748B;
  --niebla:#F1F5F9;
  --texto:#C6D4E5;
  --texto-tenue:#899DB6;

  --degradado:linear-gradient(96deg,var(--cian) 0%,var(--azul) 68%,#1B4FD8 100%);
  --borde:rgba(120,170,220,.28);
  --borde-vivo:rgba(0,212,255,.46);

  --f-titulo:'Montserrat','Inter',system-ui,sans-serif;
  --f-texto:'Inter','Segoe UI',system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --radio:16px;
  --envoltura:min(1240px,calc(100% - 56px));
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:110px}

body{
  margin:0;
  background:var(--abismo);
  color:var(--texto);
  font-family:var(--f-texto);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* --- Fondo: rejilla técnica + halos + grano ------------------------------ */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  /* Tres capas, de arriba abajo:
       - los NODOS, en las intersecciones cada cuatro celdas
       - la rejilla principal, cada 68 px
       - la rejilla fina, cada 17 px (cuatro divisiones por celda)
     Los nodos son lo que sugiere integraciones: puntos de conexion. No se
     dibuja un grafo literal, que se ha visto ya demasiadas veces, sino la
     retícula de un instrumento. */
  background-image:
    radial-gradient(circle at center,rgba(0,212,255,.55) 1.8px,rgba(0,212,255,.14) 5px,transparent 10px),
    radial-gradient(circle at center,rgba(0,212,255,.42) 1.6px,rgba(0,212,255,.10) 4.5px,transparent 9px),
    linear-gradient(rgba(120,180,240,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,180,240,.10) 1px,transparent 1px),
    linear-gradient(rgba(120,180,240,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,180,240,.038) 1px,transparent 1px);
  background-size:
    204px 204px,
    340px 340px,
    68px 68px,
    68px 68px,
    17px 17px,
    17px 17px;
  /* El nodo se dibuja en el centro de su baldosa de 272: desplazando la capa
     (-102, -136) ese centro cae en (34, 0), que es una interseccion de la
     rejilla. El desfase de 34 evita ademas que una linea caiga justo en el
     centro de la mascara, que es su punto mas opaco. */
  background-position:
    -68px -102px,
    0px 34px,
    34px 0,
    34px 0,
    34px 0,
    34px 0;
  -webkit-mask-image:radial-gradient(ellipse 118% 76% at 50% 0%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 118% 76% at 50% 0%,#000 20%,transparent 80%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  /* Los topes usan el mismo color con alfa 0: 'transparent' es negro con
     alfa 0 y al interpolar deja una banda turbia visible. */
  /* Tres resplandores en lugar de dos: uno frio arriba a la derecha, uno azul
     abajo a la izquierda y uno tenue en el centro. Juntos dan profundidad sin
     que ninguno se note por separado. */
  background:
    radial-gradient(820px 560px at 78% 3%,rgba(0,212,255,.18),rgba(0,212,255,0) 62%),
    radial-gradient(980px 680px at 8% 86%,rgba(37,99,235,.24),rgba(37,99,235,0) 66%),
    radial-gradient(720px 520px at 52% 44%,rgba(0,212,255,.065),rgba(0,212,255,0) 72%);
}

body > *{position:relative;z-index:2}

h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:800;color:#fff;margin:0;letter-spacing:-.035em;line-height:1.08}
/* Palabras largas. En pantallas estrechas palabras como 'Automatizacion' o
   'Consolidacion' no caben en el ancho de un recuadro y se salian por el
   borde en vez de partirse. Asi parten antes que desbordar. */
h1,h2,h3,h4,p,li,summary,span{overflow-wrap:break-word}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}

.wrap{width:var(--envoltura);margin-inline:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:var(--noche);padding:12px 16px;border-radius:8px;z-index:99;font-weight:700}

/* Texto solo para lectores de pantalla */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Foco visible para teclado */
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--cian);outline-offset:3px;border-radius:8px;
}

/* Etiquetas técnicas */
.kicker,.eyebrow{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cian);
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before,.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--cian);box-shadow:0 0 8px var(--cian);
}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--cian);box-shadow:0 0 10px var(--cian);animation:latido 2.4s ease-in-out infinite}

@keyframes latido{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes barrido{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes flujo{to{stroke-dashoffset:-72}}
@keyframes respirar{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes anillo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@keyframes parpadeo{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:40;
  height:84px;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(4,9,26,.94),rgba(4,9,26,.66));
  border-bottom:1px solid var(--borde);
}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}
/* --------------------------------------------------------------------------
   Destello en el logotipo de la cabecera
   --------------------------------------------------------------------------
   Una banda de luz recorre el logotipo cada pocos segundos.

   La clave esta en la mascara: se usa el propio archivo del logotipo como
   mascara, de modo que la luz solo se ve sobre las letras y el isotipo, nunca
   sobre el rectangulo vacio que los rodea. Sin la mascara se veria una banda
   diagonal cruzando toda la caja, que es justo lo que delata el truco.
   -------------------------------------------------------------------------- */
.logo{
  width:196px;display:block;position:relative;
  --mascara-logo:url('assets/norbex-logotipo.webp');
}
.logo img{display:block;width:100%;height:auto}
/* Los dos logotipos van en el HTML y el CSS muestra uno. Se hace asi, y no
   cambiando el src con JavaScript, porque entonces el logotipo equivocado
   aparece durante un instante en cada carga.

   OJO con la especificidad: '.logo img' es (0,1,1) y gana a un selector de una
   sola clase como '.logo-oscuro' (0,1,0). Estas reglas necesitan dos clases
   para imponerse; con una sola, los dos logotipos se veian apilados. */
.logo .logo-oscuro{display:none}
.tema-oscuro .logo .logo-claro{display:none}
.tema-oscuro .logo .logo-oscuro{display:block}
.logo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 35%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.55) 65%,
    rgba(255,255,255,0) 100%);
  background-size:170px 100%;
  background-repeat:no-repeat;
  background-position:-170px 0;
  -webkit-mask-image:var(--mascara-logo);
  mask-image:var(--mascara-logo);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:destello-logo 6.5s ease-in-out infinite;
}
.marca-color .logo{--mascara-logo:url('assets/norbex-logotipo.webp')}

@keyframes destello-logo{
  0%, 62%{ background-position:-170px 0; }
  100%{ background-position:270px 0; }
}
/* Con el tema oscuro la cabecera es azul noche, asi que el logotipo y su
   mascara pasan a la version blanca. */
.tema-oscuro .logo{--mascara-logo:url('assets/norbex-logotipo-blanco.webp')}
.header nav{display:flex;align-items:center;gap:32px;font-size:13.5px;font-weight:700}
.header nav a{color:#AFC3D9;transition:color .25s ease}
.header nav a:not(.nav-cta):hover{color:var(--cian)}
/* El boton de contacto necesita dos clases en el selector. Con '.nav-cta' a
   secas (0,1,0) perdia contra '.header nav a' (0,1,2), asi que el color del
   texto se quedaba en el gris azulado de los enlaces y el boton principal del
   sitio salia casi ilegible sobre su propio fondo. */
.header nav a.nav-cta{
  padding:14px 22px;border-radius:9px;color:#04101F;
  background:var(--degradado);
  box-shadow:0 0 0 1px rgba(0,212,255,.35),0 12px 34px -10px rgba(0,180,255,.75);
  transition:transform .25s ease,box-shadow .25s ease;
}
.header nav a.nav-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,212,255,.6),0 18px 42px -10px rgba(0,190,255,.9);color:#04101F}
.menu{display:none;background:none;border:1px solid var(--borde);color:#DCE8F5;padding:10px 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* Botón de cambio de tema. Muestra el icono de lo que va a pasar, no el del
   estado actual: luna cuando se puede pasar a oscuro, sol cuando se puede
   volver a claro. */
.cambio-tema{
  display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  background:transparent;border:1px solid var(--borde);border-radius:9px;
  color:#AFC3D9;cursor:pointer;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.cambio-tema:hover{border-color:var(--borde-vivo);color:#fff;background:rgba(0,212,255,.08)}
.cambio-tema svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.cambio-tema .icono-sol{display:none}
.tema-oscuro .cambio-tema .icono-luna{display:none}
.tema-oscuro .cambio-tema .icono-sol{display:block}

/* ==========================================================================
   PORTADA
   ========================================================================== */
.hero{padding:84px 0 96px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center}
.hero-copy h1{font-size:clamp(42px,4.6vw,68px);letter-spacing:-.05em;margin:26px 0 0}
.hero-copy h1 span{
  background:var(--degradado);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(0,190,255,.4));
}
.hero-copy > p{margin-top:26px;font-size:18px;max-width:56ch}

.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}
.button{
  display:inline-flex;align-items:center;gap:11px;
  padding:17px 28px;border-radius:10px;
  font-family:var(--f-texto);font-weight:700;font-size:14.5px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
  cursor:pointer;
}
.button.primary{
  color:#04101F;background:var(--degradado);
  box-shadow:0 0 0 1px rgba(0,212,255,.4),0 16px 40px -12px rgba(0,180,255,.85);
}
.button.primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,212,255,.7),0 22px 50px -12px rgba(0,190,255,1)}
.button.secondary,.button.outline{border:1px solid var(--borde);color:#DCE8F5;background:rgba(255,255,255,.02)}
.button.secondary:hover,.button.outline:hover{border-color:var(--borde-vivo);background:rgba(0,212,255,.06);transform:translateY(-2px)}
.button b{font-weight:400}

.outcomes{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;font-size:13px;color:var(--texto-tenue)}
.outcomes span{display:flex;align-items:center;gap:9px}

/* ==========================================================================
   CONSOLA DE OPERACIÓN (la pieza central)
   ========================================================================== */
.system-card{
  position:relative;border-radius:20px;padding:20px;
  background:linear-gradient(155deg,rgba(18,41,75,.92),rgba(6,14,32,.96));
  border:1px solid var(--borde);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  isolation:isolate;overflow:hidden;
  animation:flotar 9s ease-in-out infinite;
}
.system-card::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,212,255,0) 38%,rgba(0,212,255,.13) 50%,rgba(0,212,255,0) 62%);
  transform:translateX(-120%);animation:barrido 7s ease-in-out infinite;
}
.esquinas{position:absolute;inset:0;z-index:4;pointer-events:none}
.system-card::after{
  content:"";position:absolute;top:9px;left:9px;right:9px;bottom:9px;z-index:4;pointer-events:none;
  border:1px solid rgba(0,212,255,.14);border-radius:12px;
  -webkit-mask:
    linear-gradient(#000 0 0) top left/14px 14px no-repeat,
    linear-gradient(#000 0 0) top right/14px 14px no-repeat,
    linear-gradient(#000 0 0) bottom left/14px 14px no-repeat,
    linear-gradient(#000 0 0) bottom right/14px 14px no-repeat;
  mask:
    linear-gradient(#000 0 0) top left/14px 14px no-repeat,
    linear-gradient(#000 0 0) top right/14px 14px no-repeat,
    linear-gradient(#000 0 0) bottom left/14px 14px no-repeat,
    linear-gradient(#000 0 0) bottom right/14px 14px no-repeat;
}

.system-top,.system-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--texto-tenue);font-weight:500;
}
.system-top{padding-bottom:15px;border-bottom:1px solid var(--borde)}
.system-top em{font-style:normal;color:#4ADE9B;display:flex;align-items:center;gap:8px}
.system-top em::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE9B;box-shadow:0 0 10px #4ADE9B;animation:latido 1.8s ease-in-out infinite}
.system-bottom{padding-top:14px}
.system-bottom i{width:6px;height:6px;display:inline-block;background:#33e9ad;border-radius:50%;margin-right:8px;box-shadow:0 0 8px #33e9ad}

.system-map{height:585px;position:relative;--ancho-nodo:136px}

/* Orbitas decorativas. Se centran con translate(-50%,-50%) sobre el mismo
   punto que el nucleo (x=50%, y=207px), asi que nunca se desalinean. */
.orbita{
  position:absolute;left:50%;top:207px;z-index:0;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(46,114,172,.5);border-radius:50%;
  pointer-events:none;
}
.orbita.o1{width:230px;height:230px}
.orbita.o2{width:330px;height:330px;border-color:rgba(46,114,172,.3);animation:girar 60s linear infinite}

/* Capa de conexiones. Las lineas las dibuja script.js en cada fotograma con
   las posiciones reales de los nodos, para que sigan su movimiento. */
.conexiones{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;overflow:visible;
}
.conexiones path{
  fill:none;stroke:#2e72ac;stroke-width:1.2;
  stroke-dasharray:6 7;stroke-linecap:round;
  animation:flujo 2.8s linear infinite;
  transition:stroke .3s ease;
}

/* Flotado suave de los nodos. Se anima 'transform', que es seguro aqui porque
   ningun nodo lo usa ya para colocarse: el nodo superior se centra con
   left:calc(50% - mitad del ancho), no con translateX(-50%). */
@keyframes flotar-nodo{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Todos los nodos miden lo mismo y centran su contenido, para que las parejas
   izquierda/derecha queden a la misma altura aunque un texto ocupe dos lineas. */
.node{
  position:absolute;width:var(--ancho-nodo);min-height:80px;bottom:auto;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  background:rgba(14,45,84,.85);border:1px solid #315d88;border-radius:9px;padding:12px;
  color:#fff;text-align:left;font:inherit;cursor:pointer;
  transition:border-color .3s ease,box-shadow .3s ease;
  animation:flotar-nodo 4.6s ease-in-out infinite;
}
.node small{display:block;color:#51cfe4;font-family:var(--f-mono);font-size:8px;letter-spacing:.14em}
/* 'Automatizacion' es una palabra larga: en pantallas estrechas no cabe en el
   ancho del recuadro y se salia por el borde. Con overflow-wrap se parte por
   donde haga falta en vez de desbordar. */
.node strong{display:block;font-size:13px;margin-top:4px;font-family:var(--f-titulo);font-weight:700;line-height:1.2;overflow-wrap:break-word}
.node::after{
  content:"";position:absolute;right:10px;top:10px;width:5px;height:5px;border-radius:50%;
  background:var(--cian);box-shadow:0 0 10px var(--cian);animation:parpadeo 2s ease-in-out infinite;
}
/* Reparto simetrico respecto al centro del diagrama, que cae en y=207:
   el nodo superior arriba y las dos filas a la misma distancia de ese centro
   por arriba y por abajo. */
.node.n1{left:0;top:97px}
.node.n2{right:0;top:97px;animation-delay:-1.15s}
.node.n2::after{animation-delay:-.65s}
.node.n3{left:0;top:237px;animation-delay:-2.3s}
.node.n3::after{animation-delay:-1.3s}
.node.n4{right:0;top:237px;animation-delay:-3.45s}
.node.n5{left:calc(50% - var(--ancho-nodo) / 2);top:15px;animation-delay:-1.7s}
.node.active{
  border-color:var(--cian);background:#123b68;
  box-shadow:0 0 0 1px rgba(18,214,232,.16),0 14px 34px rgba(0,116,219,.3);
}
.node.active::before{
  content:"";position:absolute;inset:-5px;border:1px solid rgba(0,212,255,.32);
  border-radius:12px;animation:anillo 2s ease-out infinite;
}
.node[aria-pressed="true"] small{color:#7AF5C5}

/* Centrado en el circulo punteado (y=207): 207 - 132/2 = 141 */
.core{position:absolute;left:50%;top:141px;transform:translateX(-50%);z-index:2;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(0,120,255,.24),rgba(4,12,28,.9) 68%);animation:respirar 3.6s ease-in-out infinite}
.core img{width:118px;height:auto;pointer-events:none;animation:flotar 4.2s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(0,102,255,.3))}
/* --------------------------------------------------------------------------
   Brillo sobre el isotipo de Norbex
   --------------------------------------------------------------------------
   Misma tecnica que el logotipo de la cabecera: el propio archivo del isotipo
   hace de mascara, asi que la luz solo recorre la cinta y no el cuadrado que
   la contiene. Se aplica donde aparece el isotipo suelto (nucleo del diagrama
   y pie).
   -------------------------------------------------------------------------- */
.brillo-marca{position:relative;display:block;line-height:0}
.brillo-marca::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.5) 40%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.5) 60%,
    rgba(255,255,255,0) 100%);
  background-size:60% 100%;
  background-repeat:no-repeat;
  background-position:-60% 0;
  -webkit-mask-image:url('assets/norbex-isotipo.webp');
  mask-image:url('assets/norbex-isotipo.webp');
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:destello-logo 6.5s ease-in-out infinite;
  animation-delay:-1.2s;
}

.core span{position:absolute;bottom:6px;z-index:2;font-family:var(--f-mono);font-size:8px;letter-spacing:.24em;color:#7f9fbe}

/* Halo que se expande desde el isotipo. Va por fuera del nucleo (inset
   negativo), asi que no tapa la marca. */
.core::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  border:1px solid rgba(0,212,255,.42);pointer-events:none;
  animation:halo-nucleo 3.4s ease-out infinite;
}
@keyframes halo-nucleo{
  0%{opacity:.8;transform:scale(.86)}
  70%{opacity:0}
  100%{opacity:0;transform:scale(1.16)}
}

.live-panel{
  position:absolute;left:0;right:0;bottom:8px;z-index:4;
  min-height:160px;padding:16px 18px;border-radius:11px;
  border:1px solid #2c537d;
  background:linear-gradient(110deg,rgba(9,35,69,.97),rgba(12,51,91,.94));
  display:grid;grid-template-columns:1.05fr .95fr;gap:8px 18px;
  box-shadow:0 16px 36px rgba(0,10,30,.3);
}
.live-panel small{display:block;color:var(--cian);font-family:var(--f-mono);font-size:8px;letter-spacing:.14em;font-weight:800;margin-bottom:5px}
.live-panel strong{font-size:14px;font-family:var(--f-titulo);font-weight:700;color:#fff;display:block}
.demo-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-metrics span{border-left:1px solid #345f88;padding-left:10px;color:#8EABC8;font-family:var(--f-mono);font-size:8px;line-height:1.3}
.demo-metrics b{display:block;color:#fff;font-family:var(--f-titulo);font-weight:800;font-size:19px}
.demo-features{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.demo-features li{position:relative;padding:7px 9px 7px 19px;border:1px solid #315c87;border-radius:5px;background:rgba(17,57,96,.72);color:#B8D1E8;font-size:8px;font-weight:700}
.demo-features li::before{content:"";position:absolute;left:8px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--cian);box-shadow:0 0 7px var(--cian);transform:translateY(-50%)}
.live-panel p{grid-column:1/-1;margin:2px 0 0;border-top:1px solid #24496f;padding-top:9px;color:#85A5C6;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-panel p i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#45EFB5;box-shadow:0 0 9px #45EFB5;animation:parpadeo 1.8s ease-in-out infinite}

.demo-toggle{
  background:none;border:1px solid #315d88;border-radius:6px;
  color:#9CDBEA;font:inherit;font-family:var(--f-mono);font-size:9px;font-weight:800;
  letter-spacing:.14em;padding:6px 11px;cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.demo-toggle:hover:not(:disabled){border-color:var(--cian);color:#fff}
.demo-toggle[aria-pressed="true"]{background:rgba(0,212,255,.12);color:#fff}
.demo-toggle:disabled{opacity:.55;cursor:default}

/* ==========================================================================
   BARRA DE SEÑAL
   ========================================================================== */
.signal-bar{border-block:1px solid var(--borde);background:rgba(4,9,26,.5)}
.signal-bar .wrap{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;color:var(--texto-tenue);text-transform:uppercase}
.signal-bar span{display:flex;align-items:center;gap:16px}
.signal-bar i{width:5px;height:5px;border-radius:50%;background:var(--azul);box-shadow:0 0 8px var(--azul);display:inline-block}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.section{padding:62px 0}
.split-head,.section-title{margin-bottom:40px}
.split-head{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.section-title{display:grid;gap:20px;justify-items:start}
.split-head h2,.section-title h2{font-size:clamp(30px,3.4vw,50px);margin-top:20px}
/* El ancho maximo se mide en 'ch' de la propia tipografia del titular. Si se
   pone en el contenedor, el ch es de 16px y el h2 de 50px acaba partido en
   una palabra por linea. */
.split-head h2,.section-title h2{max-width:24ch}
.split-head p,.section-title p{color:var(--texto-tenue);font-size:16px;max-width:62ch}

/* --- Retos --------------------------------------------------------------- */
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.problem-grid article{
  position:relative;padding:24px 22px 26px;border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(46,82,136,.72),rgba(30,54,92,.94));
  border:1px solid var(--borde);overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.problem-grid article:hover{transform:translateY(-5px);border-color:var(--borde-vivo);box-shadow:0 30px 70px -30px rgba(0,150,255,.5)}
.problem-grid article > span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;color:var(--cian)}
.problem-grid h3{font-size:18px;margin:20px 0 10px;letter-spacing:-.02em}
.problem-grid p{color:var(--texto-tenue);font-size:14.5px}
.problem-grid .answer{
  background:linear-gradient(160deg,rgba(0,212,255,.14),rgba(37,99,235,.24) 60%,rgba(6,14,32,.9));
  border-color:rgba(0,212,255,.34);
}
.problem-grid .answer::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 220px at 88% 0%,rgba(0,212,255,.24),rgba(0,212,255,0) 70%)}
.problem-grid .answer h3{font-size:19px}

/* --- Soluciones (lista) -------------------------------------------------- */
.service-list{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.service-list article{
  position:relative;display:grid;grid-template-columns:54px 1.6fr 1fr 30px;
  gap:20px;align-items:center;padding:15px 26px;
  background:rgba(30,54,92,.92);
  transition:background .35s ease;
}
.service-list article:hover{background:rgba(44,78,130,.9)}
.service-num{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--cian)}
.service-list h3{font-size:17.5px;letter-spacing:-.02em;margin-bottom:4px}
.service-list p{color:var(--texto-tenue);font-size:13.5px}
.service-list ul{display:flex;flex-wrap:wrap;gap:7px}
.service-list ul li{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;color:#9DB2C9;
  background:rgba(255,255,255,.035);border:1px solid var(--borde);
}
.service-list article > b{color:var(--cian);font-weight:400;font-size:17px;text-align:right}

/* --- Capacidades --------------------------------------------------------- */
.capability-map{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch;margin-top:8px}
.capability-map article{
  position:relative;padding:24px 22px;border-radius:14px;min-height:250px;
  background:linear-gradient(160deg,rgba(46,82,136,.92),rgba(30,54,92,.94))
  border:1px solid #254463;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.capability-map article:hover{transform:translateY(-5px);border-color:var(--borde-vivo);box-shadow:0 30px 70px -30px rgba(0,150,255,.5)}
.capability-map article > span{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.26);
  color:var(--cian);font-family:var(--f-mono);font-size:11px;font-weight:800;
}
.capability-map small{display:block;font-family:var(--f-mono);color:#78A5CE;font-weight:500;letter-spacing:.18em;margin-top:28px}
.capability-map h3{font-size:21px;margin:12px 0;letter-spacing:-.02em}
.capability-map p{color:var(--texto-tenue);font-size:14px;line-height:1.7}
.connector{display:grid;place-items:center;color:var(--cian);font-size:22px}

.objectives{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border:1px solid var(--borde);border-radius:13px;overflow:hidden}
.objectives > div{display:grid;background:rgba(30,54,92,.9)}
.objectives > div + div{border-left:1px solid var(--borde)}
.objectives strong{padding:18px 22px;background:rgba(18,41,75,.6);font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#AFC3D9;font-weight:500}
.objectives span{padding:13px 22px;border-top:1px solid var(--borde);font-size:14px}
.objectives > div:last-child span{color:#8FD8F5;font-weight:700}

/* --- Aplicaciones -------------------------------------------------------- */
.cases{background:linear-gradient(180deg,rgba(11,31,59,.55),rgba(4,9,26,.9));border-block:1px solid var(--borde)}
.cases-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.cases-layout .sticky{position:sticky;top:118px}
.cases-layout h2{font-size:clamp(28px,3.2vw,44px);margin:20px 0 18px}
.cases-layout .sticky > p{color:var(--texto-tenue);margin-bottom:30px}
.case-cards{display:grid;gap:18px}
.case-cards article{
  position:relative;padding:24px 22px;border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(46,82,136,.74),rgba(30,54,92,.94))
  border:1px solid var(--borde);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.case-cards article:hover{transform:translateY(-5px);border-color:var(--borde-vivo);box-shadow:0 30px 70px -30px rgba(0,150,255,.5)}
.case-cards article > span{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--cian)}
.case-cards h3{font-size:21px;margin:14px 0 10px;letter-spacing:-.02em}
.case-cards p{color:var(--texto-tenue);font-size:14.5px;margin-bottom:18px}
.case-cards article > div{font-size:13px;color:#9DB2C9;padding:9px 0;border-top:1px solid var(--borde)}
.case-cards article > div b{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E93AD;margin-right:10px}

/* --- Proceso ------------------------------------------------------------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.process-grid article{background:rgba(30,54,92,.92);padding:24px 22px}
.process-grid article > span{
  display:block;font-family:var(--f-titulo);font-weight:800;font-size:38px;line-height:1;
  background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.process-grid h3{font-size:16.5px;margin:16px 0 8px}
.process-grid p{color:var(--texto-tenue);font-size:14px}
.principle{margin-top:26px;padding:24px 26px;border-radius:var(--radio);border:1px solid rgba(0,212,255,.24);background:linear-gradient(150deg,rgba(0,212,255,.1),rgba(6,14,32,.85))}
.principle strong{font-family:var(--f-titulo);font-weight:800;font-size:22px;color:#fff;letter-spacing:-.02em}
.principle span{font-family:var(--f-titulo);font-weight:800;font-size:22px;letter-spacing:-.02em;background:var(--degradado);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:8px}
.principle p{color:var(--texto-tenue);margin-top:12px;font-size:15px}

/* --- Preguntas frecuentes ------------------------------------------------ */
.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start}
.faq-layout h2{font-size:clamp(28px,3.2vw,44px);margin-top:20px}
.accordions{display:grid;gap:12px}
.accordions details{
  border:1px solid var(--borde);border-radius:12px;
  background:linear-gradient(160deg,rgba(46,82,136,.68),rgba(30,54,92,.94));
  transition:border-color .3s ease;overflow:hidden;
}
.accordions details[open]{border-color:rgba(0,212,255,.3)}
.accordions summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;cursor:pointer;list-style:none;
  font-family:var(--f-titulo);font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em;
}
.accordions summary::-webkit-details-marker{display:none}
.accordions summary b{color:var(--cian);font-weight:400;font-size:20px;transition:transform .3s ease;flex:0 0 auto}
.accordions details[open] summary b{transform:rotate(45deg)}
.accordions details p{padding:0 24px 24px;color:var(--texto-tenue);font-size:14.5px;max-width:66ch}

/* --- Contacto ------------------------------------------------------------ */
.contact{padding:72px 0;border-top:1px solid var(--borde);background:linear-gradient(180deg,rgba(11,31,59,.5),rgba(4,9,26,.95))}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-grid h2{font-size:clamp(28px,3.2vw,44px);margin:20px 0 18px}
.contact-grid > div > p{color:var(--texto-tenue);margin-bottom:28px}
.contact-points{display:flex;flex-wrap:wrap;gap:10px}
.contact-points span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border-radius:6px;color:#9DB2C9;
  background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.2);
}
#proposal-form{
  padding:34px;border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(18,41,75,.7),rgba(6,14,32,.9));
  border:1px solid var(--borde);
}
#proposal-form label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9DB2C9;margin-bottom:20px}
/* OJO con el `:not(.sr-solo)`: es imprescindible, no un adorno.
   La casilla trampa antispam del formulario lleva la clase .sr-solo, que la
   reduce a 1x1 px para que nadie la vea. Pero esta regla tiene mas
   especificidad (id + etiqueta) que .sr-solo (una clase), asi que le ganaba y
   la estiraba a todo el ancho del formulario. El resultado: la casilla
   sobresalia 51 px por la derecha y en el movil aparecia una franja vacia al
   lado. Excluyendola aqui, .sr-solo vuelve a mandar sobre su propio tamano. */
#proposal-form input:not(.sr-solo),#proposal-form textarea{
  display:block;width:100%;margin-top:9px;
  background:rgba(4,12,28,.75);border:1px solid var(--borde);border-radius:9px;
  padding:14px 15px;color:#fff;font-family:var(--f-texto);font-size:15px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
#proposal-form input::placeholder,#proposal-form textarea::placeholder{color:#5C748F}
#proposal-form input:focus,#proposal-form textarea:focus{outline:none;border-color:var(--borde-vivo);box-shadow:0 0 0 3px rgba(0,212,255,.14)}
#proposal-form textarea{resize:vertical;min-height:110px}
#proposal-form .button{width:100%;justify-content:center;margin-top:6px}
#form-status{display:block;margin-top:16px;font-size:13px;color:var(--texto-tenue)}
#form-status[data-estado="ok"]{color:#4ADE9B;font-weight:700}
#form-status[data-estado="error"]{color:#FF9B9B;font-weight:700}
#form-status[data-estado="enviando"]{opacity:.7}
button[aria-busy="true"]{opacity:.72;cursor:progress}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------------
   Va con el verde propio de WhatsApp en vez de con la paleta del sitio: es un
   elemento funcional y la gente lo reconoce por el color. Teñirlo de azul
   noche lo volveria invisible como boton de contacto.
   ========================================================================== */
.whatsapp{
  position:fixed;right:24px;bottom:24px;z-index:45;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18),0 12px 32px -10px rgba(37,211,102,.75);
  transition:transform .25s ease,box-shadow .25s ease;
}
.whatsapp:hover,.whatsapp:focus-visible{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 6px 18px rgba(0,0,0,.22),0 18px 40px -10px rgba(37,211,102,.9);
}
.whatsapp svg{width:30px;height:30px;fill:currentColor;display:block}
/* Onda que sale del boton para llamar la atencion sin ser agresiva */
.whatsapp::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.85);pointer-events:none;
  animation:onda-whatsapp 2.6s ease-out infinite;
}
@keyframes onda-whatsapp{
  0%{opacity:.7;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.55)}
}

/* --- Pie ----------------------------------------------------------------- */
footer{border-top:1px solid var(--borde);background:rgba(4,9,26,.9)}
footer .wrap{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 0;font-size:13px;color:var(--texto-tenue)}
/* En el pie va el mismo logotipo completo que en la cabecera, no el isotipo
   suelto con el texto escrito aparte. Comparte la clase .logo, asi que hereda
   tambien el destello y el cambio automatico entre la version clara y la
   oscura segun el tema. */
.logo-pie{width:172px;flex:0 0 auto}
footer a{color:#AFC3D9}
footer a:hover{color:var(--cian)}

/* El lema y la firma de KUMN, en columna y centrados. La columna mide menos
   que los 110 px de alto minimo de la fila del pie, asi que la firma no anade
   altura: solo ocupa un hueco que ya estaba vacio. */
footer .pie-centro{display:grid;justify-items:center;gap:9px;text-align:center}
footer .pie-centro p{margin:0}

/* ==========================================================================
   VARIANTE DE MARCA EN FONDO CLARO (?marca=color) — modo de revisión
   ========================================================================== */
.marca-color .header{background:rgba(255,255,255,.97);border-bottom-color:#E4EAF2}
.marca-color .header nav a{color:#10213B}
.marca-color .header nav a:not(.nav-cta):hover{color:var(--azul)}
.marca-color .menu{color:#10213B;border-color:#DCE5EF}
.marca-color .header .nav-cta{background:var(--noche);color:#fff}
.marca-color .skip:focus{color:var(--noche)}

/* ==========================================================================
   ADAPTACIÓN
   ========================================================================== */
@media(max-width:1080px){
  .hero-grid,.split-head,.cases-layout,.faq-layout,.contact-grid{grid-template-columns:1fr;gap:46px}
  .cases-layout .sticky{position:static}
  .capability-map{grid-template-columns:1fr}
  .connector{height:44px;transform:rotate(90deg)}
  .objectives{grid-template-columns:1fr}
  .objectives > div + div{border-left:0;border-top:1px solid var(--borde)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .problem-grid{grid-template-columns:repeat(2,1fr)}
  .service-list article{grid-template-columns:48px 1fr;gap:18px}
  .service-list article ul,.service-list article > b{display:none}
  .system-card{max-width:620px}
}

@media(max-width:720px){
  :root{--envoltura:min(100% - 34px,1240px)}
  .header{height:74px}
  .header nav{
    display:none;position:absolute;top:74px;left:0;right:0;
    background:rgba(4,9,26,.98);border-bottom:1px solid var(--borde);
    padding:24px;flex-direction:column;gap:20px;align-items:flex-start;
  }
  .header nav.open{display:flex}
  .menu{display:block}
  .logo{width:160px}
  .section,.contact{padding:44px 0}
  .hero{padding:56px 0 72px}
  .problem-grid,.process-grid{grid-template-columns:1fr}
  .system-map{height:630px;--ancho-nodo:116px}
  /* Se conservan las posiciones base (ya son simetricas respecto al centro);
     solo la fila inferior baja un poco para aprovechar el alto extra. */
  .system-map .n3,.system-map .n4{top:272px}
  .node{min-height:86px;padding:10px}
  /* El recuadro se ensancha y el cuerpo baja un poco para que palabras largas
     como 'Automatizacion' quepan enteras. Con el ancho y el cuerpo anteriores
     se partian por la mitad ('Automatizacio / n'). */
  .node strong{font-size:11px}
  .node small{font-size:7.5px;letter-spacing:.08em}
  .live-panel{grid-template-columns:1fr;bottom:5px;min-height:205px}
  .demo-metrics{grid-row:2}
  .demo-features{grid-row:3}
  .live-panel p{grid-row:4}
  .live-panel strong{font-size:12px}
  .system-bottom{flex-wrap:wrap;gap:12px;justify-content:flex-start}
  .objectives strong,.objectives span{padding-inline:16px}
  /* El boton flotante no debe tapar el pie de forma permanente */
  .whatsapp{width:54px;height:54px;right:18px;bottom:18px}
  .whatsapp svg{width:27px;height:27px}
  footer .wrap{padding-bottom:96px}
}

@media(prefers-reduced-motion:reduce){
  .conexiones path,.orbita,.core,.core img,.core::after,.logo::after,
  .node,.node::after,.system-top em::before,.system-card,.whatsapp::after,
  body::before,body::after{animation:none!important}
  /* Sin animacion, el destello se quedaria plantado encima del logotipo y la
     onda del boton de WhatsApp, congelada como un aro alrededor. */
  .logo::after,.whatsapp::after{display:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   NORBEX — Galería de ejemplos
   --------------------------------------------------------------------------
   Seis piezas de lo que se construye, girando solas. Las pantallas se quedan
   OSCURAS en los dos temas, por el mismo criterio que la consola del diagrama:
   son instrumentos, y sobre fondo claro funcionan como pieza de contraste.
   Lo que sí cambia con el tema es el marco, los textos y los controles.
   ========================================================================== */

.galeria-marco{
  position:relative;border-radius:20px;padding:20px;
  background:linear-gradient(155deg,rgba(18,41,75,.92),rgba(6,14,32,.96));
  border:1px solid var(--borde);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.galeria-cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:15px;border-bottom:1px solid var(--borde);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--texto-tenue);font-weight:500;
}
.galeria-cabecera em{font-style:normal;color:#4ADE9B;display:flex;align-items:center;gap:8px}
.galeria-cabecera em::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE9B;box-shadow:0 0 10px #4ADE9B;animation:latido 1.8s ease-in-out infinite}

/* --- Piezas --------------------------------------------------------------- */
.galeria-pista{position:relative}
.galeria-pieza{display:none}
.galeria-pieza.activa{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:34px;align-items:center;padding:32px 8px 26px;
  animation:aparecer .55s ease both;
}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.galeria-texto > span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--cian);
}
.galeria-texto h3{margin:10px 0 12px;font-size:22px;line-height:1.25;color:#fff}
.galeria-texto p{color:var(--texto);font-size:14.5px;line-height:1.65}
.galeria-texto ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0;list-style:none}
.galeria-texto ul li{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,212,255,.08);border:1px solid var(--borde-vivo);color:#9CDBEA;
}

/* --- Pantalla común ------------------------------------------------------- */
.pantalla{
  position:relative;border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#0A1730,#060E1E 70%);
  border:1px solid rgba(120,170,220,.18);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  font-size:12px;
}
.pantalla::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 220px at 78% -10%,rgba(0,212,255,.10),transparent 70%);
}

/* 01 — Chatbot ------------------------------------------------------------- */
.pantalla-chat{display:grid;gap:0;padding:16px}
.chat-cabecera{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid rgba(120,170,220,.14)}
.chat-cabecera .avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--degradado);color:#04121F;font-weight:800;font-size:15px;
}
.chat-cabecera strong{display:block;color:#EAF2FB;font-size:13px}
.chat-cabecera small{display:flex;align-items:center;gap:6px;color:var(--texto-tenue);font-size:10.5px}
.chat-cabecera small i{width:6px;height:6px;border-radius:50%;background:#4ADE9B;box-shadow:0 0 8px #4ADE9B}
.chat-hilo{display:grid;gap:9px;padding:15px 0}
.burbuja{
  max-width:78%;padding:10px 13px;border-radius:13px;line-height:1.5;font-size:12.5px;
  background:rgba(255,255,255,.06);color:#D5E2F1;border:1px solid rgba(120,170,220,.14);
  justify-self:start;border-bottom-left-radius:4px;
}
.burbuja.sale{
  justify-self:end;border-bottom-left-radius:13px;border-bottom-right-radius:4px;
  background:linear-gradient(120deg,rgba(0,212,255,.18),rgba(37,99,235,.26));
  border-color:rgba(0,212,255,.3);color:#EAF6FF;
}
.chat-escribiendo{display:flex;gap:5px;padding:10px 13px;border-radius:13px;border-bottom-left-radius:4px;justify-self:start;background:rgba(255,255,255,.06);border:1px solid rgba(120,170,220,.14)}
.chat-escribiendo i{width:6px;height:6px;border-radius:50%;background:#7E93AD;animation:teclear 1.2s ease-in-out infinite}
.chat-escribiendo i:nth-child(2){animation-delay:.15s}
.chat-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes teclear{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-rapidas{display:flex;flex-wrap:wrap;gap:7px;padding-top:13px;border-top:1px solid rgba(120,170,220,.14)}
.chat-rapidas span{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;
  padding:7px 11px;border-radius:999px;border:1px solid var(--borde-vivo);color:#9CDBEA;
}

/* 02 — Tablero ------------------------------------------------------------- */
.pantalla-tablero{padding:16px}
.tablero-cabecera{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;color:var(--texto-tenue);padding-bottom:13px;border-bottom:1px solid rgba(120,170,220,.14)}
.tablero-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 0}
.tablero-kpis > div{padding:12px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(120,170,220,.14)}
.tablero-kpis small{display:block;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;color:var(--texto-tenue)}
.tablero-kpis strong{display:block;margin:7px 0 4px;font-size:20px;color:#fff;letter-spacing:-.01em}
.tablero-kpis em{font-style:normal;font-size:10.5px;font-weight:700}
.tablero-kpis .sube{color:#4ADE9B}
.tablero-kpis .baja{color:#FF9F6B}
.tablero-grafico{padding:6px 0 2px}
.barras{display:flex;align-items:flex-end;gap:8px;height:104px}
.barras i{
  flex:1;height:var(--v);border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--cian),rgba(37,99,235,.55));
  box-shadow:0 0 22px -6px rgba(0,212,255,.6);
  animation:crecer .7s cubic-bezier(.2,.7,.3,1) both;transform-origin:bottom;
}
.barras i:nth-child(2){animation-delay:.05s}
.barras i:nth-child(3){animation-delay:.1s}
.barras i:nth-child(4){animation-delay:.15s}
.barras i:nth-child(5){animation-delay:.2s}
.barras i:nth-child(6){animation-delay:.25s}
.barras i:nth-child(7){animation-delay:.3s}
.barras i:nth-child(8){animation-delay:.35s}
@keyframes crecer{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}
.tablero-eje{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:8.5px;color:var(--texto-tenue);letter-spacing:.14em;padding-top:9px;border-top:1px solid rgba(120,170,220,.14);margin-top:9px}
.tablero-nota,.integracion-nota,.flujo-nota{
  display:flex;align-items:center;gap:9px;margin-top:13px;padding-top:12px;
  border-top:1px solid rgba(120,170,220,.14);color:#9CDBEA;font-size:11.5px;
}
.tablero-nota i,.integracion-nota i,.flujo-nota i{width:6px;height:6px;flex:none;border-radius:50%;background:#4ADE9B;box-shadow:0 0 8px #4ADE9B}

/* 03 — Portal -------------------------------------------------------------- */
.pantalla-portal{padding:16px}
.portal-barra{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid rgba(120,170,220,.14)}
.portal-logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--degradado);color:#04121F;font-weight:800;font-size:13px}
.portal-buscador{flex:1;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(120,170,220,.16);color:var(--texto-tenue);font-size:11.5px}
.portal-filtro{padding:8px 11px;border-radius:8px;border:1px solid var(--borde-vivo);color:#9CDBEA;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em}
.portal-tabla{width:100%;border-collapse:collapse;margin-top:6px}
.portal-tabla th{
  text-align:left;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--texto-tenue);font-weight:500;padding:11px 8px;border-bottom:1px solid rgba(120,170,220,.14);
}
.portal-tabla td{padding:11px 8px;color:#D5E2F1;font-size:12px;border-bottom:1px solid rgba(120,170,220,.08)}
.portal-tabla tbody tr:hover{background:rgba(0,212,255,.05)}
.portal-tabla td:first-child{font-family:var(--f-mono);color:#9CDBEA}
.portal-tabla td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.chip{font-style:normal;font-size:9.5px;font-family:var(--f-mono);letter-spacing:.08em;padding:4px 9px;border-radius:999px;white-space:nowrap}
.chip.ok{background:rgba(74,222,155,.14);color:#6FE7B0;border:1px solid rgba(74,222,155,.3)}
.chip.ruta{background:rgba(0,212,255,.13);color:#7FE7FA;border:1px solid rgba(0,212,255,.3)}
.chip.espera{background:rgba(255,159,107,.13);color:#FFB98C;border:1px solid rgba(255,159,107,.3)}
.portal-pie{display:flex;justify-content:space-between;align-items:center;padding-top:12px;font-family:var(--f-mono);font-size:9.5px;color:var(--texto-tenue);letter-spacing:.1em}
.portal-paginas{display:flex;gap:6px}
.portal-paginas i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(120,170,220,.2);color:#9CDBEA}
.portal-paginas i:nth-child(2){background:rgba(0,212,255,.14);border-color:var(--borde-vivo)}

/* 04 — Flujo --------------------------------------------------------------- */
.pantalla-flujo{padding:16px}
.flujo-cabecera{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;color:var(--texto-tenue);padding-bottom:13px;border-bottom:1px solid rgba(120,170,220,.14)}
.flujo-cabecera em{font-style:normal;color:#7FE7FA}
.flujo{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:2px}
.flujo li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:10px 0;position:relative}
.flujo li > i{width:11px;height:11px;border-radius:50%;border:2px solid rgba(120,170,220,.3);flex:none;position:relative;z-index:1}
.flujo li:not(:last-child)::before{content:"";position:absolute;left:5px;top:26px;bottom:-2px;width:1px;background:rgba(120,170,220,.2)}
.flujo li.hecho > i{background:#4ADE9B;border-color:#4ADE9B;box-shadow:0 0 10px rgba(74,222,155,.6)}
.flujo li.activo > i{background:var(--cian);border-color:var(--cian);box-shadow:0 0 12px rgba(0,212,255,.8);animation:latido 1.8s ease-in-out infinite}
.flujo li strong{display:block;color:#EAF2FB;font-size:12.5px;font-weight:600}
.flujo li.activo strong{color:#fff}
.flujo li:not(.hecho):not(.activo) strong{color:#7E93AD;font-weight:500}
.flujo li small{display:block;color:var(--texto-tenue);font-size:10.5px;margin-top:2px}
.flujo li b{font-family:var(--f-mono);font-size:9.5px;font-weight:500;color:var(--texto-tenue);letter-spacing:.08em}
.flujo li.hecho b{color:#6FE7B0}
.flujo li.activo b{color:#7FE7FA}

/* 05 — Móvil --------------------------------------------------------------- */
.pantalla-movil{padding:18px;display:grid;place-items:center}
.movil-marco{
  width:186px;padding:8px;border-radius:22px;
  background:linear-gradient(160deg,#1A2C48,#0A1425);
  border:1px solid rgba(120,170,220,.24);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
}
.movil-pantalla{border-radius:16px;background:linear-gradient(170deg,#0C1B33,#07101F);padding:13px;display:grid;gap:11px}
.movil-cabecera{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#EAF2FB;font-weight:600;padding-bottom:10px;border-bottom:1px solid rgba(120,170,220,.14)}
.movil-cabecera em{font-style:normal;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;color:var(--texto-tenue)}
.movil-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.movil-lista li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;color:#B9CADD;line-height:1.35}
.movil-lista li i{font-style:normal;flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;border:1px solid rgba(120,170,220,.3);color:var(--texto-tenue)}
.movil-lista li.ok{color:#D5E2F1}
.movil-lista li.ok i{background:rgba(74,222,155,.16);border-color:rgba(74,222,155,.4);color:#6FE7B0}
.movil-firma{height:46px;border-radius:9px;border:1px dashed rgba(0,212,255,.35);background:rgba(0,212,255,.05);color:var(--cian);display:grid;place-items:center;padding:4px 8px}
.movil-firma svg{width:100%;height:100%}
.movil-boton{
  display:block;text-align:center;padding:10px;border-radius:9px;
  background:var(--degradado);color:#04121F;font-weight:800;font-size:10.5px;letter-spacing:.04em;
}

/* 06 — Integración --------------------------------------------------------- */
.pantalla-integracion{padding:16px}
.integracion-mapa{position:relative;height:238px}
.integr{position:absolute;display:grid;place-items:center;text-align:center}
.integr.nodo{
  width:82px;padding:9px 6px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(120,170,220,.2);
}
.integr.nodo small{display:block;font-family:var(--f-mono);font-size:8px;letter-spacing:.14em;color:var(--texto-tenue)}
.integr.nodo strong{display:block;margin-top:4px;color:#EAF2FB;font-size:11.5px}
.integr.erp{left:0;top:0}
.integr.crm{right:0;top:0}
.integr.tienda{left:0;bottom:0}
.integr.hojas{right:0;bottom:0}
.integr-lineas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.integr-lineas path{fill:none;stroke:rgba(0,212,255,.3);stroke-width:1.4;stroke-dasharray:5 6;animation:fluir 3.4s linear infinite}
@keyframes fluir{to{stroke-dashoffset:-22}}
.integr.nucleo{left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:104px;height:104px}
.integr.nucleo img{width:62px;height:62px;filter:drop-shadow(0 0 16px rgba(0,212,255,.5))}
.integr.nucleo small{position:absolute;bottom:-16px;font-family:var(--f-mono);font-size:8px;letter-spacing:.16em;color:#7FE7FA;white-space:nowrap}
.integr-aro{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,212,255,.28);animation:latido 3s ease-in-out infinite}
.integr-aro::after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(0,212,255,.2)}

/* --- Controles ------------------------------------------------------------ */
.galeria-pie{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:16px;margin-top:4px;border-top:1px solid var(--borde);
}
.galeria-puntos{display:flex;gap:7px}
.galeria-puntos button{
  width:30px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(120,170,220,.26);transition:background .3s ease,box-shadow .3s ease;
}
.galeria-puntos button:hover{background:rgba(120,170,220,.5)}
.galeria-puntos button[aria-current="true"]{background:var(--degradado);box-shadow:0 0 14px -2px rgba(0,212,255,.8)}
.galeria-puntos button:focus-visible{outline:2px solid var(--cian);outline-offset:3px}

/* --- Pantallas estrechas -------------------------------------------------- */
@media(max-width:900px){
  .galeria-pieza.activa{grid-template-columns:1fr;gap:24px;padding:26px 4px 20px}
  .pantalla{font-size:11.5px}
  .galeria-texto h3{font-size:19px}
}
@media(max-width:560px){
  .galeria-marco{padding:14px;border-radius:16px}
  .pantalla-chat,.pantalla-tablero,.pantalla-portal,.pantalla-flujo,.pantalla-integracion{padding:13px}
  .tablero-kpis{grid-template-columns:1fr;gap:8px}
  .tablero-kpis > div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px}
  .tablero-kpis small{grid-column:1/-1}
  .tablero-kpis strong{margin:0}
  .portal-tabla th:nth-child(2),.portal-tabla td:nth-child(2){display:none}
  .integracion-mapa{height:210px}
  .integr.nodo{width:68px;padding:7px 4px}
  .integr.nucleo{width:88px;height:88px}
  .integr.nucleo img{width:52px;height:52px}
}

/* ==========================================================================
   BANDA DE ALIANZA CON TRUSTX
   --------------------------------------------------------------------------
   Mencion a la alianza estrategica, justo despues de Soluciones.

   Se queda OSCURA en los dos temas, como la banda de Aplicaciones: da ritmo a
   la pagina y ancla una pieza de marca, que sobre fondo claro perderia fuerza.

   El logotipo de TrustX NO es una imagen: esta compuesto con tipografia, que es
   como se resolvio en el diseno original. Asi no hace falta ningun archivo
   nuevo, y ademas sale nitido en cualquier tamano y en cualquier pantalla.
   ========================================================================== */

/* La cinta toma el ancho de la envoltura, el mismo que el resto del contenido,
   en lugar de llegar de borde a borde. Asi comparte el formato de las demas
   secciones y no parte la pagina en dos anchos distintos. */
.alliance{
  position:relative;isolation:isolate;overflow:hidden;
  width:var(--envoltura);margin-inline:auto;
  padding:52px 0 0;
  border-radius:22px;
  background:#06172c;color:#fff;
  border:1px solid rgba(0,212,255,.24);
}
/* La seccion ya es el bloque, asi que el .wrap de dentro sobra: si se deja,
   encoge el contenido dos veces. El aire lateral pasa a ser relleno. */
.alliance .alliance-inner{width:auto;margin:0;padding:0 clamp(26px,4vw,50px)}
/* Halo de luz por la derecha, que es donde queda el hueco libre tras el texto,
   y un fundido inferior para que la banda no corte en seco con lo que sigue. */
.alliance::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 420px at 92% 18%,rgba(0,212,255,.15),rgba(0,212,255,0) 68%),
    linear-gradient(0deg,#06172c 0%,transparent 45%);
}
.alliance-main{
  display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;
  padding-bottom:38px;
}
.alliance-brand .eyebrow{color:#9eefff}
.alliance-brand .eyebrow::before{background:#00d4ff;box-shadow:0 0 8px #00d4ff}

/* Los dos nombres, uno al lado del otro, con el signo + en medio.
   Son los logotipos REALES, no texto compuesto.

   El destello se recorta con la mascara del propio archivo, igual que en la
   cabecera: la luz solo recorre las letras y la cinta, nunca el rectangulo que
   las contiene. Por eso se puede animar sin miedo a manchar la banda.

   OJO con el color del destello: va en CIAN, no en blanco. Los dos logotipos
   son blancos, asi que un barrido blanco no se veria. Es exactamente el mismo
   error que tenia el tema claro de la cabecera, y aqui se evita a proposito. */
.marca-par{display:flex;align-items:center;gap:20px;margin-top:20px;white-space:nowrap}
.marca-logo{position:relative;display:block;line-height:0}
.marca-logo img{display:block;width:100%;height:auto}
.marca-norbex{width:196px;--mascara-logo:url('/assets/norbex-logotipo-blanco.webp')}
/* TrustX se reduce mas que Norbex a proposito: sus letras son mas altas que
   las del wordmark de Norbex, asi que a igual ancho parecia mas grande.
   El ancho real lo pone .marca-col, mas abajo; aqui solo va la mascara. */
.marca-trustx{width:100%;--mascara-logo:url('/assets/trustx-logotipo.png')}
.marca-logo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(100deg,
    rgba(0,212,255,0) 0%,
    rgba(0,212,255,.5) 35%,
    rgba(150,244,255,.95) 50%,
    rgba(0,212,255,.5) 65%,
    rgba(0,212,255,0) 100%);
  background-size:170px 100%;
  background-repeat:no-repeat;
  background-position:-170px 0;
  -webkit-mask-image:var(--mascara-logo);
  mask-image:var(--mascara-logo);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:destello-logo 6.5s ease-in-out infinite;
}
/* Desfasado medio ciclo: si destellaran a la vez pareceria un parpadeo de la
   seccion entera; asi se lee como dos reflejos distintos. */
.marca-trustx::after{animation-delay:-3.2s}
.marca-par .times{color:#8eabc9;font:300 37px var(--f-titulo);line-height:1}
/* El ancho va en la COLUMNA, no en el logotipo de dentro.
   ------------------------------------------------------------------
   .marca-trustx esta dentro de .marca-col, asi que un porcentaje suyo se
   calculaba contra la columna (de ancho automatico) y no contra la fila. El
   resultado era un reparto impredecible: el logotipo quedaba despegado del
   signo + en el movil. Poniendo el ancho en la columna, que si es hija directa
   de la fila, el reparto es el que uno espera. */
.marca-col{display:grid;justify-items:center;gap:8px;width:150px}
.marca-descriptor{
  font-size:10px;font-weight:600;letter-spacing:.36em;text-align:center;
  color:#dce9f6;
}

.alliance-copy{padding-left:34px;border-left:1px solid rgba(195,224,250,.38)}
.alliance-copy h2{max-width:24ch;color:#fff;font-size:clamp(21px,2vw,29px);line-height:1.15;letter-spacing:-.025em}
.alliance-copy p{max-width:59ch;margin-top:12px;font-size:13.5px;line-height:1.6;color:#d4e2ef}
.alliance-copy strong{color:#fff}
.alliance-copy a{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  padding:9px 20px;border:1px solid rgba(149,231,245,.7);border-radius:99px;
  color:#b5f7ff;font-weight:650;font-size:12.5px;background:rgba(0,35,58,.35);
  transition:background .25s ease,border-color .25s ease;
}
.alliance-copy a:hover{background:rgba(0,212,255,.16);border-color:var(--cian)}

/* Las tres razones, en una franja al pie de la banda. */
.alliance-points{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(175,215,242,.24);
  background:rgba(3,17,34,.48);
}
.alliance-point{display:flex;align-items:center;gap:14px;min-height:74px;padding:13px 24px}
.alliance-point + .alliance-point{border-left:1px solid rgba(175,215,242,.18)}
.alliance-point b{font:600 18px var(--f-mono);color:#70e9f7}
.alliance-point strong{display:block;font-size:12.5px;line-height:1.3;color:#fff}
.alliance-point span{display:block;font-size:11.5px;line-height:1.35;color:#a8c1d8}

@media(max-width:1080px){
  .alliance-inner{padding-top:44px}
  .alliance-main{grid-template-columns:1fr;gap:26px;padding-bottom:32px}
  .alliance-copy{padding-left:0;border-left:0}
  .alliance-points{grid-template-columns:1fr 1fr}
  .alliance-point:nth-child(3){grid-column:1/-1;border-top:1px solid rgba(175,215,242,.18);border-left:0}
}

@media(max-width:600px){
  .alliance-inner{padding-top:36px}
  /* Los dos logotipos, SIEMPRE en la misma linea.
     ------------------------------------------------------------------
     Antes se permitia que se envolviera, y en un telefono de 369 px
     ocurria: el contenedor mide 335 px y los logos necesitaban 334, asi que
     cabian por UN pixel y cualquier redondeo los tiraba a la linea siguiente,
     dejando el TrustX descuadrado debajo del Norbex.
     Con porcentajes en lugar de pixeles fijos siempre queda margen, y con
     nowrap se garantiza que no se partan en ninguna pantalla. */
  .marca-par{gap:10px;flex-wrap:nowrap}
  .marca-norbex{width:44%}
  .marca-col{width:34%}
  .marca-par .times{font-size:26px}
  .marca-descriptor{font-size:8px;letter-spacing:.22em}
  .alliance-copy h2{font-size:26px}
  .alliance-points{display:block}
  .alliance-point{min-height:68px;padding:12px 0}
  .alliance-point + .alliance-point,.alliance-point:nth-child(3){
    border-left:0;border-top:1px solid rgba(175,215,242,.18);
  }
}

/* ==========================================================================
   LLAMADA FINAL DEL INICIO
   --------------------------------------------------------------------------
   Cierra la portada y lleva a Contacto, que ahora es una pagina propia. Es un
   cierre suave: no compite con la portada, solo recuerda el siguiente paso.
   ========================================================================== */

.llamada{padding:62px 0 86px}
.llamada-caja{
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  padding:32px 36px;border-radius:20px;
  background:
    radial-gradient(620px 260px at 88% 0%,rgba(0,212,255,.16),rgba(0,212,255,0) 70%),
    linear-gradient(140deg,rgba(18,41,75,.75),rgba(6,14,32,.85));
  border:1px solid var(--borde-vivo);
}
.llamada-caja h2{font-size:clamp(22px,2.4vw,32px);max-width:22ch}
.llamada-caja p{margin-top:10px;max-width:54ch;font-size:15px;color:var(--texto)}
.llamada-caja .button{flex:none}

@media(max-width:720px){
  .llamada{padding:46px 0 56px}
  .llamada-caja{padding:26px 22px;gap:22px}
  .llamada-caja .button{width:100%;justify-content:center}
}

/* ==========================================================================
   HISTORIA DE LA EMPRESA
   --------------------------------------------------------------------------
   La pagina se llamaba "Nosotros" y no contaba nada de nosotros. Aqui va la
   historia, breve: el ano en grande a la izquierda como ancla visual, y el
   texto a la derecha. Con el ano tan marcado, tres parrafos no parecen un muro.

   El ano se pinta con el degradado de marca recortado a las letras
   (background-clip:text), asi que se lee igual de bien sobre fondo oscuro que
   sobre claro, sin necesidad de dos reglas.
   ========================================================================== */

.historia-grid{
  display:grid;grid-template-columns:auto 1fr;gap:52px;align-items:start;
}
.historia-anio{display:grid;gap:10px;padding-top:6px}
.historia-anio strong{
  font-family:var(--f-titulo);font-size:clamp(54px,6.4vw,92px);font-weight:800;
  line-height:.82;letter-spacing:-.055em;
  background:var(--degradado);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.historia-anio small{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-tenue);
}
.historia-cuerpo h2{margin-top:13px;font-size:clamp(24px,2.9vw,38px);max-width:20ch}
.historia-texto{margin-top:22px}
.historia-texto p{max-width:66ch;font-size:16.5px;line-height:1.72}
.historia-texto p + p{margin-top:16px}
.historia-texto strong{color:#fff}

@media(max-width:720px){
  .historia-grid{grid-template-columns:1fr;gap:24px}
  .historia-anio strong{font-size:54px}
  .historia-texto p{font-size:16px}
}
/* ==========================================================================
   PAGINA NOSOTROS
   --------------------------------------------------------------------------
   Encabezado propio, proposito, valores y el bloque de la alianza.
   El proceso reutiliza .process-grid, que ya existia.
   ========================================================================== */

/* --- Encabezado de la pagina ---------------------------------------------- */
.page-head{padding:64px 0 0}
.page-head .eyebrow{margin-bottom:0}
.page-head h1{margin-top:15px;font-size:clamp(30px,4.1vw,54px);max-width:21ch;letter-spacing:-.04em}
.page-head p{margin-top:20px;max-width:68ch;font-size:17px;line-height:1.7;color:var(--texto)}
/* La seccion que sigue no necesita todo su aire: el encabezado ya lo da. */
.page-head + .section{padding-top:54px}

/* --- Quienes somos --------------------------------------------------------- */
.quienes-texto p{font-size:16.5px;line-height:1.72;color:var(--texto)}
.quienes-texto p + p{margin-top:16px}

/* --- Proposito ------------------------------------------------------------- */
.proposito-caja{
  max-width:920px;padding:32px 36px;border-radius:20px;
  background:linear-gradient(140deg,rgba(0,212,255,.07),rgba(37,99,235,.10));
  border:1px solid var(--borde);
  border-left:3px solid var(--cian);
}
.proposito-caja h2{margin-top:15px;font-size:clamp(22px,2.5vw,32px);max-width:26ch}
.proposito-caja p{margin-top:16px;max-width:64ch;font-size:16.5px;line-height:1.72;color:var(--texto)}

/* --- Lo que guia nuestro trabajo ------------------------------------------- */
.guia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:16px}
.guia-grid > div{
  padding:18px 20px;border-radius:14px;
  background:rgba(255,255,255,.028);
  border:1px solid var(--borde);
}
.guia-grid strong{
  display:block;font-family:var(--f-titulo);font-size:15.5px;font-weight:700;
  color:#fff;letter-spacing:-.012em;
}
.guia-grid span{display:block;margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--texto-tenue)}

/* --- Alianza con TrustX -----------------------------------------------------
   Va sobre fondo azul noche a proposito: el logotipo de TrustX es BLANCO, y
   sobre el fondo claro de la pagina no se veria. Ademas enlaza visualmente con
   la banda de la portada. */
/* El bloque se reparte en dos columnas: el logotipo a la izquierda y el texto
   a la derecha. El logotipo es mas grande que antes, pero NO ocupa una fila
   propia: se mete en un hueco que de otro modo quedaria vacio, asi que no suma
   altura. La altura del bloque es la del texto. */
.alianza-caja{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,4vw,58px);
  align-items:center;
  padding:34px 38px;border-radius:22px;
  background:
    radial-gradient(680px 300px at 8% 8%,rgba(0,212,255,.14),rgba(0,212,255,0) 70%),
    linear-gradient(140deg,#0B2140,#061227);
  border:1px solid rgba(0,212,255,.22);
}
.alianza-caja .marca-trustx{width:clamp(168px,17vw,224px)}
.alianza-texto h2{margin-top:12px;font-size:clamp(21px,2.2vw,29px);max-width:30ch;color:#fff}
/* Los dos parrafos en paralelo. Al ir uno al lado del otro ocupan la mitad de
   alto que apilados, y el ancho de cada columna sigue siendo comodo de leer. */
.alianza-parrafos{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;margin-top:18px}
.alianza-parrafos p{font-size:14.5px;line-height:1.58;color:#D4E2EF}
.alianza-parrafos p strong{color:#fff}
.boton-alianza{margin-top:18px}
.boton-alianza{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  padding:10px 22px;border:1px solid rgba(149,231,245,.7);border-radius:99px;
  color:#b5f7ff;font-weight:650;font-size:13px;background:rgba(0,35,58,.4);
  transition:background .25s ease,border-color .25s ease;
}
.boton-alianza:hover{background:rgba(0,212,255,.16);border-color:var(--cian)}

/* --- Cierre, con dos botones ------------------------------------------------ */
.llamada-botones{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.llamada-botones .button{flex:none}

@media(max-width:900px){
  .alianza-caja{grid-template-columns:1fr;gap:26px;align-items:start;padding:34px 30px}
  .alianza-caja .marca-trustx{width:184px}
}
@media(max-width:620px){
  .alianza-parrafos{grid-template-columns:1fr;gap:14px}
}
@media(max-width:720px){
  .page-head{padding-top:56px}
  .page-head p{font-size:15.5px}
  .proposito-caja{padding:28px 24px}
  .llamada-botones{width:100%;flex-direction:column}
  .llamada-botones .button{width:100%;justify-content:center}
}

/* ==========================================================================
   LOS NODOS VIAJAN
   --------------------------------------------------------------------------
   La capa de nodos se desplaza a saltos entre intersecciones distintas. Las
   otras cuatro capas (las dos rejillas) van nombradas en cada fotograma, para
   que se queden quietas: si no se nombran, heredan el desplazamiento y la
   rejilla entera se moveria con ellos.

   Todas las posiciones son multiplos de 68, que es el lado de una celda. La
   baldosa de los nodos mide 204 (tres celdas), asi que al correrla un multiplo
   de 68 los nodos vuelven a caer justo sobre las intersecciones. Con un
   desplazamiento que no fuera multiplo quedarian entre dos lineas.

   El cambio es a saltos, no continuo: entre salto y salto la propiedad no
   varia, y el navegador solo repinta en esos seis momentos del ciclo en lugar
   de en cada fotograma.
   ========================================================================== */

@keyframes nodos-viajan{
  0%{background-position:-68px -102px,0px 34px,34px 0,34px 0,34px 0,34px 0}
  8%{background-position:-68px -102px,0px 34px,34px 0,34px 0,34px 0,34px 0}
  23%{background-position:0px -102px,0px 34px,34px 0,34px 0,34px 0,34px 0}
  31%{background-position:0px -102px,0px -34px,34px 0,34px 0,34px 0,34px 0}
  46%{background-position:0px -34px,0px -34px,34px 0,34px 0,34px 0,34px 0}
  54%{background-position:0px -34px,68px -34px,34px 0,34px 0,34px 0,34px 0}
  69%{background-position:-68px -34px,68px -34px,34px 0,34px 0,34px 0,34px 0}
  77%{background-position:-68px -34px,68px 34px,34px 0,34px 0,34px 0,34px 0}
  92%{background-position:-68px -102px,68px 34px,34px 0,34px 0,34px 0,34px 0}
  100%{background-position:-68px -102px,0px 34px,34px 0,34px 0,34px 0,34px 0}
}

body::before{animation:nodos-viajan 40s ease-in-out infinite}

/* Quien tenga activado el movimiento reducido en su sistema no lo vera moverse. */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}