/* ---------- DIVISOR ENTRE SECOES ----------
   Marca o fim de uma secao e o comeco da outra onde o fundo NAO muda de cor e a
   fronteira ficaria invisivel. Decorativo: vai com aria-hidden.
   A onda e o grafismo de assinatura do guia da marca (pag. 30) e entra como
   MASCARA — a cor vem do background-color, entao a mesma onda serve em fundo
   claro e escuro sem gerar um segundo arquivo.
   Escolha do cliente em 12/08 entre 3 amostras renderizadas: a onda SOZINHA,
   sem fio. As outras duas (fio curto; fio largo cortado pela onda) foram vistas
   no lugar real e descartadas. */
.divisor { display: flex; justify-content: center; }
.divisor__onda {
  width: 46px; height: 18px; background-color: var(--dourado);
  -webkit-mask: var(--onda-svg) no-repeat center / contain;
          mask: var(--onda-svg) no-repeat center / contain;
}

.pula-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--branco); padding: .75rem 1.25rem;
}
.pula-para-conteudo:focus { left: 0; }

/* ---------- BOTAO EM PILULA ----------
   Marcador mais forte do estilo da referencia, junto com o canto arredondado
   da foto. Nada de preenchimento animado nem sombra: so a pilula. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.9rem;
  font-family: var(--fonte-corpo); font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--pilula);
  cursor: pointer; transition: var(--transicao);
  white-space: nowrap;
}
.botao .seta { transition: transform var(--transicao); }
.botao:hover .seta { transform: translateX(4px); }

.botao--branco { background: var(--branco); color: var(--marrom); }
.botao--branco:hover { background: var(--tinta); color: var(--branco); }

.botao--tinta { background: var(--tinta); color: var(--branco); }
.botao--tinta:hover { background: var(--marrom); }

.botao--contorno { background: transparent; color: var(--marrom); border-color: var(--linha); }
.botao--contorno:hover { background: var(--marrom); color: var(--branco); border-color: var(--marrom); }

.botao--pequeno { padding: .7rem 1.5rem; font-size: .625rem; }

/* ---------- CARTAO ---------- */
.cartao {
  background: var(--branco); border-radius: var(--raio-foto); overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--linha);
}

/* ---------- BOTAO DE ACENTO (a pilula da referencia) ---------- */
.botao--acento { background: var(--acento); color: var(--branco); }
.botao--acento:hover { background: var(--acento-escuro); }

/* ---------- LINK "SAIBA MAIS" ---------- */
.link-seta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--acento); transition: var(--transicao);
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--fonte-corpo);
}
.link-seta .seta { transition: transform var(--transicao); }
.link-seta:hover { color: var(--acento-escuro); }
.link-seta:hover .seta { transform: translateX(4px); }

/* ---------- SELO CIRCULAR COM FOLHA DA MARCA ----------
   A folha entra como MASCARA, entao a cor vem do CSS e a mesma imagem serve
   dourada no claro e creme no escuro. Grafismos do guia, pag. 29. */
.selo-icone {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-claro); margin-inline: auto;
}
.selo-icone::before {
  content: ""; width: 26px; height: 26px; background-color: var(--acento);
  -webkit-mask: var(--folha) no-repeat center / contain;
          mask: var(--folha) no-repeat center / contain;
}
.selo-icone--cheio { background: var(--acento); }
.selo-icone--cheio::before { background-color: var(--branco); }

/* ---------- FOLHA DECORATIVA ---------- */
.folha-deco {
  position: absolute; pointer-events: none; z-index: 0;
  background-color: var(--dourado); opacity: .16;
  -webkit-mask: var(--folha) no-repeat center / contain;
          mask: var(--folha) no-repeat center / contain;
}


/* ================== PAINEL (menu do celular E seletor de cidade) ==================
   Os dois sao o MESMO componente visual, a pedido do cliente em 12/08: "deixe ele
   igual ao do menu". Por isso dividem as classes `painel*` em vez de terem dois
   conjuntos de regras parecidas — assim eles nao conseguem divergir sem alguem
   mexer nas duas telas de proposito.

   Os dois sao <dialog> com showModal(): Esc, trava de foco e fundo inerte vem de
   graca. Escrever isso a mao seria mais codigo e pior acessibilidade.

   Direcao escolhida entre 3 amostras renderizadas: bege da marca, folha em marca
   d'agua ocupando o vao de baixo e seta em cada item. As descartadas, para nao
   serem retentadas: painel ESCURO no marrom (contrastava demais com uma pagina
   clara) e branco com itens NUMERADOS (deixava o vao de baixo vazio).

   ⚠️ A folha PRECISA ficar fora da regra de `position: relative` abaixo. Ela e
   `position: absolute`; a regra `> *` a alcancava e a devolvia ao fluxo, onde os
   300px dela empurravam o painel inteiro 367px para baixo. So a imagem denunciou. */
.menu, .seletor {
  border: none; padding: 0; margin: 0; background: transparent;
  width: 100%; max-width: none; height: 100%; max-height: 100dvh;
}
/* ⚠️ `display: flex` SO com [open]. O navegador esconde <dialog> fechado com
   `display: none`; declarar display no seletor sem o [open] venceria essa regra e
   o painel apareceria na pagina com o dialogo fechado.
   O flex existe para o painel receber a ALTURA do dialogo em vez de crescer com o
   proprio conteudo — sem isso os filhos dele nao tem altura definida para encolher,
   a lista nao rola e quem acaba rolando e o <dialog>, levando junto a barra de
   rolagem do sistema por fora do canto arredondado. Foi o que aconteceu. */
.menu[open], .seletor[open] { display: flex; }
.menu::backdrop, .seletor::backdrop { background: rgba(43,23,9,.55); }

.painel {
  background: var(--creme-suave); flex: 1 1 auto; min-height: 0;
  padding: 1.1rem clamp(1.25rem, 6vw, 2rem) 2.5rem;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.painel > *:not(.painel__folha) { position: relative; z-index: 1; }
.painel__folha { width: 300px; height: 300px; right: -110px; bottom: 90px; opacity: .14; }

.painel__topo {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; margin-bottom: 2.2rem;
}
.painel__topo img { height: 23px; width: auto; border-radius: 0; }
.painel__fechar {
  width: 44px; height: 44px; background: none; border: none; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: var(--marrom); flex: 0 0 auto;
}

/* A LINHA: mesma no menu e no seletor. Serifada, fio embaixo, seta a direita. */
/* ⚠️ QUEM ROLA E A LISTA, NUNCA O PAINEL. Na 1a versao eu pus a rolagem no
   painel inteiro: com 6 cidades numa tela baixa, o cabecalho subia junto e a
   pessoa perdia de vista o titulo E o botao de fechar, alem de aparecer a barra
   de rolagem do sistema cortando o canto arredondado do cartao. Aqui o cabecalho
   fica parado e so as cidades correm.
   O `min-height: 0` fica por seguranca, NAO por necessidade: um teste de mutacao
   mostrou que sem ele tudo segue funcionando, porque `overflow-y: auto` ja faz o
   tamanho minimo automatico do item flex valer zero. Eu havia escrito aqui que
   ele era obrigatorio — nao e. Ele so passa a importar se alguem trocar o
   overflow por `visible`. */
.painel__lista {
  list-style: none; padding: 0; display: grid;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(105,57,29,.22) transparent;
}
.painel__lista::-webkit-scrollbar { width: 4px; }
.painel__lista::-webkit-scrollbar-track { background: transparent; }
.painel__lista::-webkit-scrollbar-thumb {
  background: rgba(105,57,29,.22); border-radius: 4px;
}
.painel__lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; text-decoration: none;
  border-bottom: 1px solid rgba(105,57,29,.14);
  font-family: var(--fonte-titulo); font-size: 1.5rem; color: var(--marrom);
  transition: var(--transicao);
}
.painel__lista li:first-child a { border-top: 1px solid rgba(105,57,29,.14); }
.painel__lista a:hover { color: var(--acento-escuro); }
.menu__seta, .seletor__seta { color: var(--acento); font-size: 1rem; flex: 0 0 auto; }

/* ---- so do MENU ---- */
.menu__cta { margin-top: 2.2rem; align-self: stretch; }
.menu__rodape { margin-top: auto; padding-top: 2rem; font-size: .75rem;
  text-align: center; max-width: none; }

/* ---- so do SELETOR: titulo, subtitulo e a 2a linha de cada cidade ---- */
.seletor__titulo { font-size: 1.9rem; }
.seletor__sub { margin: .5rem 0 1.8rem; font-size: .875rem; max-width: 34ch; }
.seletor__lista a { padding-block: .9rem; }
/* a cidade e o horario empilham; a seta fica fora dessa coluna */
.seletor__cidade { display: flex; flex-direction: column; gap: .2rem; }
.seletor__lista strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.5rem; }
.seletor__lista strong span {
  font-family: var(--fonte-corpo); font-size: .5625rem; font-weight: 700;
  letter-spacing: .18em; margin-left: .5rem; color: var(--acento);
}
.seletor__horario { font-family: var(--fonte-corpo); font-size: .75rem; color: var(--texto); }

/* No desktop o menu nao existe, mas o seletor sim: vira cartao centrado em vez de
   tela cheia. O painel por dentro continua identico. */
/* No desktop o menu nao existe, mas o seletor sim: vira cartao centrado em vez de
   tela cheia. O painel por dentro continua identico.
   As linhas encolhem aqui de proposito: a 98px cada, as 6 cidades pediam 588px e
   nao cabiam num notebook de 719px — sobrava rolagem justamente na lista que a
   pessoa precisa varrer para escolher. A 62px as 6 cabem inteiras. */
@media (min-width: 901px) {
  .seletor {
    width: min(100% - 2rem, 520px); height: auto; max-height: 86dvh; margin: auto;
  }
  .seletor .painel {
    min-height: 0; border-radius: var(--raio-card);
    padding: 1.1rem clamp(1.5rem, 3vw, 2.2rem) 1.6rem;
  }
  .seletor .painel__topo { margin-bottom: 1.2rem; }
  .seletor__titulo { font-size: 1.7rem; }
  .seletor__sub { margin: .4rem 0 1.1rem; }
  .seletor__lista a { padding-block: .45rem; min-height: 62px; }
  .seletor__lista strong { font-size: 1.25rem; }
  .seletor__horario { font-size: .6875rem; }
  .seletor .painel__folha { bottom: -80px; right: -130px; width: 240px; height: 240px; }
}

/* ---------- BOTAO SANDUBA ---------- */
.sanduba {
  display: none; width: 44px; height: 44px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid var(--linha); border-radius: 50%;
  cursor: pointer; padding: 0; transition: var(--transicao); flex: 0 0 auto;
}
.sanduba:hover { border-color: var(--acento); }
.sanduba__risco { width: 17px; height: 1.5px; background: var(--marrom); border-radius: 2px; }