/* Sistema de design BUENO. — tema Vermelho (2026-11-14): cartaz vermelho embrulhado em plástico, com stickers de foil.
   Os nomes dos tokens são os do sistema, mas os papéis mudaram: --paper é o fundo vermelho e --ink é a letra creme.
   O tema Papel anterior está guardado em 04_PRODUCAO/site-versoes/. */
:root {
  --paper: #c8200f;
  --paper-deep: #a81a0c;
  --ink: #efeae0;
  --ink-muted: #f3c4bc;
  --red: #121212;        /* cor de destaque no hover de blocos: no fundo vermelho, o destaque é preto */
  --red-text: #c8200f;   /* hover de texto em cima de sticker claro */
  --on-red: #efeae0;
  --line: rgba(239, 234, 224, 0.38);
  --focus: #efeae0;
  /* stickers: tinta, borda perolada, foil e sombra */
  --sticker-ink: rgba(18, 18, 18, 0.8);   /* tinta levemente transparente: o foil aparece por baixo das letras */
  --sticker-edge: #f7f4ef;
  --foil-img: url("img/BUENO_IMG_foil-bolha_v02.jpg");
  --foil-bg: var(--foil-img) 30% 40% / 520px;
  --wear-edge: url("img/BUENO_IMG_desgaste-borda_v01.png");      /* lascas e pontinhos nas bordas, esticado no sticker */
  --wear-scratch: url("img/BUENO_IMG_desgaste-riscos_v01.png");  /* riscos soltos, em ladrilho */
  --grain-opacity: 0.08;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 56px; --space-7: 96px;
  --gutter: clamp(16px, 4vw, 56px);
  --font-display: Anton, Impact, "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", Courier, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body, .site-header { background-color: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -40px;
  background: var(--ink); color: var(--paper); padding: 4px 8px; z-index: 50;
}
.skip:focus { top: 8px; }

/* Rótulo em caixa alta (estilo `label` do sistema) */
.nav a, .section-label, .region, .role, .play-label, .player-close, .site-footer {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) var(--gutter);
}
/* o cabeçalho tem a sua própria faixa de plástico (brilho + sombra); a logo pequena fica embaixo dela e os textos por cima */
.site-header { overflow-x: clip; }
.site-header::before, .site-header::after {
  content: ""; position: absolute; inset: 0 -60px; pointer-events: none;
  /* recorte da textura com dobras à esquerda que passam acima e abaixo da logo pequena, sem cruzar as letras */
  background: url("img/BUENO_IMG_plastico-fundo_v01.jpg") -200px 46.2% / 1000px auto;
}
.site-header::before { mix-blend-mode: multiply; filter: invert(1); opacity: 0.22; background-position: -196px calc(46.2% + 5px); }
.site-header::after { mix-blend-mode: screen; opacity: 0.9; }
/* os textos ficam por cima do plástico, sobre uma mancha suave da cor do fundo que apaga o reflexo atrás das letras */
.role, .nav {
  position: relative; z-index: 1; border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  box-shadow: 0 0 9px 7px color-mix(in srgb, var(--paper) 86%, transparent);
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.role { color: var(--ink-muted); }
.logo-small { display: block; }
.logo-small img { display: block; height: 28px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.nav a:hover, .nav a:focus-visible { color: #121212; text-decoration: underline; text-underline-offset: 4px; }

/* Plástico: uma folha de filme plástico cobre o papel e a logo grande, do topo ao fim da página.
   São duas camadas com a mesma textura: o brilho (screen) e a sombra das dobras (a textura invertida, em multiply).
   Ordem das camadas: papel e logo < plástico (z 1) < sticker, filmes, textos, retrato e rodapé (z 2) < header < grão. */
/* as camadas de plástico passam 60px de cada lado da janela e o corte lateral fica no body: assim a borda da textura nunca cai dentro da tela */
body { position: relative; overflow-x: clip; }
/* o fundo da própria janela (fora do body: borda elástica da rolagem, sobras de zoom) também leva papel + plástico,
   para nunca aparecer uma faixa lisa nos cantos */
html {
  overflow-x: clip;
  background: var(--paper) url("img/BUENO_IMG_plastico-fundo_v01.jpg") top center / max(100%, 1200px) auto repeat;
  background-blend-mode: screen;
}
.plastic {
  position: absolute; inset: 0 -60px; z-index: 1; pointer-events: none;
  background: url("img/BUENO_IMG_plastico-fundo_v01.jpg") top center / max(100%, 1200px) auto repeat;
}
.plastic-shine { mix-blend-mode: screen; opacity: 0.9; }
.plastic-shadow { mix-blend-mode: multiply; filter: invert(1); opacity: 0.22; background-position: calc(50% + 5px) 7px; }
.work, .contact, .site-footer { position: relative; z-index: 2; }
.bio-portrait img { position: relative; z-index: 2; }

/* Abertura: a logo grande */
.intro { padding: var(--space-6) var(--gutter) 0; overflow-x: clip; }
.intro-title { margin: 0; }
/* logo grande, parada (o E caído no hover saiu em 2026-11-14); a moldura serve de âncora para o sticker */
.logo-swap { position: relative; display: block; width: min(100%, 880px); }
.logo-swap .logo-main { display: block; width: 100%; height: auto; }
/* sticker holográfico da carinha, colado no canto do O; a posição e o tamanho acompanham a largura da logo */
.logo-sticker { position: absolute; left: 79%; top: -7%; width: 27%; height: auto; z-index: 2; transform: rotate(9deg); filter: drop-shadow(0 6px 10px rgba(18, 18, 18, 0.28)); pointer-events: none; }

/* Trabalhos */
.work { padding: var(--space-6) var(--gutter) 0; }
.film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
.film-link {
  display: block; width: 100%; text-align: left;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.film-still { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-deep); }
.film-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-label {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: var(--paper);
  padding: 6px 10px;
}
.film-link:hover .play-label, .film-link:focus-visible .play-label { background: var(--red); color: var(--on-red); }
.film-meta { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); }
.film-caption {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1; letter-spacing: 0.01em;
  text-wrap: balance;
}
.film-link:hover .film-caption, .film-link:focus-visible .film-caption { color: var(--red-text); }
.film-credit { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }

.divider { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) var(--gutter) 0; }

/* Bio: retrato que troca de cara + texto */
/* Bio: foto e texto se sobrepõem numa grade de 12 colunas; o texto entra no espaço vazio à direita da figura */
.bio {
  padding: var(--space-7) var(--gutter) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-4); align-items: center;
  container-type: inline-size;
  /* largura da foto (6 de 12 colunas) e onde começa o boné nela (16,75% da largura, medido na imagem) */
  --photo-w: calc((100cqw - 11 * var(--space-4)) / 2 + 5 * var(--space-4));
  --head-top: calc(var(--photo-w) * 0.1675);
}
.bio-portrait {
  grid-column: 1 / span 6; grid-row: 1;
  /* recorte no meio do peito: a foto termina seca e a próxima seção já entra */
  display: block; width: 100%; aspect-ratio: 6 / 5; overflow: hidden;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
/* o papel da foto é branco puro: em multiply ele some e sobra só a tinta e o vermelho */
.bio-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: multiply; }
.bio-body {
  grid-column: 6 / span 7; grid-row: 1; position: relative; z-index: 2;
  /* o texto vai do topo da cabeça até o corte da foto: o rótulo fica acima, fora da conta */
  align-self: stretch; padding-top: var(--head-top); padding-left: var(--space-5);
  display: flex; flex-direction: column; min-width: 0;
  pointer-events: none;
}
.bio-body .section-label { position: absolute; top: calc(var(--head-top) - var(--space-5)); left: var(--space-5); }
.bio-body .bio-text { flex: 1; display: flex; flex-direction: column; font-size: clamp(13px, calc(var(--photo-w) * 0.0245), 16px); }
.bio-body .bio-text p:first-child { font-size: clamp(18px, calc(var(--photo-w) * 0.042), 35px); }
.bio-portrait { align-self: end; }
.bio-body .bio-text p:first-child { margin-top: -0.22em; }
.bio-body .bio-text p:last-child { margin-top: auto; padding-top: 1em; margin-bottom: 0; }
.bio-body { padding-bottom: var(--space-5); align-self: stretch; overflow: visible; }
.bio-body > * { flex-shrink: 0; }
.bio-body a { pointer-events: auto; }
.section-label { margin: 0; color: var(--ink-muted); }
.bio-text { max-width: 68ch; }
.bio-text p + p { margin-top: 1em; }
.bio-text p:first-child { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.35; max-width: 42ch; }

/* Representação */
/* o fio fica colado no corte da foto da bio: a foto "pousa" nele e a seção seguinte já começa */
.contact {
  margin: 0 var(--gutter); padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.reps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4) var(--space-5); }
.rep { display: flex; flex-direction: column; gap: var(--space-1); }
.region { color: var(--ink-muted); }
.reps a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.reps a:hover, .reps a:focus-visible { color: var(--red-text); text-decoration-color: currentColor; }

.site-footer { padding: var(--space-7) var(--gutter) var(--space-5); color: var(--ink-muted); }

/* Player: tema Tinta por cima da página */
.player {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18, 18, 18, .97); color: var(--ink);
  display: flex; flex-direction: column;
}
.player[hidden] { display: none; }
.player-bar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--gutter);
  font-family: var(--font-display); font-size: 24px; line-height: 1.05;
}
.player-close { background: none; border: 0; cursor: pointer; padding: 0; white-space: nowrap; font-family: var(--font-mono); color: var(--ink); }
.player-close:hover { text-decoration: underline; text-underline-offset: 4px; }
.player :focus-visible { outline-color: var(--ink); }
.player-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter) var(--gutter); min-height: 0;
}
.player-box { position: relative; width: 100%; max-height: 100%; }
.player-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

body.no-scroll { overflow: hidden; }

/* Grão leve e poeira de filme por cima de tudo (abaixo do player). Ficam presos à tela, como sujeira na lente. */
.grain, .dust {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 100;
}
.grain { opacity: var(--grain-opacity); }

/* abaixo disso o texto não cabe ao lado da cabeça: a bio empilha */
@media (max-width: 1150px) {
  .bio { row-gap: var(--space-4); }
  .bio-portrait { grid-column: 1 / span 9; }
  .bio-body { grid-column: 1 / -1; grid-row: 2; padding: 0 0 var(--space-5); gap: var(--space-4); }
  .bio-body .section-label { position: static; }
  .bio-body .bio-text { font-size: 16px; }
  .bio-body .bio-text p:first-child { font-size: clamp(19px, 3vw, 24px); }
  .bio-body .bio-text p:first-child, .bio-body .bio-text p:last-child { margin-top: 0; margin-bottom: 0; }
  .bio-body .bio-text p:last-child { padding-top: 0; margin-top: 1em; }
}

@media (max-width: 720px) {
  .logo-small img { height: 22px; }
  .film-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .film-caption { font-size: 24px; }
  .bio { padding-top: var(--space-6); row-gap: var(--space-4); }
  .bio-portrait { grid-column: 1 / -1; }
  .bio-body { grid-column: 1 / -1; grid-row: 2; padding: 0; gap: var(--space-4); }
  .bio-body .section-label { position: static; }
  .bio-body .bio-text p:first-child, .bio-body .bio-text p:last-child { margin-top: 0; margin-bottom: 0; }
  .bio-body .bio-text p:last-child { padding-top: 0; margin-top: 1em; }
  .contact { padding-top: var(--space-5); }
  .divider { margin-top: var(--space-6); }
  .intro { padding-top: var(--space-5); }
  .work { padding-top: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================================================
   STICKERS (2026-11-14). Tudo o que é informação fica num adesivo colado por cima do plástico:
   foil holográfico para texto, foto para os frames. Cantos retos, borda perolada, desgaste, e
   erros de colagem em alguns. O texto é HTML; a lista de filmes fica no main.js.
   Cada sticker vive dentro de uma moldura .stk-wrap, que leva a sombra e a inclinação: assim a
   sombra acompanha os cantos cortados (descolado, rasgado).
   Não há brilho animado: o usuário pediu para tirar.
   ============================================================================================ */
.hollow { color: transparent; -webkit-text-stroke: .65px var(--sticker-ink); }   /* informação secundária: só contorno */
/* linha pequena da borda do sticker: Anton bem espaçada, um item em cada ponta */
.edge {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.6em; margin: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 10.5px; line-height: 1.2;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sticker-ink);
}
.stk-wrap { display: block; position: relative; width: fit-content; max-width: 100%; filter: drop-shadow(0 2px 4px rgba(70, 0, 0, .42)); }
.film-meta, .bio-text, .contact {
  position: relative; overflow: hidden; color: var(--sticker-ink);
  border: 2px solid var(--sticker-edge); border-radius: 0; background: var(--foil-bg); box-shadow: none;
}
/* desgaste por cima do foil e das letras; --wear é a intensidade, --wx/--wy o trecho dos riscos */
.film-meta::before, .bio-text::before, .contact::before, #player-title::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--wear-edge) 0 0 / 100% 100% no-repeat, var(--wear-scratch) var(--wx, 20%) var(--wy, 30%) / 420px;
  opacity: var(--wear, .5);
}

/* --- Filme: sticker de texto --- */
.film-link > .stk-wrap:last-child { margin-top: 12px; }
.film-meta { display: flex; flex-direction: column; width: auto; margin: 0; padding: .5em .7em .55em; gap: .32em; }
.film-caption { text-transform: uppercase; font-size: clamp(15px, 1.75vw, 21px); line-height: .98; }
.film-credit { color: var(--sticker-ink); }
.film-card:nth-child(odd) .film-link > .stk-wrap:last-child { transform: rotate(-.8deg); }
.film-card:nth-child(even) .film-link > .stk-wrap:last-child { transform: rotate(.6deg); }
.film-card:nth-child(odd) .film-meta { background-position: 15% 25%; --wx: 70%; --wy: 10%; }
.film-card:nth-child(even) .film-meta { background-position: 75% 65%; --wx: 15%; --wy: 80%; }
.film-card:nth-child(3n) .film-meta { background-position: 45% 90%; --wx: 45%; --wy: 55%; }
/* erros de colagem em alguns stickers de texto (pela posição do filme na lista) */
.film-card:nth-child(2) .film-link > .stk-wrap:last-child { transform: rotate(1.2deg); }                       /* 2 e 8: canto descolado */
.film-card:nth-child(2) .film-meta, .film-card:nth-child(8) .film-meta { clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%); }
.film-card:nth-child(2) .film-link > .stk-wrap:last-child::after, .film-card:nth-child(8) .film-link > .stk-wrap:last-child::after {
  content: ""; position: absolute; right: 0; top: 0; width: 15px; height: 15px;
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 49%, #b9b4ad 50%, #ece8e2 68%, #cfcac3 100%);
}
.film-card:nth-child(3) .film-link > .stk-wrap:last-child { transform: rotate(2.6deg) translate(6px, -16px); }  /* 3: torto, invadindo o frame */
.film-card:nth-child(5) .film-meta {                                                                           /* 5: canto rasgado, bem gasto */
  --wear: .95;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 13px 100%, 10px calc(100% - 3px), 7px calc(100% - 4px), 5px calc(100% - 9px), 2px calc(100% - 10px), 0 calc(100% - 14px));
}
.film-card:nth-child(6) .film-meta {                                                                           /* 6: vinco */
  background-image: linear-gradient(101deg, rgba(255, 255, 255, 0) calc(63% - 2px), rgba(255, 255, 255, .75) 63%, rgba(40, 0, 20, .16) calc(63% + 2px), rgba(255, 255, 255, 0) calc(63% + 5px)), var(--foil-img);
  background-size: auto, 520px; background-position: 0 0, 75% 65%;
}
.film-card:nth-child(8) .film-link > .stk-wrap:last-child { transform: rotate(-2.3deg) translateX(-4px); }
.film-card:nth-child(9) .film-meta { --wear: .9; }
.film-card:nth-child(11) .film-link > .stk-wrap:last-child { transform: rotate(1.9deg) translate(10px, -10px); }
.film-card:nth-child(11) .film-meta { --wear: .8; clip-path: polygon(0 0, calc(100% - 11px) 0, calc(100% - 8px) 4px, calc(100% - 3px) 5px, 100% 11px, 100% 100%, 0 100%); }
.film-card:nth-child(12) .film-meta {                                                                          /* 12: vinco */
  background-image: linear-gradient(78deg, rgba(255, 255, 255, 0) calc(28% - 2px), rgba(255, 255, 255, .7) 28%, rgba(40, 0, 20, .14) calc(28% + 2px), rgba(255, 255, 255, 0) calc(28% + 5px)), var(--foil-img);
  background-size: auto, 520px; background-position: 0 0, 15% 25%;
}

/* --- Filme: o frame também é um sticker, de foto em vez de foil --- */
.film-link > .stk-wrap:first-child { width: 100%; max-width: none; filter: drop-shadow(0 2px 5px rgba(70, 0, 0, .45)); }
.film-still { border: 4px solid var(--sticker-edge); }
.film-still::before {
  content: ""; position: absolute; inset: -4px; pointer-events: none; z-index: 1;
  background: var(--wear-edge) 0 0 / 100% 100% no-repeat, var(--wear-scratch) var(--wx, 20%) var(--wy, 30%) / 900px;
  opacity: var(--wear, .3);   /* riscos bem leves: é o trabalho que está por baixo */
}
.film-card:nth-child(odd) .film-link > .stk-wrap:first-child { transform: rotate(.4deg); }
.film-card:nth-child(even) .film-link > .stk-wrap:first-child { transform: rotate(-.35deg); }
.film-card:nth-child(even) .film-still { --wx: 75%; --wy: 60%; }
.film-card:nth-child(3n) .film-still { --wx: 40%; --wy: 85%; --wear: .42; }
.film-card:nth-child(1) .film-still {                                                                          /* 1: canto rasgado */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 15px calc(100% - 5px), 10px calc(100% - 6px), 7px calc(100% - 13px), 3px calc(100% - 15px), 0 calc(100% - 21px));
}
.film-card:nth-child(4) .film-still, .film-card:nth-child(9) .film-still { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }   /* 4 e 9: canto descolado */
.film-card:nth-child(4) .film-link > .stk-wrap:first-child::after, .film-card:nth-child(9) .film-link > .stk-wrap:first-child::after {
  content: ""; position: absolute; right: 0; top: 0; width: 26px; height: 26px;
  background: linear-gradient(225deg, rgba(0, 0, 0, 0) 49%, #b9b4ad 50%, #ece8e2 68%, #cfcac3 100%);
}
.film-card:nth-child(7) .film-link > .stk-wrap:first-child { transform: rotate(-1.5deg); }                     /* 7 e 10: mais tortos */
.film-card:nth-child(10) .film-link > .stk-wrap:first-child { transform: rotate(1.2deg) translateX(3px); }

/* PLAY: só letra vazada, pequena, no canto do frame; enche no hover (o frame inteiro já é o botão) */
.play-label {
  left: 10px; bottom: 9px; padding: 0; border: 0; background: none; z-index: 3;
  font-family: var(--font-display); font-weight: 400; font-size: 10.5px; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: .65px #efeae0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.film-link:hover .play-label, .film-link:focus-visible .play-label { background: none; color: #efeae0; }

/* --- Bio: um cartão, em caixa alta, com o rótulo "BIO" no canto --- */
.bio-body .stk-wrap { transform: rotate(-.4deg); flex: 1; display: flex; width: auto; }
.bio-text { padding: 1.3em 1.5em 1.4em; border-width: 3px; background-size: 900px; display: flex; flex-direction: column; --wear: .45; --wx: 60%; --wy: 40%; }
.bio-body .bio-text .section-label, .bio-text .section-label { position: static; margin: 0 0 1.1em; align-self: stretch; }
.bio-text p { text-transform: uppercase; letter-spacing: .03em; }
.bio-body .bio-text p:first-of-type { font-size: clamp(17px, 2vw, 24px); line-height: 1.3; max-width: 42ch; margin-top: 0; }

/* --- Rodapé da página: representação (um sticker só) ao lado do saquinho de stickers --- */
.foot-row {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: var(--space-5); margin: var(--space-6) var(--gutter) 0;
}
.foot-row > .stk-wrap { transform: rotate(1.4deg); }
.contact {
  display: block; width: auto; max-width: none; margin: 0; padding: .8em 1em .85em;
  border: 3px solid var(--sticker-edge); background-size: 700px; background-position: 60% 80%;
  --wear: .75; --wx: 30%; --wy: 65%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 9px), calc(100% - 6px) calc(100% - 4px), calc(100% - 12px) 100%, 0 100%);   /* canto rasgado */
}
.contact .section-label { margin: 0 0 .9em; }
.section-label { color: var(--sticker-ink); }
.reps { display: flex; flex-wrap: wrap; gap: 1em 2.2em; }
.rep { display: flex; flex-direction: column; gap: .3em; }
.region { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .2em; color: transparent; -webkit-text-stroke: .65px var(--sticker-ink); }
.rep p:not(.region) { font-family: var(--font-display); font-size: clamp(14px, 1.5vw, 18px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.reps a { text-decoration: none; }
.site-footer p {
  display: inline-block; position: relative; overflow: hidden; color: var(--sticker-ink); padding: .28em .7em;
  border: 2px solid var(--sticker-edge); background: var(--foil-bg); background-size: 300px;
  filter: drop-shadow(0 2px 4px rgba(70, 0, 0, .42));
}

/* Saquinho de stickers: stickers soltos embaixo (.s1 a .s8, na ordem do index.html) e o plástico com zíper por cima */
.bag {
  position: relative; flex: none; width: clamp(190px, 24vw, 280px); aspect-ratio: 1244 / 1760;
  transform: rotate(5deg); filter: drop-shadow(0 4px 8px rgba(60, 0, 0, .45));
}
.bag::before { content: ""; position: absolute; inset: 1% 2%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.bag img { position: absolute; display: block; height: auto; max-width: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.bag .bag-plastic { inset: 0; width: 100%; height: 100%; filter: none; z-index: 9; pointer-events: none; }
.bag .s1 { width: 76%; left: 9%; top: 14%; transform: rotate(-13deg); }
.bag .s2 { width: 50%; left: 43%; top: 21%; transform: rotate(9deg); }
.bag .s3 { width: 24%; left: 10%; top: 31%; transform: rotate(-20deg); z-index: 3; }
.bag .s4 { width: 47%; left: 6%; top: 41%; transform: rotate(-7deg); }
.bag .s5 { width: 27%; left: 64%; top: 40%; transform: rotate(13deg); }
.bag .s6 { width: 48%; left: 30%; top: 51%; transform: rotate(17deg); }
.bag .s7 { width: 72%; left: 13%; top: 67%; transform: rotate(5deg); }
.bag .s8 { width: 62%; left: 20%; top: 83%; transform: rotate(-4deg); }
@media (max-width: 720px) {
  .foot-row { flex-direction: column; align-items: flex-start; }
  .bag { align-self: center; width: 62vw; max-width: 260px; }
}

/* --- Player: título em sticker, CLOSE vazado; o fundo escuro passa das bordas da janela --- */
.player { box-shadow: 0 0 0 120px rgba(18, 18, 18, .97); }
.player-bar { align-items: center; }
#player-title {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .3em; margin: 0; padding: .5em .75em .55em;
  color: var(--sticker-ink); border: 2px solid var(--sticker-edge); background: var(--foil-bg); background-position: 55% 35%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); transform: rotate(-.8deg);
  font-size: clamp(17px, 2vw, 24px); line-height: .98; letter-spacing: .01em; text-transform: uppercase;
}
.player-close { font-family: var(--font-display); font-size: 15px; letter-spacing: .22em; color: transparent; -webkit-text-stroke: .8px #efeae0; }
.player-close:hover, .player-close:focus-visible { color: #efeae0; text-decoration: none; }

/* --- Bio: a foto é a bandeja "Produto Bueno", um objeto solto pousado por cima do plástico, ao lado do cartão de texto --- */
.bio { align-items: center; }
.bio-photo { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 2; display: flex; justify-content: center; }
.bio-photo img {
  display: block; width: min(100%, 400px); height: auto;
  transform: rotate(-4deg); filter: drop-shadow(0 10px 14px rgba(50, 0, 0, .5)) drop-shadow(0 2px 3px rgba(50, 0, 0, .45));
}
.bio-body { grid-column: 6 / span 7; align-self: center; padding: 0 0 0 var(--space-5); }
.bio-body .stk-wrap { flex: none; }
.bio-body .bio-text p:last-child { margin-top: 1em; padding-top: 0; }
@media (max-width: 1150px) {
  .bio-photo { grid-column: 1 / -1; }
  .bio-photo img { width: clamp(220px, 46vw, 360px); }
  .bio-body { grid-column: 1 / -1; grid-row: 2; padding: 0; }
}

/* --- Ajustes de leitura e uso (2026-11-14, a partir da revisão da skill de design); não mudam o visual no desktop --- */
/* contraste: "Film director" no cabeçalho usa o creme cheio (o rosado dava 3,7:1 no vermelho) */
.role { color: var(--ink); }
/* teclado: o foco aparece em volta do frame do filme, e o filme focado não fica escondido atrás do cabeçalho fixo */
.film-link { scroll-margin-top: 96px; }
.film-link:focus-visible { outline: none; }
.film-link:focus-visible > .stk-wrap:first-child { outline: 3px solid var(--focus); outline-offset: 5px; }
/* toque: links e logo com pelo menos 44px de altura em telas de toque */
@media (pointer: coarse) {
  .nav a, .logo-small, .reps a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Ajustes de composição (2026-11-14, da mesma revisão) --- */
/* espaços iguais entre as seções: filmes, bio e rodapé ficam à mesma distância (antes, filmes→bio tinha mais que o dobro) */
.divider { display: none; }
.bio { padding-top: var(--space-6); }
.site-footer { padding-top: var(--space-6); }
/* rodapé: a representação e o saquinho ficam juntos, em vez de um em cada ponta com um vazio no meio */
.foot-row { justify-content: flex-start; gap: var(--space-5) clamp(32px, 7vw, 110px); }