/* =====================================================================
   NAVEGAÇÃO — a espinha do caminho (17/09/2026)
   =====================================================================

   Arquivo NOVO. Não altera nenhuma folha existente: quando precisa vencer
   uma regra antiga, faz isso aqui, com o seletor mínimo necessário e um
   comentário dizendo o que está sobrescrevendo e por quê.

   O QUE ESTE ARQUIVO RESOLVE (medido, não achado):

   Uma conta recém-criada encontrava 18 portas fechadas (HTTP 403) e nenhum
   link para a única porta que as abre — a semana de degustação, que só era
   mencionada na página de erro e na página de pagamento. O Atlas oferecia 26
   destinos; 13 deles negavam a entrada. A primeira cliente pagante bateu três
   vezes numa porta fechada e pagou sem nunca ter estudado.

   Então aqui não se decora: aqui se dá UM caminho.

   REGRAS DA CASA respeitadas linha a linha:
   - Paleta Festival. Nenhum azul, nenhum dourado.
   - Nada de menu quadrado: todo canto é o losango assimétrico da casa.
   - Piso de 11px de fonte. Alvo de toque nunca abaixo de 44px.
   - HUD grande e integrado — faixa que atravessa, não caixinha solta.
   - Sem CDN, sem fonte externa: só a pilha do sistema.
   - prefers-reduced-motion desliga todo movimento.
   ===================================================================== */

:root {
  --festa-brasa:  #ff675d;
  --festa-fogo:   #e94b3c;
  --festa-vinho:  #b72f67;
  --festa-ameixa: #4e243d;
  --festa-noite:  #32192b;
  --festa-mata:   #4f9b58;
  --festa-limo:   #b7d94b;
  --festa-papel:  #fff4df;
  --festa-terra:  #b94f42;
  --festa-casca:  #6b4634;
  --festa-carvao: #17131b;

  /* Alvo de toque mínimo da casa. Toda peça clicável herda daqui. */
  --toque: 44px;
}

/* =====================================================================
   1. O PRÓXIMO PASSO — a única coisa que a pessoa deve fazer agora
   =====================================================================

   Faixa larga, presa no topo do conteúdo, com UMA ação. Não é um card
   entre cards: é a instrução da tela. Quem acabou de criar conta não
   precisa de um cardápio, precisa de uma seta.
   ===================================================================== */

.passo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  margin: 0 0 clamp(18px, 3vw, 30px);
  padding: clamp(16px, 2.6vw, 24px) clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 244, 223, .2);
  /* Losango assimétrico: a forma da casa, nunca o retângulo de menu. */
  border-radius: 26px 8px 26px 8px;
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(255, 103, 93, .28), transparent 62%),
    linear-gradient(135deg, rgba(78, 36, 61, .96), rgba(50, 25, 43, .98));
  box-shadow: 0 14px 34px rgba(23, 19, 27, .42);
  overflow: hidden;
}

/* Fita de brasa na borda esquerda: sinaliza "é por aqui" sem gritar. */
.passo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--festa-brasa), var(--festa-vinho));
}

.passo__marca {
  display: grid;
  place-items: center;
  width: clamp(52px, 7vw, 66px);
  height: clamp(52px, 7vw, 66px);
  border-radius: 20px 6px 20px 6px;
  background: rgba(255, 103, 93, .2);
  border: 1px solid rgba(255, 103, 93, .46);
}

.passo__marca img,
.passo__marca .ico {
  width: clamp(26px, 3.4vw, 32px);
  height: clamp(26px, 3.4vw, 32px);
}

.passo__corpo {
  min-width: 0;
}

.passo__etapa {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--festa-limo);
}

.passo__titulo {
  margin: 0 0 6px;
  font-size: clamp(19px, 2.7vw, 27px);
  line-height: 1.16;
  color: var(--festa-papel);
}

.passo__texto {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(12.5px, 1.5vw, 14.5px);
  line-height: 1.5;
  color: rgba(255, 244, 223, .8);
}

/* O botão. Alto, largo, de um verbo só.
 *
 * A COR AQUI FOI MEDIDA, NÃO ESCOLHIDA. A primeira versão era creme (#fff4df)
 * sobre brasa (#ff675d): 2,62:1, reprovado nos 4,5:1 exigidos — e justamente
 * no elemento mais importante da tela. Trocar a tinta para carvão resolve sem
 * sair da paleta: 6,42:1 sobre a brasa e 4,83:1 sobre o fogo, que é a ponta
 * mais escura do gradiente. Passa nas duas pontas. */
.passo__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;              /* acima dos 44px exigidos */
  min-width: max(180px, var(--toque));
  padding: 13px 26px;
  border: 1px solid rgba(23, 19, 27, .38);
  border-radius: 18px 6px 18px 6px;
  background: linear-gradient(140deg, var(--festa-brasa), var(--festa-fogo));
  color: var(--festa-carvao);
  font-size: clamp(14px, 1.7vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.passo__acao:hover,
.passo__acao:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 26px rgba(183, 47, 103, .42);
}

.passo__acao:focus-visible {
  outline: 3px solid var(--festa-limo);
  outline-offset: 3px;
}

/* Linha de apoio: o que mais existe, sem competir com a ação principal.
 *
 * A entrelinha de 2 não é estética: é o que dá ao link dentro da frase os
 * 44px de alvo de toque que a casa exige. O link é inline-block com 10px de
 * padding em cima e embaixo; sobre uma caixa de linha de 24px (12px × 2) isso
 * fecha exatamente 44px, e a entrelinha larga impede que ele invada a linha
 * de cima. Link em prosa costuma ser a desculpa para alvo pequeno — aqui não
 * precisou ser. */
.passo__alternativa {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 2;
  color: rgba(255, 244, 223, .64);
}

.passo__alternativa a {
  color: var(--festa-limo);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 10px 4px;      /* 24px de caixa + 20px = 44px */
}

.passo__alternativa a:hover,
.passo__alternativa a:focus-visible {
  color: var(--festa-papel);
}

/* Variante calma: quando a pessoa JÁ está estudando, o passo não grita. */
.passo--rotina {
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(79, 155, 88, .24), transparent 62%),
    linear-gradient(135deg, rgba(78, 36, 61, .94), rgba(50, 25, 43, .98));
}

.passo--rotina::before {
  background: linear-gradient(180deg, var(--festa-limo), var(--festa-mata));
}

.passo--rotina .passo__marca {
  background: rgba(79, 155, 88, .2);
  border-color: rgba(183, 217, 75, .44);
}

/* Mesma medição do botão principal: limo 11,38:1 e mata 5,38:1 contra o
   carvão — as duas pontas do gradiente passam. */
.passo--rotina .passo__acao {
  background: linear-gradient(140deg, var(--festa-limo), var(--festa-mata));
}

/* Variante de aviso: o acesso terminou. Honesta, não alarmista. */
.passo--fim::before {
  background: linear-gradient(180deg, var(--festa-terra), var(--festa-casca));
}

@media (max-width: 720px) {
  .passo {
    grid-template-columns: auto 1fr;
    row-gap: 14px;
  }
  .passo__acao {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* =====================================================================
   2. TRANCA HONESTA — destino que existe mas ainda não abre
   =====================================================================

   Antes, 13 destinos do Atlas levavam a um 403. O link existia, a porta
   negava. Agora o destino trancado leva à porta que o abre e diz isso na
   cara — um cadeado pequeno, não um card apagado que parece defeito.
   ===================================================================== */

.nav-tranca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px 3px 10px 3px;
  background: rgba(255, 103, 93, .18);
  border: 1px solid rgba(255, 103, 93, .4);
  color: #ffd9d3;
  font-size: 11px;               /* o piso da casa, nunca abaixo */
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: middle;
}

/* =====================================================================
   3. ATLAS — de 26 destinos soltos para 2 grupos e uma gaveta
   =====================================================================

   Sobrescreve a aparência do grupo recolhido definido em world-shell.css.
   Não altera aquele arquivo: acrescenta a forma de <details> que ele não
   previa, com especificidade suficiente para vencer sem !important.
   ===================================================================== */

.world-atlas__gaveta {
  margin: 10px 0 0;
  border: 1px solid rgba(255, 244, 223, .14);
  border-radius: 18px 6px 18px 6px;
  background: rgba(23, 19, 27, .32);
  overflow: hidden;
}

.world-atlas__gaveta > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  padding: 12px 16px;
  color: var(--festa-papel);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: background .16s ease;
}

.world-atlas__gaveta > summary::-webkit-details-marker { display: none; }

.world-atlas__gaveta > summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 13px;
  color: var(--festa-limo);
  transition: transform .16s ease;
}

.world-atlas__gaveta[open] > summary::after {
  transform: rotate(180deg);
}

.world-atlas__gaveta > summary:hover,
.world-atlas__gaveta > summary:focus-visible {
  background: rgba(255, 103, 93, .12);
}

.world-atlas__gaveta > summary:focus-visible {
  outline: 3px solid var(--festa-limo);
  outline-offset: -3px;
}

.world-atlas__gaveta > summary small {
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255, 244, 223, .6);
}

.world-atlas__gaveta-corpo {
  padding: 4px 12px 14px;
}

/* =====================================================================
   4. PORTA DA RUA — a página pública
   =====================================================================

   Quem chega do buscador tem cinco segundos para entender o que é isto e
   achar o próprio concurso. Então: uma frase, duas ações, e a vitrine.
   ===================================================================== */

/* A vitrine na página pública herda a folha vitrine.css; aqui só o
   espaçamento que a coloca logo abaixo da capa, sem seção intermediária. */
.porta-vitrine {
  margin: clamp(22px, 4vw, 38px) 0 clamp(26px, 4vw, 40px);
}

/* Sobrescreve o recuo do topo que publico.css dá à primeira seção: aqui a
   vitrine sobe e encosta na capa, porque é ela a decisão da página. */
.home-publica .porta-vitrine .vitrine {
  margin-bottom: 0;
}

.porta-vitrine .vitrine__topo h2 {
  font-size: clamp(20px, 3vw, 28px);
}

/* A faixa de números (as "placas") NÃO ganha classe nova aqui de propósito.
   Ela vive dentro de .hp-secao, que tem fundo de PAPEL claro, e a primeira
   versão deste arquivo lhe deu cor de fundo escuro — texto creme sobre papel
   creme, ilegível. A classe .hp-placas de publico.css já resolve o caso com a
   tinta certa; o arquivo novo não tinha por que inventar uma segunda. */

/* =====================================================================
   5. CABEÇALHO E RODAPÉ PÚBLICOS — alvo de toque de verdade
   =====================================================================

   Sobrescreve .publico-nav a de publico.css, que entregava ao dedo um alvo
   com altura só de texto. Aqui todo item do cabeçalho e do rodapé chega aos
   44px exigidos pela regra da casa.
   ===================================================================== */

.publico-topo .publico-nav a,
.publico-rodape nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding-block: 10px;
}

/* =====================================================================
   6. RESPEITO A QUEM PEDE MENOS MOVIMENTO
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .passo__acao,
  .world-atlas__gaveta > summary,
  .world-atlas__gaveta > summary::after {
    transition: none;
  }
  .passo__acao:hover,
  .passo__acao:focus-visible {
    transform: none;
  }
}

/* =====================================================================
   7. LARGURAS QUE O DONO PEDIU: 1024, 1280, 1920 e o celular
   =====================================================================

   Nada aqui usa largura fixa nem min-width maior que a tela, então não há
   rolagem horizontal em nenhuma das quatro. As únicas regras por largura
   são as que trocam a direção de leitura no celular.
   ===================================================================== */

@media (max-width: 460px) {
  .passo {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .passo__marca {
    /* No celular o medalhão não vale uma coluna: vira selo pequeno em linha. */
    width: 44px;
    height: 44px;
  }
  .passo__titulo {
    font-size: 19px;
  }
}

/* =====================================================================
   NO CELULAR, A CENA VEM PRIMEIRO (17/09/2026)
   =====================================================================

   Conflito real de desenho, medido: a regra imersiva da casa exige que a
   cena ocupe 68% da altura da primeira dobra, com no máximo três
   superfícies e ZERO grades de cartão nela. A vitrine é uma grade de
   cartões. No desktop as duas coisas convivem, porque sobra altura; numa
   tela de 844px, não.

   Não dá para conciliar com ajuste de tamanho — é escolha de ordem. E a
   escolha é: no celular a cena fica com a primeira dobra, e a entrada
   (próximo passo + vitrine) vem logo abaixo, a um deslize. Ninguém perde
   o concurso: ele é a primeira coisa que aparece ao rolar, e continua
   sendo a primeira coisa da página no desktop, que foi o pedido.

   `:has()` mira exatamente as páginas que têm o bloco — hoje só a inicial —
   sem precisar de classe nova no corpo nem tocar em outras rotas.
   ===================================================================== */
@media (max-width: 760px) {
  main.page-shell:has(> .passo-entrada) {
    display: flex;
    flex-direction: column;
  }

  main.page-shell > .passo-entrada {
    order: 2;
    /* respiro entre a cena e a entrada, para não parecerem o mesmo bloco */
    margin-top: clamp(14px, 4vw, 22px);
  }
}