/* ══ 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}
}

/* ── 2b · las tarjetas de plan de hosting ───────────────────────
   EL «De» SUELTO DESALINEA LA TARJETA. `.regular_pricing` lleva dos
   cosas: la palabra «De» y, cuando hay descuento, el precio tachado.
   En un plan sin descuento se queda el «De» solo, ocupando una linea
   entera que empuja hacia abajo todo lo demas y descuadra la tarjeta
   frente a las de al lado. Sin precio tachado ese renglon no dice
   nada, asi que se va. */
.sec.products .regular_pricing:not(:has(.savecut)){display:none !important}
/* reserva para navegadores sin `:has()`: la clase la pone el JS */
.sec.products .regular_pricing.nb-solo-de{display:none !important}

/* ── 2c · la paginacion del carrusel ────────────────────────────
   Eran tres cuadraditos con borde, ajenos al resto de la pagina.
   Pasan a ser pildoras: las inactivas discretas y la activa alargada
   con el degradado de marca, que es el lenguaje del resto de la web. */
.sec.products .swiper-pagination{margin-top:8px}
.sec.products .swiper-pagination-bullet{
  width:8px !important; height:8px !important;
  border-radius:99px !important; border:0 !important;
  background:var(--nb-line-2) !important; opacity:1 !important;
  margin:0 5px !important;
  transition:width 0.22s ease, background 0.22s ease;
}
.sec.products .swiper-pagination-bullet:hover{background:var(--nb-ink-3) !important}
.sec.products .swiper-pagination-bullet-active{
  width:28px !important; background:var(--nb-grad) !important;
}
.sec.products .swiper-pagination-bullet:focus-visible{
  outline:2px solid var(--nb-violet); outline-offset:3px;
}
/* OCHO PIXELES DE PINTURA, VEINTICUATRO DE DEDO. El punto tiene que ser
   pequeno —es un indicador, no un boton— pero 8x8 es imposible de
   acertar en un movil, y ademas quedaban a 7 px unos de otros: dos
   objetivos a esa distancia son el mismo objetivo. WCAG 2.5.8 pide
   24x24.

   Se agranda el AREA, no el punto: un pseudoelemento centrado de 24x24.
   El margen lateral sube de 5 a 8 px para que las areas de dos puntos
   contiguos no se solapen —8+8+8 = 24 justos entre centros—. */
.sec.products .swiper-pagination-bullet{position:relative; margin:0 8px !important}
.sec.products .swiper-pagination-bullet::after{
  content:""; position:absolute; top:50%; left:50%;
  width:24px; height:24px; transform:translate(-50%, -50%);
}
@media (prefers-reduced-motion:reduce){
  .sec.products .swiper-pagination-bullet{transition: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;
  /* SIN `text-transform:uppercase`. El dato pone "2 vCPU", y la
     unidad se escribe asi: v minuscula y CPU en mayusculas. Poner
     la chapa en mayusculas la convertiria en "2 VCPU", que no es la
     grafia correcta. El resto de chapas del sitio si van en
     mayusculas porque su texto es una etiqueta, no una unidad. */
  letter-spacing:0.09em; 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;
}

/* ── 3b · los planes de una gama corta, con el mismo lenguaje ──
   Las tallas de un VPS conviven con la barra de familias de arriba:
   alli el NEGRO ya lo lleva la familia, y la talla activa solo se
   perfila en violeta para no tener dos cajas negras discutiendo.

   Una gama corta —n8n Start / Pro / Business— no tiene barra encima:
   su pestaña ES la eleccion principal, asi que le toca el negro, el
   mismo que a `.nb-fam[aria-pressed="true"]`. Por eso cuelga de una
   clase aparte y no de `.nb-vps` a secas, que comparten las dos. */
.sec.products .nb-planes.nav-tabs{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sec.products .nb-planes.nav-tabs .nav-link{
  border-radius:16px !important; padding:16px 18px !important;
  transition:transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.sec.products .nb-planes.nav-tabs .nav-link:hover{transform:translateY(-2px)}
.sec.products .nb-planes.nav-tabs .nav-link.active{
  background:var(--nb-night) !important; border-color:transparent !important;
  box-shadow:0 10px 30px -14px rgba(20,17,31,0.5) !important;
}
.sec.products .nb-planes .nb-talla{font-size:1.1rem}
.sec.products .nb-planes .nb-plan-car{
  display:block; font-size:12px; color:var(--nb-ink-3); margin-top:2px;
}
/* Los recursos pasan de linea suelta a chapa, como la de nucleos de
   la familia. SIN `text-transform:uppercase`: lleva la unidad vCPU,
   que se escribe con la v en minuscula. */
.sec.products .nb-planes .nb-recursos{
  display:inline-block; margin-top:10px;
  font-family:var(--nb-ff-d); font-size:10px; font-weight:700;
  letter-spacing:0.09em; 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-planes .nav-link.active .nb-talla{color:#fff}
.sec.products .nb-planes .nav-link.active .nb-plan-car{color:var(--nb-on-2,#B9BEDD)}
.sec.products .nb-planes .nav-link.active .nb-recursos{
  color:#fff; background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18);
}

@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))}
  /* Tres planes en dos columnas dejan uno suelto abajo, descuadrado.
     Apilados se comparan mejor y cada uno gana ancho para su chapa. */
  .sec.products .nb-planes.nav-tabs{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){
  .sec.products .nb-fam,
  .sec.products .nb-vps.nav-tabs .nav-link{transition:none}
}