@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); /* ═════════════════════════════════════════════════════════════════════════ * theme-utility.css — Cream Warm (espacio de trabajo) * * Páginas que cargan este theme: * /calculadora-elegibilidad · /destinos · /corredor/* * /mascotas · /mascotas/detalle · /mapa * /perfil · /foro · /plan/mi-plan * * Decisión editorial: cream warm + navy oscuro + coral. * Las páginas donde el usuario TRABAJA (filtra, calcula, lee, ejecuta). * Calidez de papel + claridad de utility. * * Cargá este archivo AL FINAL del : * * ═════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="utility"] { /* ── Brand ───────────────────────────────────────────────────────── */ --mqi-coral: #F84F76; --mqi-coral-hover: #e63d65; --mqi-coral-soft: #ffe4ec; --mqi-coral-glow: rgba(248, 79, 118, 0.18); /* ── Cream warm + Navy oscuro ────────────────────────────────────── */ --mqi-bg: #f4efe7; /* cream principal */ --mqi-bg-elevated: #ffffff; /* cards/superficies */ --mqi-bg-deep: #ebe4d6; /* footer/contraste sutil */ --mqi-bg-soft: #faf6f0; /* hover/active discreto */ --mqi-ink: #1a2940; /* texto principal — navy */ --mqi-ink-soft: rgba(26, 41, 64, 0.78); --mqi-ink-mute: rgba(26, 41, 64, 0.55); --mqi-ink-faint: rgba(26, 41, 64, 0.30); --mqi-line: rgba(26, 41, 64, 0.08); --mqi-line-strong: rgba(26, 41, 64, 0.18); /* ── Estados ─────────────────────────────────────────────────────── */ --mqi-success: #047857; --mqi-warn: #b45309; --mqi-danger: #b91c1c; /* ── 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 warm ────────────────────────────────────────────────── */ --mqi-shadow-sm: 0 1px 2px rgba(26, 41, 64, 0.04); --mqi-shadow-md: 0 4px 18px rgba(26, 41, 64, 0.06), 0 1px 2px rgba(26, 41, 64, 0.04); --mqi-shadow-lg: 0 20px 60px rgba(26, 41, 64, 0.12), 0 4px 12px rgba(26, 41, 64, 0.05); --mqi-shadow-coral: 0 8px 24px -8px rgba(248, 79, 118, 0.35); /* ── Aliases legacy ──────────────────────────────────────────────── */ --navy: #1a2940; --navy-80: rgba(26, 41, 64, 0.8); --navy-60: rgba(26, 41, 64, 0.6); --navy-40: rgba(26, 41, 64, 0.4); --bone: #f4efe7; --cream: #ffffff; --coral: #F84F76; --coral-hover: #e63d65; --line: #e6dfd1; --ink: #1a2940; color-scheme: light; } /* ── 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; } h1, h2, h3, h4 { font-family: var(--mqi-font-serif); color: var(--mqi-ink); letter-spacing: -0.01em; } .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 cream — mismo sistema, distinto tono ══════════════ */ #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(247, 247, 250, 0.92) !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(255, 255, 255, 0.6) inset, 0 4px 20px rgba(26, 41, 64, 0.06) !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; } #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(26, 41, 64, 0.05) !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; } #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 !important; white-space: nowrap !important; box-shadow: 0 4px 14px -4px rgba(248, 79, 118, 0.35); } #app-nav #nav-login-btn:hover, #app-nav .btn-primary:hover { background: var(--mqi-coral-hover) !important; box-shadow: 0 6px 20px -4px rgba(248, 79, 118, 0.45); } /* 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(26, 41, 64, 0.06) !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-soft) !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(247, 247, 250, 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; } /* ═════════ Plex Mono para datos numéricos ═════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"); .pricing-card-price .amount, .pricing-card-price .currency, .price-amount, .amount, .calc-hero-stat strong, .calc-quiz-time, .calc-result-time, .calc-result-cost, .cor-meta-value, .cor-cost-amount, .cor-time-value, .stat-item strong, .req-value, .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; } .pricing-card-price .amount, .price-amount, .amount { font-weight: 500 !important; letter-spacing: -0.02em !important; }