/* ============================================================
DOTSOLUTIONS — DESIGN SYSTEM
Port of HostDOT dark design system to WHMCS child theme.
Scope: dark styles scoped to body.hd-homepage + .hd-page
Navbar dark: applies to all pages (branding)
Footer dark: applies to all pages (branding)
Bootstrap conflicts resolved via specificity overrides.
============================================================ */
/* ─── FONTS ─────────────────────────────────────────────── */
/* Fonts are loaded via in header.tpl — not here.
@import blocks rendering; + is the correct approach. */
/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
--bg: #060410;
--bg-card: rgba(255, 255, 255, 0.03);
--bg-card-hover: rgba(255, 255, 255, 0.055);
--border: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15);
--fg: #f0ecff;
--fg-muted: #7e7a9b;
--fg-subtle: #4a4669;
--accent: #7c3aed;
--accent-mid: #8b5cf6;
--accent-light: #a78bfa;
--green: #22c55e;
--green-glow: rgba(34, 197, 94, 0.5);
--gradient-hero: linear-gradient(to left, #7c3aed, #a855f7, #d8b4fe);
--font-display: 'General Sans', system-ui, sans-serif;
--font-body: 'Geist', 'Inter', system-ui, sans-serif;
--text-xs: clamp(10px, 0.8vw, 11px);
--text-sm: clamp(12px, 0.9vw, 13px);
--text-base: clamp(14px, 1vw, 15px);
--text-md: clamp(16px, 1.2vw, 17px);
--text-lg: clamp(17px, 1.4vw, 19px);
--text-xl: clamp(19px, 1.6vw, 22px);
--text-2xl: clamp(22px, 2vw, 28px);
--text-3xl: clamp(26px, 2.8vw, 36px);
--text-4xl: clamp(32px, 3.5vw, 48px);
--text-5xl: clamp(36px, 4vw, 56px);
--text-hero: 60px;
--text-section-h: clamp(32px, 4vw, 52px);
--sp-1: clamp(3px, 0.3vw, 4px);
--sp-2: clamp(6px, 0.5vw, 8px);
--sp-3: clamp(9px, 0.7vw, 12px);
--sp-4: clamp(12px, 1vw, 16px);
--sp-5: clamp(14px, 1.2vw, 20px);
--sp-6: clamp(18px, 1.5vw, 24px);
--sp-8: clamp(22px, 2vw, 32px);
--sp-10: clamp(28px, 2.5vw, 40px);
--sp-12: clamp(32px, 3vw, 48px);
--sp-16: clamp(40px, 4vw, 64px);
--sp-20: clamp(48px, 5vw, 80px);
--sp-24: clamp(56px, 6.5vw, 96px);
--sp-32: clamp(72px, 8vw, 128px);
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 24px;
--r-full: 9999px;
--gutter: clamp(16px, 5vw, 80px);
--container: 1080px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--dur: 50ms;
--dur-lg: 350ms;
--nav-h: 64px;
}
/* ─── TIPOGRAFÍA GLOBAL DE TÍTULOS ──────────────────────── */
/* Una única fuente de verdad para h1-h6 en todas las páginas.
Solo definimos familia, peso, interlineado y tracking.
El color hereda del contexto (oscuro/claro) — no se fuerza aquí. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display) !important;
font-weight: 500 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
/* ─── WHMCS GLOBAL OVERRIDES ────────────────────────────── */
/* Hide WHMCS chrome we don't need on homepage */
body.hd-homepage .language-chooser,
body.hd-homepage .currency-chooser,
body.hd-homepage .network-status-badge,
body.hd-homepage .account-stat-box,
body.hd-homepage .master-breadcrumb { display: none !important; }
/* Bootstrap 4 maneja el responsive de columnas de forma nativa.
No se fuerza ningún ancho de col aquí — evita romper layouts con sidebar. */
/* ─── DARK AUTH PAGES (login / pwreset / register) ──────── */
/* body.hd-dark-page applied via header.tpl for these templates */
body.hd-dark-page {
background: var(--bg) !important;
overflow-x: hidden;
/* Espacio para que el badge fijo de reCAPTCHA no tape el contenido inferior */
padding-bottom: 80px;
}
/* Color de títulos en páginas oscuras — el peso/familia ya lo cubre el bloque global */
body.hd-dark-page h1,
body.hd-dark-page h2,
body.hd-dark-page h3,
body.hd-dark-page h4,
body.hd-dark-page h5,
body.hd-dark-page h6 {
color: var(--fg) !important;
}
/* Breadcrumb en pwreset — visible, blanco 12px */
body.hd-dark-page .master-breadcrumb {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.hd-dark-page .master-breadcrumb,
body.hd-dark-page .master-breadcrumb a,
body.hd-dark-page .master-breadcrumb li,
body.hd-dark-page .master-breadcrumb .breadcrumb-item,
body.hd-dark-page .master-breadcrumb .breadcrumb-item.active {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.7) !important;
}
body.hd-dark-page .master-breadcrumb a:hover {
color: #fff !important;
}
body.hd-dark-page .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.35) !important;
}
body.hd-dark-page section#main-body {
padding-top: 0 !important;
}
/* Layout */
.hd-login {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--nav-h) - 160px);
padding: var(--sp-16) var(--sp-4);
/* Contiene el glow para que no cause desbordamiento horizontal */
overflow: hidden;
}
.hd-login__glow {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
/* 100% en lugar de valor fijo — nunca más ancho que el contenedor */
width: 100%;
max-width: 560px;
height: 360px;
background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.16) 0%, transparent 68%);
filter: blur(56px);
pointer-events: none;
z-index: 0;
}
/* Card */
.hd-login__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 440px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-xl);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: clamp(28px, 5vw, 48px);
}
/* Header */
.hd-login__header {
text-align: center;
margin-bottom: var(--sp-8);
}
.hd-login__header img {
display: block;
margin: 0 auto var(--sp-6);
}
.hd-login__title {
font-family: var(--font-display) !important;
font-size: var(--text-2xl) !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.02em;
margin: 0 0 var(--sp-2) !important;
line-height: 1.2 !important;
}
.hd-login__subtitle {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--fg-muted);
margin: 0;
}
/* Form */
.hd-login__form {
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.hd-field {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.hd-field__label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg);
letter-spacing: 0.01em;
margin: 0;
}
.hd-field__input {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--r-md) !important;
color: var(--fg) !important;
font-family: var(--font-body) !important;
font-size: var(--text-base) !important;
height: 48px !important;
padding: 0 var(--sp-4) !important;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
width: 100%;
}
.hd-field__input::placeholder {
color: var(--fg-subtle) !important;
opacity: 1;
}
.hd-field__input:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
outline: none !important;
background: rgba(255, 255, 255, 0.06) !important;
}
/* Password reveal */
.hd-field__pw-wrap {
position: relative;
}
.hd-field__pw-wrap .hd-field__input {
padding-right: 48px !important;
}
.hd-field__pw-toggle {
position: absolute;
right: 4px;
top: 4px;
height: 40px;
width: 40px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--fg-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: var(--r-sm);
transition: color 0.2s;
padding: 0;
}
.hd-field__pw-toggle:hover {
color: var(--accent-light);
background: transparent !important;
}
/* Hide native edge/IE password reveal icon */
.hd-field__input[type="password"]::-ms-reveal,
.hd-field__input[type="password"]::-ms-clear { display: none; }
/* Remember + forgot row */
.hd-login__remember {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin-top: calc(var(--sp-2) * -1);
}
.hd-remember {
display: flex;
align-items: center;
gap: var(--sp-2);
cursor: pointer;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
font-weight: 500;
user-select: none;
margin: 0;
}
.hd-remember input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
margin: 0;
flex-shrink: 0;
}
.hd-login__forgot {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
text-decoration: none;
transition: color 0.2s;
white-space: nowrap;
}
.hd-login__forgot:hover {
color: var(--accent-light);
}
/* Captcha inline container — solo inicializa el script de Google */
.hd-login__captcha {
display: flex;
justify-content: center;
margin-top: var(--sp-1);
}
/* ── reCAPTCHA badge ────────────────────────────────────────
Google ToS permite ocultar el badge si se muestra un texto
de divulgación visible en el flujo. Lo hacemos en login.tpl.
Referencia: https://developers.google.com/recaptcha/docs/faq
──────────────────────────────────────────────────────────── */
body.hd-dark-page .grecaptcha-badge {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Submit */
.hd-btn-login {
width: 100%;
height: 48px;
background: var(--accent) !important;
border: none !important;
border-radius: var(--r-full) !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-size: var(--text-base) !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
margin-top: var(--sp-2);
box-shadow: 0 4px 24px rgba(124, 58, 237, 0.38) !important;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
.hd-btn-login:hover {
background: var(--accent-mid) !important;
transform: translateY(-1px);
box-shadow: 0 8px 32px rgba(124, 58, 237, 0.48) !important;
}
.hd-btn-login:active {
transform: translateY(0);
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.38) !important;
}
/* Footer links */
.hd-login__footer {
margin-top: var(--sp-6);
padding-top: var(--sp-6);
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
text-align: center;
}
.hd-login__footer a {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
text-decoration: none;
transition: color 0.2s;
}
.hd-login__footer a:hover {
color: var(--accent-light);
}
.hd-login__footer a span {
color: var(--accent-light);
text-decoration: underline;
}
.hd-login__recaptcha-notice {
font-size: 11px;
color: var(--fg-subtle);
text-align: center;
margin: 0;
line-height: 1.5;
}
.hd-login__recaptcha-notice a {
font-size: inherit;
color: var(--fg-subtle);
text-decoration: underline;
}
.hd-login__recaptcha-notice a:hover {
color: var(--fg-muted);
}
/* Flash messages (errors/success) */
.hd-login__card .alert {
border-radius: var(--r-md);
font-size: var(--text-sm);
margin-bottom: var(--sp-4);
}
/* ─── REGISTER PAGE ──────────────────────────────────────── */
body.hd-dark-page #registration {
font-family: var(--font-body);
}
body.hd-dark-page #registrationWrapper {
max-width: 900px;
margin: 0 auto;
padding: var(--sp-6) 0 var(--sp-16);
}
/* Cards */
body.hd-dark-page #registrationWrapper .card {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
margin-bottom: var(--sp-6);
overflow: hidden;
}
body.hd-dark-page #registrationWrapper .card-body {
padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 40px);
}
/* Section titles */
body.hd-dark-page #registrationWrapper .card-title-custom {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 500;
color: var(--fg) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
padding-bottom: var(--sp-4);
margin-bottom: var(--sp-6);
display: flex;
align-items: center;
gap: var(--sp-3);
}
body.hd-dark-page #registrationWrapper .card-title-custom i {
color: var(--accent-light);
font-size: var(--text-base);
}
/* Labels */
.hd-reg-label {
display: block;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
color: var(--fg-muted);
margin-bottom: var(--sp-2);
letter-spacing: 0.06em;
}
/* Inputs and selects */
body.hd-dark-page #registrationWrapper .form-control,
body.hd-dark-page #registrationWrapper .field {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--r-md) !important;
color: var(--fg) !important;
font-family: var(--font-body) !important;
font-size: var(--text-base) !important;
height: 46px !important;
padding: 0 var(--sp-4) !important;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
box-shadow: none !important;
width: 100%;
}
body.hd-dark-page #registrationWrapper .form-control::placeholder,
body.hd-dark-page #registrationWrapper .field::placeholder {
color: var(--fg-subtle) !important;
}
body.hd-dark-page #registrationWrapper .form-control:focus,
body.hd-dark-page #registrationWrapper .field:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
background: rgba(255, 255, 255, 0.06) !important;
outline: none !important;
}
/* Select options (dark background in dropdown) */
body.hd-dark-page #registrationWrapper select option {
background: #120d24;
color: var(--fg);
}
/* Phone field: preserve intl-tel-input left padding */
body.hd-dark-page #registrationWrapper .intl-tel-input input,
body.hd-dark-page #registrationWrapper .iti input,
body.hd-dark-page #registrationWrapper #inputPhone {
padding-left: 95px !important;
}
/* Account type selector */
.hd-account-type {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-md);
padding: var(--sp-4);
margin-bottom: var(--sp-6);
}
.hd-account-type__options {
display: flex;
gap: var(--sp-6);
margin-top: var(--sp-2);
}
.hd-account-type__option {
display: flex;
align-items: center;
gap: var(--sp-2);
cursor: pointer;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
color: var(--fg);
margin: 0;
}
.hd-account-type__option i {
color: var(--fg-muted);
}
.hd-account-type__option input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
margin: 0;
flex-shrink: 0;
}
/* Form group spacing */
body.hd-dark-page #registrationWrapper .form-group {
margin-bottom: var(--sp-5);
}
/* Help text */
.hd-field-help {
font-size: var(--text-xs);
color: var(--fg-subtle);
display: block;
margin-top: var(--sp-1);
}
/* Generate password button */
body.hd-dark-page #registrationWrapper .generate-password {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--fg) !important;
border-radius: var(--r-md) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: var(--text-sm) !important;
height: 46px;
transition: background 0.2s !important;
}
body.hd-dark-page #registrationWrapper .generate-password:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
/* Password strength meter */
.hd-pw-strength {
margin-top: var(--sp-4);
}
.hd-pw-strength .progress {
height: 6px !important;
border-radius: var(--r-full);
background: rgba(255, 255, 255, 0.08) !important;
}
.hd-pw-strength__label {
color: var(--fg-muted) !important;
font-family: var(--font-body);
font-size: var(--text-xs) !important;
font-weight: 600;
margin-top: var(--sp-2);
}
/* Password feedback alert */
body.hd-dark-page #registrationWrapper #passwdFeedback {
background: rgba(124, 58, 237, 0.1) !important;
border: 1px solid rgba(124, 58, 237, 0.2) !important;
border-radius: var(--r-md);
color: var(--fg) !important;
font-family: var(--font-body);
font-size: var(--text-sm);
}
/* Marketing opt-in */
.hd-marketing-desc {
color: var(--fg-muted);
font-family: var(--font-body);
font-size: var(--text-base);
margin-bottom: var(--sp-5);
}
/* Toggle switch */
.hd-toggle {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
cursor: pointer;
user-select: none;
}
.hd-toggle__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.hd-toggle__track {
position: relative;
width: 44px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--r-full);
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
.hd-toggle__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background: var(--fg-subtle);
border-radius: var(--r-full);
transition: transform 0.2s, background 0.2s;
}
.hd-toggle__input:checked ~ .hd-toggle__track {
background: var(--accent);
border-color: var(--accent);
}
.hd-toggle__input:checked ~ .hd-toggle__track .hd-toggle__thumb {
transform: translateX(20px);
background: #fff;
}
.hd-toggle__label {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
font-weight: 500;
}
/* ToS */
.hd-tos {
margin: 0;
}
.hd-tos__label {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
cursor: pointer;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
}
.hd-tos__label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
margin: 0;
flex-shrink: 0;
position: static !important;
}
.hd-tos__link {
color: var(--accent-light) !important;
font-weight: 600;
text-decoration: none;
}
.hd-tos__link:hover {
text-decoration: underline;
}
/* Submit button */
body.hd-dark-page .hd-btn-register {
background: var(--accent) !important;
border-color: var(--accent) !important;
border-radius: var(--r-full) !important;
padding: 14px 48px !important;
font-family: var(--font-body) !important;
font-size: var(--text-base) !important;
font-weight: 600 !important;
color: #fff !important;
box-shadow: 0 4px 24px rgba(124, 58, 237, 0.35) !important;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
body.hd-dark-page .hd-btn-register:hover {
background: var(--accent-mid) !important;
border-color: var(--accent-mid) !important;
transform: translateY(-1px);
box-shadow: 0 8px 32px rgba(124, 58, 237, 0.45) !important;
}
body.hd-dark-page .hd-btn-register:active {
transform: translateY(0) !important;
}
/* Alert messages */
body.hd-dark-page #registration .alert {
border-radius: var(--r-md);
font-size: var(--text-sm);
font-family: var(--font-body);
}
/* ─── SIDEBAR — DARK AUTH PAGES ──────────────────────────── */
/* Aplica a cualquier .card-sidebar en páginas oscuras (register, login, pwreset) */
body.hd-dark-page .card-sidebar {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
color: var(--fg);
}
body.hd-dark-page .card-sidebar .card-header {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
color: var(--fg) !important;
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
padding: var(--sp-4) var(--sp-5);
}
body.hd-dark-page .card-sidebar .card-body {
background: transparent !important;
padding: var(--sp-5);
color: var(--fg-muted);
font-family: var(--font-body);
font-size: var(--text-sm);
}
body.hd-dark-page .card-sidebar p {
color: var(--fg-muted) !important;
font-family: var(--font-body);
font-size: var(--text-sm);
margin-bottom: var(--sp-4);
}
body.hd-dark-page .card-sidebar a,
body.hd-dark-page .card-sidebar .btn-link,
body.hd-dark-page .card-sidebar .card-body a,
body.hd-dark-page .card-sidebar .card-footer a {
color: #a78bfa !important;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: underline !important;
text-decoration-color: rgba(167, 139, 250, 0.4) !important;
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
body.hd-dark-page .card-sidebar a:hover,
body.hd-dark-page .card-sidebar .btn-link:hover,
body.hd-dark-page .card-sidebar .card-body a:hover,
body.hd-dark-page .card-sidebar .card-footer a:hover {
color: #fff !important;
text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}
/* Si el sidebar tiene un btn-primary (ej: "Iniciar sesión") */
body.hd-dark-page .card-sidebar .btn-primary {
background: var(--accent) !important;
border-color: var(--accent) !important;
border-radius: var(--r-full) !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: var(--text-sm) !important;
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3) !important;
transition: background 0.2s !important;
width: 100%;
}
body.hd-dark-page .card-sidebar .btn-primary:hover {
background: var(--accent-mid) !important;
border-color: var(--accent-mid) !important;
}
/* List group items dentro del sidebar (algunos temas WHMCS los usan) */
body.hd-dark-page .card-sidebar .list-group-item {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.07) !important;
color: var(--fg-muted) !important;
font-family: var(--font-body);
font-size: var(--text-sm);
}
body.hd-dark-page .card-sidebar .list-group-item a {
color: var(--accent-light) !important;
}
/* Sidebar column wrapper: quita el fondo blanco del contenedor Bootstrap */
body.hd-dark-page .sidebar {
background: transparent !important;
}
/* Inner page top spacing (navbar is sticky, 64px tall) */
body:not(.hd-homepage) section#main-body {
padding-top: var(--sp-6);
}
/* NOTE: btn-primary color is set via WHMCS Admin > Setup > General Settings > Store.
Do NOT override it here — WHMCS-generated color CSS loads after this file and wins.
Button overrides live in scoped blocks: #navbar .btn-primary and .hd-page .btn-primary */
/* ─── HOMEPAGE — DARK BACKGROUND ────────────────────────── */
body.hd-homepage {
background-color: var(--bg) !important;
overflow-x: hidden;
}
/* Typography is set on .hd-page, not on body — avoids fighting WHMCS's font CSS */
body.hd-homepage section#main-body,
body.hd-homepage #main-body .primary-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
flex: none !important;
}
/* ─── .hd-page WRAPPER ───────────────────────────────────── */
/* All landing page content lives inside .hd-page */
.hd-page {
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
}
.hd-page *,
.hd-page *::before,
.hd-page *::after { box-sizing: border-box; }
.hd-page img,
.hd-page svg { display: block; }
.hd-page a { color: inherit; text-decoration: none; }
.hd-page ul { list-style: none; margin: 0; padding: 0; }
.hd-page button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
/* Dentro del homepage wrapper: solo necesitamos el color
(familia, peso y tracking ya vienen del bloque global) */
.hd-page h1, .hd-page h2,
.hd-page h3, .hd-page h4 {
color: var(--fg) !important;
}
.hd-page p { color: var(--fg-muted); line-height: 1.7; }
/* ─── LAYOUT UTIL ────────────────────────────────────────── */
.wrap {
width: min(calc(100% - var(--gutter) * 2), var(--container));
margin-inline: auto;
}
/* ─── LIQUID GLASS ───────────────────────────────────────── */
.liquid-glass {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.12),
0 4px 20px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
180deg,
rgba(255,255,255,0.18) 0%,
rgba(255,255,255,0.06) 30%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0) 70%,
rgba(255,255,255,0.06) 85%,
rgba(255,255,255,0.14) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ─── GRADIENT TEXT ──────────────────────────────────────── */
.gradient-text {
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ─── DOT INDICATORS ─────────────────────────────────────── */
.dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.dot--green { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.dot--pulse { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 6px var(--green-glow); opacity: 1; }
50% { box-shadow: 0 0 14px var(--green-glow); opacity: 0.7; }
}
/* ─── BUTTONS (hd-page scope) ────────────────────────────── */
.hd-page .btn {
display: inline-flex !important;
align-items: center !important;
gap: var(--sp-2) !important;
padding: 10px var(--sp-5) !important;
border-radius: var(--r-full) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease) !important;
white-space: nowrap !important;
border: 1px solid transparent !important;
text-decoration: none !important;
}
.hd-page .btn:active { transform: scale(0.97) !important; }
.hd-page .btn-primary {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35) !important;
}
.hd-page .btn-primary:hover {
background: var(--accent-mid) !important;
border-color: var(--accent-mid) !important;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5) !important;
color: #fff !important;
}
.hd-page .btn-ghost {
background: transparent !important;
color: var(--fg) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
.hd-page .btn-ghost:hover {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
color: var(--fg) !important;
}
.hd-page .btn-sm { padding: 7px var(--sp-4) !important; font-size: var(--text-sm) !important; }
.hd-page .btn-lg { padding: clamp(11px,1.2vw,14px) clamp(20px,2vw,28px) !important; font-size: var(--text-base) !important; }
/* ─── NAVBAR (all pages) ─────────────────────────────────── */
#navbar {
position: sticky;
top: 0;
z-index: 1031; /* above Bootstrap modals (1050) minus 1 layer */
transition: background var(--dur-lg) var(--ease), backdrop-filter var(--dur-lg) var(--ease);
background: rgba(6, 4, 16, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
#navbar.scrolled {
background: rgba(6, 4, 16, 0.97) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
}
.nav-inner {
width: min(calc(100% - var(--gutter) * 2), var(--container));
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--sp-4);
gap: var(--sp-8);
}
.nav-logo img { height: clamp(24px, 2.2vw, 30px); width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: clamp(24px, 4vw, 48px);
list-style: none;
margin: 0; padding: 0;
}
.nav-link {
font-size: var(--text-sm);
color: rgba(240, 236, 255, 0.72);
font-weight: 500;
transition: color var(--dur) var(--ease);
text-decoration: none;
}
.nav-link:hover { color: var(--fg); }
.nav-actions {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* Navbar buttons — standalone (outside .hd-page) */
#navbar .btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 7px var(--sp-4);
border-radius: var(--r-full);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
text-decoration: none;
}
#navbar .btn-primary {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
#navbar .btn-primary:hover {
background: var(--accent-mid) !important;
border-color: var(--accent-mid) !important;
color: #fff !important;
}
#navbar .btn-ghost {
background: transparent;
color: var(--fg);
border-color: rgba(255, 255, 255, 0.18);
}
#navbar .btn-ghost:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.28);
}
/* Hamburger */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 6px;
border-radius: var(--r-sm);
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.04);
flex-shrink: 0;
cursor: pointer;
}
.nav-hamburger span {
display: block;
height: 2px;
background: var(--fg);
border-radius: 2px;
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile-menu {
display: none;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-6) var(--sp-6);
background: rgba(6, 4, 16, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
animation: slide-down 0.2s var(--ease-out);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu .nav-link {
font-size: var(--text-md);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--border);
color: rgba(240, 236, 255, 0.72);
text-decoration: none;
}
.nav-mobile-menu .nav-actions {
flex-direction: column;
align-items: stretch;
margin-top: var(--sp-2);
}
.nav-mobile-menu .btn { justify-content: center; }
@keyframes slide-down {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-divider {
height: 1px;
background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent 100%);
}
/* Cart FAB */
.hd-cart-btn {
position: fixed;
bottom: 30px; right: 30px;
background: var(--accent);
color: white;
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 25px rgba(124,58,237,0.4);
z-index: 9999;
font-size: 20px;
text-decoration: none;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hd-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124,58,237,0.55); color: white; }
.hd-cart-badge {
position: absolute; top: -5px; right: -5px;
background: #ef4444; color: white;
font-size: 12px; font-weight: 800;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg);
}
/* ─── HERO ───────────────────────────────────────────────── */
.hero-video-wrap {
position: absolute;
inset: 0;
z-index: 0;
background: #000;
overflow: hidden;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0; /* controlled by JS fade loop */
}
#hero {
position: relative;
min-height: calc(100vh - var(--nav-h));
display: flex;
flex-direction: column;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse 70% 80% at 65% 50%, rgba(109,40,217,0.12) 0%, transparent 65%),
radial-gradient(ellipse 50% 50% at 20% 60%, rgba(124,58,237,0.06) 0%, transparent 60%);
animation: hero-breathe 10s ease-in-out infinite alternate;
pointer-events: none;
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.45) 0%, transparent 100%),
radial-gradient(1px 1px at 34% 58%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 53% 14%, rgba(255,255,255,0.35) 0%, transparent 100%),
radial-gradient(1px 1px at 68% 44%, rgba(255,255,255,0.25) 0%, transparent 100%),
radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 9% 76%, rgba(255,255,255,0.25) 0%, transparent 100%),
radial-gradient(1px 1px at 44% 87%, rgba(255,255,255,0.18) 0%, transparent 100%),
radial-gradient(1px 1px at 91% 31%, rgba(255,255,255,0.2) 0%, transparent 100%);
}
@keyframes hero-breathe {
0% { opacity: 0.8; transform: scale(1); }
100% { opacity: 1; transform: scale(1.04); }
}
.hero-body {
flex: 1;
display: flex;
align-items: center;
padding-block: var(--sp-16) var(--sp-12);
position: relative;
z-index: 2;
}
.hero-logos {
border-top: 1px solid var(--border);
padding-block: var(--sp-8);
overflow: hidden;
position: relative;
z-index: 2;
}
.hero-inner {
position: relative;
z-index: 2;
width: min(calc(100% - var(--gutter) * 2), var(--container));
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-12);
}
.hero-content {
text-align: center;
max-width: 680px;
}
.hero-tag {
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-light) !important;
margin-bottom: var(--sp-5);
padding: 4px var(--sp-3);
border: 1px solid rgba(167,139,250,0.2);
border-radius: var(--r-full);
background: rgba(124,58,237,0.08);
line-height: 1;
}
.hero-headline {
font-size: var(--text-hero) !important;
font-weight: 500 !important;
line-height: 1.08 !important;
letter-spacing: -0.025em !important;
color: var(--fg) !important;
margin-bottom: var(--sp-6);
}
.hero-subtitle {
font-size: 18px;
color: var(--fg-muted);
line-height: 1.75;
margin: 0 auto var(--sp-8);
}
/* Stats row */
.hero-stats {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
max-width: 680px;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid rgba(255,255,255,0.09);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.4);
}
.hero-stat-card {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
padding: var(--sp-5) var(--sp-6);
border: none;
border-radius: 0;
box-shadow: none;
background: rgba(255,255,255,0.04);
}
.hero-stat-card::before { display: none !important; }
.hero-stat-sep {
width: 1px;
background: rgba(255,255,255,0.08);
flex-shrink: 0;
align-self: stretch;
}
.stat-value {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 700;
color: var(--fg) !important;
letter-spacing: -0.03em;
line-height: 1;
}
.stat-label { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.3; }
.stat-indicator {
display: flex; align-items: center;
gap: 5px; margin-top: 4px;
font-size: var(--text-xs); color: var(--fg-muted);
}
/* ─── CLIENTS MARQUEE ────────────────────────────────────── */
.marquee-wrapper {
width: min(calc(100% - var(--gutter) * 2), var(--container));
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--sp-12);
}
.marquee-intro { flex-shrink: 0; width: clamp(160px, 18vw, 220px); }
.marquee-intro p {
font-size: 14px;
color: #9c9c9c;
line-height: 1.6;
}
.marquee-overflow {
flex: 1;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
display: flex;
align-items: center;
gap: clamp(32px, 5vw, 64px);
width: max-content;
animation: marquee-scroll 22s linear infinite;
}
.marquee-item {
font-family: var(--font-display);
font-size: clamp(15px, 1.5vw, 19px);
font-weight: 600;
color: rgba(240,236,255,0.25);
white-space: nowrap;
transition: color var(--dur) var(--ease);
}
.marquee-item:hover { color: rgba(240,236,255,0.6); }
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ─── FEATURE STACK SCROLL ───────────────────────────────── */
#tecnologia { padding-block: 0; }
.feature-stack { position: relative; }
.feature-stack__viewport {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.feature-stack__cards { position: relative; }
.fcard[data-fcard="0"] {
position: relative;
z-index: 1;
transform-origin: top center;
will-change: transform;
}
.fcard[data-fcard="1"] {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 2;
transform: translateY(100vh);
transform-origin: top center;
will-change: transform;
}
.fcard[data-fcard="2"] {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
transform: translateY(100vh);
transform-origin: top center;
will-change: transform;
}
.feature-card {
border-radius: var(--r-xl);
padding: clamp(32px, 3.5vw, 52px) clamp(32px, 4vw, 60px);
display: flex;
align-items: center;
gap: clamp(32px, 5vw, 64px);
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 12% 70%, rgba(124, 58, 237, 0.22) 0%, transparent 52%),
radial-gradient(ellipse at 88% 15%, rgba(167, 139, 250, 0.11) 0%, transparent 48%),
rgba(10, 6, 30, 0.62);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(167, 139, 250, 0.14);
}
.feature-card::after {
content: '';
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%, rgba(167,139,250,0.45) 35%,
rgba(124,58,237,0.6) 55%, rgba(167,139,250,0.3) 75%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.feature-card__left { flex-shrink: 0; max-width: 300px; }
.feature-icon {
display: flex; align-items: center; justify-content: center;
width: clamp(48px, 4vw, 56px);
height: clamp(48px, 4vw, 56px);
border-radius: var(--r-md);
background: rgba(124,58,237,0.18);
color: var(--accent-light);
margin-bottom: var(--sp-4);
border: 1px solid rgba(124,58,237,0.28);
}
.feature-title {
font-size: clamp(32px, 3vw, 40px) !important;
font-weight: 400 !important;
color: var(--fg) !important;
line-height: 1.2 !important;
}
.feature-card__right p {
font-size: 18px;
color: rgba(240, 236, 255, 0.82);
line-height: 1.8;
font-weight: 300;
}
/* ─── SOLUTIONS GRID ─────────────────────────────────────── */
#soluciones { padding-block: var(--sp-24) var(--sp-20); }
.solutions-header {
text-align: center;
max-width: 620px;
margin-inline: auto;
margin-bottom: clamp(40px, 5vw, 64px);
}
.solutions-headline {
font-family: var(--font-display) !important;
font-size: var(--text-section-h) !important;
font-weight: 500 !important;
color: var(--fg) !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
margin-block: var(--sp-3) var(--sp-5);
}
.solutions-desc {
font-size: clamp(15px, 1.2vw, 17px);
color: rgba(224, 218, 255, 0.65);
line-height: 1.75;
font-weight: 300;
}
.solutions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 24px);
align-items: stretch;
}
/* Sol-card base */
.sol-card {
position: relative;
border-radius: var(--r-xl);
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 80%, rgba(124, 58, 237, 0.18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 10%, rgba(167, 139, 250, 0.09) 0%, transparent 50%),
rgba(10, 6, 30, 0.55);
backdrop-filter: blur(16px) saturate(130%);
-webkit-backdrop-filter: blur(16px) saturate(130%);
border: 1px solid rgba(167, 139, 250, 0.12);
transition:
transform var(--dur-lg) var(--ease),
border-color var(--dur-lg) var(--ease),
box-shadow var(--dur-lg) var(--ease);
opacity: 0;
transform: translateY(28px);
}
.sol-card:hover {
transform: translateY(-4px);
border-color: rgba(167, 139, 250, 0.22);
box-shadow: 0 20px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.1);
}
/* Rotating conic-gradient background */
.sol-card::before {
content: '';
position: absolute;
inset: -80%;
background: conic-gradient(
from 0deg at 38% 52%,
transparent 0deg,
rgba(124, 58, 237, 0.13) 50deg,
rgba(167, 139, 250, 0.07) 100deg,
transparent 155deg,
rgba(124, 58, 237, 0.07) 220deg,
transparent 275deg,
rgba(167, 139, 250, 0.10) 330deg,
transparent 360deg
);
animation: cardBgSpin 24s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes cardBgSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Frosted overlay above rotating bg */
.sol-card::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(167, 139, 250, 0.18) 0px, transparent 1px),
rgba(8, 5, 22, 0.30);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
/* Cascade entrance animation */
.solutions-grid.visible .sol-card {
animation: solCardIn 0.65s var(--ease-out) forwards;
}
.solutions-grid.visible .sol-card:nth-child(1) { animation-delay: 0.05s; }
.solutions-grid.visible .sol-card:nth-child(2) { animation-delay: 0.20s; }
.solutions-grid.visible .sol-card:nth-child(3) { animation-delay: 0.35s; }
@keyframes solCardIn {
from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
/* Ambient orb */
.sol-card__orb {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
bottom: -60px; right: -40px;
pointer-events: none;
animation: orbFloat 7s ease-in-out infinite;
z-index: 0;
}
.sol-card:nth-child(2) .sol-card__orb { animation-delay: -2.3s; }
.sol-card:nth-child(3) .sol-card__orb { animation-delay: -4.6s; }
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-12px, -18px) scale(1.08); }
66% { transform: translate(10px, -8px) scale(0.95); }
}
/* Featured card */
.sol-card--featured {
border-color: rgba(124, 58, 237, 0.5);
background:
radial-gradient(ellipse at 15% 85%, rgba(124, 58, 237, 0.28) 0%, transparent 52%),
radial-gradient(ellipse at 85% 8%, rgba(167, 139, 250, 0.15) 0%, transparent 48%),
rgba(14, 8, 40, 0.72);
animation: featuredPulse 4.5s ease-in-out infinite;
}
.sol-card--featured::before {
animation-duration: 18s;
background: conic-gradient(
from 0deg at 38% 52%,
transparent 0deg,
rgba(139, 92, 246, 0.18) 50deg,
rgba(167, 139, 250, 0.10) 100deg,
transparent 155deg,
rgba(124, 58, 237, 0.10) 220deg,
transparent 275deg,
rgba(167, 139, 250, 0.14) 330deg,
transparent 360deg
);
}
@keyframes featuredPulse {
0%, 100% {
box-shadow:
0 0 0 1px rgba(124,58,237,0.45),
0 0 32px rgba(124,58,237,0.12),
inset 0 1px 1px rgba(255,255,255,0.10);
}
50% {
box-shadow:
0 0 0 1px rgba(167,139,250,0.70),
0 0 60px rgba(124,58,237,0.22),
0 0 90px rgba(124,58,237,0.07),
inset 0 1px 1px rgba(255,255,255,0.14);
}
}
.sol-card--featured .sol-card__orb {
background: radial-gradient(circle, rgba(139,92,246,0.32) 0%, transparent 70%);
width: 260px; height: 260px;
bottom: -80px; right: -50px;
}
.sol-card--featured:hover {
transform: translateY(-5px);
box-shadow:
0 0 0 1px rgba(167,139,250,0.65),
0 24px 56px rgba(124,58,237,0.20),
inset 0 1px 1px rgba(255,255,255,0.12);
}
/* Badge */
.sol-badge {
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent-light);
background: rgba(124, 58, 237, 0.18);
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: var(--r-full);
padding: 3px 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: var(--sp-5);
align-self: flex-start;
position: relative; z-index: 2;
}
.sol-badge--top {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
margin-bottom: 0;
white-space: nowrap;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: none;
background: rgba(124, 58, 237, 0.28);
border-color: rgba(167, 139, 250, 0.45);
padding: 5px 16px;
}
/* Card icon */
.sol-card__icon {
width: 44px; height: 44px;
border-radius: var(--r-sm);
background: rgba(124, 58, 237, 0.14);
border: 1px solid rgba(124, 58, 237, 0.22);
display: flex; align-items: center; justify-content: center;
color: var(--accent-light);
margin-bottom: var(--sp-4);
position: relative; z-index: 2;
flex-shrink: 0;
}
/* Card title */
.sol-card__title {
font-family: var(--font-display) !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.01em !important;
margin-bottom: var(--sp-5);
position: relative; z-index: 2;
flex-shrink: 0;
}
/* Card description */
.sol-card__desc {
font-size: clamp(13px, 1vw, 14px);
color: rgba(224, 218, 255, 0.52);
line-height: 1.6;
margin-bottom: var(--sp-5);
position: relative; z-index: 2;
}
/* Features list */
.sol-card__features {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin-bottom: var(--sp-8);
flex: 1;
position: relative; z-index: 2;
}
.sol-card__features li {
display: flex; align-items: center;
gap: var(--sp-2);
font-size: clamp(13px, 1vw, 14px);
color: rgba(224, 218, 255, 0.62);
line-height: 1.4;
}
.sol-card__features li svg { flex-shrink: 0; color: var(--accent-light); opacity: 0.85; }
.sol-card__feature--green svg { color: var(--green) !important; opacity: 1; }
/* Card button */
.sol-card .btn {
position: relative; z-index: 2;
align-self: stretch;
margin-top: clamp(28px, 3vw, 44px);
justify-content: center;
font-size: clamp(13px, 1.1vw, 15px) !important;
font-weight: 600 !important;
padding-block: 12px !important;
letter-spacing: 0.01em;
}
/* Custom CTA below grid */
.solutions-custom-cta {
display: flex;
justify-content: center;
margin-top: clamp(28px, 3vw, 44px);
}
.solutions-custom-cta .btn { display: inline-flex; align-items: center; gap: var(--sp-2); }
.solutions-custom-cta .btn svg { transition: transform var(--dur) var(--ease); }
.solutions-custom-cta .btn:hover svg { transform: translateX(4px); }
/* ─── ECOSYSTEM ──────────────────────────────────────────── */
#ecosistema {
padding-block: var(--sp-16);
border-top: 1px solid var(--border);
}
.ecosystem-label {
text-align: center;
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg-subtle);
letter-spacing: 0.03em;
margin-bottom: var(--sp-8);
}
.tech-logos {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 3vw, 40px);
flex-wrap: wrap;
}
.tech-logo {
display: flex; align-items: center;
gap: 6px;
opacity: 0.4;
transition: opacity var(--dur) var(--ease);
}
.tech-logo:hover { opacity: 0.85; }
.tech-logo__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
opacity: 0.6;
}
.tech-logo__name {
font-family: var(--font-display);
font-size: clamp(13px, 1.2vw, 16px);
font-weight: 600;
color: var(--fg) !important;
}
.tech-logo-sep { display: block; width: 1px; height: 18px; background: var(--border); }
/* ─── CTA FINAL ──────────────────────────────────────────── */
#cta {
position: relative;
padding-block: var(--sp-32);
text-align: center;
overflow: hidden;
}
.cta-glow {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: clamp(300px, 50vw, 600px);
height: clamp(200px, 30vw, 400px);
background: radial-gradient(ellipse at center, rgba(109,40,217,0.25) 0%, transparent 70%);
pointer-events: none;
animation: cta-glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes cta-glow-pulse {
0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
.cta-inner { position: relative; z-index: 1; }
.cta-title {
font-family: var(--font-display) !important;
font-size: var(--text-section-h) !important;
font-weight: 500 !important;
color: var(--fg) !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
margin-bottom: var(--sp-5);
}
.cta-desc {
font-size: var(--text-base);
color: var(--fg-muted);
max-width: 440px;
margin: 0 auto var(--sp-8);
line-height: 1.7;
}
/* ─── FOOTER (all pages) ─────────────────────────────────── */
#footer {
background: #040310 !important;
border-top: 1px solid var(--border);
padding-top: var(--sp-16);
font-family: var(--font-body);
}
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: clamp(24px, 4vw, 48px);
padding-bottom: var(--sp-16);
width: min(calc(100% - var(--gutter) * 2), var(--container));
margin-inline: auto;
}
.footer-logo { display: inline-block; margin-bottom: var(--sp-4); }
.footer-logo img { height: clamp(22px, 2vw, 28px); }
.footer-desc {
font-size: var(--text-sm);
color: var(--fg-subtle) !important;
line-height: 1.7;
max-width: 280px;
margin-bottom: var(--sp-4);
}
.footer-status {
display: flex; align-items: center;
gap: var(--sp-2);
font-size: var(--text-xs);
color: var(--fg-muted) !important;
margin-bottom: var(--sp-5);
}
.footer-nav__title {
font-size: var(--text-xs) !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-subtle) !important;
margin-bottom: var(--sp-4);
}
.footer-nav ul {
display: flex;
flex-direction: column;
gap: var(--sp-3);
list-style: none;
padding: 0; margin: 0;
}
.footer-nav a {
font-size: var(--text-sm);
color: var(--fg-muted) !important;
transition: color var(--dur) var(--ease);
text-decoration: none;
}
.footer-nav a:hover { color: var(--fg) !important; }
.footer-bottom {
border-top: 1px solid var(--border);
padding: var(--sp-5) 0;
}
.footer-bottom__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
width: min(calc(100% - var(--gutter) * 2), var(--container));
margin-inline: auto;
}
.footer-bottom p {
font-size: var(--text-xs) !important;
color: var(--fg-subtle) !important;
margin: 0;
}
/* ─── SCROLL REVEAL ─────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
.footer-inner { grid-template-columns: 2fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.nav-actions { display: none; }
.nav-hamburger { display: flex; }
.hero-body { padding-block: var(--sp-10) var(--sp-8); }
.hero-content { max-width: 100%; }
.hero-stats { max-width: 100%; }
.marquee-wrapper { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.marquee-intro { width: 100%; }
.marquee-intro p { text-align: center; }
.feature-card { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.feature-card__left { max-width: 100%; width: 100%; }
.solutions-grid {
grid-template-columns: 1fr;
max-width: 480px;
margin-inline: auto;
}
.sol-card--featured { order: -1; }
.tech-logo-sep { display: none; }
.tech-logos { gap: var(--sp-6); }
.footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
.hero-headline { font-size: 44px !important; }
.hero-stats { flex-direction: row; border-radius: var(--r-lg); }
.hero-stat-sep { width: 1px; height: auto; align-self: stretch; }
.hero-stat-card { padding: var(--sp-3) var(--sp-2); gap: 3px; }
.stat-value { font-size: clamp(14px, 4.5vw, 18px); }
.stat-label { font-size: 10px; line-height: 1.25; }
.stat-indicator { font-size: 9px; gap: 3px; margin-top: 2px; }
.solutions-grid { max-width: 100%; }
.footer-inner { grid-template-columns: 1fr; }
}
/* ─── OVERFLOW MOBILE — previene scroll horizontal en todas las páginas ── */
/* overflow-x: clip (no overflow: hidden) — clip no crea BFC, permite position: sticky */
@media (max-width: 768px) {
html {
overflow-x: clip !important;
}
body {
overflow-x: clip !important;
max-width: 100vw !important;
}
/* Glow decorativo de la store — 700px fijo desborda en mobile */
.pricing-glow-bg {
width: 100% !important;
max-width: 100vw !important;
}
}
/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.sol-card,
.sol-card::before,
.sol-card__orb,
.sol-card--featured { opacity: 1 !important; transform: none !important; animation: none !important; }
.hero-bg, .cta-glow, .dot--pulse { animation: none !important; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════
CLIENT AREA — LIGHT MODE
Scope: body:not(.hd-dark-page):not(.hd-homepage)
No dark backgrounds. Solo tipografía, espaciado, radii y
contraste del design system aplicados sobre Bootstrap 4.
═══════════════════════════════════════════════════════════ */
/* ─── Light mode tokens ──────────────────────────────────── */
:root {
--ca-bg: #f5f3ff; /* fondo general: blanco con tinte púrpura */
--ca-bg-card: #ffffff;
--ca-border: rgba(124, 58, 237, 0.10);
--ca-border-soft: rgba(0, 0, 0, 0.06);
--ca-fg: #1a1629; /* texto principal oscuro */
--ca-fg-muted: #5c5272; /* texto secundario */
--ca-fg-subtle: #9088a8; /* placeholders, hints */
--ca-shadow: 0 2px 12px rgba(124, 58, 237, 0.07), 0 1px 3px rgba(0,0,0,0.04);
--ca-shadow-hover:0 6px 24px rgba(124, 58, 237, 0.12), 0 2px 6px rgba(0,0,0,0.06);
}
/* ─── Página y tipografía base ───────────────────────────── */
/* :not(:has(.pricing-container)) excluye la store page, que es oscura */
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) {
background: var(--ca-bg) !important;
font-family: var(--font-body) !important;
color: var(--ca-fg) !important;
-webkit-font-smoothing: antialiased;
}
/* Headings — color oscuro en modo claro (excluye store page) */
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) h1,
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) h2,
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) h3,
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) h4,
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) h5,
body:not(.hd-dark-page):not(.hd-homepage):not(:has(.pricing-container)) h6 {
color: var(--ca-fg) !important;
}
/* Párrafos y texto general */
body:not(.hd-dark-page):not(.hd-homepage) p,
body:not(.hd-dark-page):not(.hd-homepage) .text-muted,
body:not(.hd-dark-page):not(.hd-homepage) small {
color: var(--ca-fg-muted) !important;
}
/* Iconos FontAwesome dentro del contenido — heredan color del padre, nunca blancos */
/* Acotado a section#main-body: no afecta navbar ni footer */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .fas,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .far,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .fal,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .fab,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .fad {
color: inherit;
}
/* ─── Main body container ────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body {
padding-top: var(--sp-8) !important;
padding-bottom: var(--sp-16) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .primary-content {
background: transparent !important;
}
/* ─── Verification banner ────────────────────────────────── */
/* Aplica solo a .verification-banner en cualquier página,
sin prefijo de body — no interfiere con el resto del layout */
.verification-banner {
background: rgba(124, 58, 237, 0.07) !important;
border-bottom: 1px solid rgba(124, 58, 237, 0.15) !important;
border-top: none !important;
padding: 8px 0 !important;
font-family: var(--font-body) !important;
}
.verification-banner .row {
align-items: center !important;
}
.verification-banner .fa-exclamation-triangle {
color: var(--accent) !important;
font-size: 13px !important;
margin-right: 7px !important;
}
.verification-banner .text {
font-size: 12px !important;
color: var(--ca-fg-muted) !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
.verification-banner .btn-resend-verify-email {
background: transparent !important;
border: 1px solid rgba(124, 58, 237, 0.35) !important;
color: var(--accent) !important;
border-radius: var(--r-full) !important;
font-size: 11px !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
padding: 4px 14px !important;
white-space: nowrap !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: background 0.2s, border-color 0.2s !important;
}
.verification-banner .btn-resend-verify-email:hover {
background: rgba(124, 58, 237, 0.08) !important;
border-color: var(--accent) !important;
}
.verification-banner .close {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(90, 80, 120, 0.6) !important;
font-size: 18px !important;
line-height: 1 !important;
padding: 4px 8px !important;
width: auto !important;
margin: 0 !important;
opacity: 1 !important;
transition: color 0.15s !important;
}
.verification-banner .close:hover {
color: var(--accent) !important;
}
/* ─── Breadcrumb ─────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .master-breadcrumb {
background: transparent !important;
border-bottom: 1px solid var(--ca-border-soft) !important;
margin-bottom: var(--sp-6) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .breadcrumb {
background: transparent !important;
padding: var(--sp-3) 0 !important;
margin: 0 !important;
font-size: 12px !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .breadcrumb-item,
body:not(.hd-dark-page):not(.hd-homepage) .breadcrumb-item a {
font-size: 12px !important;
color: var(--ca-fg-subtle) !important;
text-decoration: none !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .breadcrumb-item a:hover {
color: var(--accent) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .breadcrumb-item.active {
color: var(--ca-fg-muted) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .breadcrumb-item + .breadcrumb-item::before {
color: var(--ca-fg-subtle) !important;
}
/* ─── Cards ──────────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .card {
background: var(--ca-bg-card) !important;
border: 1px solid var(--ca-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--ca-shadow) !important;
margin-bottom: var(--sp-6);
}
body:not(.hd-dark-page):not(.hd-homepage) .card-header {
background: transparent !important;
border-bottom: 1px solid var(--ca-border-soft) !important;
padding: var(--sp-5) var(--sp-6) !important;
font-family: var(--font-display) !important;
font-size: var(--text-base) !important;
font-weight: 500 !important;
color: var(--ca-fg) !important;
border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .card-body {
background: transparent !important;
padding: var(--sp-6) !important;
color: var(--ca-fg-muted) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .card-footer {
background: transparent !important;
border-top: 1px solid var(--ca-border-soft) !important;
padding: var(--sp-4) var(--sp-6) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .card-title {
font-family: var(--font-display) !important;
font-size: var(--text-lg) !important;
font-weight: 500 !important;
color: var(--ca-fg) !important;
margin-bottom: var(--sp-3) !important;
}
/* Títulos dentro de .card-header: h3/h4/h5 y .panel-title
WHMCS los renderiza como Bootstrap h3 (28px) — los reducimos
a un tamaño de etiqueta compacto para no dominar el layout */
body:not(.hd-dark-page):not(.hd-homepage) .card-header h1,
body:not(.hd-dark-page):not(.hd-homepage) .card-header h2,
body:not(.hd-dark-page):not(.hd-homepage) .card-header h3,
body:not(.hd-dark-page):not(.hd-homepage) .card-header h4,
body:not(.hd-dark-page):not(.hd-homepage) .card-header h5,
body:not(.hd-dark-page):not(.hd-homepage) .card-header h6,
body:not(.hd-dark-page):not(.hd-homepage) .card-header .panel-title {
font-size: var(--text-sm) !important;
font-weight: 600 !important;
color: var(--ca-fg-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* ─── Sidebar ────────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .card-sidebar {
background: var(--ca-bg-card) !important;
border: 1px solid var(--ca-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--ca-shadow) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .card-sidebar .card-header {
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
color: var(--ca-fg-subtle) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .list-group-flush {
border-radius: 0 !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item {
background: transparent !important;
border-color: var(--ca-border-soft) !important;
color: var(--ca-fg-muted) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
padding: var(--sp-3) var(--sp-5) !important;
transition: background 0.15s, color 0.15s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item-action:hover,
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item-action:focus {
background: rgba(124, 58, 237, 0.05) !important;
color: var(--accent) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item.active {
background: rgba(124, 58, 237, 0.08) !important;
border-color: var(--ca-border-soft) !important;
color: var(--accent) !important;
font-weight: 600 !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item.active .fas,
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item.active .far {
color: var(--accent) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .sidebar-menu-item-icon-wrapper {
color: var(--ca-fg-subtle) !important;
margin-right: var(--sp-3) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .list-group-item.active .sidebar-menu-item-icon-wrapper {
color: var(--accent) !important;
}
/* ─── Botones ─────────────────────────────────────────────── */
/* Base: tipografía, radio y espaciado para todos los .btn del CA */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .btn {
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
font-weight: 500 !important;
border-radius: var(--r-full) !important;
padding: 8px 20px !important;
margin: 0 var(--sp-2) var(--sp-2) 0 !important;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--sp-2) !important;
white-space: nowrap !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-primary {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
border-radius: var(--r-full) !important;
padding: 8px 20px !important;
font-size: var(--text-sm) !important;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-primary:hover {
background: var(--accent-mid) !important;
border-color: var(--accent-mid) !important;
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
transform: translateY(-1px) !important;
}
/* bg: var(--ca-bg) en lugar de #fff — visible sobre tarjetas blancas */
body:not(.hd-dark-page):not(.hd-homepage) .btn-default,
body:not(.hd-dark-page):not(.hd-homepage) .btn-secondary {
background: var(--ca-bg) !important;
border: 1px solid var(--ca-border) !important;
color: var(--ca-fg) !important;
font-family: var(--font-body) !important;
font-weight: 500 !important;
border-radius: var(--r-full) !important;
padding: 8px 20px !important;
font-size: var(--text-sm) !important;
transition: background 0.2s, border-color 0.2s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-default:hover,
body:not(.hd-dark-page):not(.hd-homepage) .btn-secondary:hover {
background: rgba(124, 58, 237, 0.08) !important;
border-color: rgba(124, 58, 237, 0.25) !important;
color: var(--ca-fg) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-success {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
border-radius: var(--r-full) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: var(--text-sm) !important;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-success:hover {
background: var(--accent-mid) !important;
border-color: var(--accent-mid) !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
transform: translateY(-1px) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-danger {
border-radius: var(--r-full) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: var(--text-sm) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .btn-link {
color: var(--accent) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
}
/* ─── Formularios ─────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .form-control {
background: #fff !important;
border: 1px solid rgba(124, 58, 237, 0.15) !important;
border-radius: var(--r-md) !important;
color: var(--ca-fg) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
height: 42px !important;
padding: 0 var(--sp-4) !important;
box-shadow: none !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .form-control::placeholder {
color: var(--ca-fg-subtle) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .form-control:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
outline: none !important;
}
body:not(.hd-dark-page):not(.hd-homepage) select.form-control {
height: 42px !important;
}
body:not(.hd-dark-page):not(.hd-homepage) textarea.form-control {
height: auto !important;
padding: var(--sp-3) var(--sp-4) !important;
line-height: 1.6 !important;
}
/* ─── Store product — sidebar-collapsed ─────────────────────
El sidebar con "Categorías" / "Acciones" lo oculta Nexus en desktop
pero lo restaura en mobile. Forzamos none en todas las resoluciones. */
.sidebar-collapsed {
display: none !important;
}
/* ─── Store product — opciones de dominio ───────────────────
/store/web-hosting/* — Ocultar "Registrar" y "Transferir".
Solo mostrar "Utilizaré mi dominio existente" (#selowndomain).
:has() es soportado en Chrome 105+, Firefox 121+, Safari 15.4+. */
.option:has(#selregister),
.option:has(#seltransfer) {
display: none !important;
}
/* ─── Store product — "Utilizaré mi dominio existente" ──────
Overrides exactos sobre el tema padre (nexus). */
.domain-input-group .input-group-addon,
.domain-input-group .input-group-text,
.input-group .input-group-addon,
.input-group .input-group-text {
min-height: 55px !important;
border: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-left: none !important;
box-shadow: none !important;
background: #f8fafc !important;
color: #64748b !important;
font-weight: 800 !important;
display: flex !important;
align-items: center !important;
padding: 0 15px !important;
}
@media (min-width: 768px) {
.domain-input-group > .row:first-of-type {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
margin: 0 !important;
overflow: visible !important;
gap: 20px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
}
@media (max-width: 767px) {
.domain-input-group .domains-row {
display: flex !important;
flex-direction: row !important;
gap: 0 !important;
border: none !important;
border-radius: 8px !important;
overflow: visible !important;
}
.domain-input-group .input-group-addon,
.domain-input-group .input-group-text {
border: none !important;
border-right: none !important;
}
}
/* ─── Store product — buscador IA de dominios ───────────────
/store/web-hosting/* — layout: col-sm-8 (textarea) + col-sm-2 (botón)
El .domains-row es un Bootstrap .row con margin: 0 -15px que hace que
la textarea desborde el gutter entre columnas. Fix: cancelar esos márgenes.
Aplica a TODAS las instancias de .domains-row en la página. */
.domains-row {
margin-left: 0 !important; /* cancela el -15px de Bootstrap .row */
margin-right: 0 !important;
}
/* La textarea debe terminar antes del botón con 8px de gap visual */
.domains-row textarea.form-control,
.domains-row .form-control {
margin-right: 8px !important;
border-radius: var(--r-md) !important;
resize: vertical !important;
min-height: 52px !important;
}
/* Botón: altura alineada con la textarea, full width dentro de su col */
#btnCheckAvailability {
width: 100% !important;
min-height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--sp-2) !important;
white-space: nowrap !important;
}
/* ─── Domain checker (clientarea — domainchecker.php) ───────
Acotado a form[action="domainchecker.php"] para no interferir
con el buscador de dominios del carrito (cart.php) */
form[action="domainchecker.php"] .input-group {
flex-direction: column !important;
gap: var(--sp-3) !important;
align-items: stretch !important;
}
form[action="domainchecker.php"] .input-group .form-control {
width: 100% !important;
height: 52px !important;
font-size: var(--text-md) !important;
border-radius: var(--r-md) !important;
border-right: 1px solid rgba(124, 58, 237, 0.15) !important;
}
form[action="domainchecker.php"] .input-group .input-group-btn,
form[action="domainchecker.php"] .input-group .input-group-append {
display: flex !important;
gap: var(--sp-3) !important;
width: 100% !important;
}
form[action="domainchecker.php"] .input-group .input-group-btn .btn,
form[action="domainchecker.php"] .input-group .input-group-append .btn {
flex: 1 !important;
margin: 0 !important;
justify-content: center !important;
border-radius: var(--r-full) !important;
padding: 10px 20px !important;
font-size: var(--text-sm) !important;
font-weight: 600 !important;
}
body:not(.hd-dark-page):not(.hd-homepage) label {
font-family: var(--font-body) !important;
font-size: var(--text-xs) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--ca-fg-muted) !important;
margin-bottom: var(--sp-2) !important;
}
/* ─── Tablas ──────────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .table {
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
color: var(--ca-fg) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .table thead th {
font-size: var(--text-xs) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
color: var(--ca-fg-subtle) !important;
border-bottom: 2px solid var(--ca-border-soft) !important;
padding: var(--sp-3) var(--sp-4) !important;
background: transparent !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .table td {
border-color: var(--ca-border-soft) !important;
padding: var(--sp-4) !important;
vertical-align: middle !important;
color: var(--ca-fg-muted) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .table-striped tbody tr:nth-of-type(odd) {
background: rgba(124, 58, 237, 0.02) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .table-hover tbody tr:hover {
background: rgba(124, 58, 237, 0.04) !important;
}
/* ─── Badges y labels de estado ──────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .badge {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 3px 9px !important;
border-radius: var(--r-full) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .badge-success,
body:not(.hd-dark-page):not(.hd-homepage) .badge-primary {
background: rgba(34, 197, 94, 0.12) !important;
color: #15803d !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .badge-warning {
background: rgba(245, 158, 11, 0.12) !important;
color: #b45309 !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .badge-danger {
background: rgba(239, 68, 68, 0.12) !important;
color: #b91c1c !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .badge-secondary,
body:not(.hd-dark-page):not(.hd-homepage) .badge-info {
background: rgba(124, 58, 237, 0.10) !important;
color: var(--accent) !important;
}
/* ─── Alertas ─────────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .alert {
border-radius: var(--r-md) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
border-width: 1px !important;
border-left-width: 3px !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .alert-success {
background: rgba(34, 197, 94, 0.06) !important;
border-color: rgba(34, 197, 94, 0.3) !important;
color: #15803d !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .alert-danger,
body:not(.hd-dark-page):not(.hd-homepage) .alert-error {
background: rgba(239, 68, 68, 0.06) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
color: #b91c1c !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .alert-info {
background: rgba(124, 58, 237, 0.06) !important;
border-color: rgba(124, 58, 237, 0.25) !important;
color: var(--accent) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .alert-warning {
background: rgba(245, 158, 11, 0.06) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
color: #b45309 !important;
}
/* ─── Links ───────────────────────────────────────────────── */
/* Acotado a section#main-body: navbar y footer quedan fuera naturalmente */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a {
color: var(--accent) !important;
transition: color 0.15s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a:hover {
color: var(--accent-mid) !important;
text-decoration: underline !important;
}
/* Excepciones dentro del contenido: botones y nav-items no subrayan */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .btn,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .nav-link,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .list-group-item {
text-decoration: none !important;
}
/* Botones como — el selector de links pisa color; lo restauramos aquí
con section#main-body para ganar en especificidad (1,3,x vs 1,2,x) */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-primary,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-success,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-order,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-order-regular,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-order-featured {
color: #fff !important;
}
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-order:hover,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-order-regular:hover,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-order-featured:hover {
color: #fff !important;
text-decoration: none !important;
}
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-default,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body a.btn-secondary {
color: var(--ca-fg) !important;
}
/* ─── Dropdowns WHMCS navbar ─────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .dropdown-menu {
background: #fff !important;
border: 1px solid var(--ca-border) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--ca-shadow-hover) !important;
padding: var(--sp-2) 0 !important;
font-family: var(--font-body) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .dropdown-item {
font-size: var(--text-sm) !important;
color: var(--ca-fg-muted) !important;
padding: var(--sp-2) var(--sp-5) !important;
transition: background 0.15s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .dropdown-item:hover {
background: rgba(124, 58, 237, 0.06) !important;
color: var(--accent) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .dropdown-divider {
border-color: var(--ca-border-soft) !important;
}
/* ─── Nav tabs ────────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .nav-tabs {
border-bottom: 1px solid var(--ca-border-soft) !important;
margin-bottom: var(--sp-5) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .nav-tabs .nav-link {
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
font-weight: 500 !important;
color: var(--ca-fg-muted) !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
padding: var(--sp-3) var(--sp-5) !important;
transition: color 0.15s, border-color 0.15s !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .nav-tabs .nav-link:hover {
color: var(--accent) !important;
border-bottom-color: rgba(124, 58, 237, 0.3) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .nav-tabs .nav-link.active {
color: var(--accent) !important;
border-bottom: 2px solid var(--accent) !important;
font-weight: 600 !important;
}
/* ─── Paginación ──────────────────────────────────────────── */
body:not(.hd-dark-page):not(.hd-homepage) .pagination .page-link {
color: var(--accent) !important;
border-color: var(--ca-border-soft) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .pagination .page-item.active .page-link {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
body:not(.hd-dark-page):not(.hd-homepage) section#main-body {
padding-top: var(--sp-4) !important;
}
/* Padding lateral mínimo garantizado en mobile para todas las inner pages */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Cart: el .container sí existe pero el cart-body puede perder padding */
body.hd-cart section#main-body .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .card-body {
padding: var(--sp-4) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .card-header {
padding: var(--sp-4) !important;
}
body:not(.hd-dark-page):not(.hd-homepage) .table-responsive {
border-radius: var(--r-lg) !important;
overflow: hidden !important;
}
/* Full-width solo para botones de acción primarios, no para botones dentro de grupos/grids */
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .btn-primary,
body:not(.hd-dark-page):not(.hd-homepage) section#main-body .btn-success {
width: 100% !important;
justify-content: center !important;
margin-bottom: var(--sp-2) !important;
}
/* ── CART mobile — domain search page ──────────────────────
HTML real: .col-xs-10.col-10.offset-1 siempre 83.33% + offset
Input-group: textarea + #btnCheckAvailability + 2 btn-groups
en flex-row → overflow. Fix: columna 100% + stack vertical. */
/* 1. Columna del formulario: quitar offset, expandir a 100%,
mantener padding mínimo para que el form no toque el borde */
.domain-checker-bg .col-10,
.domain-checker-bg .col-xs-10,
.domain-checker-bg .col-md-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* 2. Input-group: apilar en columna */
.input-group.input-group-box {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
/* 3. Textarea: ancho completo, bordes completos */
.input-group.input-group-box textarea {
width: 100% !important;
max-width: 100% !important;
min-height: 80px !important;
border-radius: var(--r-md) !important;
border-top-right-radius: var(--r-md) !important;
border-bottom-right-radius: var(--r-md) !important;
padding: 12px !important;
resize: vertical !important;
font-size: var(--text-base) !important;
box-sizing: border-box !important;
}
/* 4. Botón "Buscar": full width, debajo del textarea */
#btnCheckAvailability {
position: static !important;
width: 100% !important;
margin: 0 !important;
border-radius: var(--r-full) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
/* 5. Dropdowns multiselect (Incluir TLDs, Longitud máx.):
permanecen en fila, no se estiran */
.input-group.input-group-box .btn-group {
width: auto !important;
flex-shrink: 0 !important;
}
.input-group.input-group-box .btn-group .btn {
border-radius: var(--r-full) !important;
font-size: var(--text-sm) !important;
}
/* 6. Fila de filtros (dropdowns + checkbox): wrap en mobile */
.input-group.input-group-box label,
.input-group.input-group-box .btn-group {
align-self: auto !important;
}
/* 7. Promo boxes al fondo: colapsar a 1 columna */
#order-standard_cart .cart-body .col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* 8. TLD pricing: las columnas col-md-4 / col-md-8 colapsan
(Bootstrap 4 ya lo hace, pero el orderform CSS puede interferir) */
.tld-pricing-header .col-md-4,
.tld-pricing-header .col-md-8,
.tld-row .col-md-4,
.tld-row .col-md-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* 9. Tablas sin .table-responsive padre → scrollable */
section#main-body .table:not(.table-responsive .table) {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
max-width: 100% !important;
}
/* 10. Padding del cart body — garantiza márgenes laterales visibles */
#order-standard_cart .cart-body {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* ═══════════════════════════════════════════════════════════
STORE — PRODUCT LISTING (/store/web-hosting)
═══════════════════════════════════════════════════════════ */
/* Fondo oscuro para la sección de tienda */
.hd-store {
position: relative;
background: var(--bg);
min-height: 60vh;
padding: var(--sp-16) var(--sp-4) var(--sp-24);
margin: calc(var(--sp-6) * -1) calc(-50vw + 50%) 0;
width: 100vw;
overflow: hidden;
}
.hd-store__glow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 400px;
background: radial-gradient(ellipse at center top, rgba(124, 58, 237, 0.18) 0%, transparent 65%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
/* Header */
.hd-store__header {
position: relative;
z-index: 1;
text-align: center;
max-width: 600px;
margin: 0 auto var(--sp-16);
}
.hd-store__tag {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-light);
background: rgba(124, 58, 237, 0.12);
border: 1px solid rgba(124, 58, 237, 0.25);
border-radius: var(--r-full);
padding: var(--sp-1) var(--sp-4);
margin-bottom: var(--sp-5);
}
.hd-store__title {
font-family: var(--font-display) !important;
font-size: clamp(32px, 4vw, 52px) !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.025em;
line-height: 1.1 !important;
margin: 0 0 var(--sp-4) !important;
}
.hd-store__title-accent {
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hd-store__subtitle {
font-family: var(--font-body);
font-size: var(--text-md);
color: var(--fg-muted);
margin: 0;
line-height: 1.6;
}
/* Plans grid */
.hd-plans {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-5);
max-width: 1100px;
margin: 0 auto;
}
/* Plan card */
.hd-plan {
position: relative;
display: flex;
flex-direction: column;
width: 220px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-xl);
padding: var(--sp-8) var(--sp-6);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.hd-plan:hover {
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
/* Featured card */
.hd-plan--featured {
background: rgba(124, 58, 237, 0.1);
border-color: rgba(124, 58, 237, 0.4);
box-shadow: 0 0 40px rgba(124, 58, 237, 0.15);
}
.hd-plan--featured:hover {
border-color: rgba(124, 58, 237, 0.65);
box-shadow: 0 16px 56px rgba(124, 58, 237, 0.28);
}
/* Custom / A medida card */
.hd-plan--custom {
border-style: dashed;
border-color: rgba(255, 255, 255, 0.1);
}
/* Badge */
.hd-plan__badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: var(--sp-1) var(--sp-4);
border-radius: var(--r-full);
white-space: nowrap;
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45);
}
/* Plan top section */
.hd-plan__top {
margin-bottom: var(--sp-5);
}
.hd-plan__name {
font-family: var(--font-display) !important;
font-size: var(--text-xl) !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-4) !important;
}
/* Pricing */
.hd-plan__pricing {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.hd-plan__price-row {
display: flex;
align-items: baseline;
gap: var(--sp-1);
}
.hd-plan__price {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 600;
color: var(--fg);
letter-spacing: -0.03em;
line-height: 1;
}
.hd-plan--featured .hd-plan__price {
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hd-plan__cycle {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
}
.hd-plan__price-custom {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 500;
color: var(--fg-muted);
}
.hd-plan__annual {
font-family: var(--font-body);
font-size: var(--text-xs);
color: var(--fg-subtle);
margin: 0;
}
/* Divider */
.hd-plan__divider {
height: 1px;
background: rgba(255, 255, 255, 0.07);
margin: var(--sp-5) 0;
}
/* Features — WHMCS outputs description HTML, we style whatever comes out */
.hd-plan__features {
flex: 1;
margin-bottom: var(--sp-6);
}
.hd-plan__features ul,
.hd-plan__feature-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.hd-plan__features li,
.hd-plan__feature-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
line-height: 1.4;
}
.hd-plan__features li i,
.hd-plan__features li::before,
.hd-plan__feature-list li i {
color: var(--green);
font-size: 11px;
margin-top: 3px;
flex-shrink: 0;
}
/* For plans where description uses checkmarks or other icons */
.hd-plan--featured .hd-plan__features li,
.hd-plan--featured .hd-plan__feature-list li {
color: var(--fg);
}
/* Button */
.hd-plan__btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
width: 100%;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-full);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none !important;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--fg) !important;
margin-top: auto;
}
.hd-plan__btn:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
color: var(--fg) !important;
}
.hd-plan__btn--featured {
background: var(--accent) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}
.hd-plan__btn--featured:hover {
background: var(--accent-mid) !important;
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.5);
color: #fff !important;
}
.hd-plan__btn--ghost {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--fg-muted) !important;
}
.hd-plan__btn--ghost:hover {
border-color: rgba(255, 255, 255, 0.3) !important;
color: var(--fg) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
/* Responsive */
@media (max-width: 768px) {
.hd-plans {
flex-direction: column;
align-items: center;
}
.hd-plan {
width: 100%;
max-width: 360px;
}
}
/* Breadcrumb sobre fondo oscuro (la store page no oculta el breadcrumb) */
.hd-store ~ * .master-breadcrumb,
section#main-body:has(.hd-store) .master-breadcrumb {
background: var(--bg);
}
section#main-body:has(.hd-store) {
background: var(--bg);
padding-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════
STORE — LEGACY CLASS OVERRIDES
La página /store/web-hosting carga HTML desde la base de datos
de WHMCS (descripción del grupo de productos), no desde un .tpl.
Estos overrides apuntan a las clases existentes en ese HTML.
═══════════════════════════════════════════════════════════ */
/* Oscurecer el fondo de la página de tienda + color de títulos */
body:has(.pricing-container) {
background: var(--bg) !important;
overflow-x: hidden !important;
}
/* Todos los h1-h6 de la página de tienda en color claro — fondo es oscuro */
body:has(.pricing-container) h1,
body:has(.pricing-container) h2,
body:has(.pricing-container) h3,
body:has(.pricing-container) h4,
body:has(.pricing-container) h5,
body:has(.pricing-container) h6 {
color: var(--fg) !important;
}
section#main-body:has(.pricing-container) {
background: transparent !important;
padding-top: var(--sp-16) !important;
}
/* Fondo decorativo que viene del HTML de la descripción */
.pricing-glow-bg {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 700px !important;
height: 400px !important;
background: radial-gradient(ellipse at center top, rgba(124, 58, 237, 0.2) 0%, transparent 65%) !important;
filter: blur(60px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Contenedor de planes */
.pricing-container {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: var(--sp-5) !important;
max-width: 1100px !important;
margin: 0 auto !important;
/* padding-top generoso para que el badge absoluto no se recorte */
padding: 28px var(--sp-4) var(--sp-16) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
font-family: var(--font-body) !important;
}
/* Tarjeta de plan */
.pricing-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: 220px !important;
flex-shrink: 0 !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--r-xl) !important;
padding: var(--sp-8) var(--sp-6) !important;
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s !important;
box-shadow: none !important;
overflow: visible !important;
}
.pricing-card:hover {
border-color: rgba(255, 255, 255, 0.15) !important;
transform: translateY(-4px) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
}
/* Tarjeta destacada */
.pricing-card.featured {
background: rgba(124, 58, 237, 0.1) !important;
border-color: rgba(124, 58, 237, 0.4) !important;
box-shadow: 0 0 40px rgba(124, 58, 237, 0.15) !important;
}
.pricing-card.featured:hover {
border-color: rgba(124, 58, 237, 0.65) !important;
box-shadow: 0 16px 56px rgba(124, 58, 237, 0.28) !important;
}
/* Badge "Más popular"
Usamos .pricing-container .popular-badge para tener especificidad 0,2,0
y ganar sobre cualquier regla de color/peso de los hijos de .pricing-card */
.pricing-container .popular-badge {
position: absolute !important;
top: -13px !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: var(--accent) !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-size: var(--text-xs) !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 4px 14px !important;
border-radius: var(--r-full) !important;
white-space: nowrap !important;
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45) !important;
border: none !important;
z-index: 2 !important;
}
/* Nombre del plan — .pricing-name tiene inline style, necesita !important */
.pricing-card .pricing-name {
font-family: var(--font-display) !important;
font-size: var(--text-xl) !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.01em !important;
text-transform: uppercase !important;
margin: 0 0 var(--sp-4) !important;
}
/* Texto gradiente (nombre del plan en tarjeta destacada) */
.text-gradient {
background: var(--gradient-hero) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Descripción corta del plan (CPU, RAM, DISCO, etc.) */
.product-short-description {
font-family: var(--font-body) !important;
font-size: var(--text-xs) !important;
font-weight: 400 !important;
color: var(--fg-muted) !important;
line-height: 1.6 !important;
margin-bottom: var(--sp-5) !important;
}
/* Eliminar bold de cualquier strong/b dentro de la descripción */
.product-short-description strong,
.product-short-description b,
.pricing-card .product-short-description * {
font-weight: 400 !important;
font-size: inherit !important;
}
/* Wrapper del precio */
.price-wrapper {
display: flex !important;
flex-direction: column !important;
gap: var(--sp-1) !important;
margin-bottom: var(--sp-5) !important;
}
.price-wrapper .price-row,
.price-wrapper > div:first-child {
display: flex !important;
align-items: baseline !important;
gap: var(--sp-1) !important;
}
/* Monto del precio */
.price-amount {
font-family: var(--font-display) !important;
font-size: var(--text-3xl) !important;
font-weight: 600 !important;
color: var(--fg) !important;
letter-spacing: -0.03em !important;
line-height: 1 !important;
}
.pricing-card.featured .price-amount {
background: var(--gradient-hero) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Ciclo (/mes) */
.price-cycle {
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
color: var(--fg-muted) !important;
}
/* Precio anual ("Facturado X al año") */
.price-real-billed {
font-family: var(--font-body) !important;
font-size: var(--text-xs) !important;
font-weight: 400 !important;
color: var(--fg-muted) !important;
text-align: left !important;
margin: 0 !important;
}
/* Divisor */
.pricing-divider {
height: 1px !important;
background: rgba(255, 255, 255, 0.07) !important;
margin: var(--sp-5) 0 !important;
border: none !important;
}
/* Lista de características */
.custom-feature-list {
list-style: none !important;
margin: 0 0 var(--sp-6) !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--sp-3) !important;
flex: 1 !important;
}
.custom-feature-list li {
display: flex !important;
align-items: flex-start !important;
gap: var(--sp-2) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
color: var(--fg-muted) !important;
line-height: 1.4 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.pricing-card.featured .custom-feature-list li {
color: var(--fg) !important;
}
/* Ícono de check en los features */
.custom-feature-list li i,
.custom-feature-list li svg,
.custom-feature-list li::before {
color: var(--green) !important;
font-size: 11px !important;
margin-top: 3px !important;
flex-shrink: 0 !important;
}
/* Botones de orden */
.btn-order,
.btn-order-regular,
.btn-order-featured,
.btn-order:hover,
.btn-order-regular:hover,
.btn-order-featured:hover,
#product5 .btn-order,
#product5 .btn-order:hover {
color: #ffffff !important;
}
.btn-order,
.btn-order-regular,
.btn-order-featured {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--sp-2) !important;
width: 100% !important;
padding: 13px var(--sp-6) !important;
border-radius: var(--r-full) !important;
font-family: var(--font-body) !important;
font-size: 1rem !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.15s ease, box-shadow 0.22s ease !important;
cursor: pointer !important;
text-align: center !important;
margin-top: auto !important;
letter-spacing: 0.04em !important;
}
/* Botón estándar — ghost limpio, borde blanco, texto blanco */
.btn-order-regular {
background: transparent !important;
border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
color: #fff !important;
}
/* Hover: borde más brillante, texto siempre blanco */
.btn-order-regular:hover,
.btn-order-regular:focus {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.8) !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}
/* Botón CORE (product5) y featured — gradiente, llamativo */
.btn-order-featured,
#product5 .btn-order {
background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
border: 1.5px solid rgba(196, 181, 253, 0.5) !important;
color: #fff !important;
box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5) !important;
}
.btn-order-featured:hover,
.btn-order-featured:focus,
#product5 .btn-order:hover,
#product5 .btn-order:focus {
background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
border-color: rgba(196, 181, 253, 0.8) !important;
color: #fff !important;
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.65) !important;
transform: translateY(-2px) !important;
}
/* Textos generales — color claro + peso normal.
Evitamos span/div genéricos para no pelear con la especificidad del badge. */
.pricing-card p,
.pricing-card li,
.pricing-card label {
color: var(--fg-muted) !important;
font-weight: 400 !important;
}
/* Quitar bold de strong/b sin tocar el color (hereda del padre) */
.pricing-card strong,
.pricing-card b {
font-weight: 400 !important;
}
/* Títulos dentro de las tarjetas — claros sobre fondo oscuro */
.pricing-card h1,
.pricing-card h2,
.pricing-card h3,
.pricing-card h4,
.pricing-card h5,
.pricing-card h6 {
color: var(--fg) !important;
font-weight: 500 !important;
}
/* Badge "Más popular" — especificidad mayor para ganar sobre cualquier regla de color */
.pricing-card .popular-badge {
color: #fff !important;
font-weight: 700 !important;
}
/* Responsive — store legacy */
@media (max-width: 768px) {
.pricing-container {
flex-direction: column !important;
align-items: center !important;
padding: var(--sp-4) !important;
}
.pricing-card {
width: 100% !important;
max-width: 360px !important;
}
}
/* ═══════════════════════════════════════════════════
PLANS SLIDER — homepage #planes
Todos los selectores usan #planes como padre.
═══════════════════════════════════════════════════ */
#planes {
padding: var(--sp-24) 0;
position: relative;
overflow: hidden;
}
#planes .plans-header {
text-align: center;
margin-bottom: var(--sp-12);
}
#planes .plans-label {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-light);
background: rgba(124, 58, 237, 0.12);
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: var(--r-full);
padding: 4px 14px;
margin-bottom: var(--sp-4);
}
#planes .plans-title {
font-family: 'General Sans', sans-serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: var(--fg);
margin: var(--sp-3) 0 var(--sp-3);
line-height: 1.15;
}
#planes .plans-subtitle {
font-size: var(--text-base);
color: var(--fg-muted);
max-width: 480px;
margin: 0 auto;
line-height: 1.6;
}
#planes .plans-slider-wrap {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-3);
}
#planes .plans-slider {
flex: 1;
overflow: hidden;
border-radius: var(--r-lg);
}
#planes .plans-track {
display: flex;
gap: 24px;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
#planes .plan-slide {
flex: 0 0 calc((100% - 48px) / 3);
min-width: 0;
}
#planes .plan-card {
height: 100%;
border-radius: var(--r-lg);
padding: var(--sp-8);
display: flex;
flex-direction: column;
gap: var(--sp-6);
transition: transform 0.25s ease, box-shadow 0.25s ease;
background: rgba(255,255,255,0.03);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}
#planes .plan-card:hover {
transform: translateY(-4px);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 8px 32px rgba(124,58,237,0.18);
border-color: rgba(167, 139, 250, 0.2);
}
#planes .plan-slide--featured {
position: relative;
}
#planes .plan-card--featured {
background: rgba(124, 58, 237, 0.1);
border-color: rgba(124, 58, 237, 0.4);
}
#planes .plan-card--featured:hover {
border-color: rgba(124, 58, 237, 0.65);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 16px 56px rgba(124,58,237,0.28);
}
#planes .plan-card__badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent-light);
background: rgba(124, 58, 237, 0.28);
border: 1px solid rgba(167, 139, 250, 0.45);
border-radius: var(--r-full);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: none;
padding: 5px 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
z-index: 2;
}
#planes .plan-card__header {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
#planes .plan-card__name {
font-family: 'General Sans', sans-serif;
font-size: var(--text-lg);
font-weight: 600;
color: var(--fg);
margin: 0;
line-height: 1.3;
}
#planes .plan-card__price {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: var(--sp-2);
}
#planes .plan-card__amount {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 600;
color: var(--fg);
letter-spacing: -0.03em;
line-height: 1;
}
#planes .plan-card__currency {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 400;
color: var(--fg-muted);
align-self: flex-start;
margin-top: 4px;
}
#planes .plan-card__period {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--fg-muted);
}
#planes .plan-card__features {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
#planes .plan-card__features li {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--text-sm);
color: var(--fg-muted);
line-height: 1.5;
}
#planes .plan-card__check {
flex-shrink: 0;
color: var(--accent-light);
margin-top: 2px;
}
#planes .plan-card__cta {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
margin-top: auto;
}
#planes .plans-arrow {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--r-full);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: var(--fg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
z-index: 2;
}
#planes .plans-arrow:hover {
background: rgba(124, 58, 237, 0.2);
border-color: rgba(167, 139, 250, 0.35);
}
#planes .plans-arrow:disabled {
opacity: 0.25;
cursor: default;
pointer-events: none;
}
#planes .plans-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: var(--sp-8);
}
#planes .plans-dot {
width: 10px;
height: 10px;
border-radius: var(--r-full);
background: rgba(255,255,255,0.55);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s, width 0.2s;
flex-shrink: 0;
}
#planes .plans-dot.active {
background: var(--accent-light);
width: 24px;
}
@media (max-width: 900px) {
#planes .plan-slide {
flex: 0 0 calc((100% - 24px) / 2);
}
}
@media (max-width: 600px) {
#planes .plans-slider-wrap {
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3);
}
/* El slider es el contenedor scroll — override el overflow:hidden del base */
#planes .plans-slider {
order: 1;
flex: 0 0 100%;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
#planes .plans-slider::-webkit-scrollbar {
display: none;
}
/* El track solo es un row — sin scroll propio */
#planes .plans-track {
overflow: visible;
gap: 16px;
transform: none !important;
transition: none;
}
#planes .plans-arrow--prev { order: 2; }
#planes .plans-arrow--next { order: 3; }
#planes .plan-slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
}
/* ═══════════════════════════════════════════════════
CART CONFIG — cart.php?a=confproduct
Resumen del pedido lateral. Scoped a body.hd-cart.
Los !important son necesarios para sobrepasar
los inline styles que genera WHMCS.
═══════════════════════════════════════════════════ */
/* Fondo de página igual al resto del theme */
body.hd-cart {
background: var(--bg) !important;
}
/* Sticky panel container */
body.hd-cart .config-summary-area {
position: sticky;
top: calc(var(--nav-h) + var(--sp-6));
}
/* ── Card principal ── */
body.hd-cart .summary-card {
background:
radial-gradient(ellipse at 10% 0%, rgba(124,58,237,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 90% 100%, rgba(167,139,250,0.08) 0%, transparent 50%),
rgb(10, 6, 30) !important;
border: 1px solid rgba(167,139,250,0.2) !important;
border-radius: var(--r-xl) !important;
backdrop-filter: blur(20px) saturate(140%) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow:
0 0 0 1px rgba(124,58,237,0.08),
0 24px 60px rgba(6,4,16,0.6),
inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
/* Borde superior de acento */
body.hd-cart .summary-card::before {
content: '';
display: block;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), transparent);
}
/* Inner wrapper: padding real */
body.hd-cart .order-summary {
padding: var(--sp-6) var(--sp-6) var(--sp-4) !important;
}
/* ── Título ──
Usa #orderSummary (ID) en vez de body.hd-cart para no depender
de que $inShoppingCart esté activo en confproduct. */
#orderSummary h2 {
font-family: var(--font-display) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--accent-light) !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
padding-bottom: var(--sp-4) !important;
margin-bottom: var(--sp-5) !important;
display: flex !important;
align-items: center !important;
gap: var(--sp-2) !important;
}
#orderSummary h2 i {
color: var(--accent-light) !important;
font-size: 12px !important;
}
/* ── Nombre del plan — pill de destaque ── */
body.hd-cart .product-name {
display: block !important;
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
margin-bottom: var(--sp-1) !important;
}
/* Grupo/categoría del plan */
body.hd-cart .product-group {
display: inline-flex !important;
align-items: center !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--accent-light) !important;
background: rgba(124,58,237,0.12) !important;
border: 1px solid rgba(167,139,250,0.2) !important;
border-radius: var(--r-full) !important;
padding: 3px 10px !important;
margin-bottom: var(--sp-5) !important;
}
/* ── Eliminar pseudo-elementos del clearfix ──
Con display:flex los ::before/::after se convierten en flex items
vacíos que rompen el justify-content: space-between.
Son código muerto en contexto flex — el contenedor ya envuelve
sus hijos sin necesitar el clearfix. */
body.hd-cart .summary-container .clearfix::before,
body.hd-cart .summary-container .clearfix::after,
body.hd-cart .summary-totals .clearfix::before,
body.hd-cart .summary-totals .clearfix::after,
#orderSummary .clearfix::before,
#orderSummary .clearfix::after {
display: none !important;
}
/* ── Primera fila de precio (nombre + precio base) ── */
body.hd-cart .summary-container > .clearfix {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: var(--sp-3) var(--sp-4) !important;
background: rgba(124,58,237,0.08) !important;
border: 1px solid rgba(167,139,250,0.12) !important;
border-radius: var(--r-md) !important;
margin-bottom: var(--sp-4) !important;
}
body.hd-cart .summary-container > .clearfix .pull-left {
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
font-weight: 500 !important;
color: var(--fg) !important;
}
body.hd-cart .summary-container > .clearfix .pull-right {
font-family: var(--font-display) !important;
font-size: var(--text-base) !important;
font-weight: 500 !important;
color: var(--fg) !important;
letter-spacing: -0.01em !important;
}
/* ── Desglose de totales ── */
body.hd-cart .summary-totals {
display: flex !important;
flex-direction: column !important;
gap: var(--sp-2) !important;
padding-bottom: var(--sp-4) !important;
margin-bottom: var(--sp-4) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
body.hd-cart .summary-totals .clearfix {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
body.hd-cart .summary-totals .pull-left {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--fg-muted) !important;
}
body.hd-cart .summary-totals .pull-right {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--fg) !important;
}
/* Fila IVA — más sutil */
body.hd-cart .summary-totals .clearfix:last-child .pull-left,
body.hd-cart .summary-totals .clearfix:last-child .pull-right {
font-size: 12px !important;
color: rgba(157,152,179,0.7) !important;
}
/* ── Total a pagar ── */
body.hd-cart .total-due-today {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: var(--sp-1) !important;
padding: var(--sp-5) var(--sp-4) !important;
background: rgba(124,58,237,0.1) !important;
border: 1px solid rgba(167,139,250,0.18) !important;
border-radius: var(--r-lg) !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
margin-bottom: 0 !important;
}
body.hd-cart .total-due-today::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.2) 0%, transparent 70%);
pointer-events: none;
}
body.hd-cart .total-due-today .amt {
display: block !important;
font-family: var(--font-display) !important;
font-size: 32px !important;
font-weight: 500 !important;
letter-spacing: -0.03em !important;
background: linear-gradient(135deg, #f5f3ee 30%, var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1.1 !important;
}
body.hd-cart .total-due-today > span:last-child {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--fg-muted) !important;
}
/* ── Área del botón CTA ──
Sin background propio — hereda el de .summary-card.
Sobrepasar border-top inline con !important. */
body.hd-cart .summary-card > div:last-child,
#orderSummary ~ div,
#scrollingPanelContainer .summary-card > div.text-center {
padding: var(--sp-5) var(--sp-6) var(--sp-6) !important;
border-top: 1px solid rgba(255,255,255,0.07) !important;
background: transparent !important;
}
body.hd-cart #btnCompleteProductConfig {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--sp-2) !important;
width: 100% !important;
padding: var(--sp-4) var(--sp-6) !important;
border-radius: var(--r-full) !important;
font-family: var(--font-body) !important;
font-size: var(--text-sm) !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
background: var(--accent) !important;
border: 1px solid transparent !important;
color: #fff !important;
box-shadow: 0 4px 24px rgba(124,58,237,0.45) !important;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
cursor: pointer !important;
text-decoration: none !important;
}
body.hd-cart #btnCompleteProductConfig:hover {
background: var(--accent-mid) !important;
box-shadow: 0 8px 32px rgba(124,58,237,0.6) !important;
transform: translateY(-1px) !important;
color: #fff !important;
}
/* Nota de seguridad debajo del botón — solo en confproduct (config-summary-area)
La misma nota en cart view la pone .cart-summary-area .summary-card::after */
body.hd-cart .config-summary-area .summary-card > div:last-child::after,
#scrollingPanelContainer .summary-card > div.text-center::after {
content: '🔒 Pago 100% seguro y encriptado';
display: block;
text-align: center;
font-family: var(--font-body);
font-size: 11px;
color: rgba(157,152,179,0.6);
margin-top: var(--sp-3);
letter-spacing: 0.02em;
}
/* ── Loader spinner ── */
body.hd-cart #orderSummaryLoader i {
color: var(--accent-light) !important;
}
/* ── Responsive mobile ── */
@media (max-width: 768px) {
body.hd-cart .config-summary-area {
position: static;
}
body.hd-cart .total-due-today .amt {
font-size: 26px !important;
}
}
/* ═══════════════════════════════════════════════════
CART CONFIG — MAIN AREA (config-main-area)
Sección izquierda: descripción del plan +
ciclo de facturación + alerta de soporte.
═══════════════════════════════════════════════════ */
/* Layout vertical con gap consistente */
.config-main-area {
display: flex !important;
flex-direction: column !important;
gap: var(--sp-5) !important;
}
/* ── Base de cada card ── */
.config-main-area .config-card {
background:
radial-gradient(ellipse at 100% 0%, rgba(124,58,237,0.12) 0%, transparent 60%),
rgb(10,6,30) !important;
border: 1px solid rgba(167,139,250,0.14) !important;
border-radius: var(--r-xl) !important;
padding: var(--sp-6) !important;
backdrop-filter: blur(16px) saturate(130%) !important;
-webkit-backdrop-filter: blur(16px) saturate(130%) !important;
text-align: left !important;
}
/* ── Nombre del plan — pequeño label superior ──
Selector reforzado para ganar sobre inline style color. */
.config-main-area .config-card.text-center h2,
.config-main-area .config-card h2,
.config-main-area h2 {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--fg) !important;
margin-bottom: var(--sp-5) !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: var(--sp-2) !important;
padding-bottom: var(--sp-4) !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.config-main-area .config-card.text-center h2::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-light);
flex-shrink: 0;
}
/* ── Grilla de características ── */
.cfg-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.cfg-feat {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--r-md);
padding: var(--sp-3);
transition: background 0.15s, border-color 0.15s;
}
.cfg-feat:hover {
background: rgba(124,58,237,0.07);
border-color: rgba(167,139,250,0.18);
}
.cfg-feat--wide {
grid-column: 1 / -1;
align-items: center;
}
.cfg-feat__icon {
color: var(--accent-light);
font-size: 12px;
margin-top: 2px;
flex-shrink: 0;
width: 14px;
text-align: center;
}
.cfg-feat__icon--green {
color: var(--green) !important;
margin-top: 0;
}
.cfg-feat__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cfg-feat__label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--fg-muted);
line-height: 1;
}
.cfg-feat__value {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--fg);
line-height: 1.25;
}
/* ── Sub-heading ──
Nexus usa ::before/::after para crear líneas horizontales
a ambos lados del texto (efecto "raya"). Las eliminamos. */
.config-main-area .sub-heading,
#order-standard_cart .config-main-area .sub-heading {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--fg-muted) !important;
margin-top: 0 !important;
margin-bottom: var(--sp-4) !important;
display: flex !important;
align-items: center !important;
gap: var(--sp-2) !important;
overflow: visible !important;
height: auto !important;
border-top: none !important;
border-bottom: none !important;
text-align: left !important;
}
/* Eliminar las rayas horizontales del efecto nexus */
.config-main-area .sub-heading::before,
.config-main-area .sub-heading::after,
#order-standard_cart .config-main-area .sub-heading::before,
#order-standard_cart .config-main-area .sub-heading::after {
display: none !important;
content: none !important;
background: none !important;
border: none !important;
height: 0 !important;
width: 0 !important;
}
.config-main-area .sub-heading i,
.config-main-area .sub-heading i[style] {
color: var(--accent-light) !important;
font-size: 11px !important;
margin-right: 0 !important;
}
/* Ocultar el