/* photo-frames.css — renderer das molduras TOMI (.pfr)
   ---------------------------------------------------------------------------
   UM SÓ RENDERER para miniatura, live preview, resultado e backoffice.

   Como isso é possível: `.pfr` é um container de consulta e o seu `font-size`
   está em `cqw`. Todas as medidas internas estão em `em`. Uma miniatura de 216px
   e um resultado de 640px produzem exatamente a mesma composição, à escala.
   É isto que garante que a miniatura representa o RESULTADO REAL.

   NUNCA existe espaço cinzento: `.pfr__photo` é sempre `object-fit: cover` sobre
   a área definida em `photoArea`, e o resto do canvas é superfície desenhada
   (ink, papel ou amarelo TOMI) — nunca fundo por omissão. */

.pfr {
  --pfr-accent: var(--pfv-accent, var(--ds-accent, #FAC200));
  --pfr-accent-ink: var(--pfv-ink, var(--ds-accent-ink, #211a00));
  --pfr-ink: var(--pfv-ink, #16202a);
  --pfs-hole: currentColor;
  position: relative; overflow: hidden; display: block;
  background: var(--pfr-ink); color: #fff;
  font-family: var(--ds-font-sans, "Barlow"), system-ui, sans-serif;
  container-type: inline-size;
  line-height: 1.1;
}
/* O `font-size` em unidades de container TEM de estar num FILHO do container:
   um container não pode dimensionar-se a si próprio com as suas próprias
   unidades (seria circular) e o Chrome resolve `cqw` contra um ancestral
   errado, produzindo texto gigante. Por isso a escala vive em `.pfr__art`. */
.pfr__art {
  font-size: 13px;            /* fallback: browsers sem container queries */
  font-size: 4.3cqw;          /* escala real: miniatura == resultado */
}
.pfr * { box-sizing: border-box; }
.pfr--r34 { aspect-ratio: 3 / 4; }
.pfr--r43 { aspect-ratio: 4 / 3; }
.pfr--r45 { aspect-ratio: 4 / 5; }
.pfr--r916 { aspect-ratio: 9 / 16; }

/* superfícies — o canvas nunca é "vazio" */
.pfr--paper { background: var(--pfv-paper, #FBFAF7); color: var(--pfr-ink); }
.pfr--ink { background: var(--pfr-ink); }
.pfr--hereNow { background: #fff; }

.pfr__photo { position: absolute; overflow: hidden; background: #1a2229; }
.pfr__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfr__art { position: absolute; inset: 0; pointer-events: none; }
.pfa { position: absolute; }
.pfa__head { margin: 0; font-family: var(--ds-font-display, "Barlow Condensed"), sans-serif;
  font-weight: 900; font-size: 1.6em; line-height: .92; letter-spacing: -.005em;
  text-transform: uppercase; text-shadow: 0 .06em .18em rgba(0,0,0,.30); }

/* ===========================================================================
   WIDGETS — primitivas geradas a partir do contexto (zero design externo)
   =========================================================================== */
.pfw-row { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.pfw { display: inline-flex; align-items: center; gap: .35em; border-radius: 99em;
  font-size: .72em; font-weight: 800; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.pfw--chip { padding: .38em .78em; color: var(--pfr-accent-ink);
  background: linear-gradient(180deg, #ffd944, var(--pfr-accent) 62%, #e5ac00);
  box-shadow: 0 .1em .3em rgba(0,0,0,.28), inset 0 .06em 0 rgba(255,255,255,.55); }
.pfw--pin { padding: .34em .74em .34em .5em; color: var(--pfr-ink);
  background: linear-gradient(180deg, #fff, #eef2f4);
  box-shadow: 0 .1em .3em rgba(0,0,0,.3), inset 0 .06em 0 #fff; }
.pfw--pin svg { width: 1.2em; height: 1.2em; color: #e2483f; }

/* o pill "<texto> ON" — assinatura literal das molduras TOMI reais */
/* interruptor com volume: é o elemento mais reconhecível da linguagem TOMI */
.pfw--toggle { padding: .22em .22em .22em .9em; font-size: .86em;
  background: linear-gradient(180deg, #fff, #e8edf0); color: var(--pfr-ink);
  box-shadow: 0 .22em .6em rgba(0,0,0,.32), inset 0 .07em 0 #fff,
              inset 0 -.07em 0 rgba(0,0,0,.08); }
.pfw--toggle em { font-style: normal; font-weight: 800; }
.pfw--toggle b { position: relative; padding: .32em 1.5em .32em .72em; margin-left: .55em;
  border-radius: 99em; background: linear-gradient(180deg, #34d46f, #17a04c); color: #fff;
  letter-spacing: .1em; box-shadow: inset 0 .07em 0 rgba(255,255,255,.45),
              inset 0 -.08em .12em rgba(0,0,0,.22); }
/* o "botão" do interruptor, como na arte original */
.pfw--toggle b::after { content: ''; position: absolute; right: .16em; top: 50%;
  width: 1.05em; height: 1.05em; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #dfe5e8);
  box-shadow: 0 .06em .16em rgba(0,0,0,.35); }
.pfw--toggle.pfw--green { background: #bdedc4; }
.pfw--toggle.pfw--amber { background: #ddccb2; }
.pfw--toggle.pfw--amber b { background: #e2660a; }
.pfw--toggle.pfw--ice { background: #8fdcf5; }
.pfw--toggle.pfw--ice b { background: linear-gradient(180deg, #17a5cf, #0f6f92); }

/* carimbo postal: anel duplo + picotado, como um selo real */
.pfw--stamp { position: relative; flex-direction: column; gap: 0; width: 3.2em; height: 3.2em;
  justify-content: center; border: .1em solid currentColor; border-radius: 50%; font-size: .8em; }
.pfw--stamp::before { content: ''; position: absolute; inset: .18em; border-radius: 50%;
  border: .06em dashed currentColor; opacity: .55; }
.pfw--stamp b { font-family: var(--ds-font-display), sans-serif; font-size: 1.3em; line-height: .9; }
.pfw--stamp small { font-size: .6em; letter-spacing: .1em; opacity: .85; }

/* ===========================================================================
   MOTIVOS DE CANTO — equivalentes gerados dos elementos das molduras reais
   (sol/raios no verão, folhas no outono, flocos no inverno, flor na primavera)
   =========================================================================== */
.pfm { position: absolute; display: block; }
.pfm--sun { left: 5%; top: 4%; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff08a, var(--pfr-accent) 62%, #e09b00);
  box-shadow: 0 .1em .35em rgba(0,0,0,.32); }
.pfm--sun::after { content: ''; position: absolute; inset: -52%;
  background: repeating-conic-gradient(var(--pfr-accent) 0 7deg, transparent 7deg 45deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 60%);
          mask: radial-gradient(closest-side, transparent 58%, #000 60%); }
.pfm--ray { right: 5%; top: 5%; width: 2.1em; height: 2.1em; border-radius: 0 99em 0 99em;
  background: linear-gradient(135deg, #ef4a5a 45%, #fff 45% 55%, #ef4a5a 55%); transform: rotate(18deg); }
.pfm--leaf, .pfm--leaf2 { width: 1.9em; height: 1.9em; border-radius: 0 100% 0 100%;
  background: linear-gradient(150deg, #ffc247, #f7a81b 45%, #e0561d);
  box-shadow: 0 .1em .3em rgba(0,0,0,.3); }
/* nervura central */
.pfm--leaf::after, .pfm--leaf2::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 47%, rgba(255,255,255,.55) 48% 52%, transparent 53%); }
.pfm--leaf { left: 4%; top: 4%; transform: rotate(-24deg); }
.pfm--leaf2 { right: 4%; top: 5%; width: 1.6em; height: 1.6em; transform: rotate(64deg);
  background: linear-gradient(150deg, #d63b3b, #8e1d1d); }
.pfm--flake, .pfm--flake2 { width: 1.8em; height: .2em; border-radius: 99em; background: rgba(255,255,255,.9); }
.pfm--flake { left: 5%; top: 7%; }
.pfm--flake2 { right: 5%; top: 6%; width: 1.35em; }
.pfm--flake::before, .pfm--flake::after, .pfm--flake2::before, .pfm--flake2::after {
  content: ''; position: absolute; inset: 0; border-radius: 99em; background: inherit; }
.pfm--flake::before, .pfm--flake2::before { transform: rotate(60deg); }
.pfm--flake::after, .pfm--flake2::after { transform: rotate(-60deg); }
.pfm--bloom, .pfm--bloom2 { width: .8em; height: .8em; border-radius: 50%; background: var(--pfr-accent);
  box-shadow: 0 -.7em 0 #f7d7e2, 0 .7em 0 #f7d7e2, -.7em 0 0 #f7d7e2, .7em 0 0 #f7d7e2; }
.pfm--bloom { left: 7%; top: 7%; }
.pfm--bloom2 { right: 7%; top: 8%; transform: scale(.75); }

/* ===========================================================================
   REACTION STICKERS — colocados pelo template, nunca pelo utilizador
   =========================================================================== */
/* recorte "die-cut": contorno branco + sombra, a assinatura visual de um
   sticker colado. É isto que separa um sticker de um simples ícone. */
.pfs { position: relative; display: inline-grid; place-items: center; width: 2.6em; height: 2.6em;
  border-radius: 50%; flex: 0 0 auto; transform: rotate(-7deg);
  box-shadow: 0 0 0 .16em #fff, 0 .16em .4em rgba(0,0,0,.38); }
.pfs__glyph { width: 62%; height: 62%; display: block; }
.pfs--accent { background: var(--pfr-accent); color: var(--pfr-accent-ink); --pfs-hole: var(--pfr-accent); }
.pfs--light { background: #fff; color: var(--pfr-ink); --pfs-hole: #fff; }
.pfs--dark { background: var(--pfr-ink); color: #fff; --pfs-hole: var(--pfr-ink); }
.pfs--coral { background: var(--pfv-coral, #ff665c); color: var(--pfr-ink); --pfs-hole: var(--pfv-coral, #ff665c); }
.pfs--mint { background: var(--pfv-mint, #9ce7cb); color: var(--pfr-ink); --pfs-hole: var(--pfv-mint, #9ce7cb); }
.pfs--blue { background: var(--pfv-blue, #79c9ff); color: var(--pfr-ink); --pfs-hole: var(--pfv-blue, #79c9ff); }
.pfs--bare { background: none; color: #fff; --pfs-hole: transparent; filter: drop-shadow(0 .1em .3em rgba(0,0,0,.5)); }
.pfs--hero { width: 5.4em; height: 5.4em; transform: rotate(-9deg);
  box-shadow: 0 0 0 .22em #fff, 0 .3em .7em rgba(0,0,0,.42); }
.pfs--xl { width: 4.1em; height: 4.1em; }
.pfs--mini { width: 2em; height: 2em; transform: rotate(-12deg); }
.pfs--tilt-r { transform: rotate(11deg); }
.pfs--edition-primary { transform: rotate(var(--pfv-rot-primary, -7deg)); }
.pfs--edition-secondary { transform: rotate(var(--pfv-rot-secondary, 11deg)); }
.pfs--bare, .pfa--footband .pfs { box-shadow: none; transform: none; }
/* microanimação apenas no live preview; a exportação usa estado estático */
.pm-live__stage .pfs--hero { animation: pfs-bounce 2.6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes pfs-bounce { 0%,72%,100% { transform: none; } 80% { transform: translateY(-8%) rotate(-5deg); } 90% { transform: translateY(0) rotate(3deg); } }

/* ===========================================================================
   AS 8 COMPOSIÇÕES — cada uma difere em ESTRUTURA, não só em texto
   =========================================================================== */

/* 1 · Season in the City — banda de gradiente no topo (anatomia das molduras reais) */
.pfa--band-top { inset: 0 0 auto 0; padding: 1.5em 1.1em 2.4em; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .55em;
  background: linear-gradient(180deg, rgba(18,24,29,.74) 0%, rgba(18,24,29,.30) 58%, transparent 100%); }

/* 2 · Week Vibe — bloco ancorado em CIMA À ESQUERDA (alinhado, não centrado) */
.pfa--corner-tl { inset: 6% auto auto 6%; text-align: left; display: grid; gap: .5em; justify-items: start; }
.pfa__rule { width: 2.4em; height: .16em; background: var(--pfr-accent); border-radius: 99em; }
.pfa__head--stack { font-size: 2.05em; line-height: .86; }
.pfa__vignette--tl { position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(12,17,21,.80) 0%, transparent 100%); z-index: -1; }

/* 3 · Today's Mood — estrutura dividida: barra fina no topo + tab na base */
.pfa--rail { inset: 0 0 auto 0; padding: .9em 1em; display: flex; align-items: center;
  justify-content: space-between; gap: .5em;
  background: linear-gradient(180deg, rgba(14,19,24,.62), transparent); }
.pfa--tab { left: 50%; top: 15%; transform: translateX(-50%); padding: .5em 1.1em;
  border-radius: .4em; background: var(--pfr-accent); color: var(--pfr-accent-ink);
  box-shadow: 0 .18em .5em rgba(0,0,0,.3); }
.pfa--tab .pfa__head { font-size: 1.35em; text-shadow: none; white-space: nowrap; }

/* 4 · City Postcard — a fotografia é um INSET num postal de papel */
.pfr--postcard .pfr__photo { border-radius: .25em; }
.pfa--postcard { inset: 74% 5.5% 4%; color: var(--pfr-ink); display: flex; flex-direction: column;
  justify-content: space-between; }
.pfa__pcHead { display: flex; align-items: flex-start; justify-content: space-between; gap: .6em; }
.pfa__pcHead .pfa__head { font-size: .78em; line-height: 1; letter-spacing: .16em; text-shadow: none;
  color: #8b959c; font-weight: 700; }
.pfa__pcHead .pfa__head b { display: block; margin-top: .15em; font-size: 2.1em; letter-spacing: -.01em;
  color: var(--pfr-ink); font-weight: 900; }
.pfa__pcFoot { display: flex; align-items: center; gap: .5em; padding-top: .5em;
  border-top: .08em solid #e3ded3; font-size: .68em; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #77818a; }
.pfa__pcFoot i { flex: 1 1 auto; height: .08em; background: #e3ded3; }

/* 5 e 6 · POLAROID — a fotografia é MENOR e a informação vive FORA da imagem.
   Nada é escrito sobre a base da fotografia; o rodapé é área dedicada.
   Ganho de produto: menos pressão sobre os 1080p, mais espaço de grafismo e
   tolerância a fundos urbanos confusos. */
.pfr--love, .pfr--smile { background: #FBFAF7; color: var(--pfr-ink); }
.pfr--smile { background: var(--pfr-accent); color: var(--pfr-accent-ink); }
.pfr--love .pfr__photo, .pfr--smile .pfr__photo { border-radius: .12em;
  box-shadow: 0 .18em .5em rgba(0,0,0,.22), inset 0 0 0 .05em rgba(0,0,0,.06); }
.pfa--polaroid { inset: 0; }
/* sticker "colado" a cavalo no canto superior da fotografia */
.pfa__pin { position: absolute; right: 2%; top: 2%; }
.pfa__pgFoot { position: absolute; left: 6%; right: 6%; top: 74%; display: grid; gap: .4em;
  align-content: start; }
.pfa__pgFoot .pfa__head { font-size: 1.45em; text-shadow: none; }
.pfa__pgMeta { font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }

/* 6 · Smile of the Day — banda amarela sólida na base */
.pfa--footband { inset: auto 0 0 0; height: 16%; padding: 0 1em; display: flex; align-items: center;
  gap: .7em; background: var(--pfr-accent); color: var(--pfr-accent-ink); }
/* sobre a banda amarela o glifo é ink e os vazios são a própria banda */
.pfa--footband .pfs { width: 2.4em; height: 2.4em; filter: none;
  color: var(--pfr-accent-ink); --pfs-hole: var(--pfr-accent); }
.pfa--footband .pfs__glyph { width: 100%; height: 100%; }
.pfa__fbText { min-width: 0; display: grid; }
.pfa__fbText b { font-family: var(--ds-font-display), sans-serif; font-size: 1.2em; font-weight: 900;
  line-height: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfa__fbText small { font-size: .66em; font-weight: 700; letter-spacing: .08em; opacity: .72; margin-top: .15em; }
.pfa--footband-ink { height: 20%; background: var(--pfr-ink); color: #fff; justify-content: space-between; }
.pfa--footband-ink .pfa__fbText small { opacity: .6; }
.pfa__logo { height: 1.6em; width: auto; flex: 0 0 auto; }

/* 7 · Here & Now — minimal editorial; TODO o texto no topo, base limpa */
.pfa--hairline { inset: 0; }
.pfa__mark { position: absolute; left: 7%; top: 6.5%; font-size: .66em; font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 .1em .3em rgba(0,0,0,.5); }
.pfa__metaRow { position: absolute; left: 7%; right: 7%; top: 12.5%; display: flex;
  align-items: flex-end; justify-content: space-between; gap: .6em;
  text-shadow: 0 .1em .3em rgba(0,0,0,.55); }
.pfa__metaRow b { font-family: var(--ds-font-display), sans-serif; font-size: 1.25em; font-weight: 900;
  line-height: 1; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pfa__metaRow span { font-size: .68em; font-weight: 700; letter-spacing: .06em; opacity: .9; white-space: nowrap; }
.pfr--hereNow .pfr__art::before { content: ''; position: absolute; inset: 2.8%;
  background: linear-gradient(180deg, rgba(10,15,19,.62) 0%, transparent 34%); }

/* 8 · TOMI Reaction Card — Smart Context Card, foto a 62% do canvas */
.pfa--card { inset: 62% 0 0 0; padding: 1.1em 1.2em 1em; display: flex; flex-direction: column; gap: .55em; }
.pfa__cardTop { display: flex; gap: .4em; }
.pfa--card .pfs { width: 2.1em; height: 2.1em; }
.pfa--card .pfa__head { font-size: 1.5em; text-shadow: none; }
.pfa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35em .8em; margin-top: auto; }
.pfa__cell { display: grid; gap: .1em; }
.pfa__cell small { font-size: .58em; font-weight: 800; letter-spacing: .16em; color: #7f8c96; }
.pfa__cell b { font-size: .8em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfa__wordmark { position: absolute; right: 1.2em; top: 1.1em; font-family: var(--ds-font-display), sans-serif;
  font-size: .8em; font-weight: 900; letter-spacing: .1em; color: var(--pfr-accent); }

/* artwork custom fechado — importado como layer transparente, nunca reposicionado */
.pfa--overlay { inset: 0; }
.pfa--overlay img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ===========================================================================
   SAFE ZONES — só backoffice/QA, nunca no percurso público
   =========================================================================== */
.pfr__zones { position: absolute; inset: 0; pointer-events: none; }
.pfz { position: absolute; border: 2px dashed rgba(255,255,255,.8); }
.pfz i { position: absolute; left: 0; top: 0; padding: 1px 5px; font-size: 10px; font-style: normal;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #06121a; }
.pfz--photo { border-color: #35e08a; } .pfz--photo i { background: #35e08a; }
.pfz--face { border-color: #ff5d73; } .pfz--face i { background: #ff5d73; }
.pfz--logo { border-color: #4db8ff; } .pfz--logo i { background: #4db8ff; }

@media (prefers-reduced-motion: reduce) {
  .pfr *, .pfr *::before, .pfr *::after { animation-duration: 1ms !important; }
}

/* superfície amarela (polaroid Sorriso do dia) */
.pfr--accent { background: var(--pfr-accent); color: var(--pfr-accent-ink); }

/* ===========================================================================
   LOCAL SCRAPBOOK · EVOLUÇÃO GRÁFICA PV002/PV003
   O mesmo sistema adapta-se aos masters 4:3 e 3:4. Não há ilustrações raster:
   fita, papel, spray, carimbos, profundidade e widgets são todos gerados.
   =========================================================================== */

/* A escala ótica fica equivalente nos dois formatos: em 4:3 a largura maior
   não deve transformar widgets em elementos desproporcionados. */
.pfr--r43 .pfr__art { font-size: 13px; font-size: 3.35cqw; }
.pfr--r34 .pfr__art { font-size: 13px; font-size: 4.3cqw; }
.pfr__photo img { filter: saturate(1.06) contrast(1.025); }

/* Widgets de dados locais: pequenas peças com hierarquia interna, não pills
   genéricos. Mantêm contraste em fotografia clara e escura. */
.pfw--temp, .pfw--weather, .pfw--date {
  min-height: 2.7em; padding: .38em .68em; border-radius: .62em;
  display: inline-grid; grid-template-columns: auto; align-content: center; gap: .03em;
  background: rgba(255,255,255,.94); color: var(--pfr-ink);
  box-shadow: 0 .16em .5em rgba(0,0,0,.28), inset 0 0 0 .06em rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pfw--temp b, .pfw--weather b, .pfw--date b {
  font-family: var(--ds-font-display), sans-serif; font-size: 1.28em; font-weight: 900; line-height: .85;
}
.pfw--temp small, .pfw--weather small, .pfw--date small {
  font-size: .52em; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; opacity: .64;
}
.pfw--temp { background: linear-gradient(145deg, var(--pfv-accent-light, #ffe78a), var(--pfr-accent)); }
.pfw--weather { grid-template-columns: auto 1fr; column-gap: .5em; align-items: center; }
.pfw--weather small { max-width: 9em; white-space: normal; line-height: 1.05; }
.pfw-note {
  display: inline-block; max-width: 14em; padding: .8em 1em .9em;
  background: linear-gradient(145deg, var(--pfv-accent-light, #fff3a8), var(--pfr-accent)); color: var(--pfr-ink);
  font-family: var(--ds-font-display), sans-serif; font-size: .72em; font-weight: 900;
  line-height: 1.05; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 .28em .65em rgba(0,0,0,.34);
  transform: rotate(-3deg); clip-path: polygon(0 0, 96% 2%, 100% 92%, 86% 100%, 4% 96%);
}
.pfw-note--pink { background: linear-gradient(145deg, var(--pfv-coral-light, #ffb3c6), var(--pfv-coral, #ff779b)); color: var(--pfr-ink); }

/* Elementos transversais de scrapbook */
.pfa__tape, .pfa__pcTape {
  padding: .48em 1.4em; background: var(--pfv-soft, rgba(211,231,216,.88)); color: var(--pfr-ink);
  font-size: .58em; font-weight: 850; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 .08em .24em rgba(0,0,0,.18); transform: rotate(var(--pfv-rot-tape, 3deg));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  clip-path: polygon(3% 5%, 97% 0, 100% 88%, 4% 100%, 0 18%);
}
.pfa__head--spray {
  font-family: var(--ds-font-display), sans-serif; font-weight: 900; letter-spacing: .025em;
  -webkit-text-stroke: .035em currentColor; paint-order: stroke fill;
  text-shadow: .08em .08em 0 rgba(255,255,255,.92), .16em .18em .02em rgba(0,0,0,.28);
  transform: rotate(-1.5deg);
}
.pfa__stickerCluster, .pfa__stickerStack, .pfa__moodStickers,
.pfa__pcStickers, .pfa__liveStickers {
  display: flex; align-items: flex-start; gap: .25em; filter: drop-shadow(0 .1em .2em rgba(0,0,0,.18));
}

/* 1 · Estação: editorial sazonal, fita translúcida, grande tag spray e dois stickers */
.pfa--season { inset: 0; }
.pfa--season::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 86% 86%, var(--pfv-accent-a, rgba(250,194,0,.42)), transparent 30%),
    linear-gradient(180deg, var(--pfv-violet-a, rgba(83,69,145,.48)) 0%, var(--pfv-blue-a, rgba(121,201,255,.08)) 48%, var(--pfv-coral-a, rgba(255,102,92,.32)) 100%);
}
.pfa--season::after {
  content: ''; position: absolute; inset: 1.4%; border: .08em solid rgba(255,255,255,.52);
  border-radius: .28em; box-shadow: inset 0 0 0 .06em rgba(0,0,0,.12);
}
.pfa--season .pfa__tape--top { position: absolute; right: 5%; top: 4%; }
.pfa__seasonCopy { position: absolute; left: 6%; top: 8%; right: 24%; display: grid; gap: .48em; }
.pfa__seasonCopy .pfa__kicker { font-size: .64em; font-weight: 850; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; }
.pfa__seasonCopy .pfa__head { max-width: 9em; font-size: 2.15em; line-height: .82; }
.pfa--season .pfa__stickerCluster { position: absolute; right: 5%; bottom: 7%; }
.pfa__sprayTag { position: absolute; left: 5%; bottom: 5%; color: rgba(255,255,255,.16);
  font-family: var(--ds-font-display), sans-serif; font-size: 2.65em; font-weight: 900;
  line-height: .8; letter-spacing: -.03em; transform: rotate(-3deg);
  -webkit-text-stroke: .025em rgba(255,255,255,.82); }
.pfa--season .pfm { z-index: 2; }

/* 2 · Vibe da semana: linguagem street sem sacrificar leitura dos dados */
.pfa--street { inset: 0; }
.pfa--street::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--pfv-violet-a, rgba(67,54,132,.58)) 0%, var(--pfv-coral-a, rgba(255,119,155,.12)) 58%, transparent 80%),
    linear-gradient(0deg, var(--pfv-coral-a, rgba(255,102,92,.38)), transparent 42%); }
.pfa__streetSide { position: absolute; right: 3.2%; top: 7%; writing-mode: vertical-rl;
  font-size: .58em; font-weight: 850; letter-spacing: .18em; color: #fff; text-transform: uppercase; }
.pfa__streetWidgets { position: absolute; left: 5%; top: 5%; display: flex; gap: .42em; }
.pfa__spray { position: absolute; left: 5%; bottom: 8%; color: #fff; }
.pfa__spray small { display: inline-block; margin-bottom: .45em; padding: .34em .62em;
  background: var(--pfv-coral, #ff779b); color: var(--pfr-ink); font-size: .58em; font-weight: 900;
  letter-spacing: .14em; transform: rotate(-2deg); }
.pfa__spray .pfa__head { font-size: 2.35em; line-height: .78; max-width: 7em;
  -webkit-text-stroke: .028em #fff; paint-order: stroke fill;
  text-shadow: .09em .09em 0 var(--pfv-coral-dark, #ec4b78), .18em .18em .03em rgba(0,0,0,.4); }
.pfa--street .pfa__stickerStack { position: absolute; right: 5%; bottom: 8%; }

/* 3 · Mood: post-it inclinado, fita e cluster de reações */
.pfa--moodboard { inset: 0; }
.pfa--moodboard::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--pfv-blue-a, rgba(74,100,166,.34)), transparent 38%),
    radial-gradient(circle at 78% 78%, var(--pfv-coral-a, rgba(255,145,109,.34)), transparent 38%); }
.pfa__moodRail { position: absolute; left: 5%; right: 5%; top: 5%; display: flex;
  align-items: flex-start; justify-content: space-between; gap: .5em; }
.pfa__postit { color: #291d13; background:
  linear-gradient(145deg, rgba(255,255,255,.34), transparent 38%),
  linear-gradient(145deg, var(--pfv-coral-light, #ffc99f), var(--pfv-coral, #ff916d));
  box-shadow: 0 .4em .9em rgba(0,0,0,.42); clip-path: polygon(0 2%, 96% 0, 100% 89%, 91% 100%, 3% 97%);
}
.pfa__postit--mood { position: absolute; left: 6%; bottom: 7%; width: 58%;
  min-height: 23%; padding: 1.1em 1.2em .95em; transform: rotate(-3deg); }
.pfa__postitTape { position: absolute; left: 28%; top: -.42em; width: 42%; height: .82em;
  background: var(--pfv-soft, rgba(216,238,222,.84)); transform: rotate(var(--pfv-rot-tape, 2deg)); box-shadow: 0 .08em .2em rgba(0,0,0,.16); }
.pfa__postit small { font-size: .56em; font-weight: 900; letter-spacing: .13em; }
.pfa__postit .pfa__head { margin: .32em 0 .28em; color: #291d13; font-size: 1.8em; text-shadow: none; }
.pfa__postit > span:last-child { font-size: .68em; font-weight: 750; letter-spacing: .06em; }
.pfa--moodboard .pfa__moodStickers { position: absolute; right: 5%; bottom: 8%; }

/* 4 · Postal: papel rato quente, camada azul, fita e carimbo em profundidade */
.pfr--postcard {
  background:
    linear-gradient(135deg, transparent 0 96%, rgba(0,0,0,.08) 96%),
    repeating-linear-gradient(0deg, rgba(40,47,52,.025) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, var(--pfv-paper, #d9d4c9), var(--pfv-soft, #bfc6c4));
}
.pfr--postcard::before { content: ''; position: absolute; inset: 2.2% 1.3% 1.3% 2.2%;
  background: var(--pfv-blue, #79c9ff); transform: rotate(1.1deg); box-shadow: 0 .4em .9em rgba(0,0,0,.32); }
.pfr--postcard::after { content: ''; position: absolute; inset: 2.8%; background: var(--pfv-paper, #f4eddf);
  box-shadow: inset 0 0 0 .08em rgba(69,62,48,.11); }
.pfr--postcard .pfr__photo, .pfr--postcard .pfr__art { z-index: 2; }
.pfr--postcard .pfr__photo { border: .12em solid #f9f4ea; border-radius: .18em;
  box-shadow: 0 .28em .65em rgba(0,0,0,.28); }
.pfa--postcard { inset: 0; display: block; color: var(--pfr-ink); }
.pfa__pcTape { position: absolute; left: 33%; top: 2.2%; transform: rotate(-2deg); }
.pfa__pcStickers { position: absolute; right: 6%; top: 4%; }
.pfa__pcHead { position: absolute; left: 6%; right: 6%; top: 75%; }
.pfa__pcHead .pfa__head { color: #6f7678; }
.pfa__pcHead .pfa__head b { color: var(--pfr-ink); text-shadow: .06em .06em 0 var(--pfv-blue-a, rgba(121,201,255,.65)); }
.pfa__pcFoot { position: absolute; left: 6%; right: 6%; bottom: 4.5%; border-color: rgba(35,52,57,.22); }
.pfa__postmark { position: absolute; right: 14%; bottom: 13%; width: 5.2em; height: 2.3em;
  border-top: .09em solid rgba(40,52,57,.28); border-bottom: .09em solid rgba(40,52,57,.28);
  transform: rotate(-7deg); opacity: .72; }
.pfa__postmark::before, .pfa__postmark::after { content: ''; position: absolute; left: 0; right: 0;
  height: .08em; background: rgba(40,52,57,.28); }
.pfa__postmark::before { top: .65em; } .pfa__postmark::after { bottom: .65em; }

/* 5 · Love: polaroid ameixa/coral, sem branco plano */
.pfr--love {
  background:
    radial-gradient(circle at 90% 15%, var(--pfv-accent-a, rgba(255,224,120,.32)), transparent 24%),
    linear-gradient(145deg, var(--pfv-violet-dark, #782f58), var(--pfv-coral-dark, #d64d64) 56%, var(--pfv-coral-light, #ff876c));
  color: #fff;
}
.pfr--love::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0 .08em, transparent .09em) 0 0 / .65em .65em;
  opacity: .42; }
.pfr--love .pfr__photo { border: .16em solid rgba(255,255,255,.94);
  box-shadow: 0 .4em .9em rgba(46,12,31,.48); transform: rotate(-.45deg); }
.pfa--polaroid-love .pfa__pgFoot { color: #fff; }
.pfa--polaroid-love .pfa__pgFoot > small { font-size: .56em; font-weight: 900;
  letter-spacing: .14em; color: var(--pfv-accent-light, #ffd974); }
.pfa--polaroid-love .pfa__pgFoot .pfa__head { color: #fff; font-size: 1.65em; }
.pfa__polaroidTape { position: absolute; left: 34%; top: 2.2%; width: 30%; height: 1.1em;
  background: var(--pfv-soft, rgba(197,229,211,.82)); transform: rotate(var(--pfv-rot-tape, 1.5deg));
  box-shadow: 0 .1em .25em rgba(0,0,0,.18); clip-path: polygon(2% 7%, 97% 0, 100% 89%, 3% 100%); }
.pfa__loveSpark { position: absolute; left: 2.5%; top: 64%; }

/* 6 · Smile: amarelo quente com halftone, coral e um post-it de dados */
.pfr--smile {
  background:
    radial-gradient(circle at 86% 82%, var(--pfv-coral, #ff8b4d) 0 13%, transparent 13.5%),
    radial-gradient(circle, rgba(56,37,0,.14) 0 .08em, transparent .09em) 0 0 / .58em .58em,
    linear-gradient(145deg, var(--pfv-accent-light, #ffd946), var(--pfv-accent-dark, #f5b800));
}
.pfr--smile .pfr__photo { border: .14em solid #fff4bd;
  box-shadow: .3em .38em 0 var(--pfv-coral, #ff6a59), 0 .55em 1em rgba(87,51,0,.38); transform: rotate(.5deg); }
.pfa__polaroidTape--coral { background: var(--pfv-coral, rgba(255,102,92,.9)); transform: rotate(var(--pfv-rot-tape, -2deg)); }
.pfa__smileBolt { position: absolute; left: 2.5%; top: 63%; }
.pfr--smile .pfa__pgFoot .pfa__head { font-size: 1.72em; color: #2d2400; }
.pfa__smileMeta { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.pfa__smileMeta > span { font-size: .64em; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.pfa__smileMeta .pfw--temp { transform: rotate(2deg); }

/* 7 · Here & Now: dashboard fotográfico, vidro e dados locais */
.pfr--hereNow { background: linear-gradient(145deg, var(--pfv-blue, #79c9ff), var(--pfv-mint, #9ce7cb)); }
.pfr--hereNow .pfr__art::before { background: none; }
.pfr--hereNow .pfr__photo { border-radius: .22em; box-shadow: inset 0 0 0 .08em rgba(255,255,255,.42); }
.pfa--liveboard { inset: 0; }
.pfa--liveboard::before { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--pfv-violet-a, rgba(73,71,145,.38)), transparent 34%, transparent 56%, var(--pfv-blue-a, rgba(42,116,137,.54))),
    radial-gradient(circle at 85% 82%, var(--pfv-accent-a, rgba(250,194,0,.28)), transparent 28%); }
.pfa__liveTop { position: absolute; left: 6%; right: 6%; top: 5%; display: flex;
  align-items: center; }
.pfa__liveTop .pfa__mark { position: static; font-size: .65em; }
.pfa__livePlace { position: absolute; left: 6%; bottom: 23%; display: grid; color: #fff; }
.pfa__livePlace small { font-size: .56em; font-weight: 900; letter-spacing: .18em; color: var(--pfr-accent); }
.pfa__livePlace b { max-width: 11em; font-family: var(--ds-font-display), sans-serif;
  font-size: 1.65em; line-height: .9; text-transform: uppercase; }
.pfa__livePlace span { margin-top: .2em; font-size: .68em; font-weight: 700; opacity: .78; }
.pfa__liveDock { position: absolute; left: 5%; right: 5%; bottom: 5%; display: flex; align-items: stretch; gap: .38em; }
.pfa__liveDock .pfw { flex: 0 1 auto; }
.pfa__liveStickers { position: absolute; right: 5%; bottom: 22%; }

/* 8 · Reaction: cartão editorial luminoso, mensagem curta e reações positivas */
.pfr--reaction { background: linear-gradient(145deg, var(--pfv-mint, #9ce7cb), var(--pfv-blue, #79c9ff)); }
.pfr--reaction .pfr__photo { box-shadow: inset 0 -.28em .7em rgba(73,71,145,.22); }
.pfa--card { inset: 62% 0 0; padding: .9em 1em .75em; gap: .35em;
  background:
    radial-gradient(circle at 88% 16%, var(--pfv-coral-a, rgba(255,102,92,.44)), transparent 28%),
    linear-gradient(135deg, var(--pfv-mint, #a9ead1), var(--pfv-blue, #82d1ff)); color: var(--pfr-ink); }
.pfa__cardTape { position: absolute; right: 5%; top: -.58em; padding: .44em .85em;
  background: var(--pfv-accent-light, #ffe06a); color: var(--pfr-ink); font-size: .55em; font-weight: 900; letter-spacing: .12em;
  transform: rotate(var(--pfv-rot-tape, 2deg)); box-shadow: 0 .12em .3em rgba(0,0,0,.25); }
.pfa--card .pfa__cardTop { position: absolute; right: 5%; top: 1em; gap: .22em; }
.pfa--card .pfa__head { max-width: 60%; color: var(--pfr-ink); font-size: 1.6em;
  text-shadow: .06em .06em 0 rgba(255,255,255,.82); }
.pfa--card .pfa__grid { width: 66%; grid-template-columns: 1fr 1fr; gap: .25em .6em; }
.pfa--card .pfa__cell small { color: #3b6971; font-weight: 900; }
.pfa--card .pfa__cell b { color: var(--pfr-ink); font-weight: 850; }
.pfa--card .pfa__wordmark { right: 1em; top: auto; bottom: .8em; color: var(--pfr-accent);
  font-size: .48em; letter-spacing: .13em; }

/* Ajustes óticos específicos do formato, mantendo o mesmo conceito e dados. */
.pfr--r43 .pfa__seasonCopy { top: 10%; right: 34%; }
.pfr--r43 .pfa__seasonCopy .pfa__head { font-size: 2em; max-width: 10em; }
.pfr--r43 .pfa__sprayTag { font-size: 2.25em; }
.pfr--r43 .pfa__spray { bottom: 9%; }
.pfr--r43 .pfa__postit--mood { width: 48%; min-height: 32%; bottom: 8%; }
.pfr--r43 .pfa__moodStickers { right: 5%; bottom: 9%; }
.pfr--r43 .pfa__pcHead { top: 74%; }
.pfr--r43 .pfa__pgFoot { top: 73%; }
.pfr--r43 .pfa__livePlace { bottom: 27%; }
.pfr--r43 .pfa--card { display: grid; grid-template-columns: 1fr 1.12fr; grid-template-rows: 1fr;
  align-items: center; padding: .72em 1em; }
.pfr--r43 .pfa--card .pfa__head { max-width: none; grid-column: 1; font-size: 1.55em; }
.pfr--r43 .pfa--card .pfa__grid { width: auto; grid-column: 2; grid-row: 1;
  grid-template-columns: 1fr 1fr; margin: 0 4.8em 0 .8em; }
.pfr--r43 .pfa--card .pfa__cardTop { top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .pfr *, .pfr *::before, .pfr *::after { animation-duration: 1ms !important; }
}