.topo { position: sticky; top: 0; z-index: 30; background: rgba(255,248,236,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid transparent; transition: border-color .25s, box-shadow .25s; }
/* .is-rolado é posta pelo js/modules/topo.js depois do primeiro pedaço de rolagem. */
.topo.is-rolado { border-bottom-color: var(--linha); box-shadow: 0 6px 20px rgba(29,29,27,.06); }
.topo .wrap { display: flex; justify-content: space-between; align-items: center; height: var(--altura-nav); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--fonte-titulo); font-size: 22px; text-transform: uppercase; white-space: nowrap; }
.marca img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--branco); }
.marca b { color: var(--marrom); font-weight: 400; }
.topo nav { display: flex; align-items: center; gap: 26px; font-weight: 800; }
.topo nav a:not(.cta) { text-decoration: none; }
.topo nav a:not(.cta):hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--amarelo); text-underline-offset: 5px; }

.hero { position: relative; min-height: calc(100vh - var(--altura-nav)); display: flex; align-items: center; overflow: hidden; border-bottom: var(--borda); }
.hero__arte { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; background: url('../assets/img/roberto-lendo.jpg') 78% center / cover no-repeat; }
.hero__arte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--creme) 0, rgba(255,248,236,0) 30%); }
.hero .wrap { position: relative; width: 100%; }
.hero__texto { max-width: 620px; padding: 40px 0 70px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 76px); margin: 0 0 20px; }
.hero h1 .linha { display: block; }
.hero h1 .linha .destaque { padding-left: 0; }
.hero .cta { margin-top: 10px; }
.hero__desce { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-weight: 900; text-decoration: none; background: var(--branco);
  border: var(--borda); border-radius: 999px; padding: 8px 18px; animation: pula 2s ease-in-out infinite; }
@keyframes pula { 50% { transform: translate(-50%, 6px); } }

@media (max-width: 900px) {
  .marca { font-size: 18px; } .marca img { width: 38px; height: 38px; }
  .topo nav a:not(.cta) { display: none; }
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__texto { padding: 30px 0 0; }
  .hero__arte { position: relative; width: 100%; height: 300px; order: 2; background-position: 75% center; margin-top: 30px; }
  .hero__arte::after { background: linear-gradient(var(--creme), rgba(255,248,236,0) 25%); }
  .hero__desce { display: none; }
}