/* ══ 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:#7656F6; --nb-ok:#0F9268;
  --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}

/* ── navegacion interna de la landing ── */
.landing-page .navbar-nav{gap:6px}
.landing-page .navbar-nav .nav-link{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink-2) !important; border-radius:9px; padding:9px 16px !important;
  transition:background 0.22s ease, color 0.22s ease;
}
.landing-page .navbar-nav .nav-link:hover{
  background:var(--nb-paper-2) !important; color:var(--nb-violet-aa) !important;
}
/* Croster subraya la pestaña con `a::before{background:#8f1faf;
   height:3px; position:absolute; bottom:-1px}` — su morado, y a
   -1px, o sea fuera del radio de la pastilla, asomando por debajo
   como una rebaba. Aquí la selección ya la marca el degradado del
   fondo: la barrita sobra. */
.landing-page .navbar-nav .nav-link::before{content:none !important}
.landing-page .navbar-nav .nav-link{
  position:relative; transition:background 0.24s ease, color 0.24s ease;
}
.landing-page .navbar-nav .nav-item.active .nav-link{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !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 pestanas ─────────────────────────────────── */
/* Las pestanas ruedan con la pagina: NO se fijan al hacer scroll.
   Antes este hook las pegaba con `position:fixed` (clase
   `nb-pegada`) via JS al bajar; se elimino porque el usuario quiere
   scroll normal. Se conserva el aspecto (franja semitransparente y
   pastillas). La altura real de la barra la publica
   netebu_navbar.php en `--nb-nav-h`. */
.landing-page > nav.navbar{
  position:relative; z-index:20;
  background:rgba(255,255,255,0.94) !important;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--nb-line) !important;
  border-top:0 !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04);
  padding:9px 0 !important;
  transition:box-shadow 0.24s ease;
}


/* El tema separa las pestanas con lineas verticales: un
   `border-left:1px solid #d5dce5` —el gris ajeno de siempre— que va
   en el PROPIO `a.nav-link`, no en el `li`. Con las pastillas
   redondeadas sobran. */
.landing-page .navbar-nav .nav-item,
.landing-page .navbar-nav .nav-link{border:0 !important}
.landing-page .navbar-nav .nav-item::before,
.landing-page .navbar-nav .nav-item::after,
.landing-page .navbar-nav .nav-link::after{content:none !important}
.landing-page > nav.navbar > .container{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.landing-page > nav.navbar > .container::-webkit-scrollbar{display:none}
.landing-page .navbar-nav{
  gap:6px; flex-wrap:nowrap !important; width:max-content; margin:0 auto;
}
.landing-page .navbar-nav .nav-item{flex:0 0 auto}
.landing-page .navbar-nav .nav-link{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.94rem !important; color:var(--nb-ink-2) !important;
  padding:10px 18px !important; border-radius:11px;
  white-space:nowrap; position:relative;
  transition:background 0.24s ease, color 0.24s ease;
}
.landing-page .navbar-nav .nav-link::before{content:none !important}
.landing-page .navbar-nav .nav-link:hover{
  background:var(--nb-paper-2) !important; color:var(--nb-violet-aa) !important;
}
.landing-page .navbar-nav .nav-item.active .nav-link{
  background:var(--nb-grad) !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !important;
  box-shadow:0 8px 22px -10px rgba(123,92,246,0.6);
}
/* en movil se recorre de lado: un desvanecido avisa de que hay mas */
@media (max-width:991px){
  .landing-page > nav.navbar{padding:8px 0 !important}
  .landing-page > nav.navbar > .container{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .landing-page .navbar-nav{margin:0}
  .landing-page .navbar-nav .nav-link{font-size:0.9rem !important; padding:9px 14px !important}
}

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