/* HistoriaDoJogo — style.v1.css */
:root{
  --agua: #2F6E68;
  --agua-dark: #204e4a;
  --areia: #EFE4D0;
  --terracota: #C06B3E;
  --terracota-dark: #9c5230;
  --texto: #2b2622;
  --branco: #fffaf2;
  --borda: #d8c9a8;
  --fonte-corpo: 'Nunito', 'Segoe UI', Arial, sans-serif;
  --fonte-destaque: 'Georgia', 'Palatino Linotype', serif;
}

[hidden]{display:none!important;}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  font-family:var(--fonte-corpo);
  background:var(--areia);
  color:var(--texto);
  line-height:1.65;
}

a{color:var(--agua-dark);text-decoration:underline;}
a:hover{color:var(--terracota);}

img,svg{max-width:100%;height:auto;display:block;}

/* ===== Age Gate ===== */
#agegate{
  position:fixed;inset:0;z-index:9999;
  background:rgba(32,30,24,0.92);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
#agegate .agegate-box{
  background:var(--branco);
  border:3px solid var(--terracota);
  border-radius:14px;
  max-width:460px;
  padding:2rem;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
#agegate h2{
  font-family:var(--fonte-destaque);
  color:var(--agua-dark);
  margin-top:0;
}
#agegate .agegate-botoes{
  display:flex;gap:1rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap;
}
#agegate button{
  font-size:1.05rem;
  padding:0.7rem 1.6rem;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:700;
}
#agegate-sim{background:var(--agua);color:var(--branco);}
#agegate-sim:hover{background:var(--agua-dark);}
#agegate-nao{background:var(--borda);color:var(--texto);}
#agegate-nao:hover{background:var(--terracota);color:var(--branco);}

/* ===== Header / Nav ===== */
header.topo{
  background:var(--agua);
  color:var(--branco);
  padding:1rem 1.2rem;
}
.marca{
  font-family:var(--fonte-destaque);
  font-size:1.6rem;
  font-weight:700;
  color:var(--branco);
  text-decoration:none;
  letter-spacing:0.5px;
}
.marca:hover{color:var(--areia);}
nav.menu-principal{
  margin-top:0.8rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 1rem;
}
nav.menu-principal a{
  color:var(--areia);
  text-decoration:none;
  font-size:0.92rem;
  padding:0.25rem 0.1rem;
  border-bottom:2px solid transparent;
}
nav.menu-principal a:hover,nav.menu-principal a:focus{
  border-bottom-color:var(--terracota);
  color:var(--branco);
}

main{
  max-width:960px;
  margin:0 auto;
  padding:2rem 1.2rem 3rem;
}

h1{
  font-family:var(--fonte-destaque);
  color:var(--agua-dark);
  font-size:2.1rem;
  border-bottom:3px solid var(--terracota);
  padding-bottom:0.4rem;
  display:inline-block;
}
h2{
  font-family:var(--fonte-destaque);
  color:var(--terracota-dark);
  font-size:1.4rem;
  margin-top:2rem;
}

.ilustracao{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:10px;
  padding:1rem;
  margin:1.5rem 0;
  text-align:center;
}
.ilustracao figcaption{
  font-size:0.9rem;
  color:#5c5346;
  margin-top:0.6rem;
  font-style:italic;
}

.caixa-destaque{
  background:#fff;
  border-left:5px solid var(--agua);
  padding:1rem 1.2rem;
  margin:1.5rem 0;
  border-radius:6px;
}

.caixa-alerta{
  background:#fbeee3;
  border:2px solid var(--terracota);
  padding:1.2rem;
  border-radius:8px;
  margin:1.5rem 0;
}
.caixa-alerta h2{margin-top:0;}
.caixa-alerta a.helpline{
  display:inline-block;
  font-size:1.3rem;
  font-weight:800;
  color:var(--terracota-dark);
}

footer.rodape{
  background:var(--agua-dark);
  color:var(--areia);
  text-align:center;
  padding:1.5rem 1rem;
  font-size:0.85rem;
}
footer.rodape a{color:var(--areia);}
footer.rodape a:hover{color:#fff;}

/* ===== Mapa das Fontes ===== */
.mapa-wrap{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  align-items:flex-start;
}
.mapa-svg-box{
  flex:1 1 360px;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:10px;
  padding:1rem;
}
.ponto-mapa{
  cursor:pointer;
}
.ponto-mapa circle{
  fill:var(--terracota);
  stroke:var(--branco);
  stroke-width:2;
  transition:r 0.15s ease, fill 0.15s ease;
}
.ponto-mapa:hover circle,.ponto-mapa:focus circle{
  fill:var(--agua-dark);
  r:14;
}
.ponto-mapa text{
  font-size:11px;
  fill:var(--texto);
  font-family:var(--fonte-corpo);
}
.painel-ponto{
  flex:1 1 320px;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:10px;
  padding:1.2rem;
  min-height:220px;
}
.painel-ponto h3{
  font-family:var(--fonte-destaque);
  color:var(--agua-dark);
  margin-top:0;
}
.painel-vazio{
  color:#8a7f6c;
  font-style:italic;
}

/* ===== Galeria ===== */
.grade-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}

/* ===== Formulário de contato ===== */
form.contato-form{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:10px;
  padding:1.5rem;
  max-width:520px;
}
form.contato-form label{
  display:block;
  margin-top:1rem;
  font-weight:700;
}
form.contato-form input,form.contato-form textarea{
  width:100%;
  padding:0.6rem;
  border:1px solid var(--borda);
  border-radius:6px;
  font-family:inherit;
  margin-top:0.3rem;
}
form.contato-form button{
  margin-top:1.3rem;
  background:var(--agua);
  color:var(--branco);
  border:none;
  padding:0.7rem 1.5rem;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
form.contato-form button:hover{background:var(--agua-dark);}

@media (max-width:600px){
  h1{font-size:1.6rem;}
  main{padding:1.2rem 0.9rem 2rem;}
}