/* Design System leve (mobile-first) */
:root{
  --bg:#121416; --card:#1b1f23; --text:#e9eef3; --muted:#a9b4be;
  --brand:#8b5cf6; --brand-2:#7c3aed;
  --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.28);
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
}

/* Base */
html{font-size:17px}
@media(min-width:768px){html{font-size:18px}}
body{background:var(--bg); color:var(--text)}

/* Tipografia */
h1{font-weight:700; letter-spacing:.2px; margin-bottom:var(--space-2);}
h1,.display-4{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.8rem)}
p{line-height:1.55;color:var(--muted)}

/* Navbar sticky + blur */
.navbar{position:sticky; top:0; z-index:1030; backdrop-filter:saturate(1.2) blur(8px); background:rgba(18,20,22,.75)!important}
.nav-link.active{color:#fff!important; position:relative}
.nav-link.active::after{content:""; position:absolute; left:10%; right:10%; bottom:-8px; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:2px}
.nav-link{padding:.9rem 1rem}

/* Cards padrão */
.card{background:var(--card); border:none; border-radius:var(--radius); box-shadow:var(--shadow)}
.img-cover{aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius)}
.card:hover{transform:translateY(-2px); transition:transform .2s ease, box-shadow .2s ease}

/* Hero overlay */
.hero{position:relative; border-radius:var(--radius); overflow:hidden}
.hero img{width:100%; height:min(58vh,580px); object-fit:cover; object-position:center 40%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.35) 60%)}

/* Skeleton loading */
.skeleton{background:#2a2f35; border-radius:var(--radius); min-height:220px; animation:pulse 1.2s infinite}
@keyframes pulse{0%{opacity:.6}50%{opacity:.9}100%{opacity:.6}}