/* 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:#7656F6; --nb-ok:#0F9268;
  --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;
}
.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_navbar.php` lo mueve por debajo de
   la cabecera, que es donde deja de estorbar a la barra. */
.verification-banner{position:relative; z-index:1}

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