/* ══════════════════════════════════════════════════════════════
   IMaliWay — legal.css
   Documentos legais (Termos · Privacidade · Cookies · Compliance)
   Segue a mesma estrutura de tokens do design system IMaliWay
══════════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background var(--ease), color var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── DESIGN TOKENS ── */
:root {
    --green:       #52A828;
    --green-h:     #468f22;
    --green-light: #6DC135;
    --green-tint:  rgba(82,168,40,.10);
    --green-tint2: rgba(82,168,40,.18);

    --radius:    16px;
    --radius-sm: 10px;
    --radius-full: 999px;
    --ease:      0.3s cubic-bezier(.4,0,.2,1);
    --shadow:    0 4px 24px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 48px rgba(0,0,0,.22);
    --font-mono: 'JetBrains Mono', monospace;
}

/* ── DARK THEME (default) ── */
[data-theme="dark"] {
    --bg:       #0A0A0A;
    --bg2:      #111111;
    --card:     #161616;
    --card-h:   #1c1c1c;
    --border:   rgba(255,255,255,.07);
    --border-h: rgba(255,255,255,.16);
    --text:     #F5F5F5;
    --text2:    #999999;
    --muted:    #555555;
    --nav-bg:   rgba(10,10,10,.94);
    --overlay:  linear-gradient(135deg, rgba(10,10,10,.92) 0%, rgba(82,168,40,.22) 100%);
    --alt:      #0d0d0d;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
    --bg:       #FAFAFA;
    --bg2:      #F2F2F2;
    --card:     #FFFFFF;
    --card-h:   #F5FAF2;
    --border:   rgba(0,0,0,.08);
    --border-h: rgba(82,168,40,.25);
    --text:     #0A0A0A;
    --text2:    #555555;
    --muted:    #999999;
    --nav-bg:   rgba(250,250,250,.94);
    --overlay:  linear-gradient(135deg, rgba(10,10,10,.85) 0%, rgba(82,168,40,.30) 100%);
    --alt:      #F2F2F2;
}

/* ── LAYOUT ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-alt { background: var(--alt); }

/* ── SKIP LINK ── */
.skip-link {
    position: absolute; top: -100px; left: 16px; z-index: 999;
    background: var(--green); color: #06120a; padding: 10px 18px;
    border-radius: var(--radius-sm); font-weight: 600; transition: top var(--ease);
}
.skip-link:focus { top: 16px; }

/* Navbar: fornecida por <site-header> (components/navbar-components.js), tal como em index.html */

/* ── HERO ── */
.page-hero {
    position: relative; padding: 88px 0 56px; overflow: hidden;
    background: var(--overlay), var(--bg2);
}
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text2); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current="page"] { color: var(--text); }
.page-hero h1 {
    font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: -0.03em;
    font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 12px;
}
.page-hero p { font-size: 1.05rem; color: var(--text2); max-width: 640px; }
.hero-meta {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
    font-size: 0.78rem; color: var(--green-light); background: var(--green-tint);
    padding: 6px 14px; border-radius: var(--radius-full); margin-top: 16px;
}

/* ── SECTION HEADER ── */
.section-header { max-width: 640px; margin-bottom: 44px; }
.section-label {
    display: inline-block; font-family: var(--font-mono); font-size: 0.76rem;
    color: var(--green-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
}
.section-header h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px;
}
.section-header p { color: var(--text2); }

/* ── DOC INDEX GRID (legal.html) ── */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .doc-grid { grid-template-columns: 1fr; } }

.doc-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px; transition: border-color var(--ease), transform var(--ease);
}
.doc-card:hover { border-color: var(--border-h); transform: translateY(-2px); }
.doc-icon {
    width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--green-tint);
    display: flex; align-items: center; justify-content: center; color: var(--green); margin-bottom: 18px;
}
.doc-icon svg { width: 22px; height: 22px; }
.doc-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.doc-card p { color: var(--text2); font-size: 0.92rem; margin-bottom: 18px; }
.doc-card .doc-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 14px; display: block; }

.btn-link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--green-light);
    font-weight: 600; font-size: 0.9rem; transition: gap var(--ease);
}
.btn-link:hover { gap: 10px; }
.btn-link svg { width: 15px; height: 15px; }

/* ── LEGAL PROSE ── */
.legal-prose { max-width: 760px; }
.legal-prose .legal-meta {
    font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 40px;
    padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.legal-prose h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.25rem;
    margin: 40px 0 14px; scroll-margin-top: 96px;
}
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose h3 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.02rem; margin: 22px 0 8px; }
.legal-prose p { color: var(--text2); margin-bottom: 12px; }
.legal-prose p strong { color: var(--text); }
.legal-prose ul { margin: 12px 0 16px; }
.legal-prose li {
    color: var(--text2); padding-left: 20px; position: relative; margin-bottom: 8px;
}
.legal-prose li::before {
    content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px;
    border-radius: 50%; background: var(--green);
}
.legal-prose a { color: var(--green-light); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose code {
    font-family: var(--font-mono); font-size: 0.85em; background: var(--card);
    border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px;
}
.legal-prose .todo {
    display: inline-block; font-family: var(--font-mono); font-size: 0.72rem;
    color: #e8b339; background: rgba(232,179,57,.1); border: 1px solid rgba(232,179,57,.25);
    padding: 1px 8px; border-radius: var(--radius-sm); margin-left: 4px;
}

/* ── TOC LATERAL ── */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { display: none; } }
.legal-toc { position: sticky; top: 96px; }
.legal-toc p { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.legal-toc a {
    display: block; font-size: 0.86rem; color: var(--text2); padding: 6px 0 6px 12px;
    border-left: 2px solid var(--border); transition: all var(--ease); min-height: 32px;
}
.legal-toc a:hover, .legal-toc a.active { color: var(--green-light); border-left-color: var(--green); }

/* ── COMPLIANCE PAGE SPECIFICS ── */
.compliance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .compliance-grid { grid-template-columns: 1fr; } }
.compliance-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.compliance-icon {
    width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--green-tint);
    color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.compliance-icon svg { width: 20px; height: 20px; }
.compliance-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.compliance-card p { color: var(--text2); font-size: 0.9rem; }

.stat-row { display: flex; gap: 40px; margin: 28px 0; flex-wrap: wrap; }
.stat-item .stat-num { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.8rem; color: var(--green-light); display: block; }
.stat-item .stat-label { font-size: 0.82rem; color: var(--text2); }

/* ── CTA BOX ── */
.cta-box {
    background: var(--card); border: 1px solid var(--border); border-radius: 24px;
    padding: 56px; text-align: center;
}
.cta-box h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.6rem; margin: 12px 0 12px; }
.cta-box p { color: var(--text2); max-width: 480px; margin: 0 auto 24px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: var(--radius-full); font-weight: 600; font-size: 0.92rem; transition: all var(--ease); min-height: 44px; }
.btn-primary { background: var(--green); color: #06120a; }
.btn-primary:hover { background: var(--green-h); }
.btn-outline { border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--border-h); }

/* ── FOOTER (footer3 — mirror do rodapé de index.html) ── */
.footer3 {
    background: #080808;
    border-top: 1px solid rgba(255,255,255,.06);
}
.footer3-top {
    max-width: 1200px; margin: 0 auto; padding: 64px 24px 48px;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
}
.footer3-brand { display: flex; flex-direction: column; gap: 16px; }
.footer3-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-head, 'Montserrat', sans-serif); font-size: 1.18rem;
    font-weight: 400; color: #fff;
    text-decoration: none;
}
.footer3-desc { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.7; }
.footer3-socials { display: flex; gap: 8px; }
.footer3-soc {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.10); color: rgba(255,255,255,.75);
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.footer3-soc:hover { background: #52A828; color: #fff; }
.footer3-col { display: flex; flex-direction: column; gap: 10px; }
.footer3-col-h {
    font-family: var(--font-head, 'Montserrat', sans-serif); font-size: .6rem; font-weight: 800;
    color: rgba(255,255,255,.55); letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: 4px;
}
.footer3-lnk {
    font-size: .83rem; color: rgba(255,255,255,.75);
    transition: color .15s; text-decoration: none;
}
.footer3-lnk:hover { color: #6DC135; }
.footer3-lnk[aria-current="page"] { color: #6DC135; }
.footer3-bottom {
    border-top: 1px solid rgba(255,255,255,.05);
    padding: 18px 24px;
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 3px;
}
.footer3-copy {
    font-family: var(--font-head, 'Montserrat', sans-serif); font-size: .6rem;
    font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .04em;
}
.footer3-reg { font-size: .58rem; color: rgba(255,255,255,.45); letter-spacing: .03em; }

@media (max-width: 900px) { .footer3-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer3-top { grid-template-columns: 1fr; } }

/* ── COOKIE BANNER ── */
.cookie-banner {
    position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 480px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 20px; z-index: 200;
    transform: translateY(140%); opacity: 0; transition: all var(--ease); pointer-events: none;
}
.cookie-banner.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner p { font-size: 0.86rem; color: var(--text2); margin-bottom: 14px; }
.cookie-banner p a { color: var(--green-light); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-btn { flex: 1; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.86rem; border: 1px solid var(--border); min-height: 40px; }
.cookie-btn-accept { background: var(--green); color: #06120a; border-color: var(--green); }
.cookie-btn-reject { background: transparent; color: var(--text2); }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* focus-visible global */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px;
}