/* Ajustes de ritmo e responsividade — 2026-08-25 */
:root{
  --secao:clamp(4.75rem, 7vw, 6.5rem);
}

/* Os atributos width/height do HTML preservam o espaco antes do download,
   mas a altura precisa acompanhar a largura responsiva depois do carregamento. */
img{
  height:auto;
}

.faixa{
  padding-block:clamp(4.75rem, 7vw, 6.5rem);
}

.frag-lista{
  margin-top:clamp(1.25rem, 2vw, 2rem);
}

.demandas,
.como-fig{
  margin-top:0;
}

/* O titulo nao pode permanecer preso enquanto a imagem da linha seguinte
   passa por baixo dele durante a rolagem. */
.como-head{
  position:static;
  top:auto;
  grid-row:1;
}

.como-passos{
  grid-row:1 / span 2;
}

.como-fig{
  grid-row:2;
}

@media (max-width:900px){
  .frag-grid,
  .psi-grid,
  .sobre-grid,
  .como-grid,
  .online-grid,
  .faq-grid{
    grid-template-columns:minmax(0, 1fr);
  }

  .frag-head,
  .frag-lista,
  .frag-fig,
  .frag-fecho,
  .psi-head,
  .psi-fig,
  .demandas,
  .sobre-fig,
  .sobre-corpo,
  .como-head,
  .como-passos,
  .como-fig,
  .online-fig,
  .online-corpo,
  .faq-head,
  .faq-lista{
    grid-column:1;
  }

  .psi-fig{
    margin-right:0;
  }

  .frag-fig,
  .sobre-corpo,
  .como-passos{
    margin-top:0;
  }

  .como-head,
  .como-passos,
  .como-fig{
    grid-row:auto;
  }
}

@media (max-width:700px){
  :root{
    --secao:4rem;
  }

  .faixa{
    padding-block:4rem;
  }
}

@media (max-width:820px){
  .rodape-topo{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:2.5rem 2rem;
  }

  .rodape-marca,
  .aviso{
    grid-column:1 / -1;
  }

  .rodape-col{
    grid-column:auto;
    min-width:0;
  }
}

@media (max-width:480px){
  .rodape-topo{
    grid-template-columns:minmax(0, 1fr);
    gap:2rem;
  }

  .rodape-col{
    grid-column:1;
  }
}