@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* /css/main.css — base + utilities para /familia/ (landing + view). Tema dark fixo, Inter, accent laranja. */
:root{
  --mc-bg:#000; --mc-surface:#0d0d0d; --mc-surface-2:#141414;
  --mc-fg:#f4f4f4; --mc-fg-soft:#c8c8c8; --mc-muted:#8f8f8f;
  --mc-line:rgba(255,255,255,.10); --mc-accent:#ff5722;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--mc-bg);color:var(--mc-fg);line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:'ss01','cv11'}
a{color:inherit;text-decoration:none}

/* ---- layout / utilities (subset Tailwind usado) ---- */
.container{width:100%}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-4xl{max-width:1180px}
.px-4{padding-left:40px;padding-right:40px}
.py-8{padding-top:56px;padding-bottom:64px}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.gap-2{gap:10px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-8{margin-top:40px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:36px}.mb-10{margin-bottom:52px}
.text-sm{font-size:13px}.text-lg{font-size:17px}.text-xl{font-size:21px}.text-2xl{font-size:26px}
.text-4xl{font-size:clamp(32px,5vw,46px)}
.font-semibold{font-weight:600}.font-bold{font-weight:700}
.tracking-wide{letter-spacing:.12em}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}
.text-blue-700{color:var(--mc-accent)}
.text-gray-500,.text-gray-600{color:var(--mc-muted)}
.text-gray-700{color:var(--mc-fg-soft)}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.px-4{padding-left:20px;padding-right:20px}.py-8{padding-top:36px;padding-bottom:44px}}

/* ---- elementos ---- */
h1{font-size:clamp(32px,5vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.08;color:var(--mc-fg);margin:0 0 16px}
h2{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--mc-fg);margin:0 0 14px;position:relative;padding-left:18px}
h2::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--mc-accent)}
h3{font-size:15px;font-weight:600;color:var(--mc-fg-soft);margin:0 0 12px}
p{color:var(--mc-fg-soft);margin:0 0 14px}
strong{color:var(--mc-fg);font-weight:600}
.prose p{max-width:760px}
section{margin-bottom:48px}

/* breadcrumb */
nav.text-sm{color:var(--mc-muted);margin-bottom:20px}
nav.text-sm a{color:var(--mc-muted);transition:color .15s}
nav.text-sm a:hover{color:var(--mc-accent)}

/* listas de famílias / profissões em cards sutis */
main ul{list-style:none;margin:0;padding:0}
main ul li{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:10px;transition:border-color .15s,background .15s}
main ul li:hover{border-color:var(--mc-accent);background:var(--mc-surface-2)}
main ul li a{display:block;padding:11px 15px;font-size:14px;font-weight:500;color:var(--mc-fg)}
main ul li a:hover{color:var(--mc-accent)}
.hover\:underline:hover{text-decoration:none}