/* ── nb-cookies ── */ /* ══ Netebu · consentimiento de cookies ════════════════════════ */ .nb-ck{ --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%); --nb-violet:#7B5CF6; --nb-violet-aa:#6B48F2; --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85; --nb-line:#E9E4F3; --nb-line-2:#D8D0EC; --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE; --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif; --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif; } /* ── el aviso ─────────────────────────────────────────────────── */ /* VA ENCIMA DEL BOTON FLOTANTE, NO CENTRADO ABAJO. Los dos son la misma cosa —tu decision sobre las cookies— y asi se ve de donde sale el aviso y adonde vuelve al cerrarlo. Los 80 px de abajo son los 18 del boton, mas sus 48 de alto, mas 14 de aire entre ambos: si se cambia el tamano del boton, hay que rehacer esta cuenta. */ .nb-ck-aviso{ position:fixed; z-index:2147483000; right:18px; bottom:80px; left:auto; margin:0; max-width:420px; background:var(--nb-paper); border:1px solid var(--nb-line); border-radius:18px; box-shadow:0 2px 6px rgba(20,17,31,0.06), 0 26px 60px -22px rgba(20,17,31,0.34); padding:22px 24px 20px; font-family:var(--nb-ff-b); color:var(--nb-ink-2); transform-origin:100% 100%; /* crece desde la esquina del boton */ animation:nb-ck-entra 0.34s cubic-bezier(0.2,0.7,0.3,1) both; } @keyframes nb-ck-entra{from{opacity:0; transform:translateY(12px) scale(0.98)} to{opacity:1; transform:none}} .nb-ck-aviso h2{ margin:0 0 9px !important; padding:0; font-family:var(--nb-ff-d) !important; font-weight:700 !important; font-size:1.18rem !important; line-height:1.3; letter-spacing:-0.018em; color:var(--nb-ink) !important; } .nb-ck-aviso p{ margin:0 0 16px !important; font-size:0.95rem; line-height:1.6; color:var(--nb-ink-2) !important; } .nb-ck-aviso a{color:var(--nb-violet-aa) !important; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(107,72,242,0.4)} /* LOS DOS BOTONES, DEL MISMO TAMANO Y AL MISMO NIVEL. La guia de la AEPD pide que rechazar sea tan facil como aceptar: misma medida, misma jerarquia y ninguno escondido detras de un enlace. */ .nb-ck-botones{display:grid; grid-template-columns:1fr 1fr; gap:10px} .nb-ck-b{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 18px; border-radius:12px; font-family:var(--nb-ff-d); font-weight:600; font-size:0.95rem; cursor:pointer; border:1.5px solid transparent; text-align:center; transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .nb-ck-b:hover{transform:translateY(-1px)} .nb-ck-b--si{ background:var(--nb-grad); color:#fff; background-clip:padding-box; -webkit-background-clip:padding-box; border:0; box-shadow:0 10px 24px -12px rgba(123,92,246,0.6); } .nb-ck-b--no{ background:var(--nb-paper); color:var(--nb-ink); border-color:var(--nb-line-2); } .nb-ck-b--no:hover{border-color:var(--nb-violet)} .nb-ck-b--txt{ grid-column:1 / -1; background:none; border:0; min-height:38px; color:var(--nb-ink-3); font-size:0.9rem; text-decoration:underline; text-underline-offset:3px; } .nb-ck-b--txt:hover{color:var(--nb-violet-aa)} /* ── el botón flotante, que no se va nunca ────────────────────── */ /* Es la forma de retirar el consentimiento en cualquier momento sin tener que buscarlo: la guia lo pide tan accesible como darlo. */ .nb-ck-flotante{ position:fixed; z-index:2147482000; right:18px; bottom:18px; width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--nb-paper); color:var(--nb-violet-aa); border:1px solid var(--nb-line); cursor:pointer; /* Sombra teñida de violeta ya en reposo, igual que el botón de subir de `netebu_subir.php`. Los dos flotan en las esquinas de abajo y se ven a la vez: si uno lleva sombra gris y el otro violeta, se nota. */ box-shadow:0 2px 6px rgba(123,92,246,0.10), 0 14px 30px -14px rgba(123,92,246,0.26); transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; } .nb-ck-flotante:hover{ transform:translateY(-3px); border-color:var(--nb-violet); box-shadow:0 4px 10px rgba(20,17,31,0.1), 0 20px 40px -16px rgba(90,60,200,0.44); } /* EL BADGE DE reCAPTCHA VIVE EN LA MISMA ESQUINA. Google lo fija en `bottom:14px` con 60 px de alto y lo deja colapsado contra el borde derecho (`right:-186px`), justo donde cae este boton: medido, 48x48 px de solape exacto, uno encima del otro. Se sube el NUESTRO, no el suyo: moverle el badge a Google entra en sus condiciones de uso, que exigen que quede visible. Con `:has()` solo se sube donde el badge existe —contacto y abrir ticket—, y en el resto del sitio el boton se queda donde estaba. Si el navegador no soporta `:has()` (Chrome 105-, Safari 15.3-) se queda como hasta ahora, que es el comportamiento de hoy: no rompe nada, simplemente no mejora. */ body:has(.grecaptcha-badge) .nb-ck-flotante{ bottom:88px } .nb-ck-flotante svg{width:21px; height:21px} /* la etiqueta aparece al pasar el ratón, sin ocupar sitio en reposo */ .nb-ck-flotante::after{ content:attr(data-txt); position:absolute; right:58px; white-space:nowrap; background:var(--nb-ink); color:#fff; font-family:var(--nb-ff-d); font-weight:600; font-size:0.8rem; padding:7px 11px; border-radius:9px; opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; } .nb-ck-flotante:hover::after, .nb-ck-flotante:focus-visible::after{opacity:1; transform:none} /* ── el panel de preferencias ─────────────────────────────────── */ .nb-ck-fondo{ position:fixed; inset:0; z-index:2147483100; background:rgba(11,10,22,0.58); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:18px; animation:nb-ck-fade 0.24s ease both; } @keyframes nb-ck-fade{from{opacity:0} to{opacity:1}} .nb-ck-panel{ background:var(--nb-paper); border-radius:20px; border:1px solid var(--nb-line); box-shadow:0 30px 70px -24px rgba(0,0,0,0.5); width:100%; max-width:520px; max-height:86vh; overflow-y:auto; padding:26px 26px 22px; font-family:var(--nb-ff-b); } .nb-ck-panel h2{ margin:0 0 6px !important; font-family:var(--nb-ff-d) !important; font-weight:700 !important; font-size:1.3rem !important; color:var(--nb-ink) !important; letter-spacing:-0.02em; } .nb-ck-panel > p{ margin:0 0 18px !important; font-size:0.94rem; line-height:1.6; color:var(--nb-ink-2) !important; } .nb-ck-cat{ border:1px solid var(--nb-line); border-radius:14px; padding:16px 18px; margin:0 0 11px; background:var(--nb-paper-2); } .nb-ck-cat-cab{display:flex; align-items:center; justify-content:space-between; gap:14px} .nb-ck-cat h3{ margin:0 !important; font-family:var(--nb-ff-d) !important; font-weight:700 !important; font-size:1rem !important; color:var(--nb-ink) !important; } .nb-ck-cat p{ margin:8px 0 0 !important; font-size:0.88rem; line-height:1.55; color:var(--nb-ink-2) !important; } .nb-ck-cat code{ font-size:0.82rem; background:rgba(123,92,246,0.09); color:var(--nb-violet-aa); padding:1px 6px; border-radius:5px; } /* el interruptor */ .nb-ck-sw{position:relative; flex:0 0 auto; width:46px; height:26px} .nb-ck-sw input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2} .nb-ck-sw span{ position:absolute; inset:0; border-radius:999px; background:#D8D0EC; transition:background 0.24s ease; } .nb-ck-sw span::before{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.24); transition:transform 0.24s cubic-bezier(0.2,0.7,0.3,1); } .nb-ck-sw input:checked + span{background:var(--nb-violet)} .nb-ck-sw input:checked + span::before{transform:translateX(20px)} .nb-ck-sw input:focus-visible + span{outline:2px solid var(--nb-violet-aa); outline-offset:2px} .nb-ck-sw input:disabled + span{background:var(--nb-violet); opacity:0.45; cursor:not-allowed} .nb-ck-panel-pie{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px} .nb-ck-panel-pie .nb-ck-b{width:100%} .nb-ck-guardar{grid-column:1 / -1} @media (max-width:520px){ /* 12 del boton + 48 de alto + 12 de aire */ .nb-ck-aviso{ left:12px; right:12px; bottom:72px; max-width:none; padding:16px 16px 14px; } /* EL AVISO OCUPABA EL 44 % DE UN iPHONE: 373 px de 844, medido en un 390x844. Tapaba el titular entero de la portada y dejaba la pagina inservible hasta responderlo, que es justo lo que la guia de la AEPD pide evitar —el aviso informa, no secuestra la pantalla—. De donde salian esos 373 px: tres botones apilados a 58 px cada uno son 174, mas el parrafo a cinco lineas. Se recorta sin quitar ni una palabra ni una opcion. */ /* Rechazar y aceptar, en fila y del MISMO ancho. Ahorra 116 px y ademas deja las dos decisiones a la misma altura y con el mismo tamano, que es como tiene que ser: rechazar no puede costar mas que aceptar. */ .nb-ck-botones{grid-template-columns:1fr 1fr; gap:8px} .nb-ck-botones .nb-ck-b{padding:11px 10px; font-size:0.9rem} /* «Elegir que acepto» no es una tercera decision al mismo nivel: es el camino largo. Ocupa su propia linea, sin caja. */ .nb-ck-botones .nb-ck-b--txt{grid-column:1 / -1; padding:4px 0 0} .nb-ck-aviso h2{font-size:1.06rem !important; margin-bottom:6px !important} .nb-ck-aviso p{font-size:0.9rem; line-height:1.5; margin-bottom:12px !important} .nb-ck-panel-pie{grid-template-columns:1fr} .nb-ck-flotante{right:12px; bottom:12px} } /* Pantallas cortas —un iPhone SE son 667 px, y en horizontal cualquier movil baja de 500—: ahi el aviso no puede pasar de un tercio. */ @media (max-width:520px) and (max-height:700px){ .nb-ck-aviso{padding:14px 14px 12px} .nb-ck-aviso p{font-size:0.86rem; line-height:1.45; margin-bottom:10px !important} } @media (prefers-reduced-motion:reduce){ .nb-ck-aviso, .nb-ck-fondo{animation:none} .nb-ck-b, .nb-ck-flotante, .nb-ck-sw span, .nb-ck-sw span::before{transition:none} .nb-ck-b:hover, .nb-ck-flotante:hover{transform:none} } /* ── nb-pie ── */ /* ══ Netebu · pie ══════════════════════════════════════════════ */ .sec.footer{ --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098; --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%); --nb-night:#0B0A16; --nb-night-2:#141227; --nb-ink:#F2F3FB; --nb-muted:#B9BEDD; --nb-faint:#8E94BC; --nb-line:rgba(255,255,255,0.10); --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif; --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif; background:var(--nb-night); } /* Una sola pieza oscura: antes eran tres franjas, dos de ellas blancas */ .sec.footer .footer-widgets, .sec.footer .footer-widgets.dark, .sec.footer .fcCode, .sec.footer .sfooter{ background:transparent !important; border:0; } .sec.footer .block-footer{ background:var(--nb-night); position:relative; } /* ── Filo superior con el degradado de marca ──────────────────── Mismo tratamiento que la juntura de `netebu_paginas.php`, y por el mismo motivo medido: al 85% este filo salia a #6651CD, luma 94, entre un #010424 por arriba (luma 6, el final del banner de cierre) y un #0B0A15 por abajo (11, el fondo del pie). Quince veces mas brillante que lo de encima. Lo que se ve no es el color, es el escalon de luz. Aqui NO hace falta el fundido que lleva la juntura: arriba 6 y abajo 11 son practicamente el mismo oscuro, asi que no hay escalon entre las dos secciones que coser. Solo sobraba luz en el filo. Al 55% su luminancia baja a unos 62, en linea con la de la juntura, y la mascara horizontal lo apaga en los extremos: deja de ser una raya de borde a borde y pasa a ser un acento centrado. */ .sec.footer .block-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--nb-grad); opacity:0.55; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%); } /* ── titulos de columna ── */ .sec.footer h4, .sec.footer .contacts_box h4{ font-family:var(--nb-ff-d) !important; font-size:1.02rem !important; font-weight:600 !important; color:var(--nb-ink) !important; letter-spacing:-0.01em; margin-bottom:18px !important; padding-bottom:10px; position:relative; border:0 !important; } .sec.footer h4::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; border-radius:2px; background:var(--nb-grad); } /* El tema centra SOLO este titulo, con `.block-footer .footer-widgets .contacts_box h4{text-align:center}`, mientras que los otros cinco quedan a la izquierda. Mi subrayado va a `left:0`, asi que la linea no seguia al texto. En escritorio la columna mide unos 105 px y el desajuste no se apreciaba; en movil ocupa 360 px y la linea se queda en la otra punta. */ .sec.footer .contacts_box h4::after{ left:50%; transform:translateX(-50%); } /* El tema adorna TODO con una barrita amarilla inclinada: mark:after{background-color:#fedc45; position:absolute; top:0; right:-0.1em; width:0.2em; height:1.535em; transform:skew(-7deg,0)} Al del telefono ya se le dio fondo translucido y borde redondeado, asi que el adorno sobra y ademas es el mismo amarillo ajeno a la marca que aparece en el carrito. */ .sec.footer mark::after{content:none !important} /* ── enlaces de las columnas ── */ /* OJO CON LA ESTRUCTURA, que aqui ya costo una correccion: el icono es HERMANO del enlace, no hijo.
  • Hosting WEB
    • Las reglas `li a i` que habia antes no alcanzaban a ni un solo icono del pie: ni el color ni el ancho llegaban a aplicarse. Ademas son dos elementos en linea separados por un espacio, asi que la fila puede partirse por ahi. `fa-code` mide 640 unidades de ancho —el mas ancho de los cuatro del grupo Hosting, frente a las 512 del sobre— y era justo esa fila la que se desencajaba. Con flex el icono no puede separarse del texto y todos ocupan la misma columna, sea cual sea el glifo. */ .sec.footer .navbar-items ul li{ display:flex; align-items:center; gap:9px; margin-bottom:2px; } .sec.footer .navbar-items ul li > i, .sec.footer .navbar-items ul li > .fa, .sec.footer .navbar-items ul li > .fas, .sec.footer .navbar-items ul li > .far, .sec.footer .navbar-items ul li > .fal, .sec.footer .navbar-items ul li > .fab, .sec.footer .navbar-items ul li > .fad, .sec.footer .navbar-items ul li a i{ flex:0 0 18px; width:18px; margin:0 !important; text-align:center; font-size:0.95rem; line-height:1; color:var(--nb-violet) !important; transition:color 0.22s ease; } .sec.footer .navbar-items ul li:hover > i, .sec.footer .navbar-items ul li:hover a i{color:var(--nb-pink) !important} .sec.footer .navbar-items ul li > a{flex:1 1 auto; min-width:0} .sec.footer .navbar-items ul li a, .sec.footer .footer-navbar a{ font-family:var(--nb-ff-b); color:var(--nb-muted) !important; font-size:0.945rem; line-height:1.5; transition:color 0.22s ease, transform 0.22s ease; display:inline-flex; align-items:center; gap:9px; } .sec.footer .navbar-items ul li a:hover, .sec.footer .footer-navbar a:hover{ color:var(--nb-ink) !important; transform:translateX(3px); } /* ── redes sociales: circulares, no cuadradas ── */ .sec.footer .social-icons{display:flex; gap:10px} .sec.footer .btn-social{ width:38px !important; height:38px !important; border-radius:50% !important; background:rgba(255,255,255,0.06) !important; border:1px solid var(--nb-line) !important; transition:background 0.24s ease, border-color 0.24s ease, transform 0.24s ease; } .sec.footer .btn-social:hover{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; border-color:transparent !important; transform:translateY(-2px); } .sec.footer .btn-social .fab, .sec.footer .btn-social .fas, .sec.footer .btn-social i{ color:var(--nb-muted) !important; font-size:16px !important; } .sec.footer .btn-social:hover .fab, .sec.footer .btn-social:hover i{color:#fff !important} /* ── telefono: era un , y Bootstrap los pinta de amarillo ── */ .sec.footer mark, .sec.footer .bigger-110 mark{ background:rgba(255,255,255,0.06) !important; border:1px solid var(--nb-line); color:var(--nb-ink) !important; font-family:var(--nb-ff-d); font-weight:600; font-size:0.98rem; border-radius:10px; padding:9px 15px !important; display:inline-flex; align-items:center; gap:9px; transition:border-color 0.24s ease, background 0.24s ease; } .sec.footer a:hover mark{ border-color:rgba(123,92,246,0.55) !important; background:rgba(123,92,246,0.12) !important; } .sec.footer mark i{color:var(--nb-blue) !important} /* ── ALTURA TACTIL EN MOVIL ────────────────────────────────── MEDIDO a 390 px: el enlace del telefono daba 21 px de alto y "Nosotros" 16. El telefono es el peor caso: en movil ES el boton de llamar. La causa es que el va en linea, asi que su caja es la de la linea de texto y no la de su contenido —el , que si tiene relleno—. Pasa a `inline-flex` y ya mide lo que ocupa. */ @media (max-width:767px){ .sec.footer a.bigger-110{ display:inline-flex; align-items:center; min-height:44px; } .sec.footer .copyright a, .sec.footer .footer-bottom a{ display:inline-flex; align-items:center; min-height:36px; padding:0 2px; } } /* ── boton de contacto: el degradado de marca, no el magenta ── */ .sec.footer .btn-contacts, .sec.footer .btn-contacts.btn-secondary{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; border:0 !important; color:#fff !important; font-family:var(--nb-ff-d); font-weight:600; font-size:0.96rem; border-radius:11px !important; padding:13px 22px !important; box-shadow:0 10px 26px -12px rgba(123,92,246,0.5); transition:transform 0.22s ease, box-shadow 0.22s ease; } .sec.footer .btn-contacts:hover{ transform:translateY(-2px); color:#fff !important; box-shadow:0 16px 32px -14px rgba(123,92,246,0.62); } /* ── nota del IVA: integrada, ya no en una franja blanca ── */ .sec.footer .fcCode{ padding:0; margin-top:34px; border-top:1px solid var(--nb-line); } .sec.footer .fcCode .container{padding-top:20px; padding-bottom:4px} .sec.footer .nb-nota-iva, .sec.footer .fcCode p{ text-align:center; margin:0; font-family:var(--nb-ff-b); font-size:0.865rem; color:var(--nb-faint) !important; } /* ── ultima linea: copyright y enlaces legales ── */ .sec.footer .sfooter{border-top:1px solid var(--nb-line); margin-top:18px} .sec.footer .footer-last{padding:20px 0} .sec.footer .footer-copyright span, .sec.footer .footer-copyright{ font-family:var(--nb-ff-b); font-size:0.865rem; color:var(--nb-faint) !important; } .sec.footer .btn-container ul.nav li a{ font-family:var(--nb-ff-b); font-size:0.865rem; color:var(--nb-muted) !important; padding:0 11px; transition:color 0.22s ease; } .sec.footer .btn-container ul.nav li a:hover{color:var(--nb-ink) !important} /* ── LA ZONA QUE SE PUEDE PULSAR, SIN MOVER EL DISENO ────────── Medido a 390 px: estos enlaces —Nosotros, Politica de Privacidad, Legal, Condiciones Generales— median 16 px de alto, porque su relleno es `0 11px`. WCAG 2.5.8 pide 24x24 como minimo y las guias de Apple recomiendan 44. En un movil eso es fallar el toque y volver a intentarlo. Se agranda el AREA con un pseudoelemento, no con relleno: el relleno estiraria la ultima linea del pie y moveria el copyright. Asi la caja crece hacia fuera sin ocupar sitio en el flujo. `-14px` arriba y abajo lleva los 16 px a 44. `-2px` a los lados es todo lo que se puede dar sin que dos enlaces contiguos se pisen: hay 22 px entre ellos (11 de relleno por lado), asi que 2+2 deja 18 de holgura. */ .sec.footer .btn-container ul.nav li a{position:relative} .sec.footer .btn-container ul.nav li a::after{ content:""; position:absolute; inset:-14px -2px; z-index:1; } /* El boton de subir quedaba a 3 PX del ultimo enlace legal, medido en las catorce paginas. Dos objetivos a esa distancia son el mismo objetivo para un dedo. Se separa. */ @media (max-width:767px){ .sec.footer .back-to-top{margin-top:14px} } /* ── volver arriba ── */ /* Reposo discreto; el degradado entra al pasar el raton y al pulsar. El icono es una mascara SVG que se define en netebu_paginas.php: una flecha con barra encima, como la de webmail.php. */ .sec.footer .back-to-top{ background:rgba(255,255,255,0.06) !important; border:1px solid var(--nb-line) !important; border-radius:50% !important; width:40px; height:40px; display:inline-flex !important; align-items:center; justify-content:center; transition:background 0.24s ease, border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease; } .sec.footer .back-to-top:hover, .sec.footer .back-to-top:focus, .sec.footer .back-to-top:active{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; border-color:transparent !important; transform:translateY(-3px); box-shadow:0 12px 28px -12px rgba(123,92,246,0.7); } .sec.footer .back-to-top i, .sec.footer .back-to-top .fa, .sec.footer .back-to-top .fas{color:var(--nb-muted) !important} .sec.footer .back-to-top:hover i{color:#fff !important} /* ── movil ── */ @media (max-width:991px){ .sec.footer .contacts_box{margin-top:28px} .sec.footer .footer-last{flex-direction:column; gap:14px; text-align:center} .sec.footer .btn-container ul.nav{justify-content:center; flex-wrap:wrap} } @media (prefers-reduced-motion:reduce){ .sec.footer *{transition:none !important} } /* ══ ENLACES RETIRADOS DEL PIE ══════════════════════════════ Programa Amigo y Asesoria Tecnica salen del pie por decision de direccion. POR QUE SE HACE AQUI Y NO EN EL GESTOR DE MENUS: los dos son `mod_adminpanel_cpages` relid=137 y relid=174, y ya se les puso `enabled=0` —sus hermanos visibles tienen `enabled=1`—, pero el pie del tema NO RESPETA ese campo: siguen pintandose. Se comprobo ademas que no era cache (templates_c estaba vacio) ni de nginx. El addon va cifrado con ionCube, asi que no hay forma de tocar su logica. Se ocultan aqui, acotado AL PIE: en el menu superior siguen donde estaban, que no se pidio quitarlos de ahi. Si algun dia el addon respeta `enabled`, este bloque se puede borrar y los enlaces ya no volveran: el 0 esta puesto. */ .sec.footer li:has(> a[href*="programa_amigo"]), .sec.footer li:has(> a[href*="asesoria_tecnica"]), .footer-widgets li:has(> a[href*="programa_amigo"]), .footer-widgets li:has(> a[href*="asesoria_tecnica"]), .block-footer li:has(> a[href*="programa_amigo"]), .block-footer li:has(> a[href*="asesoria_tecnica"]){ display:none !important; } /* respaldo para navegadores sin `:has()`: se oculta el enlace, y el elemento vacio que queda no deja hueco */ .sec.footer a[href*="programa_amigo"], .sec.footer a[href*="asesoria_tecnica"], .footer-widgets a[href*="programa_amigo"], .footer-widgets a[href*="asesoria_tecnica"], .block-footer a[href*="programa_amigo"], .block-footer a[href*="asesoria_tecnica"]{ display:none !important; } /* ══ EL AVISO DE COOKIES ════════════════════════════════════ Lo pinta Cookie Consent (Osano/Insites) con su tema `classic`: fondo azul #5384ED y boton verde #44C769, que no son de la marca. Estructura: .cc-window.cc-floating.cc-type-info.cc-theme-classic span.cc-message + a.cc-link .cc-compliance > a.cc-btn.cc-dismiss SOLO SE CAMBIA EL ASPECTO. Ni el texto ni el comportamiento se tocan: el mensaje esta redactado para cumplir la normativa y el boton sigue siendo el mismo enlace que registra el consentimiento. */ .cc-window.cc-floating, .cc-window.cc-banner{ background:linear-gradient(180deg, rgba(26,22,52,0.95), rgba(13,11,28,0.97)) !important; border:1px solid rgba(255,255,255,0.13) !important; border-radius:18px !important; backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px); box-shadow:0 30px 80px -30px rgba(0,0,0,0.86) !important; color:var(--nb-on, #F2F3FB) !important; font-family:"Figtree",system-ui,-apple-system,sans-serif !important; padding:22px !important; position:fixed; overflow:hidden; } .cc-window.cc-floating{max-width:400px} /* filo de marca arriba, como en las demas islas del sitio */ .cc-window::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%); } .cc-window .cc-message{ color:#B9BEDD !important; font-size:0.9rem !important; line-height:1.62 !important; margin-bottom:14px !important; } .cc-window .cc-link{ color:#A594FF !important; opacity:1 !important; text-decoration:underline; padding:0 !important; font-weight:600; } .cc-window .cc-link:hover{color:#C9B8FF !important} .cc-window .cc-compliance{margin-top:4px} /* el boton de aceptar, con el degradado de marca */ .cc-window .cc-btn, .cc-window .cc-btn.cc-dismiss, .cc-window .cc-btn.cc-allow{ background:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%) !important; background-clip:padding-box; -webkit-background-clip:padding-box; color:#fff !important; border:0 !important; border-radius:11px !important; font-family:"Outfit",system-ui,-apple-system,sans-serif !important; font-weight:700 !important; font-size:0.95rem !important; padding:12px 26px !important; min-width:0; box-shadow:0 12px 30px -12px rgba(123,92,246,0.66); transition:transform 0.2s ease, box-shadow 0.2s ease; } .cc-window .cc-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(123,92,246,0.80); color:#fff !important; text-decoration:none; } /* el boton secundario, cuando lo hay (rechazar / configurar) */ .cc-window .cc-btn.cc-deny, .cc-window .cc-btn.cc-settings{ background:rgba(255,255,255,0.08) !important; border:1px solid rgba(255,255,255,0.16) !important; color:#B9BEDD !important; box-shadow:none !important; } .cc-window .cc-btn.cc-deny:hover, .cc-window .cc-btn.cc-settings:hover{ background:rgba(255,255,255,0.14) !important; color:#fff !important; } .cc-window :focus-visible{outline:2px solid #A594FF !important; outline-offset:2px} @media (max-width:575px){ .cc-window.cc-floating{ max-width:none; left:12px !important; right:12px !important; bottom:12px !important; padding:18px !important; } } @media (prefers-reduced-motion:reduce){ .cc-window .cc-btn{transition:none} .cc-window .cc-btn:hover{transform:none} } /* ── nb-paginas ── */ /* Croster adorna TODO con una barrita amarilla inclinada: mark:after{background-color:#fedc45; position:absolute; right:-0.1em; width:0.2em; height:1.535em; transform:skew(-7deg,0)} Ya se quito del pie; tambien sale en el cuerpo —dos veces en Nosotros—. Es un amarillo ajeno a la marca. */ .sec mark::after{content:none !important} .sec mark{ background:var(--nb-grad-suave) !important; border-radius:5px; padding:0 5px; color:inherit !important; } /* ══ Netebu · bloques del Page Builder ═════════════════════════ */ .sec{ --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098; --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%); --nb-grad-suave:linear-gradient(135deg,rgba(74,144,217,0.16) 0%,rgba(123,92,246,0.16) 50%,rgba(232,64,152,0.16) 100%); --nb-night:#0B0A16; --nb-night-2:#141227; --nb-night-3:#1E1B33; --nb-on:#F2F3FB; --nb-on-2:#B9BEDD; --nb-on-3:#8E94BC; --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85; --nb-line:#E9E4F3; --nb-line-2:#D8D0EC; --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE; --nb-violet-aa:#6B48F2; --nb-ok:#116B47; --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif; --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif; } /* Croster fuerza h1..h4{color:#211b65} sobre el elemento, y una regla directa gana a la herencia. Sin esto los titulos salen azul marino incluso sobre fondo negro. */ .sec h1,.sec h2,.sec h3,.sec h4, .sec .h1,.sec .h2,.sec .h3,.sec .h4{ font-family:var(--nb-ff-d) !important; letter-spacing:-0.024em; text-wrap:balance; } .sec .sec-title{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; letter-spacing:-0.028em; line-height:1.1; } /* El badge superior: mismo aspecto que el de la portada. Croster lo pinta con un marco rectangular; aqui pasa a pildora con punto. */ .sec .sec-caption{ display:inline-flex !important; align-items:center; gap:10px; font-family:var(--nb-ff-d) !important; font-weight:600 !important; font-size:12px !important; letter-spacing:0.14em !important; text-transform:uppercase; line-height:1.3; padding:7px 16px 7px 12px !important; border-radius:100px !important; background:rgba(123,92,246,0.16) !important; border:1px solid rgba(123,92,246,0.42) !important; margin-bottom:22px !important; width:fit-content; } .sec .sec-caption::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--nb-pink); box-shadow:0 0 0 4px rgba(232,64,152,0.22); } /* El texto del caption va dentro de un que Croster pinta con `border:1px solid var(--white)`: ese es el rectangulo blanco que se veia DENTRO de la pildora. Se le quita el marco y el relleno. */ .sec .sec-caption span{ border:0 !important; padding:0 !important; display:inline !important; background:transparent !important; color:#CFC0FF !important; letter-spacing:inherit; } /* Croster mete
    dentro del caption en algunas paginas. Ocultarlos a secas juntaba las palabras ("TU EMPRESANO PUEDE SER"), asi que se sustituyen por un espacio en vez de eliminarlos. */ .sec .sec-caption br{content:" "; display:inline} .sec .sec-caption br::after{content:" "; white-space:pre} /* Un caption muy largo no cabe en una linea: que envuelva con gracia. Y que envuelva el TEXTO, no la pildora. El caption es un flex con dos hijos: el punto rosa del `::before` y el . Con `flex-wrap:wrap`, cuando el texto no cabe no parte por dentro: se va entero a una segunda linea DEL FLEX y deja el punto solo arriba a la izquierda, descolgado. Se veia en movil en «PROFESIONAL, FACIL Y RAPIDOS...». Con `nowrap` el punto y el texto siguen siendo la misma fila, el parte por dentro en dos lineas y `align-items:center` deja el punto a media altura del bloque. Medido a 390 px: el texto pasa de empezar 25 px por debajo del borde a 8, y la pildora baja de 62 a 45 px de alto. */ .sec .sec-caption{max-width:100%; flex-wrap:nowrap} @media (max-width:640px){ .sec .sec-caption{ flex-wrap:nowrap; font-size:11px !important; letter-spacing:0.1em !important; } } .sec .sec-description,.sec .sec-subtitle{ font-family:var(--nb-ff-b) !important; font-weight:400 !important; } /* ══ BANNERS (hero y llamadas a la accion) ══ */ .sec.site-banner{background:var(--nb-night) !important; position:relative} .sec.site-banner::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(1100px 440px at 16% -12%, rgba(74,144,217,0.22), transparent 62%), radial-gradient(900px 400px at 84% 8%, rgba(232,64,152,0.16), transparent 60%); } .sec.site-banner .banner-content-container, .sec.site-banner .banner_content{position:relative; z-index:2} .sec.site-banner .sec-caption{color:#CFC0FF !important} .sec.site-banner .sec-title, .sec.site-banner h1,.sec.site-banner .h1, .sec.site-banner h2,.sec.site-banner .h2{ color:var(--nb-on) !important; font-size:clamp(2rem,4.4vw,3.2rem) !important; font-weight:800 !important; } .sec.site-banner .sec-subtitle, .sec.site-banner .banner_body, .sec.site-banner .banner_body p, .sec.site-banner .banner_body li{color:#CFC9E0 !important} .sec.site-banner .banner_body b, .sec.site-banner .banner_body strong{color:var(--nb-on) !important} /* ── altura del hero ────────────────────────────────────── El tema lo deja en 576 px FIJOS. A 1920 de ancho eso da una proporcion de 3,33 frente al 1,78 de las ilustraciones, y como el fondo va con `background-size:cover`, se recortaba casi la mitad de la imagen por arriba y por abajo. Con una altura que crece con el ancho se ve bastante mas: a 1920 pasa de 576 a unos 730 px. El `clamp` pone suelo y techo para que ni se aplaste en portatiles ni se coma la pantalla en un monitor grande. */ .sec.site-banner, .sec.site-banner .banner_body{ min-height:clamp(540px, 38vw, 800px) !important; height:auto !important; } /* el contenido, centrado en esa altura */ .sec.site-banner .banner_body{ display:flex !important; flex-direction:column; justify-content:center; } @media (max-width:767px){ .sec.site-banner, .sec.site-banner .banner_body{min-height:clamp(420px, 78vw, 560px) !important} } /* ── el badge, por debajo de la barra en movil ────────────── La barra flota (`position:fixed`) y ocupa hasta los 90 px. El contenido del hero iba centrado, asi que su borde superior depende de lo alto que sea: medido a 390x844, el badge arrancaba en el pixel 63 y quedaba 27 px POR DEBAJO del arranque de la barra, tapado. Y centrado no se arregla con un numero: cuanto mas largo el texto, mas sube el borde y mas se mete. Anclandolo arriba, el badge queda siempre a la misma distancia del borde —112 px de relleno, badge en el 115, 25 px de aire bajo la barra— y lo que crezca empuja hacia ABAJO, que es donde sobra sitio. Hasta 991 px y no 767: el menu es `navbar-expand-lg`, o sea que la barra sigue en version movil hasta ese ancho. */ @media (max-width:991px){ .sec.site-banner .banner_body{ justify-content:flex-start !important; padding-top:112px !important; } } /* ── que el texto del hero se lea sobre la ilustracion ────── MEDIDO, no supuesto. Bajo cada linea de texto la luminancia MEDIANA de la imagen es 0,002-0,013 —practicamente negro—, pero el PEOR punto de la linea llega a 0,99: las estelas de neon cruzan por debajo de las letras. Ahi el contraste cae a 1,07:1 cuando el minimo AA es 4,5. Oscurecer no lo arregla. Simulado un degradado lateral hasta con un 95% de negro: el peor punto se queda en 0,66 y el contraste en 1,48, porque los puntos calientes caen a mitad de la caja de texto, donde el degradado ya casi no actua. Y el velo del tema tampoco lo arreglaba: dejaba esas mismas letras en 2:1. La sombra si, y ademas no toca la imagen: viaja con el texto, cae justo donde hace falta y no roba ni un punto de luz a la ilustracion. Sobre las demas, cuyo fondo bajo el texto ya es negro, no se ve. Se aplica a todos los heros a proposito: la proxima ilustracion que entre puede traer un punto claro donde menos conviene, y asi ya esta cubierta. */ .sec.site-banner .sec-caption, .sec.site-banner .banner_content h1, .sec.site-banner .banner_content h2, .sec.site-banner .banner_body li, .sec.site-banner .banner_body p{ text-shadow:0 1px 2px rgba(11,10,22,0.95), 0 2px 16px rgba(11,10,22,0.9), 0 0 42px rgba(11,10,22,0.8); } .sec.site-banner .banner_body ul{list-style:none; padding-left:0} .sec.site-banner .banner_body li{ list-style:none !important; display:block !important; position:relative; padding-left:26px; margin-bottom:9px; line-height:1.6; } .sec.site-banner .banner_body li::marker{content:"" !important} .sec.site-banner .banner_body li::before{ content:""; position:absolute; left:2px; top:0.62em; width:7px; height:7px; border-radius:50%; background:var(--nb-grad); } /* ══ BOTONES ══ */ .sec .btn-primary, .sec .btn.btn-primary, .sec .btn-xlg{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; border:0 !important; color:#fff !important; font-family:var(--nb-ff-d) !important; font-weight:600 !important; border-radius:11px !important; padding:13px 26px !important; box-shadow:0 10px 26px -12px rgba(123,92,246,0.52); transition:transform 0.22s ease, box-shadow 0.22s ease; } .sec .btn-primary:hover,.sec .btn-xlg:hover{ transform:translateY(-2px); color:#fff !important; box-shadow:0 16px 32px -14px rgba(123,92,246,0.64); } /* ══ TABLA DE PLANES — el bloque nativo, con sus precios de WHMCS ══ */ .sec.products{background:var(--nb-paper-2) !important} .sec.products.light{background:var(--nb-paper-2) !important} .sec.products .sec-title{color:var(--nb-ink) !important} .sec.products .sec-description{color:var(--nb-ink-2) !important} /* OJO con las dos clases, que se parecen y NO son lo mismo: .cros-pricing-table es la TARJETA del plan .pricing_main es solo la CAJITA del precio, dentro Tratar la segunda como tarjeta dejaba el texto "Mensual" pegado al borde y cortado. */ .sec.products .cros-pricing-table{ background:var(--nb-paper) !important; border:1px solid var(--nb-line) !important; border-radius:16px !important; padding:26px 24px !important; box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 12px 32px -16px rgba(20,17,31,0.14); transition:transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease; } .sec.products .cros-pricing-table:hover{ transform:translateY(-5px); border-color:var(--nb-line-2) !important; box-shadow:0 2px 4px rgba(20,17,31,0.06), 0 26px 56px -22px rgba(90,60,200,0.32); } /* LA SOMBRA DEL HOVER SE CORTABA POR ABAJO. Estas tarjetas viven dentro de un `.swiper`, y Swiper necesita su `overflow:hidden` para tapar las diapositivas siguientes — medido: el wrapper mide 2.097 px contra 1.258 visibles, o sea que aqui SI es un carrusel de verdad y ese recorte no se puede quitar. Tampoco vale `overflow-x:hidden` con `overflow-y:visible`: cuando uno de los dos ejes es `hidden`, el navegador convierte el `visible` del otro en `auto` y aparece una barra de scroll. La via que queda es hacerle sitio a la sombra DENTRO del area recortada: relleno abajo para que quepa, y margen negativo del mismo valor para que no altere el flujo ni separe la seccion siguiente. La sombra baja unos 32 px (26 de desplazamiento mas 56 de difuminado menos 22 de extension); 44 dan margen. Arriba basta con los 5 px que sube la tarjeta mas un poco de aire. */ .sec.products .swiper, .sec.products .swiper-container{ padding-top:10px !important; padding-bottom:44px !important; margin-top:-10px !important; margin-bottom:-44px !important; } .sec.products .cros-pricing-table h4{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; color:var(--nb-ink) !important; font-size:1.28rem !important; margin-bottom:16px !important; } /* la cajita del precio */ .sec.products .product_pricing{margin:4px 0 18px} .sec.products .pricing_main{ background:var(--nb-paper-2) !important; border:1px solid var(--nb-line) !important; border-radius:12px !important; padding:14px 18px 12px !important; } .sec.products .pricing_main .price{ display:flex; align-items:baseline; gap:3px; line-height:1; } .sec.products .pricing_main .cycle{margin-top:6px} /* el precio */ .sec.products .price, .sec.products .cost, .sec.products .product_pricing, .sec.products .regular_pricing{ font-family:var(--nb-ff-d) !important; font-weight:800 !important; color:var(--nb-ink) !important; font-variant-numeric:tabular-nums; letter-spacing:-0.03em; } .sec.products .cycle{ font-family:var(--nb-ff-b) !important; font-weight:400 !important; color:var(--nb-ink-3) !important; letter-spacing:0; font-size:0.85rem; padding:0; margin:0; white-space:nowrap; } .sec.products .suffix{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; color:var(--nb-ink-2) !important; font-size:1.1rem; } /* lista de caracteristicas */ .sec.products .plan-features{ border-top:1px solid var(--nb-line); padding-top:18px; margin-top:4px; } .sec.products .plan-features li, .sec.products .plan-features p{ font-family:var(--nb-ff-b); font-size:0.94rem; color:var(--nb-ink-2); padding:6px 0; line-height:1.55; } .sec.products .plan-features .fa-check, .sec.products .plan-features .fas.fa-check{color:var(--nb-ok) !important} .sec.products .plan-features .fa-times{color:var(--nb-line-2) !important} /* selector de ciclo de facturacion */ .sec.products .billing-cycle-pricing .btn, .sec.products .PriceList-toggle .btn{ font-family:var(--nb-ff-d) !important; font-weight:600 !important; border-radius:9px !important; font-size:0.9rem; } .sec.products .badge-primary, .sec.products .save_t{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; color:#fff !important; font-family:var(--nb-ff-d); font-weight:700; font-size:10.5px; letter-spacing:0.06em; border-radius:20px; padding:3px 10px; } /* ══ SELECTOR DE VPS (bloque ProductPriceListTwo) ══ Estructura de Croster: .cros-pricing-table > .cros-tabsbar > ul.nav-tabs > li > a.nav-link > .tab-content > .tab-pane > .plan-specs > .row > .col-md-2 > .description > h5 + h2 > .col-md-2 (precio) > .pricing > .cost + .suffix > a.order-now.bg-primary Los precios los inyecta WHMCS desde los productos de SolusVM, asi que aqui NO se toca ni un numero: solo el aspecto. */ .sec.products .pricing-box{background:transparent !important; border:0 !important} .sec.products .cros-pricing-table.no-animation{ padding:22px !important; overflow:visible; } .sec.products .cros-pricing-table.no-animation:hover{transform:none} /* ── pestañas de plan ── */ .sec.products .cros-tabsbar{ border:0 !important; background:transparent !important; margin-bottom:20px; } .sec.products .cros-tabsbar .nav-tabs{ border:0 !important; display:flex; flex-wrap:wrap; gap:7px; } .sec.products .cros-tabsbar .nav-item{margin:0 !important; border:0 !important} .sec.products .cros-tabsbar .nav-link{ border:1px solid var(--nb-line-2) !important; border-radius:10px !important; background:var(--nb-paper) !important; color:var(--nb-ink-2) !important; font-family:var(--nb-ff-d) !important; font-weight:600 !important; font-size:0.855rem !important; padding:8px 14px !important; margin:0 !important; white-space:nowrap; transition:border-color 0.22s ease, color 0.22s ease, transform 0.22s ease; } .sec.products .cros-tabsbar .nav-link:hover{ border-color:var(--nb-violet) !important; color:var(--nb-violet-aa) !important; transform:translateY(-1px); } .sec.products .cros-tabsbar .nav-link.active{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; border-color:transparent !important; color:#fff !important; box-shadow:0 8px 20px -10px rgba(123,92,246,0.62); } .sec.products .cros-tabsbar .nav-link i, .sec.products .cros-tabsbar .nav-link .fad{display:none} /* la flecha que Croster dibuja bajo la pestaña activa sobra */ .sec.products .cros-tabsbar.arrow .nav-link.active::after, .sec.products .cros-tabsbar.arrow .nav-link.active::before{display:none !important} /* ── fila de caracteristicas del plan ── */ .sec.products .plan-specs{ background:var(--nb-paper-2) !important; border:1px solid var(--nb-line) !important; border-radius:14px !important; overflow:hidden; padding:0 !important; } .sec.products .plan-specs .row{margin:0 !important; align-items:stretch} /* AQUI HABIA UN `border-right` Y SOBRABA. EL FALLO DE LAS RAYAS SUELTAS. El tema ya dibuja el separador de cada columna, en la propia celda: `.tab-pane .plan-specs [class*='col-']{border-width:1px 1px 1px 0}`. Poner otro en `.description` pintaba DOS rayas por columna, y la segunda no caia en el borde: la celda es `flex; justify-content:center`, asi que `.description` se encoge al ancho de SU TEXTO y arrastra el borde con ella. Como cada dato mide distinto —«2 vCPU» corto, «40 GB SSD» largo—, las rayas caian a distancias distintas y parecian columnas vacias. Medido: la celda de RAM va de 447 a 648 y su raya fantasma estaba en 595, a 53 px del borde. Se quita. El separador es el de la celda, que si llega de arriba abajo y esta donde tiene que estar. */ .sec.products .plan-specs .description{ padding:20px 18px; height:100%; } /* EL GRIS TERCIARIO NO LLEGA SOBRE EL PANEL, Y NO ES CULPA DEL GRIS. `--nb-ink-3` (#726C85) da 5,00:1 sobre blanco: cumple de sobra. Pero el panel de caracteristicas no es blanco, es #EDF0F5, y ahi el mismo color cae a 4,38:1 — por debajo del 4,5 que exige la norma para texto de este cuerpo. Medido en las tres anchuras. Por eso no se toca la variable: son 84 usos en once ficheros y en casi todos va sobre blanco, donde funciona. Se oscurece SOLO aqui, un tono del mismo gris violaceo, que sube a 5,92:1. La diferencia a ojo es casi nula; la que se nota es la de poder leerlo. */ .sec.products .plan-specs h5{ font-family:var(--nb-ff-b) !important; font-size:0.79rem !important; font-weight:500 !important; letter-spacing:0.05em; text-transform:uppercase; color:#5D5872 !important; margin:0 0 7px !important; display:flex; align-items:center; gap:7px; } .sec.products .plan-specs h5 i{color:var(--nb-violet-aa) !important; font-size:14px} .sec.products .plan-specs h2{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; font-size:1.32rem !important; color:var(--nb-ink) !important; margin:0 !important; letter-spacing:-0.022em; line-height:1.15; } /* la columna del precio */ /* La celda del precio tampoco pinta su propio borde. Lo hacia con `--nb-line` (#E9E4F3, lila) mientras las demas usan el #D5DCE5 gris que pone el tema: la ultima raya del panel salia de otro tono que las cuatro anteriores. Se nota poco y se ve mal, que es la peor combinacion. */ .sec.products .plan-specs .flex-column{ padding:20px 18px; display:flex; flex-direction:column; justify-content:center; } .sec.products .plan-specs .pricing{display:flex; align-items:baseline; gap:3px; line-height:1} .sec.products .plan-specs .cost{ font-family:var(--nb-ff-d) !important; font-weight:800 !important; font-size:1.72rem !important; color:var(--nb-ink) !important; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; } .sec.products .plan-specs .suffix{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; color:var(--nb-ink-2) !important; font-size:1.02rem !important; } /* ── el boton de configurar ── */ .sec.products .order-now, .sec.products a.order-now.bg-primary{ background:var(--nb-grad) !important; background-clip:padding-box; -webkit-background-clip:padding-box; border:0 !important; color:#fff !important; font-family:var(--nb-ff-d) !important; font-weight:600 !important; font-size:1rem; display:flex !important; align-items:center; justify-content:center; text-align:center; transition:filter 0.22s ease; } .sec.products .order-now:hover{color:#fff !important; filter:brightness(1.08)} /* Croster le dibuja un pico lateral que aqui sobra */ .sec.products .order-now::before, .sec.products .order-now::after{display:none !important} /* ── el aviso de abajo, con su amarillo de Bootstrap ── */ .sec.products .block-s3{padding:16px 4px 4px} .sec.products .block-s3 p{ font-family:var(--nb-ff-b); font-size:0.925rem; color:var(--nb-ink-2) !important; margin:0; } .sec.products .block-s3 mark{ background:var(--nb-grad-suave) !important; border:1px solid rgba(123,92,246,0.32); color:var(--nb-ink) !important; font-family:var(--nb-ff-d); font-weight:700; padding:2px 10px !important; border-radius:20px; font-size:0.85rem; } /* HASTA 991 px, NO 767. Medido en seis anchuras: con las seis columnas en fila, la etiqueta «ALMACENAMIENTO» se sale de su celda 35 px a 768 px y 19 px a 992 px, y lo que se ve es la palabra cortada con su icono metido dentro de la columna de RAM. A partir de 1200 cabe. La tablet vertical entra por tanto en la rejilla de dos por dos, que es la misma solucion que ya funcionaba en el movil. */ @media (max-width:991px){ /* CUATRO DATOS APILADOS SE COMEN UNA PANTALLA ENTERA. Medido en un movil de 390 px: el panel media 842 px de alto para decir procesador, RAM, disco y trafico. Puestos de dos en dos se leen igual, se COMPARAN mejor —el ojo los ve juntos— y bajan a la mitad. El precio y el boton siguen a ancho completo: son la accion, y una accion no se parte en dos columnas. */ .sec.products .plan-specs .row{ display:grid !important; grid-template-columns:1fr 1fr; } /* Y HAY QUE SOLTAR LAS CELDAS DE BOOTSTRAP, O LA REJILLA NO SIRVE. `col-md-2` empieza a aplicar justo en 768 y trae `flex:0 0 16.666%` con `max-width:16.666%`. Dentro de una rejilla eso no desaparece: cada celda ocupaba un sexto de su columna y el panel quedaba descuadrado, con las etiquetas saliendose por la izquierda y el precio metido en una franja estrecha. Por debajo de 768 no se veia porque `col-md-*` no aplica ahi: por eso el movil iba bien y la tablet no. */ .sec.products .plan-specs .row > [class*="col-"]{ flex:none !important; max-width:none !important; width:auto !important; } .sec.products .plan-specs .row > .flex-column, .sec.products .plan-specs .row > .order-now{grid-column:1 / -1} .sec.products .plan-specs .description{padding:15px 14px} /* Y SE QUITA EL AIRE MUERTO. El tema le pone `min-height:117px` a cada celda para cuadrar la fila de escritorio; aqui, apiladas, eso son 68 px vacios POR CELDA sobre 49 px de contenido. En un movil de 390 el panel acababa midiendo 441 px: media pantalla para decir cuatro cifras, y la mitad de ella en blanco. Con el alto que pide el contenido baja a unos 300 y el precio entra en la misma vista que los datos, que es de lo que va todo esto. */ .sec.products .plan-specs .row > .col-md-2{ min-height:0 !important; height:auto !important; } /* En la rejilla de dos columnas los separadores tambien van en la CELDA, por lo mismo que arriba: `.description` no ocupa el ancho de su celda y su borde acaba donde acaba el texto. Los datos son los cuatro primeros hijos, asi que los de la columna izquierda son los impares: ahi va la linea vertical. La horizontal, en todos menos en el ultimo, que ya cierra el panel. */ .sec.products .plan-specs .row > .col-md-2{ border-width:0 0 1px 0 !important; } .sec.products .plan-specs .row > .col-md-2:nth-child(odd){ border-right-width:1px !important; } .sec.products .plan-specs .row > .flex-column{ border-width:0 0 1px 0 !important; } /* El precio, en linea en vez de en columna: son tres palabras. `min-height:0` porque el tema le pone el alto de las celdas de datos —117 px— para una sola linea de texto, y sobraba medio hueco vacio debajo de la cifra. */ .sec.products .plan-specs .flex-column{ flex-direction:row !important; align-items:baseline; gap:8px; justify-content:center; padding:16px !important; min-height:0 !important; height:auto !important; flex-wrap:wrap; } /* Lo mismo con el boton: heredaba `min-height:117px` y con su relleno acababa en 145 px de degradado. Una banda de ese tamaño no se lee como un boton, se lee como una seccion. */ /* Y EL CULPABLE DE LOS 147 PX ERA `line-height:113px`. Croster se lo pone para centrar el texto a mano dentro de la celda alta de escritorio. Aqui el boton ya es flex con `align-items:center`, asi que ese interlineado solo aporta relleno. Quitar el `min-height` sin quitar esto no cambiaba nada. */ .sec.products .order-now{ padding:17px 16px !important; border-radius:0 0 13px 13px; min-height:0 !important; height:auto !important; line-height:1.25 !important; } .sec.products .cros-tabsbar .nav-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; } } /* LA FRANJA DE 992 A 1199: la fila de seis columnas ya cabe, pero la etiqueta larga se sale 19 px. En vez de romper la fila —que a esa anchura se ve bien— se aprieta la etiqueta lo justo: un punto menos de cuerpo y casi sin espaciado entre letras. El dato grande, que es lo que se lee, no se toca. */ @media (min-width:992px) and (max-width:1199px){ .sec.products .plan-specs h5{ font-size:0.70rem !important; letter-spacing:0.02em; gap:5px; } .sec.products .plan-specs h5 i{font-size:12px} .sec.products .plan-specs .description{padding:20px 10px} /* Y EL DATO NO SE PARTE. Con la etiqueta ya apretada, el que no cabia era «40 GB SSD»: se iba a dos lineas, la fila entera crecia de 117 a 140 px para acompanarlo y las otras cinco columnas se quedaban con un hueco vacio debajo. Un punto menos de cuerpo y prohibido romper: entra en una linea y la fila vuelve a su alto. */ /* EL DATO NO ES UN `

    `. ES UN `
    `. Por eso la primera version de esta regla —escrita contra `h2`— no aplico nunca: `document.querySelectorAll('.plan-specs h2')` devuelve CERO en toda la pagina. El tema usa la clase de Bootstrap para heredar el estilo del titular sin meter un encabezado en el arbol, que ademas es lo correcto: «40 GB SSD» es un dato, no un titulo. Y el que no cupiera no era opinable: entre 992 y 1199 la celda mide 147 px, quedan 127 descontando el relleno, y «40 GB SSD» a los 28 px que traia ocupa mas. Se partia en dos lineas, la fila crecia de 117 a 140 para acompanarlo y las otras cinco columnas se quedaban con un hueco muerto debajo. A 20 px ocupa unos 93 px y entra con margen. Se prohibe romper por si algun plan trae un dato mas largo: «160 GB NVMe», el peor caso, son 113 px y tambien cabe. */ .sec.products .plan-specs .description .h2, .sec.products .plan-specs .description h2{ font-size:1.25rem !important; white-space:nowrap !important; line-height:1.2 !important; } } /* ══ LA CINTA DE EXTENSIONES DE `dominios.php` ═══════════════════ Es un Swiper de quince extensiones dentro de una caja de 354 px: novecientos pixeles de contenido de los que se ven trescientos. Dos fallos, los dos visibles solo mirando la captura. UNO. El primer recuadro se cortaba por la izquierda. La medicion decia que no —empieza en 15, y la caja empieza en 15— y la medicion se equivocaba: lo que empieza en 15 es la CAJA del elemento, pero su borde se pinta encima de esa linea y el `overflow:hidden` del Swiper se lo comia. En pantalla se veia un rectangulo morado sin lado izquierdo. Cuatro pixeles de relleno lo resuelven. DOS. Trece extensiones de quince quedan fuera y nada lo dice: ni una flecha, ni un punto, ni una sombra. El que llega ve dos precios y se va convencido de que eso es todo lo que hay. Un desvanecido en el borde derecho lo cuenta sin ocupar sitio ni pedir un solo byte de JavaScript: donde el contenido se difumina, el ojo entiende que sigue. Y el cursor de arrastre invita a hacerlo en escritorio, que es donde no hay dedo que deslice. */ #banner-tlds-1, [id^="banner-tlds"]{ padding-left:4px !important; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 56px), transparent 100%); cursor:grab; } #banner-tlds-1:active, [id^="banner-tlds"]:active{cursor:grabbing} /* Sin la mascara cuando cabe entero: difuminar el final de algo que ya se ve completo solo confunde. */ @media (min-width:1600px){ #banner-tlds-1, [id^="banner-tlds"]{ -webkit-mask-image:none; mask-image:none; } } /* ══ TABLA DE SERVIDORES DEDICADOS (bloque DedicatedServerList) ══ Croster pinta `.server-info{background:#1a1a1a;color:#fff}` y dentro mete un

    . Como el tema declara `h1..h4{color:#211b65}` DIRECTO sobre el elemento, esa regla gana a la herencia del padre y el nombre del modelo salia oscuro sobre fondo oscuro. Hay que darle el color explicitamente, no confiar en que lo herede. Los datos y los precios los inyecta WHMCS: aqui solo el aspecto. */ .sec.products .table-product-details td{ border:0 !important; border-bottom:1px solid var(--nb-line) !important; padding:18px 14px !important; vertical-align:middle; font-family:var(--nb-ff-b); color:var(--nb-ink-2); font-size:0.95rem; background:transparent !important; } .sec.products .table-product-details:hover td{background:var(--nb-paper-2) !important} .sec.products .table-product-details td b{ font-family:var(--nb-ff-d); font-weight:700; color:var(--nb-ink); font-size:1.05rem; display:block; } .sec.products .table-product-details td small{ display:block; color:var(--nb-ink-3); font-size:0.8rem; margin-top:2px; } .sec.products .footable thead th{ font-family:var(--nb-ff-d) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:0.08em; text-transform:uppercase; color:var(--nb-ink-3) !important; border:0 !important; border-bottom:1px solid var(--nb-line) !important; padding:14px !important; background:transparent !important; white-space:nowrap; } /* la chapa con el nombre del modelo */ .sec.products .server-heading{padding:18px 14px 18px 0 !important} .sec.products .server-info{ background:var(--nb-night) !important; border-radius:12px !important; padding:16px 18px !important; min-width:132px; border:1px solid rgba(255,255,255,0.10); } .sec.products .server-info h4, .sec.products .server-info .h4{ color:#F2F3FB !important; font-family:var(--nb-ff-d) !important; font-weight:700 !important; font-size:1.08rem !important; margin:0 !important; letter-spacing:-0.015em; } .sec.products .server-info i, .sec.products .server-info .fad{color:#8FA8D8 !important; font-size:18px} /* la columna del precio */ .sec.products .server-price{min-width:200px} .sec.products .server-price .price{ display:flex; align-items:baseline; justify-content:center; gap:3px; } .sec.products .server-price .cost{ font-family:var(--nb-ff-d) !important; font-weight:800 !important; font-size:1.6rem !important; color:var(--nb-ink) !important; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; } .sec.products .server-price .suffix{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; color:var(--nb-ink-2) !important; font-size:1rem !important; } .sec.products .server-price .cycle{ display:block; text-align:center; font-size:0.82rem; color:var(--nb-ink-3); } .sec.products .setup-fee{ text-align:center !important; font-family:var(--nb-ff-b); font-size:0.8rem; color:var(--nb-ink-3); margin:6px 0 12px; } .sec.products .heading-desc h4{ font-family:var(--nb-ff-d) !important; font-weight:700 !important; color:var(--nb-ink) !important; font-size:1.32rem !important; } .sec.products .heading-desc p{ font-family:var(--nb-ff-b); color:var(--nb-ink-2) !important; } @media (max-width:991px){ .sec.products .table-product-details td{padding:14px 10px !important} .sec.products .server-info{min-width:0; padding:12px 14px !important} } /* ══ ICONOS QUE FONT AWESOME NO PINTA ═══════════════════════════ La instalacion trae Font Awesome Pro 5.10.1 y los cinco ficheros de fuente responden 200, pero **FA Pro 5 no incluye todos los iconos en todos los pesos**: `fa-microchip` no existe en Regular (peso 400) ni `fa-arrow-alt-to-top` en el peso que usa el tema, y el navegador dibuja el cuadrito de glifo ausente. En vez de pelearse con los pesos, se tapa el glifo y se pinta un SVG propio con `mask`, que toma el color de `currentColor`. Asi no depende de que la fuente traiga o no el icono. ══════════════════════════════════════════════════════════════ */ .nb-ico{ display:inline-block; width:15px; height:15px; vertical-align:-2px; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } /* procesador, en la fila de caracteristicas del VPS */ .sec.products .plan-specs h5 .fa-microchip{ /* OJO: `font-size:0` esconde el glifo roto, pero tambien deja las unidades em a cero. El tamaño va en pixeles a proposito. */ font-size:0 !important; width:15px !important; height:15px !important; display:inline-block; flex:none; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2.5'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3'/%3E%3C/svg%3E") no-repeat center/contain; } /* volver arriba, en el pie */ /* Aqui habia una mascara SVG con una flecha de TRAZO. El resultado no era el mismo que en webmail.php, donde se ve el glifo de FontAwesome `fa-arrow-alt-to-top`: una flecha SOLIDA con barra encima. Imitar un glifo con un trazo nunca da lo mismo, asi que se usa el mismo glifo en los dos sitios y se acabo la diferencia. La clase ya esta en el HTML; solo le faltaba tamano. */ .sec.footer .back-to-top .fa-arrow-alt-to-top, .sec.footer .back-to-top i{ font-size:22px !important; line-height:1; width:auto !important; height:auto !important; background:none !important; -webkit-mask:none !important; mask:none !important; } /* el enlace "Hosting WEB" del pie usa far fa-code, que tampoco existe */ .sec.footer .navbar-items .fa-code{ font-size:0 !important; width:15px !important; height:15px !important; display:inline-block; flex:none; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain; } /* ══ RAZONES / FEATURES ══ */ .sec.features{background:var(--nb-night-3) !important; position:relative} .sec.features.inverse .sec-title, .sec.features .sec-title{color:var(--nb-on) !important} .sec.features .sec-description{color:#CFC9E0 !important} /* Croster monta esto como un slider de Swiper con clases de fila de Bootstrap: .swiper-wrapper.row > .swiper-slide.col-lg-4 > .feature-item Con flex, cada FILA se ajusta a su contenido y unas quedan mas altas que otras. Con grid y `grid-auto-rows:1fr` TODAS las filas miden lo mismo: las seis cajas quedan identicas. Hay que anular los anchos de las columnas de Bootstrap, que aqui ya no pintan nada. */ .sec.features .swiper-wrapper{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; grid-auto-rows:1fr !important; gap:20px !important; transform:none !important; margin:0 !important; /* LAS CAJAS SE SALIAN POR LA DERECHA EN MOVIL, Y ESTA ERA LA CAUSA. Croster declara `.swiper-wrapper{box-sizing:content-box}`, que anula el `border-box` global de Bootstrap. El marcado de estos bloques trae ademas `px-3`, o sea `padding:1rem !important` a cada lado. Con content-box esos 32 px se SUMAN al 100% del contenedor: 390 px de pantalla → contenedor 360 → wrapper 360 + 16 + 16 = 392 Los 32 px de mas los recortaba el `.swiper-container`, asi que no salia barra de scroll: se veian las tarjetas cortadas por la derecha, con aire a la izquierda y ninguno a la derecha. MEDIDO en 390, 430, 768 y 900: se salia 32 px en los cuatro. Con border-box, cero. En 1280 y 1600 no cambia nada, porque alli el padding no llega a aplicarse. Se acota a `.sec.features` a proposito: el carrusel de precios es otro `.swiper-wrapper` y funciona bien —lo que asoma por su derecha es la diapositiva siguiente, que es lo que tiene que hacer un carrusel—. */ box-sizing:border-box !important; } .sec.features .swiper-slide{ width:auto !important; max-width:none !important; flex:none !important; height:auto !important; display:flex !important; margin:0 !important; padding:0 !important; } /* ── una fila de DOS tarjetas no deja la tercera columna vacia ── Las tres columnas de arriba estan bien para los bloques de seis, que es lo habitual. Pero un bloque de dos —«Elige como quieres gestionarlo»— quedaba pegado a la izquierda con un hueco de 426 px a la derecha: medido, 2 cajas de 406 px en una fila de 1.258. Se resuelve contando hijos con `:has()`: `:nth-child(2):last-child` solo casa cuando el segundo hijo es ademas el ultimo, o sea cuando hay exactamente dos. Un navegador sin `:has()` se queda con las tres columnas de siempre, que es como estaba: no mejora, pero no rompe. NO se usa `repeat(auto-fit, minmax(280px,1fr))`, que resolveria lo mismo sin `:has()`: con seis tarjetas y 1.258 px de ancho pasaria a cuatro columnas y descuadraria las secciones que hoy van a tres. */ /* El CTA de `vps_n8n.php` no lleva sombra en las letras ni velo en CSS: la penumbra va HORNEADA en la propia ilustracion, con `herramientas/velar-centro-imagen.py`. Una elipse difuminada al 34 % en el centro, que es donde cae el texto. Asi no hay capa que superponer ni nada que mantener aqui, y se ve como parte del dibujo. El parrafo si se aclara un punto, que es gratis. */ .site-banner .banner_body[style*="n8n_modalidades"] .banner_content p{ color:#F2F3FB !important; } /* ESTAS DOS VAN DENTRO DE UN MEDIA QUERY, Y NO ES ADORNO. `:has()` toma la especificidad de su argumento, asi que `.sec.features .swiper-wrapper:has(> :nth-child(2):last-child)` pesa (0,4,1) contra los (0,2,1) de la regla base. Y un media query NO suma especificidad: fuera de aqui, esta regla le ganaba tambien al `@media (max-width:640px)` de mas abajo que pide UNA columna. Se veia en `vps_n8n.php`: «Elige como quieres gestionarlo» tiene dos tarjetas, y en un movil de 390 px quedaban dos columnas de 154 px con el texto en tiras de una palabra y cortado por la derecha. Medido a 390 px reales, no redimensionando la ventana: el viewport de la ventana no es el del documento y daba 490 px. Acotarlas a partir de 641 px las deja donde tienen sentido —donde caben columnas— y devuelve el mando a la regla de movil. */ @media (min-width:641px){ .sec.features .swiper-wrapper:has(> :nth-child(2):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .sec.features .swiper-wrapper:has(> :first-child:last-child){ grid-template-columns:minmax(0, 1fr) !important; max-width:640px; margin-inline:auto !important; } /* ── Y UNA TARJETA SUELTA EN LA ULTIMA FILA SE CENTRA ────────── Con tres columnas, un bloque de cuatro o de siete deja la ultima caja sola contra el borde izquierdo y dos huecos a su derecha: parece que falta contenido o que algo se ha roto. Llevandola a la columna del medio, la fila queda equilibrada y se lee como el cierre del bloque, que es lo que es. Pasó al añadir «Copias de seguridad» a los VPS: de seis tarjetas a siete. */ .sec.features .swiper-wrapper:has(> :nth-child(4):last-child) > :last-child, .sec.features .swiper-wrapper:has(> :nth-child(7):last-child) > :last-child{ grid-column:2 !important; } } .sec.features .feature-item{ background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); border-radius:16px; padding:28px 26px; height:100%; width:100%; margin:0 !important; display:flex; align-items:flex-start; gap:18px; position:relative; overflow:hidden; transition:border-color 0.3s ease, transform 0.3s ease, background 0.3s ease; } /* filo superior de marca, que solo asoma al pasar por encima */ .sec.features .feature-item::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--nb-grad); opacity:0; transform:scaleX(0); transform-origin:left; transition:transform 0.42s ease, opacity 0.42s ease; } .sec.features .feature-item:hover::after{opacity:1; transform:scaleX(1)} .sec.features .feature-content{flex:1; min-width:0} .sec.features .feature-item:hover{ border-color:rgba(123,92,246,0.42); transform:translateY(-4px); background:rgba(123,92,246,0.075); } /* Croster pinta detras del icono un ::before con `border-radius:30% 70% 70% 30%/30% 30% 70% 70%` y el color del tema: ese es el churrete blanco con forma de gota. Se reaprovecha el mismo pseudo-elemento, pero cuadrado, con el degradado suave y un borde. */ .sec.features .feature-icon{ width:48px !important; height:48px !important; margin-bottom:0; flex:none; display:flex; align-items:center; justify-content:center; background:transparent !important; border:0 !important; font-size:20px !important; position:relative; } .sec.features .feature-icon::before{ border-radius:13px !important; background:var(--nb-grad-suave) !important; background-color:transparent !important; border:1px solid rgba(255,255,255,0.18); box-shadow:none !important; } .sec.features .feature-icon i, .sec.features .feature-icon [class^="fa-"], .sec.features .feature-icon [class*=" fa-"], .sec.features .feature-icon .fas, .sec.features .feature-icon .fad{ color:#A9C9F2 !important; font-size:20px !important; position:relative; z-index:1; } .sec.features .feature-title{ font-family:var(--nb-ff-d) !important; font-weight:600 !important; color:var(--nb-on) !important; font-size:1.06rem !important; margin-bottom:7px; } .sec.features .feature-desc, .sec.features .feature-desc p{ font-family:var(--nb-ff-b); color:#C9C2DC !important; font-size:0.92rem; line-height:1.55; } /* ══ PREGUNTAS FRECUENTES ══ */ .sec.faqs{background:var(--nb-paper) !important} /* El subrayado del titulo de Preguntas Frecuentes. Croster lo pinta con `.bordered{border-bottom:3px solid #e42fd2}`, un magenta que no es de la marca —el mismo que ya se corrigio en el pie—. Aparece una sola vez por pagina, siempre en este titulo. */ .sec .sec-title .bordered{ border-bottom:0 !important; position:relative; padding-bottom:12px; } .sec .sec-title .bordered::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:2px; background:var(--nb-grad); } .sec.faqs .sec-title{color:var(--nb-ink) !important} .sec.faqs .sec-description{color:var(--nb-ink-2) !important} .sec.faqs .card{ background:var(--nb-paper) !important; border:1px solid var(--nb-line) !important; border-radius:13px !important; margin-bottom:12px; overflow:hidden; transition:border-color 0.24s ease, box-shadow 0.24s ease; } .sec.faqs .card:hover{ border-color:var(--nb-line-2) !important; box-shadow:0 10px 28px -18px rgba(20,17,31,0.2); } .sec.faqs .card-header{ background:transparent !important; border:0 !important; padding:0 !important; } .sec.faqs .card-title, .sec.faqs .card-header .btn{ font-family:var(--nb-ff-d) !important; font-weight:600 !important; color:var(--nb-ink) !important; font-size:1.04rem !important; padding:18px 22px !important; width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:14px; } .sec.faqs .card-icon, .sec.faqs .card-title .fal{color:var(--nb-violet-aa) !important} .sec.faqs .card-body{ padding:0 22px 20px !important; font-family:var(--nb-ff-b); color:var(--nb-ink-2); font-size:0.955rem; } /* OJO: en estas fichas los
  • van SUELTOS dentro del div, sin ningun
      que los envuelva. Por eso el navegador les pinta su punto nativo y `list-style:none` sobre el ul no servia de nada: hay que ponerlo en el propio li, o salen dos puntos. */ .sec.faqs .card-body ul{list-style:none; padding-left:0; margin:0} .sec.faqs .card-body li{ list-style:none !important; display:block !important; position:relative; padding:5px 0 5px 24px; margin:0; line-height:1.6; border:0 !important; } .sec.faqs .card-body li::marker{content:"" !important} .sec.faqs .card-body li::before{ content:""; position:absolute; left:2px; top:1.05em; width:6px; height:6px; border-radius:50%; background:var(--nb-grad); } /* ══ BLOQUES DE TEXTO LIBRE ══ */ .sec.editor{background:var(--nb-paper) !important} /* ── PROSA DE UNA PAGINA DE PRODUCTO ────────────────────────── Croster declara `h1..h4{color:#211b65}` sobre el propio elemento, asi que un `

      ` suelto dentro de un bloque de texto sale con esa tinta y no con la nuestra. NO SE ARREGLA con una regla generica sobre `.sec.editor h2` o `.sec.editor p`: la PORTADA ENTERA vive dentro de un `.sec.editor` —lo avisa el comentario de la cabecera de este fichero— y cualquier regla asi le caeria encima. Por eso el texto de estas paginas se envuelve en `.nb-prosa` y solo se estila ahi dentro. Se estreno con `vps_n8n.php`. Sirve para cualquier pagina de producto que se escriba a partir de ahora: basta con envolver el contenido del bloque `texteditor` en `
      `. */ .sec.editor .nb-prosa{ max-width:820px; margin-inline:auto; font-family:var(--nb-ff-b); color:var(--nb-ink-2); } .sec.editor .nb-prosa h2{ font-family:var(--nb-ff-d) !important; color:var(--nb-ink) !important; font-weight:700 !important; font-size:clamp(1.5rem,3.2vw,2rem) !important; letter-spacing:-0.026em; text-wrap:balance; margin:0 0 14px !important; } .sec.editor .nb-prosa p{ color:var(--nb-ink-2) !important; font-family:var(--nb-ff-b) !important; font-size:1.02rem; line-height:1.72; margin:0 0 16px; } .sec.editor .nb-prosa p:last-child{margin-bottom:0} .sec.editor .nb-prosa b, .sec.editor .nb-prosa strong{color:var(--nb-ink) !important; font-weight:600} .sec.editor .nb-prosa a{color:var(--nb-violet-aa) !important} /* Texto e ilustracion a dos columnas, dentro de un bloque de texto. `align-items:center` en la REJILLA y `height:auto` en la imagen: el valor de serie es `stretch`, que estira la ilustracion al alto de la columna de texto y la deja achatada. Ya paso con los candados de la pagina de SSL. */ .sec.editor .nb-prosa-media{ max-width:1120px; margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; } .sec.editor .nb-prosa-media > .nb-prosa{max-width:none; margin:0} .sec.editor .nb-prosa-media img{ width:100%; height:auto; max-width:100%; border-radius:18px; display:block; box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 18px 44px -20px rgba(20,17,31,0.28); } @media (max-width:860px){ /* En una sola columna la ilustracion ya va primera por marcado, asi que aqui no hace falta reordenar nada. */ .sec.editor .nb-prosa-media{grid-template-columns:1fr} } /* WordPress, PrestaShop y Correo maquetan esa seccion con una tabla de Bootstrap que lleva `table-bordered`: eso pinta un borde en la tabla Y EN CADA CELDA. El `border:hidden` que trae el contenido solo mata el exterior, por eso quedaba la caja alrededor. hosting.php no usa tabla y por eso se veia limpia: aqui se igualan las cuatro. MUY IMPORTANTE — solo `.table-bordered`, NUNCA `table` a secas: la portada entera vive dentro de un `.sec.editor` y sus bloques propios se llevaron por delante las reglas genericas. Lo mismo vale para la tipografia: aqui NO se declaran ni colores ni fuentes globales, porque pisaban el diseño de la portada. */ .sec.editor .table-bordered, .sec.editor .table-bordered > tbody, .sec.editor .table-bordered > tbody > tr, .sec.editor .table-bordered > tbody > tr > td, .sec.editor .table-bordered > tbody > tr > th{ border:0 !important; background:transparent !important; } .sec.editor .table-bordered > tbody > tr > td{ padding:0 18px 0 0 !important; vertical-align:middle; } .sec.editor .table-bordered > tbody > tr > td:last-child{padding-right:0 !important} .sec.editor .table-responsive{overflow:visible !important} /* En movil una tabla de maquetacion se estrecha y parte las palabras: mejor apilar las celdas. */ @media (max-width:991px){ .sec.features .swiper-wrapper{grid-template-columns:repeat(2, minmax(0, 1fr)) !important} } @media (max-width:640px){ .sec.features .swiper-wrapper{grid-template-columns:1fr !important} .sec.features .feature-item{padding:24px 22px} } @media (max-width:767px){ .sec.editor .table-bordered, .sec.editor .table-bordered > tbody, .sec.editor .table-bordered > tbody > tr, .sec.editor .table-bordered > tbody > tr > td{ display:block !important; width:100% !important; } .sec.editor .table-bordered > tbody > tr > td{padding:0 0 20px 0 !important} } /* ══ EL AIRE ENTRE SECCIONES ════════════════════════════════════ El tema da a cada seccion `padding:60px 0`, y `120px` a partir de 992 px. Entre dos secciones seguidas eso son 240 px de aire en escritorio, y medido en las doce paginas salian huecos reales de 206 a 431 px contando los margenes del contenido. CUANDO CAMBIA EL TONO, ESE AIRE ESTA BIEN: el propio corte de color separa las dos secciones y necesita respiro para no parecer una raya. Lo que sobra es entre dos secciones DEL MISMO TONO, donde nada indica que una cosa acabo y otra empezo: ahi el visitante solo ve un vacio. Las claras de este tema son `editor`, `faqs` y `products`; las oscuras las pinta el hook (`features`) o son banners. Asi que la regla se acota a las tres claras seguidas entre si, y baja de 240 a 184 px. No se toca el padding general, que es del tema y lo usan tambien el area de cliente y el carrito. Referencia de que 184 es la medida buena: el bloque «Donde estan tus datos» anula su propio padding y deja 206 px con la seccion siguiente, y ahi se ve bien. NO SE PUEDE HACER CON `+`. Entre dos `.sec` el tema mete un `