:root{
  --bg:#120b05;
  --gold:#c99a45;
  --gold-soft:#ead19a;
  --blue:#082945;
  --shadow:rgba(0,0,0,.48);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; background:var(--bg); }
body{ font-family: Georgia, "Times New Roman", serif; color:#2a1608; }

.hero-wrap{
  position:relative;
  width:min(100vw,1536px);
  margin:0 auto;
  overflow:hidden;
  background:#1a1008;
  line-height:0;
  box-shadow:0 0 50px rgba(0,0,0,.7);
}
.hero-img{ width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; }

.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  border-radius:14px;
  outline:0;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, filter .18s ease;
  -webkit-tap-highlight-color:rgba(201,154,69,.25);
}
.hotspot:focus-visible{
  box-shadow:0 0 0 3px rgba(255,233,166,.85), 0 0 22px rgba(201,154,69,.8);
}
.pressable:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 26px rgba(0,0,0,.28), 0 0 22px rgba(236,196,108,.22) inset;
  background:rgba(255,233,166,.06);
}
.pressable:active{
  transform:translateY(3px) scale(.992);
  box-shadow:inset 0 7px 18px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.22);
  background:rgba(70,34,8,.10);
}
.logo-home:hover{
  transform:translateY(-2px) scale(1.01);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));
}
.logo-home:active{ transform:translateY(2px) scale(.99); }

/* Coordenadas baseadas na imagem final 1536x1024 */
.logo-home{ left:1.0%; top:1.2%; width:16.1%; height:18.0%; }

.top-historia{ left:50.2%; top:3.4%; width:9.5%; height:13.0%; }
.top-genealogia{ left:59.6%; top:3.4%; width:11.0%; height:13.0%; }
.top-acervo{ left:70.4%; top:3.4%; width:10.0%; height:13.0%; }
.top-jarvis{ left:80.6%; top:3.4%; width:9.2%; height:13.0%; }
.top-contato{ left:89.3%; top:3.4%; width:9.6%; height:13.0%; }

.selo-spin{ left:82.8%; top:19.0%; width:12.0%; height:20.0%; border-radius:50%; cursor:default; transform-origin:center center; }
.selo-spin:hover{ transform:rotate(10deg) scale(1.015); box-shadow:0 0 25px rgba(70,34,8,.18); }

.card-casa{ left:4.4%; top:61.1%; width:19.0%; height:31.0%; }
.card-historia{ left:24.0%; top:61.1%; width:16.8%; height:31.0%; }
.card-genealogia{ left:41.8%; top:61.1%; width:17.2%; height:31.0%; }
.card-acervo{ left:60.0%; top:61.1%; width:17.3%; height:31.0%; }
.card-contato{ left:78.4%; top:61.1%; width:17.5%; height:31.0%; }

/* área do lema/rodapé: futuramente vira doações */
.donate-link{ left:25.0%; top:93.0%; width:50.0%; height:4.0%; border-radius:24px; }
.donate-link:hover{ transform:translateY(-2px); background:rgba(8,41,69,.10); box-shadow:0 0 20px rgba(234,209,154,.18); }

.mobile-actions{ display:none; }

/* Debug: abrir /?debug=1 para enxergar as áreas */
body.debug .hotspot{ background:rgba(255,0,0,.18); border:2px solid rgba(255,0,0,.55); }
body.debug .selo-spin{ background:rgba(0,120,255,.18); border:2px solid rgba(0,120,255,.65); }
body.debug .donate-link{ background:rgba(0,255,80,.14); border:2px solid rgba(0,255,80,.55); }

/* Tablets */
@media (max-width: 1024px){
  .hero-wrap{ width:100vw; }
  .pressable:hover{ transform:translateY(-2px); }
}

/* Celulares: mantém a imagem inteira responsiva e adiciona botões grandes abaixo */
@media (max-width: 700px){
  body{ background:#160d06; }
  .hero-wrap{ box-shadow:none; }
  .hotspot{ border-radius:8px; }
  .pressable:hover{ transform:none; box-shadow:none; background:transparent; }
  .pressable:active{ transform:scale(.985); box-shadow:inset 0 3px 10px rgba(0,0,0,.28); background:rgba(70,34,8,.12); }

  .mobile-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:14px;
    background:linear-gradient(180deg,#1a1008,#0d0704);
  }
  .mobile-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px;
    border:1px solid rgba(234,209,154,.45);
    border-radius:12px;
    color:var(--gold-soft);
    background:linear-gradient(180deg,rgba(70,34,8,.75),rgba(24,12,5,.95));
    text-decoration:none;
    font:700 15px/1.2 Georgia,"Times New Roman",serif;
    box-shadow:0 4px 12px rgba(0,0,0,.32);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .mobile-actions a:active{
    transform:translateY(3px);
    box-shadow:inset 0 5px 12px rgba(0,0,0,.45);
  }
}

@media (max-width: 420px){
  .mobile-actions{ grid-template-columns:1fr; }
}