:root{
  --nb-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ── la descripcion deja de esconderse tras «Ver Detalles» ─────────
   Ahora es una lista legible, no un parrafo largo: es contenido, no
   letra pequeña. */
.sec.products .plan-features.collapse:not(.show){
  display:block !important;
  height:auto !important;
  visibility:visible !important;
}
.sec.products .PriceList-toggle{display:none !important}
.sec.products .plan-features{
  font-family:var(--nb-ff-b) !important;
  color:var(--nb-ink-2) !important;
  font-size:.95rem !important;
  margin-top:14px !important;
}

/* ── la ilustracion ────────────────────────────────────────────────
   PARA QUITARLAS: cambiar `display:block` por `display:none`. */
.sec.products .nb-ilus{
  display:block !important;
  margin:16px 0 4px !important;
  text-align:center !important;
}
.sec.products .nb-ilus img{
  max-width:100% !important;
  height:auto !important;
}

/* ── la lista, igual que en la portada ─────────────────────────────
   El texto va suelto dentro del <li>, sin un <span> que lo envuelva.
   Con `display:flex` el `gap` separaria el <b> de la cifra del resto
   de la frase —«10   cuentas»—, asi que el tick se posiciona en
   absoluto y el texto fluye como un parrafo normal. */
.sec.products ul.nb-feats{
  list-style:none !important;
  margin:14px 0 0 !important;
  padding:14px 0 0 !important;
  border-top:1px solid var(--nb-line) !important;
}
.sec.products ul.nb-feats li{
  display:block !important;
  position:relative !important;
  padding:6px 0 6px 26px !important;
  font-size:.94rem !important;
  color:var(--nb-ink-2) !important;
  line-height:1.5 !important;
}
.sec.products ul.nb-feats li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.62em !important;
  width:15px !important;
  height:15px !important;
  background:var(--nb-ok, #0F9268) !important;
  -webkit-mask:var(--nb-tick) center/contain no-repeat;
  mask:var(--nb-tick) center/contain no-repeat;
}
.sec.products ul.nb-feats li b{
  color:var(--nb-ink) !important;
  font-weight:600 !important;
}

/* ── la frase de cierre ───────────────────────────────────────── */
.sec.products .nb-cierre{
  margin-top:14px !important;
  padding-top:12px !important;
  border-top:1px solid var(--nb-line) !important;
  font-size:.88rem !important;
  color:var(--nb-ink-3) !important;
}

/* ── el boton, como el «Contratar» de la portada ───────────────────
   Alli el plan corriente lleva contorno y solo el destacado va con
   degradado; asi el ojo sabe cual se recomienda. */
.sec.products .product-actions .btn{
  border-radius:12px !important;
  font-family:var(--nb-ff-d) !important;
  font-weight:600 !important;
  padding:13px 20px !important;
  width:100% !important;
  border:1px solid var(--nb-violet) !important;
  background:transparent !important;
  color:var(--nb-violet-aa) !important;
  box-shadow:none !important;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.sec.products .product-actions .btn:hover,
.sec.products .product-actions .btn:focus-visible{
  background:var(--nb-grad) !important;
  border-color:transparent !important;
  color:#fff !important;
}
.sec.products .featured .product-actions .btn,
.sec.products .cros-pricing-table.featured .product-actions .btn{
  background:var(--nb-grad) !important;
  border-color:transparent !important;
  color:#fff !important;
}

/* ── que todas las tarjetas de una fila midan igual ─────────────── */
.sec.products .row.pricing-slider{align-items:stretch !important}
.sec.products .products-slide{display:flex !important}
.sec.products .products-slide > .cros-pricing-table{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

/* ── flechas del carrusel ──────────────────────────────────────────
   Van junto a los puntos, no flotando sobre las tarjetas: asi el
   control es uno solo, se lee igual en movil que en escritorio y no
   tapa el precio de la primera tarjeta. */
.sec.products .nb-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  margin-top:6px !important;
}
.sec.products .nb-nav .swiper-pagination{
  position:static !important;
  width:auto !important;
  margin:0 !important;
}
.sec.products .nb-nav button{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid var(--nb-line-2);
  border-radius:99px;
  background:var(--nb-paper);
  color:var(--nb-ink-2);
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}
.sec.products .nb-nav button svg{width:16px; height:16px; display:block}
.sec.products .nb-nav button:hover:not(:disabled),
.sec.products .nb-nav button:focus-visible:not(:disabled){
  background:var(--nb-grad);
  border-color:transparent;
  color:#fff;
}
.sec.products .nb-nav button:focus-visible{
  outline:2px solid var(--nb-violet);
  outline-offset:2px;
}
/* Swiper marca los extremos con `swiper-button-disabled`, y con
   `swiper-button-lock` cuando todos los planes caben y sobran. */
.sec.products .nb-nav button.swiper-button-disabled{
  opacity:.34;
  cursor:default;
}
.sec.products .nb-nav button.swiper-button-lock{display:none}

/* ── «El panel de control más avanzado» ────────────────────────────
   Sustituye a una captura de Plesk de 2019 —en inglés, con PHP 7.3.9
   y fechada en septiembre de aquel año— que desmentía al propio texto
   de la página, donde hoy se anuncia PHP 8.4. Una captura de un panel
   envejece; una lista de lo que se puede hacer con él, no. */
/* 320px y no menos: con seis tarjetas, un minimo mas pequeño da
   cuatro columnas y deja dos descolgadas en la segunda fila. Asi
   salen 3+3 en escritorio, 2+2+2 en tableta y una por fila en movil,
   sin ninguna huerfana. */
.nb-panel{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:14px;
  margin:26px 0 22px;
  text-align:left;
}
.nb-panel .nb-p-c{
  background:var(--nb-paper);
  border:1px solid var(--nb-line);
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 1px 2px rgba(20,17,31,.04), 0 10px 26px -18px rgba(20,17,31,.16);
  transition:border-color .18s ease, transform .18s ease;
}
.nb-panel .nb-p-c:hover{
  border-color:var(--nb-line-2);
  transform:translateY(-3px);
}
.nb-panel .nb-p-ic{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  margin-bottom:13px;
  border-radius:10px;
  background:var(--nb-grad);
  color:#fff;
}
.nb-panel .nb-p-ic svg{width:19px; height:19px; display:block}
.nb-panel .nb-p-c h3{
  font-family:var(--nb-ff-d);
  font-size:1.02rem;
  font-weight:700;
  color:var(--nb-ink);
  margin:0 0 7px;
  letter-spacing:-.01em;
}
.nb-panel .nb-p-c p{
  font-family:var(--nb-ff-b);
  font-size:.92rem;
  line-height:1.55;
  color:var(--nb-ink-2);
  margin:0;
}
.nb-p-sub{
  font-family:var(--nb-ff-b);
  color:var(--nb-ink-2);
  max-width:64ch;
}
.nb-p-pie{
  font-family:var(--nb-ff-b);
  font-size:.94rem;
  color:var(--nb-ink-3);
}
.nb-p-pie a{color:var(--nb-violet-aa); font-weight:600}


@media (max-width:575px){
  .sec.products ul.nb-feats li{font-size:.9rem !important}
  .nb-panel{grid-template-columns:1fr; gap:12px}
  .nb-panel .nb-p-c{padding:18px 17px}
}