/* O painel no celular, segunda rodada: cada tópico é um cartão com a sua tela dentro (dev C).
   Carrega só até 820 px (media no <link>) e por último. Regras dentro de @media (max-width: 820px).
   Todo seletor começa pela raiz da seção (.secao.painel).
   - o Início: os três momentos viram três cartões de tópico (o JS põe .cartoes na seção e um recorte do Início em
     cada li); sem JS, vale a janela do Início com a lista de baixo;
   - os recursos: Cadastro, Fila e Certidão empilhados, sem abas nem carrossel, cada um com a sua tela viva. */
@media (max-width: 820px) {
  /* ---------- o cartão: papel mais claro que a página, raio 20, respiro de 14 e sombra leve ---------- */
  .secao.painel.cartoes .painel-momentos li,
  .secao.painel .recurso {
    padding: 14px;
    border: 0;
    border-radius: 20px;
    background: #fbfbf8;
    box-shadow:
      0 1px 2px rgba(20, 21, 19, 0.05),
      0 16px 32px -22px rgba(20, 21, 19, 0.3);
  }

  /* ---------- o Início em três cartões: sai a janela grande, sai o realce que desliza ---------- */
  .secao.painel.cartoes .painel-topo .janela {
    display: none;
  }
  .secao.painel.cartoes .painel-texto .lede {
    margin-bottom: 0;
  }
  .secao.painel.cartoes .painel-momentos {
    display: grid;
    gap: 28px;
    margin-top: 32px;
    min-height: 0;
  }
  .secao.painel.cartoes .painel-momentos::before {
    content: none;
  }
  .secao.painel.cartoes .painel-momentos li,
  .secao.painel.cartoes .painel-momentos.ligado li {
    display: block;
    opacity: 1;
  }
  .secao.painel.cartoes .painel-momentos li > i {
    display: none;
  }
  .secao.painel.cartoes .painel-momentos li > b {
    display: block;
    margin-top: 14px;
    font-size: 17px;
    line-height: 24px;
  }
  .secao.painel.cartoes .painel-momentos li > span {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--apoio);
  }

  /* o recorte: zoom 1, altura fixa, raio 16 e o fundo do produto. A altura de cada um é a do que ele recorta */
  .secao.painel .topico-tela,
  .secao.painel .recurso .carta-tela {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: #f7f7f3;
    box-shadow: none;
  }
  .secao.painel .topico-tela {
    height: var(--recorte, 220px);
    padding: 10px;
    border: 0;
  }
  .secao.painel .topico-tela .vivo {
    zoom: 1;
  }
  .secao.painel .topico-tela[data-topico='1'] {
    --recorte: 252px;
  }
  @media (max-width: 370px) {
    .secao.painel .topico-tela[data-topico='1'] {
      --recorte: 272px;
    }
  }
  .secao.painel .topico-tela[data-topico='2'] {
    --recorte: 250px;
  }
  /* o terceiro continua além do recorte: esmaece 20 px na borda de baixo */
  .secao.painel .topico-tela[data-topico='3'] {
    --recorte: 240px;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
  }

  /* ---------- os recursos: três cartões empilhados, sem abas ---------- */
  .secao.painel .recursos {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 44px 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .secao.painel .recurso,
  .secao.painel .recurso:nth-child(even) {
    display: block;
    min-width: 0;
  }
  .secao.painel .recursos-pontos {
    display: none;
  }
  .secao.painel .recurso > .carta {
    display: block;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  /* sem a faixa "Painel · …" e sem o rodapé de cartão */
  .secao.painel .recurso .carta-rotulo {
    display: none;
  }
  /* 280 px: a tela e o texto do cartão cabem juntos na mesma vista (pedido do Maicon: ler a tela e o texto ao mesmo tempo) */
  .secao.painel .recurso .carta .carta-tela {
    height: 280px;
    padding: 12px 12px 0;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
  }
  .secao.painel .recurso .carta .carta-tela:has([data-vivo='cadastro']) {
    -webkit-mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  /* a legenda viva: o que passa agora, numa frase solta de duas linhas e altura fixa (a página não pula) */
  .secao.painel .recurso .carta-passo {
    display: block;
    height: 58px;
    padding: 12px 2px 0;
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 22px;
    color: #3d403b;
    white-space: normal;
    overflow: hidden;
  }
  .secao.painel .recurso .carta-passo span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity var(--t-troca, 200ms) var(--curva);
  }
  .secao.painel .recurso .recurso-texto {
    max-width: none;
    margin-top: 18px;
  }
  .secao.painel .recurso .recurso-texto .rot {
    display: none;
  }
  .secao.painel .recurso .recurso-texto h3 {
    font-size: 24px;
    line-height: 1.15;
  }
  .secao.painel .recurso .recurso-texto p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--apoio);
  }
  .secao.painel .recurso .recurso-texto h3 + p {
    margin-top: 8px;
  }
}

/* a certidão do ato, no celular: a linha do tempo não cabe no recorte de 280 px (pedido do Maicon: não aumentar a
   altura). O cartão fica só com o texto; a certidão já aparece inteira, fato por fato, na seção dela */
@media (max-width: 820px) {
  .secao.painel .recurso > .carta:has([data-vivo='certidao']) {
    display: none;
  }
  .secao.painel .recurso:has([data-vivo='certidao']) .recurso-texto {
    margin-top: 0;
  }
}