:root{
  --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098;
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
}
/* ── el banner de cabecera ────────────────────────────────── */
/* `.hero-bg-wrap.small-header` con /imagenes/universo_netebu.jpg de
   fondo. El titulo salia en la fuente del sistema a 36 px porque este
   bloque vive FUERA de `.main-container`: por eso las variables se
   declaran ahora en `:root`.                                        */
.hero-bg-wrap.small-header{
  position:relative; background-color:#0B0A16 !important;
  /* Croster añade `border-top:5px solid #E42FD2` a
     `.header-banner-styled`. Era la línea magenta que aparecía pegada
     al borde superior del viewport, por encima incluso de la isla. */
  border-top:0 !important;
}
/* Velo de marca. Funde hacia el propio negro de la seccion, nunca
   hacia blanco, y deja asomar la foto por el centro.               */
/* LA FOTO DEL UNIVERSO SE SUSTITUYE POR UNA RED NEURONAL VIVA.
   Es la MISMA pieza que anima el fondo de webmail.php: nodos que se
   mueven despacio, aristas que se desvanecen con la distancia y
   pulsos que viajan de nodo a nodo. Copiarla y no imitarla es lo
   unico que garantiza que se vean iguales.                        */
.hero-bg-wrap.small-header{background-image:none !important}
.hero-bg-wrap.small-header .nb-net{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1; pointer-events:none;
}
/* un tinte de marca por detras, para que la red no flote sobre un
   negro plano */
.hero-bg-wrap.small-header::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(74,144,217,0.22), transparent 64%),
    radial-gradient(760px 400px at 88% 100%, rgba(232,64,152,0.18), transparent 62%);
}
/* filo inferior con el degradado, igual que en el pie */
.hero-bg-wrap.small-header::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  z-index:3; background:var(--nb-grad);
}
.hero-bg-wrap.small-header > .container{
  position:relative; z-index:2; max-width:1400px !important;
}
.hero-bg-wrap.small-header .page-title{
  /* `align-items:center` repartia el hueco sobrante y el titulo caia
     donde salia —a 193 px, demasiado cerca de la isla, que acaba en
     95—. Anclado arriba, el relleno superior DECIDE la posicion y
     es la misma en todas las paginas. */
  min-height:400px;
  display:flex; align-items:flex-start; flex-direction:column;
  justify-content:flex-start;
  padding:238px 0 78px !important;
}
.hero-bg-wrap.small-header .page-title > .header-lined{width:100%}
@media (max-width:991px){
  .hero-bg-wrap.small-header .page-title{
    min-height:320px; padding:172px 0 60px !important;
  }
}
@media (max-width:767px){
  /* la isla movil acaba en y=90: 148 px dejan un respiro de 58 */
  .hero-bg-wrap.small-header .page-title{
    min-height:280px; padding:148px 0 50px !important;
  }
}
.hero-bg-wrap.small-header .header-lined{
  border:0 !important; margin:0 !important; padding:0 !important;
}
.hero-bg-wrap.small-header h1,
.hero-bg-wrap.small-header .h1{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem) !important;
  letter-spacing:-0.032em; line-height:1.08;
  color:#F2F3FB !important; text-wrap:balance;
  margin:0 0 12px !important;
}
/* las migas */
.hero-bg-wrap.small-header .breadcrumb{
  background:transparent !important; padding:0 !important; margin:0 !important;
  font-family:var(--nb-ff-b); font-size:0.875rem;
}
.hero-bg-wrap.small-header .breadcrumb-item,
.hero-bg-wrap.small-header .breadcrumb-item a{
  color:#B9BEDD !important; transition:color 0.2s ease;
}
.hero-bg-wrap.small-header .breadcrumb-item a:hover{color:#F2F3FB !important}
.hero-bg-wrap.small-header .breadcrumb-item.active{color:#F2F3FB !important; font-weight:500}
.hero-bg-wrap.small-header .breadcrumb-item + .breadcrumb-item::before{
  color:var(--nb-violet) !important; opacity:0.85;
}
/* el rotulo de la derecha («Manuales, programas y otros archivos») */
.hero-bg-wrap.small-header .header-lined span,
.hero-bg-wrap.small-header .header-lined p,
.hero-bg-wrap.small-header small{
  font-family:var(--nb-ff-d) !important; color:#B9BEDD !important;
  font-size:0.82rem !important; letter-spacing:0.1em; text-transform:uppercase;
}

/* ══ EL CAMPO DE "SOMOS NETEBU" ═════════════════════════════
   El titular y la presentacion pasan a fondo oscuro con la red
   neuronal detras, para que la isla del menu tenga sobre que
   apoyarse. El campo se detiene antes de "Nuestros valores": de
   ahi para abajo la pagina sigue en claro, como estaba.
   El degradado de cierre funde hacia el BLANCO de la pagina
   porque es el color real de lo que viene despues —no es un velo
   sobre imagen, es la costura entre dos zonas—. */
body .nb-wrap .nb-container{position:relative}
/* ══ EL FONDO, DESDE EL CSS ═════════════════════════════════
   El campo oscuro lo montaba SOLO el JavaScript: creaba `.nb-campo`
   y le anadia `body.nb-somos` en `DOMContentLoaded`. Hasta ese
   momento el navegador no tenia nada que pintar y la seccion salia
   EN BLANCO unos cientos de milisegundos.

   Es el mismo fallo que tenia el navbar: el aspecto bueno dependia
   de una clase que ponia el JS, asi que el primer fotograma salia
   sin ella. Y la misma cura: que el CSS de por defecto el aspecto
   correcto y el JS se limite a lo que solo el puede hacer.

   Por eso los selectores de aqui abajo cuelgan ahora de `.nb-wrap`
   —que solo existe en esta pagina, comprobado— en vez de
   `body.nb-somos`. `body .nb-wrap` conserva exactamente la misma
   especificidad que `body.nb-somos`, asi que ninguna regla cambia
   de peso.

   Este `::before` pinta el fondo desde el primer fotograma con una
   altura de partida. Cuando el JS mide la seccion escribe la altura
   real en `--nb-campo-alto`, que es la que usan TANTO este como el
   campo de verdad: al coincidir, el relevo no da ningun salto. El
   campo real se monta encima y anade lo que solo el puede dar —la
   red neuronal, el tinte y el filo—. */
body .nb-wrap .nb-container::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:0; width:100vw; max-width:100vw;
  height:var(--nb-campo-alto, 675px);
  background:#0B0A16; z-index:0; pointer-events:none;
}
/* Alturas de partida MEDIDAS en el navegador, no estimadas: en movil
   el campo es MAS alto que en escritorio, porque el mismo texto ocupa
   muchas mas lineas. Cuanto mejor sea esta aproximacion, menos se
   ajusta el bloque cuando el JS escribe la altura real.
     390 px -> 788    768 px -> 555    1024 px -> 617    1440+ -> 673  */
@media (max-width:767px){
  body .nb-wrap .nb-container::before{height:var(--nb-campo-alto, 790px)}
}
@media (min-width:768px) and (max-width:1023px){
  body .nb-wrap .nb-container::before{height:var(--nb-campo-alto, 560px)}
}
@media (min-width:1024px) and (max-width:1279px){
  body .nb-wrap .nb-container::before{height:var(--nb-campo-alto, 620px)}
}
.nb-wrap .nb-campo{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; width:100vw; max-width:100vw;
  z-index:0; pointer-events:none; overflow:hidden;
  background:#0B0A16;
}
.nb-wrap .nb-campo .nb-net{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.nb-wrap .nb-campo::after{
  content:""; position:absolute; inset:0;
  /* Sin fundido: el campo es una SECCION con su corte limpio. Solo
     el tinte de marca, igual que el banner de las demas paginas. */
  background:
    radial-gradient(900px 460px at 14% 0%, rgba(74,144,217,0.20), transparent 64%),
    radial-gradient(760px 400px at 86% 100%, rgba(232,64,152,0.16), transparent 62%);
}
/* filo inferior con el degradado, el mismo remate que el banner */
.nb-wrap .nb-campo::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  z-index:2; background:var(--nb-grad);
}
/* TODO el contenido por encima del campo, no solo el titular y la
   presentacion: la cola del campo llega mas abajo que el parrafo y
   tapaba "Nuestros valores", que no llevaba z-index. */
/* `:not(.nb-campo)` es imprescindible: el campo es `position:absolute`
   y con un `> *` se le cambiaba a `relative`, con lo que dejaba de
   flotar, PASABA A OCUPAR SITIO en el flujo y empujaba toda la
   pagina 850 px hacia abajo. */
body .nb-wrap .nb-container > *:not(.nb-campo){position:relative; z-index:1}
/* el texto, al claro */
body .nb-wrap .nb-hero h1,
body .nb-wrap .nb-hero .nb-title,
body .nb-wrap .nb-hero h2{color:#F2F3FB !important}
body .nb-wrap .nb-intro,
body .nb-wrap .nb-intro p,
body .nb-wrap .nb-intro div{color:#B9BEDD !important}
body .nb-wrap .nb-intro strong,
body .nb-wrap .nb-intro b,
body .nb-wrap .nb-intro mark{color:#F2F3FB !important; background:transparent !important}
/* el rotulo de encima del titular: sobre el campo oscuro necesita
   mas cuerpo del que traia —salia violeta sobre violeta— */
body .nb-wrap .nb-hero [class*="eyebrow"],
body .nb-wrap .nb-hero .nb-kicker,
body .nb-wrap .nb-container > .nb-hero span[class]:first-child{
  background:rgba(255,255,255,0.09) !important;
  border:1px solid rgba(255,255,255,0.20) !important;
  color:#F2F3FB !important;
}
body .nb-wrap .nb-hero [class*="eyebrow"] *,
body .nb-wrap .nb-hero .nb-kicker *{color:#F2F3FB !important}
/* y el cuerpo del parrafo, con el claro de marca */
body .nb-wrap .nb-intro *{color:#CFD3EA !important}
body .nb-wrap .nb-intro strong,
body .nb-wrap .nb-intro b{color:#FFFFFF !important}
/* la caja de la presentacion, de cristal en vez de gris claro */
body .nb-wrap .nb-intro{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* "Nuestros valores" se separa para quedar POR DEBAJO de la cola
   del campo: si cae dentro del fundido, su rotulo rosa se lava. */
/* Aire normal de seccion: el campo termina justo encima, ya no hay
   ningun fundido del que escapar. */
body .nb-wrap .nb-values-wrap{margin-top:0 !important; padding-top:64px}
/* el titular tiene que despejar la isla, que acaba en y=95 */
body .nb-wrap .nb-container > .nb-hero{padding-top:150px !important}
@media (max-width:767px){
  body .nb-wrap .nb-container > .nb-hero{padding-top:120px !important}
}