/* Pele "mesa de colagem" do app reels-13 (19/10/2026). Só aparência: nenhum seletor novo no HTML, nenhuma mudança de interação.
   Liga com <html class="pele pele-a|pele-b|pele-c">. a = discreta · b = mais mesa · c = mais filme.
   Luz fixa vinda de cima à esquerda (sombras caem pra baixo e pra direita). Grão parado no toque, vivo (24 q/s) com mouse.
   Texturas do kit: tapete de corte (molde/www/mesa/tapete.jpg), kraft e cartolina (papel/textures, CC0). */

html.pele{
  --mesa-escuro:.52;          /* quanto o tapete é escurecido (0 = tapete cru) */
  --mesa-luz:.14;             /* força da luz lateral */
  --mesa-vinheta:.55;         /* escurecimento das bordas */
  --mesa-grao:.07;            /* opacidade do grão */
  --mesa-grade:1;             /* 1 = grade do tapete visível */
  --mesa-sombra:1;            /* multiplicador das sombras dos objetos */
  --mesa-quente:0;            /* viragem quente/teal (só na c) */
  --papel:#161716;            /* superfície dos painéis */
  --papel-borda:rgba(255,255,255,.07);
  --raio:10px;
  /* o app continua lendo as variáveis de sempre */
  --panel:var(--papel);--janela:#111211;--card:#1b1c1a;--card-hi:#262724;
}
html.pele-a{--mesa-escuro:.66;--mesa-luz:.10;--mesa-vinheta:.45;--mesa-grao:.05;--mesa-sombra:.85}
html.pele-b{--mesa-escuro:.36;--mesa-luz:.09;--mesa-vinheta:.5;--mesa-grao:.06;--mesa-sombra:1.9;--papel:#b58f62;--papel-borda:rgba(255,255,255,.22);--janela:#a98457;--card:#c39b6c;--card-hi:#cfa87a}
html.pele-c{--mesa-escuro:.48;--mesa-luz:.11;--mesa-vinheta:.72;--mesa-grao:.12;--mesa-sombra:1.9;--mesa-quente:1;--papel:#15171a;--janela:#101215;--card:#1b1e22;--card-hi:#262a30}

html.pele body{background:#0b1113;position:relative;isolation:isolate}
/* a mesa: tapete + luz lateral + vinheta, fixos atrás de tudo (pseudo fixo em vez de background-attachment, que o iPhone não respeita) */
html.pele body::before{content:"";position:fixed;inset:-2px;z-index:-2;pointer-events:none;
  background:
    /* luz dura da esquerda com borda macia: um gume a 38 por cento, depois cai */
    linear-gradient(108deg, rgba(255,236,204,calc(var(--mesa-luz)*1.0)) 0%, rgba(255,236,204,calc(var(--mesa-luz)*.75)) 30%, rgba(255,236,204,calc(var(--mesa-luz)*.18)) 44%, rgba(0,0,0,0) 58%, rgba(0,4,8,calc(var(--mesa-vinheta)*.55)) 100%),
    /* vinheta */
    radial-gradient(ellipse 85% 70% at 38% 36%, rgba(0,0,0,0) 40%, rgba(0,2,4,var(--mesa-vinheta)) 100%),
    /* escurece o tapete pro vídeo mandar */
    linear-gradient(rgba(4,9,11,var(--mesa-escuro)), rgba(4,9,11,var(--mesa-escuro))),
    url(tapete.jpg) center top / cover no-repeat #10292d;
}
html.pele-c body::before{inset:0;background:
    /* luz da B: lateral, da esquerda, contida (sem clarão) */
    linear-gradient(108deg, rgba(255,236,204,.11) 0%, rgba(255,236,204,.08) 18%, rgba(255,236,204,.03) 32%, rgba(0,0,0,0) 46%, rgba(0,4,8,.4) 100%),
    /* vinheta funda da C */
    radial-gradient(ellipse 78% 62% at 36% 34%, rgba(0,0,0,0) 30%, rgba(0,2,6,.8) 100%),
    linear-gradient(rgba(5,9,5,.48), rgba(5,9,5,.48)),
    /* tapete largo e contínuo: o app vê o primeiro terço; a mesa da "nova ideia" e o vão usam o resto (ver #mundo) */
    url(tapete-largo.jpg) left top / 360vw auto no-repeat #1b2a14;
  filter:saturate(.92) contrast(1.05)}
/* c: halo quente nos brancos do vídeo (halation da receita) e topo mais transparente */
html.pele-c .tela, html.pele-c .cel .q{box-shadow:4px 5px 7px rgba(0,0,0,.55), 22px 34px 60px -10px rgba(0,0,0,.85), 0 0 70px -10px rgba(255,120,60,.14), 0 0 0 1px rgba(0,0,0,.7)}
@media (min-width:700px){html.pele-c .fc-box{box-shadow:4px 5px 7px rgba(0,0,0,.55), 24px 36px 64px -10px rgba(0,0,0,.88), 0 0 70px -10px rgba(255,120,60,.14), 0 0 0 1px rgba(0,0,0,.7)}}
html.pele-c .top{background:transparent}
/* c: sombras com corpo (três camadas) e espessura nas bordas */
html.pele-c .insp, html.pele-c .ctl, html.pele-c .fila .fr, html.pele-c .item, html.pele-c .prod .pc, html.pele-c .m.gabriel .b{
  box-shadow:2px 3px 4px rgba(0,0,0,.55), 14px 22px 36px -6px rgba(0,0,0,.72), 30px 48px 80px -18px rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.09), inset -2px -2px 0 rgba(0,0,0,.45)}
html.pele-c .fc-rail .bt{box-shadow:2px 3px 4px rgba(0,0,0,.5), 8px 12px 20px -3px rgba(0,0,0,.62), inset 1px 1px 0 rgba(255,255,255,.1)}
html.pele-c .tela, html.pele-c .cel .q{box-shadow:4px 5px 7px rgba(0,0,0,.6), 22px 34px 60px -8px rgba(0,0,0,.88), 44px 70px 110px -30px rgba(0,0,0,.65), 0 0 70px -10px rgba(255,120,60,.12), 0 0 0 1px rgba(0,0,0,.7)}
@media (min-width:700px){html.pele-c .fc-box{box-shadow:4px 5px 7px rgba(0,0,0,.6), 24px 36px 64px -8px rgba(0,0,0,.88), 44px 70px 110px -30px rgba(0,0,0,.65), 0 0 70px -10px rgba(255,120,60,.12), 0 0 0 1px rgba(0,0,0,.7)}}
html.pele-c button:not(.quiet){box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 2px 3px 5px rgba(0,0,0,.4)}
/* grão por cima de tudo (overlay sobre cinza médio = só textura, sem clarear) */
html.pele body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--mesa-grao);mix-blend-mode:overlay;
  background:url(grao.png) 0 0 / 256px 256px repeat}
@media (hover:hover) and (pointer:fine){
  html.pele body::after{background-image:url(grao-folha.png);background-size:1024px 1024px;animation:mesa-grao .666s steps(1) infinite}
}
@media (prefers-reduced-motion:reduce){html.pele body::after{animation:none}}
@keyframes mesa-grao{0%{background-position:0 0}6.25%{background-position:-256px 0}12.5%{background-position:-512px 0}18.75%{background-position:-768px 0}25%{background-position:0 -256px}31.25%{background-position:-256px -256px}37.5%{background-position:-512px -256px}43.75%{background-position:-768px -256px}50%{background-position:0 -512px}56.25%{background-position:-256px -512px}62.5%{background-position:-512px -512px}68.75%{background-position:-768px -512px}75%{background-position:0 -768px}81.25%{background-position:-256px -768px}87.5%{background-position:-512px -768px}93.75%{background-position:-768px -768px}}

/* ---------- objetos apoiados na mesa: sombra com penumbra (perto escura e dura, longe larga e macia) + espessura ---------- */
html.pele .insp, html.pele .ctl, html.pele .fila .fr, html.pele .item, html.pele .prod .pc, html.pele pre.leg, html.pele .m.gabriel .b{
  background-color:var(--papel);
  background-image:url(fibra.jpg);background-size:256px 256px;background-blend-mode:soft-light;
  box-shadow:
    calc(2px*var(--mesa-sombra)) calc(3px*var(--mesa-sombra)) 4px rgba(0,0,0,.38),
    calc(10px*var(--mesa-sombra)) calc(16px*var(--mesa-sombra)) calc(30px*var(--mesa-sombra)) calc(-6px*var(--mesa-sombra)) rgba(0,0,0,.62),
    inset 1px 1px 0 var(--papel-borda), inset -1px -1px 0 rgba(0,0,0,.35);
  border-radius:var(--raio);
}
html.pele .insp{background-color:var(--papel)}
html.pele .ctl{border-radius:999px;background-size:200px 200px}
html.pele pre.leg{box-shadow:inset 1px 1px 0 var(--papel-borda), inset -1px -1px 0 rgba(0,0,0,.35), 1px 2px 3px rgba(0,0,0,.3)}
/* o vídeo: objeto mais pesado da mesa, sombra mais funda; nunca ganha textura */
html.pele .tela, html.pele .cel .q, html.pele .cmp .tela{
  box-shadow:
    calc(3px*var(--mesa-sombra)) calc(4px*var(--mesa-sombra)) 6px rgba(0,0,0,.5),
    calc(16px*var(--mesa-sombra)) calc(24px*var(--mesa-sombra)) calc(46px*var(--mesa-sombra)) calc(-8px*var(--mesa-sombra)) rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.6);
  border-radius:8px}
@media (min-width:700px){html.pele .fc-box{box-shadow:calc(3px*var(--mesa-sombra)) calc(4px*var(--mesa-sombra)) 6px rgba(0,0,0,.5), calc(18px*var(--mesa-sombra)) calc(26px*var(--mesa-sombra)) calc(50px*var(--mesa-sombra)) calc(-8px*var(--mesa-sombra)) rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.6)}}
@media (max-width:699px){html.pele .fc{padding:6px 8px 8px}html.pele .fc-box{border-radius:10px;box-shadow:2px 3px 5px rgba(0,0,0,.45), 10px 16px 30px -6px rgba(0,0,0,.7)}}
/* botões da coluna do feed: discos apoiados */
html.pele .fc-rail .bt{background:var(--papel);background-image:url(fibra.jpg);background-size:128px;background-blend-mode:soft-light;box-shadow:1px 2px 3px rgba(0,0,0,.45), 5px 8px 14px -3px rgba(0,0,0,.55), inset 1px 1px 0 var(--papel-borda)}
html.pele .fc-rail a:hover .bt, html.pele .fc-rail button:hover .bt{background-color:var(--card-hi)}
@media (max-width:699px){html.pele .fc-rail .bt{background-color:rgba(10,12,12,.55);background-image:none;box-shadow:1px 2px 4px rgba(0,0,0,.5)}}
/* botões comuns: chips com leve espessura */
html.pele button{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 1px 2px 3px rgba(0,0,0,.28)}
html.pele button.quiet{box-shadow:none}
html.pele button.on, html.pele button.primary{box-shadow:1px 2px 3px rgba(0,0,0,.35), 4px 6px 12px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25)}
html.pele-c button.on{box-shadow:1px 2px 3px rgba(0,0,0,.35), 4px 6px 12px -3px rgba(0,0,0,.5), 0 0 18px rgba(157,179,76,.28), inset 0 1px 0 rgba(255,255,255,.25)}
/* topo: faixa de vidro escuro sobre a mesa, sem bloco chapado */
html.pele .top{background:transparent}
html.pele .barra{background-color:rgba(13,13,13,.94);box-shadow:2px 3px 4px rgba(0,0,0,.5), 10px 16px 30px -6px rgba(0,0,0,.62), inset 1px 1px 0 rgba(255,255,255,.07)}
html.pele .inicio .linha, html.pele .inicio .console{box-shadow:2px 3px 4px rgba(0,0,0,.45), 10px 16px 30px -6px rgba(0,0,0,.55)}
html.pele .inicio .mon{box-shadow:2px 3px 4px rgba(0,0,0,.5), 8px 12px 22px -4px rgba(0,0,0,.6)}
html.pele .fila .fr{border-color:transparent}
html.pele .fila .fr .bar{background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
html.pele .prod .bar{background:rgba(0,0,0,.35)}
html.pele .item textarea{background:rgba(0,0,0,.22);box-shadow:inset 1px 1px 3px rgba(0,0,0,.45)}
html.pele .scrub .trilho{background:rgba(0,0,0,.45);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
html.pele .scrub .cab{box-shadow:1px 2px 3px rgba(0,0,0,.5)}
html.pele .toast{box-shadow:2px 4px 10px rgba(0,0,0,.5)}
html.pele .feed-pos i{box-shadow:0 1px 2px rgba(0,0,0,.6)}
html.pele .fc-dica, html.pele .fc-som{backdrop-filter:blur(6px)}
/* página do reel no celular: o painel de pedidos vira um cartão apoiado abaixo do vídeo */
@media (max-width:979px){html.pele .insp{padding:14px;background-color:var(--papel)}}

/* ---------- b · mais mesa: painéis de kraft com tinta escura ---------- */
html.pele-b .insp, html.pele-b .fila .fr, html.pele-b .item, html.pele-b .prod .pc, html.pele-b pre.leg, html.pele-b .ctl, html.pele-b .m.gabriel .b{
  background-image:url(kraft.jpg);background-size:384px 384px;background-blend-mode:multiply;background-color:#d8b589;
  --text:#1d1711;--muted:#4a3a28;--fill-1:rgba(40,25,10,.10);--fill-2:rgba(40,25,10,.18);--accent-bright:#5f7322;--accent:#4d5e1b;--accent-ink:#f3f0e4;--active-bg:rgba(95,115,34,.18);
  color:var(--text)}
html.pele-b .ctl{background-size:260px 260px}
html.pele-b .ctl .tempo, html.pele-b .status, html.pele-b .info, html.pele-b .lab, html.pele-b .muted{color:var(--muted)}
html.pele-b .info b{color:var(--text)}
html.pele-b .status.ok{color:#4d5e1b}
html.pele-b .item{background-color:#cfa97c}
html.pele-b .lab, html.pele-b .status, html.pele-b .info, html.pele-b .ctl .tempo, html.pele-b .chips button.velha{color:#4a3a28}
html.pele-b .insp button, html.pele-b .ctl button, html.pele-b .item button{color:#1d1711}
html.pele-b button.on, html.pele-b button.primary, html.pele-b .insp button.on, html.pele-b .ctl button.on{color:#f3f0e4}
html.pele-b .item textarea{background:rgba(255,255,255,.45);color:var(--text);box-shadow:inset 1px 1px 3px rgba(60,40,20,.35)}
html.pele-b pre.leg{background-color:#e2c9a2;color:var(--text)}
html.pele-b .scrub .trilho{background:rgba(60,40,20,.35)}html.pele-b .scrub .feito{background:#4d5e1b}html.pele-b .scrub .cab{background:#2a2117}
html.pele-b .fila .fr .bar{background:rgba(60,40,20,.25)}html.pele-b .fila .fr .bar i{background:#5f7322}
html.pele-b .fila .fr.fila-pronto{color:#4d5e1b}
html.pele-b .fc-rail .bt{background-color:#cfa97c;background-image:url(kraft.jpg);background-size:200px;background-blend-mode:multiply;color:#2a2117}
@media (min-width:700px){html.pele-b .fc-rail a, html.pele-b .fc-rail button{color:var(--text)}}
html.pele-b button.on{background:#5f7322;color:#f3f0e4}
html.pele-b .chips button.velha{color:var(--muted)}
html.pele-b .tela .tt, html.pele-b .tela .dica{color:#fff}
html.pele-b body::before{background:
    linear-gradient(108deg, rgba(255,236,204,.09) 0%, rgba(255,236,204,.06) 18%, rgba(255,236,204,.02) 30%, rgba(0,0,0,0) 44%, rgba(0,4,8,.32) 100%),
    radial-gradient(ellipse 85% 70% at 38% 36%, rgba(0,0,0,0) 40%, rgba(0,2,4,.5) 100%),
    linear-gradient(rgba(6,10,6,.36), rgba(6,10,6,.36)),
    url(tapete-oliva.jpg) center top / cover no-repeat #1b2a14}
/* b: mais corpo nas sombras: terceira camada longa e espessura na borda de baixo */
html.pele-b .insp, html.pele-b .ctl, html.pele-b .fila .fr, html.pele-b .item, html.pele-b .prod .pc, html.pele-b .m.gabriel .b{
  box-shadow:
    2px 3px 4px rgba(0,0,0,.5),
    14px 22px 36px -6px rgba(0,0,0,.7),
    30px 48px 80px -18px rgba(0,0,0,.55),
    inset 1px 1px 0 rgba(255,255,255,.28), inset -2px -2px 0 rgba(60,35,10,.45)}
html.pele-b .fc-rail .bt{box-shadow:2px 3px 4px rgba(0,0,0,.5), 8px 12px 20px -3px rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(60,35,10,.4)}
html.pele-b .tela, html.pele-b .cel .q{box-shadow:4px 5px 7px rgba(0,0,0,.6), 22px 34px 60px -8px rgba(0,0,0,.85), 44px 70px 110px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.7)}
@media (min-width:700px){html.pele-b .fc-box{box-shadow:4px 5px 7px rgba(0,0,0,.6), 24px 36px 64px -8px rgba(0,0,0,.85), 44px 70px 110px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.7)}}
html.pele-b button:not(.quiet){box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 2px 3px 5px rgba(0,0,0,.35)}

/* ---------- página "nova ideia" (nova.html) em cima da mesma mesa ---------- */
html.pele .lista{background:transparent}
html.pele .conv.ativa{background:var(--active-bg);box-shadow:1px 2px 3px rgba(0,0,0,.35)}
html.pele .compor .cx{background-color:var(--papel);background-image:url(fibra.jpg);background-size:256px 256px;background-blend-mode:soft-light;
  box-shadow:2px 3px 4px rgba(0,0,0,.55), 14px 22px 36px -6px rgba(0,0,0,.72), 30px 48px 80px -18px rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.09), inset -2px -2px 0 rgba(0,0,0,.45)}
html.pele .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 2px 3px 5px rgba(0,0,0,.4)}
html.pele .pill.on, html.pele .pill.prim{box-shadow:1px 2px 3px rgba(0,0,0,.35), 4px 6px 12px -3px rgba(0,0,0,.5), 0 0 18px rgba(157,179,76,.22), inset 0 1px 0 rgba(255,255,255,.25)}
html.pele .vazio .preset.off{box-shadow:none}
html.pele .aviso{background-color:var(--papel);box-shadow:2px 3px 4px rgba(0,0,0,.55), 14px 22px 36px -6px rgba(0,0,0,.72)}
html.pele .m.ferramenta{border-left-color:rgba(157,179,76,.35)}

/* ---------- briefing: o cartão CAMINHO desenhado como proposta de motion designer ----------
   Uma folha de papel offset apoiada na mesa; gancho em letras de revista; planos como régua de tempo; fichas de música, voz e duração;
   amostras da paleta; fontes em pé de página; os dois botões (vai / muda) no rodapé. Dentro, a tinta é escura. */
.brief{--tinta:#1b1812;--tinta-2:#5a5245;--brief-raio:4px;margin:4px 0 18px;max-width:760px;color:var(--tinta);
  background:#f1ede4 url(offset.jpg) center/512px;background-blend-mode:multiply;border-radius:var(--brief-raio);
  box-shadow:2px 3px 4px rgba(0,0,0,.5), 16px 24px 40px -6px rgba(0,0,0,.72), 34px 54px 90px -18px rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.7), inset -2px -2px 0 rgba(90,70,40,.18);
  transform:rotate(-.35deg);transform-origin:50% 0;user-select:text;font-size:14px;line-height:1.45}
.brief > *{padding-left:22px;padding-right:22px}
.brief .cab{display:flex;align-items:baseline;gap:10px;padding-top:16px}
.brief .cab .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.brief .cab .k i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9db34c;margin-right:6px;vertical-align:1px}
.brief h2{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:4px 0 14px}
.brief .lab{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 6px}
.brief .sec{padding-top:10px;padding-bottom:10px}
/* gancho: letras de revista */
.brief .gancho{display:flex;flex-wrap:wrap;gap:3px 2px;align-items:flex-end;margin:0 0 4px}
.brief .gancho .ls{display:inline-block;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:26px;line-height:1;padding:5px 6px 3px;color:#141210;background:#fff;box-shadow:1px 1px 2px rgba(0,0,0,.35);border-radius:1px}
.brief .gancho .ls.esp{width:10px;background:transparent;box-shadow:none}
.brief .gancho .ls:nth-child(5n+1){background:#f2c230;transform:rotate(-3deg)}
.brief .gancho .ls:nth-child(5n+2){background:#2f8c4e;color:#f3f0e4;transform:rotate(2deg) translateY(1px)}
.brief .gancho .ls:nth-child(5n+3){background:#f6f1e6;font-family:"Host Grotesk",sans-serif;font-weight:800;transform:rotate(-1.5deg)}
.brief .gancho .ls:nth-child(5n+4){background:#c9a16a;transform:rotate(3deg) translateY(-1px)}
.brief .gancho .ls:nth-child(5n+5){background:#2b4b8a;color:#f3f0e4;font-family:"Host Grotesk",sans-serif;font-weight:800;transform:rotate(-2deg)}
.brief .gancho .ls:nth-child(7n+3){font-size:30px}
.brief .gancho-nota{font-size:12.5px;color:var(--tinta-2);margin-top:6px}
/* fala: locução */
.brief .fala{font-size:16px;line-height:1.5;font-style:italic;position:relative;padding-left:14px;border-left:3px solid #9db34c}
.brief .fala b{font-style:normal;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-right:4px}
.brief .fala-meta{font-size:12px;color:var(--tinta-2);margin-bottom:6px}
/* planos: régua de tempo */
.brief .planos{display:grid;gap:0;position:relative;margin:0;padding-left:0;list-style:none}
.brief .planos li{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:7px 0;border-top:1px dashed rgba(60,45,20,.25)}
.brief .planos li:first-child{border-top:0}
.brief .planos .n{width:26px;height:26px;border-radius:50%;background:#1b1812;color:#f3f0e4;font-size:12px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.brief .planos .deixa{font-weight:700}
.brief .planos .deixa::after{content:" ·"}
@media (min-width:700px){
  .brief .planos{grid-template-columns:repeat(4,1fr);gap:10px}
  .brief .planos li{grid-template-columns:1fr;border-top:0;border-left:2px solid rgba(60,45,20,.18);padding:2px 0 2px 10px;font-size:13px;line-height:1.4}
}
/* fichas: música, voz, duração, fechamento */
.brief .fichas{display:flex;flex-wrap:wrap;gap:8px}
.brief .ficha{display:inline-flex;flex-direction:column;gap:1px;padding:8px 12px;background:#fff;border-radius:3px;box-shadow:1px 2px 3px rgba(0,0,0,.25);max-width:100%;transform:rotate(.6deg)}
.brief .ficha:nth-child(2n){transform:rotate(-.8deg);background:#fbf7ec}
.brief .ficha .k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.brief .ficha .v{font-size:13px;line-height:1.35}
.brief .fecho{font-size:15px;font-weight:700;letter-spacing:.02em}
.brief .fecho span{display:inline-block;padding:2px 8px;background:#1b1812;color:#f3f0e4;border-radius:2px;margin:2px 4px 2px 0}
/* paleta */
.brief .paleta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.brief .paleta i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 1px 2px 3px rgba(0,0,0,.3);flex:none}
.brief .paleta span{font-size:12.5px;color:var(--tinta-2);margin-left:4px}
/* fotos e fontes: pé de página */
.brief .lista-p{margin:0;padding-left:0;list-style:none;font-size:12.5px;color:var(--tinta-2);line-height:1.45}
.brief .lista-p li{padding:3px 0;border-top:1px dotted rgba(60,45,20,.25)}
.brief .lista-p li:first-child{border-top:0}
.brief .lista-p li b{color:var(--tinta);font-weight:700;margin-right:6px;font-variant-numeric:tabular-nums}
.brief .lista-p a{color:inherit}
/* rodapé: responda */
.brief .rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;padding-bottom:18px;border-top:1px solid rgba(60,45,20,.2);margin-top:6px}
.brief .rodape .dica{flex:1 1 100%;font-size:12px;color:var(--tinta-2)}
.brief .bt{border:0;font:inherit;font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px;cursor:pointer;box-shadow:1px 2px 3px rgba(0,0,0,.35), 4px 6px 12px -3px rgba(0,0,0,.4)}
.brief .bt.vai{background:#4d5e1b;color:#f3f0e4}
.brief .bt.muda{background:#fff;color:var(--tinta)}
.brief .bt:active{transform:translateY(1px)}
.brief .bt:disabled{opacity:.45;cursor:default}
.brief .extra{font-size:12.5px;color:var(--tinta-2);white-space:pre-wrap}
@media (max-width:760px){.brief{transform:none;font-size:13.5px}.brief > *{padding-left:16px;padding-right:16px}.brief h2{font-size:22px}.brief .gancho .ls{font-size:22px}.brief .gancho .ls:nth-child(7n+3){font-size:25px}}
/* cartão com imagem e botões (postagem): foto apoiada sobre a folha */
.cartao{margin:4px 0 18px;max-width:560px;background:#f1ede4 url(offset.jpg) center/512px;background-blend-mode:multiply;border-radius:4px;padding:14px 16px 16px;color:#1b1812;
  box-shadow:2px 3px 4px rgba(0,0,0,.5), 16px 24px 40px -6px rgba(0,0,0,.72), 34px 54px 90px -18px rgba(0,0,0,.6);transform:rotate(.4deg);user-select:text}
.cartao .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5a5245;margin-bottom:6px}
.cartao h3{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.cartao img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:1px 2px 4px rgba(0,0,0,.4), 6px 10px 20px -4px rgba(0,0,0,.5);transform:rotate(-.7deg);cursor:zoom-in;background:#000}
.cartao .tx{margin:12px 0 0;white-space:pre-wrap;font-size:13.5px;line-height:1.45}
.cartao .acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cartao .acoes .bt{border:0;font:inherit;font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px;cursor:pointer;background:#fff;color:#1b1812;box-shadow:1px 2px 3px rgba(0,0,0,.35), 4px 6px 12px -3px rgba(0,0,0,.4)}
.cartao .acoes .bt:first-child{background:#4d5e1b;color:#f3f0e4}
@media (max-width:760px){.cartao{transform:none}}

/* ---------- movimento de câmera entre o app e a "nova ideia" (19/10) ----------
   A mesa inteira (tapete incluído, por estar fixo dentro do body) desliza como num plano da série: empurra com mola, desfoca no meio, assenta.
   Direção: ir pra nova ideia = câmera vai pra direita (a tela sai pela esquerda, a nova entra pela direita); voltar = o contrário. */
html.pele body{transform-origin:50% 45%;backface-visibility:hidden}
@keyframes cam-sai{0%{transform:perspective(1600px) translateX(0) rotateY(0) scale(1);filter:blur(0) brightness(1)}60%{filter:blur(4px) brightness(.9)}100%{transform:perspective(1600px) translateX(-14%) rotateY(6deg) scale(.965);filter:blur(7px) brightness(.8)}}
@keyframes cam-sai-esq{0%{transform:perspective(1600px) translateX(0) rotateY(0) scale(1);filter:blur(0) brightness(1)}60%{filter:blur(4px) brightness(.9)}100%{transform:perspective(1600px) translateX(14%) rotateY(-6deg) scale(.965);filter:blur(7px) brightness(.8)}}
@keyframes cam-chega{0%{transform:perspective(1600px) translateX(12%) rotateY(-5deg) scale(1.035);filter:blur(7px) brightness(.85)}55%{filter:blur(1px) brightness(1)}100%{transform:perspective(1600px) translateX(0) rotateY(0) scale(1);filter:blur(0) brightness(1)}}
@keyframes cam-chega-esq{0%{transform:perspective(1600px) translateX(-12%) rotateY(5deg) scale(1.035);filter:blur(7px) brightness(.85)}55%{filter:blur(1px) brightness(1)}100%{transform:perspective(1600px) translateX(0) rotateY(0) scale(1);filter:blur(0) brightness(1)}}
html.pele.cam-sai body{animation:cam-sai .42s cubic-bezier(.45,.02,.75,.35) forwards}
html.pele.cam-sai-esq body{animation:cam-sai-esq .42s cubic-bezier(.45,.02,.75,.35) forwards}
html.pele.cam-chega body{animation:cam-chega .72s cubic-bezier(.18,.92,.24,1.06) both}
html.pele.cam-chega-esq body{animation:cam-chega-esq .72s cubic-bezier(.18,.92,.24,1.06) both}
html.pele.cam-sai body::after, html.pele.cam-sai-esq body::after, html.pele.cam-chega body::after, html.pele.cam-chega-esq body::after{animation:none}
@media (prefers-reduced-motion:reduce){html.pele body{animation:none !important}}

/* ---------- chat: vidro fosco por trás da conversa pra leitura (19/10) ---------- */
html.pele .chat{position:relative}
html.pele .chat::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(10,14,10,.42), rgba(10,14,10,.58));backdrop-filter:blur(18px) saturate(.85);-webkit-backdrop-filter:blur(18px) saturate(.85);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, #000 28px, #000 calc(100% - 28px), rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, #000 28px, #000 calc(100% - 28px), rgba(0,0,0,0) 100%)}
html.pele .chat > *{position:relative;z-index:1}
html.pele .m.claude .b{text-shadow:0 1px 2px rgba(0,0,0,.35)}
@media (max-width:760px){html.pele .chat::before{-webkit-mask-image:none;mask-image:none}}

/* ---------- palco: a mesa contínua com o app (o body) e a "nova ideia" (mesa 2) ----------
   #palco é filho do <html>, atrás do body (z-index -1): tapete largo embaixo, luz e vinheta presas à câmera (#palco::after) por cima
   do tapete e por baixo do app. #mundo tem 212vw: 100vw do app, 12vw de vão, 100vw da nova ideia. Tudo anda SÓ COM TRANSFORM:
   o body pra um lado, o tapete e o mundo juntos, em 0,9 s com mola. Um véu escuro pisca de leve no meio (html::after, opacidade). */
html.palco{overflow:hidden}
html.palco body::before{display:none}
html.palco body{will-change:transform;backface-visibility:hidden}
#palco{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#1b2a14;contain:strict;opacity:1;will-change:opacity}
#palco.oculto{opacity:0;pointer-events:none}
#palco::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:
    linear-gradient(108deg, rgba(255,236,204,.11) 0%, rgba(255,236,204,.08) 18%, rgba(255,236,204,.03) 32%, rgba(0,0,0,0) 46%, rgba(0,4,8,.4) 100%),
    radial-gradient(ellipse 78% 62% at 36% 34%, rgba(0,0,0,0) 30%, rgba(0,2,6,.8) 100%),
    linear-gradient(rgba(5,9,5,.48), rgba(5,9,5,.48))}
#tapete-mundo{position:absolute;left:0;top:0;width:212vw;height:100%;z-index:1;background:url(tapete-largo.jpg) left top / 360vw auto no-repeat #1b2a14;filter:saturate(.92) contrast(1.05);will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
#mundo{position:absolute;left:0;top:0;width:212vw;height:100%;z-index:3;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
#mesa-nova{position:absolute;left:112vw;top:0;width:100vw;height:100%;overflow:hidden;contain:strict}
#mesa-nova iframe{display:block;width:100%;height:100%;border:0;background:transparent}
@keyframes cam-ir{from{transform:translate3d(0,0,0)}to{transform:translate3d(-112vw,0,0)}}
@keyframes cam-voltar{from{transform:translate3d(-112vw,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes cam-veu{0%{opacity:0}45%{opacity:.22}100%{opacity:0}}
html.cam-indo body, #mundo.indo, #tapete-mundo.indo{animation:cam-ir .9s cubic-bezier(.32,.72,.2,1.012) forwards}
html.cam-voltando body, #mundo.voltando, #tapete-mundo.voltando{animation:cam-voltar .9s cubic-bezier(.32,.72,.2,1.012) forwards}
html.cam-indo::after, html.cam-voltando::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background:#06090a;opacity:0;animation:cam-veu .9s ease-in-out forwards}
/* a página "nova ideia" dentro do palco: sem tapete próprio (o do palco é contínuo) e sem grão (o do app já cobre) */
html.embutida body{background:transparent}
html.embutida body::before, html.embutida body::after{display:none !important}