/* ============================================================
   MMPG NOVAIS — Brand base ("Dark premium / tech editorial")
   Sistema de design compartilhado entre index, ferramentas e
   páginas institucionais. Carregue DEPOIS do Tailwind CDN.

   Fundo: --bg #0A0A0B  ·  Texto: --text / --muted / --dim
   Acento: --accent #4A90E2 (uso contido)  ·  Bordas: --hair
   Display: Fraunces  ·  Texto/UI: Inter
   ============================================================ */

:root {
    color-scheme: dark;
    --bg:        #0A0A0B;
    --bg-900:    #0E0E10;
    --bg-850:    #121214;
    --bg-800:    #161618;
    --text:      #F5F5F4;
    --text-200:  #C9C9CF;
    --muted:     #A6A6AE;
    --dim:       #8B8B93;
    --dimmer:    #6A6A72;
    --accent:    #4A90E2;
    --accent-soft: #8FC4FF;
    --accent-cyan: #4FD1C5;
    --hair:      rgba(255, 255, 255, .08);
    --hair-2:    rgba(255, 255, 255, .12);
    --card-bg:   linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    --card-bg-h: linear-gradient(180deg, rgba(143,196,255,.06), rgba(255,255,255,.015));
    --radius:    20px;
    --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

html { background: var(--bg); }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(79, 209, 197, .28); color: #fff; }

/* ── Tipografia ───────────────────────────────────────────── */
.mmpg-display {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.06;
}
.mmpg-display-italic { font-style: italic; font-weight: 400; }

.mmpg-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dimmer);
}

/* ── Grão global ──────────────────────────────────────────── */
.mmpg-noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Glows ────────────────────────────────────────────────── */
.mmpg-glow-blue { background: radial-gradient(50% 50% at 50% 50%, rgba(74, 144, 226, .20), transparent 70%); }
.mmpg-glow-cyan { background: radial-gradient(50% 50% at 50% 50%, rgba(79, 209, 197, .16), transparent 70%); }

/* ── Cartões ──────────────────────────────────────────────── */
.mmpg-card {
    background: var(--card-bg);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .4s, background .4s;
}
.mmpg-card:hover {
    transform: translateY(-4px);
    border-color: rgba(143, 196, 255, .35);
    background: var(--card-bg-h);
}

.mmpg-icon-frame {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    color: #9FC6F2;
    flex-shrink: 0;
}
.mmpg-icon-frame svg { width: 22px; height: 22px; }

/* ── Header ───────────────────────────────────────────────── */
.mmpg-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.mmpg-header.scrolled {
    background: rgba(10, 10, 11, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* ── Botões ───────────────────────────────────────────────── */
.mmpg-btn-primary {
    background: #F5F5F4;
    color: #0A0A0B;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.mmpg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px -12px rgba(143, 196, 255, .5);
}
.mmpg-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .16);
    color: #E9E9EA;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: background .3s, border-color .3s, transform .3s;
}
.mmpg-btn-ghost:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-2px);
}

/* ── Linha divisória fina ─────────────────────────────────── */
.mmpg-hairline {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
    border: 0;
}

/* ── Revelação no scroll ──────────────────────────────────── */
.mmpg-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.mmpg-reveal.in { opacity: 1; transform: none; }

/* ── Prosa (páginas institucionais) ───────────────────────── */
.mmpg-prose { color: var(--muted); font-size: 15.5px; line-height: 1.8; }
.mmpg-prose > * + * { margin-top: 1.15rem; }
.mmpg-prose strong { color: var(--text-200); font-weight: 600; }
.mmpg-prose a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.mmpg-prose h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--text);
    margin-top: 2.75rem;
    margin-bottom: .25rem;
    letter-spacing: -.01em;
}
.mmpg-prose ul { padding-left: 1.15rem; list-style: disc; }
.mmpg-prose li { margin-top: .5rem; }
.mmpg-prose li::marker { color: var(--dimmer); }

@media (prefers-reduced-motion: reduce) {
    .mmpg-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .mmpg-marquee, .animate-marquee { animation: none !important; }
}