/* O sistema do celular: escala de letra, leitura, toque, barra da cidadã, cabeçalho e menu (dev 1).
   Carrega só até 820 px (media no <link>) e por último. Regras dentro de @media (max-width: 820px).
   Os outros devs usam os nomes publicados aqui, sempre com valor de reserva: var(--t-entra, 320ms). */
@media (max-width: 820px) {
  /* ---------- tokens de movimento (as curvas --curva, --sai e --desliza já existem) ---------- */
  :root {
    --t-toque: 120ms;
    --t-troca: 200ms;
    --t-entra: 320ms;
    --t-desliza: 550ms;
    --t-rola: 700ms;
    --t-camera: 800ms;

    /* ---------- escala de letra ---------- */
    --f1: clamp(36px, 10.2vw, 44px); /* h1 da abertura, linha 1,03 */
    --f2: clamp(28px, 7.8vw, 32px); /* h2 das seções, linha 1,06 */
    --f3: 26px; /* h3 dos recursos (Gloock) */
    --f-item: 17px; /* título de item: Geist 600, linha 24 */
    --f-lede: 17px; /* lede, linha 26 */
    --f-leitura: 16px; /* leitura, linha 24: nunca menos */
    --f-rot: 13px; /* .rot */
    --f-num: 13px; /* números em Geist Mono */
    --linha-h1: 1.03;
    --linha-h2: 1.06;
    --margem: 20px;
  }

  /* ---------- letra ---------- */
  .abertura h1 {
    font-size: var(--f1);
    line-height: var(--linha-h1);
  }
  .secao h2.frase,
  .rito h2.frase,
  .cuidado h2.frase,
  .painel-texto h2 {
    font-size: var(--f2);
    line-height: var(--linha-h2);
  }
  .lede {
    font-size: var(--f-lede);
    line-height: 26px;
  }
  .rot {
    font-size: var(--f-rot);
  }

  /* ---------- âncoras: o cabeçalho volta ao subir e cobriria o título ---------- */
  html {
    scroll-padding-top: 0; /* o site.css põe 76 px; aqui vale só o scroll-margin das seções */
  }
  section[id] {
    scroll-margin-top: 64px;
  }

  /* ---------- toque ---------- */
  a,
  button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .btn:active,
  .barra-cidada:active,
  .menu-abre:active,
  .menu-fecha:active,
  .pausa-rodape:active {
    transform: scale(0.97);
    transition: transform var(--t-toque, 120ms) var(--sai, cubic-bezier(0.23, 1, 0.32, 1));
  }

  /* ---------- cabeçalho: 56 px; a marca tem alvo de 44 px; só o botão Menu à direita ---------- */
  .cab {
    min-height: 56px;
    padding-block: max(6px, env(safe-area-inset-top, 0px)) 6px;
  }
  .cab.solida {
    min-height: 56px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }
  .cab .palavra {
    box-sizing: content-box;
    width: 104px;
    height: auto;
    padding-block: 12px;
    margin-block: -12px;
  }
  .cab nav a:not(.so-desk) {
    display: none;
  }
  .cab .menu-abre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -8px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: inherit;
    font: 600 16px/1 var(--texto);
    cursor: pointer;
  }
  /* o palco do rito (dev 2 liga html.palco-ativo): o cabeçalho fica recolhido */
  html.palco-ativo .cab.sobre-foto {
    transform: translateY(-100%);
  }

  /* ---------- barra "Recebeu uma mensagem? Conferir": pílula à direita ---------- */
  body.casa {
    padding-bottom: 0;
  }
  .barra-cidada {
    left: auto;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
    gap: 12px;
    padding: 4px 4px 4px 18px;
    border-radius: 999px;
    background: rgba(20, 21, 19, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 16px;
    line-height: 1.2;
  }
  .barra-cidada b {
    min-width: 0;
    height: 40px;
    padding: 0 16px;
  }
  .js .barra-cidada {
    transform: translateY(calc(100% + 32px + env(safe-area-inset-bottom, 0px)));
  }
  .js .barra-cidada.ve {
    transform: none;
  }
  /* some enquanto o palco do rito está ativo e com o menu aberto (mesmo sem JS de rolagem) */
  html.palco-ativo .barra-cidada,
  html.menu-aberto .barra-cidada {
    transform: translateY(calc(100% + 32px + env(safe-area-inset-bottom, 0px))) !important;
    pointer-events: none;
    visibility: hidden;
  }

  /* ---------- menu: folha que sobe de baixo ---------- */
  .menu-cel {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding: 64px var(--margem) calc(24px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--papel);
    color: var(--tinta);
    overscroll-behavior: contain;
    max-height: 100vh;
    max-height: 100svh;
    overflow-y: auto;
  }
  .menu-cel[open] {
    display: grid;
    gap: 8px;
    animation: menu-sobe var(--t-entra, 320ms) var(--curva, cubic-bezier(0.2, 0.7, 0.2, 1));
  }
  .menu-cel::backdrop {
    background: rgba(14, 15, 14, 0.5);
  }
  .menu-cel form {
    position: absolute;
    top: 10px;
    right: 12px;
    margin: 0;
  }
  .menu-fecha {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--tinta);
    font: 600 16px/1 var(--texto);
    cursor: pointer;
  }
  .menu-fecha:focus-visible {
    outline-offset: -4px;
    border-radius: 12px;
  }
  .menu-cel .btn {
    width: 100%;
    min-height: 52px;
  }
  .menu-cel nav {
    display: grid;
    margin-block: 4px;
  }
  .menu-cel nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    font: 500 18px/1.2 var(--texto);
    text-decoration: none;
  }
  @keyframes menu-sobe {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-cel[open] {
      animation: none;
    }
  }
}