/* Abraco Digital - marketing site (landing, cadastro, entrar). Loaded
   alongside app.css (reuses --color-primary, --font-display, .btn/.card/.field)
   and adds the full logo palette + hero/pricing layout on top of it. */
:root {
    --mkt-blue: #2F8FE0;
    --mkt-pink: #F0629B;
    --mkt-yellow: #FBB040;
    --mkt-purple: #7B5FC4;
    --mkt-teal: #2BBFA0;
    --mkt-navy: #1C2B5E;
    --mkt-cream: #FDF8F0;
}

body { background: var(--mkt-cream); }

.mkt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px; background: rgba(253,248,240,0.9); backdrop-filter: blur(6px);
    position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(28,43,94,0.06);
}
.mkt-header .brand { display: flex; align-items: center; gap: 10px; }
.mkt-header .brand img { height: 42px; }
.mkt-header .brand strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--mkt-navy); }
.mkt-header nav { display: flex; align-items: center; gap: 10px; }

.mkt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 24px; border-radius: 999px; font-weight: 600; font-family: var(--font-display);
    text-decoration: none; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.95rem;
    position: relative; overflow: hidden;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.mkt-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-120%);
    transition: transform .65s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
.mkt-btn:hover { transform: translateY(-1px); text-decoration: none; }
.mkt-btn:hover::after { transform: translateX(220%); }
.mkt-btn:active { transform: scale(0.97); }
.mkt-btn-primary { background: linear-gradient(135deg, rgba(47,143,224,.94), rgba(123,95,196,.94)); color: #fff; box-shadow: 0 8px 20px -8px rgba(123,95,196,0.55); }
.mkt-btn-ghost { background: transparent; color: var(--mkt-navy); border: 1.5px solid rgba(28,43,94,0.18); }
.mkt-btn-ghost:hover { border-color: var(--mkt-navy); }

@media (max-width: 640px) {
    .mkt-header { padding: 12px 16px; }
}

/* A landing page tem seu proprio design sitema completo em landing.css -
   esta folha (marketing.css) cuida so do cabecalho/botoes padrao reusados
   por /entrar e /cadastre-se. */
body.landing-page .mkt-header { display: none; }