/* ══ 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}
/* EL HOVER, CON UN FILO QUE DICE CUAL ES. Tiñendo solo el fondo, en
una tabla de seis filas casi iguales el ojo pierde de vista en cual
esta: el lila es tan claro que a media pantalla ya no se distingue.
Un filo de 3 px con el degradado de marca en el borde izquierdo lo
resuelve sin ruido, y ancla la fila al lado por donde se lee.
Va con `box-shadow:inset` y no con `border-left`: un borde real
desplazaria el contenido 3 px cada vez que el raton entra. */
.sec.products .footable.nb-tp tbody tr:hover{
background:var(--nb-paper-2) !important;
box-shadow:inset 3px 0 0 0 var(--nb-violet, #7B5CF6);
}
.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. */
/* EL ICONO, ALINEADO CON SU CABECERA COMO TODO LO DEMAS.
Aqui habia un `padding-left:0` y era el unico de la tabla: las otras
seis celdas llevan los 14 px del `td`, asi que su contenido arranca
justo bajo el texto de su cabecera. Medido: «PROCESADOR» y su dato
empiezan los dos en 278, «RAM» y el suyo en 715, «DISCO DURO» en 809.
La columna del modelo era la excepcion: la cabecera en 128 y el icono
en 110, dieciocho pixeles fuera, colgando por la izquierda de la
unica columna que abre la tabla.
Y con el filo del `:hover` se notaba todavia mas, porque el icono se
le montaba encima en vez de quedar dentro de la fila. */
.sec.products .footable.nb-tp .server-heading{padding-left:14px !important}
/* El `.server-info` traia ademas un desplazamiento propio de 4 px que
lo sacaba del borde del `td`. Se anula: quien manda es la celda. */
.sec.products .footable.nb-tp .server-info{
margin-left:0 !important; transform:none;
}
/* `.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;
}
/* EL ICONO YA NO ES UNA PEGATINA. Llevaba el degradado de marca a
fuego, los seis iguales, uno por fila. Dos cosas iban mal con eso:
Una, que el degradado es el recurso mas fuerte de la web y aqui se
gastaba seis veces seguidas en algo que no dice NADA: las seis filas
llevan el mismo icono de servidor. Lo unico que distingue un modelo
de otro es su nombre, y el nombre competia con un cuadrado de color
que gritaba mas que el.
Y dos, que al pasar el raton la fila se tiñe y el cuadrado se
quedaba igual, plantado encima como una etiqueta pegada. Se veia
que no pertenecia a la fila.
Ahora es una caja tenue del propio violeta —presente, sin gritar— y
ES ELLA LA QUE SE ENCIENDE cuando el raton entra en su fila. Deja de
competir con el nombre y pasa a acompañarlo, y el degradado vuelve a
significar algo: se reserva para el boton, que es la accion. */
.sec.products .footable.nb-tp .server-info > span{
order:1; flex:none;
width:36px !important; height:36px !important;
border-radius:11px;
background:rgba(123,92,246,0.11);
/* EL FILO VA EN `box-shadow` Y NO EN `border`, Y NO ES CAPRICHO.
Con `border:1px` y `border-color:transparent` en el hover, el
borde no desaparece: se vuelve transparente y DEJA VER EL PROPIO
DEGRADADO POR DEBAJO, porque el fondo se pinta bajo el borde
(`background-clip:border-box` es lo que hay por defecto). El
resultado era un halo de colores alrededor del icono, justo lo que
no se queria.
Un `inset box-shadow` dibuja el filo sin ocupar sitio: al quitarlo
en el hover el degradado llena la caja entera y limpia, y ademas
el icono no cambia de tamano entre un estado y otro, que es lo que
habria pasado quitando el borde de verdad. */
box-shadow:inset 0 0 0 1px rgba(123,92,246,0.16);
border:0 !important;
display:grid !important; place-items:center;
transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sec.products .footable.nb-tp .server-info > span i{
color:var(--nb-violet-aa, #5B34D9) !important; font-size:15px !important;
width:auto !important; height:auto !important;
line-height:1 !important; margin:0 !important; opacity:1 !important;
transition:color .2s ease;
}
.sec.products .footable.nb-tp tbody tr:hover .server-info > span{
background:var(--nb-grad);
box-shadow:none;
transform:translateY(-1px);
}
.sec.products .footable.nb-tp tbody tr:hover .server-info > span i{
color:#fff !important;
}
@media (prefers-reduced-motion:reduce){
.sec.products .footable.nb-tp .server-info > span,
.sec.products .footable.nb-tp .server-info > span i{transition:none}
.sec.products .footable.nb-tp tbody tr:hover .server-info > span{transform:none}
}
/* ── 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;
min-width:126px; text-align:center;
padding:10px 20px !important; margin:10px 0 0 !important;
border-radius:10px !important; font-family:var(--nb-ff-d); font-weight:600;
}
/* ── EL PRECIO, QUE ES LO QUE SE VIENE A MIRAR ──────────────────
Estaba escrito con el mismo cuerpo que los demas datos de la fila:
1,2 rem, igual que «64 GB» o «3,6 GHz». En una tabla de compra el
precio no es un dato mas, es EL dato, y aqui llegaba de sexto en
una fila de siete columnas sin nada que lo distinguiera.
Sube a 1,55 rem y a peso 800, con cifras tabulares para que las
seis columnas de euros caigan a plomo una debajo de otra —46,76 /
74,27 / 115,53 / 136,16— y se puedan comparar de un vistazo, que
es exactamente para lo que existe una tabla.
El «De» y el «Mensual» bajan a 11 px: son la letra pequeña que
acompaña, no la cifra. */
.sec.products .footable.nb-tp .product_pricing_single .price .cost{
font-size:1.55rem !important; font-weight:800 !important;
letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
}
.sec.products .footable.nb-tp .product_pricing_single .price .suffix{
font-size:1.02rem !important;
}
.sec.products .footable.nb-tp .product_pricing_single .regular_pricing,
.sec.products .footable.nb-tp .product_pricing_single .regular_pricing .small{
font-size:11px !important; color:var(--nb-ink-3) !important;
}
/* El coste de instalacion, que es una condicion de compra y no un
adorno: se separa de la cifra para que no se lea como parte de
ella, y el «+» toma el color de la marca. */
.sec.products .footable.nb-tp .product_pricing_single .setup-fee{
margin-top:5px !important; line-height:1.35;
}
.sec.products .footable.nb-tp .product_pricing_single .setup-fee i{
color:var(--nb-violet-aa, #5B34D9) !important;
}
/* ── LA COLUMNA DE PRECIO DE LAS NBX, SOLO EN ESCRITORIO ────────
ACOTADO A `min-width:992px` A PROPOSITO, Y ESTO COSTO UNA VUELTA.
La primera version fijaba `width:214px` y `margin-left:auto` sin
media query, asi que esos anchos se colaban tambien en la vista de
tarjetas: en una tarjeta de tablet de 540 px de ancho el pie —
periodo, precio y boton— se encogia a 214 y se quedaba amontonado
contra el borde izquierdo, con medio ancho de tarjeta vacio al lado.
Una medida pensada para una columna de tabla no vale para una
tarjeta: son dos contenedores distintos. */
@media (min-width:992px){
/* EL PERIODO Y LA CIFRA, EN LA MISMA LINEA. Apilados —selector arriba,
precio en medio, boton abajo— la columna medía 165 px de alto para
una fila cuya parte izquierda es UNA linea de texto: «NBX10 · 100GB ·
1TB · ilimitado». El dato quedaba flotando en mitad de un hueco.
Puestos uno al lado del otro, el periodo a la izquierda y la cifra
pegada al borde, la fila baja a unos 120 y el bloque se lee de una
vez: «1 Año — 73,64 €». Que es como se dice en voz alta. */
.sec.products .footable.nb-tp .billing-cycle-pricing{
display:grid !important;
grid-template-columns:auto 1fr;
align-items:center; gap:4px 10px;
width:214px; margin-left:auto !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .btn-group{
grid-column:1; grid-row:1;
margin:0 !important; width:auto;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .product_pricing{
grid-column:2 !important; grid-row:1;
}
/* El desplegable de periodo: es un control secundario —se toca una vez
y se olvida— y ocupaba 42 px de alto, mas que el propio boton de
comprar. Baja a 34 y se queda en gris, para que la cifra que hay
debajo sea lo primero que se ve. */
.sec.products .footable.nb-tp .billing-cycle-pricing .btn-group > .btn{
min-height:34px !important; padding:7px 12px !important;
margin:0 !important; width:100%;
font-size:0.84rem !important; font-weight:600 !important;
border-radius:9px !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .product_pricing{
width:auto !important; margin:0 !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .pricing_main{
text-align:right !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .price{
justify-content:flex-end !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .cycle{
text-align:right !important; font-size:11px; color:var(--nb-ink-3);
}
.sec.products .footable.nb-tp .billing-cycle-pricing + .btn,
.sec.products .footable.nb-tp .server-price > a.btn{
display:block !important; width:214px; margin:10px 0 0 auto !important;
text-align:center;
}
}
/* Y LOS DATOS DE LAS NBX, CON EL PESO QUE LES FALTABA. En la tabla de
servidores cada dato va en un `` y por eso se lee de un vistazo;
en la de NBX el texto va suelto en la celda —«100GB», «1TB»,
«ilimitado»— y quedaba en gris de parrafo, como si fuera una nota al
pie. Es el dato por el que se compara un modelo con otro.
`:has()` distingue las celdas que ya traen su `` de las que no,
sin tener que separar las dos tablas a mano. */
.sec.products .footable.nb-tp tbody td:not(.server-heading):not(.server-price):not(:has(b)){
font-weight:700; color:var(--nb-ink);
}
/* ── LA COLUMNA DEL PRECIO, A PLOMO ─────────────────────────────
`tabular-nums` iguala el ancho de los digitos, pero eso solo sirve
si la caja que los contiene esta alineada. Aqui el bloque iba
centrado, asi que «46,76» y «115,53» —que no miden lo mismo— se
centraban cada uno por su lado y las comas caian en verticales
distintas. Seis precios que no se pueden comparar de un vistazo en
una tabla que existe para comparar precios.
Todo el bloque se alinea a la derecha: la cifra, el «Mensual», el
coste de instalacion y el boton comparten borde. Y ese borde queda
pegado al lado por donde se cierra la fila, que es donde el ojo va
a buscar el total. */
.sec.products .footable.nb-tp .server-price .product_pricing_single{
align-items:flex-end !important;
text-align:right !important;
}
.sec.products .footable.nb-tp .server-price .price{
justify-content:flex-end !important;
}
.sec.products .footable.nb-tp .server-price .setup-fee{
text-align:right !important;
}
/* ── Y LA FILA, MAS APRETADA ────────────────────────────────────
Cada fila media 132 px para unos 60 de contenido: mas de la mitad
era aire. Con seis modelos eso son casi 800 px de tabla, y el que
compara el primero con el ultimo no los ve nunca juntos.
Bajando el relleno la tabla entra de una vez en la pantalla y las
seis filas se leen como un bloque, que es como se compara. */
.sec.products .footable.nb-tp tbody td{
padding:13px 14px !important;
}
.sec.products .footable.nb-tp .server-price .btn{
margin-top:8px !important;
}
/* ── 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: ETIQUETA A LA IZQUIERDA, DATO A LA DERECHA.
Y SIEMPRE EN EL MISMO SITIO, que es lo que antes no pasaba.
Iba con `display:flex` y `justify-content:space-between`, y dentro
del `| ` no hay dos elementos sino TRES: la etiqueta que pone el
`::before`, el `` con el dato y el `` con el matiz. El
`space-between` los repartia por igual, asi que el dato quedaba
flotando EN MEDIO y el matiz pegado a la derecha. Fila a fila el
valor caia en un sitio distinto segun lo largo que fuera su
matiz: «64 GB» a la derecha del todo porque no tiene matiz, «2 TB»
en el centro porque le sigue «2x2 TB SATA». Seis modelos que
comparar y ni una columna donde apoyar la vista.
LA SEGUNDA VERSION, CON REJILLA, TAMBIEN ERA MALA Y POR ESO NO
ESTA AQUI. Ponia el matiz en su propia fila: quedaba ordenado,
pero la tarjeta pasaba de 453 a 572 px —120 mas por modelo, 700
en los seis— y este bloque existe justamente para que la tarjeta
quepa en la pantalla. Ordenar a base de crecer no es ordenar.
Lo que hay ahora saca la etiqueta del flujo y la ancla a la
izquierda; el dato y su matiz fluyen como texto corrido contra el
borde derecho. Cuando caben van en una linea —«2 TB · 2x2 TB
SATA»— y cuando no, el matiz baja solo, sin que haya que
decidirlo de antemano ni medir nada. */
.sec.products .footable.nb-tp td[data-nb-et]{
display:block !important;
position:relative;
padding:9px 0 9px 118px !important;
border-top:1px solid var(--nb-line) !important;
font-size:0.9rem; line-height:1.45;
/* Con `!important` porque el bloque de escritorio declara
`text-align:left !important` sobre el mismo `td`, y sin el la
segunda linea de un matiz largo —«4,4 GHz Boost», «2x8 TB SATA
6 Gb/s Enterprise»— se quedaba pegada a la izquierda mientras la
primera acababa a la derecha. El texto envolvia en escalera. */
text-align:right !important; color:var(--nb-ink); font-weight:500;
min-height:38px;
}
.sec.products .footable.nb-tp td[data-nb-et]::before{
content:attr(data-nb-et);
position:absolute; left:0; top:11px; width:110px;
text-align:left;
font-family:var(--nb-ff-d); font-size:10px; font-weight:700;
letter-spacing:0.1em; text-transform:uppercase;
color:var(--nb-ink-3); line-height:1.4;
}
.sec.products .footable.nb-tp td[data-nb-et] b{
display:inline !important; color:var(--nb-ink); font-weight:700;
/* «512 GB» y «1,92 TB» se partian en dos lineas —«512» arriba y
«GB» debajo—. Una cifra y su unidad son una sola cosa. */
white-space:nowrap;
}
.sec.products .footable.nb-tp td[data-nb-et] small{
display:inline !important; color:var(--nb-ink-3) !important;
font-size:0.82rem; text-align:right !important;
}
/* El punto que separa el dato de su matiz cuando comparten linea.
Sin el se leia «2 TB 2x2 TB SATA», dos cifras seguidas que
parecen una sola. */
.sec.products .footable.nb-tp td[data-nb-et] b ~ small::before{
content:"·"; margin:0 6px; color:var(--nb-line-2, #D8D0EC);
}
/* 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; min-width:0; margin:0 !important;
}
/* EL PIE DE LA TARJETA OCUPA EL ANCHO QUE TIENE.
Y HABIA QUE FORZAR EL ANCHO DE LA CELDA, no solo el reparto de lo
que hay dentro. Medido en tablet: la tarjeta mide 692 px y el
`td` del precio solo 195 —el `width:100%` del bloque general no le
llegaba— asi que el pie entero, la linea divisoria incluida, se
quedaba en el primer tercio con dos tercios de tarjeta en blanco
al lado. En movil si media los 276 que le tocan, y por eso solo se
veia mal en la anchura de en medio.
Con la celda ya a lo ancho, dentro: el periodo y la cifra a la
izquierda —se lee primero cuanto cuesta— y el boton cerrando a la
derecha, que es hacia donde va la mano despues de leer. */
.sec.products .footable.nb-tp tbody tr > td.server-price{
width:100% !important; max-width:none !important; min-width:0 !important;
display:flex !important; flex-wrap:wrap; align-items:center;
justify-content:space-between; gap:12px;
}
.sec.products .footable.nb-tp .billing-cycle-pricing{
display:flex !important; flex-direction:row !important;
align-items:center; justify-content:flex-start;
gap:12px; flex:1 1 auto; width:auto !important; margin:0 !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .btn-group{
margin:0 !important; width:auto !important; flex:none;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .product_pricing{
margin:0 !important; width:auto !important; flex:none;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .pricing_main,
.sec.products .footable.nb-tp .billing-cycle-pricing .cycle{
text-align:left !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing .price{
justify-content:flex-start !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing + .btn,
.sec.products .footable.nb-tp .server-price > a.btn{
width:auto !important; margin:0 !important; flex:none;
}
/* EL PIE, COMO UNA BARRA Y NO COMO UN MONTON. En una tarjeta que se
lee de arriba abajo, el precio y el boton son el final del
recorrido: merecen leerse como una unidad y no como dos restos
apilados. El precio manda a la izquierda —donde cae la vista al
terminar la lista— y el boton cierra a la derecha.
El precio recupera el cuerpo que tiene en escritorio: es la cifra
por la que se ha bajado hasta aqui. */
.sec.products .footable.nb-tp .server-price .product_pricing_single{
align-items:flex-start !important; text-align:left !important;
}
.sec.products .footable.nb-tp .server-price .price{
justify-content:flex-start !important;
}
.sec.products .footable.nb-tp .server-price .setup-fee{
text-align:left !important;
}
.sec.products .footable.nb-tp .product_pricing_single .price .cost{
font-size:1.5rem !important;
}
/* En el movil estrecho el boton pasa a ancho completo: un boton de
126 px flotando a la derecha de una tarjeta de 358 se pulsa peor
que uno que ocupa la linea entera, y es la accion principal. */
/* En el movil estrecho no caben el precio y el boton en la misma
linea, asi que el boton baja. Y si baja, ocupa la linea entera:
un boton de 101 px arrinconado a la izquierda de una tarjeta de
276 se pulsa peor y no parece la accion principal, que lo es. */
@media (max-width:575px){
.sec.products .footable.nb-tp tbody tr > td.server-price{
align-items:stretch !important;
}
.sec.products .footable.nb-tp .billing-cycle-pricing + .btn,
.sec.products .footable.nb-tp .server-price > a.btn{
width:100% !important; text-align:center; flex:1 0 100%;
}
}
}
/* ── 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}
}
|