@layer layout {
  .recipiente {
    width: min(100% - 2 * var(--margem), var(--largura));
    margin-inline: auto;
  }

  .secao {
    position: relative;
    padding-block: var(--secao);
  }

  .secao--clara {
    background: var(--fundo-claro);
  }

  /* Entradas ao rolar: só com JavaScript e sem preferência por movimento reduzido. */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
      transition-delay: var(--atraso, 0ms);
    }

    .js [data-reveal].is-visivel {
      opacity: 1;
      transform: none;
    }
  }
}