/* The Mood Board · design system (Figma "The Mood Board", ecrãs Home, Creating e Thanks; repensado a 2026-11-05)
   Neutros e preto na interface; a cor vem dos posters e do humor atual. */

/* Fontes: Denim INK nos títulos, na interface e no texto (ABC Synt fica declarada, mas o site já não a usa), Aeonik Fono nos rótulos e números.
   Caminhos relativos a este ficheiro, para servirem o site e o design system */
@font-face{font-family:"ABC Synt";src:url("fontes/ABCSynt-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onda Denim";src:url("fontes/DenimINK-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onda Denim";src:url("fontes/DenimINK-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Onda Denim";src:url("fontes/DenimINK-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Aeonik Fono";src:url("fontes/AeonikFono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Aeonik Fono";src:url("fontes/AeonikFono-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  /* cores */
  --bg:#F2F2F2; --canvas:#FFFFFF; --escuro:#1A1A1A;
  --fg:#1A1A1A; --muted:#828282; --line:#D6D6D6; --err:#B3261E;
  /* superfícies translúcidas: tudo o que tem transparência leva este desfoque de fundo */
  --desfoque:blur(40px);
  --panel:rgba(26,26,26,.05); --panel-forte:rgba(26,26,26,.15); --panel-escuro:rgba(214,214,214,.75); --veu:rgba(26,26,26,.24);
  /* ação: o preto. O hover é uma proposta (o Figma não o define) */
  --accent:#1A1A1A; --accent-hover:#3D3D3D; --on-accent:#FFFFFF; --accent-strong:#1A1A1A; --accent-strong-hover:#3D3D3D;
  --disabled:.38;
  /* tipografia */
  --ui:"Onda Denim", "Helvetica Neue", system-ui, sans-serif;
  --display:"ABC Synt", Georgia, serif; --titulo:var(--ui); --mono:"Aeonik Fono", ui-monospace, monospace;
  --t-h1:600 40px/1.2 var(--ui);  --t-h2:500 20px/1.15 var(--titulo);  --t-h3:500 20px/1.15 var(--titulo);
  --t-lead:400 18px/1.2 var(--ui);     --t-lg:400 16px/1.25 var(--ui);       --t-md:400 14px/1.25 var(--ui);    --t-sm:400 12px/1.25 var(--ui);
  --t-xsm:400 10px/1.2 var(--mono);    --t-mono:400 12px/1.2 var(--mono);   --t-mono-lg:600 18px/1.2 var(--mono);
  /* espaço e raios */
  --s4:4px; --s8:8px; --s16:16px; --s20:20px; --s24:24px; --s32:32px; --s40:40px; --s60:60px;
  --r16:16px; --r40:40px; --circ:200px;
  /* todas as linhas do site (divisórias, contornos, eixos, tracejados, grelha): 1 px, para ficarem iguais e sempre visíveis */
  --linha-fina:1px;
  --linha-mapa:var(--line);
  /* grelha: desktop até 1440 px, 12 colunas, margem 60, gutter 24; mobile a partir de 476 px para baixo, 6 colunas, margem 20, gutter 16; tablet de 477 a 1024 px, 8 colunas, margem 40, gutter 20.
     --lado é a margem real: acima de 1440 px o conteúdo fica centrado e os fundos continuam até à borda */
  --colunas:12; --margem:60px; --gutter:24px; --max:1440px;
  --lado:max(var(--margem),calc((100vw - var(--max)) / 2 + var(--margem)));
  color-scheme:light;
}
@media (max-width:476px){:root{--colunas:6;--margem:20px;--gutter:16px}}
@media (min-width:477px) and (max-width:1024px){:root{--colunas:8;--margem:40px;--gutter:20px}}
.grade{display:grid;grid-template-columns:repeat(var(--colunas),minmax(0,1fr));column-gap:var(--gutter)}
.grade>.toda{grid-column:1 / -1}
/* secções escuras: o Mood e a Grid */
.escuro{--linha-mapa:rgba(255,255,255,.4);background:var(--escuro);color:var(--bg)}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--t-md);-webkit-font-smoothing:antialiased}
/* os botões não herdam a fonte por omissão: tudo em Denim */
button{font-family:inherit}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
p{margin:0}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- tipografia ---------- */
.h1{font:var(--t-h1);letter-spacing:-.02em;margin:0;text-wrap:balance}
.h2,.titulo,.titulo-modal{font:var(--t-h2);letter-spacing:-.02em;margin:0;text-wrap:balance}
.lead{font:var(--t-lead);letter-spacing:-.02em}
.body-lg,.ui{font:var(--t-lg)}
.body-md,.corpo{font:var(--t-md)}
.body-sm{font:var(--t-sm)}
.sec{color:var(--muted)}
/* rótulos e números: Aeonik Fono em maiúsculas */
.contador,.mono{font:var(--t-xsm);text-transform:uppercase}
.mono-md{font:var(--t-mono);text-transform:uppercase}
.mono-lg{font:var(--t-mono-lg);text-transform:uppercase}

/* ---------- botões de texto: altura 32 · raio 40 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 var(--s24);border:0;border-radius:var(--r40);
  background:var(--accent);color:var(--on-accent);font:var(--t-md);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover:not(:disabled),.btn.is-hover{background:var(--accent-hover)}
.btn:disabled,.btn.is-disabled{opacity:var(--disabled);cursor:default}
.btn.largo{width:100%;font:var(--t-lg);line-height:1}
/* o efeito de decoding num texto do site (decodificarUmaVez, em pintura.js): o texto já no sítio final, com as formas por cima, assentes na base da linha */
.f-linha{position:relative;display:block;height:1lh;text-align:center;white-space:pre}
.f-letra{visibility:hidden}
.f-letra.vista{visibility:visible}
.f-formas{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;gap:2px}
.f-par,.f-espaco{display:block;flex:none}
.f-par svg{display:block}
.f-par .f-outra,.f-par.trocada .f-forma{display:none}
.f-par.trocada .f-outra{display:block}
.f-par.some{visibility:hidden}
/* sobre o escuro: Load more */
.btn.claro{background:var(--canvas);color:var(--fg);font:var(--t-lg);line-height:1}
.btn.claro:hover:not(:disabled),.btn.claro.is-hover{background:var(--line)}

/* ---------- botões circulares: 32 × 32 · ícone 16 ---------- */
.circ{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--circ);
  background:var(--escuro);color:var(--on-accent);cursor:pointer;text-decoration:none;transition:background .15s}
.circ img{width:16px;height:16px;display:block;filter:brightness(0) invert(1)}
.circ.contorno{background:transparent;border:var(--linha-fina) solid var(--muted)}
.circ.contorno img{filter:none}
/* cinza: o botão claro (#D6D6D6) com o ícone escuro, sobre fundos escuros (o X da ficha aberta) */
.circ.cinza{background:var(--line)}
.circ.cinza img{filter:none}
.circ:hover:not(:disabled),.circ.is-hover{background:var(--accent-hover)}
/* no hover, o contorno sai e fica só o fundo (a borda passa a transparente, para o botão não mudar de tamanho) */
.circ.contorno:hover:not(:disabled),.circ.contorno.is-hover{background:var(--panel-forte);border-color:transparent}
.circ.cinza:hover:not(:disabled),.circ.cinza.is-hover{background:#FFFFFF}
.circ:disabled,.circ.is-disabled{opacity:var(--disabled);cursor:default}
.acoes{display:flex;gap:var(--s8);flex-wrap:wrap}

/* ---------- mensagem ---------- */
.area textarea::placeholder{color:var(--muted);opacity:1}
/* o texto de exemplo que vai mudando (sugestoes.js): um span por cima do campo, na mesma letra e no mesmo sítio; desvanece, troca de frase e volta a aparecer.
   Não é o placeholder porque o Safari do iPhone deixava restos da frase anterior. Some quando o campo tem texto */
.sugestao{position:absolute;top:var(--s16);left:var(--s16);right:var(--s16);color:var(--muted);font:var(--t-lg);pointer-events:none;transition:opacity .4s ease}
.sugestao.sugestao-some,.area textarea:not(:placeholder-shown)~.sugestao{opacity:0}
.area textarea:not(:placeholder-shown)~.sugestao{transition:none}
@media (prefers-reduced-motion:reduce){.sugestao{transition:none}}
.area:hover,.area.is-hover{background:rgba(26,26,26,.08)}
/* a mensagem da home (Figma 6591:4885): o Create sai da caixa e fica na linha do aviso, à direita, a 16 px do texto */
.aviso-home{font:var(--t-lg);color:var(--muted)}
.enviar{display:flex;align-items:center;gap:var(--s16)}
.enviar .aviso-home{flex:1;min-width:0;margin:0}
.enviar .btn{flex:none}
.erro-campo{color:var(--err);font:var(--t-md);margin-top:6px}
/* a ajuda que acompanha o aviso das palavras proibidas (suicídio): na cor do texto, numa linha à parte */
.erro-campo .ajuda{display:block;margin-top:var(--s8);color:var(--fg)}

/* mensagem: caixa translúcida, sem raio nem contorno (padding 16), com contador em Aeonik Fono */
.area{position:relative;display:flex;flex-direction:column;gap:var(--s16);padding:var(--s16);background:var(--panel);cursor:text;-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);outline:var(--linha-fina) solid transparent;outline-offset:calc(var(--linha-fina) * -1);transition:background .15s,border-radius .3s ease,outline-color .3s ease}
.area textarea{flex:1;width:100%;min-height:96px;margin:0;padding:0;border:0;background:transparent;color:var(--fg);font:var(--t-lg);resize:none;outline:none}
.area .rodape{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s8)}
/* do hover para o foco: os cantos arredondam e o contorno aparece aos poucos (0,3 s); o contorno existe sempre, transparente, para a cor poder mudar com transição */
.area:focus-within,.area.is-focus{outline-color:var(--muted);border-radius:var(--r16)}
@media (prefers-reduced-motion:reduce){.area{transition:none}}
.area.is-erro{box-shadow:inset 0 0 0 1px var(--err)}
.area.is-disabled{opacity:var(--disabled)}

/* ---------- mural: Mood e Grid ---------- */
/* a escolhida é uma pílula; a outra fica retangular e mais leve */
/* cada uma ocupa 2 colunas, ao centro; em mobile, 3 */
.vistas{display:grid;grid-template-columns:repeat(var(--colunas),minmax(0,1fr));column-gap:var(--gutter)}
.vistas button:first-child{grid-column:5 / 7}
.vistas button:last-child{grid-column:7 / 9}
.vistas button{-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);height:38px;padding:0 var(--s24);border:1px solid transparent;border-radius:0;background:rgba(3,3,3,.05);color:var(--fg);font:var(--t-md);cursor:pointer;transition:background .15s,border-radius .3s ease,border-color .3s ease}
@media (prefers-reduced-motion:reduce){.vistas button{transition:none}}
.vistas button img{width:16px;height:16px}
.vistas button:hover,.vistas button.is-hover{background:rgba(3,3,3,.1)}
.vistas button[aria-pressed=true]{border-color:rgba(26,26,26,.05);border-radius:var(--r40);background:var(--panel-forte)}
.escuro .vistas button{background:var(--panel-escuro)}
.escuro .vistas button:hover,.escuro .vistas button.is-hover{background:rgba(214,214,214,.9)}
.escuro .vistas button[aria-pressed=true]{background:var(--line)}
@media (min-width:477px) and (max-width:1024px){.vistas button:first-child{grid-column:3 / 5}.vistas button:last-child{grid-column:5 / 7}}
@media (max-width:476px){.vistas button{height:32px;font:var(--t-lg);line-height:1}.vistas button:first-child{grid-column:1 / 4}.vistas button:last-child{grid-column:4 / 7}}

/* o mapa ocupa as colunas todas e a escala vertical fica na margem da página.
   As escalas vão de -10 a 10 (Y, emoção principal; X, emoção secundária), com a cruz dos eixos e os posters por cima */
.mapa{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--s8);height:min(860px,92vh);min-height:560px}
.mapa .eixo-x{grid-row:1;position:relative;height:12px;color:var(--muted)}
.mapa .eixo-x span{position:absolute;transform:translateX(-50%)}
.mapa .eixo-y{position:absolute;top:20px;bottom:0;left:calc(var(--margem) * -1);width:calc(var(--margem) - 6px);color:var(--muted)}
.mapa .eixo-y span{position:absolute;right:0;transform:translateY(-50%)}
/* em mobile a margem (20) não chega para os números: o eixo vertical encosta à margem e o gráfico começa 24 px depois */
@media (max-width:476px){.mapa{padding-left:24px}.mapa .eixo-y{left:0;width:18px}}
/* o eixo vertical vai de 2 em 2 só com o gráfico no tamanho máximo (640 px na home, 620 de eixo); sempre que encolhe para caber no ecrã, vai de 5 em 5 */
.mapa .eixo-y{container-type:size}
.mapa .eixo-y .so-de-5{display:none}
@container (max-height:610px){.mapa .eixo-y .so-de-2{display:none}.mapa .eixo-y .so-de-5{display:block}}
/* o eixo horizontal vai de 2 em 2; num gráfico estreito (menos de 480 px, como em mobile) vai de 5 em 5 */
.mapa .eixo-x{container-type:inline-size}
.mapa .eixo-x .so-de-5{display:none}
@container (max-width:480px){.mapa .eixo-x .so-de-2{display:none}.mapa .eixo-x .so-de-5{display:block}}
.mapa .plano{grid-row:2;position:relative;background:linear-gradient(var(--linha-mapa),var(--linha-mapa)) center/100% var(--linha-fina) no-repeat,linear-gradient(var(--linha-mapa),var(--linha-mapa)) center/var(--linha-fina) 100% no-repeat}
/* ao passar o rato ou focar: a ficha do poster, e os outros desfocam */
.no-mapa{position:absolute;display:block;padding:0;border:0;background:none;cursor:pointer}
.no-mapa img{display:block;width:100%;aspect-ratio:277/329;object-fit:cover;transition:filter .2s}
.no-mapa:hover,.no-mapa:focus-visible{z-index:1}
.plano:has(.no-mapa:hover) .no-mapa:not(:hover) img,.plano:has(.no-mapa:focus-visible) .no-mapa:not(:focus-visible) img{filter:blur(14px)}
@media (prefers-reduced-motion:reduce){.no-mapa img{transition:none}}

/* a ficha de um poster: emoções, linha e mensagem. Serve a dica do mapa e o poster aberto na Grid */
.ficha{display:flex;flex-direction:column;gap:var(--s16);padding:var(--s32) var(--s16);border-radius:var(--r16);background:var(--bg);color:var(--fg)}
.ficha .mensagem{flex:none;padding:var(--s16) var(--s16) 0;border-top:var(--linha-fina) solid var(--muted);font:var(--t-lg);overflow-wrap:anywhere}
/* mensagem privada (Figma 6595:800): o olho riscado e o aviso em cinzento, alinhados com o texto de cima (16 à esquerda), 10 entre os dois */
/* o cartão de hover do mapa (Figma 6591:4795 e 6595:800): 16 em cima e em baixo, sem margem dos lados, para a divisória ir de ponta a ponta; o texto fica a 16 da borda */
.ficha-mapa{padding:var(--s16) 0}
.ficha .mensagem.privada{display:flex;align-items:center;gap:10px;padding-right:0;color:var(--muted);letter-spacing:-.02em}
.ficha .mensagem.privada::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("icones/ver-nao.svg") center/contain no-repeat;mask:url("icones/ver-nao.svg") center/contain no-repeat}
.dica-mapa{position:absolute;z-index:2;width:431px;max-width:100%;pointer-events:none}
.emocao{display:flex;flex-direction:column;gap:2px;font:var(--t-xsm);text-transform:uppercase}
.emocao.em-linha{flex-direction:row;flex-wrap:wrap;gap:var(--s4) var(--s40)}
.emocao p{display:flex;gap:var(--s8);margin:0}
.emocao b{font-weight:600}
.emocao.media{font:var(--t-mono)}
.ficha .emocao{flex:none;gap:0;padding-inline:var(--s16);font:var(--t-mono)}
.ficha .emocao p{align-items:center}
.ficha .emocao b{line-height:19.2px}

/* o humor atual: o tom e onde ele fica do negativo ao positivo */
.painel.humor{gap:var(--s16);padding:var(--s16) 0;background:var(--panel-escuro);color:var(--fg);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque)}
.titulo-humor{font:var(--t-md)}
.nome-humor{margin:0;font:var(--t-mono-lg);text-transform:uppercase}
/* Figma 6607:858: 16 em cima e em baixo, sem margem dos lados; a divisória (#828282) vai de ponta a ponta e o conteúdo fica a 16 da borda */
.humor .cabeca-humor{display:flex;flex-direction:column;gap:var(--s8);padding-inline:var(--s16)}
.humor .barra-e-extremos{padding:var(--s16) var(--s16) 0;border-top:var(--linha-fina) solid #828282}
.barra-humor{display:grid;grid-template-columns:repeat(10,1fr);height:20px}
.barra-humor i{display:flex;align-items:center;justify-content:center}
.barra-humor b{width:6px;height:6px;border-radius:var(--circ);background:currentColor}
.extremos-humor{display:flex;justify-content:space-between;font:var(--t-xsm);text-transform:uppercase;color:var(--fg)}
.barra-e-extremos{display:flex;flex-direction:column;gap:var(--s8)}

/* a faixa no topo da home: o humor atual na cor do tom */
.faixa-humor{display:flex;justify-content:center;align-items:center;gap:var(--s8);padding:var(--s8) var(--lado);color:var(--fg);font:400 12px/1.2 var(--mono);text-transform:uppercase;white-space:nowrap}
.faixa-humor b{font-weight:600}
@media (max-width:476px){.faixa-humor{justify-content:space-between}}

/* o loading: os dez tons em grande, a passar até parar no humor atual, com o tom numa faixa */
/* tudo o que mexe é desenhado frame a frame no mood.js (pintarLoading), por isso aqui não há transições */
.a-ler{position:relative;container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);padding:var(--s20);overflow:hidden;background-color:var(--escuro);color:rgba(26,26,26,.15)}
/* 67 px num ecrã de 390 × 848. O tom da vez ganha uma faixa de ponta a ponta na sua cor, que não mexe nos outros; a última desce mais, para encostar ao fundo */
.a-ler span{position:relative;z-index:1;font:600 min(19.14cqw,7.9vh)/1 var(--ui);letter-spacing:-.02em;white-space:nowrap}
.a-ler .faixa{position:absolute;top:0;left:0;right:0;height:0;background-color:#E4EAEE;will-change:transform}
.a-ler.ecra{position:fixed;inset:0;z-index:20;height:100vh;height:100svh}

/* Crack the code: o quadrado entre duas linhas que ocupam a coluna toda, o rótulo por baixo, e a grelha dos caracteres */
.letra-escolhida{align-items:center;gap:var(--s16)}
/* as linhas: traço de 2 px e intervalo de 2 px (no Figma, 1,81 e 1,81), desenhados em vez do pontilhado do browser, para saírem iguais em todos os ecrãs */
.moldura-letra{--traco:repeating-linear-gradient(to right,var(--muted) 0 2px,transparent 2px 4px);align-self:stretch;display:flex;justify-content:center;background:var(--traco) top/100% var(--linha-fina) no-repeat,var(--traco) bottom/100% var(--linha-fina) no-repeat}
.quadro-letra{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:312px;max-width:100%;padding:var(--s8);border-inline:var(--linha-fina) solid var(--muted)}
.quadro-letra svg{display:block;width:100%;height:100%}
.quadro-letra rect{shape-rendering:crispEdges}
/* as células vizinhas partilham a mesma linha: cada uma avança menos a espessura da linha, com tudo em píxeis certos do ecrã,
   para as linhas ficarem iguais em qualquer ecrã (--linha-fina, 1 px) */
.alfabeto{--linha:var(--linha-fina);--passo:calc(52px - var(--linha));display:grid;grid-template-columns:repeat(auto-fill,var(--passo));grid-auto-rows:var(--passo);padding:0 var(--linha) var(--linha) 0}
.alfabeto button{position:relative;width:calc(var(--passo) + var(--linha));height:calc(var(--passo) + var(--linha));padding:0;border:var(--linha) solid var(--muted);background:transparent;color:inherit;font:400 18px/1 var(--mono);text-transform:uppercase;cursor:pointer;transition:background-color .5s ease-out}
.alfabeto button:hover,.alfabeto button[aria-pressed=true]{background:rgba(130,130,130,.25)}
/* o destaque passa de célula a fundir (0,5 s); com o rato responde logo */
.alfabeto button:hover{transition-duration:.15s}
@media (prefers-reduced-motion:reduce){.alfabeto button{transition:none}}
.alfabeto button:focus-visible{z-index:1}

/* página Privacy: em desktop, o "Go to home" à esquerda e o texto encostado à margem direita, alinhados ao topo; até ao tablet, um por cima do outro */
.pagina-legal{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s40);padding:var(--s60) var(--lado)}
@media (max-width:1024px){.pagina-legal{flex-direction:column}}
@media (max-width:476px){.pagina-legal{padding-top:var(--s20)}}
/* texto legal: uma coluna de leitura, com o título em Title e os títulos de secção em Denim 18 */
.texto-legal{width:100%;max-width:640px;display:flex;flex-direction:column;gap:var(--s16);font:var(--t-md)}
.texto-legal h2{margin:var(--s24) 0 0;font:var(--t-lead);font-weight:600;letter-spacing:-.02em}
.texto-legal p,.texto-legal li{text-wrap:pretty}
.texto-legal ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s8)}
.texto-legal b{font-weight:600}
.texto-legal address{font-style:normal}

/* o rodapé da home: sem fundo próprio, fica com a cor da secção anterior, também durante a transição */
.rodape-site{display:flex;justify-content:space-between;gap:var(--s16);flex-wrap:wrap;padding:var(--s20) var(--lado);font:var(--t-mono);text-transform:uppercase}
.rodape-site nav{display:flex;gap:var(--s16)}
.rodape-site a{text-decoration:none}
.rodape-site a:hover{text-decoration:underline}

/* Festival: as infos fixas em baixo: o bloco fica centrado (Figma 6578:347), com 128 entre as duas e 40 até ao tablet */
/* Festival, as infos fixas (Figma 6612:1085 mobile, 6591:5799 desktop). Até ao tablet: o título em cima, a 32 do topo; em baixo, a 32 do fundo, as duas infos
   centradas uma por baixo da outra (16 entre elas): "Make your poster at" (Denim SemiBold 18) sobre o endereço (16), 4 entre eles; e "A project by" numa linha
   em Aeonik Fono 12 maiúsculas, com o logo a 90 × 12 */
.infos-festival{display:flex;flex-direction:column;align-items:center;gap:var(--s16);text-align:center;color:var(--canvas);font:400 16px/normal var(--ui);white-space:nowrap}
.infos-festival p{margin:0}
.infos-festival .visita p{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.infos-festival .visita b{font-size:18px;font-weight:600}
.infos-festival .qr{display:none}
.infos-festival .autoria{display:flex;align-items:center;gap:6px;font:400 12px/normal var(--mono);text-transform:uppercase}
.infos-festival .autoria b{font-weight:600}
.infos-festival img{width:90px;height:auto;filter:brightness(0) invert(1)}
.titulo-festival{position:fixed;top:var(--s32);left:var(--lado);right:var(--lado);z-index:1;margin:0;text-align:center;color:#FFFFFF;pointer-events:none}
/* desktop: o título a 44 do topo; em baixo, a 44 do fundo (no festival.html) e alinhados pela base, nas margens, à esquerda o lugar do QR (44 × 44, #D9D9D9) e o texto alinhado à esquerda, 16 entre eles; à direita "A project by" */
@media (min-width:1025px){
  .titulo-festival{top:44px}
  .infos-festival{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left}
  .infos-festival .visita{display:flex;align-items:center;gap:var(--s16)}
  .infos-festival .visita p{align-items:flex-start}
  .infos-festival .qr{display:block;flex:none;width:44px;height:44px;background:#D9D9D9}
}
/* What colors feel: um cartão por tom, em duas colunas (uma em mobile) */
/* o título fica a 60 px dos cartões em desktop e a 40 em mobile: os 40 são do bloco, os 20 são estes */
.cores-tom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:112px;gap:var(--s16);margin-top:var(--s20)}
.cores-tom>div{display:flex;flex-direction:column;justify-content:space-between;padding:var(--s20);border-radius:var(--r16);color:var(--escuro)}
.cores-tom>div.claro{color:var(--canvas)}
.cores-tom .tom-nome{font:400 20px/1.2 var(--ui)}
@media (max-width:476px){
  .quadro-letra{width:172px;padding:var(--s4)}
  /* 9 colunas à largura do ecrã, com o passo arredondado a um número inteiro */
  .alfabeto{--passo:calc((100vw - 2 * var(--margem) - var(--linha)) / 9)}
  @supports (width:round(down,1px,1px)){.alfabeto{--passo:round(down,calc((100vw - 2 * var(--margem) - var(--linha)) / 9),1px)}}
  .alfabeto{grid-template-columns:repeat(9,var(--passo))}
  .cores-tom{grid-template-columns:minmax(0,1fr);margin-top:0}
}

/* ---------- privacidade: switch 48 × 28 · knob 24 · cadeado 16 ---------- */
.switch{-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);flex:none;display:inline-flex;align-items:center;width:48px;height:28px;padding:2px;border-radius:var(--r40);background:var(--panel)}
.switch i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--circ);background:var(--accent)}
.switch img{width:16px;height:16px;filter:brightness(0) invert(1)}
/* switch com rótulo: privado por omissão (cadeado fechado à esquerda);
   ligado = mensagem pública (Figma 6297:582: fundo de ação, knob branco à direita, cadeado aberto, rótulo "Your message will be public"; desligado: "Your message will stay private"; ligado por defeito desde 2026-11-03) */
.privacidade{display:flex;align-items:center;gap:var(--s16);cursor:pointer;width:fit-content}
.privacidade input{position:absolute;opacity:0;width:1px;height:1px}
.privacidade .switch{transition:background .15s}
.privacidade .switch i{transition:transform .15s}
.privacidade input:checked+.switch i{transform:translateX(20px)}
.privacidade .aberto,.privacidade input:checked+.switch .fechado,.privacidade input:checked~.ui .rot-privado{display:none}
.privacidade input:checked+.switch .aberto,.privacidade input:checked~.ui .rot-publico{display:block}
.privacidade .rot-publico{display:none}
/* linha de ajuda por baixo do rótulo: o que aparece no mural */
.privacidade .ui{font:var(--t-lg)}
.privacidade .ui small{display:block;margin-top:var(--s4);font:var(--t-sm);text-wrap:pretty}
.privacidade input:focus-visible+.switch{outline:2px solid var(--fg);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.privacidade .switch,.privacidade .switch i{transition:none}}

/* tamanho das formas do poster: slider com os dois extremos por baixo (Whisper ↔ Shout).
   Figma "Slide": calha translúcida de 16 px, knob preto de 14 px; a área de toque tem 28 px */
.tamanho{display:flex;flex-direction:column;gap:var(--s4);font:var(--t-lg)}
.tamanho input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.tamanho input::-webkit-slider-runnable-track{height:16px;border-radius:8px;background:var(--panel)}
.tamanho input::-moz-range-track{height:16px;border-radius:8px;background:var(--panel)}
.tamanho input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:1px;border:0;border-radius:var(--circ);background:var(--accent-strong);transition:transform .15s,background .15s}
.tamanho input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:var(--circ);background:var(--accent-strong);transition:transform .15s,background .15s}
.tamanho input:hover::-webkit-slider-thumb,.tamanho input:active::-webkit-slider-thumb,.tamanho.is-hover input::-webkit-slider-thumb{background:var(--accent-strong-hover)}
.tamanho input:hover::-moz-range-thumb,.tamanho input:active::-moz-range-thumb,.tamanho.is-hover input::-moz-range-thumb{background:var(--accent-strong-hover)}
@media (prefers-reduced-motion:reduce){.tamanho input::-webkit-slider-thumb,.tamanho input::-moz-range-thumb{transition:none}}
.tamanho input:focus{outline:none}
.tamanho input:focus-visible::-webkit-slider-runnable-track{outline:2px solid var(--fg);outline-offset:2px}
.tamanho input:focus-visible::-moz-range-track{outline:2px solid var(--fg);outline-offset:2px}
.tamanho input:disabled{opacity:var(--disabled);cursor:default}
.tamanho .extremos{display:flex;justify-content:space-between;font:var(--t-xsm);text-transform:uppercase}

/* só em mobile e tablet (até 1024): em desktop não aparece (o botão de partilhar) */
@media (min-width:1025px){.so-ate-tablet{display:none}}
/* só em desktop (a partir de 1025): em mobile e tablet não aparece (o botão de download do PDF; lá fica o de partilhar) */
@media (max-width:1024px){.so-desktop{display:none}}

/* o anti-bot fora do fluxo, sem ocupar lugar no painel, até precisar de um clique */
#ts:not(.a-pedir){position:absolute}

/* "Go to home": botão circular com rótulo */
.voltar{display:inline-flex;align-items:center;gap:var(--s16);font:var(--t-lg);text-decoration:none}
.voltar:hover .circ{background:var(--accent-hover)}

/* ---------- superfícies ---------- */
.painel{-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);background:var(--panel);border-radius:var(--r16);padding:var(--s16);display:flex;flex-direction:column;gap:var(--s32)}
.grupo{display:flex;flex-direction:column;gap:var(--s16)}
/* os controlos do painel (texto, tom, tamanho, privacidade): o dobro do espaço; o erro do texto fica colado ao campo */
.grupo.campos{gap:var(--s32)}
.grupo.campos .erro-campo{margin-top:calc(6px - var(--s32))}
.msg{font:var(--t-md);color:var(--fg)}
.msg.err{color:var(--err)}
.msg:empty{display:none}
@keyframes pulso{from{opacity:.25}to{opacity:1}}

/* botão circular a trabalhar (o download do PDF A3 demora uns segundos): fundo de hover e ícone a pulsar */
.circ[aria-busy="true"],.circ.contorno[aria-busy="true"]:disabled{opacity:1;cursor:progress;background:var(--accent-hover);border-color:transparent}
.circ[aria-busy="true"] img{animation:pulso .8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.circ[aria-busy="true"] img{animation:none}}

/* modal: diálogo em primeiro plano sobre o ecrã desfocado (véu 24%, desfoque 20 px); Fechar fica fora da superfície */
dialog.modal{border:0;padding:0;background:transparent;width:min(296px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:visible;color:var(--fg)}
dialog.modal::backdrop{background:var(--veu);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque)}
.modal-caixa{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s4)}
.modal-caixa .painel{width:100%;align-items:center;gap:var(--s20);border-radius:var(--r16);background:var(--bg);text-align:center}
.modal-caixa .titulo-modal{text-align:center}
.modal-caixa .painel:focus{outline:none}
/* o poster aberto: o cartão com o poster, as emoções e a mensagem, e o botão de fechar por baixo, ao centro */
.poster-aberto{align-items:center}
/* Figma 6591:5558: cartão com raio 24, 16 em cima e 24 em baixo, sem margem dos lados; o poster a 16 das bordas, com raio 16;
   as emoções e a mensagem a 24 da borda e a divisória de ponta a ponta */
.poster-aberto .ficha{padding:var(--s16) 0 var(--s24);border-radius:var(--s24)}
.poster-aberto .capa{display:block;flex:none;margin:0 var(--s16) var(--s4);border-radius:var(--r16);overflow:hidden}
.poster-aberto .capa img,.poster-aberto .capa svg{display:block;width:100%;height:auto;aspect-ratio:277/329}
.poster-aberto .ficha .emocao{font:var(--t-xsm);padding-inline:var(--s24)}
.poster-aberto .ficha .mensagem{padding-inline:var(--s24)}
/* num ecrã baixo, o cartão desliza por dentro e o botão de fechar fica sempre à vista */
dialog.modal#dlgPoster{width:min(293px,calc(100% - 32px))}
dialog.modal .poster-aberto{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
dialog.modal .poster-aberto .ficha{min-height:0;overflow-y:auto;outline:none}
dialog.modal .poster-aberto .circ{flex:none}
/* em desktop (a partir de 1025), a ficha aberta fica deitada (Figma 6608:1009): o X por cima, à direita, em claro;
   o poster à esquerda (261 × 310, a 16 das bordas), uma divisória vertical a 20 de cada lado, e à direita as emoções em cima e a mensagem em baixo */
dialog.modal#dlgPoster:has(.lado-a-lado){width:min(648px,calc(100% - 32px))}
.poster-aberto.lado-a-lado{align-items:flex-end}
.poster-aberto.lado-a-lado .circ{order:-1}
.poster-aberto.lado-a-lado .ficha{display:grid;grid-template-columns:261px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s20);row-gap:0;padding:0 0 0 var(--s16);border-radius:var(--s24)}
.poster-aberto.lado-a-lado .capa{grid-row:1 / 3;width:261px;margin:var(--s16) 0}
.poster-aberto.lado-a-lado .ficha .emocao{grid-column:2;padding:var(--s16) var(--s24) var(--s16) var(--s20);border-left:var(--linha-fina) solid #828282}
.poster-aberto.lado-a-lado .ficha .mensagem{grid-column:2;display:grid;align-content:end;padding:0 var(--s16) var(--s16) var(--s20);border-top:0;border-left:var(--linha-fina) solid #828282}
.poster-aberto.lado-a-lado .ficha .mensagem.privada{grid-template-columns:auto 1fr;align-items:center;column-gap:10px}

/* cartaz: a proporção da folha do poster (277 × 329 mm, ver FOLHA em codigo.js); no hover mostra a mensagem e as ações */
.cartaz{position:relative;aspect-ratio:277/329;overflow:hidden;background:var(--panel)}
.cartaz>button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:default}
.cartaz img.arte{display:block;width:100%;height:100%;object-fit:cover}
/* verso (Figma 6610:1067 público e 6591:4834 privado): ao passar o rato, um cartão #F2F2F2 tapa o poster, com o conteúdo em cima:
   as emoções, a divisória de ponta a ponta e a mensagem (ou o olho riscado e o aviso), tudo a 16 da borda; é a ficha do mapa, sem cantos */
.cartaz .verso{position:absolute;inset:0;border-radius:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .2s}
.cartaz .verso .mensagem{min-height:0;overflow:hidden;line-height:1.2;letter-spacing:-.02em;white-space:pre-line}
.cartaz:hover .verso,.cartaz:has(button:focus-visible) .verso,.cartaz.is-hover .verso{opacity:1}
@media (hover:none){.cartaz .verso{display:none}}
@media (prefers-reduced-motion:reduce){.cartaz .verso{transition:none}}