/* ============================================================
   LAYOUT — container único, ritmo de seção e divisórias
   Resolve as quatro larguras de container diferentes que
   existiam no arquivo original (48 / 54 / 57 / 132px).
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--areia { background: var(--surface-a); }
.section--creme { background: var(--surface-b); }

.section__head { text-align: center; margin-bottom: clamp(32px, 5vw, 64px); }
.section__head h2 { margin-bottom: var(--sp-md); }
.section__head p  { font-size: var(--fs-lead); color: var(--c-texto); }
.section__head .measure { margin-inline: auto; }

/* Título com os ornamentos da marca de cada lado.
   São três formas distintas no Figma, e eu tinha usado a mesma
   nas três: raio de 3 traços (Nossos Pratos, Onde Estamos),
   estrela de 5 pontas (Opiniões) e brilho de 4 pontas (Fidelidade). */
/* Tamanho medido nos modelos entregues: o raio tem praticamente a
   mesma altura do texto, e fica colado nele. Antes estava em 44px
   fixos — cerca de 27% menor do que deveria. */
/* Os ornamentos ficam no FLUXO DO TEXTO, não como itens de flex nas
   pontas. Com flex, um título que quebrava em duas linhas esticava o
   item de texto até a largura disponível e centralizava as palavras
   DENTRO dele — os vetores iam parar nas bordas, longe das palavras
   (em "Nossos Pratos" a 280px sobravam 125px de folga). Inline eles
   grudam na primeira e na última palavra em qualquer largura, e numa
   linha só o resultado é idêntico ao de antes. */
.ornated {
  display: block;
  text-align: center;
  /* Nos PDFs do modelo cada título está numa LINHA SÓ, com os
     ornamentos ladeando a frase inteira. Quebrado em duas linhas o
     desenho muda: um raio sobra no começo da primeira linha e o
     outro no fim da segunda. Então o título não quebra — quem cede
     é o corpo, limitado pela largura disponível.
     O divisor 11.4 é a largura do conjunto (raio + "Programa
     Fidelidade" + raio) em unidades de font-size, medida no
     navegador. Dimensionar pelo título mais longo mantém os quatro
     no mesmo corpo, que é como o modelo os apresenta. */
  white-space: nowrap;
  font-size: min(var(--fs-display-lg),
                 calc((100vw - var(--gutter) * 2) / 11.4));
}
.ornated::before, .ornated::after {
  content: ''; display: inline-block;
  /* CENTRALIZAÇÃO VERTICAL COM O TÍTULO.
     Na Adumu, a tinta de um texto sem acento nem descida vai de
     0,797em acima da linha de base a 0,003em abaixo: o meio da
     caixa de maiúsculas está a 0,397em acima da base. É por aí que
     os ornamentos se alinham — e não pela caixa de tinta de cada
     título, senão o til de "Opiniões" e o "g" de "Fidelidade"
     puxariam cada ornamento para uma altura diferente. */
  vertical-align: calc(.397em - var(--orn-h) / 2);
  background-color: var(--c-laranja);
  -webkit-mask: var(--orn) center / contain no-repeat;
          mask: var(--orn) center / contain no-repeat;
  --orn: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA3NyIgd2lkdGg9IjU0IiBoZWlnaHQ9Ijc3IiBmaWxsPSJub25lIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NC4wMCwyNC4wMCkgc2NhbGUoLTAuOTIsMC45MikiIGQ9Ik0zLjgxNDdlLTA2IDIxLjU1OTdMNTggMjIuMDU2M0w1NC44OTgyIDBMMy44MTQ3ZS0wNiAyMS41NTk3WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTAuMDAsNTIuMDApIHNjYWxlKC0wLjkyLDAuOTIpIiBkPSJNNS41MzEzMWUtMDUgMEwyNy42NyAyOC4yMTI3TDI4Ljc1MSAxNy43NDAxTDUuNTMxMzFlLTA1IDBaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS4wMCwwLjAwKSBzY2FsZSgtMC45MiwwLjkyKSIgZD0iTS00LjE5NjE3ZS0wNSAzMC4zOTVMMzUuNjc4MyAxMi43NDI2TDMxLjE2MzggMEwtNC4xOTYxN2UtMDUgMzAuMzk1WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+");
  /* Medido nos PDFs do modelo. A altura da tinta de "Nossos
     Pratos" na Adumu é 0,80em, e lá o raio tem 1,03x essa altura
     (65px contra 63px) — ou seja 0,83em, não 0,95em. A folga até a
     letra é de 1px num texto de 63px: praticamente encostado. */
  --orn-h: .83em;
  height: var(--orn-h);
  aspect-ratio: 54 / 77;
}
.ornated::before { margin-right: .04em; }
.ornated::after  { margin-left: .04em; transform: scaleX(-1); }

.ornated--estrela::before, .ornated--estrela::after {
  --orn: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzUiIHZpZXdCb3g9IjAgMCAzNCAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUuMjQ2IDBDMTMuOTg2NyA0LjQ4NzE4IDEyLjY0MjEgMTEuNDk2MiAxMi43NSAxMS45ODA4TDAgMTUuNDgwOEw5LjEwNzE0IDIwLjkzMjdMNi4xMzg4OSAzNUwxOC4wNzk0IDI1LjMwNzdMMjkuODE3NSAzNUwyNC4zNTMyIDE5Ljg1NThMMzQgMTIuNzg4NUwyMC41MDc5IDExLjk4MDhMMTUuMjQ2IDBaIiBmaWxsPSIjRjQ5NTM3Ii8+PC9zdmc+");
  /* modelo: 40px de estrela para um "Opiniões" de 76px de tinta
     (= 1,057em por causa do til) → 0,556em */
  aspect-ratio: 34/35; --orn-h: .556em;
}
.ornated--brilho::before, .ornated--brilho::after {
  --orn: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAkCAYAAADl9UilAAABl0lEQVR4nM2XXU7CQBSFPxrflQ2gvhuwLECKLoAtuQN1B+o7BvRdIL4r+m7EDdi4AsxNbpOmlkKYS2dO0nR+ksmXnjN3po3lcomRYmAAXFosFmGnFpBYLWYJdg6cAvuhgcUK1Q0NrK1vyVkwYHHOQrEzGLBWrt2zyFlkGPy8uiFZmdcgFLB2oe+cs4ZB5Y+B15LxA+DX5xdrrRi/cFk02kHwM53hGSzeBdg2GWsCHQXqrdmBM+Bd35/aNgMTkL5CdAwO6g/gC5hruxS4DOxYQRK149ABYhtg+bpzAUtytiRW1xYHpcCjgI21QB7hTwuBAUbApGhlrBmS7X9SsdusNAWegAcF2zj8TbU2UWCx2tkiYKxQ0jcrF0nuaSt8laYa5llmUR1nZR94rphf6A6vvfJP1hzS/3JT55F0XTEn9nkDu1lTML2BpcDLijmp4l5vF8OSMcnem2+w+5JN4ARlBZYCd4Wxja83u/4ZGRX636GATQowQViZ6dYSzOL3LZOcmz8K5fwnvoedUq1pAucsSzDRlV6RnPUHdClrHBoR/EUAAAAASUVORK5CYII=");
  /* modelo: 38px de brilho para um "Programa Fidelidade" de 75px */
  aspect-ratio: 38 / 36; --orn-h: .507em;
}

/* ---- Divisórias de papel rasgado ----
   A divisória é pintada com a cor da seção SEGUINTE, e a metade de
   cima dela é transparente. Se ela ficasse no fluxo normal, essa
   metade mostraria o fundo do <body> (areia) em vez da seção
   anterior — e o rasgo sumia, sobrando só a borda reta de onde a
   seção acaba. Era exatamente o que acontecia.

   A margem negativa sobe a divisória por cima dos últimos pixels da
   seção anterior. Assim a parte transparente revela o que está lá
   (cor chapada OU foto, como no hero) e o traçado desenha a cor da
   próxima por cima. Como a margem negativa é igual à altura, o
   fluxo do que vem depois não se desloca. */
.divider {
  --divider-h: clamp(20px, 2.4vw, 36px);
  display: block; width: 100%;
  height: var(--divider-h);
  margin-top: calc(var(--divider-h) * -1);
  margin-bottom: 0;
  position: relative; z-index: 2;
  pointer-events: none;
}

/* Grid genérico de cards */
.grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }