/* Croster adorna TODO <mark> con una barrita amarilla inclinada:
     mark:after{background-color:#fedc45; position:absolute;
                right:-0.1em; width:0.2em; height:1.535em;
                transform:skew(-7deg,0)}
   Ya se quito del pie; tambien sale en el cuerpo —dos veces en
   Nosotros—. Es un amarillo ajeno a la marca. */
.sec mark::after{content:none !important}
.sec mark{
  background:var(--nb-grad-suave) !important;
  border-radius:5px; padding:0 5px; color:inherit !important;
}

/* ══ Netebu · bloques del Page Builder ═════════════════════════ */
.sec{
  --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098;
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-grad-suave:linear-gradient(135deg,rgba(74,144,217,0.16) 0%,rgba(123,92,246,0.16) 50%,rgba(232,64,152,0.16) 100%);
  --nb-night:#0B0A16; --nb-night-2:#141227; --nb-night-3:#1E1B33;
  --nb-on:#F2F3FB; --nb-on-2:#B9BEDD; --nb-on-3:#8E94BC;
  --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85;
  --nb-line:#E9E4F3; --nb-line-2:#D8D0EC;
  --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE;
  --nb-violet-aa:#6B48F2; --nb-ok:#116B47;
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
}

/* Croster fuerza h1..h4{color:#211b65} sobre el elemento, y una regla
   directa gana a la herencia. Sin esto los titulos salen azul marino
   incluso sobre fondo negro. */
.sec h1,.sec h2,.sec h3,.sec h4,
.sec .h1,.sec .h2,.sec .h3,.sec .h4{
  font-family:var(--nb-ff-d) !important;
  letter-spacing:-0.024em; text-wrap:balance;
}
.sec .sec-title{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  letter-spacing:-0.028em; line-height:1.1;
}
/* El badge superior: mismo aspecto que el de la portada. Croster lo
   pinta con un marco rectangular; aqui pasa a pildora con punto. */
.sec .sec-caption{
  display:inline-flex !important; align-items:center; gap:10px;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:12px !important; letter-spacing:0.14em !important;
  text-transform:uppercase; line-height:1.3;
  padding:7px 16px 7px 12px !important; border-radius:100px !important;
  background:rgba(123,92,246,0.16) !important;
  border:1px solid rgba(123,92,246,0.42) !important;
  margin-bottom:22px !important; width:fit-content;
}
.sec .sec-caption::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--nb-pink);
  box-shadow:0 0 0 4px rgba(232,64,152,0.22);
}
/* El texto del caption va dentro de un <span> que Croster pinta con
   `border:1px solid var(--white)`: ese es el rectangulo blanco que se
   veia DENTRO de la pildora. Se le quita el marco y el relleno. */
.sec .sec-caption span{
  border:0 !important; padding:0 !important;
  display:inline !important; background:transparent !important;
  color:#CFC0FF !important; letter-spacing:inherit;
}
/* Croster mete <br> dentro del caption en algunas paginas. Ocultarlos
   a secas juntaba las palabras ("TU EMPRESANO PUEDE SER"), asi que se
   sustituyen por un espacio en vez de eliminarlos. */
.sec .sec-caption br{content:" "; display:inline}
.sec .sec-caption br::after{content:" "; white-space:pre}
/* Un caption muy largo no cabe en una linea: que envuelva con gracia.

   Y que envuelva el TEXTO, no la pildora. El caption es un flex con dos
   hijos: el punto rosa del `::before` y el <span>. Con `flex-wrap:wrap`,
   cuando el texto no cabe no parte por dentro: se va entero a una segunda
   linea DEL FLEX y deja el punto solo arriba a la izquierda, descolgado.
   Se veia en movil en «PROFESIONAL, FACIL Y RAPIDOS...».

   Con `nowrap` el punto y el texto siguen siendo la misma fila, el <span>
   parte por dentro en dos lineas y `align-items:center` deja el punto a
   media altura del bloque. Medido a 390 px: el texto pasa de empezar 25 px
   por debajo del borde a 8, y la pildora baja de 62 a 45 px de alto. */
.sec .sec-caption{max-width:100%; flex-wrap:nowrap}
@media (max-width:640px){
  .sec .sec-caption{
    flex-wrap:nowrap; font-size:11px !important; letter-spacing:0.1em !important;
  }
}
.sec .sec-description,.sec .sec-subtitle{
  font-family:var(--nb-ff-b) !important; font-weight:400 !important;
}

/* ══ BANNERS (hero y llamadas a la accion) ══ */
.sec.site-banner{background:var(--nb-night) !important; position:relative}
.sec.site-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 440px at 16% -12%, rgba(74,144,217,0.22), transparent 62%),
    radial-gradient(900px 400px at 84% 8%, rgba(232,64,152,0.16), transparent 60%);
}
.sec.site-banner .banner-content-container,
.sec.site-banner .banner_content{position:relative; z-index:2}
.sec.site-banner .sec-caption{color:#CFC0FF !important}
.sec.site-banner .sec-title,
.sec.site-banner h1,.sec.site-banner .h1,
.sec.site-banner h2,.sec.site-banner .h2{
  color:var(--nb-on) !important;
  font-size:clamp(2rem,4.4vw,3.2rem) !important; font-weight:800 !important;
}
.sec.site-banner .sec-subtitle,
.sec.site-banner .banner_body,
.sec.site-banner .banner_body p,
.sec.site-banner .banner_body li{color:#CFC9E0 !important}
.sec.site-banner .banner_body b,
.sec.site-banner .banner_body strong{color:var(--nb-on) !important}
/* ── altura del hero ──────────────────────────────────────
   El tema lo deja en 576 px FIJOS. A 1920 de ancho eso da una
   proporcion de 3,33 frente al 1,78 de las ilustraciones, y como el
   fondo va con `background-size:cover`, se recortaba casi la mitad
   de la imagen por arriba y por abajo. Con una altura que crece con
   el ancho se ve bastante mas: a 1920 pasa de 576 a unos 730 px.
   El `clamp` pone suelo y techo para que ni se aplaste en portatiles
   ni se coma la pantalla en un monitor grande.                   */
.sec.site-banner,
.sec.site-banner .banner_body{
  min-height:clamp(540px, 38vw, 800px) !important;
  height:auto !important;
}
/* el contenido, centrado en esa altura */
.sec.site-banner .banner_body{
  display:flex !important; flex-direction:column; justify-content:center;
}
@media (max-width:767px){
  .sec.site-banner,
  .sec.site-banner .banner_body{min-height:clamp(420px, 78vw, 560px) !important}
}
/* ── el badge, por debajo de la barra en movil ──────────────
   La barra flota (`position:fixed`) y ocupa hasta los 90 px. El
   contenido del hero iba centrado, asi que su borde superior depende de
   lo alto que sea: medido a 390x844, el badge arrancaba en el pixel 63
   y quedaba 27 px POR DEBAJO del arranque de la barra, tapado.

   Y centrado no se arregla con un numero: cuanto mas largo el texto,
   mas sube el borde y mas se mete. Anclandolo arriba, el badge queda
   siempre a la misma distancia del borde —112 px de relleno, badge en
   el 115, 25 px de aire bajo la barra— y lo que crezca empuja hacia
   ABAJO, que es donde sobra sitio.

   Hasta 991 px y no 767: el menu es `navbar-expand-lg`, o sea que la
   barra sigue en version movil hasta ese ancho. */
@media (max-width:991px){
  .sec.site-banner .banner_body{
    justify-content:flex-start !important;
    padding-top:112px !important;
  }
}

/* ── que el texto del hero se lea sobre la ilustracion ──────
   MEDIDO, no supuesto. Bajo cada linea de texto la luminancia MEDIANA de
   la imagen es 0,002-0,013 —practicamente negro—, pero el PEOR punto de
   la linea llega a 0,99: las estelas de neon cruzan por debajo de las
   letras. Ahi el contraste cae a 1,07:1 cuando el minimo AA es 4,5.

   Oscurecer no lo arregla. Simulado un degradado lateral hasta con un 95%
   de negro: el peor punto se queda en 0,66 y el contraste en 1,48, porque
   los puntos calientes caen a mitad de la caja de texto, donde el
   degradado ya casi no actua. Y el velo del tema tampoco lo arreglaba:
   dejaba esas mismas letras en 2:1.

   La sombra si, y ademas no toca la imagen: viaja con el texto, cae justo
   donde hace falta y no roba ni un punto de luz a la ilustracion. Sobre
   las demas, cuyo fondo bajo el texto ya es negro, no se ve. Se aplica a
   todos los heros a proposito: la proxima ilustracion que entre puede
   traer un punto claro donde menos conviene, y asi ya esta cubierta. */
.sec.site-banner .sec-caption,
.sec.site-banner .banner_content h1,
.sec.site-banner .banner_content h2,
.sec.site-banner .banner_body li,
.sec.site-banner .banner_body p{
  text-shadow:0 1px 2px rgba(11,10,22,0.95), 0 2px 16px rgba(11,10,22,0.9), 0 0 42px rgba(11,10,22,0.8);
}

.sec.site-banner .banner_body ul{list-style:none; padding-left:0}
.sec.site-banner .banner_body li{
  list-style:none !important; display:block !important;
  position:relative; padding-left:26px; margin-bottom:9px; line-height:1.6;
}
.sec.site-banner .banner_body li::marker{content:"" !important}
.sec.site-banner .banner_body li::before{
  content:""; position:absolute; left:2px; top:0.62em;
  width:7px; height:7px; border-radius:50%; background:var(--nb-grad);
}

/* ══ BOTONES ══ */
.sec .btn-primary,
.sec .btn.btn-primary,
.sec .btn-xlg{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border:0 !important; color:#fff !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:11px !important; padding:13px 26px !important;
  box-shadow:0 10px 26px -12px rgba(123,92,246,0.52);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.sec .btn-primary:hover,.sec .btn-xlg:hover{
  transform:translateY(-2px); color:#fff !important;
  box-shadow:0 16px 32px -14px rgba(123,92,246,0.64);
}

/* ══ TABLA DE PLANES — el bloque nativo, con sus precios de WHMCS ══ */
.sec.products{background:var(--nb-paper-2) !important}
.sec.products.light{background:var(--nb-paper-2) !important}
.sec.products .sec-title{color:var(--nb-ink) !important}
.sec.products .sec-description{color:var(--nb-ink-2) !important}

/* OJO con las dos clases, que se parecen y NO son lo mismo:
     .cros-pricing-table  es la TARJETA del plan
     .pricing_main        es solo la CAJITA del precio, dentro
   Tratar la segunda como tarjeta dejaba el texto "Mensual" pegado al
   borde y cortado. */
.sec.products .cros-pricing-table{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  padding:26px 24px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 12px 32px -16px rgba(20,17,31,0.14);
  transition:transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}
.sec.products .cros-pricing-table:hover{
  transform:translateY(-5px); border-color:var(--nb-line-2) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.06), 0 26px 56px -22px rgba(90,60,200,0.32);
}
.sec.products .cros-pricing-table h4{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink) !important; font-size:1.28rem !important;
  margin-bottom:16px !important;
}
/* la cajita del precio */
.sec.products .product_pricing{margin:4px 0 18px}
.sec.products .pricing_main{
  background:var(--nb-paper-2) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:12px !important;
  padding:14px 18px 12px !important;
}
.sec.products .pricing_main .price{
  display:flex; align-items:baseline; gap:3px; line-height:1;
}
.sec.products .pricing_main .cycle{margin-top:6px}
/* el precio */
.sec.products .price,
.sec.products .cost,
.sec.products .product_pricing,
.sec.products .regular_pricing{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  color:var(--nb-ink) !important; font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
}
.sec.products .cycle{
  font-family:var(--nb-ff-b) !important; font-weight:400 !important;
  color:var(--nb-ink-3) !important; letter-spacing:0;
  font-size:0.85rem; padding:0; margin:0; white-space:nowrap;
}
.sec.products .suffix{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink-2) !important; font-size:1.1rem;
}
/* lista de caracteristicas */
.sec.products .plan-features{
  border-top:1px solid var(--nb-line); padding-top:18px; margin-top:4px;
}
.sec.products .plan-features li,
.sec.products .plan-features p{
  font-family:var(--nb-ff-b); font-size:0.94rem; color:var(--nb-ink-2);
  padding:6px 0; line-height:1.55;
}
.sec.products .plan-features .fa-check,
.sec.products .plan-features .fas.fa-check{color:var(--nb-ok) !important}
.sec.products .plan-features .fa-times{color:var(--nb-line-2) !important}
/* selector de ciclo de facturacion */
.sec.products .billing-cycle-pricing .btn,
.sec.products .PriceList-toggle .btn{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:9px !important; font-size:0.9rem;
}
.sec.products .badge-primary,
.sec.products .save_t{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !important; font-family:var(--nb-ff-d); font-weight:700;
  font-size:10.5px; letter-spacing:0.06em; border-radius:20px; padding:3px 10px;
}

/* ══ SELECTOR DE VPS (bloque ProductPriceListTwo) ══
   Estructura de Croster:
     .cros-pricing-table > .cros-tabsbar > ul.nav-tabs > li > a.nav-link
                         > .tab-content > .tab-pane > .plan-specs
                             > .row > .col-md-2 > .description > h5 + h2
                             > .col-md-2 (precio) > .pricing > .cost + .suffix
                             > a.order-now.bg-primary
   Los precios los inyecta WHMCS desde los productos de SolusVM, asi
   que aqui NO se toca ni un numero: solo el aspecto. */
.sec.products .pricing-box{background:transparent !important; border:0 !important}
.sec.products .cros-pricing-table.no-animation{
  padding:22px !important; overflow:visible;
}
.sec.products .cros-pricing-table.no-animation:hover{transform:none}

/* ── pestañas de plan ── */
.sec.products .cros-tabsbar{
  border:0 !important; background:transparent !important; margin-bottom:20px;
}
.sec.products .cros-tabsbar .nav-tabs{
  border:0 !important; display:flex; flex-wrap:wrap; gap:7px;
}
.sec.products .cros-tabsbar .nav-item{margin:0 !important; border:0 !important}
.sec.products .cros-tabsbar .nav-link{
  border:1px solid var(--nb-line-2) !important; border-radius:10px !important;
  background:var(--nb-paper) !important; color:var(--nb-ink-2) !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.855rem !important; padding:8px 14px !important;
  margin:0 !important; white-space:nowrap;
  transition:border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.sec.products .cros-tabsbar .nav-link:hover{
  border-color:var(--nb-violet) !important; color:var(--nb-violet-aa) !important;
  transform:translateY(-1px);
}
.sec.products .cros-tabsbar .nav-link.active{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border-color:transparent !important; color:#fff !important;
  box-shadow:0 8px 20px -10px rgba(123,92,246,0.62);
}
.sec.products .cros-tabsbar .nav-link i,
.sec.products .cros-tabsbar .nav-link .fad{display:none}
/* la flecha que Croster dibuja bajo la pestaña activa sobra */
.sec.products .cros-tabsbar.arrow .nav-link.active::after,
.sec.products .cros-tabsbar.arrow .nav-link.active::before{display:none !important}

/* ── fila de caracteristicas del plan ── */
.sec.products .plan-specs{
  background:var(--nb-paper-2) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:14px !important; overflow:hidden; padding:0 !important;
}
.sec.products .plan-specs .row{margin:0 !important; align-items:stretch}
/* AQUI HABIA UN `border-right` Y SOBRABA. EL FALLO DE LAS RAYAS SUELTAS.
   El tema ya dibuja el separador de cada columna, en la propia celda:
   `.tab-pane .plan-specs [class*='col-']{border-width:1px 1px 1px 0}`.
   Poner otro en `.description` pintaba DOS rayas por columna, y la
   segunda no caia en el borde: la celda es `flex; justify-content:center`,
   asi que `.description` se encoge al ancho de SU TEXTO y arrastra el
   borde con ella. Como cada dato mide distinto —«2 vCPU» corto, «40 GB
   SSD» largo—, las rayas caian a distancias distintas y parecian
   columnas vacias. Medido: la celda de RAM va de 447 a 648 y su raya
   fantasma estaba en 595, a 53 px del borde.
   Se quita. El separador es el de la celda, que si llega de arriba
   abajo y esta donde tiene que estar. */
.sec.products .plan-specs .description{
  padding:20px 18px; height:100%;
}
/* EL GRIS TERCIARIO NO LLEGA SOBRE EL PANEL, Y NO ES CULPA DEL GRIS.
   `--nb-ink-3` (#726C85) da 5,00:1 sobre blanco: cumple de sobra. Pero
   el panel de caracteristicas no es blanco, es #EDF0F5, y ahi el mismo
   color cae a 4,38:1 — por debajo del 4,5 que exige la norma para texto
   de este cuerpo. Medido en las tres anchuras.

   Por eso no se toca la variable: son 84 usos en once ficheros y en casi
   todos va sobre blanco, donde funciona. Se oscurece SOLO aqui, un tono
   del mismo gris violaceo, que sube a 5,92:1. La diferencia a ojo es
   casi nula; la que se nota es la de poder leerlo. */
.sec.products .plan-specs h5{
  font-family:var(--nb-ff-b) !important; font-size:0.79rem !important;
  font-weight:500 !important; letter-spacing:0.05em; text-transform:uppercase;
  color:#5D5872 !important; margin:0 0 7px !important;
  display:flex; align-items:center; gap:7px;
}
.sec.products .plan-specs h5 i{color:var(--nb-violet-aa) !important; font-size:14px}
.sec.products .plan-specs h2{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.32rem !important; color:var(--nb-ink) !important;
  margin:0 !important; letter-spacing:-0.022em; line-height:1.15;
}
/* la columna del precio */
/* La celda del precio tampoco pinta su propio borde. Lo hacia con
   `--nb-line` (#E9E4F3, lila) mientras las demas usan el #D5DCE5 gris
   que pone el tema: la ultima raya del panel salia de otro tono que las
   cuatro anteriores. Se nota poco y se ve mal, que es la peor
   combinacion. */
.sec.products .plan-specs .flex-column{
  padding:20px 18px;
  display:flex; flex-direction:column; justify-content:center;
}
.sec.products .plan-specs .pricing{display:flex; align-items:baseline; gap:3px; line-height:1}
.sec.products .plan-specs .cost{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  font-size:1.72rem !important; color:var(--nb-ink) !important;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
}
.sec.products .plan-specs .suffix{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink-2) !important; font-size:1.02rem !important;
}
/* ── el boton de configurar ── */
.sec.products .order-now,
.sec.products a.order-now.bg-primary{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  border:0 !important; color:#fff !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1rem; display:flex !important; align-items:center;
  justify-content:center; text-align:center;
  transition:filter 0.22s ease;
}
.sec.products .order-now:hover{color:#fff !important; filter:brightness(1.08)}
/* Croster le dibuja un pico lateral que aqui sobra */
.sec.products .order-now::before,
.sec.products .order-now::after{display:none !important}

/* ── el aviso de abajo, con su <mark> amarillo de Bootstrap ── */
.sec.products .block-s3{padding:16px 4px 4px}
.sec.products .block-s3 p{
  font-family:var(--nb-ff-b); font-size:0.925rem;
  color:var(--nb-ink-2) !important; margin:0;
}
.sec.products .block-s3 mark{
  background:var(--nb-grad-suave) !important;
  border:1px solid rgba(123,92,246,0.32);
  color:var(--nb-ink) !important; font-family:var(--nb-ff-d); font-weight:700;
  padding:2px 10px !important; border-radius:20px; font-size:0.85rem;
}

/* HASTA 991 px, NO 767. Medido en seis anchuras: con las seis columnas
   en fila, la etiqueta «ALMACENAMIENTO» se sale de su celda 35 px a
   768 px y 19 px a 992 px, y lo que se ve es la palabra cortada con su
   icono metido dentro de la columna de RAM. A partir de 1200 cabe.
   La tablet vertical entra por tanto en la rejilla de dos por dos, que
   es la misma solucion que ya funcionaba en el movil. */
@media (max-width:991px){
  /* CUATRO DATOS APILADOS SE COMEN UNA PANTALLA ENTERA. Medido en un
     movil de 390 px: el panel media 842 px de alto para decir
     procesador, RAM, disco y trafico. Puestos de dos en dos se leen
     igual, se COMPARAN mejor —el ojo los ve juntos— y bajan a la
     mitad. El precio y el boton siguen a ancho completo: son la
     accion, y una accion no se parte en dos columnas. */
  .sec.products .plan-specs .row{
    display:grid !important; grid-template-columns:1fr 1fr;
  }
  /* Y HAY QUE SOLTAR LAS CELDAS DE BOOTSTRAP, O LA REJILLA NO SIRVE.
     `col-md-2` empieza a aplicar justo en 768 y trae `flex:0 0 16.666%`
     con `max-width:16.666%`. Dentro de una rejilla eso no desaparece:
     cada celda ocupaba un sexto de su columna y el panel quedaba
     descuadrado, con las etiquetas saliendose por la izquierda y el
     precio metido en una franja estrecha. Por debajo de 768 no se veia
     porque `col-md-*` no aplica ahi: por eso el movil iba bien y la
     tablet no. */
  .sec.products .plan-specs .row > [class*="col-"]{
    flex:none !important; max-width:none !important; width:auto !important;
  }
  .sec.products .plan-specs .row > .flex-column,
  .sec.products .plan-specs .row > .order-now{grid-column:1 / -1}
  .sec.products .plan-specs .description{padding:15px 14px}
  /* Y SE QUITA EL AIRE MUERTO. El tema le pone `min-height:117px` a
     cada celda para cuadrar la fila de escritorio; aqui, apiladas, eso
     son 68 px vacios POR CELDA sobre 49 px de contenido. En un movil de
     390 el panel acababa midiendo 441 px: media pantalla para decir
     cuatro cifras, y la mitad de ella en blanco. Con el alto que pide
     el contenido baja a unos 300 y el precio entra en la misma vista
     que los datos, que es de lo que va todo esto. */
  .sec.products .plan-specs .row > .col-md-2{
    min-height:0 !important; height:auto !important;
  }
  /* En la rejilla de dos columnas los separadores tambien van en la
     CELDA, por lo mismo que arriba: `.description` no ocupa el ancho de
     su celda y su borde acaba donde acaba el texto. Los datos son los
     cuatro primeros hijos, asi que los de la columna izquierda son los
     impares: ahi va la linea vertical. La horizontal, en todos menos en
     el ultimo, que ya cierra el panel. */
  .sec.products .plan-specs .row > .col-md-2{
    border-width:0 0 1px 0 !important;
  }
  .sec.products .plan-specs .row > .col-md-2:nth-child(odd){
    border-right-width:1px !important;
  }
  .sec.products .plan-specs .row > .flex-column{
    border-width:0 0 1px 0 !important;
  }
  /* El precio, en linea en vez de en columna: son tres palabras.
     `min-height:0` porque el tema le pone el alto de las celdas de
     datos —117 px— para una sola linea de texto, y sobraba medio
     hueco vacio debajo de la cifra. */
  .sec.products .plan-specs .flex-column{
    flex-direction:row !important; align-items:baseline; gap:8px;
    justify-content:center; padding:16px !important;
    min-height:0 !important; height:auto !important; flex-wrap:wrap;
  }
  /* Lo mismo con el boton: heredaba `min-height:117px` y con su
     relleno acababa en 145 px de degradado. Una banda de ese tamaño
     no se lee como un boton, se lee como una seccion. */
  /* Y EL CULPABLE DE LOS 147 PX ERA `line-height:113px`. Croster se
     lo pone para centrar el texto a mano dentro de la celda alta de
     escritorio. Aqui el boton ya es flex con `align-items:center`,
     asi que ese interlineado solo aporta relleno. Quitar el
     `min-height` sin quitar esto no cambiaba nada. */
  .sec.products .order-now{
    padding:17px 16px !important; border-radius:0 0 13px 13px;
    min-height:0 !important; height:auto !important;
    line-height:1.25 !important;
  }
  .sec.products .cros-tabsbar .nav-tabs{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
  }
}

/* LA FRANJA DE 992 A 1199: la fila de seis columnas ya cabe, pero la
   etiqueta larga se sale 19 px. En vez de romper la fila —que a esa
   anchura se ve bien— se aprieta la etiqueta lo justo: un punto menos
   de cuerpo y casi sin espaciado entre letras. El dato grande, que es
   lo que se lee, no se toca. */
@media (min-width:992px) and (max-width:1199px){
  .sec.products .plan-specs h5{
    font-size:0.70rem !important; letter-spacing:0.02em; gap:5px;
  }
  .sec.products .plan-specs h5 i{font-size:12px}
  .sec.products .plan-specs .description{padding:20px 10px}
  /* Y EL DATO NO SE PARTE. Con la etiqueta ya apretada, el que no
     cabia era «40 GB SSD»: se iba a dos lineas, la fila entera crecia
     de 117 a 140 px para acompanarlo y las otras cinco columnas se
     quedaban con un hueco vacio debajo. Un punto menos de cuerpo y
     prohibido romper: entra en una linea y la fila vuelve a su alto. */
  /* EL DATO NO ES UN `<h2>`. ES UN `<div class="h2">`.
     Por eso la primera version de esta regla —escrita contra `h2`— no
     aplico nunca: `document.querySelectorAll('.plan-specs h2')` devuelve
     CERO en toda la pagina. El tema usa la clase de Bootstrap para
     heredar el estilo del titular sin meter un encabezado en el arbol,
     que ademas es lo correcto: «40 GB SSD» es un dato, no un titulo.

     Y el que no cupiera no era opinable: entre 992 y 1199 la celda mide
     147 px, quedan 127 descontando el relleno, y «40 GB SSD» a los
     28 px que traia ocupa mas. Se partia en dos lineas, la fila crecia
     de 117 a 140 para acompanarlo y las otras cinco columnas se
     quedaban con un hueco muerto debajo.

     A 20 px ocupa unos 93 px y entra con margen. Se prohibe romper por
     si algun plan trae un dato mas largo: «160 GB NVMe», el peor caso,
     son 113 px y tambien cabe. */
  .sec.products .plan-specs .description .h2,
  .sec.products .plan-specs .description h2{
    font-size:1.25rem !important;
    white-space:nowrap !important;
    line-height:1.2 !important;
  }
}

/* ══ LA CINTA DE EXTENSIONES DE `dominios.php` ═══════════════════
   Es un Swiper de quince extensiones dentro de una caja de 354 px:
   novecientos pixeles de contenido de los que se ven trescientos. Dos
   fallos, los dos visibles solo mirando la captura.

   UNO. El primer recuadro se cortaba por la izquierda. La medicion
   decia que no —empieza en 15, y la caja empieza en 15— y la medicion
   se equivocaba: lo que empieza en 15 es la CAJA del elemento, pero su
   borde se pinta encima de esa linea y el `overflow:hidden` del Swiper
   se lo comia. En pantalla se veia un rectangulo morado sin lado
   izquierdo. Cuatro pixeles de relleno lo resuelven.

   DOS. Trece extensiones de quince quedan fuera y nada lo dice: ni una
   flecha, ni un punto, ni una sombra. El que llega ve dos precios y se
   va convencido de que eso es todo lo que hay. Un desvanecido en el
   borde derecho lo cuenta sin ocupar sitio ni pedir un solo byte de
   JavaScript: donde el contenido se difumina, el ojo entiende que
   sigue. Y el cursor de arrastre invita a hacerlo en escritorio, que es
   donde no hay dedo que deslice. */
#banner-tlds-1, [id^="banner-tlds"]{
  padding-left:4px !important;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  cursor:grab;
}
#banner-tlds-1:active, [id^="banner-tlds"]:active{cursor:grabbing}
/* Sin la mascara cuando cabe entero: difuminar el final de algo que ya
   se ve completo solo confunde. */
@media (min-width:1600px){
  #banner-tlds-1, [id^="banner-tlds"]{
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ══ TABLA DE SERVIDORES DEDICADOS (bloque DedicatedServerList) ══
   Croster pinta `.server-info{background:#1a1a1a;color:#fff}` y dentro
   mete un <h4>. Como el tema declara `h1..h4{color:#211b65}` DIRECTO
   sobre el elemento, esa regla gana a la herencia del padre y el
   nombre del modelo salia oscuro sobre fondo oscuro. Hay que darle el
   color explicitamente, no confiar en que lo herede.

   Los datos y los precios los inyecta WHMCS: aqui solo el aspecto. */
.sec.products .table-product-details td{
  border:0 !important; border-bottom:1px solid var(--nb-line) !important;
  padding:18px 14px !important; vertical-align:middle;
  font-family:var(--nb-ff-b); color:var(--nb-ink-2); font-size:0.95rem;
  background:transparent !important;
}
.sec.products .table-product-details:hover td{background:var(--nb-paper-2) !important}
.sec.products .table-product-details td b{
  font-family:var(--nb-ff-d); font-weight:700; color:var(--nb-ink);
  font-size:1.05rem; display:block;
}
.sec.products .table-product-details td small{
  display:block; color:var(--nb-ink-3); font-size:0.8rem; margin-top:2px;
}
.sec.products .footable thead th{
  font-family:var(--nb-ff-d) !important; font-size:11px !important;
  font-weight:600 !important; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--nb-ink-3) !important;
  border:0 !important; border-bottom:1px solid var(--nb-line) !important;
  padding:14px !important; background:transparent !important; white-space:nowrap;
}
/* la chapa con el nombre del modelo */
.sec.products .server-heading{padding:18px 14px 18px 0 !important}
.sec.products .server-info{
  background:var(--nb-night) !important; border-radius:12px !important;
  padding:16px 18px !important; min-width:132px;
  border:1px solid rgba(255,255,255,0.10);
}
.sec.products .server-info h4,
.sec.products .server-info .h4{
  color:#F2F3FB !important; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important; font-size:1.08rem !important;
  margin:0 !important; letter-spacing:-0.015em;
}
.sec.products .server-info i,
.sec.products .server-info .fad{color:#8FA8D8 !important; font-size:18px}
/* la columna del precio */
.sec.products .server-price{min-width:200px}
.sec.products .server-price .price{
  display:flex; align-items:baseline; justify-content:center; gap:3px;
}
.sec.products .server-price .cost{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  font-size:1.6rem !important; color:var(--nb-ink) !important;
  letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
}
.sec.products .server-price .suffix{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink-2) !important; font-size:1rem !important;
}
.sec.products .server-price .cycle{
  display:block; text-align:center; font-size:0.82rem; color:var(--nb-ink-3);
}
.sec.products .setup-fee{
  text-align:center !important; font-family:var(--nb-ff-b);
  font-size:0.8rem; color:var(--nb-ink-3); margin:6px 0 12px;
}
.sec.products .heading-desc h4{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink) !important; font-size:1.32rem !important;
}
.sec.products .heading-desc p{
  font-family:var(--nb-ff-b); color:var(--nb-ink-2) !important;
}

@media (max-width:991px){
  .sec.products .table-product-details td{padding:14px 10px !important}
  .sec.products .server-info{min-width:0; padding:12px 14px !important}
}

/* ══ ICONOS QUE FONT AWESOME NO PINTA ═══════════════════════════
   La instalacion trae Font Awesome Pro 5.10.1 y los cinco ficheros
   de fuente responden 200, pero **FA Pro 5 no incluye todos los
   iconos en todos los pesos**: `fa-microchip` no existe en Regular
   (peso 400) ni `fa-arrow-alt-to-top` en el peso que usa el tema, y
   el navegador dibuja el cuadrito de glifo ausente.

   En vez de pelearse con los pesos, se tapa el glifo y se pinta un
   SVG propio con `mask`, que toma el color de `currentColor`. Asi no
   depende de que la fuente traiga o no el icono.
   ══════════════════════════════════════════════════════════════ */
.nb-ico{
  display:inline-block; width:15px; height:15px; vertical-align:-2px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
/* procesador, en la fila de caracteristicas del VPS */
.sec.products .plan-specs h5 .fa-microchip{
  /* OJO: `font-size:0` esconde el glifo roto, pero tambien deja las
     unidades em a cero. El tamaño va en pixeles a proposito. */
  font-size:0 !important; width:15px !important; height:15px !important;
  display:inline-block; flex:none;
  vertical-align:-2px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* volver arriba, en el pie */
/* Aqui habia una mascara SVG con una flecha de TRAZO. El resultado
   no era el mismo que en webmail.php, donde se ve el glifo de
   FontAwesome `fa-arrow-alt-to-top`: una flecha SOLIDA con barra
   encima. Imitar un glifo con un trazo nunca da lo mismo, asi que se
   usa el mismo glifo en los dos sitios y se acabo la diferencia.
   La clase ya esta en el HTML; solo le faltaba tamano. */
.sec.footer .back-to-top .fa-arrow-alt-to-top,
.sec.footer .back-to-top i{
  font-size:22px !important; line-height:1;
  width:auto !important; height:auto !important;
  background:none !important;
  -webkit-mask:none !important; mask:none !important;
}
/* el enlace "Hosting WEB" del pie usa far fa-code, que tampoco existe */
.sec.footer .navbar-items .fa-code{
  font-size:0 !important; width:15px !important; height:15px !important;
  display:inline-block; flex:none;
  vertical-align:-2px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ══ RAZONES / FEATURES ══ */
.sec.features{background:var(--nb-night-3) !important; position:relative}
.sec.features.inverse .sec-title,
.sec.features .sec-title{color:var(--nb-on) !important}
.sec.features .sec-description{color:#CFC9E0 !important}
/* Croster monta esto como un slider de Swiper con clases de fila de
   Bootstrap: .swiper-wrapper.row > .swiper-slide.col-lg-4 > .feature-item
   Con flex, cada FILA se ajusta a su contenido y unas quedan mas altas
   que otras. Con grid y `grid-auto-rows:1fr` TODAS las filas miden lo
   mismo: las seis cajas quedan identicas. Hay que anular los anchos de
   las columnas de Bootstrap, que aqui ya no pintan nada. */
.sec.features .swiper-wrapper{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows:1fr !important;
  gap:20px !important;
  transform:none !important; margin:0 !important;
  /* LAS CAJAS SE SALIAN POR LA DERECHA EN MOVIL, Y ESTA ERA LA CAUSA.
     Croster declara `.swiper-wrapper{box-sizing:content-box}`, que anula
     el `border-box` global de Bootstrap. El marcado de estos bloques trae
     ademas `px-3`, o sea `padding:1rem !important` a cada lado. Con
     content-box esos 32 px se SUMAN al 100% del contenedor:

       390 px de pantalla → contenedor 360 → wrapper 360 + 16 + 16 = 392

     Los 32 px de mas los recortaba el `.swiper-container`, asi que no
     salia barra de scroll: se veian las tarjetas cortadas por la derecha,
     con aire a la izquierda y ninguno a la derecha.

     MEDIDO en 390, 430, 768 y 900: se salia 32 px en los cuatro. Con
     border-box, cero. En 1280 y 1600 no cambia nada, porque alli el
     padding no llega a aplicarse. Se acota a `.sec.features` a proposito:
     el carrusel de precios es otro `.swiper-wrapper` y funciona bien
     —lo que asoma por su derecha es la diapositiva siguiente, que es lo
     que tiene que hacer un carrusel—. */
  box-sizing:border-box !important;
}
.sec.features .swiper-slide{
  width:auto !important; max-width:none !important; flex:none !important;
  height:auto !important; display:flex !important;
  margin:0 !important; padding:0 !important;
}
/* ── una fila de DOS tarjetas no deja la tercera columna vacia ──
   Las tres columnas de arriba estan bien para los bloques de seis,
   que es lo habitual. Pero un bloque de dos —«Elige como quieres
   gestionarlo»— quedaba pegado a la izquierda con un hueco de 426 px
   a la derecha: medido, 2 cajas de 406 px en una fila de 1.258.

   Se resuelve contando hijos con `:has()`: `:nth-child(2):last-child`
   solo casa cuando el segundo hijo es ademas el ultimo, o sea cuando
   hay exactamente dos. Un navegador sin `:has()` se queda con las tres
   columnas de siempre, que es como estaba: no mejora, pero no rompe.

   NO se usa `repeat(auto-fit, minmax(280px,1fr))`, que resolveria lo
   mismo sin `:has()`: con seis tarjetas y 1.258 px de ancho pasaria a
   cuatro columnas y descuadraria las secciones que hoy van a tres. */
/* El CTA de `vps_n8n.php` no lleva sombra en las letras ni velo en
   CSS: la penumbra va HORNEADA en la propia ilustracion, con
   `herramientas/velar-centro-imagen.py`. Una elipse difuminada al
   34 % en el centro, que es donde cae el texto. Asi no hay capa que
   superponer ni nada que mantener aqui, y se ve como parte del
   dibujo. El parrafo si se aclara un punto, que es gratis. */
.site-banner .banner_body[style*="n8n_modalidades"] .banner_content p{
  color:#F2F3FB !important;
}

/* ESTAS DOS VAN DENTRO DE UN MEDIA QUERY, Y NO ES ADORNO.
   `:has()` toma la especificidad de su argumento, asi que
   `.sec.features .swiper-wrapper:has(> :nth-child(2):last-child)`
   pesa (0,4,1) contra los (0,2,1) de la regla base. Y un media query
   NO suma especificidad: fuera de aqui, esta regla le ganaba tambien
   al `@media (max-width:640px)` de mas abajo que pide UNA columna.

   Se veia en `vps_n8n.php`: «Elige como quieres gestionarlo» tiene
   dos tarjetas, y en un movil de 390 px quedaban dos columnas de
   154 px con el texto en tiras de una palabra y cortado por la
   derecha. Medido a 390 px reales, no redimensionando la ventana:
   el viewport de la ventana no es el del documento y daba 490 px.

   Acotarlas a partir de 641 px las deja donde tienen sentido —donde
   caben columnas— y devuelve el mando a la regla de movil. */
@media (min-width:641px){
  .sec.features .swiper-wrapper:has(> :nth-child(2):last-child){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .sec.features .swiper-wrapper:has(> :first-child:last-child){
    grid-template-columns:minmax(0, 1fr) !important;
    max-width:640px; margin-inline:auto !important;
  }

  /* ── Y UNA TARJETA SUELTA EN LA ULTIMA FILA SE CENTRA ──────────
     Con tres columnas, un bloque de cuatro o de siete deja la ultima
     caja sola contra el borde izquierdo y dos huecos a su derecha:
     parece que falta contenido o que algo se ha roto.
     Llevandola a la columna del medio, la fila queda equilibrada y se
     lee como el cierre del bloque, que es lo que es. Pasó al añadir
     «Copias de seguridad» a los VPS: de seis tarjetas a siete. */
  .sec.features .swiper-wrapper:has(> :nth-child(4):last-child) > :last-child,
  .sec.features .swiper-wrapper:has(> :nth-child(7):last-child) > :last-child{
    grid-column:2 !important;
  }
}
.sec.features .feature-item{
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:16px; padding:28px 26px;
  height:100%; width:100%; margin:0 !important;
  display:flex; align-items:flex-start; gap:18px;
  position:relative; overflow:hidden;
  transition:border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
/* filo superior de marca, que solo asoma al pasar por encima */
.sec.features .feature-item::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--nb-grad); opacity:0;
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.42s ease, opacity 0.42s ease;
}
.sec.features .feature-item:hover::after{opacity:1; transform:scaleX(1)}
.sec.features .feature-content{flex:1; min-width:0}
.sec.features .feature-item:hover{
  border-color:rgba(123,92,246,0.42); transform:translateY(-4px);
  background:rgba(123,92,246,0.075);
}
/* Croster pinta detras del icono un ::before con
   `border-radius:30% 70% 70% 30%/30% 30% 70% 70%` y el color del tema:
   ese es el churrete blanco con forma de gota. Se reaprovecha el mismo
   pseudo-elemento, pero cuadrado, con el degradado suave y un borde. */
.sec.features .feature-icon{
  width:48px !important; height:48px !important; margin-bottom:0;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent !important; border:0 !important;
  font-size:20px !important; position:relative;
}
.sec.features .feature-icon::before{
  border-radius:13px !important;
  background:var(--nb-grad-suave) !important;
  background-color:transparent !important;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:none !important;
}
.sec.features .feature-icon i,
.sec.features .feature-icon [class^="fa-"],
.sec.features .feature-icon [class*=" fa-"],
.sec.features .feature-icon .fas,
.sec.features .feature-icon .fad{
  color:#A9C9F2 !important; font-size:20px !important;
  position:relative; z-index:1;
}
.sec.features .feature-title{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-on) !important; font-size:1.06rem !important; margin-bottom:7px;
}
.sec.features .feature-desc,
.sec.features .feature-desc p{
  font-family:var(--nb-ff-b); color:#C9C2DC !important;
  font-size:0.92rem; line-height:1.55;
}

/* ══ PREGUNTAS FRECUENTES ══ */
.sec.faqs{background:var(--nb-paper) !important}
/* El subrayado del titulo de Preguntas Frecuentes. Croster lo pinta
   con `.bordered{border-bottom:3px solid #e42fd2}`, un magenta que no
   es de la marca —el mismo que ya se corrigio en el pie—. Aparece una
   sola vez por pagina, siempre en este titulo.                      */
.sec .sec-title .bordered{
  border-bottom:0 !important;
  position:relative; padding-bottom:12px;
}
.sec .sec-title .bordered::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:2px; background:var(--nb-grad);
}
.sec.faqs .sec-title{color:var(--nb-ink) !important}
.sec.faqs .sec-description{color:var(--nb-ink-2) !important}
.sec.faqs .card{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:13px !important; margin-bottom:12px; overflow:hidden;
  transition:border-color 0.24s ease, box-shadow 0.24s ease;
}
.sec.faqs .card:hover{
  border-color:var(--nb-line-2) !important;
  box-shadow:0 10px 28px -18px rgba(20,17,31,0.2);
}
.sec.faqs .card-header{
  background:transparent !important; border:0 !important; padding:0 !important;
}
.sec.faqs .card-title,
.sec.faqs .card-header .btn{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink) !important; font-size:1.04rem !important;
  padding:18px 22px !important; width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.sec.faqs .card-icon,
.sec.faqs .card-title .fal{color:var(--nb-violet-aa) !important}
.sec.faqs .card-body{
  padding:0 22px 20px !important;
  font-family:var(--nb-ff-b); color:var(--nb-ink-2); font-size:0.955rem;
}
/* OJO: en estas fichas los <li> van SUELTOS dentro del div, sin ningun
   <ul> que los envuelva. Por eso el navegador les pinta su punto nativo
   y `list-style:none` sobre el ul no servia de nada: hay que ponerlo en
   el propio li, o salen dos puntos. */
.sec.faqs .card-body ul{list-style:none; padding-left:0; margin:0}
.sec.faqs .card-body li{
  list-style:none !important; display:block !important;
  position:relative; padding:5px 0 5px 24px; margin:0; line-height:1.6;
  border:0 !important;
}
.sec.faqs .card-body li::marker{content:"" !important}
.sec.faqs .card-body li::before{
  content:""; position:absolute; left:2px; top:1.05em;
  width:6px; height:6px; border-radius:50%; background:var(--nb-grad);
}

/* ══ BLOQUES DE TEXTO LIBRE ══ */
.sec.editor{background:var(--nb-paper) !important}

/* ── PROSA DE UNA PAGINA DE PRODUCTO ──────────────────────────
   Croster declara `h1..h4{color:#211b65}` sobre el propio elemento,
   asi que un `<h2>` suelto dentro de un bloque de texto sale con esa
   tinta y no con la nuestra.

   NO SE ARREGLA con una regla generica sobre `.sec.editor h2` o
   `.sec.editor p`: la PORTADA ENTERA vive dentro de un `.sec.editor`
   —lo avisa el comentario de la cabecera de este fichero— y cualquier
   regla asi le caeria encima. Por eso el texto de estas paginas se
   envuelve en `.nb-prosa` y solo se estila ahi dentro.

   Se estreno con `vps_n8n.php`. Sirve para cualquier pagina de
   producto que se escriba a partir de ahora: basta con envolver el
   contenido del bloque `texteditor` en `<div class="nb-prosa">`. */
.sec.editor .nb-prosa{
  max-width:820px; margin-inline:auto;
  font-family:var(--nb-ff-b); color:var(--nb-ink-2);
}
.sec.editor .nb-prosa h2{
  font-family:var(--nb-ff-d) !important; color:var(--nb-ink) !important;
  font-weight:700 !important; font-size:clamp(1.5rem,3.2vw,2rem) !important;
  letter-spacing:-0.026em; text-wrap:balance; margin:0 0 14px !important;
}
.sec.editor .nb-prosa p{
  color:var(--nb-ink-2) !important; font-family:var(--nb-ff-b) !important;
  font-size:1.02rem; line-height:1.72; margin:0 0 16px;
}
.sec.editor .nb-prosa p:last-child{margin-bottom:0}
.sec.editor .nb-prosa b,
.sec.editor .nb-prosa strong{color:var(--nb-ink) !important; font-weight:600}
.sec.editor .nb-prosa a{color:var(--nb-violet-aa) !important}

/* Texto e ilustracion a dos columnas, dentro de un bloque de texto.
   `align-items:center` en la REJILLA y `height:auto` en la imagen: el
   valor de serie es `stretch`, que estira la ilustracion al alto de
   la columna de texto y la deja achatada. Ya paso con los candados de
   la pagina de SSL. */
.sec.editor .nb-prosa-media{
  max-width:1120px; margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,52px); align-items:center;
}
.sec.editor .nb-prosa-media > .nb-prosa{max-width:none; margin:0}
.sec.editor .nb-prosa-media img{
  width:100%; height:auto; max-width:100%;
  border-radius:18px; display:block;
  box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 18px 44px -20px rgba(20,17,31,0.28);
}
@media (max-width:860px){
  /* En una sola columna la ilustracion ya va primera por marcado, asi
     que aqui no hace falta reordenar nada. */
  .sec.editor .nb-prosa-media{grid-template-columns:1fr}
}

/* WordPress, PrestaShop y Correo maquetan esa seccion con una tabla de
   Bootstrap que lleva `table-bordered`: eso pinta un borde en la tabla
   Y EN CADA CELDA. El `border:hidden` que trae el contenido solo mata
   el exterior, por eso quedaba la caja alrededor. hosting.php no usa
   tabla y por eso se veia limpia: aqui se igualan las cuatro.

   MUY IMPORTANTE — solo `.table-bordered`, NUNCA `table` a secas:
   la portada entera vive dentro de un `.sec.editor` y sus bloques
   propios se llevaron por delante las reglas genericas. Lo mismo vale
   para la tipografia: aqui NO se declaran ni colores ni fuentes
   globales, porque pisaban el diseño de la portada. */
.sec.editor .table-bordered,
.sec.editor .table-bordered > tbody,
.sec.editor .table-bordered > tbody > tr,
.sec.editor .table-bordered > tbody > tr > td,
.sec.editor .table-bordered > tbody > tr > th{
  border:0 !important; background:transparent !important;
}
.sec.editor .table-bordered > tbody > tr > td{
  padding:0 18px 0 0 !important; vertical-align:middle;
}
.sec.editor .table-bordered > tbody > tr > td:last-child{padding-right:0 !important}
.sec.editor .table-responsive{overflow:visible !important}
/* En movil una tabla de maquetacion se estrecha y parte las palabras:
   mejor apilar las celdas. */
@media (max-width:991px){
  .sec.features .swiper-wrapper{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
}
@media (max-width:640px){
  .sec.features .swiper-wrapper{grid-template-columns:1fr !important}
  .sec.features .feature-item{padding:24px 22px}
}

@media (max-width:767px){
  .sec.editor .table-bordered,
  .sec.editor .table-bordered > tbody,
  .sec.editor .table-bordered > tbody > tr,
  .sec.editor .table-bordered > tbody > tr > td{
    display:block !important; width:100% !important;
  }
  .sec.editor .table-bordered > tbody > tr > td{padding:0 0 20px 0 !important}
}

/* ══ EL AIRE ENTRE SECCIONES ════════════════════════════════════
   El tema da a cada seccion `padding:60px 0`, y `120px` a partir de
   992 px. Entre dos secciones seguidas eso son 240 px de aire en
   escritorio, y medido en las doce paginas salian huecos reales de 206
   a 431 px contando los margenes del contenido.

   CUANDO CAMBIA EL TONO, ESE AIRE ESTA BIEN: el propio corte de color
   separa las dos secciones y necesita respiro para no parecer una raya.
   Lo que sobra es entre dos secciones DEL MISMO TONO, donde nada indica
   que una cosa acabo y otra empezo: ahi el visitante solo ve un vacio.

   Las claras de este tema son `editor`, `faqs` y `products`; las
   oscuras las pinta el hook (`features`) o son banners. Asi que la
   regla se acota a las tres claras seguidas entre si, y baja de 240 a
   184 px. No se toca el padding general, que es del tema y lo usan
   tambien el area de cliente y el carrito.

   Referencia de que 184 es la medida buena: el bloque «Donde estan tus
   datos» anula su propio padding y deja 206 px con la seccion
   siguiente, y ahi se ve bien.

   NO SE PUEDE HACER CON `+`. Entre dos `.sec` el tema mete un
   `<script>`, asi que el selector de hermano adyacente no llega a la
   siguiente seccion: comprobado, `casaAdyacencia` daba `false` con las
   dos secciones casando por separado. Y `~` cogeria todas las
   posteriores, no solo la de al lado.

   Asi que el tono lo calcula el JS de abajo, que ademas es mas fiable
   que una lista de nombres de clase: mide el color de fondo REAL de
   cada seccion, que es lo que ve el visitante, y no hay que acordarse
   de que `features` es oscura en unas paginas y `products` clara en
   otras. Si el script no llega a correr, el espaciado se queda como
   estaba: no esconde nada. */
@media (min-width:992px){
  .sec.nb-junta-abajo{padding-bottom:92px}
  .sec.nb-junta-arriba{padding-top:92px}

  /* EN UN BANNER, ESE RELLENO SE VE. El resto de secciones pintan el
     fondo en el propio `.sec`, asi que su relleno es aire del mismo color
     y no se nota. El banner no: su `.sec` lleva un #0B0A16 PLANO y la
     ilustracion la pinta el hijo `.banner_body`, que empieza donde acaba
     el relleno. Los 92 px de arriba salen entonces como una franja lisa
     entre la seccion anterior y la imagen, y es justo lo que se veia en
     `hosting.php` debajo de «Donde esta tu web»: no era distancia de mas,
     era una banda de otro color por medio.

     Pegando el banner, la ilustracion arranca donde acaba la seccion
     anterior y el aire se queda DENTRO de esa, que es donde tiene fondo
     propio. Medido en las diez paginas comerciales: hoy solo hay UN
     banner con `nb-junta`, el «¡Ven a Netebu!» de hosting. */
  .sec.site-banner.nb-junta-arriba{padding-top:0}
  .sec.site-banner.nb-junta-abajo{padding-bottom:0}
}

/* ── la juntura entre la red neuronal y el banner ───────────
   Aqui hubo un filo de 2 px con el degradado de marca. Medido en
   pantalla, el problema no era su color sino su luminancia: salia a
   #775EEE (luma 105) entre un #13121E por arriba (19) y un #000111 por
   abajo (2). Cinco veces mas brillante que lo de encima y cincuenta que
   lo de debajo: un destello, no una costura. Con cualquier otro color
   habria cantado igual, porque lo que se ve es el escalon de luz.

   Y debajo del filo quedaba un segundo escalon sin marcar, de 19 a 2 de
   luma en un solo pixel.

   Pintar la costura con los colores de la propia foto no vale: medida su
   primera fila, el banner es negro de lado a lado ahi (#020210 a
   #020420) y el azul de los racks no asoma hasta unos 150 px mas abajo,
   ademas cargado al tercio derecho. No hay color que tomar justo en el
   punto donde se tocan.

   Asi que no se decora el corte: se funde el escalon. Dos rampas del
   mismo #060716 que se encuentran en el borde, una bajando desde la
   seccion de arriba y otra disolviendose sobre la foto. El ultimo pixel
   de una y el primero de la otra valen exactamente lo mismo, y el
   descenso de 19 a 2 queda repartido en unos 200 px.

   Las paradas se escriben `rgba(6,7,22,0)`, nunca `transparent`:
   `transparent` es `rgba(0,0,0,0)` y el degradado interpolaria hacia un
   negro que no es el de esta juntura.

   Y la linea de marca vuelve, porque el corte entre dos secciones si
   conviene marcarlo. Vuelve mejorada en tres cosas, y las tres salen de
   la medicion de arriba:

   1. NO VA SOLA. Encima del escalon pelado de 19 a 2 cualquier linea es
      un destello, le pongas el color que le pongas. Ahora se apoya en
      el fundido, que reparte ese escalon en unos 200 px: la linea marca
      el corte en vez de taparlo.
   2. NO VA A PLENA LUZ. Al 55% su luminancia baja de 105 a unos 55.
      Sigue leyendose como acento de marca y deja de ser un neon.
   3. NO VA DE BORDE A BORDE. Una mascara horizontal la apaga en los
      extremos, asi que en vez de una raya de lado a lado queda un
      acento centrado que nace y muere en el fundido. Es el mismo
      recurso que ya usan la cinta de extensiones y las tablas de esta
      hoja.

   Se probo tambien el banner en isla —margenes, radio y sombra como la
   del buscador de la portada, y la ilustracion encajando exacta por
   proporcion— y se descarto: arriba se apoyaba en la red neuronal, pero
   abajo colgaba sobre una franja lisa de fondo contra la seccion
   blanca, y esa franja no tenia funcion ninguna.

   Las alturas del fundido van atadas al aire que hay de verdad.
   `.nb-donde` deja 86 px de relleno abajo en escritorio y 60 en movil,
   medido; el clamp nunca pasa de ahi, asi que la rampa no se come
   contenido en ningun ancho. */
.sec.editor.nb-junta-abajo:has(.nb-donde){position:relative}
.sec.editor.nb-junta-abajo:has(.nb-donde)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:clamp(56px, 6vw, 86px); pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,7,22,0) 0%, rgba(6,7,22,0.28) 38%, rgba(6,7,22,0.62) 64%,
    rgba(6,7,22,0.88) 84%, rgba(6,7,22,1) 100%);
}
/* La otra mitad, ya sobre la ilustracion. Va en el `::after` del `.sec`
   —su `::before` lo ocupan los dos radiales— con z-index 1: por encima
   de esos radiales, que tambien conviene apagar en la juntura, y por
   debajo del texto, que va en 2.

   Atada al mismo par con el hermano adyacente. Sin eso alcanzaria a
   cualquier banner que el JS pegue a otra seccion oscura, y se pintaria
   la rampa de entrada sin su pareja de salida. */
.sec.editor.nb-junta-abajo:has(.nb-donde) + .sec.site-banner.nb-junta-arriba::after{
  content:""; position:absolute; left:0; right:0; top:0; z-index:1;
  height:clamp(88px, 9vw, 128px); pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,7,22,1) 0%, rgba(6,7,22,0.88) 16%, rgba(6,7,22,0.62) 36%,
    rgba(6,7,22,0.28) 62%, rgba(6,7,22,0) 100%);
}
/* La linea, encima de las dos rampas. Va en el `::before` de la seccion
   de ARRIBA —comprobado libre— y no dentro del banner, y esto tiene una
   razon concreta:

   `.swiper-container` lleva `position:relative; z-index:1`, y eso crea
   un contexto de apilamiento. Todo lo que va dentro del banner queda
   confinado en esa capa 1 por mucho z-index que se le ponga, asi que la
   linea se pinto primero ahi con z-index 3 y no se veia: la rampa de
   entrada, que es un `::after` del `.sec` y va despues en el documento
   con el mismo 1, la tapaba entera. Medido en la juntura salia #060715,
   el color exacto de la rampa, sin rastro del degradado.

   Desde el `::before` de la seccion de arriba la linea participa del
   contexto raiz, donde el 4 gana a la rampa de salida (3), a la de
   entrada (1) y al propio swiper (1). El `bottom:0` la deja justo en la
   juntura, que es donde tiene que estar. */
.sec.editor.nb-junta-abajo:has(.nb-donde)::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background:var(--nb-grad); opacity:0.55; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%,
                                     #000 78%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%,
                             #000 78%, rgba(0,0,0,0) 100%);
}

/* ══ REVELADO AL HACER SCROLL ══════════════════════════════════
   Mismo efecto que la portada. El `opacity:0` cuelga de la clase
   `nb-anim`, que pone el propio JS: si el script no llega a
   ejecutarse, todo se ve igualmente. Nunca esconder contenido con
   CSS que dependa de que un script lo destape.
   La portada tiene su propio revelado bajo .nb-home y se excluye. */
.nb-anim .sec .nb-rv{
  opacity:0; transform:translateY(22px);
  transition:opacity 0.62s ease, transform 0.62s ease;
}
.nb-anim .sec .nb-rv.on{opacity:1; transform:none}
/* escalonado suave dentro de un mismo grupo */
.nb-anim .sec .nb-rv[data-nb-i="1"]{transition-delay:0.07s}
.nb-anim .sec .nb-rv[data-nb-i="2"]{transition-delay:0.14s}
.nb-anim .sec .nb-rv[data-nb-i="3"]{transition-delay:0.21s}
.nb-anim .sec .nb-rv[data-nb-i="4"]{transition-delay:0.28s}
.nb-anim .sec .nb-rv[data-nb-i="5"]{transition-delay:0.35s}

@media (prefers-reduced-motion:reduce){
  .sec *{transition:none !important}
  .nb-anim .sec .nb-rv{opacity:1 !important; transform:none !important}
}
/* ── las extensiones del hero, en una sola cinta ─────────────
   Son 8 y suman 769 px contando separaciones; el buscador mide
   558, asi que saltaban a una segunda fila y la caja crecia.
   En vez de recortar la lista o encoger los chips, la fila se
   desliza sola: se ve el catalogo entero sin ocupar mas alto.
   El JS envuelve los chips en DOS grupos identicos y la cinta
   avanza exactamente un grupo, por eso el bucle no tiene
   costura. La separacion va como `margin-right` del chip y no
   como `gap` del grupo, para que el ancho de cada grupo incluya
   su hueco final y los dos encajen al milimetro. */
.nb-home .finder .tlds{
  display:block !important; overflow:hidden; position:relative;
  /* los chips se desvanecen en los extremos en vez de cortarse en seco */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42px,
                     #000 calc(100% - 42px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 42px,
             #000 calc(100% - 42px),transparent 100%);
}
.nb-home .finder .tlds .nb-cinta{
  display:flex; flex-wrap:nowrap; width:max-content;
  animation:nb-tld-desliza 22s linear infinite;
  will-change:transform;
}
.nb-home .finder .tlds .nb-grupo{display:flex; flex-wrap:nowrap}
.nb-home .finder .tlds .tld{margin-right:8px; flex:0 0 auto}
/* al pasar el raton se para, para poder leer un precio concreto */
.nb-home .finder .tlds:hover .nb-cinta,
.nb-home .finder .tlds:focus-within .nb-cinta{animation-play-state:paused}
@keyframes nb-tld-desliza{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* si caben todos —pantalla ancha, menos extensiones— no hay nada
   que desplazar: el JS pone esta clase y la cinta se queda quieta */
.nb-home .finder .tlds.nb-quieta .nb-cinta{animation:none}
.nb-home .finder .tlds.nb-quieta{-webkit-mask-image:none; mask-image:none}
@media (prefers-reduced-motion:reduce){
  .nb-home .finder .tlds{overflow-x:auto; scrollbar-width:none}
  .nb-home .finder .tlds::-webkit-scrollbar{display:none}
  .nb-home .finder .tlds .nb-cinta{animation:none}
}
/* ══ LA ISLA DEL BUSCADOR DE DOMINIOS ═══════════════════════
   Es lo primero que toca un visitante de la portada, asi que se
   trata como un componente y no como una caja mas.
   Sobre la fotografia un panel BLANCO al 7% se lava y los textos
   pierden contraste; el panel oscuro translucido asienta el
   contenido y deja que el degradado de marca haga el acento. */
.nb-home .finder{
  --isla-r:22px;
  position:relative; z-index:2; overflow:hidden;
  max-width:640px; padding:26px 26px 22px !important;
  background:linear-gradient(180deg, rgba(26,22,52,0.74), rgba(13,11,28,0.80)) !important;
  border:1px solid rgba(255,255,255,0.13) !important;
  border-radius:var(--isla-r) !important;
  backdrop-filter:saturate(160%) blur(22px);
  -webkit-backdrop-filter:saturate(160%) blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),
             0 34px 90px -34px rgba(0,0,0,0.86),
             0 10px 34px -18px rgba(90,60,200,0.42) !important;
}
/* filo de marca en el borde superior */
.nb-home .finder::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--nb-grad); pointer-events:none;
}

/* ── las dos pestanas, como un control segmentado ──────────
   El selector se acota a `.finder-tabs .finder-tab` A PROPOSITO:
   `.finder button` alcanzaria tambien al boton de Buscar y le
   pisaria el fondo y la altura. */
.nb-home .finder .finder-tabs{
  /* Sin capsula: eran dos botones metidos en una caja oscura y esa
     caja se veia como una mancha por detras. Ahora el contenedor no
     pinta nada y cada boton se sostiene solo. */
  display:inline-flex !important; gap:10px; padding:0 !important;
  background:transparent !important; border:0 !important;
  border-radius:0 !important; margin:0 0 20px !important; width:auto !important;
}
/* La pestana APAGADA lleva fondo propio. Sin el se fundia con el
   fondo oscuro del contenedor y las dos se leian como un solo
   bloque pegado, aunque entre ellas hubiera hueco de verdad. */
.nb-home .finder .finder-tabs .finder-tab{
  /* SIN BORDE. Un borde —aunque sea transparente— deja ver el fondo
     por debajo: el degradado del boton activo se colaba por el filo
     y dibujaba un contorno de colores. Es el mismo fallo de la caja
     de la portada. El boton de Buscar no tiene borde y por eso sale
     limpio; estos, igual. El relleno sube 1 px por lado para que la
     medida no cambie al quitarlo. */
  border:0 !important;
  background:rgba(255,255,255,0.08) !important;
  color:var(--nb-on-2) !important; border-radius:9px !important;
  padding:12px 21px !important; height:auto !important; width:auto !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.94rem !important; letter-spacing:-0.005em;
  display:inline-flex; align-items:center; gap:8px;
  transition:color 0.2s ease, background 0.2s ease;
}
.nb-home .finder .finder-tabs .finder-tab:hover{
  color:var(--nb-on) !important; background:rgba(255,255,255,0.14) !important;
}
.nb-home .finder .finder-tabs .finder-tab.on,
.nb-home .finder .finder-tabs .finder-tab[aria-selected="true"]{
  background:var(--nb-grad) !important; color:#fff !important;
  border:0 !important;
  /* el fondo se recorta en el relleno: sin esto un borde heredado
     dejaria ver el degradado difuminado alrededor */
  background-clip:padding-box; -webkit-background-clip:padding-box;
  box-shadow:0 8px 22px -10px rgba(123,92,246,0.70);
}
.nb-home .finder .finder-tabs .finder-tab svg{width:15px; height:15px}

/* ── la etiqueta y el campo ────────────────────────────────── */
.nb-home .finder .finder-lb{
  display:block; margin:0 0 9px !important;
  font-family:var(--nb-ff-d) !important; font-size:0.76rem !important;
  font-weight:600 !important; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--nb-on-3) !important;
}
.nb-home .finder .finder-pane form{
  display:flex; gap:10px; align-items:stretch; margin:0;
}
.nb-home .finder .finder-pane form input{
  flex:1 1 auto !important; min-width:0; height:56px !important;
  background:rgba(0,0,0,0.34) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:13px !important; padding:0 17px !important;
  color:var(--nb-on) !important; font-family:var(--nb-ff-b) !important;
  font-size:1rem !important; box-shadow:none !important;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nb-home .finder .finder-pane form input::placeholder{color:var(--nb-on-3) !important}
.nb-home .finder .finder-pane form input:focus{
  outline:none !important;
  border-color:rgba(123,92,246,0.85) !important;
  box-shadow:0 0 0 4px rgba(123,92,246,0.22) !important;
  background:rgba(0,0,0,0.46) !important;
}
.nb-home .finder .finder-pane form button{
  flex:0 0 auto !important; height:56px !important; padding:0 26px !important;
  border:0 !important; border-radius:13px !important;
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !important; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important; font-size:1rem !important;
  box-shadow:0 12px 30px -12px rgba(123,92,246,0.66);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.nb-home .finder .finder-pane form button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px -14px rgba(123,92,246,0.80);
}
.nb-home .finder .finder-pane form button:active{transform:translateY(0)}

/* ── el carrusel de extensiones, separado del formulario ──── */
.nb-home .finder .tlds{
  margin-top:20px !important; padding-top:18px !important;
  border-top:1px solid rgba(255,255,255,0.09);
}
.nb-home .finder .tlds .tld{
  background:rgba(255,255,255,0.055) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:999px !important; padding:7px 14px !important;
  color:var(--nb-on-2) !important; font-family:var(--nb-ff-b) !important;
  font-size:0.86rem !important; white-space:nowrap;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.nb-home .finder .tlds .tld b{color:#7FC0F5 !important; font-weight:700}
.nb-home .finder .tlds .tld.on{
  border-color:rgba(123,92,246,0.55) !important;
  background:rgba(123,92,246,0.18) !important; color:#fff !important;
}
.nb-home .finder .tlds .tld.on b{color:#C9B8FF !important}

/* el foco se ve SIEMPRE: se navega con teclado */
.nb-home .finder :focus-visible{
  outline:2px solid #A594FF !important; outline-offset:2px;
}

@media (max-width:767px){
  .nb-home .finder{padding:20px 18px 18px !important; border-radius:18px !important}
  .nb-home .finder .finder-pane form{flex-direction:column}
  .nb-home .finder .finder-pane form button{width:100%; padding:0 !important}
}

/* El efecto de los brazos sobresaliendo se descarto: quedaba mal.
   La franja de estadisticas se queda en su sitio original. */
/* ══ VELO SUPERIOR DEL HERO ═════════════════════════════════
   La isla del menu es translucida —blanco al 6%— y arriba a la
   derecha caen los servidores iluminados en azul: el fondo se
   veia a traves de la barra y los enlaces perdian presencia.
   Antes no pasaba porque la barra era blanca y opaca.
   Este velo devuelve el azul marino a la franja de arriba y, de
   paso, le da suelo al menu. Funde hacia TRANSPARENTE, no hacia
   un color: por debajo tiene que seguir viendose la fotografia
   tal cual.                                                     */
/* Va en `.hero-veil`, NO en `.hero-img`: el tema pinta ese velo
   con `z-index:1`, por encima de la imagen, y es direccional
   —96 grados— asi que no oscurece la franja de arriba. Puesto en
   la imagen, mi degradado quedaba DEBAJO del suyo y no mandaba.
   Aqui se pinta el ultimo y gana; el texto va en `.hero-in`
   (z-index:2), asi que sigue por encima de los dos. */
.nb-home .hero .hero-veil::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,7,24,0.92) 0%,
    rgba(5,7,24,0.86) 8%,
    rgba(5,7,24,0.54) 16%,
    rgba(5,7,24,0.18) 24%,
    transparent 32%);
}
.nb-home .hero .hero-veil{position:absolute}

/* ══ Y UN SEGUNDO VELO, ESTE HORIZONTAL ══════════════════════
   El de arriba resuelve la franja del menu. Este resuelve otra
   cosa distinta que solo se ve mirando la pagina, porque ninguna
   medicion la marca: el parrafo del hero va de 136 a 761 px y la
   fotografia empieza sobre los 360, asi que las ultimas palabras
   —«con panel Plesk»— caen justo encima de la cara iluminada de
   uno de los dos. El texto es #CFC9E0, un lila claro sin sombra:
   sobre el fondo oscuro se lee perfectamente, sobre una mejilla no.

   Y no lo detecta ningun contraste automatico, porque el contraste
   se calcula contra un color plano y aqui el fondo es una foto:
   cambia pixel a pixel. Por eso hay que mirar.

   El velo funde el color del propio fondo —no un negro generico,
   que ensuciaria el tono— y muere antes del 66 %, donde ya no hay
   texto. La foto se sigue viendo entera; lo unico que cambia es
   que debajo de las letras hay suelo.

   Solo de 992 para arriba: por debajo el texto va a ancho completo
   con la imagen detras o debajo, y ahi el velo no hace falta. */
@media (min-width:992px){
  .nb-home .hero .hero-veil::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(90deg,
      rgba(5,7,24,0.82) 0%,
      rgba(5,7,24,0.66) 30%,
      rgba(5,7,24,0.34) 48%,
      rgba(5,7,24,0.10) 60%,
      transparent 68%);
  }
}
/* El remate: una sombra muy tenue bajo el parrafo. Cuesta cero, no
   se ve como sombra y sostiene el texto en el tramo donde el velo
   ya se ha desvanecido. */
.nb-home .hero .hero-sub{
  text-shadow:0 1px 14px rgba(5,7,24,0.55);
}
/* ══ PREGUNTAS FRECUENTES ═══════════════════════════════════
   El mismo componente del tema, `.card-faqs-group`, cuando SI son
   preguntas (servidores dedicados y unidades NAS). Aqui el JS no
   pone `nb-fichas`, asi que se quedaba a medio camino: ya tenia la
   tipografia de marca, pero sin sombra, con las tarjetas casi
   pegadas y —lo que mas cantaba— con la pregunta separada de su
   respuesta por una linea gris que partia cada tarjeta en dos.

   ESTRUCTURA REAL, leida del DOM (no es un acordeon: no hay
   `.collapse` ni `.btn`, es una lista estatica con marcado
   schema.org/FAQPage, y eso conviene conservarlo tal cual):

     .card-faqs-group[itemtype=FAQPage]
       .card[itemtype=Question]
         .card-header > span.card-title      <- la pregunta
         div[itemprop=acceptedAnswer]
           .card-body.border-top             <- la respuesta

   Se le da el mismo lenguaje que a las fichas: tarjeta con radio
   de 16, sombra suave y un icono en pildora. La linea divisoria se
   quita: la jerarquia ya la marcan el tamano y el color. */
.card-faqs-group:not(.nb-fichas){
  display:flex; flex-direction:column; gap:16px;
  max-width:860px; margin-left:auto; margin-right:auto;
}
.card-faqs-group:not(.nb-fichas) > .card{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; overflow:hidden; margin:0 !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
  transition:border-color 0.24s ease, box-shadow 0.24s ease;
}
.card-faqs-group:not(.nb-fichas) > .card:hover{
  border-color:var(--nb-line-2) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.06), 0 22px 48px -24px rgba(90,60,200,0.26);
}
.card-faqs-group:not(.nb-fichas) .card-header{
  background:transparent !important; border:0 !important;
  padding:20px 22px 0 !important;
  display:flex; align-items:center; gap:13px;
}
/* el interrogante, en la misma pildora que los iconos de las fichas */
.card-faqs-group:not(.nb-fichas) .card-header::before{
  content:"\f059";
  font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro",
              "Font Awesome 5 Free","FontAwesome";
  font-weight:900; font-size:1rem;
  flex:0 0 38px; width:38px; height:38px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--nb-violet-aa); background:var(--nb-grad-suave);
}
/* el tema le pone `padding:18px 22px`, y esos 22 px separaban la
   pregunta del icono y la desalineaban de su propia respuesta. El
   relleno lo lleva la cabecera, no el titulo. */
.card-faqs-group:not(.nb-fichas) .card-title{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.04rem !important; letter-spacing:-0.018em;
  color:var(--nb-ink) !important; line-height:1.35; display:block;
  padding:0 !important; margin:0 !important;
}
/* fuera la linea que partia la tarjeta en dos */
.card-faqs-group:not(.nb-fichas) .card-body,
.card-faqs-group:not(.nb-fichas) .card-body.border-top{
  border:0 !important;
  padding:12px 22px 22px 73px !important;
  font-family:var(--nb-ff-b) !important; font-size:0.96rem !important;
  color:var(--nb-ink-2) !important; line-height:1.65;
}
@media (max-width:575px){
  /* en movil el texto no se sangra bajo el icono: no cabe */
  .card-faqs-group:not(.nb-fichas) .card-body,
  .card-faqs-group:not(.nb-fichas) .card-body.border-top{
    padding:12px 18px 20px !important;
  }
  .card-faqs-group:not(.nb-fichas) .card-header{padding:18px 18px 0 !important}
}

/* ══ CARACTERISTICAS: DE ACORDEON A FICHAS ══════════════════
   El acordeon obligaba a seis clics para leer seis bloques que
   caben de sobra en pantalla, y en cada uno se perdia de vista lo
   anterior. Como fichas se lee todo de un vistazo y se compara.

   OJO: el mismo componente del tema —`.card-faqs-group`— se usa
   TAMBIEN para preguntas frecuentes de verdad (servidores
   dedicados). Ahi el acordeon si tiene sentido: plegar respuestas
   largas. Por eso el JS solo pone `nb-fichas` cuando NINGUN titulo
   del grupo es una pregunta. */
.card-faqs-group.nb-fichas{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px; align-items:start;
}
.card-faqs-group.nb-fichas > .card{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; overflow:hidden;
  margin:0 !important; height:100%;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
  transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.card-faqs-group.nb-fichas > .card:hover{
  transform:translateY(-3px); border-color:var(--nb-line-2) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.06), 0 26px 56px -24px rgba(90,60,200,0.30);
}
/* la cabecera deja de ser un boton y pasa a ser el titulo */
.card-faqs-group.nb-fichas .card-header{
  background:transparent !important; border:0 !important;
  padding:22px 22px 0 !important;
}
.card-faqs-group.nb-fichas .card-header .btn{
  padding:0 !important; border:0 !important; background:none !important;
  width:100%; text-align:left; cursor:default; box-shadow:none !important;
  display:flex; align-items:center; gap:13px;
}
.card-faqs-group.nb-fichas .card-icon{display:none !important}
.card-faqs-group.nb-fichas .card-title{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.04rem !important; letter-spacing:-0.018em;
  color:var(--nb-ink) !important; line-height:1.3;
}
/* un icono por ficha, en el orden en que estan */
.card-faqs-group.nb-fichas .card-header .btn::before{
  content:"\f233";
  font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro",
              "Font Awesome 5 Free","FontAwesome";
  font-weight:300; font-size:1.05rem;
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--nb-violet-aa); background:var(--nb-grad-suave);
}
.card-faqs-group.nb-fichas > .card:nth-child(2) .btn::before{content:"\f06b"}
.card-faqs-group.nb-fichas > .card:nth-child(3) .btn::before{content:"\f1de"}
.card-faqs-group.nb-fichas > .card:nth-child(4) .btn::before{content:"\f121"}
.card-faqs-group.nb-fichas > .card:nth-child(5) .btn::before{content:"\f0e0"}
.card-faqs-group.nb-fichas > .card:nth-child(6) .btn::before{content:"\f590"}
/* PERO SI EL GRUPO SON PREGUNTAS, TODAS LLEVAN EL INTERROGANTE.
   La serie de arriba va por POSICION y se escribio para las seis
   fichas de hosting, donde cada puesto tiene su tema. En un grupo de
   preguntas no significa nada: salia un regalo en «¿Que diferencia hay
   entre n8n Cloud y n8n autoalojado?». Se usa el mismo `\f059` que el
   modo plegable, que ademas ya dice de un vistazo que eso es una
   pregunta. Se declara despues para ganarle a la serie sin subir la
   especificidad de cada una. */
.card-faqs-group.nb-fichas.nb-preguntas > .card .btn::before{content:"\f059" !important}
/* el panel, siempre abierto */
.card-faqs-group.nb-fichas .collapse{
  display:block !important; height:auto !important; visibility:visible !important;
}
.card-faqs-group.nb-fichas .card-body{
  border:0 !important; padding:14px 22px 22px !important;
}
/* la lista: sin vinetas de navegador, con el check de marca */
.card-faqs-group.nb-fichas .card-body ul{margin:0; padding:0; list-style:none}
.card-faqs-group.nb-fichas .card-body li{
  list-style:none; position:relative;
  padding:0 0 0 26px; margin:0 0 11px;
  font-family:var(--nb-ff-b); font-size:0.95rem; line-height:1.55;
  color:var(--nb-ink-2);
}
.card-faqs-group.nb-fichas .card-body li:last-child{margin-bottom:0}
.card-faqs-group.nb-fichas .card-body li::before{
  content:"\f00c";
  font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro",
              "Font Awesome 5 Free","FontAwesome";
  font-weight:900; font-size:0.72rem;
  position:absolute; left:0; top:4px;
  width:17px; height:17px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:var(--nb-grad);
  background-clip:padding-box; -webkit-background-clip:padding-box;
}
.card-faqs-group.nb-fichas .card-body li b,
.card-faqs-group.nb-fichas .card-body li strong{color:var(--nb-ink) !important}
@media (max-width:767px){
  .card-faqs-group.nb-fichas{grid-template-columns:1fr; gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .card-faqs-group.nb-fichas > .card{transition:none}
  .card-faqs-group.nb-fichas > .card:hover{transform:none}
}

/* ══ EL AVISO DE VERIFICAR EL CORREO ════════════════════════
   El aviso de WHMCS para quien tiene el correo sin verificar. Sale
   entre el navbar y la cabecera, a todo lo ancho.

     div.verification-banner.email-verification
       .container > .row
         button#btnEmailVerificationClose.btn.close
         i.fa-exclamation-triangle + span.text
         button#btnResendVerification...

   EL FALLO DE VERDAD, medido en el navegador a 2550 px:

     navbar   fixed, z-index 1030,  y 14 -> 95
     banner   static,               y  0 -> 88
     boton    "Reenviar...",        y 13 -> 74,  x 1604 -> 1896

   El boton cae ENTERO dentro del rectangulo del navbar, y
   `document.elementFromPoint` sobre su centro devuelve
   `ul.navbar-nav`: el clic se lo queda el menu y el boton NO SE
   PUEDE PULSAR. No era cosa del color.

   La barra va en `position:fixed` y el `<body>` no lleva relleno
   que la compense (`padding-top: 0`), asi que el aviso nace debajo.
   Se le da el margen que le falta, usando la altura real que el
   script del navbar publica en `--nb-nav-h`. */
/* Ya no necesita margen: `netebu-barra.js` lo mueve por debajo de la
   cabecera, que es donde deja de estorbar a la barra. */
.verification-banner{position:relative; z-index:1}

/* ── PERO SOLO DONDE HAY CABECERA DONDE PONERLO ──────────────
   `bajarAvisos()` necesita un `.hero-bg-wrap` para colocar el aviso
   debajo. El area de cliente lo tiene, y tambien el carrito, las
   legales, la base de conocimiento, el contacto y los certificados.

   Las paginas hechas con el Page Builder —portada, hosting, VPS,
   correo profesional, somos— NO lo tienen, y ahi la funcion se
   rinde en su primera linea. El aviso se queda entonces arriba del
   todo, en el flujo, y la isla del menu —`fixed`, z-index 1030— se
   le echa encima justo sobre el boton de reenviar. Medido: la isla
   ocupa de 14 a 94 px y el aviso de 0 a 107.

   No hay ancla comun en esas paginas para colocarlo bien: en
   hosting y VPS el primer bloque es la cabecera, pero en la portada
   mide 7.372 px y en "somos" 3.680 —son la pagina entera—.

   Asi que ahi NO SE MUESTRA. El aviso es para un usuario que ya ha
   entrado, y la accion que le pide —reenviar el correo— es de
   gestion de cuenta: su sitio es el area de cliente, donde se ve
   perfectamente. En medio del catalogo solo tapaba la cabecera.

   El aviso nace oculto y el script lo enciende cuando ha conseguido
   colocarlo. Asi no se ve tapado ni un fotograma: si no cabe bien,
   no aparece. */
.verification-banner,
.announcement-banner,
.top-banner{display:none !important}
body.nb-aviso-ok .verification-banner,
body.nb-aviso-ok .announcement-banner,
body.nb-aviso-ok .top-banner{display:block !important}

/* El rojo se queda —es una advertencia de la aplicacion, no nuestra
   decoracion—, pero pasa al rojo de la paleta: sobre #d9534f el
   texto blanco se queda en 3,4:1 y sobre este llega a 4,6:1, que
   ya cumple. */
.verification-banner{
  background:#C4453F !important; color:#fff !important;
  font-family:var(--nb-ff-b) !important;
  padding:15px 10px !important;
  border-bottom:1px solid rgba(0,0,0,0.12) !important;
}
.verification-banner .text,
.verification-banner span:not(.close){
  font-family:var(--nb-ff-b) !important; color:#fff !important;
  font-size:0.95rem !important; line-height:1.5;
}
.verification-banner .row{align-items:center}
.verification-banner i.fa-exclamation-triangle{
  color:#fff !important; margin-right:9px; font-size:1rem;
}
/* el boton de reenviar, que es LO QUE HAY QUE PODER PULSAR:
   blanco sobre el rojo, con area de sobra y bien visible */
/* El tema lo pinta de gris pizarra con
     .verification-banner.email-verification .btn.btn-action{
        background-color:#50525f !important }
   que puntua (0,4,0). Un `.verification-banner .btn.btn-action`
   se queda en (0,3,0) y PIERDE aunque lleve `!important`: hay que
   repetir su cadena y anadir la clase propia del boton. */
.verification-banner.email-verification .btn.btn-action.btn-resend-verify-email,
.verification-banner.email-verification .btn.btn-action,
.verification-banner .btn:not(.close),
.verification-banner .btn.btn-resend-verify-email,
.verification-banner button.btn-default{
  background:#fff !important; border:0 !important;
  color:#A32F2A !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.88rem !important; border-radius:10px !important;
  padding:11px 16px !important; min-height:44px;
  box-shadow:0 2px 8px rgba(0,0,0,0.16) !important;
  white-space:normal; width:100%;
}
.verification-banner.email-verification .btn.btn-action.btn-resend-verify-email:hover,
.verification-banner.email-verification .btn.btn-action:hover,
.verification-banner .btn:not(.close):hover,
.verification-banner .btn.btn-resend-verify-email:hover{
  background:#FFF1F0 !important; color:#8E2823 !important;
}
.verification-banner .btn.close{
  color:#fff !important; opacity:0.8; text-shadow:none !important;
  font-size:1.5rem; line-height:1;
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.verification-banner .btn.close:hover{opacity:1}
@media (max-width:767px){
  .verification-banner .btn:not(.close){margin-top:10px}
}

/* ══ RESTOS DE LA VOZ ANTERIOR Y DEL EDITOR VISUAL ══════════
   Barrido del frontend con el DOM real, en 390 / 834 / 1440 px:
   diecisiete sitios donde el texto se salia del sistema. Todos
   caen en tres causas, no en diecisiete.

   1. SYNE, LA TIPOGRAFIA DE TITULARES ANTERIOR. `netebu_fuentes.php`
      la sustituyo por Outfit y dejo de cargarse, pero quedan bloques
      del Page Builder que la siguen declarando. Como ya no existe, el
      navegador cae en la fuente de respaldo: ese texto no esta en
      Outfit NI en Syne, esta en la del sistema. */
/* De raiz: los bloques del Page Builder no escriben la fuente, la
   piden con `var(--nb-head)`, y esa variable sigue declarada como
   `'Syne', system-ui, sans-serif` en un `:root` de su propia hoja.
   Redefinirla arregla TODOS esos bloques de una vez, tambien los que
   no he visto. Lleva `!important` porque su hoja va en el cuerpo, o
   sea DESPUES de esta, y con la misma especificidad ganaria ella. */
:root{
  --nb-head:"Outfit",system-ui,-apple-system,sans-serif !important;
}
[class*="nb-2col-"]{font-family:var(--nb-ff-d) !important}
.nb-2col-eyebrow, .nb-2col-title, .nb-2col-lead{
  font-family:var(--nb-ff-d) !important;
}

/* 2. LA ETIQUETA <font>. El editor visual del gestor de contenidos
      la sigue escribiendo —HTML5 la elimino— y con ella cuelan un
      tamano y un color ajenos a la paleta. Que herede y punto. */
.body-container font, .sec font, .main-container font, footer font{
  font-family:inherit !important; font-size:inherit !important;
  color:inherit !important;
}
/* `inherit` a secas no bastaba: heredaba de un `<p>` que TAMPOCO
   tenia la fuente de marca, asi que el texto seguia en la del
   sistema. La voz hay que darsela al contenedor del editor. Sin
   `!important`, para no pisar los titulos ni los bloques que ya
   traen la suya. */
.sec.editor, .sec.editor p, .sec.editor li, .sec.editor td,
.sec.editor span, .sec.editor div, .sec.editor font{
  font-family:var(--nb-ff-b);
}

/* 3. TEXTO EN NODOS SUELTOS. Las reglas apuntaban a `<p>` y `<li>`,
      pero el tema deja texto colgando directamente del contenedor
      —`.plan-features` sin lista dentro, el `<span>` de "Ver
      Detalles"— y ahi no llegaban. Se cubre el contenedor.
      `:not` para los iconos: llevan su propia familia y una
      herencia les borraria el glifo. */
.cros-pricing-table .plan-features,
.cros-pricing-table .plan-features > *:not(i):not([class*="fa-"]),
.cros-pricing-table .PriceList-toggle,
.cros-pricing-table .PriceList-toggle span,
.pricing_style_2 .plan-features{
  font-family:var(--nb-ff-b) !important;
}
.cros-pricing-table .PriceList-toggle,
.cros-pricing-table .PriceList-toggle span{
  font-size:0.92rem; color:var(--nb-ink-3) !important;
}
/* el "Desde" que precede al precio */
.cros-pricing-table .small.text-muted,
.sec .small.text-muted{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-3) !important;
}

/* ── LOS TELEFONOS, PULSABLES EN MOVIL ──────────────────────
   Un `href="tel:"` en movil ES el boton de llamar, no un enlace de
   lectura. Iban en linea, asi que su caja era la de la linea de
   texto —17 px medidos en Contacto— y fallaban el objetivo tactil.
   Se hace en todo el sitio y no pagina a pagina, que es donde
   estaban saliendo de uno en uno. */
@media (max-width:767px){
  a[href^="tel:"]{
    display:inline-flex; align-items:center; min-height:44px;
  }
}

/* ══ EL AVISO DE COOKIES, PULSABLE DE VERDAD ════════════════
   Su enlace medía 23 px de alto en movil, por debajo del minimo
   comodo para el dedo. Sube a 44 sin mover la caja de sitio. */
.cc-window .cc-link, a.cc-link{
  display:inline-flex; align-items:center; min-height:44px;
  padding:4px 2px; text-underline-offset:3px;
}
@media (min-width:768px){
  .cc-window .cc-link, a.cc-link{min-height:0}
}

/* ── EL ANCHO DE ESTE BLOQUE: NO HACE FALTA REGLA ─────────────
   Aqui vivia un `:has()` que ensanchaba el `.container` a 1288 px para
   pelear con los 760 de lectura que `netebu_legal.php` imponia en
   servicio legal. Ya no hace falta: esa pagina es una landing comercial
   y no un documento legal, asi que se saco del hook legal —la exclusion
   esta alli, con el motivo— y su contenedor vale ahora los 1350 del
   tema, exactamente los mismos que servidores dedicados.

   La regla ademas era codigo muerto: ninguna pagina legal de verdad
   lleva `.nb-fichas`, asi que no podia aplicar a nada. Si algun dia una
   lo llevara, el arreglo es este comentario, no un `!important`. */

/* ══ FICHAS DE CONTENIDO: «Donde esta tu servidor», «Para que se usa» ══
   Estas secciones eran texto corrido sobre blanco —un `h2` y parrafos— en
   medio de una pagina que en todo lo demas va con tarjetas. Se quedaban
   cortas y se notaba.

   NO SE TOCA NI UNA PALABRA. Se comprobo comparando el texto plano antes y
   despues: cero palabras perdidas. Lo unico que se anade son las etiquetas
   de las tres sedes y dos titulos de tarjeta, y las cinco salen del propio
   texto que ya estaba.

   COLORES: los declara este bloque en vez de heredarlos, porque Croster
   pinta `h1..h4{color:#211b65}` DIRECTAMENTE sobre el elemento y una regla
   directa gana siempre a la herencia. */
.sec.editor .nb-fichas{
  display:grid; gap:22px; margin:8px 0 4px;
}
.sec.editor .nb-ficha{
  background:var(--nb-paper);
  border:1px solid var(--nb-line);
  border-radius:18px;
  padding:30px 30px 26px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04);
  transition:box-shadow 0.28s ease, border-color 0.28s ease;
}
.sec.editor .nb-ficha:hover{
  border-color:#DCD4F0;
  box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 18px 40px -22px rgba(90,60,200,0.28);
}

/* la cabecera: icono en cuadrado de degradado suave, y el titulo al lado */
.sec.editor .nb-ficha-cab{
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px;
}
.sec.editor .nb-ficha-ico{
  flex:0 0 46px; width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:13px;
  background:var(--nb-grad-suave);
  border:1px solid rgba(123,92,246,0.16);
  color:var(--nb-violet-aa); font-size:1.14rem;
}
.sec.editor .nb-ficha-cab h2{
  margin:0 !important; padding:0 !important;
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.42rem !important; line-height:1.22;
  letter-spacing:-0.022em; color:var(--nb-ink) !important;
  text-wrap:balance;
}
.sec.editor .nb-ficha > p{
  font-family:var(--nb-ff-b); font-size:1.02rem; line-height:1.68;
  color:var(--nb-ink-2) !important; margin:0 0 14px;
}
.sec.editor .nb-ficha > p:last-child{margin-bottom:0}
.sec.editor .nb-ficha b{color:var(--nb-ink) !important; font-weight:600}

/* la nota de cierre: fondo tenue y su icono a la izquierda */
.sec.editor .nb-ficha p.nb-nota{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line);
  border-radius:13px; padding:14px 16px;
  font-size:0.96rem; color:var(--nb-ink-2) !important;
  margin:18px 0 0;
}
.sec.editor .nb-ficha p.nb-nota i{
  color:var(--nb-violet-aa); font-size:0.98rem;
  flex:0 0 auto; margin-top:0.28em;
}

/* ── las tres sedes ─────────────────────────────────────────── */
.sec.editor .nb-fichas ul.nb-sedes{
  list-style:none !important; margin:16px 0 0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
}
.sec.editor .nb-fichas ul.nb-sedes > li{
  margin:0 !important; padding:15px 16px;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:14px;
  display:flex; flex-direction:column; gap:3px;
  position:relative; overflow:hidden;
}
/* el filo de marca, arriba */
.sec.editor .nb-fichas ul.nb-sedes > li::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--nb-grad);
}
.sec.editor .nb-sede-n{
  font-family:var(--nb-ff-d); font-weight:700; font-size:1.04rem;
  color:var(--nb-ink); letter-spacing:-0.012em;
}
.sec.editor .nb-sede-p{
  font-family:var(--nb-ff-b); font-size:0.86rem; color:var(--nb-ink-3);
}

/* ── dos opciones enfrentadas ───────────────────────────────── */
.sec.editor .nb-duo{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px; margin:16px 0 0;
}
.sec.editor .nb-opcion{
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:14px;
  padding:20px 20px 18px;
  position:relative;
}
.sec.editor .nb-opcion h3{
  margin:0 0 9px !important; padding:0 !important;
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.06rem !important; letter-spacing:-0.014em;
  color:var(--nb-ink) !important;
}
.sec.editor .nb-opcion p{
  margin:0 !important; font-family:var(--nb-ff-b);
  font-size:0.97rem; line-height:1.62; color:var(--nb-ink-2) !important;
}
/* la recomendada, con el filo de marca a la izquierda */
.sec.editor .nb-opcion--destacada{
  background:var(--nb-paper);
  border-color:rgba(123,92,246,0.28);
  box-shadow:0 10px 26px -18px rgba(123,92,246,0.5);
}
.sec.editor .nb-opcion--destacada::before{
  content:""; position:absolute; top:14px; bottom:14px; left:0; width:3px;
  border-radius:0 3px 3px 0; background:var(--nb-grad);
}

/* ── qué incluye: dos por fila, con su marca de verificación ── */
/* LOS SELECTORES DE LAS LISTAS LLEVAN `.nb-fichas ul.…` Y NO ES DE ADORNO.
   `netebu_legal.php` pinta una viñeta redonda con
   `.sec.editor.nb-legal ul > li::before` —(0,3,3)—, y en la página de
   servicio legal le ganaba a un `.sec.editor .nb-incluye li::before`
   —(0,3,2)—: el check salía como un punto de 6 px. Nombrando el
   contenedor y el `ul` se llega a (0,4,3) y no depende del orden. */
.sec.editor .nb-fichas ul.nb-incluye{
  list-style:none !important; margin:4px 0 0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;
}
.sec.editor .nb-fichas ul.nb-incluye > li{
  margin:0 !important; padding:15px 16px 15px 44px;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:14px;
  display:flex; flex-direction:column; gap:2px;
  position:relative;
}
.sec.editor .nb-fichas ul.nb-incluye > li::before{
  /* SE DECLARA LA CAJA ENTERA, Y NO ES REDUNDANTE. La especificidad se
     resuelve PROPIEDAD A PROPIEDAD: esta regla le gana a la vinieta de
     `netebu_legal.php` —(0,4,3) contra (0,3,3)— pero solo en lo que
     declara. Sus `width:6px; height:6px; border-radius:50%` y su
     `background:var(--nb-grad)` seguian aplicando, asi que el check
     salia recortado a 6x6 con un degradado detras: un punto. */
  width:auto; height:auto; border-radius:0; background:none;
  content:"\f00c";
  /* LA FAMILIA CARGADA ES «Pro», NO «Free», y con «Free» sale el cuadrado
     vacio del glifo que no resuelve. Se comprobo en el navegador: de las
     familias de Font Awesome que el tema carga, la que esta disponible en
     peso 900 es «Font Awesome 5 Pro». La lista lleva las otras detras por
     si algun dia cambia la licencia. */
  font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro",
              "Font Awesome 5 Free","FontAwesome";
  font-weight:900;
  position:absolute; left:16px; top:16px;
  font-size:0.82rem; color:var(--nb-violet-aa);
}
.sec.editor .nb-inc-t{
  font-family:var(--nb-ff-d); font-weight:700; font-size:0.99rem;
  color:var(--nb-ink); letter-spacing:-0.012em;
}
.sec.editor .nb-inc-d{
  font-family:var(--nb-ff-b); font-size:0.9rem; line-height:1.5;
  color:var(--nb-ink-3);
}

/* ── los tres usos de la unidad ─────────────────────────────── */
.sec.editor .nb-usos{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px; margin:16px 0 0;
}
.sec.editor .nb-uso{
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:14px;
  padding:20px 18px 18px;
  transition:transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}
.sec.editor .nb-uso:hover{
  transform:translateY(-3px);
  border-color:rgba(123,92,246,0.3);
  box-shadow:0 16px 34px -20px rgba(90,60,200,0.42);
}
.sec.editor .nb-uso-ico{
  width:38px; height:38px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--nb-grad-suave);
  border:1px solid rgba(123,92,246,0.16);
  color:var(--nb-violet-aa); font-size:0.98rem;
  margin:0 0 12px;
}
.sec.editor .nb-uso h3{
  margin:0 0 8px !important; padding:0 !important;
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.02rem !important; letter-spacing:-0.014em;
  color:var(--nb-ink) !important; line-height:1.3;
}
.sec.editor .nb-uso p{
  margin:0 !important; font-family:var(--nb-ff-b);
  font-size:0.94rem; line-height:1.6; color:var(--nb-ink-2) !important;
}
.sec.editor .nb-uso a{color:var(--nb-violet-aa) !important; font-weight:600}
.sec.editor .nb-uso a:hover{text-decoration:underline}

/* ── los protocolos, como etiquetas ─────────────────────────── */
.sec.editor .nb-fichas ul.nb-protocolos{
  list-style:none !important; margin:14px 0 0 !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:8px;
}
.sec.editor .nb-fichas ul.nb-protocolos > li{
  margin:0 !important; padding:7px 13px;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:999px;
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.87rem;
  color:var(--nb-ink-2); letter-spacing:-0.006em;
  transition:border-color 0.22s ease, color 0.22s ease;
}
/* la viñeta redonda que `netebu_legal.php` pone a todo `ul > li` no
   tiene sentido dentro de una píldora */
.sec.editor .nb-fichas ul.nb-protocolos > li::before{content:none}
.sec.editor .nb-fichas ul.nb-protocolos > li:hover{
  border-color:rgba(123,92,246,0.32); color:var(--nb-violet-aa);
}

/* ── la llamada final ───────────────────────────────────────── */
.sec.editor .nb-ficha p.nb-cta-nbx{
  margin:18px 0 0; padding:16px 18px;
  background:var(--nb-grad-suave);
  border:1px solid rgba(123,92,246,0.2); border-radius:14px;
  font-family:var(--nb-ff-b); font-size:0.98rem; line-height:1.6;
  color:var(--nb-ink-2) !important;
}
.sec.editor .nb-ficha p.nb-cta-nbx a{
  color:var(--nb-violet-aa) !important; font-weight:600;
}
.sec.editor .nb-ficha p.nb-cta-nbx a:hover{text-decoration:underline}

/* ── el aviso de la sancion ─────────────────────────────────── */
/* Como `.nb-nota`, pero en tono de advertencia: el parrafo de las
   sanciones de la LSSI no es un apunte al margen, es el motivo por el
   que alguien esta leyendo esta pagina. */
.sec.editor .nb-ficha p.nb-alerta{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(179,38,30,0.055);
  border:1px solid rgba(179,38,30,0.18);
  border-radius:13px; padding:15px 17px;
  font-family:var(--nb-ff-b); font-size:0.98rem; line-height:1.62;
  color:var(--nb-ink-2) !important; margin:16px 0 0;
}
.sec.editor .nb-ficha p.nb-alerta i{
  color:#B3261E; font-size:1rem; flex:0 0 auto; margin-top:0.24em;
}
.sec.editor .nb-ficha p.nb-alerta b{color:#8E1F19 !important}

/* ── el bloque de preguntas frecuentes ──────────────────────── */
/* VA FUERA DE `.nb-fichas`, Y ESA ES LA CORRECCION. Estaba dentro de una
   ficha, asi que quedaba una caja con borde dentro de otra caja con
   borde, y no se parecia en nada al bloque `faqs` de las demas paginas
   —donde las tarjetas van sueltas bajo un titular grande centrado—.

   El titular replica el `.sec-title` del tema: Outfit 700 a 40 px,
   centrado, con la linea de degradado que pinta un `<span class="bordered">`
   —medido en servidores dedicados—. */
/* Los valores NO estan estimados: salen de comparar propiedad a propiedad
   el `.sec.faqs` de servidores dedicados con este bloque, en el navegador.
   Lo que quedaba distinto era el interlineado —46 px contra 44—, el margen
   inferior —26 contra 24— y, sobre todo, el ancho: alli las tarjetas miden
   860 px centradas y aqui ocupaban los 1258 del contenedor. */
.sec.editor .nb-faqs{padding:120px 0 0; margin:0}
.sec.editor .nb-faqs h2.nb-faqs-t{
  margin:0 0 24px !important; padding:0 !important;
  text-align:center; line-height:1.1;
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:2.5rem !important; letter-spacing:-0.028em;
  color:var(--nb-ink) !important; text-wrap:balance;
}
/* EL TEXTO VIVE EN EL SPAN, ASI QUE EL SPAN LLEVA LA TIPOGRAFIA ENTERA.
   `netebu_legal.php` declara `.sec.editor.nb-legal span{font-family:Figtree;
   font-size:1.045rem; line-height:1.78 !important}` para pisar los `style=`
   en linea del contenido legal. El h2 estaba a 40 px, si, pero el texto va
   dentro del span y salia a 16,72 px en Figtree: por eso el titular se veia
   pequeno aunque el h2 midiera lo correcto.

   Es la misma ley de siempre: un elemento se estila ENTERO. `!important`
   porque el rival lo tiene, y (0,4,3) contra su (0,3,1). */
.sec.editor .nb-faqs h2.nb-faqs-t > span.bordered{
  position:relative; display:inline-block; padding-bottom:12px;
  /* EL SUBRAYADO MAGENTA DE CROSTER. La clase `.bordered` trae
     `border-bottom:3px solid #e42fd2`, que no es de la marca. El tema ya
     lo anula, pero solo para `.sec-title`, y este titular usa otra clase:
     seguia pintandose DEBAJO del degradado. Muestreado el pixel de la
     barra: los nueve puntos daban 228,47,210. */
  border-bottom:0 !important;
  font-family:var(--nb-ff-d) !important;
  font-size:2.5rem !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:-0.028em !important;
  color:var(--nb-ink) !important;
}
.sec.editor .nb-faqs h2.nb-faqs-t > span.bordered::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:2px;
  background:var(--nb-grad);
}

/* ── preguntas y respuestas ─────────────────────────────────── */
/* MISMO ASPECTO QUE EL BLOQUE `faqs` DEL TEMA, y a proposito: en las
   demas paginas comerciales las preguntas frecuentes son ese acordeon,
   y aqui van dentro del texto porque esta pagina no tiene bloque `faqs`.
   Que se vean distintas dos cosas que son la misma no tiene defensa.

   Los valores estan medidos del `.sec.faqs` de servidores dedicados:
   tarjeta blanca, borde de una linea, radio 16, esa sombra, el icono en
   cuadrado de 38 y la respuesta sangrada 73 px —22 de relleno mas 38 de
   icono mas 13 de hueco—, para que arranque bajo la pregunta y no bajo
   el icono. */
.sec.editor .nb-qa{
  display:grid; gap:16px;
  max-width:860px; margin:0 auto;   /* el ancho medido en dedicados */
}
.sec.editor .nb-qa-item{
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:16px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04),
             0 12px 30px -20px rgba(20,17,31,0.16);
  padding:0;
}
.sec.editor .nb-qa p.nb-qa-p{
  /* `flex-start` y no `center`: en escritorio las preguntas caben en una
     linea y da igual, pero en movil ocupan tres y el icono se quedaba
     flotando en mitad del parrafo. Junto a la primera linea se lee como
     lo que es: la marca de la pregunta. */
  display:flex; align-items:flex-start; gap:13px;
  margin:0 !important; padding:20px 22px 0 !important;
  font-family:var(--nb-ff-d) !important; font-weight:700;
  font-size:1rem; letter-spacing:-0.012em;
  color:var(--nb-ink) !important;
}
.sec.editor .nb-qa p.nb-qa-p::before{
  content:"\f128";
  font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro",
              "Font Awesome 5 Free","FontAwesome";
  font-weight:900;
  flex:0 0 38px; width:38px; height:38px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--nb-grad-suave);
  border:1px solid rgba(123,92,246,0.16);
  color:var(--nb-violet-aa); font-size:0.92rem;
  margin-top:-0.14em;   /* centrado optico con la primera linea */
}
.sec.editor .nb-qa p.nb-qa-r{
  margin:0 !important; padding:12px 22px 22px 73px !important;
  font-family:var(--nb-ff-b);
  font-size:0.96rem; line-height:1.65; color:var(--nb-ink-2) !important;
}

/* tres por fila cuando son tres, cuatro en dos filas cuando son cuatro */
.sec.editor .nb-fichas ul.nb-incluye--tres{grid-template-columns:repeat(3, minmax(0, 1fr))}
.sec.editor .nb-usos--cuatro{grid-template-columns:repeat(2, minmax(0, 1fr))}
/* el nombre del servicio, en cursiva dentro del texto */
.sec.editor .nb-uso p i{
  font-style:normal; font-weight:600; color:var(--nb-violet-aa);
}

/* ── en pantallas estrechas, todo en una columna ────────────── */
@media (max-width:991px){
  .sec.editor .nb-usos,
  .sec.editor .nb-fichas ul.nb-incluye--tres{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:767px){
  .sec.editor .nb-ficha{padding:22px 20px 20px; border-radius:16px}
  .sec.editor .nb-ficha-cab{gap:12px; margin-bottom:14px}
  .sec.editor .nb-ficha-cab h2{font-size:1.24rem !important}
  .sec.editor .nb-ficha-ico{flex-basis:40px; width:40px; height:40px; font-size:1rem}
  .sec.editor .nb-fichas ul.nb-sedes,
  .sec.editor .nb-fichas ul.nb-incluye,
  .sec.editor .nb-fichas ul.nb-incluye--tres,
  .sec.editor .nb-duo,
  .sec.editor .nb-usos,
  .sec.editor .nb-usos--cuatro{grid-template-columns:1fr}
  .sec.editor .nb-fichas{gap:16px}
  .sec.editor .nb-faqs{padding-top:44px}
  .sec.editor .nb-faqs h2.nb-faqs-t,
  .sec.editor .nb-faqs h2.nb-faqs-t > span.bordered{font-size:1.72rem !important}
  .sec.editor .nb-faqs h2.nb-faqs-t{margin-bottom:20px !important}
  .sec.editor .nb-qa p.nb-qa-p{padding:17px 18px 0 !important; gap:11px}
  .sec.editor .nb-qa p.nb-qa-p::before{flex-basis:32px; width:32px; height:32px; font-size:0.85rem}
  .sec.editor .nb-qa p.nb-qa-r{padding:10px 18px 18px 18px !important}
}

@media (prefers-reduced-motion:reduce){
  .sec.editor .nb-ficha,
  .sec.editor .nb-uso,
  .sec.editor .nb-fichas ul.nb-protocolos > li{transition:none}
  .sec.editor .nb-uso:hover{transform:none}
}