/* ==========================================================================
   ERRO 404 · EQ Seguros
   Uma coluna centralizada: 404 gigante, título, subtítulo e um botão.
   Reaproveita do site: .phero, .wrap, .btn, .btn-primary, .accent e os tokens de :root.
   Mobile first: a base serve 320px; os @media (min-width) ampliam.
   ========================================================================== */

/* ---------- Seção: ocupa a altura útil da tela, conteúdo no centro ---------- */
.err404-tela{
  /* altura do cabeçalho, medida no site (faixa navy + navegação): 160px até 959px, 138px depois */
  --err404-header:160px;
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - var(--err404-header));   /* navegadores antigos */
  min-height:calc(100svh - var(--err404-header));  /* desconta a barra do navegador no celular */
  padding:44px 0 56px;
  text-align:center;
  color-scheme:light;                              /* o site não tem modo escuro */
}
.err404-tela > .wrap{width:100%;}                  /* o .wrap é filho flex: precisa de largura total */
.err404-bloco{max-width:720px;margin:0 auto;}

/* ---------- Numeral: o foco da página ---------- */
.err404-num{
  display:block;
  /* limitado também pela altura da tela, para o bloco inteiro caber em 1024×768 */
  font-size:clamp(7.5rem,min(24vw,28svh),18rem);
  font-weight:800;line-height:.9;letter-spacing:-.05em;
  color:var(--navy);font-variant-numeric:tabular-nums;
  margin:0 0 12px;
}
.err404-zero{color:var(--orange);}                 /* laranja chapado, sem sombra */

/* ---------- Título, subtítulo e botão ---------- */
.err404-bloco h1{margin:0 0 18px;max-width:none;}
.err404-sub{max-width:560px;margin:0 auto 40px;font-size:1.16rem;line-height:1.7;color:var(--gray);}
.err404-bloco .btn{width:100%;}                    /* largura total no celular */
.err404-bloco .btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

/* ---------- Entrada suave, sem depender de JavaScript ---------- */
@keyframes err404-entra{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:none;}
}
.err404-anim{animation:err404-entra .85s cubic-bezier(.22,.68,.32,1) both;}
.err404-bloco h1.err404-anim{animation-delay:.08s;}
.err404-sub.err404-anim{animation-delay:.16s;}
.err404-bloco .btn.err404-anim{animation-delay:.24s;}

/* ---------- 521px+: botão volta ao tamanho natural ---------- */
@media (min-width:521px){
  .err404-bloco .btn{width:auto;}
}

/* ---------- 960px+: cabeçalho de 138px e respiro do desktop ---------- */
@media (min-width:960px){
  .err404-tela{--err404-header:138px;padding:56px 0 64px;}
}

/* ---------- Telas baixas (notebook 1366×768, 1280×720): menos respiro para o botão ficar sempre à vista ---------- */
@media (min-width:960px) and (max-height:820px){
  .err404-tela{padding:36px 0 44px;}
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .err404-anim{animation:none;opacity:1;transform:none;}
  .err404-bloco .btn,.err404-bloco .btn:hover{transition:none;}
}