/* =====================================================================
   PelaSamba — base de peças (KV 11_26)
   Tokens, fontes, artboards, tipografia, kit gráfico e camada de papel.
   Medidas pensadas para canvas de 1080px de largura.
   ===================================================================== */

@font-face { font-family: "Morbig"; src: url("../fonts/Morbig-Bold.otf") format("opentype"); font-weight: 700; font-display: block; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-VF.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block; }
@font-face { font-family: "Imperial Script"; src: url("../fonts/ImperialScript-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Rubik"; src: url("../fonts/Rubik-VF.ttf") format("truetype"); font-weight: 300 900; font-display: block; }

:root {
  --vermelho: #A22B14;
  --azul: #2E50C8;
  --amarelo: #F1CB30;
  --verde: #538048;
  --marinho: #0D2949;
  --vermelho-escudo: #B51D21;
  --creme: #ECEADA;
  --preto: #000000;

  --f-morbig: "Morbig", "Archivo", sans-serif;
  --f-script: "Imperial Script", cursive;
  --f-info: "Archivo", sans-serif;
  --f-ribbon: "Rubik", sans-serif;

  --edge: 45px;      /* margem lateral no canvas de 1080 */
  --gutter: 24px;
  --block: 90px;
  --card-r: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #1a1a1a; }
body { display: flex; flex-wrap: wrap; gap: 60px; padding: 60px; align-items: flex-start; }
img { display: block; }

/* ---------- Artboards ---------- */
.ps-art { position: relative; overflow: hidden; flex: none; isolation: isolate; color: var(--creme);
  filter: url(#ps-grade); /* curva de cor de "cartaz impresso" (injetada por pelasamba.js) */ }
.ps-art.sem-grade, .ps-overlay { filter: none; }
.ps-feed     { width: 1080px; height: 1440px; }
.ps-story    { width: 1080px; height: 1920px; }
.ps-quadrado { width: 1080px; height: 1080px; }
.ps-retrato  { width: 1080px; height: 1350px; }
.ps-capa     { width: 1200px; height: 380px; }
.ps-thumb    { width: 340px;  height: 210px; }
.ps-overlay  { background: transparent !important; }

/* Fundos (Regra dos Pares: veja o texto correspondente) */
.bg-vermelho { background: var(--vermelho); color: var(--creme); }
.bg-azul     { background: var(--azul);     color: var(--creme); }
.bg-amarelo  { background: var(--amarelo);  color: var(--azul); }
.bg-creme    { background: var(--creme);    color: var(--azul); }
.bg-marinho  { background: var(--marinho);  color: var(--creme); }
.bg-preto    { background: var(--preto);    color: var(--creme); }

.c-creme { color: var(--creme); } .c-azul { color: var(--azul); } .c-amarelo { color: var(--amarelo); }
.c-vermelho { color: var(--vermelho); } .c-marinho { color: var(--marinho); }

/* Posicionamento livre: style="--x:45px; --y:120px" */
.abs { position: absolute; left: var(--x, auto); top: var(--y, auto); right: var(--rx, auto); bottom: var(--by, auto); }
.margem { left: var(--edge); right: var(--edge); }

/* ---------- Tipografia ---------- */
.ps-display, .ps-headline, .ps-title { font-family: var(--f-morbig); font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.ps-display  { font-size: 200px; line-height: .85; }
.ps-headline { font-size: 96px;  line-height: .88; }
.ps-title    { font-size: 56px;  line-height: .9; }
.ps-script   { font-family: var(--f-script); font-weight: 400; font-size: 120px; line-height: 1; text-transform: none; color: var(--amarelo); }
.ps-body     { font-family: var(--f-info); font-weight: 500; font-size: 30px; line-height: 1.12; text-transform: uppercase; }
.ps-label    { font-family: var(--f-info); font-weight: 500; font-size: 22px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.ps-ribbon   { font-family: var(--f-ribbon); font-weight: 700; font-size: 56px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.ps-wordmark { font-family: var(--f-info); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .8; letter-spacing: -.01em; }

/* Linhas que preenchem a largura (Regra da Largura Total).
   <div class="ps-headline" data-fit><span class="ps-line">VENDAS</span><span class="ps-line">ABREM</span></div>
   pelasamba.js ajusta o corpo de cada linha para encostar nas duas margens. */
[data-fit] .ps-line { display: block; white-space: nowrap; }
[data-fit="block"] { white-space: nowrap; }

/* Linha "espalhada" de ponta a ponta: CASA · DI · PRAIA · LAYBACK */
.ps-spread { display: flex; justify-content: space-between; }

/* Lockup: bloco Morbig + palavra script sobreposta (Regra da Palavra Cantada) */
.ps-lockup { position: relative; display: inline-block; }
.ps-lockup .ps-script { position: absolute; white-space: nowrap; }

/* ---------- Cabeçalho de informação ---------- */
.ps-header { position: absolute; left: var(--edge); right: var(--edge); top: var(--header-top, 60px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ps-header > :last-child { text-align: right; }
.ps-header .ps-escudo { width: 92px; }
.ps-story .ps-header { --header-top: 260px; }

/* ---------- Kit gráfico ---------- */
.ps-sticker { position: absolute; transform: rotate(var(--r, 0deg)); transform-origin: center; }

.ps-estrela   { clip-path: polygon(50.0% 0.0%,56.7% 24.9%,75.0% 6.7%,68.4% 31.6%,93.3% 25.0%,75.1% 43.3%,100.0% 50.0%,75.1% 56.7%,93.3% 75.0%,68.4% 68.4%,75.0% 93.3%,56.7% 75.1%,50.0% 100.0%,43.3% 75.1%,25.0% 93.3%,31.6% 68.4%,6.7% 75.0%,24.9% 56.7%,0.0% 50.0%,24.9% 43.3%,6.7% 25.0%,31.6% 31.6%,25.0% 6.7%,43.3% 24.9%); }
.ps-estrela-8 { clip-path: polygon(50.0% 0.0%,59.9% 26.0%,85.4% 14.6%,74.0% 40.1%,100.0% 50.0%,74.0% 59.9%,85.4% 85.4%,59.9% 74.0%,50.0% 100.0%,40.1% 74.0%,14.6% 85.4%,26.0% 59.9%,0.0% 50.0%,26.0% 40.1%,14.6% 14.6%,40.1% 26.0%); }
.ps-explosao  { clip-path: polygon(50.0% 1.4%,57.6% 24.0%,75.7% 9.9%,70.8% 32.0%,95.1% 29.4%,79.0% 45.8%,94.0% 56.3%,79.3% 63.4%,84.3% 79.7%,65.1% 73.6%,63.2% 94.9%,50.0% 78.4%,36.2% 97.0%,35.3% 72.9%,13.2% 81.9%,19.9% 63.7%,5.4% 56.4%,18.1% 45.4%,8.9% 31.2%,29.0% 31.8%,24.0% 9.5%,41.3% 20.3%); }
.ps-selo      { clip-path: polygon(50.0% 0.0%,58.4% 7.8%,69.1% 3.8%,73.9% 14.2%,85.4% 14.6%,85.8% 26.1%,96.2% 30.9%,92.2% 41.6%,100.0% 50.0%,92.2% 58.4%,96.2% 69.1%,85.8% 73.9%,85.4% 85.4%,73.9% 85.8%,69.1% 96.2%,58.4% 92.2%,50.0% 100.0%,41.6% 92.2%,30.9% 96.2%,26.1% 85.8%,14.6% 85.4%,14.2% 73.9%,3.8% 69.1%,7.8% 58.4%,0.0% 50.0%,7.8% 41.6%,3.8% 30.9%,14.2% 26.1%,14.6% 14.6%,26.1% 14.2%,30.9% 3.8%,41.6% 7.8%); }

/* Raios: sempre ATRÁS de uma foto ou saindo de um pandeiro (Regra do Pandeiro no Centro).
   Ficam confinados numa elipse (--alcance = raio horizontal, --alcance-y = raio vertical) para o título cair no fundo chapado.
   style="--raio: var(--creme); --cx: 50%; --cy: 45%; --alcance: 620px; --alcance-y: 420px" */
.ps-raios { position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at var(--cx, 50%) var(--cy, 50%), var(--raio, var(--creme)) 0deg 6deg, var(--fundo-raio, transparent) 6deg 15deg);
  -webkit-mask-image: radial-gradient(ellipse var(--alcance, 600px) var(--alcance-y, var(--alcance, 600px)) at var(--cx, 50%) var(--cy, 50%), #000 99.5%, transparent 100%);
          mask-image: radial-gradient(ellipse var(--alcance, 600px) var(--alcance-y, var(--alcance, 600px)) at var(--cx, 50%) var(--cy, 50%), #000 99.5%, transparent 100%); }

/* Foto em elipse inclinada: a foto fica em pé, a máscara é que gira */
.ps-elipse { position: absolute; overflow: hidden; border-radius: 50%; transform: rotate(var(--r, -24deg)); }
.ps-elipse > img { position: absolute; left: 50%; top: 50%; width: 125%; height: 175%; object-fit: cover;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--r, -24deg))); }

/* Card de foto arredondado */
.ps-card { position: absolute; overflow: hidden; border-radius: var(--card-r); background: var(--preto); }
.ps-card > img { width: 100%; height: 100%; object-fit: cover; }
.ps-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%); }
/* Texto creme sobre foto clara: escurece o miolo da foto para o título ler (tratamento de foto, não efeito de UI) */
.ps-card.vinheta::after { background: radial-gradient(ellipse 80% 38% at 50% var(--vy, 52%), rgba(0,0,0,.55), rgba(0,0,0,0) 100%),
  linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 65%, rgba(0,0,0,.3) 100%); }

/* Tratamento de foto da festa: grão + contraste, levemente quente */
.ps-foto { filter: contrast(1.08) saturate(1.05) sepia(.06); }
.ps-foto-pb { filter: grayscale(1) contrast(1.15); }

/* Tarja de destaque (vídeos e títulos curtos) */
.ps-tarja { display: inline-block; background: var(--azul); color: var(--creme); padding: 4px 18px 0; white-space: nowrap; }
.ps-tarja.vermelha { background: var(--vermelho); } .ps-tarja.creme { background: var(--creme); color: var(--azul); }

/* Flâmula com texto livre (para "PELASAMBA" use o SVG em brand/vector/flamula-vermelha.svg) */
.ps-flamula { display: inline-block; background: var(--creme); color: var(--vermelho); padding: 22px 110px 16px;
  clip-path: polygon(0 0,100% 0,90% 50%,100% 100%,0 100%,10% 50%); border-radius: 50% 50% 50% 50% / 30% 30% 12% 12%; }
.ps-flamula.vermelha { background: var(--vermelho); color: var(--creme); }

/* Azulejos — escaláveis pelo tamanho do próprio azulejo (--tile, padrão 90px).
   Faixa: <div class="ps-azulejos" style="top:530px"><i class="az-raios"></i><i class="az-pandeiro"></i>…</div>
   Painel: use os mesmos .az-* em qualquer célula de grid; os desenhos acompanham o tamanho da célula. */
.ps-azulejos { --tile: 90px; position: absolute; left: 0; right: 0; height: var(--tile); display: flex; overflow: hidden; }
.ps-azulejos > i { flex: 0 0 var(--tile); height: var(--tile); }
[class*="az-"] { position: relative; overflow: hidden; container-type: size; }
.az-raios   { background: repeating-conic-gradient(var(--vermelho) 0 9deg, var(--creme) 9deg 18deg); }
.az-raios-v { background: repeating-conic-gradient(var(--verde) 0 9deg, var(--amarelo) 9deg 18deg); }
.az-raios-a { background: repeating-conic-gradient(var(--azul) 0 9deg, var(--creme) 9deg 18deg); }
.az-pandeiro { background: var(--creme); --c: var(--azul); --f: var(--creme); }
.az-pandeiro::after { content: ""; position: absolute; inset: 22%; border: 6.5cqmin solid var(--c); border-radius: 50%;
  box-shadow: 0 0 0 4.5cqmin var(--f), 0 0 0 8cqmin var(--c); }
.az-pandeiro.vermelho { background: var(--vermelho); --c: var(--creme); --f: var(--vermelho); }
.az-pandeiro.azul { background: var(--azul); --c: var(--amarelo); --f: var(--azul); }
.az-estrela { background: var(--verde); }
.az-estrela::after { content: ""; position: absolute; inset: 11%; background: var(--amarelo); clip-path: polygon(50.0% 0.0%,59.9% 26.0%,85.4% 14.6%,74.0% 40.1%,100.0% 50.0%,74.0% 59.9%,85.4% 85.4%,59.9% 74.0%,50.0% 100.0%,40.1% 74.0%,14.6% 85.4%,26.0% 59.9%,0.0% 50.0%,26.0% 40.1%,14.6% 14.6%,40.1% 26.0%); }
.az-estrela.amarela { background: var(--amarelo); } .az-estrela.amarela::after { background: var(--verde); }
.az-estrela.vermelha { background: var(--vermelho); } .az-estrela.vermelha::after { background: var(--amarelo); }
.az-escudo { background: var(--creme); }
.az-escudo::after { content: ""; position: absolute; left: 27%; right: 27%; top: 24%; bottom: 20%; background: var(--marinho); border-radius: 3% 3% 50% 50% / 3% 3% 45% 45%; }
.az-escudo.amarelo { background: var(--amarelo); }
.az-listras { background: repeating-linear-gradient(0deg, var(--vermelho) 0 7%, var(--amarelo) 7% 14%); }

/* Objeto duotone (gerado por scripts/ps duotone) */
.ps-objeto { position: absolute; transform: rotate(var(--r, 0deg)); }

/* Rabiscos de vibração (traços à mão) */
.ps-rabisco { position: absolute; width: 140px; height: 140px; transform: rotate(var(--r, 0deg)); }

/* Flâmula em arco com texto livre — gerada por pelasamba.js:
   <div class="ps-flamula-arco abs" data-texto="PELASAMBA" style="--x:300px; --y:90px; width:640px"></div>
   variantes de cor: (padrão) creme+vermelho · .vermelha creme sobre vermelho · .amarela azul sobre amarelo · .azul amarelo sobre azul */
.ps-flamula-arco { --f: var(--creme); --t: var(--vermelho); }
.ps-flamula-arco.vermelha { --f: var(--vermelho); --t: var(--creme); }
.ps-flamula-arco.amarela { --f: var(--amarelo); --t: var(--azul); }
.ps-flamula-arco.azul { --f: var(--azul); --t: var(--amarelo); }
.ps-flamula-arco svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Camada de papel (sempre o último filho do artboard) ---------- */
.ps-papel { position: absolute; inset: 0; pointer-events: none; z-index: 100; }
.ps-papel::before { /* manchas leves de papel */
  content: ""; position: absolute; inset: 0;
  background: url("../textures/paper-blotch.png") center / cover;
  mix-blend-mode: multiply; opacity: .8; }
.ps-papel::after { /* granulado + vincos de dobra */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), rgba(0,0,0,.07) calc(50% - 1px), rgba(255,255,255,.10) 50%, transparent calc(50% + 3px)),
    linear-gradient(180deg, transparent calc(50% - 2px), rgba(0,0,0,.06) calc(50% - 1px), rgba(255,255,255,.09) 50%, transparent calc(50% + 3px)),
    linear-gradient(180deg, transparent calc(25% - 2px), rgba(0,0,0,.04) calc(25% - 1px), rgba(255,255,255,.06) 25%, transparent calc(25% + 2px)),
    url("../textures/grain.png") 0 0 / 512px 512px;
  opacity: .9; }
.ps-papel.sem-dobra::after { background: url("../textures/grain.png") 0 0 / 512px 512px; }