/* ══ Netebu · catalogo de producto ═════════════════════════════ */

/* ── 1 · la tabla en escritorio ─────────────────────────────────
   Se conserva como tabla: para comparar seis modelos con cinco
   caracteristicas no hay nada mejor. Solo se le quita el ruido. */
.sec.products .footable.nb-tp{
  width:100%; border-collapse:collapse; margin:0;
  font-variant-numeric:tabular-nums;
}
.sec.products .footable.nb-tp thead th{
  font-family:var(--nb-ff-d) !important;
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--nb-ink-3) !important; text-align:left;
  padding:0 14px 12px !important; white-space:nowrap;
  background:transparent !important;
  border:0 !important; border-bottom:1px solid var(--nb-line) !important;
}
/* El `!important` del fondo va contra el gris `rgb(237,240,245)` que
   el tema pinta en las filas. Sobre tarjeta blanca ese gris ensucia,
   y a rayas alternas convierte la tabla en un mantel. */
.sec.products .footable.nb-tp tbody tr{
  border-bottom:1px solid var(--nb-line);
  background:var(--nb-paper) !important;
  transition:background 0.16s ease;
}
.sec.products .footable.nb-tp tbody tr:last-child{border-bottom:0}
.sec.products .footable.nb-tp tbody tr:hover{background:var(--nb-paper-2) !important}
.sec.products .footable.nb-tp tbody td{
  padding:16px 14px !important; vertical-align:middle;
  border:0 !important; background:transparent !important;
  font-size:0.94rem; color:var(--nb-ink-2);
  text-align:left !important;
}
/* los valores, alineados con su cabecera y no centrados */
.sec.products .footable.nb-tp tbody td.server-price{text-align:right !important}
/* El triangulito de footable sirve para desplegar las columnas que
   se plieguen. Como ninguna columna trae `data-breakpoints`, aqui no
   pliega nunca nada: es un adorno que no lleva a ningun sitio. */
.sec.products .footable.nb-tp .footable-toggle,
.sec.products .footable.nb-tp .footable-toggle::before,
.sec.products .footable.nb-tp .footable-toggle::after{
  display:none !important; content:none !important;
}

/* La chapa con el nombre del modelo.
   OJO CON EL COLOR DEL `h4`: en el diseño de `netebu_paginas.php` la
   `.server-info` es una chapa OSCURA, asi que su titulo va en blanco
   con `!important`. Aqui el fondo pasa a ser transparente sobre la
   tarjeta clara, de modo que ese blanco deja el modelo invisible.
   Por eso el color se fuerza tambien con `!important`: no es
   decoracion, es lo unico que hace legible el nombre. */
.sec.products .footable.nb-tp .server-heading{padding-left:0 !important}
/* `.server-info::before` es un pico de 4 px hecho con bordes, la
   punta de la chapa oscura del diseño original. Sin ese fondo se
   queda flotando como una mota negra sobre la tarjeta blanca. */
.sec.products .footable.nb-tp .server-info::before,
.sec.products .footable.nb-tp .server-info::after{content:none !important}
.sec.products .footable.nb-tp .server-info{
  display:flex !important; align-items:center;
  justify-content:flex-start !important; gap:11px;
  background:transparent !important; border:0 !important;
  padding:0 !important; min-width:0 !important; width:auto !important;
}
.sec.products .footable.nb-tp .server-info h4{
  font-family:var(--nb-ff-d) !important;
  font-size:1.05rem !important; font-weight:700 !important;
  color:var(--nb-ink) !important;
  margin:0 !important; line-height:1.2; order:2; flex:0 1 auto;
}
.sec.products .footable.nb-tp .server-info > span{
  order:1; flex:none;
  width:34px !important; height:34px !important;
  border-radius:10px; background:var(--nb-grad);
  display:grid !important; place-items:center;
}
/* el icono venia a 48 px, mas grande que su propia chapa */
.sec.products .footable.nb-tp .server-info > span i{
  color:#fff !important; font-size:15px !important;
  width:auto !important; height:auto !important;
  line-height:1 !important; margin:0 !important; opacity:1 !important;
}

/* ── el bloque de precio ────────────────────────────────────────
   HAY DOS ESTRUCTURAS DISTINTAS y no se parecen:
     NBX  -> `.billing-cycle-pricing`, con desplegable de ciclo
     NAX  -> `.product_pricing_single`, sin ciclo pero con coste de
             instalacion, y con `h-100` y `justify-content-center`,
             que es lo que estiraba la fila hasta 227 px de alto.
   Las dos se compactan aqui: de cuatro renglones sueltos a dos. */
/* NBX: la fila medía 252 px y solo 175 eran contenido; el resto,
   margenes muertos entre el desplegable, la caja del precio y el
   boton. Aqui se aprietan los tres. */
.sec.products .footable.nb-tp .billing-cycle-pricing{
  display:inline-flex !important; flex-direction:column;
  align-items:flex-end; gap:0; margin:0 !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .btn-group{
  margin:0 0 6px !important;
}
/* el desplegable de ciclo partia el texto y la flecha en dos lineas */
.sec.products .footable.nb-tp .billing-cycle-pricing .dropdown-toggle{
  display:inline-flex !important; align-items:center; gap:7px;
  padding:7px 13px !important; border-radius:10px !important;
  border:1px solid var(--nb-line) !important;
  font-family:var(--nb-ff-d); font-size:0.85rem; font-weight:600;
  color:var(--nb-ink-2) !important; white-space:nowrap;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .dropdown-toggle .pricing_wrapr{
  display:inline !important; margin:0 !important;
}
.sec.products .footable.nb-tp .product_pricing{margin:0 0 8px !important}
.sec.products .footable.nb-tp .pricing_main{
  background:transparent !important; border:0 !important;
  padding:0 !important; margin:0 !important;
}
.sec.products .footable.nb-tp .pricing_main .price{margin:0 !important; line-height:1.15}
.sec.products .footable.nb-tp .pricing_main .price .cost{
  font-family:var(--nb-ff-d); font-size:1.35rem; font-weight:700; color:var(--nb-ink);
}
.sec.products .footable.nb-tp .pricing_main .price .suffix{
  font-family:var(--nb-ff-d); font-size:0.95rem; font-weight:700; color:var(--nb-ink);
}
.sec.products .footable.nb-tp .pricing_main .cycle{
  font-size:11px; color:var(--nb-ink-3); margin:0 !important;
}

/* NAX: «De 46,76 € Mensual» en un renglon, la instalacion debajo */
.sec.products .footable.nb-tp .product_pricing_single{
  display:block !important; height:auto !important;
  margin:0 0 10px !important; line-height:1.35;
}
.sec.products .footable.nb-tp .product_pricing_single .regular_pricing,
.sec.products .footable.nb-tp .product_pricing_single .price,
.sec.products .footable.nb-tp .product_pricing_single .cycle{
  display:inline !important; margin:0 !important;
}
/* al pasar los tres a `inline` el «De» se quedaba pegado a la cifra */
.sec.products .footable.nb-tp .product_pricing_single .regular_pricing{
  margin-right:6px !important;
}
.sec.products .footable.nb-tp .product_pricing_single .price .cost{
  font-family:var(--nb-ff-d); font-size:1.2rem; font-weight:700; color:var(--nb-ink);
}
.sec.products .footable.nb-tp .product_pricing_single .price .suffix{
  font-family:var(--nb-ff-d); font-size:0.95rem; font-weight:700; color:var(--nb-ink);
}
.sec.products .footable.nb-tp .product_pricing_single .cycle{
  font-size:11px; color:var(--nb-ink-3); margin-left:4px !important;
}
.sec.products .footable.nb-tp .product_pricing_single .setup-fee{
  display:block !important; font-size:11px; color:var(--nb-ink-3); margin-top:2px !important;
}
.sec.products .footable.nb-tp .server-price .btn{
  display:inline-block !important; width:auto !important;
  padding:9px 20px !important; margin:0 !important;
  border-radius:10px !important; font-family:var(--nb-ff-d); font-weight:600;
}

/* ── 2 · la misma tabla, en tarjetas ────────────────────────────
   Por debajo de 992 px. `!important` en los `display` porque
   footable escribe `style="display: table-row"` en cada fila. */
@media (max-width:991px){
  .sec.products .footable.nb-tp,
  .sec.products .footable.nb-tp tbody,
  .sec.products .footable.nb-tp tbody tr,
  .sec.products .footable.nb-tp tbody td{
    display:block !important; width:100% !important;
  }
  .sec.products .footable.nb-tp thead{display:none !important}
  .sec.products .footable.nb-tp .footable-toggle{display:none !important}

  .sec.products .footable.nb-tp tbody tr{
    border:1px solid var(--nb-line) !important; border-radius:18px;
    background:var(--nb-paper); padding:18px; margin-bottom:14px;
    box-shadow:0 1px 2px rgba(20,17,31,0.04),0 8px 24px -14px rgba(20,17,31,0.12);
  }
  .sec.products .footable.nb-tp tbody tr:hover{background:var(--nb-paper)}
  .sec.products .footable.nb-tp tbody td{padding:0 !important}

  /* cabecera de la tarjeta */
  .sec.products .footable.nb-tp .server-heading{padding-bottom:14px !important}

  /* cada caracteristica, con su etiqueta delante */
  .sec.products .footable.nb-tp td[data-nb-et]{
    display:flex !important; align-items:baseline;
    justify-content:space-between; gap:14px;
    padding:10px 0 !important;
    border-top:1px solid var(--nb-line) !important;
    font-size:0.9rem;
  }
  .sec.products .footable.nb-tp td[data-nb-et]::before{
    content:attr(data-nb-et);
    font-family:var(--nb-ff-d); font-size:10px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    color:var(--nb-ink-3); flex:none;
  }
  .sec.products .footable.nb-tp td[data-nb-et] > *,
  .sec.products .footable.nb-tp td[data-nb-et]{
    text-align:right; color:var(--nb-ink); font-weight:500;
  }

  /* pie de la tarjeta: precio a la izquierda, boton a la derecha.
     Vale para las dos estructuras, la de NBX y la de NAX. */
  .sec.products .footable.nb-tp .server-price{
    margin-top:16px !important; padding-top:16px !important;
    border-top:1px solid var(--nb-line) !important;
    text-align:left !important;
    display:flex !important; align-items:center;
    justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  .sec.products .footable.nb-tp .billing-cycle-pricing{
    display:flex !important; flex-direction:row !important;
    align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px; width:100%;
  }
  .sec.products .footable.nb-tp .product_pricing_single{
    margin:0 !important; flex:1 1 auto;
  }
  .sec.products .footable.nb-tp .server-price .btn{flex:none}
}

/* ── 3 · el selector de VPS, en dos pasos ───────────────────────
   Primero la familia —que es el numero de nucleos—, luego la talla.
   De veinte botones sueltos se pasa a cuatro mas seis como mucho. */
.sec.products .nb-familias{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; margin:0 0 20px;
}
.sec.products .nb-fam{
  appearance:none; cursor:pointer; text-align:left;
  font-family:var(--nb-ff-b,inherit);
  border:1px solid var(--nb-line); border-radius:16px;
  background:var(--nb-paper); padding:16px 18px;
  transition:transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.sec.products .nb-fam:hover{transform:translateY(-2px); border-color:var(--nb-line-2)}
.sec.products .nb-fam:focus-visible{outline:2px solid var(--nb-violet); outline-offset:3px}
.sec.products .nb-fam[aria-pressed="true"]{
  background:var(--nb-night); border-color:transparent;
  box-shadow:0 10px 30px -14px rgba(20,17,31,0.5);
}
.sec.products .nb-fam .nb-fam-nom{
  display:block; font-family:var(--nb-ff-d);
  font-size:1.1rem; font-weight:700; color:var(--nb-ink); line-height:1.2;
}
.sec.products .nb-fam .nb-fam-car{
  display:block; font-size:12px; color:var(--nb-ink-3); margin-top:2px;
}
.sec.products .nb-fam .nb-fam-cpu{
  display:inline-block; margin-top:10px;
  font-family:var(--nb-ff-d); font-size:10px; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--nb-ink-2);
  background:var(--nb-paper-2); border:1px solid var(--nb-line);
  padding:3px 9px; border-radius:7px;
}
.sec.products .nb-fam[aria-pressed="true"] .nb-fam-nom{color:#fff}
.sec.products .nb-fam[aria-pressed="true"] .nb-fam-car{color:var(--nb-on-2,#B9BEDD)}
.sec.products .nb-fam[aria-pressed="true"] .nb-fam-cpu{
  color:#fff; background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18);
}

/* las pestañas del tema, convertidas en rejilla de tallas */
.sec.products .nb-vps.nav-tabs{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; border:0 !important; margin:0 0 4px !important;
}
.sec.products .nb-vps.nav-tabs .nav-item{margin:0 !important; height:auto !important}
.sec.products .nb-vps.nav-tabs .nav-item[hidden]{display:none !important}
/* `height:auto` y `white-space:normal` no son opcionales: la pestaña
   del tema viene con alto fijo de 54 px y `nowrap`, asi que la linea
   de recursos se salia por debajo de su propia tarjeta. */
.sec.products .nb-vps.nav-tabs .nav-link{
  display:block !important; height:auto !important; min-height:0 !important;
  white-space:normal !important; overflow:visible !important;
  border:1px solid var(--nb-line) !important; border-radius:14px !important;
  background:var(--nb-paper) !important; padding:14px !important;
  margin:0 !important; text-align:left; line-height:1.3 !important;
  transition:border-color 0.16s ease, box-shadow 0.16s ease;
}
.sec.products .nb-vps.nav-tabs .nav-link:hover{border-color:var(--nb-line-2) !important}
.sec.products .nb-vps.nav-tabs .nav-link.active{
  border-color:var(--nb-violet) !important;
  box-shadow:0 0 0 3px rgba(123,92,246,0.14);
}
.sec.products .nb-vps.nav-tabs .nav-link > i{display:none !important}
.sec.products .nb-vps .nb-talla{
  display:block; font-family:var(--nb-ff-d);
  font-size:0.95rem; font-weight:700; color:var(--nb-ink); line-height:1.2;
}
.sec.products .nb-vps .nb-recursos{
  display:block; font-size:12px; color:var(--nb-ink-3);
  margin-top:5px; font-variant-numeric:tabular-nums;
}

@media (max-width:767px){
  .sec.products .nb-familias{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .sec.products .nb-fam{padding:14px}
  .sec.products .nb-vps.nav-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .sec.products .nb-fam,
  .sec.products .nb-vps.nav-tabs .nav-link{transition:none}
}