/* ============================================================
   Card-botão das telas de SEQUÊNCIA (EST003, EST004, ...)
   ============================================================
   O card INTEIRO é o botão: sem parágrafo explicativo e sem tecla "Abrir"
   dentro dele. Com o card clicável, uma tecla só competiria com ele e ainda
   encolheria a área de clique.

   O relevo é físico, não decorativo: a borda de baixo colorida é a ESPESSURA da
   peça — cresce no hover (o card sobe) e some no clique (o card afunda). É o
   que faz parecer tecla de verdade.

   A cor da etapa entra por --c no style do próprio <a>.

   Uso:
     <div class="seq-grid">
       <a class="seqcard" style="--c:#2F5FAE" href="...">
         <span class="n">1</span>
         <span class="t">Título da etapa</span>
         <i class="bi bi-chevron-right ir"></i>
       </a>
     </div>
   ============================================================ */

.seq-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

.seqcard {
  --c:#2F5FAE;
  display:flex; align-items:center; gap:13px;
  padding:15px 16px; border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f6f8fb 100%);
  border:1px solid rgba(16,24,40,.09);
  /* A versão cinza vem ANTES de propósito: color-mix() é recente e, onde não
     houver suporte, a declaração seguinte é descartada inteira — sem isto o
     card ficaria chapado, sem relevo nenhum. O mesmo vale nos estados abaixo. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 4px 0 #cfd7e3,
    0 9px 18px rgba(16,24,40,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 4px 0 color-mix(in srgb, var(--c) 26%, #cfd7e3),
    0 9px 18px rgba(16,24,40,.11);
  color:#15263f; text-decoration:none;
  transition:transform .13s cubic-bezier(.4,0,.2,1), box-shadow .13s cubic-bezier(.4,0,.2,1);
}

.seqcard:hover {
  color:#15263f; transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 7px 0 #c3ccda,
    0 14px 26px rgba(16,24,40,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 7px 0 color-mix(in srgb, var(--c) 34%, #cfd7e3),
    0 14px 26px rgba(16,24,40,.16);
}

.seqcard:active {
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 #cfd7e3,
    0 3px 8px rgba(16,24,40,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 color-mix(in srgb, var(--c) 26%, #cfd7e3),
    0 3px 8px rgba(16,24,40,.14);
}

.seqcard:focus-visible { outline:3px solid var(--c); outline-offset:2px; }
.seqcard:focus-visible { outline:3px solid color-mix(in srgb, var(--c) 45%, #fff); outline-offset:2px; }

/* Número: pastilha em relevo, na cor da etapa */
.seqcard .n {
  flex:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font:800 15px/1 ui-monospace,Consolas,monospace; color:#fff;
  background:var(--c);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(16,24,40,.22);
}

.seqcard .t  { font-size:13.5px; font-weight:700; line-height:1.28; }
.seqcard .ir { margin-left:auto; font-size:13px; color:#98a2b3; flex:none; }
.seqcard:hover .ir { color:var(--c); }

@media (prefers-reduced-motion:reduce) { .seqcard { transition:none; } }