/* ============================================================
   REDES.LAB ON · Guia de uso: garantias de tela
   Complementa o bloco do guia que vive no layout.css. Aqui ficam
   só as regras que impedem o cartão de sair da área visível.
   Carregado depois do layout.css, de propósito.
   ============================================================ */

/* Cartão mais alto que a tela ficava com os botões de andar para fora, e
   rolar a página não trazia de volta porque ele é fixo. Agora ele para de
   crescer na altura da tela e rola por dentro. A conta de posição em
   tour.jsx conhece este limite e encosta o cartão na borda de cima. */
.tour-card{
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Os botões de andar continuam alcançáveis mesmo quando o texto rola
   por baixo deles. */
.tour-card .tour-nav{
  position:sticky;bottom:0;
  padding-top:12px;background:var(--surface);
}

/* Em tela estreita o cartão de 340px sobra pouca margem: ele passa a usar
   a largura toda menos a borda, e o texto respira. */
@media (max-width:520px){
  .tour-card{width:calc(100vw - 24px);max-width:calc(100vw - 24px);padding:16px 17px;}
  .tour-title{font-size:16px;}
}