/* ============ Psilogia · cabeçalho/rodapé/tema compartilhados ============ */
*{box-sizing:border-box;transition:background-color .3s ease, border-color .3s ease, color .25s ease}
html{scroll-behavior:smooth}
body{margin:0}

:root,[data-theme="light"]{
  --bg:oklch(0.984 0.007 84); --bg-2:oklch(0.963 0.011 78);
  --surface:oklch(0.998 0.004 84); --surface-2:oklch(0.972 0.01 80);
  --text:oklch(0.275 0.035 305); --text-2:oklch(0.49 0.028 303); --text-3:oklch(0.60 0.022 300);
  --primary:oklch(0.535 0.158 300); --primary-2:oklch(0.46 0.16 300); --primary-ink:oklch(0.99 0.006 300);
  --primary-soft:oklch(0.955 0.028 300); --primary-soft-2:oklch(0.90 0.05 300);
  --warm:oklch(0.64 0.132 45); --warm-2:oklch(0.56 0.13 42); --warm-soft:oklch(0.94 0.04 58);
  --border:oklch(0.915 0.012 78); --border-2:oklch(0.86 0.016 78);
  --ring:oklch(0.535 0.158 300 / 0.32);
  --shadow:0 1px 2px oklch(0.4 0.05 305 / .05), 0 18px 38px -20px oklch(0.45 0.08 305 / .26);
}
[data-theme="dark"]{
  --bg:oklch(0.185 0.024 305); --bg-2:oklch(0.22 0.028 305);
  --surface:oklch(0.243 0.03 305); --surface-2:oklch(0.285 0.032 305);
  --text:oklch(0.96 0.008 84); --text-2:oklch(0.78 0.02 300); --text-3:oklch(0.66 0.024 300);
  --primary:oklch(0.72 0.15 300); --primary-2:oklch(0.66 0.16 300); --primary-ink:oklch(0.16 0.03 305);
  --primary-soft:oklch(0.31 0.06 300); --primary-soft-2:oklch(0.37 0.08 300);
  --warm:oklch(0.75 0.115 52); --warm-2:oklch(0.69 0.12 48); --warm-soft:oklch(0.33 0.05 52);
  --border:oklch(0.34 0.03 305); --border-2:oklch(0.41 0.035 305);
  --ring:oklch(0.72 0.15 300 / 0.4);
  --shadow:0 1px 2px oklch(0 0 0 / .25), 0 20px 40px -22px oklch(0 0 0 / .5);
}

body{background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.7;min-height:100vh}
img{max-width:100%}
a{color:var(--primary)}

/* wordmark */
.wm{letter-spacing:-.02em;line-height:1}
.wm .p{font-weight:500;color:var(--text-2)}
.wm .l{font-family:'Spectral',serif;font-style:italic;font-weight:600;color:var(--primary);letter-spacing:0;padding-right:.04em}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(12px);background:color-mix(in oklab, var(--bg) 82%, transparent);border-bottom:1px solid var(--border)}
.site-header nav{max-width:1200px;margin:0 auto;padding:14px clamp(18px,4vw,34px);display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.brand .logo{width:38px;height:38px;border-radius:11px;overflow:hidden;display:inline-flex;box-shadow:0 6px 16px -8px var(--ring)}
.brand .logo img{width:100%;height:100%;object-fit:contain;display:block}
.nav-links{display:none;align-items:center;gap:30px}
.nav-links a{text-decoration:none;color:var(--text-2);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{color:var(--primary);border-color:var(--primary)}
.btn-ghost{display:none;align-items:center;text-decoration:none;color:var(--text);font-weight:600;font-size:14.5px;padding:10px 12px;border-radius:10px}
.btn-ghost:hover{color:var(--primary)}
.btn-primary{display:none;align-items:center;gap:7px;background:var(--primary);color:var(--primary-ink);text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:11px;box-shadow:0 8px 18px -10px var(--ring)}
.btn-primary:hover{background:var(--primary-2)}
.burger{width:40px;height:40px;border-radius:11px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.theme-moon{display:none}
[data-theme="dark"] .theme-moon{display:inline-flex}
[data-theme="dark"] .theme-sun{display:none}

/* mobile menu */
#mobile-menu{display:none;position:absolute;right:clamp(18px,4vw,34px);top:calc(100% + 8px);min-width:236px;padding:8px;border:1px solid var(--border-2);border-radius:14px;background:color-mix(in oklab, var(--surface) 97%, transparent);box-shadow:var(--shadow);z-index:80}
[data-menu="open"] #mobile-menu{display:grid;gap:2px}
#mobile-menu a{text-decoration:none;color:var(--text-2);font-size:15px;font-weight:600;padding:10px 12px;border-radius:9px}
#mobile-menu a:hover{color:var(--text);background:color-mix(in oklab, var(--text) 7%, transparent)}

@media(min-width:920px){
  .nav-links{display:flex}
  .btn-ghost{display:inline-flex}
  .btn-primary{display:inline-flex}
  .burger{display:none}
  #mobile-menu{display:none !important}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:clamp(36px,5vw,56px) clamp(18px,4vw,34px) 30px;margin-top:40px}
.site-footer .cols{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.site-footer .about{grid-column:1 / -1;max-width:340px;margin-bottom:6px}
.site-footer .about .row{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.site-footer .about .logo{width:36px;height:36px;border-radius:10px;overflow:hidden;display:inline-flex}
.site-footer .about .logo img{width:100%;height:100%;object-fit:contain;display:block}
.site-footer .about p{font-size:14px;line-height:1.6;color:var(--text-2);margin:0}
.site-footer .colhead{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--text-3);margin-bottom:14px}
.site-footer .col{display:flex;flex-direction:column;gap:10px}
.site-footer .col a{text-decoration:none;color:var(--text-2);font-size:14px}
.site-footer .col a:hover{color:var(--text)}
.site-footer .col span{color:var(--text-2);font-size:14px}
.site-footer .bottom{max-width:1200px;margin:34px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.site-footer .bottom span{font-size:13px;color:var(--text-3)}
.site-footer .bottom a{color:var(--text-3);text-decoration:none}
.site-footer .bottom a:hover{text-decoration:underline}