/* =========================================================
   Muira · Estilos básicos
   ========================================================= */

/* Fonte temática (trocar futuramente) */
@font-face{
  font-family:"Muira";
  src:local("Arial"); /* TODO: apontar para fonte ritual */
}

/* Paleta */
:root{
  --verde-escuro:#0e1f16;
  --verdao:#18a96b;
  --dourado:#c5aa52;
  --branco:#f2f2f2;
  --vermelho:#ff6666;
  --amarelo:#ffd16b;
  --raio:2rem;            /* raio padrão */
  --trans:0.25s;
  --larg-max:600px;
}

/* Reset básico */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* Fundo místico: imagem + véu escuro para legibilidade */
body{
  font-family:Muira,serif;
  color:var(--branco);
  background:
    linear-gradient(rgba(14,31,22,.88),rgba(14,31,22,.88)), /* véu */
    url("../img/floresta.jpg") center/cover fixed no-repeat;
  background-color:var(--verde-escuro); /* fallback */
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.4;
}

/* Container central */
.centro{
  width:100%;
  max-width:var(--larg-max);
  margin:auto;
  padding:2rem;
  text-align:center;
}
.intro{
  margin:1.5rem auto;
  font-size:1.1rem;
  max-width:40ch;
  line-height:1.4;
  opacity:.95;
}

/* Títulos */
.titulo{
  font-size:3rem;
  letter-spacing:.15rem;
  color:var(--dourado);
  text-shadow:0 0 8px rgba(0,0,0,.8);
  margin-bottom:1rem;
}

/* Ajustes tipográficos menores */
h2.titulo{font-size:2.4rem}

/* ===== CAMPOS PADRÃO MUIRA =====
   Use class="campo" nos inputs & selects
*/
.campo{
  display:block;
  width:min(90%,420px);
  margin:0.75rem auto;
  padding:0.9rem 1.2rem;
  font-size:1.1rem;
  line-height:1.2;
  color:var(--branco);
  background:rgba(0,0,0,.35);
  border:2px solid var(--dourado);
  border-radius:var(--raio);
  outline:none;
  transition:var(--trans) all ease;
}
.campo::placeholder{
  color:rgba(255,255,255,.65);
  letter-spacing:.02em;
}
.campo:focus,
.campo:focus-visible{
  background:rgba(197,170,82,.15);
  box-shadow:0 0 8px 0 rgba(197,170,82,.8),0 0 2px 2px rgba(0,0,0,.6) inset;
  border-color:var(--dourado);
}

/* Fallback: se esquecer de aplicar .campo */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"]{
  font-family:inherit;
  font-size:1rem;
  color:var(--branco);
}
input[type="text"]:not(.campo),
input[type="email"]:not(.campo),
input[type="password"]:not(.campo),
input[type="search"]:not(.campo){
  @supports (all:unset){} /* placeholder para linters */
  display:block;
  width:min(90%,420px);
  margin:0.75rem auto;
  padding:0.9rem 1.2rem;
  background:rgba(0,0,0,.35);
  border:2px solid var(--dourado);
  border-radius:var(--raio);
  outline:none;
  transition:var(--trans) all ease;
}

/* ===== Botões ===== */
.botao{
  display:inline-block;
  padding:.9rem 2.5rem;
  margin-top:.5rem;
  border:2px solid var(--dourado);
  color:var(--dourado);
  text-decoration:none;
  font-size:1rem;
  letter-spacing:.1rem;
  text-transform:none;
  transition:.3s all ease;
  cursor:pointer;
  border-radius:var(--raio);
  background:transparent;
}
.botao:hover,
.botao:focus-visible{
  background:var(--dourado);
  color:var(--verde-escuro);
}

/* Variações */
.botao-danger{
  border-color:var(--vermelho);
  color:var(--vermelho);
}
.botao-danger:hover,
.botao-danger:focus-visible{
  background:var(--vermelho);
  color:var(--verde-escuro);
}

.botao-small{
  padding:.6rem 1.6rem;
  font-size:.9rem;
}

/* Mensagens */
.msg{margin-top:1rem;font-size:1rem}
.msg-erro{color:var(--vermelho)}
.msg-ok{color:var(--amarelo)} /* dourado/amarelo p/ confirmação */
.msg-info{color:var(--branco);opacity:.8}

/* Linha divisória decorativa */
.linha-div{
  width:120px;
  height:2px;
  margin:1.5rem auto;
  background:linear-gradient(90deg,transparent,var(--dourado),transparent);
}

/* Links sutis */
a{color:var(--dourado);text-decoration:none;transition:var(--trans) color}
a:hover{text-decoration:underline;color:var(--branco)}

/* ===== Responsivo ===== */
@media (max-width:600px){
  .titulo{font-size:2.2rem}
  h2.titulo{font-size:2rem}
  .intro{font-size:1rem}

  body{
    /* Mobile: overlay mais escuro; attachment scroll */
    background:
      linear-gradient(rgba(14,31,22,.94),rgba(14,31,22,.94)),
      url("../img/floresta-mobile.jpg") center/cover no-repeat;
    background-attachment:scroll;
  }
  .campo{
    width:92%;
    font-size:1rem;
    padding:0.85rem 1rem;
  }
  .botao{
    width:auto;
    max-width:80%;
    padding:.85rem 2rem;
    font-size:1rem;
  }
}

/* ===== Acessibilidade: usuário prefere menos movimento ===== */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
/* ===== Fundo com vinheta ===== */
body{
  position:relative;
  overflow-x:hidden;
  background:
    url("../img/floresta.jpg") center/cover fixed no-repeat;
  background-color:var(--verde-escuro);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  /* vinheta: escuro nas bordas, quase transparente no meio */
  background:radial-gradient(circle at 50% 40%,
            rgba(14,31,22,.15) 0%,
            rgba(14,31,22,.35) 55%,
            rgba(14,31,22,.65) 100%);
  pointer-events:none;
  z-index:0;
}

/* Painel translúcido atrás do conteúdo */
.centro{
  position:relative;
  z-index:1;
  background:rgba(14,31,22,.65);
  backdrop-filter:blur(4px);        /* Safari/Chrome; ok se ignorado */
  -webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(197,170,82,.35);
  border-radius:1.25rem;
  max-width:var(--larg-max);
  margin:2rem auto;
}
@media(max-width:600px){
  body{
    background:
      url("../img/floresta-mobile.jpg") center/cover no-repeat;
    background-attachment:scroll;
  }
  body::before{
    background:radial-gradient(circle at 50% 35%,
              rgba(14,31,22,.35) 0%,
              rgba(14,31,22,.75) 100%);
  }
  .centro{
    margin:1.5rem auto;
    padding:1.75rem 1rem;
    background:rgba(14,31,22,.78);
  }
}