: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, #116B47) !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;
}

/* ══ LAS CINCO PRIMERAS, Y EL RESTO A UN TOQUE ═══════════════════
   MEDIDO, NO SUPUESTO. La tarjeta de «Hosting Basico» media 1182 px
   en un movil de 844: no cabia entera en ninguna pantalla, ni en
   escritorio (1216 contra 900). Y los controles del carrusel quedan
   93 px por debajo del final de la tarjeta, o sea fuera de vista
   siempre: para pasar de plan habia que bajar hasta el fondo y luego
   volver a subir para leer el siguiente. Eso lo hace nadie.

   El desglose decia donde estaba el peso: nombre 24, precio 154,
   boton 52 —todo eso ya arriba, que es lo correcto— y 702 px de
   caracteristicas, el 59 % de la tarjeta, con trece viñetas y una
   ilustracion de 148.

   Cinco viñetas a la vista y las demas tras un resorte dejan la
   tarjeta en unos 760: entra entera, con sus controles. Cinco porque
   son las que sostienen la decision; esconderlas todas —que es lo que
   hacia el tema de origen con su «Ver Detalles»— ahorra pixeles pero
   deja al cliente sin saber que compra.

   La ilustracion no se pierde: se va DENTRO de lo plegado. Quien abre
   el detalle la ve; quien solo compara precios no la sufre. */
.sec.products .nb-plegado{
  display:grid !important;
  grid-template-rows:0fr !important;
  transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1) !important;
}
.sec.products .nb-plegado > .nb-plegado-in{
  overflow:hidden !important;
  min-height:0 !important;
}
.sec.products .nb-plegado.nb-abierto{ grid-template-rows:1fr !important }
@media (prefers-reduced-motion:reduce){
  .sec.products .nb-plegado{transition:none !important}
}

/* El resorte. Es un `<button>` de verdad y no un `<p>` con un
   `data-toggle`, que es lo que traia el tema: asi lo alcanza el
   teclado, lo anuncia un lector de pantalla y dice si esta abierto o
   cerrado sin que haya que mirar la pantalla. */
.sec.products .nb-mas{
  display:flex !important; align-items:center; gap:8px;
  width:100% !important; margin:12px 0 0 !important;
  padding:11px 12px !important;
  min-height:44px !important;
  background:var(--nb-paper-2, #FAF8FE) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:11px !important;
  font-family:var(--nb-ff-b) !important; font-size:.9rem !important;
  font-weight:600 !important; color:var(--nb-ink-2) !important;
  cursor:pointer; text-align:left;
  transition:background .18s ease, border-color .18s ease;
}
.sec.products .nb-mas:hover{
  background:#fff !important; border-color:var(--nb-line-2, #D8D0EC) !important;
}
/* La flecha gira al abrir: dice el estado sin necesidad de leer. */
.sec.products .nb-mas::after{
  content:"" ; margin-left:auto;
  width:9px; height:9px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.sec.products .nb-mas[aria-expanded="true"]::after{
  transform:rotate(-135deg) translate(-2px,-2px);
}
@media (prefers-reduced-motion:reduce){
  .sec.products .nb-mas::after{transition:none}
}
/* El segundo bloque de viñetas no repite el filo de arriba: es la
   continuacion de la misma lista, no otra. */
.sec.products ul.nb-feats.nb-resto{
  border-top:0 !important; margin-top:0 !important; padding-top:0 !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;
}
/* EL `background-clip` NO SOBRA, y sin el se ve un contorno de color
   alrededor del boton. `border-color:transparent` no impide que el
   fondo se pinte ahi debajo: por defecto `background-clip` vale
   `border-box`, asi que el degradado ocupa tambien ese pixel de borde
   y asoma difuminado por todo el contorno.

   `padding-box` corta el fondo en el relleno y el borde transparente
   queda de verdad transparente.

   Y OJO al reponerlo si algun dia se toca: `background` es una
   propiedad de ATAJO. Cualquier regla posterior que vuelva a declarar
   el degradado resetea `background-clip` a `border-box` y el contorno
   reaparece. Si se anade otra variante del boton, declara el clip con
   ella. */
.sec.products .product-actions .btn:hover,
.sec.products .product-actions .btn:focus-visible{
  background:var(--nb-grad) !important;
  background-clip:padding-box !important;
  -webkit-background-clip:padding-box !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;
  background-clip:padding-box !important;
  -webkit-background-clip:padding-box !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}
}