/* ======================================================================
   MANCHAS DE VACA — o "couro" da Maranata
   A logo nova tem uma vaquinha e um aro de manchas. Aqui o site inteiro
   vira o couro dela: manchas entram pelas bordas e aparecem no meio das
   seções, sempre ATRÁS do conteúdo e longe dos textos.

   - Seção clara: mancha marrom (o mesmo marrom da logo, --mancha).
   - Seção escura: mancha creme (vaca de pelo escuro, o couro invertido).
   - Gesto da casa: algumas manchas ficam em cima da divisa entre duas
     seções. A mesma mancha é desenhada nas duas, cada uma mostra a sua
     metade, então a metade de cima sai marrom e a de baixo sai creme
     (ou o contrário). Classes .baixo (na seção de cima) e .cima (na de
     baixo), com o mesmo --x e --w nas duas.

   Os desenhos: assets/img/manchas/m01..m14.svg, gerados por
   _tools/gera_manchas.py a partir da folha que fizemos no ChatGPT.
   A cor não está no SVG: o SVG vira máscara e a cor vem do CSS.

   Como usar no HTML:
     <div class="couro" aria-hidden="true">
       <i class="m07" style="--x:90%; --y:20%; --w:clamp(80px, 9vw, 150px); --rot:20deg"></i>
     </div>
   .largo = era "some no celular"; hoje não esconde mais (tudo é fundo suave).
   ====================================================================== */

.couro {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  --cor-mancha: var(--mancha, #4e1709);
  /* De fundo, como marca-d'água do couro. Cliente pediu primeiro "suave,
     no fundo" (6,5%) e depois "um pouco mais visível" → 10%. Para o texto
     pequeno continuar AA (4.5) com a mancha por trás, o --pink-2, o --turq
     e o pink das seções escuras foram ajustados junto (ver style.css).
     Não subir sem medir de novo. */
  opacity: .10;
}
/* A estampa contínua: ladrilho de 20 manchas que repete sem emenda
   (assets/img/manchas/padrao.svg, gerado por _tools/gera_padrao_vaca.py).
   O couro.js alinha o ladrilho à página: a estampa atravessa as divisas. */
.couro::before {
  content: ""; position: absolute; inset: 0;
  background: var(--cor-mancha);
  -webkit-mask: url(../img/manchas/padrao.svg) var(--px, 0px) var(--py, 0px) / var(--ladrilho, 820px) repeat;
          mask: url(../img/manchas/padrao.svg) var(--px, 0px) var(--py, 0px) / var(--ladrilho, 820px) repeat;
}
@media (max-width: 700px) { .couro { --ladrilho: 560px; } }
.couro i {
  position: absolute; display: block;
  left: var(--x, 0); top: var(--y, 0); width: var(--w, 120px);
  aspect-ratio: var(--ar, 1);
  rotate: var(--rot, 0deg);
  background: var(--cor-mancha);
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
          mask: var(--m) center / 100% 100% no-repeat;
}
/* mancha na divisa: metade aqui, metade na seção vizinha */
.couro i.baixo { top: auto; bottom: 0; translate: 0 50%; }
.couro i.cima  { top: 0; translate: 0 -50%; }

/* Seções escuras: o couro inverte */
.pedido .couro, .claro .couro, .rodape .couro { --cor-mancha: #f6e8d4; opacity: .10; }

/* O deslocamento do ladrilho (--px/--py) é calculado por assets/js/couro.js
   para a estampa continuar de uma seção para a outra sem emenda. */

/* Quem recebe couro precisa ser a "caixa" das manchas */
.tem-couro { position: relative; isolation: isolate; }

/* Hero e história já têm duas camadas atrás do texto (foto e véu creme).
   As manchas ficam por cima das duas, ainda atrás do texto. */
.hero__fundo, .historia__fundo { z-index: -3; }
.hero::after, .historia::after { z-index: -2; }

/* .largo: antes sumia no celular (a mancha era forte e brigava com o
   texto). Agora tudo é fundo suave, então aparece em todo tamanho. */

/* ---------- os 14 desenhos (proporção = viewBox de cada SVG) ---------- */
.m01 { --m: url(../img/manchas/m01.svg); --ar: 97 / 100; }
.m02 { --m: url(../img/manchas/m02.svg); --ar: 100 / 55; }
.m03 { --m: url(../img/manchas/m03.svg); --ar: 100 / 74; }
.m04 { --m: url(../img/manchas/m04.svg); --ar: 66 / 100; }
.m05 { --m: url(../img/manchas/m05.svg); --ar: 100 / 97; }
.m06 { --m: url(../img/manchas/m06.svg); --ar: 67 / 100; }
.m07 { --m: url(../img/manchas/m07.svg); --ar: 100 / 83; }
.m08 { --m: url(../img/manchas/m08.svg); --ar: 100 / 89; }
.m09 { --m: url(../img/manchas/m09.svg); --ar: 100 / 49; }
.m10 { --m: url(../img/manchas/m10.svg); --ar: 83 / 100; }
.m11 { --m: url(../img/manchas/m11.svg); --ar: 100 / 94; }
.m12 { --m: url(../img/manchas/m12.svg); --ar: 92 / 100; }
.m13 { --m: url(../img/manchas/m13.svg); --ar: 100 / 93; }
.m14 { --m: url(../img/manchas/m14.svg); --ar: 100 / 98; }