@layer componentes {
  /* Topo do site: logo-horizontal.svg de assets/marca (não redesenhar; ver docs/design-system/marca.md).
     O h1 dá o nome (alt "Squishylândia"). 376 × 56 px na tela; 269 × 40 px abaixo de 700 px
     (mínimo de marca.md para 320 px). */
  #marca,
  .marca {
    display: flex;
    align-items: center;
    gap: var(--espaco-2-4);
    min-height: var(--alvo);
    min-width: 0;
  }

  #marca h1,
  .marca h1 {
    margin: 0;
    line-height: 0;
  }

  .marca__logo {
    display: block;
    width: 376px;
    height: auto;
    max-width: 100%;
  }

  @media (max-width: 699px) {
    .marca__logo {
      width: 269px;
    }
  }
}