/* =========================
   COMPASS — Base CSS (dark / editorial / institutional)
   ========================= */
:root{
    /* ===== Colors ===== */
    --bg: #07090c;               /* preto profundo (base) */
    --bg-2: #0b0f15;             /* variação para áreas */
    --surface: rgba(255,255,255,.06);
    --surface-2: rgba(255,255,255,.09);
    --border: rgba(255,255,255,.12);

    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --soft: rgba(255,255,255,.08);

    /* COMPASS = mais leitura: off-white levemente mais presente */
    --paper: #f2efe8;            /* marfim/off-white (para detalhes) */

    /* Acento mínimo (não "marketing"): prata editorial */
    --silver: #bfc5cc;
    --silver-2: rgba(191,197,204,.55);

    /* Sombra / luz */
    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --shadow-soft: 0 12px 35px rgba(0,0,0,.35);

    /* ===== Radius / Spacing ===== */
    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 22px;

    --pad-1: 10px;
    --pad-2: 14px;
    --pad-3: 18px;
    --pad-4: 24px;
    --pad-5: 32px;

    /* ===== Type ===== */
    --font-serif: "Cormorant Garamond", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* ===== Layout ===== */
    --container: 1120px;
    --grid-gap: 18px;
}

/* ===== Reset básico (silencioso) ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
    margin:0;
    color:var(--text);
    background: var(--bg);
    font-family: var(--font-sans);
    line-height: 1.55;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Background institucional (textura + gradiente discreto) ===== */
.bg-institutional{
    background:
        radial-gradient(1200px 600px at 55% 25%, rgba(255,255,255,.06), transparent 62%),
        radial-gradient(900px 450px at 35% 70%, rgba(255,255,255,.04), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 35%),
        var(--bg);
}

/* ===== Container ===== */
.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }

/* ===== Tipografia (editorial) ===== */
.h1, h1{ font-family: var(--font-serif); font-weight: 600; letter-spacing: .02em; line-height: 1.08; margin: 0 0 14px; color: var(--paper); font-size: 3rem; }
.h2, h2{ font-family: var(--font-serif); font-weight: 600; letter-spacing: .02em; line-height: 1.12; margin: 40px 0 18px; font-size: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 10px; display: inline-block; }
.h3, h3{ font-family: var(--font-serif); font-weight: 600; letter-spacing: .02em; line-height: 1.2; margin: 24px 0 12px; font-size: 1.5rem; color: var(--silver); }
.kicker{ font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--muted); margin-bottom: 0.5rem; display: block; }
.lead{ font-size: 18px; color: rgba(255,255,255,.86); max-width: 68ch; margin-bottom: 2rem; }

/* Texto longo */
.prose{ max-width: 74ch; color: rgba(255,255,255,.88); }
.prose p{ margin: 0 0 14px; }
.prose strong{ color: var(--text); }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a{ color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(242,239,232,.25); }
.prose a:hover{ border-bottom-color: rgba(242,239,232,.55); }

/* ===== Header / Nav (silencioso) ===== */
.header{ position: sticky; top:0; z-index: 20; backdrop-filter: blur(10px); background: rgba(7,9,12,.62); border-bottom: 1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--text); }
.brand-mark{ width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 999px; display:grid; place-items:center; color: var(--paper); background: rgba(255,255,255,.04); font-size: 0.8rem; font-weight: bold; }
.brand-name{ font-family: var(--font-sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; position: relative; }
.brand-tld { color: #00ffaa; font-weight: 400; }

.nav-links{ display:flex; align-items:center; gap:18px; }
.nav-links a{ color: var(--muted); text-decoration:none; font-size: 13px; letter-spacing: .04em; }
.nav-links a:hover{ color: var(--text); }

/* ===== Hero ===== */
.hero{ padding: 70px 0 46px; }
.hero-grid{ display:grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 768px) { .hero-grid{ grid-template-columns: 1.35fr .65fr; align-items:end; } }
.hero-card{ border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: var(--shadow-soft); }

/* ===== Seções / Cards ===== */
.section{ padding: 44px 0; border-top: 1px solid rgba(255,255,255,.06); }
.grid{ display:grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card{ border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; background: rgba(255,255,255,.045); box-shadow: var(--shadow-soft); transition: transform 0.2s ease, background 0.2s ease; height: 100%; }
.card:hover { transform: translateY(-2px); background: rgba(255,255,255,.06); }
.card-title{ font-family: var(--font-serif); font-weight: 600; letter-spacing: .02em; margin:0 0 10px; font-size: 1.25rem; color: var(--paper); }
.card-meta{ font-size: 13px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.card-content { font-size: 0.95rem; color: rgba(255,255,255,.8); line-height: 1.6; }

/* Alert Box */
.alert-box { border: 1px solid rgba(255, 100, 100, 0.3); background: rgba(255, 50, 50, 0.05); padding: 20px; border-radius: var(--r-sm); margin: 20px 0; }
.alert-title { color: #ff8888; font-weight: bold; margin-bottom: 8px; display: block; }

.success-box { border: 1px solid rgba(100, 255, 150, 0.3); background: rgba(50, 255, 100, 0.05); padding: 20px; border-radius: var(--r-sm); margin: 20px 0; }
.success-title { color: #88ffaa; font-weight: bold; margin-bottom: 8px; display: block; }

/* Checklist */
.checklist-item { display: flex; gap: 10px; margin-bottom: 8px; align-items: baseline; }
.checklist-check { color: var(--paper); font-weight: bold; min-width: 20px; }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; gap:10px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); text-decoration:none; font-size: 13px; letter-spacing: .04em; transition: all 0.2s; cursor: pointer; }
.btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-primary{ background: rgba(242,239,232,.10); border-color: rgba(242,239,232,.18); color: var(--paper); }
.btn-primary:hover{ background: rgba(242,239,232,.14); border-color: rgba(242,239,232,.26); }

/* Footer */
.footer { padding: 40px 0; border-top: 1px solid var(--border); margin-top: 60px; text-align: center; color: var(--muted); font-size: 14px; }