/* reset box-sizing */
* { box-sizing: border-box; }

/* ------------------------------
   VARIÁVEIS (fallback + dark)
   ------------------------------ */
:root {
  --nf-bg: #ffffff;
  --nf-title: #000000;
  --nf-text: #000000;
  --nf-action-bg: #0046d5;
  --nf-action-shadow: rgba(0,70,213,0.25);
  --nf-icon: #d97706;       /* amber para o ícone (claro) */
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --nf-bg: #0f1724;            /* fundo escuro geral (se quiser aplicar) */
    --nf-title: #f8fafc;         /* quase branco */
    --nf-text: #d1d5db;          /* texto secundário claro */
    --nf-action-bg: #2563eb;     /* botão azul ajustado ao dark */
    --nf-action-shadow: rgba(37,99,235,0.12);
    --nf-icon: #ffbf6b;          /* amber mais claro para contraste no dark */
  }
}

/* ---------- CONTAINER / CENTRALIZAÇÃO ---------- */
#notfound {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: transparent; /* mantem o body por trás */
}

/* mantém comportamento de centralização absoluto da versão antiga */
#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 410px;
  width: 100%;
  text-align: center;
  background: transparent; /* se quiser bloco branco, troque por var(--nf-bg) */
  padding: 0 18px;
}

/* ---------- ÍCONE GRANDE (H1) ---------- */
.notfound .notfound-404 {
  height: 280px;
  position: relative;
  z-index: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* H1 comporta o ícone — usa variável de cor e grande responsivo */
.notfound .notfound-404 h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 230px;         /* tamanho original grande */
  margin: 0;
  font-weight: 900;
  color: var(--nf-icon);    /* usa cor definida por variável */
  line-height: 1;
  display:inline-block;
}

/* força o ícone a herdar o tamanho do H1 e ficar centralizado */
.notfound .notfound-404 h1 i,
.notfound .notfound-404 h1 .fa {
  font-size: 1em;   /* herda 230px do h1 */
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* ---------- TITULO / TEXTO ---------- */
.notfound h2 {
  font-family: 'Montserrat', sans-serif;
  color: var(--nf-title);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
}

.notfound p {
  font-family: 'Montserrat', sans-serif;
  color: var(--nf-text);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
  text-align: justify;
  margin-top: 0;
}

/* ---------- BOTÃO ---------- */
.notfound a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--nf-action-bg);
  display: inline-block;
  padding: 15px 30px;
  border-radius: 40px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0px 4px 15px -5px var(--nf-action-shadow);
  transition: transform .12s ease, opacity .12s ease;
}
.notfound a:hover { transform: translateY(-2px); opacity: .95; }

/* ---------- RESPONSIVO (mantém seus valores originais) ---------- */
@media only screen and (max-width: 767px) {
  .notfound .notfound-404 { height: 142px; }
  .notfound .notfound-404 h1 { font-size: 112px; }
}