/* ============================================================
   STORGE — DOIS ACRÉSCIMOS AO DESIGN ORIGINAL

   1) As duas portas da home (campista / equipe)
   2) A ficha de inscrição dividida em etapas

   NÃO mexe em cor, fundo, menu ou tipografia do site. Tudo aqui
   usa as variáveis que já existem no style.css, para os blocos
   novos nascerem com a mesma cara dos que já estavam lá.
   ============================================================ */

/* ---------------- AS DUAS PORTAS ---------------- */
.portas{
  max-width:var(--wrap);margin:0 auto;padding:56px 24px 8px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.porta{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:196px;padding:26px;
  border-radius:var(--r);text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.porta:hover{transform:translateY(-4px)}
.porta:focus-visible{outline:3px solid var(--branco);outline-offset:3px}

/* as mesmas duas cores que o site já usa nos blocos de playlist e contato */
.porta--verde{background:var(--verde);color:var(--tinta)}
.porta--azul{background:var(--azul);color:var(--branco)}

.porta__tag{
  font-family:var(--corpo);font-weight:600;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;opacity:.86;
}
.porta__t{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,52px);line-height:.88;margin:9px 0 7px;
}
.porta__d{font-size:14.5px;line-height:1.45;opacity:.84;max-width:32ch;margin:0}

.porta__seta{
  position:absolute;top:24px;right:26px;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,13,9,.14);
  transition:transform .16s ease;
}
.porta--azul .porta__seta{background:rgba(255,255,255,.18)}
.porta:hover .porta__seta{transform:translate(4px,-4px)}
.porta__seta svg{width:21px;height:21px}

@media(max-width:820px){
  .portas{grid-template-columns:1fr;gap:13px;padding:38px 20px 4px}
  .porta{min-height:162px;padding:21px}
  .porta__seta{width:38px;height:38px;top:19px;right:19px}
}

/* ---------------- ETAPAS DA FICHA ---------------- */
/* Fica tudo dentro do cartão claro do formulário, então usa a
   paleta de papel que o style.css já define. */
.etapa[hidden]{display:none}

.trilha{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 30px;padding:0 0 22px;border-bottom:2px solid var(--papel-2);
}
.trilha__p{
  display:flex;align-items:center;gap:9px;
  font-family:var(--corpo);font-size:13.5px;font-weight:600;
  color:#5C6A5F;background:none;border:0;padding:0;cursor:default;
}
.trilha__p i{
  font-style:normal;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:var(--papel-2);color:#5C6A5F;
  font-family:var(--display);font-weight:900;font-size:15px;
}
.trilha__p.is-on{color:var(--tinta)}
.trilha__p.is-on i{background:var(--verde);color:var(--tinta)}
.trilha__p.is-feito{color:#12A824;cursor:pointer}
.trilha__p.is-feito i{background:#12A824;color:#fff}
.trilha__risco{flex:1 1 18px;height:2px;background:var(--papel-2);min-width:12px}

.passo-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:34px;padding-top:26px;border-top:2px solid var(--papel-2);
}
.passo-nav .btn{white-space:nowrap}
.passo-nav__dir{margin-left:auto}
.btn--voltar{background:none;color:#5C6A5F;border-color:var(--papel-2)}
.btn--voltar:hover{background:var(--papel-2);color:var(--tinta)}

@media(max-width:560px){
  .trilha__p span{display:none}
  .trilha__p.is-on span{display:inline}
  .trilha{gap:6px}
  .passo-nav{flex-direction:column-reverse;align-items:stretch}
  .passo-nav .btn{width:100%;justify-content:center}
  .passo-nav__dir{margin-left:0}
}