/* ══ Netebu · landings de la tienda ════════════════════════════ */
.landing-page{
  --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-3:#1E1B33;
  --nb-on:#F2F3FB; --nb-on-2:#CFC9E0; --nb-on-3:#9AA0C0;
  --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;
  font-family:var(--nb-ff-b);
}
/* Croster declara h1..h4{color:#211b65} sobre el elemento, y eso gana
   a la herencia: sin esto los titulos salen azul marino sobre negro. */
.landing-page h1,.landing-page h2,.landing-page h3,
.landing-page h4,.landing-page h5{
  font-family:var(--nb-ff-d) !important;
  letter-spacing:-0.024em; text-wrap:balance;
}

/* ── cabecera ── */
.landing-page .hero{
  background:var(--nb-night) !important; position:relative;
  padding:72px 0 !important; overflow:hidden;
}
.landing-page .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 420px at 20% -10%, rgba(74,144,217,0.22), transparent 62%),
    radial-gradient(860px 380px at 82% 6%, rgba(232,64,152,0.16), transparent 60%);
}
.landing-page .hero .container{position:relative; z-index:2}
.landing-page .hero .cros-bg-shapes-right,
.landing-page .hero .cros-bg-shapes-left{display:none}
.landing-page .hero h1,.landing-page .hero h2{
  color:var(--nb-on) !important; font-weight:800 !important;
  font-size:clamp(1.9rem,4.2vw,2.9rem) !important;
}
.landing-page .hero p,.landing-page .hero .lead{color:var(--nb-on-2) !important}

/* ── tarjetas de nivel de validacion ── */
.landing-page .validation-levels{padding:56px 0 !important; background:var(--nb-paper-2)}
.landing-page .validation-levels h3{
  color:var(--nb-ink) !important; font-weight:700 !important;
  font-size:clamp(1.5rem,3vw,2.05rem) !important; margin-bottom:34px !important;
}
.landing-page .validation-levels .item{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; padding:30px 26px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 12px 32px -16px rgba(20,17,31,0.14) !important;
  height:100%; display:flex; flex-direction:column;
  transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.landing-page .validation-levels .item: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.3) !important;
}
.landing-page .validation-levels .item h4{
  color:var(--nb-ink) !important; font-weight:700 !important;
  font-size:1.2rem !important; margin-bottom:14px !important; order:1;
}
/* OJO: `.item` es un flex en columna, y en un flex el valor por
   defecto de `align-items` es `stretch`. Sin `align-self:center` la
   imagen se estira al ancho completo de la tarjeta, y con el
   `max-height` encima queda achatada: los candados son 310x124
   (proporcion 2,5) y salian a ~320x76 (proporcion 4,2).
   `width:auto` dentro de un flex NO significa "ancho natural".    */
.landing-page .validation-levels .item img{
  max-height:76px; width:auto; height:auto; max-width:100%;
  align-self:center; object-fit:contain;
  margin:0 auto 16px; order:2;
}
.landing-page .validation-levels .item span{
  font-family:var(--nb-ff-d); font-weight:600; color:var(--nb-violet-aa) !important;
  font-size:0.95rem; margin-bottom:10px; order:3;
}
.landing-page .validation-levels .item p{
  color:var(--nb-ink-2) !important; font-size:0.945rem; line-height:1.6;
  flex:1; order:4; margin-bottom:20px;
}
.landing-page .validation-levels .item .btn{order:5; margin-top:auto}

/* ── botones ── */
.landing-page .btn-primary,
.landing-page a.btn-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;
  border-radius:11px !important; padding:12px 26px !important;
  box-shadow:0 10px 26px -12px rgba(123,92,246,0.5);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.landing-page .btn-primary:hover{
  transform:translateY(-2px); color:#fff !important;
  box-shadow:0 16px 32px -14px rgba(123,92,246,0.62);
}
.landing-page .btn-default,
.landing-page a.btn-default{
  background:transparent !important;
  border:1.5px solid var(--nb-line-2) !important;
  color:var(--nb-ink) !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:11px !important; padding:11px 24px !important;
  transition:border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.landing-page .btn-default:hover{
  border-color:var(--nb-violet) !important; color:var(--nb-violet-aa) !important;
  transform:translateY(-2px);
}
.landing-page .btn-success{
  background:var(--nb-ok) !important; border:0 !important; color:#fff !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:11px !important;
}

/* ── los precios que inyecta WHMCS ── */
.landing-page .bigger-170,
.landing-page .fw-900{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  color:var(--nb-ink) !important; letter-spacing:-0.028em;
  font-variant-numeric:tabular-nums;
}

/* ── bloques de contenido ── */
.landing-page .content-block{padding:64px 0 !important}
.landing-page .content-block h2,
.landing-page .content-block h3{
  color:var(--nb-ink) !important; font-weight:700 !important;
}
.landing-page .content-block p,
.landing-page .content-block li{color:var(--nb-ink-2) !important; line-height:1.65}
.landing-page .standout{background:var(--nb-paper) !important}
.landing-page .standout ul li{color:var(--nb-ink-2) !important; font-size:0.97rem !important}
/* Croster pinta este bloque con su morado #8f1faf */
.landing-page .standout-1{
  background:var(--nb-night-3) !important; position:relative; overflow:hidden;
}
.landing-page .standout-1::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 380px at 50% -10%, rgba(123,92,246,0.30), transparent 64%);
}
.landing-page .standout-1 > *{position:relative; z-index:2}
.landing-page .standout-1 h2,.landing-page .standout-1 h3,
.landing-page .standout-1 p{color:var(--nb-on) !important}
.landing-page .standout-2{background:var(--nb-paper-2) !important}
.landing-page .content-block .item{
  background:var(--nb-paper); border:1px solid var(--nb-line);
  border-radius:14px; padding:24px 22px; height:100%;
  transition:border-color 0.26s ease, transform 0.26s ease;
}
.landing-page .content-block .item:hover{
  border-color:var(--nb-line-2); transform:translateY(-3px);
}
.landing-page .content-block .item p{font-size:0.92rem !important}

/* ══ COMPARATIVA DE CERTIFICADOS (/store/ssl-certificates/go/dv|ov|ev) ══
   Un fallo del propio tema: Croster escribe
     `.certificate-options .col-md-6.sidebar ul li{color:#fff}`
   pero el HTML genera `col-md-3`, no `col-md-6`. Esa regla no llega a
   aplicarse nunca y las etiquetas de la izquierda salian en oscuro
   sobre el fondo morado. Aqui se acota por `.sidebar` a secas.

   Los precios y los certificados los inyecta WHMCS desde MarketConnect:
   aqui solo el aspecto. */
.landing-page .certificate-options{
  background:var(--nb-night) !important; color:var(--nb-on) !important;
  position:relative; overflow:hidden;
}
.landing-page .certificate-options::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 440px at 18% -8%, rgba(74,144,217,0.22), transparent 62%),
    radial-gradient(880px 400px at 84% 10%, rgba(232,64,152,0.18), transparent 60%);
}
.landing-page .certificate-options > *{position:relative; z-index:2}
.landing-page .certificate-options .cros-bg-shapes-right,
.landing-page .certificate-options .cros-bg-shapes-left{display:none}
.landing-page .certificate-options .block-header h2,
.landing-page .certificate-options .block-header h3,
.landing-page .certificate-options .block-header p{color:var(--nb-on) !important}

/* la columna de etiquetas */
.landing-page .certificate-options .sidebar ul{list-style:none; padding:0; margin:0}
.landing-page .certificate-options .sidebar ul li{
  color:var(--nb-on) !important;
  background:rgba(255,255,255,0.07) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:9px !important; margin-bottom:2px !important;
  font-family:var(--nb-ff-b) !important; font-weight:500 !important;
  font-size:0.93rem;
}
.landing-page .certificate-options .sidebar .header{background:transparent !important}

/* las columnas de certificado */
.landing-page .row-pricing-table .pricing-table{
  background:var(--nb-paper) !important; border-radius:14px !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.10), 0 18px 44px -22px rgba(0,0,0,0.5);
  overflow:hidden;
}
.landing-page .row-pricing-table .pricing-table .header{
  color:var(--nb-ink) !important; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important;
}
.landing-page .row-pricing-table .pricing-table ul li{
  font-family:var(--nb-ff-b); color:var(--nb-ink-2) !important;
  font-size:0.93rem;
}
.landing-page .row-pricing-table .pricing-table .fa-check{color:var(--nb-ok) !important}
/* la chapa de RECOMENDADO, que Croster pinta en magenta plano */
.landing-page .popular-plan-wrapper .popular-plan{
  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:11.5px; letter-spacing:0.1em; text-transform:uppercase;
}

/* ── preguntas frecuentes ── */
/* ── cabecera: la misma red neuronal de webmail ───────────── */
/* `.hero.bg-primary` es una banda plana de color. Se le pone encima
   el lienzo con la red viva: los mismos nodos, aristas y pulsos que
   animan webmail.php y las cabeceras de Soporte. Misma pieza, no una
   imitacion.                                                       */
/* Croster renders an empty 5px #E42FD2 banner before the SSL landing. */
.body-container > .hero-bg-wrap.small-header.header-banner-styled{
  border-top:0 !important;
}
.landing-page .hero{
  position:relative; overflow:hidden;
  background-color:var(--nb-night, #0B0A16) !important;
  background-image:none !important;
  /* Altura util minima anclada con !important: asi ninguna regla del
     tema ni de otro hook puede volver a colapsar el hero a ~125px.
     Desktop (>=1200px): 22vw cae en 360px; se mantiene en 360-440px.
     El padding-top (150-170px) deja el titulo ~100px por debajo de la
     isla del navbar (que mide ~81px y flota a 14px). */
  min-height:clamp(360px,22vw,440px) !important;
  display:flex; align-items:center;
  padding:clamp(150px,8.5vw,170px) 0 clamp(64px,3.75vw,75px) !important;
}
.landing-page .hero .nb-net{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1; pointer-events:none;
}
.landing-page .hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(74,144,217,0.22), transparent 64%),
    radial-gradient(760px 400px at 88% 100%, rgba(232,64,152,0.18), transparent 62%);
}
.landing-page .hero > .container{position:relative; z-index:2; width:100%}
.landing-page .hero h1,
.landing-page .hero .h1{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  font-size:clamp(1.9rem, 3.6vw, 2.9rem) !important;
  letter-spacing:-0.032em; color:var(--nb-on) !important;
  text-wrap:balance; margin:0 !important;
}
/* filo inferior con el degradado */
.landing-page .hero::before{
  content:""; position:absolute; left:0; right:0; top:auto; bottom:0; height:3px;
  z-index:3; background:var(--nb-grad);
}

/* ── LA BARRA DE SECCIONES ──────────────────────────────────────────
   Eran pastillas con degradado sobre una franja translucida con blur,
   y estaban rotas de origen. Dos reglas de Croster, escondidas dentro
   de `@media (min-width:992px)` —o sea SOLO en escritorio, que es donde
   nadie las buscaba—:

     .landing-page .navbar .navbar-nav    {width:100% !important}  (0,3,0)
     .landing-page .navbar .navbar-nav li {width:25%}              (0,3,1)

   El `25%` da por hecho que hay CUATRO pestanas. En SSL son cinco, asi
   que sumaban el 125% del contenedor: cada una salia a 310 px —el ancho
   de la columna, no el de su texto—, el conjunto media 1607 en 1288, y
   el navegador hacia scroll hasta el final para ensenar la activa. Por
   eso «Informacion General» no se veia y la ultima aparecia mordida por
   el desvanecido.

   Ahora es lo contrario de una pastilla: texto y una linea de marca
   debajo, que crece desde el centro. Sin fondo, sin sombra, sin blur y
   sin scroll en escritorio. Se le gana a Croster por especificidad
   —`nav.navbar` anade un elemento— y con `!important` porque el rival
   lo tiene. */
.landing-page > nav.navbar{
  position:relative; z-index:20;
  background:var(--nb-paper) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-top:0 !important;
  border-bottom:1px solid var(--nb-line) !important;
  padding:0 !important;
}
/* nada que recortar: si no cabe, baja de linea */
.landing-page > nav.navbar > .container{
  overflow:visible;
  -webkit-mask-image:none; mask-image:none;
}
.landing-page nav.navbar .navbar-nav{
  width:auto !important; margin:0 auto !important;
  display:flex !important; flex-wrap:wrap !important;
  justify-content:center !important;
  gap:0 34px !important;
}
.landing-page nav.navbar .navbar-nav > li.nav-item{
  width:auto !important; flex:0 0 auto !important;
}
/* Croster separa las pestanas con `border-left:1px solid #d5dce5` —su
   gris— en el propio enlace, y subraya con un `::before` morado a
   -1px. Ninguna de las dos pinta ya nada aqui. */
.landing-page .navbar-nav .nav-item,
.landing-page .navbar-nav .nav-link{border:0 !important}
.landing-page .navbar-nav .nav-link::before{content:none !important}
.landing-page .navbar-nav .nav-link{
  position:relative; display:block;
  background:none !important; box-shadow:none !important;
  border-radius:0 !important;
  padding:18px 2px 16px !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.95rem !important; letter-spacing:-0.008em;
  color:var(--nb-ink-3) !important;
  transition:color 0.24s ease;
}
.landing-page .navbar-nav .nav-link:hover{
  background:none !important; color:var(--nb-ink) !important;
}
/* la linea, que crece desde el centro */
.landing-page .navbar-nav .nav-link::after{
  content:"" !important; position:absolute; left:0; right:0; bottom:0;
  height:2.5px; border-radius:2px 2px 0 0;
  background:var(--nb-grad);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform 0.28s cubic-bezier(0.2,0.7,0.3,1);
}
.landing-page .navbar-nav .nav-link:hover::after{transform:scaleX(0.45)}
.landing-page .navbar-nav .nav-item.active .nav-link{
  background:none !important; box-shadow:none !important;
  color:var(--nb-ink) !important;
}
.landing-page .navbar-nav .nav-item.active .nav-link::after{
  transform:scaleX(1);
  box-shadow:0 0 14px -2px rgba(123,92,246,0.55);
}

/* ── por debajo de 992 px ───────────────────────────────────────────
   Bootstrap pliega el menu tras la hamburguesa. Son pestanas de
   SECCION, no el menu del sitio: escondidas ahi no las abre nadie, y
   ademas el desvanecido que avisaba de que habia mas vivia justo en
   este tramo, donde el menu esta oculto y no se veia nunca.

   Se muestran siempre, en una fila que se recorre de lado. Y aqui el
   desvanecido si tiene sentido, porque aqui si desborda. */
@media (max-width:991px){
  .landing-page nav.navbar .navbar-toggler,
  .landing-page nav.navbar .navbar-brand{display:none !important}
  .landing-page nav.navbar .navbar-collapse{
    display:flex !important; flex-basis:auto !important; overflow:visible !important;
  }
  /* TRES PROPIEDADES, Y LAS TRES HACEN FALTA. Bootstrap pone
     `flex-direction:column` al `.navbar-nav` y solo lo pasa a fila en
     `.navbar-expand-lg` desde 992 px: sin la primera, las cinco salen
     apiladas en vertical. Y como el `ul` es hijo flex del colapsable,
     sin `max-content` se contrae a 137 px y se apilan igual. */
  .landing-page nav.navbar .navbar-nav{
    flex-direction:row !important; flex-wrap:nowrap !important;
    width:max-content !important; min-width:max-content !important;
    flex:0 0 auto !important;
    margin:0 !important; justify-content:flex-start !important;
    gap:0 18px !important;
  }
  .landing-page > nav.navbar > .container{
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .landing-page > nav.navbar > .container::-webkit-scrollbar{display:none}
  .landing-page .navbar-nav .nav-link{
    white-space:nowrap;
    font-size:0.9rem !important; padding:14px 2px 12px !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .landing-page .navbar-nav .nav-link::after{transition:none}
}

/* ── Preguntas Frecuentes, con el mismo aspecto que las paginas
      del Page Builder (NBX, hosting, VPS…) ─────────────────────────
   El marcado NO es el mismo: aqui MarketConnect usa
   .panel/.panel-heading/.panel-title/.panel-body, y alli Croster usa
   .card/.card-header/.card-title/.card-body. Lo que se replica es el
   resultado, no los selectores:
     · titulo subrayado con el degradado, del ancho del texto
       (alli es un <span class="bordered">, que aqui no existe)
     · linea entre la pregunta y la respuesta
       (alli es la clase `border-top` de Bootstrap en el .card-body)  */
.landing-page .content-block.faqs .block-title{
  position:relative; width:fit-content; max-width:100%;
  margin-left:auto !important; margin-right:auto !important;
  padding-bottom:12px; margin-bottom:36px !important;
}
.landing-page .content-block.faqs .block-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:2px; background:var(--nb-grad);
}
.landing-page .content-block.faqs .panel-heading{
  padding:15px 22px !important; cursor:pointer;
}
/* Cuando el JS ha desmontado el acordeón, el encabezado ya no es un
   control: no debe invitar a pulsarlo. La clase la pone el propio JS,
   así que si no llega a correr se queda el acordeón de siempre y el
   cursor sigue siendo coherente con lo que hace. */
.landing-page .content-block.faqs .nb-sin-acordeon .panel-heading{
  cursor:default !important; padding-bottom:4px !important;
}
.landing-page .content-block.faqs .nb-sin-acordeon .panel-collapse .panel-body{
  border-top:0 !important; padding-top:0 !important;
}
.landing-page .content-block.faqs .panel-collapse .panel-body{
  border-top:1px solid var(--nb-line) !important;
  padding:16px 22px 20px !important;
}
.landing-page .panel{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:13px !important; margin-bottom:12px; overflow:hidden;
  box-shadow:none !important;
  transition:border-color 0.24s ease, box-shadow 0.24s ease;
}
.landing-page .panel:hover{
  border-color:var(--nb-line-2) !important;
  box-shadow:0 10px 28px -18px rgba(20,17,31,0.2) !important;
}
.landing-page .panel-heading{
  background:transparent !important; border:0 !important; padding:0 !important;
}
.landing-page .panel-heading a,
.landing-page .panel-title{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink) !important; font-size:1.02rem !important;
  padding:17px 22px !important; display:block; text-decoration:none;
}
.landing-page .panel-body{
  padding:0 22px 20px !important; border:0 !important;
  color:var(--nb-ink-2) !important; font-size:0.95rem; line-height:1.65;
}

/* ── avisos ── */
.landing-page .alert{
  border-radius:12px !important; border:1px solid var(--nb-line) !important;
  background:var(--nb-paper-2) !important; color:var(--nb-ink-2) !important;
  font-family:var(--nb-ff-b);
}

@media (max-width:767px){
  .landing-page .hero{
    min-height:clamp(300px,82vw,340px) !important;
    padding:126px 0 48px !important;
  }
  .landing-page .content-block{padding:44px 0 !important}
  .landing-page .validation-levels .item{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .landing-page *{transition:none !important}
}

/* ── los restos del tema en la tienda ──────────────────────────
   Auditado con el inspector: se recorre el DOM y se compara el
   color CALCULADO de cada elemento visible con la lista de colores
   que no son de la marca. Quedaban estos, y ninguno se veia a ojo
   en una captura pequena.                                        */
/* Croster pinta h1..h4 sobre el propio elemento; aqui solo estaban
   cubiertos h2 y h3, y los h4 salian en su azul marino #211B65. */
.landing-page h4,.landing-page h5,
.landing-page .content-block h4,.landing-page .content-block h5{
  font-family:var(--nb-ff-d) !important; color:var(--nb-ink) !important;
  letter-spacing:-0.022em;
}
/* El resto del texto no declara color: hereda de `body{color:#211b65}`.
   Se corta en el CONTENEDOR y se deja heredar, que es lo que evita
   tocar selectores genericos de `span` o `li` —eso ya rompio la
   portada una vez—. */
.landing-page .content-block{color:var(--nb-ink-2)}
/* los enlaces venian en el morado #8F1FAF */
.landing-page .content-block a:not(.btn),
.landing-page a.show-all{color:var(--nb-violet-aa) !important}
.landing-page .content-block a:not(.btn):hover,
.landing-page a.show-all:hover{color:var(--nb-violet) !important}
/* superficies grises del tema: #EDF0F5 de fondo, #D5DCE5 de borde */
.landing-page .content-block.faqs,
.landing-page .content-block.features{background:var(--nb-paper-2) !important}
.landing-page .content-block img.border,
.landing-page .content-block form{
  border-color:var(--nb-line) !important; border-radius:14px !important;
}
/* La banda de la promocion venia con el morado de Croster de fondo.
   Se le da el mismo tratamiento que a `.standout-1`: noche con un
   halo violeta, que es como se resuelve en el resto del sitio. */
.landing-page .competitive-upgrade-promo{
  background:var(--nb-night-3) !important; color:var(--nb-on) !important;
  position:relative; overflow:hidden;
}
.landing-page .competitive-upgrade-promo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 380px at 50% -10%, rgba(123,92,246,0.30), transparent 64%);
}
.landing-page .competitive-upgrade-promo > *{position:relative; z-index:2}
.landing-page .competitive-upgrade-promo h2,
.landing-page .competitive-upgrade-promo h3,
.landing-page .competitive-upgrade-promo h4,
.landing-page .competitive-upgrade-promo p,
.landing-page .competitive-upgrade-promo li{color:var(--nb-on) !important}
.landing-page .competitive-upgrade-promo a:not(.btn){color:#CBBBFF !important}

/* ══ SSL · LA PORTADA, REORDENADA POR CASO DE USO ═══════════════════
   Tres bloques nuevos que sustituyen a los seis que contaban lo mismo
   cinco veces: `nb-casos` (por lo que el cliente tiene), `nb-porque`
   (que es y por que le hace falta) y `nb-comparar` (DV/OV/EV, UNA vez).

   SOBRE LOS `!important` DE AQUI: el propio hook declara mas arriba
     .landing-page .content-block p,li{color:…!important; line-height:1.65}
     .landing-page .standout ul li  {color:…!important; font-size:.97rem!important}
   con (0,2,1) y (0,3,1). Se les gana en especificidad, pero NO a la
   marca de `!important`: por eso el color, el interlineado y el tamano
   de los parrafos y las listas de estos bloques lo llevan tambien.
   Donde no hay rival, no hay `!important`. */

/* EL `auto` DEL MARGEN NO ES ADORNO. Con `margin:14px 0 0` la caja de
   660 px se queda pegada al borde izquierdo del contenedor y el texto
   se centra DENTRO de ella: el titular sale centrado en la pagina y el
   subtitulo, no. Lo que se centra es la caja, no solo su contenido. */
.landing-page .nb-hero-sub{
  max-width:660px; margin:14px auto 0; text-align:center;
  font-family:var(--nb-ff-b); font-size:1.06rem; line-height:1.62;
  color:var(--nb-on-2) !important;   /* contra .hero p de mas arriba */
}

/* ── titulares de bloque ────────────────────────────────────────── */
.landing-page .nb-bloque-t{
  margin:0 0 10px !important; text-align:center;
  font-size:2.35rem !important; line-height:1.14;
  letter-spacing:-0.028em; color:var(--nb-ink) !important;
}
.landing-page .nb-bloque-d{
  max-width:720px; margin:0 auto 34px !important; text-align:center;
  font-size:1.05rem !important; line-height:1.62 !important;
  color:var(--nb-ink-2) !important;
}

/* ══ 1. LOS CUATRO CASOS ════════════════════════════════════════════ */
.landing-page .content-block.nb-casos{background:var(--nb-paper-2)}

/* REJILLA, NO FLEX. En un contenedor flex el hijo toma su ancho del
   contenido y las cuatro tarjetas salen desiguales; `1fr` las iguala,
   y `grid-auto-rows:1fr` iguala tambien entre filas cuando en tablet
   caen dos y dos. */
.landing-page .nb-caso-rejilla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  grid-auto-rows:1fr; gap:18px; align-items:stretch;
}
.landing-page .nb-caso{
  display:flex; flex-direction:column;
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:18px;
  padding:26px 24px 24px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04);
  transition:box-shadow 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}
.landing-page .nb-caso:hover{
  transform:translateY(-4px); border-color:#DCD4F0;
  box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 22px 46px -24px rgba(90,60,200,0.34);
}
.landing-page .nb-caso-ico{
  width:46px; height:46px; border-radius:13px;
  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:1.1rem;
  margin:0 0 15px;
}
.landing-page .nb-caso h3{
  margin:0 0 9px !important; padding:0;
  font-size:1.12rem !important; line-height:1.28;
  letter-spacing:-0.016em; color:var(--nb-ink) !important;
}
.landing-page .nb-caso .nb-caso-d{
  margin:0 0 18px !important;
  font-size:0.94rem !important; line-height:1.58 !important;
  color:var(--nb-ink-2) !important;
}

/* los dos datos del certificado de entrada */
.landing-page .nb-caso ul.nb-caso-datos{
  list-style:none !important; margin:0 0 16px !important; padding:0 !important;
  border-top:1px solid var(--nb-line); padding-top:14px !important;
}
.landing-page .nb-caso ul.nb-caso-datos > li{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 7px !important; padding:0 !important;
  font-size:0.86rem !important; color:var(--nb-ink-2) !important;
}
.landing-page .nb-caso ul.nb-caso-datos > li:last-child{margin-bottom:0 !important}
.landing-page .nb-caso ul.nb-caso-datos > li::before{content:none}
.landing-page .nb-caso .nb-dato-e{color:var(--nb-ink-3); flex:0 0 auto}
.landing-page .nb-caso .nb-dato-v{
  font-family:var(--nb-ff-d); font-weight:600; color:var(--nb-ink);
  text-align:right;
}

/* el precio, y las acciones pegadas al fondo para que las cuatro
   tarjetas terminen a la misma altura */
.landing-page .nb-caso .nb-caso-precio{
  margin:auto 0 14px !important; padding-top:6px;
  display:flex; align-items:baseline; gap:7px;
  color:var(--nb-ink-2) !important;
}
.landing-page .nb-caso .nb-precio-desde{
  font-size:0.84rem !important; color:var(--nb-ink-3) !important;
}
.landing-page .nb-caso .nb-caso-precio strong{
  font-family:var(--nb-ff-d); font-weight:800;
  font-size:1.46rem; line-height:1.1; letter-spacing:-0.02em;
  color:var(--nb-ink);
  font-variant-numeric:tabular-nums;
}
.landing-page .nb-caso-acciones{
  display:flex; flex-direction:column; gap:9px;
}
.landing-page .nb-caso-acciones form{margin:0}
.landing-page .nb-caso-acciones .btn-primary{width:100%}
.landing-page a.nb-caso-mas{
  text-align:center; font-family:var(--nb-ff-d); font-weight:600;
  font-size:0.88rem; color:var(--nb-violet-aa) !important;
}
.landing-page a.nb-caso-mas:hover{text-decoration:underline}

/* la nota del precio y el enlace a la lista completa */
.landing-page .nb-casos .nb-casos-nota{
  display:flex; gap:11px; align-items:flex-start;
  max-width:760px; margin:26px auto 0 !important;
  background:var(--nb-paper); border:1px solid var(--nb-line);
  border-radius:13px; padding:14px 16px;
  font-size:0.92rem !important; line-height:1.58 !important;
  color:var(--nb-ink-2) !important;
}
.landing-page .nb-casos .nb-casos-nota i{
  color:var(--nb-violet-aa); flex:0 0 auto; margin-top:0.24em;
}
.landing-page .nb-casos .nb-casos-todos{
  text-align:center; margin:18px 0 0 !important;
}
.landing-page .nb-casos .nb-casos-todos a{
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.95rem;
  color:var(--nb-violet-aa) !important;
  border-bottom:1px solid rgba(107,72,242,0.32); padding-bottom:2px;
}

/* ══ 2. QUE ES Y POR QUE HACE FALTA ═════════════════════════════════ */
.landing-page .nb-porque-cab{margin:0 0 30px}

/* el aviso del navegador: texto a la izquierda, captura a la derecha */
.landing-page .nb-porque-aviso{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:28px; align-items:center;
  background:var(--nb-night-3); border-radius:20px;
  padding:30px 32px; overflow:hidden; position:relative;
}
.landing-page .nb-porque-aviso::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 300px at 20% -20%, rgba(123,92,246,0.34), transparent 62%);
}
.landing-page .nb-porque-aviso > *{position:relative; z-index:2}
.landing-page .nb-porque-aviso h3{
  margin:0 0 10px !important;
  font-size:1.42rem !important; line-height:1.24;
  color:var(--nb-on) !important;
}
.landing-page .nb-porque-aviso .nb-aviso-txt p{
  margin:0 !important; font-size:1rem !important; line-height:1.62 !important;
  color:var(--nb-on-2) !important;
}
.landing-page .nb-porque-aviso .nb-aviso-txt p strong{color:var(--nb-on) !important}
/* `align-self` en la imagen, no `align-items` en el padre: eso ultimo
   encogeria tambien la columna de texto. */
.landing-page .nb-porque-aviso .nb-aviso-img img{
  max-width:100%; width:auto; height:auto;
  align-self:center; object-fit:contain;
  border-radius:12px; display:block; margin:0 auto;
}

/* los seis motivos */
.landing-page .nb-porque ul.nb-motivos{
  list-style:none !important; margin:26px 0 0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:12px;
}
.landing-page .nb-porque ul.nb-motivos > li{
  display:flex; align-items:center; gap:12px;
  margin:0 !important; padding:15px 17px !important;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:14px;
  font-family:var(--nb-ff-d); font-weight:600;
  font-size:0.95rem !important;      /* contra .standout ul li{.97rem !important} */
  line-height:1.4 !important;
  color:var(--nb-ink) !important;    /* idem: aqui el rival tiene `!important` */
}
.landing-page .nb-porque ul.nb-motivos > li::before{content:none}
.landing-page .nb-porque ul.nb-motivos > li i{
  color:var(--nb-violet-aa); font-size:1rem; flex:0 0 auto;
}
.landing-page .nb-porque .nb-porque-google{
  display:flex; gap:12px; align-items:flex-start;
  margin:22px 0 0 !important; padding:16px 18px;
  background:var(--nb-grad-suave);
  border:1px solid rgba(123,92,246,0.2); border-radius:14px;
  font-size:0.98rem !important; line-height:1.6 !important;
  color:var(--nb-ink-2) !important;
}
.landing-page .nb-porque .nb-porque-google i{
  color:var(--nb-violet-aa); font-size:1.05rem; flex:0 0 auto; margin-top:0.2em;
}

/* ══ 3. LA COMPARATIVA ══════════════════════════════════════════════ */
.landing-page .content-block.nb-comparar{background:var(--nb-paper-2)}

/* LA TABLA DESBORDA DENTRO DE SU CAJA, NO EN EL CUERPO. Sin este
   `overflow-x` en el marco, en movil la pagina entera coge barra
   horizontal y todo el sitio se desplaza de lado. */
.landing-page .nb-tabla-marco{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:18px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04);
}
.landing-page table.nb-tabla{
  width:100%; min-width:720px; margin:0;
  border-collapse:collapse; background:transparent;
}
.landing-page table.nb-tabla th,
.landing-page table.nb-tabla td{
  padding:16px 18px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--nb-line);
  font-size:0.93rem; line-height:1.55;
  color:var(--nb-ink-2);
}
.landing-page table.nb-tabla thead th{
  font-family:var(--nb-ff-d); font-weight:700; font-size:1rem;
  color:var(--nb-ink); letter-spacing:-0.014em;
  background:var(--nb-paper-2);
  border-bottom:2px solid var(--nb-line-2);
  position:relative;
}
/* el filo de marca sobre las tres columnas de nivel */
.landing-page table.nb-tabla thead th:not(:first-child)::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--nb-grad);
}
.landing-page table.nb-tabla tbody th{
  font-family:var(--nb-ff-d); font-weight:600;
  color:var(--nb-ink); width:190px; background:var(--nb-paper-2);
}
.landing-page table.nb-tabla tbody tr:last-child th,
.landing-page table.nb-tabla tbody tr:last-child td{border-bottom:0}
.landing-page table.nb-tabla td.nb-igual{
  background:rgba(123,92,246,0.045); color:var(--nb-ink-2);
}
.landing-page table.nb-tabla td.nb-igual strong{color:var(--nb-ink)}
.landing-page table.nb-tabla tr.nb-tabla-precio td strong{
  font-family:var(--nb-ff-d); font-weight:800; font-size:1.24rem;
  color:var(--nb-ink); letter-spacing:-0.018em;
  font-variant-numeric:tabular-nums;
}
.landing-page table.nb-tabla tr.nb-tabla-acciones td{padding-top:8px}
.landing-page .nb-comparar .nb-comparar-nota{
  display:flex; gap:11px; align-items:flex-start;
  max-width:760px; margin:24px auto 0 !important;
  background:var(--nb-paper); border:1px solid var(--nb-line);
  border-radius:13px; padding:14px 16px;
  font-size:0.94rem !important; line-height:1.58 !important;
  color:var(--nb-ink-2) !important;
}
.landing-page .nb-comparar .nb-comparar-nota i{
  color:var(--nb-violet-aa); flex:0 0 auto; margin-top:0.24em;
}

/* ── pantallas estrechas ────────────────────────────────────────── */
@media (max-width:991px){
  .landing-page .nb-porque-aviso{
    grid-template-columns:1fr; gap:20px; padding:26px 22px;
  }
}
@media (max-width:767px){
  .landing-page .nb-bloque-t{font-size:1.86rem !important}
  .landing-page .nb-bloque-d{font-size:1rem !important; margin-bottom:26px !important}
  .landing-page .nb-caso{padding:22px 20px 20px}
  .landing-page table.nb-tabla tbody th{width:auto; min-width:140px}
}
@media (prefers-reduced-motion:reduce){
  .landing-page .nb-caso{transition:none}
  .landing-page .nb-caso:hover{transform:none}
}

/* ══ LAS CUATRO SUBPAGINAS (go/dv · go/ov · go/ev · go/wildcard) ═════
   Aqui no habia NADA propio: `.block-title`, `.ideal-for`, `.feature`,
   `.standout-features`, `.dashed-border` y `.logos` iban con el CSS de
   Croster tal cual, asi que la portada ya era Netebu y estas cuatro
   seguian siendo el tema viejo. Se les trae el mismo lenguaje: ficha
   blanca, borde de una linea, radio 18-20, icono en cuadrado de
   degradado suave y Outfit/Figtree.

   LAS REJILLAS SE MONTAN CON GRID, NO CON FLEX. Un `.row` de Bootstrap
   es flex con margenes negativos: el hijo toma su ancho del CONTENIDO y
   las tarjetas salen desiguales. Por eso cada `.row` que se convierte
   anula tambien `width`, `max-width`, `flex` y `padding` de sus
   columnas, y separa con `gap` —que no se come el relleno interior—. */

/* ── titulares de bloque, como los de la portada ─────────────────── */
.landing-page .content-block:not(.faqs) > .container > .block-title,
.landing-page .content-block:not(.faqs) > .container > h2.block-title,
.landing-page .content-block:not(.faqs) > .container > h4.block-title{
  position:relative; display:block; text-align:center;
  margin:0 auto 34px !important; padding-bottom:14px !important;
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:2.15rem !important; line-height:1.16;
  letter-spacing:-0.026em; color:var(--nb-ink) !important;
  text-wrap:balance;
}
/* la linea de marca bajo el titular, del ancho del texto */
.landing-page .content-block:not(.faqs) > .container > .block-title::after{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:74px; height:3px; border-radius:2px; background:var(--nb-grad);
}

/* ── el bloque de descripcion, y el detalle del certificado ─────────
   `.dashed-border` entra a proposito: es la misma pieza —texto a un
   lado, imagen al otro— y hasta ahora se veia distinta. */
.landing-page .content-block.standout:not(.standout-features):not(.standout-2):not(.nb-porque):not(.faqs) > .container > .row{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:30px; align-items:center; margin:0 !important;
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:20px;
  padding:32px 34px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04);
}
.landing-page .content-block.standout > .container > .row > .content-body-block,
.landing-page .content-block.standout > .container > .row > .content-image-block{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important;
}
.landing-page .content-body-block h2{
  margin:0 0 14px !important; padding:0 !important;
  font-size:1.62rem !important; line-height:1.22;
  letter-spacing:-0.022em; color:var(--nb-ink) !important;
}
.landing-page .content-body-block p{
  margin:0 0 14px !important;
  font-family:var(--nb-ff-b); font-size:1rem !important;
  line-height:1.68 !important; color:var(--nb-ink-2) !important;
}
.landing-page .content-body-block p:last-child{margin-bottom:0 !important}
.landing-page .content-body-block strong{color:var(--nb-ink) !important; font-weight:600}
/* `align-self` en la imagen y no `align-items` en el padre: eso ultimo
   encogeria tambien la columna de texto. */
.landing-page .content-image-block img{
  max-width:100%; width:auto; height:auto;
  align-self:center; object-fit:contain;
  display:block; margin:0 auto; border-radius:14px;
}

/* ── para que encaja este certificado (las tres tarjetas) ────────── */
.landing-page .content-block .row.ideal-for{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));
  grid-auto-rows:1fr; gap:16px; margin:0 !important;
}
.landing-page .content-block .row.ideal-for > [class*="col-"]{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:13px; text-align:center;
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:18px;
  padding:26px 20px !important;
  transition:transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}
.landing-page .content-block .row.ideal-for > [class*="col-"]:hover{
  transform:translateY(-3px); border-color:#DCD4F0;
  box-shadow:0 16px 36px -22px rgba(90,60,200,0.4);
}
.landing-page .content-block .row.ideal-for > [class*="col-"] > i{
  width:52px; height:52px; border-radius:15px;
  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) !important; font-size:1.24rem;
}
.landing-page .content-block .row.ideal-for > [class*="col-"] > h4{
  margin:0 !important; font-size:1.04rem !important; line-height:1.32;
  color:var(--nb-ink) !important;
}

/* ── las tres caracteristicas destacadas ─────────────────────────── */
.landing-page .content-block.standout-features > .container > .row{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows:1fr; gap:16px; margin:0 !important;
}
.landing-page .content-block.standout-features > .container > .row > [class*="col-"]{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:26px 24px !important; text-align:left !important;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:18px;
}
.landing-page .content-block.standout-features h4{
  margin:0 0 10px !important; font-size:1.08rem !important; line-height:1.3;
  color:var(--nb-ink) !important;
}
.landing-page .content-block.standout-features p{
  margin:0 !important; font-family:var(--nb-ff-b);
  font-size:0.95rem !important; line-height:1.6 !important;
  color:var(--nb-ink-2) !important;
}

/* ── que incluye el certificado: ocho celdas ─────────────────────── */
/* SON DOS `.row` SEGUIDAS DE CUATRO, y se dejan como dos rejillas de
   cuatro en vez de fundirlas: `auto-fit` las reparte igual en cada
   ancho y no hace falta tocar el marcado. */
.landing-page .content-block.features > .container > .row:not(.ideal-for){
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(212px, 1fr));
  grid-auto-rows:1fr; gap:14px; margin:0 0 14px !important;
}
.landing-page .content-block.features > .container > .row:not(.ideal-for):last-child{
  margin-bottom:0 !important;
}
.landing-page .content-block.features > .container > .row:not(.ideal-for) > [class*="col-"]{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important;
}
.landing-page .content-block.features .feature{
  height:100%;
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  background:var(--nb-paper-2);
  border:1px solid var(--nb-line); border-radius:15px;
  padding:19px 18px;
  transition:border-color 0.24s ease, background 0.24s ease;
}
.landing-page .content-block.features .feature:hover{
  border-color:#DCD4F0; background:var(--nb-paper);
}
.landing-page .content-block.features .feature i{
  color:var(--nb-violet-aa) !important; font-size:1.06rem;
}
.landing-page .content-block.features .feature h4{
  margin:0 !important; font-family:var(--nb-ff-d) !important;
  font-weight:600 !important; font-size:0.95rem !important;
  line-height:1.42; color:var(--nb-ink) !important;
  letter-spacing:-0.012em;
}

/* ── las autoridades de certificacion ────────────────────────────── */
.landing-page .content-block.standout-2 > .container > .block-title{
  font-size:1.32rem !important; margin-bottom:26px !important;
}
.landing-page .content-block.standout-2 .logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px;
}
.landing-page .content-block.standout-2 .logos .logo{
  flex:0 1 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--nb-paper);
  border:1px solid var(--nb-line); border-radius:16px;
  padding:20px 30px; min-width:190px; min-height:88px;
}
/* NO SE AMPLIA POR ENCIMA DE SU TAMANO: ampliar no anade informacion,
   interpola y emborrona. Solo se limita hacia abajo. */
.landing-page .content-block.standout-2 .logos .logo img{
  max-width:100%; max-height:44px; width:auto; height:auto;
  align-self:center; object-fit:contain; display:block;
}

/* ── pantallas estrechas ─────────────────────────────────────────── */
@media (max-width:767px){
  .landing-page .content-block:not(.faqs) > .container > .block-title{
    font-size:1.72rem !important; margin-bottom:26px !important;
  }
  .landing-page .content-block.standout:not(.standout-features):not(.standout-2):not(.nb-porque):not(.faqs) > .container > .row{
    padding:24px 20px !important; gap:22px;
  }
  .landing-page .content-body-block h2{font-size:1.4rem !important}
}
@media (prefers-reduced-motion:reduce){
  .landing-page .content-block .row.ideal-for > [class*="col-"]{transition:none}
  .landing-page .content-block .row.ideal-for > [class*="col-"]:hover{transform:none}
}