@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); /* ═════════════════════════════════════════════════════════════════════════ * theme-marketing.css — Dark Navy (espacio de venta + producto Mequi) * * Páginas que cargan este theme: * /inicio · /precios · /gracias · /terminos * /onboarding · /asistente ← Mequi vive en dark * * Decisión editorial: navy oscuro + crema + coral. * Premium, editorial moderno, se diferencia de TODA la categoría. * Inspirado en el logo MQI original. * * Cargá este archivo AL FINAL del : * * ═════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="marketing"] { /* ── Brand ───────────────────────────────────────────────────────── */ --mqi-coral: #F84F76; --mqi-coral-hover: #e63d65; --mqi-coral-soft: rgba(248, 79, 118, 0.12); --mqi-coral-glow: rgba(248, 79, 118, 0.25); /* ── Navy oscuro (fondo) + Crema (texto) ─────────────────────────── */ --mqi-bg: #0F1730; /* fondo principal */ --mqi-bg-elevated: #1a2148; /* superficies/cards */ --mqi-bg-deep: #0a0f24; /* nav, footer, contraste */ --mqi-bg-soft: #131a3a; /* hover/active discreto */ --mqi-ink: #F8E1C7; /* texto principal — crema */ --mqi-ink-soft: rgba(248, 225, 199, 0.78); /* texto secundario */ --mqi-ink-mute: rgba(248, 225, 199, 0.55); /* labels, meta */ --mqi-ink-faint: rgba(248, 225, 199, 0.30); /* placeholders */ --mqi-line: rgba(248, 225, 199, 0.12); /* divisores */ --mqi-line-strong: rgba(248, 225, 199, 0.22); /* bordes */ /* ── Estados ─────────────────────────────────────────────────────── */ --mqi-success: #4ade80; --mqi-warn: #fbbf24; --mqi-danger: #fb7185; /* ── Tipografía ──────────────────────────────────────────────────── */ --mqi-font-serif: "Fraunces", "Times New Roman", serif; --mqi-font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --mqi-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── Espaciado / radios ──────────────────────────────────────────── */ --mqi-radius-sm: 8px; --mqi-radius-md: 14px; --mqi-radius-lg: 20px; --mqi-radius-pill: 999px; /* ── Sombras navy-aware ──────────────────────────────────────────── */ --mqi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --mqi-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); --mqi-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); --mqi-shadow-coral: 0 8px 24px -8px rgba(248, 79, 118, 0.5); /* ── Aliases legacy (compat con código existente) ────────────────── */ --navy: #0F1730; --navy-80: rgba(248, 225, 199, 0.92); --navy-60: rgba(248, 225, 199, 0.78); --navy-40: rgba(248, 225, 199, 0.58); --bone: #0F1730; --cream: #F8E1C7; --coral: #F84F76; --coral-hover: #e63d65; --line: rgba(248, 225, 199, 0.12); --ink: #F8E1C7; color-scheme: dark; } /* ── Body + tipografía base ─────────────────────────────────────────── */ html, body { background: var(--mqi-bg) !important; color: var(--mqi-ink); font-family: var(--mqi-font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings con Fraunces (warm editorial) */ h1, h2, h3, h4 { font-family: var(--mqi-font-serif); color: var(--mqi-ink); letter-spacing: -0.01em; } /* Datos numéricos con Plex Mono — el detalle dios supremo */ .mqi-data, [data-mqi-numeric], .mqi-price-amount, .mqi-stat-value { font-family: var(--mqi-font-mono); font-feature-settings: "tnum" on, "lnum" on; } /* ═════════ NAVBAR dark — fuente única ═════════════════════════════════ */ #app-nav { position: sticky !important; top: 0 !important; z-index: 100 !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 0 !important; padding: 0 24px !important; height: 62px !important; min-height: 62px !important; background: rgba(10, 15, 36, 0.85) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important; border-bottom: 1px solid var(--mqi-line) !important; box-shadow: 0 1px 0 rgba(248, 225, 199, 0.04) inset, 0 4px 20px rgba(0, 0, 0, 0.4) !important; font-family: var(--mqi-font-sans) !important; } #app-nav .nav-logo { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; text-decoration: none !important; background: transparent !important; } #app-nav .nav-logo-image { display: block !important; height: 38px !important; width: auto !important; max-width: 200px !important; filter: brightness(1.02) drop-shadow(0 0 0 transparent); } #app-nav .nav-links, #app-nav #app-nav-links { display: flex !important; justify-content: center !important; align-items: center !important; gap: 1.6rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } #app-nav .nav-link, #app-nav .nav-link:visited { color: var(--mqi-ink-mute) !important; font-size: 13.5px !important; font-weight: 500 !important; font-family: var(--mqi-font-sans) !important; padding: 7px 13px !important; border-radius: 10px !important; text-decoration: none !important; white-space: nowrap !important; background: none !important; border: none !important; transition: background 0.15s, color 0.15s !important; } #app-nav .nav-link:hover { background: rgba(248, 225, 199, 0.06) !important; color: var(--mqi-ink) !important; } #app-nav .nav-link--active, #app-nav .nav-link[aria-current="page"] { color: var(--mqi-ink) !important; font-weight: 700 !important; } #app-nav .nav-right { display: flex !important; align-items: center !important; gap: 12px !important; margin-left: auto !important; } #app-nav .nav-instagram { display: inline-flex !important; align-items: center !important; color: var(--mqi-ink-mute) !important; transition: color 0.15s !important; text-decoration: none !important; } #app-nav .nav-instagram:hover { color: var(--mqi-ink) !important; } /* Botón Entrar */ #app-nav #nav-login-btn, #app-nav .btn-primary, #app-nav .btn.btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--mqi-coral) !important; color: #ffffff !important; border: none !important; border-radius: var(--mqi-radius-pill) !important; font-family: var(--mqi-font-sans) !important; font-size: 0.82rem !important; font-weight: 600 !important; padding: 7px 16px !important; cursor: pointer !important; text-decoration: none !important; transition: background 0.15s, box-shadow 0.15s, transform 0.08s !important; white-space: nowrap !important; box-shadow: 0 4px 14px -2px rgba(248, 79, 118, 0.4); } #app-nav #nav-login-btn:hover, #app-nav .btn-primary:hover { background: var(--mqi-coral-hover) !important; box-shadow: 0 6px 20px -2px rgba(248, 79, 118, 0.5); } /* Avatar dropdown */ #app-nav #nav-user-menu { position: relative !important; } #app-nav #nav-user-btn { display: flex !important; align-items: center !important; gap: 8px !important; background: none !important; border: none !important; cursor: pointer !important; font-family: var(--mqi-font-sans) !important; padding: 6px 10px !important; border-radius: 10px !important; transition: background 0.15s !important; } #app-nav #nav-user-btn:hover { background: rgba(248, 225, 199, 0.08) !important; } #app-nav #nav-user-btn img { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 2px solid var(--mqi-line-strong) !important; object-fit: cover !important; background: var(--mqi-bg-elevated) !important; } #app-nav #nav-user-btn span { font-size: 13.5px !important; font-weight: 600 !important; color: var(--mqi-ink) !important; } /* Mobile */ #app-nav .nav-menu-toggle { display: none !important; background: none !important; border: none !important; font-size: 1.35rem !important; color: var(--mqi-ink) !important; cursor: pointer !important; width: 40px !important; height: 40px !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; transition: background 0.15s !important; } @media (max-width: 767px) { #app-nav { display: flex !important; justify-content: space-between !important; grid-template-columns: none !important; } #app-nav #app-nav-links, #app-nav .nav-links { display: none !important; } #app-nav .nav-right .nav-instagram { display: none !important; } #app-nav .nav-menu-toggle { display: inline-flex !important; } } body.nav-open #app-nav-links, body.nav-open #app-nav .nav-links { display: flex !important; flex-direction: column !important; position: fixed !important; top: 62px !important; left: 0 !important; right: 0 !important; background: rgba(10, 15, 36, 0.98) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; padding: 24px !important; z-index: 999 !important; gap: 0 !important; border-bottom: 1px solid var(--mqi-line) !important; } body.nav-open #app-nav-links .nav-link { padding: 14px 0 !important; font-size: 1rem !important; font-weight: 500 !important; color: var(--mqi-ink) !important; border-bottom: 1px solid var(--mqi-line) !important; border-radius: 0 !important; width: 100% !important; text-align: left !important; } body.nav-open #app-nav .nav-menu-toggle { font-size: 0 !important; } body.nav-open #app-nav .nav-menu-toggle::after { content: "✕" !important; font-size: 1.2rem !important; } /* Scrollbars dark */ * { scrollbar-color: var(--mqi-line-strong) var(--mqi-bg); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--mqi-bg); } *::-webkit-scrollbar-thumb { background: var(--mqi-line-strong); border-radius: 5px; } /* ═════════ Plex Mono para datos numéricos ═════════════════════════════ * Selectores específicos que detectan números/precios/duraciones en * todo el sitio. Los datos cobran personalidad propia sin tocar el HTML. * ─────────────────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); /* Precios (precios.html) */ .pricing-card-price .amount, .pricing-card-price .currency, .price-amount, .amount, /* Calculadora stats */ .calc-hero-stat strong, .calc-quiz-time, .calc-result-time, .calc-result-cost, /* Corredor data (cor-*) */ .cor-meta-value, .cor-cost-amount, .cor-time-value, /* Mapa stats */ .stat-item strong, /* Mascotas requisitos numéricos */ .req-value, /* Cualquier elemento con clase mqi-data o atributo data-mqi-numeric */ .mqi-data, [data-mqi-numeric] { font-family: var(--mqi-font-mono) !important; font-feature-settings: "tnum" on, "lnum" on !important; font-variant-numeric: tabular-nums lining-nums !important; } /* Precios grandes: peso medio para que no quede acartonado */ .pricing-card-price .amount, .price-amount, .amount { font-weight: 500 !important; letter-spacing: -0.02em !important; }