/* =============================================================================
   MOTHUS · TOKENS DE PEÇA — a camada que o site não tinha.

   A web é fluida: clamp, vw, rem. A peça gráfica é FIXA: 1080x1350 e px cravado.
   Este arquivo traduz o mesmo sistema para a lona de tamanho fixo, para que
   carrossel, story, anúncio e impresso saiam do mesmo lugar que o site.

   USO: importar mothus.css ANTES deste. Aqui só há medida; a cor vem de lá.
   ========================================================================== */

:root{
  /* ---------- A LONA ---------- */
  --pc-larg:1080px;
  --pc-alt:1350px;              /* 4:5 — o feed                        */
  --pc-alt-quadrado:1080px;     /* 1:1 — o corte do grid do Instagram  */
  --pc-alt-story:1920px;        /* 9:16                                */

  /* ---------- MARGEM ---------- */
  /* 🔴 88px em todos os lados. Existe porque a rodada 1 do feed reprovou por
     palavra encostando na borda em 4 das 9 capas. Não é estética, é correção. */
  --pc-margem:88px;

  /* A ÁREA SEGURA DO GRID: o Instagram corta 1080x1350 em 1080x1080 no
     perfil, tirando 135px de cima e 135px de baixo. Nada que importe vive
     fora dela — nem palavra, nem número, nem o logotipo. */
  --pc-corte-grid:135px;
  --pc-seguro-topo:calc(var(--pc-margem) + var(--pc-corte-grid));   /* 223px */
  --pc-seguro-base:calc(var(--pc-margem) + var(--pc-corte-grid));   /* 223px */

  /* ---------- ESCALA TIPOGRÁFICA DA PEÇA (1080 de largura) ----------
     Dois pesos na MESMA frase: a palavra-chave em 800, o resto em 450.
     A miniatura tem que entregar a palavra-chave sozinha. */
  --pc-chave:124px;        /* 112–136. ExtraBold, tracking -2%          */
  --pc-chave-track:-.02em;
  --pc-complemento:84px;   /* 76–92. Regular/Medium, mesma linha        */
  --pc-apoio:42px;         /* 38–46. Regular, cor texto-2, máx. 2 linhas*/
  --pc-numero:210px;       /* Newsreader 500. Só o número grande        */
  --pc-cta:40px;           /* SemiBold, dentro da pílula                */
  --pc-legenda:28px;       /* crédito, rodapé. Nunca título             */

  --pc-lh-titulo:1.04;
  --pc-lh-apoio:1.42;

  /* ---------- LOGOTIPO NA PEÇA ---------- */
  --pc-logo-larg:184px;    /* ~17% da largura da lona */
  --pc-respiro-logo:50px;  /* = a altura do "M" com o logo a 184px. Ver MANUAL §2 */

  /* ---------- ELEMENTOS DE LIGAÇÃO ---------- */
  --pc-fio:6px;            /* o fio do frio. Entra por uma borda, sai pela oposta */
  --pc-grade-ang:12deg;    /* a grade do palete: ripa em diagonal de 12°  */
  --pc-grade-ripa:3px;
  --pc-grade-vao:26px;
  --pc-r-foto:34px;
  --pc-r-pilula:999px;
  --pc-pilula-pad:34px 56px;
  --pc-moldura-ancora:12px; /* a borda da foto emoldurada, em verde claro */
}

/* -----------------------------------------------------------------------------
   A LONA — use .pc como raiz de qualquer peça.
   Renderize com Playwright/Puppeteer em deviceScaleFactor 1 para 1080x1350 real.
-------------------------------------------------------------------------- */
.pc{
  position:relative; overflow:hidden;
  width:var(--pc-larg); height:var(--pc-alt);
  background:var(--mo-sup); color:var(--mo-texto);
  font-family:var(--mo-sans);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--pc-seguro-topo) var(--pc-margem) var(--pc-seguro-base);
}
.pc--ancora{ background:var(--mo-sup-ancora); color:var(--mo-texto-inv); }

/* a grade do palete — o mesmo desenho nos dois fundos, só muda a cor */
.pc__grade{
  position:absolute; inset:-20%; pointer-events:none;
  background:repeating-linear-gradient(
    var(--pc-grade-ang),
    var(--mo-grade) 0 var(--pc-grade-ripa),
    transparent var(--pc-grade-ripa) var(--pc-grade-vao));
  opacity:.55;   /* 5–7% de contraste efetivo. Se aparecer na miniatura, baixe */
}
.pc--ancora .pc__grade{ background-image:repeating-linear-gradient(
    var(--pc-grade-ang),
    var(--mo-grade-escura) 0 var(--pc-grade-ripa),
    transparent var(--pc-grade-ripa) var(--pc-grade-vao));
  opacity:1; }

.pc__conteudo{ position:relative; z-index:1; }

.pc__titulo{
  font-size:var(--pc-complemento); font-weight:var(--mo-peso-corpo);
  line-height:var(--pc-lh-titulo); letter-spacing:var(--pc-chave-track);
  text-align:left; text-wrap:balance; margin:0;
}
.pc__chave{
  display:block; font-size:var(--pc-chave); font-weight:var(--mo-peso-chave);
  color:var(--mo-chave);
}
.pc--ancora .pc__chave{ color:var(--mo-chave-inv); }

.pc__apoio{
  margin-top:40px; max-width:26ch;
  font-size:var(--pc-apoio); line-height:var(--pc-lh-apoio);
  color:var(--mo-texto-2);
}
.pc--ancora .pc__apoio{ color:var(--mo-texto-2-inv); }

.pc__olho{
  font-size:var(--pc-legenda); font-weight:var(--mo-peso-forte);
  letter-spacing:var(--mo-olho-track); text-transform:uppercase;
  color:var(--mo-rotulo);
}
.pc--ancora .pc__olho{ color:var(--mo-texto-2-inv); }

.pc__pilula{
  display:inline-flex; align-items:center; gap:18px;
  padding:var(--pc-pilula-pad); border-radius:var(--pc-r-pilula);
  background:var(--mo-pilula-sup); color:var(--mo-pilula-texto);
  font-size:var(--pc-cta); font-weight:var(--mo-peso-forte);
}