/* 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. */
.sec .sec-caption{max-width:100%; flex-wrap:nowrap}
@media (max-width:640px){
  .sec .sec-caption{
    flex-wrap:wrap; 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}
}

.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}
.sec.products .plan-specs .description{
  padding:20px 18px; border-right:1px solid var(--nb-line); height:100%;
}
.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:var(--nb-ink-3) !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 */
.sec.products .plan-specs .flex-column{
  padding:20px 18px; border-right:1px solid var(--nb-line);
  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;
}

@media (max-width:767px){
  .sec.products .plan-specs .description,
  .sec.products .plan-specs .flex-column{
    border-right:0; border-bottom:1px solid var(--nb-line);
  }
  .sec.products .order-now{padding:16px !important; border-radius:0 0 13px 13px}
  .sec.products .cros-tabsbar .nav-tabs{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
  }
}

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

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

/* ══ 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}
/* ══ 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"}
/* 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, CUANDO LA PAGINA ES LA DE SERVICIO LEGAL ──────
   `netebu_legal.php` limita su `.container` a 760 px con `!important`, y
   lo hace con razon: un texto largo se lee a unos 65 caracteres por
   linea. Pero estas fichas no son texto corrido, son rejillas de tres y
   cuatro columnas, y a 760 px se ahogan —quedaba una isla estrecha bajo
   un carrusel que ocupa toda la pantalla—.

   Solo se ensancha SI el contenedor lleva fichas: el ancho de lectura
   sigue valiendo para el resto de paginas legales, que si son texto
   corrido. Y se iguala a los 1288 px que usan las demas paginas
   comerciales, para que el bloque case con ellas.

   `!important` porque el rival lo tiene, y (0,5,0) contra su (0,4,0).
   Donde no haya `:has()` se queda en 760: estrecho, pero legible. */
.sec.editor.nb-legal > .container:has(> .nb-fichas){
  max-width:1288px !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}
}