:root{
  --cor-a:#7b2ff7;
  --cor-b:#f107a3;
  --bg:#fafafa;
  --txt:#1d1d1f;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65; display:flex; flex-direction:column;
}

/* ===== CABEÇALHO (autohide) ===== */
.topo{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .24s ease, box-shadow .24s ease;
}
.topo.scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.12); }
.topo.hidden{ transform:translateY(-100%); }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo{ max-width:200px; height:auto; display:block; }

.hamb{
  display:none; margin-left:auto;
  background:transparent; border:0; font-size:24px; line-height:1;
  padding:6px 8px; cursor:pointer;
}

.nav{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }
.nav a{
  text-decoration:none; color:var(--txt); font-weight:600; font-size:14px;
  padding:6px 10px; border-radius:8px;
}
.nav a:hover{ background:rgba(0,0,0,.06); }

/* Auth */
.auth{ display:flex; align-items:center; gap:12px; margin-left:12px; }
.auth-guest{ display:flex; gap:8px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; font-weight:700; font-size:14px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn.solid{
  color:#fff; background:linear-gradient(135deg,var(--cor-a),var(--cor-b));
  box-shadow:0 6px 16px rgba(241,7,163,.35);
}
.btn.solid:hover{ filter:brightness(1.06); }
.btn.ghost{ color:var(--txt); border-color:#ddd; background:#fff; }
.btn.ghost:hover{ background:#f6f6f6; }

/* Estado logado: avatar + menu */
.auth-user{ display:none; position:relative; }
body.logged-in .auth-guest{ display:none; }
body.logged-in .auth-user{ display:block; }

.avatar-btn{ border:0; background:transparent; padding:0; cursor:pointer; border-radius:999px; }
.avatar{
  width:38px; height:38px; border-radius:999px; display:block;
  box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.18);
}
.menu-usuario{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px; background:#fff; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  padding:8px; display:none;
}
.menu-usuario a, .menu-usuario button{
  width:100%; text-align:left; display:block; padding:10px 12px;
  border:0; background:transparent; font:inherit; color:inherit;
  text-decoration:none; border-radius:8px; cursor:pointer;
}
.menu-usuario a:hover, .menu-usuario button:hover{ background:#f6f6f6; }
.menu-usuario hr{ border:0; border-top:1px solid #eee; margin:6px 0; }

/* ===== CONTEÚDO ===== */
.conteudo{
  max-width:1200px; width:100%;
  margin:0 auto; padding:20px; flex:1;
  display:flex; gap:20px;
}
.pagina{ flex:3; min-width:0; }
.coluna-lateral{
  flex:1; min-width:280px;
  background:var(--card); padding:18px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  height:fit-content; position:sticky; top:72px;
}

/* tipografia, figuras */
h1{ font-size:clamp(26px,4vw,40px); line-height:1.2; margin:10px 0 16px; }
h2{ font-size:20px; margin:0 0 10px; color:var(--cor-a); }
h3{ font-size:18px; margin:0 0 8px; }
p{ margin:16px 0; }
figure{ margin:34px 0; text-align:center; }
figure img{ max-width:100%; border-radius:12px; }
figcaption{ font-size:.9em; color:#555; margin-top:6px; }

/* recortes */
.recorte{
  background:#fffbe7;
  border-radius:18px 44px 18px 18px;
  padding:16px 18px; margin:20px 0;
  box-shadow:2px 6px 14px rgba(0,0,0,.08);
  max-width:420px;
}
.recorte.direita{ float:right; margin-left:20px; }
.recorte.esquerda{ float:left; margin-right:20px; }
.recorte.destaque{
  background:linear-gradient(135deg,var(--cor-a),var(--cor-b));
  color:#fff;
}
.recorte small{ opacity:.9 }

/* CTA */
.cta{
  display:inline-block; font-weight:800; color:#fff;
  text-decoration:none; padding:12px 18px; border-radius:14px;
  background:linear-gradient(135deg,var(--cor-a),var(--cor-b));
  box-shadow:0 10px 26px rgba(241,7,163,.45), 0 4px 10px rgba(0,0,0,.15);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cta:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:0 14px 34px rgba(241,7,163,.45), 0 6px 18px rgba(0,0,0,.18);
  filter:brightness(1.06);
}

/* rodapé */
.rodape{
  text-align:center; padding:20px; background:#fff;
  border-top:1px solid #ddd; font-size:.92em;
}

/* responsivo */
@media (max-width: 980px){
  .hamb{ display:block; }
  .nav{
    position:fixed; inset:56px 0 auto 0; background:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.16);
    display:none; flex-direction:column; padding:12px; z-index:40;
  }
  .nav.open{ display:flex; }
  .conteudo{ flex-direction:column; }
  .coluna-lateral{ position:static; }
  .recorte{ float:none; margin:16px auto; max-width:100%; }
}