:root{
  /* Tema */
  --bg:#0b0d12;
  --fg:#e6e6e6;
  --muted:#9aa4b2;
  --accent:#ffd166;
  --card:#131722;
  --max:900px;

  /* Capa (controles) */
  --hero-height:56vh;     /* altura da capa */
  --hero-x:50%;           /* 0% esquerda | 50% centro | 100% direita */
  --hero-y:5%;            /* 0% topo    | 50% centro | 100% base   */
  --hero-size:cover;      /* cover = preenche (pode cortar) | contain = não corta */

  /* Gradiente da capa */
  --overlay-top:0.06;     /* 0–1 (escurece topo)   */
  --overlay-bottom:0.60;  /* 0–1 (escurece base)   */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:24px}
.header{position:relative;isolation:isolate}

/* ===== Capa (HERO) ===== */
.hero{
  position:relative;
  width:100%;
  height:var(--hero-height);
  min-height:360px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);

  background-color:#000;
  background-image:url('assets/images/cover.png');
  background-repeat:no-repeat;
  background-size:var(--hero-size) !important;
  background-position:var(--hero-x) var(--hero-y) !important;
}

.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,var(--overlay-top)) 0%,
    rgba(0,0,0,var(--overlay-bottom)) 70%
  );
}

.hero-content{
  position:absolute; left:0; right:0; top:16px; /* <-- ANCORA NO TOPO */
  padding:32px; z-index:1; color:#fff;
}

/* Título/Subtítulo (com correção para mobile não “comer” palavras) */
.title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.18;
  font-weight:800;
  margin:10px 0 6px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}
.subtitle{
  font-size:clamp(14px,2.3vw,18px);
  color:#e9eef7; max-width:800px;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* Badge e navegação */
.badge{
  display:inline-block; font-size:12px;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
}
.nav{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;
}
.nav a{
  padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.08);
}

/* Seções e cartões */
.section{margin-top:40px}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* Grid “Sobre” */
.grid{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:860px){
  .grid{grid-template-columns:1.1fr .9fr}
}

/* Tipografia auxiliar e mídia */
.h1{font-size:26px; margin:0 0 10px}
.muted{color:var(--muted)}
.post img{
  width:100%; height:auto;
  border-radius:12px; margin:4px 0 14px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* Vídeos responsivos */
.post iframe{
  display:block; width:100%; height:450px; border:0;
}

/* Citações e rodapé */
blockquote{
  border-left:4px solid var(--accent);
  margin:16px 0; padding:8px 14px;
  color:#f5f5f5; background:rgba(255,209,102,.06);
  border-radius:8px;
}
footer{
  margin:40px 0 20px; color:var(--muted);
  font-size:14px; text-align:center;
}

/* ===== Ajustes Mobile ===== */
@media (max-width:520px){
  .hero{height:52vh; min-height:360px}
  .title{font-size:26px; line-height:1.22}
  .post iframe{height:240px}
  .nav{gap:8px}
}
@media (max-width:520px){
  .hero{height:52vh; min-height:360px}
  .title{font-size:26px; line-height:1.22}
  .post iframe{height:240px}
  .nav{gap:8px}
}

/* ajuste fino: move o foco da imagem para o topo no mobile */
@media (max-width:520px){
  :root{ --hero-y:0%; }
}