/* =============================================================================
   estilos/responsivo.css — o que muda conforme a tela
   ---------------------------------------------------------------------------
   Quase nada precisa estar aqui: o tamanho do texto e o ar entre seções já
   crescem sozinhos com `clamp()` em variaveis.css, que é melhor do que saltar
   de degrau em degrau num ponto de quebra.

   Este arquivo é para o que `clamp()` não resolve — decisões que mudam de
   natureza, e não de tamanho.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Até 760px. O mesmo ponto que ambiente.js chama de "bolso": é bom que a
   decisão de tela pequena seja uma só no CSS e no 3D, senão o layout vira de
   telefone num lugar e de mesa no outro.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    /* Em tela estreita, o mesmo ar entre seções vira rolagem vazia. */
    --secao: clamp(72px, 10vh, 110px);
    --margem: 20px;

    /* Título de abertura precisa caber em duas ou três linhas, não em sete. */
    --t-abertura: clamp(38px, 11vw, 56px);
    --t-titulo: clamp(27px, 7.5vw, 38px);

    /* Dedo não é cursor: o que dependia de passar por cima tem de estar
       sempre visível. */
    --canto: 12px;
  }

  /* Sem cursor não há "passar o mouse": o realce vira o estado normal do
     cartão, em vez de um efeito que ninguém vai ver. */
  .sobe:hover {
    transform: none;
    box-shadow: var(--elevo);
  }
}

/* -----------------------------------------------------------------------------
   Telas largas. A coluna para de crescer para a linha de texto não passar do
   ponto em que o olho perde o começo da linha seguinte.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --coluna: 1320px;
  }
}

/* -----------------------------------------------------------------------------
   Aparelho sem cursor de verdade (telefone, tablet). Vale por capacidade, não
   por largura: há telefone largo e há notebook estreito.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .sobe:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   Tela deitada e baixa — telefone virado. A abertura em 100vh não cabe com
   texto legível; quem manda aqui é o conteúdo.
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --secao: 56px;
    --t-abertura: clamp(30px, 6vh, 42px);
  }
}