: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-somos .nb-wrap .nb-container{position:relative}
.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-somos .nb-container > *:not(.nb-campo){position:relative; z-index:1}
/* el texto, al claro */
body.nb-somos .nb-hero h1,
body.nb-somos .nb-hero .nb-title,
body.nb-somos .nb-hero h2{color:#F2F3FB !important}
body.nb-somos .nb-intro,
body.nb-somos .nb-intro p,
body.nb-somos .nb-intro div{color:#B9BEDD !important}
body.nb-somos .nb-intro strong,
body.nb-somos .nb-intro b,
body.nb-somos .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-somos .nb-hero [class*="eyebrow"],
body.nb-somos .nb-hero .nb-kicker,
body.nb-somos .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-somos .nb-hero [class*="eyebrow"] *,
body.nb-somos .nb-hero .nb-kicker *{color:#F2F3FB !important}
/* y el cuerpo del parrafo, con el claro de marca */
body.nb-somos .nb-intro *{color:#CFD3EA !important}
body.nb-somos .nb-intro strong,
body.nb-somos .nb-intro b{color:#FFFFFF !important}
/* la caja de la presentacion, de cristal en vez de gris claro */
body.nb-somos .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-somos .nb-values-wrap{margin-top:0 !important; padding-top:64px}
/* el titular tiene que despejar la isla, que acaba en y=95 */
body.nb-somos .nb-container > .nb-hero{padding-top:150px !important}
@media (max-width:767px){
  body.nb-somos .nb-container > .nb-hero{padding-top:120px !important}
}