/* páginas internas — mesmo sistema da home (paleta, bootzy + poppins, curva marrom, estrela e cadeira),
   cada página com uma personalidade própria:
   projetos = vitrine editorial · gabi indica = conversa (vermelho + cadeira) · ateliê = mais livre, tipográfico */

.placeholder{font-size:12px;font-weight:500;letter-spacing:.06em;opacity:.65}
.em-breve{opacity:.55;pointer-events:none}

/* ---------- topo de página, com a curva marrom da home ---------- */
.p-hero{position:relative;overflow:clip;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:32px;
        padding:clamp(56px,10vh,112px) var(--lateral) clamp(64px,11vh,120px);min-height:min(78svh,720px)}
.p-hero .campo{width:68%}
.p-hero-texto{position:relative;color:var(--branco);max-width:660px}
.p-hero h1{font-size:clamp(56px,8.6vw,132px);line-height:.92;margin-bottom:22px}
.p-hero .sub{opacity:.9;max-width:30em}
.p-lead{font-family:var(--titulo);font-size:clamp(22px,2.2vw,30px);letter-spacing:.03em;line-height:1.15;margin-bottom:14px;max-width:18em}
.p-hero .id{margin-bottom:20px}
.p-hero-simbolo{position:relative;justify-self:center;width:min(100%,360px);fill:none;stroke:var(--vermelho);stroke-width:1.2;animation:gira 60s linear infinite}

/* ---------- projetos: vitrine editorial, linhas alternadas ---------- */
.projetos{list-style:none;display:grid;gap:clamp(72px,11vh,128px)}
.projeto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.projeto:nth-child(even) /* moldura editorial: capa reta, contorno deslocado e legenda "fig." como em revista */
.projeto-figura{position:relative;isolation:isolate;margin:0;max-width:420px;width:100%;justify-self:center}
.projeto:nth-child(even) .projeto-figura{order:2}
.projeto-capa{position:relative;aspect-ratio:4/5;display:grid;place-content:center;justify-items:center;gap:20px;padding:28px;text-align:center}
.projeto-capa::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--marrom);z-index:-1}
.projeto:nth-child(even) .projeto-capa::after{inset:16px 16px -16px -16px}
.projeto-capa svg{width:58px}
.projeto-capa span{font-family:var(--titulo);font-size:clamp(40px,4.4vw,64px);line-height:.95;letter-spacing:.02em}
.projeto-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.projeto-capa img.ok{opacity:1}
/* imagens dos projetos são logotipos: aparecem inteiras, como uma peça sobre a capa colorida */
.projeto-capa img.inteira{inset:12%;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35))}
.projeto-capa:has(img.ok) > span,.projeto-capa:has(img.ok) > svg{visibility:hidden}
.capa-marrom{background:var(--marrom);color:var(--branco)} .capa-marrom svg{fill:var(--vermelho)}
.capa-vermelha{background:var(--vermelho);color:var(--branco)} .capa-vermelha svg{fill:var(--branco)}
.capa-clara{background:#e9dfda;color:var(--marrom)} .capa-clara svg{fill:var(--vermelho)}
.projeto-figura figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:10px;
                          border-top:1.5px solid var(--marrom);font-size:12px;font-weight:500;letter-spacing:.1em}
.projeto-num{font-family:var(--titulo);font-size:clamp(72px,8vw,120px);line-height:.8;color:var(--vermelho);display:block;margin-bottom:12px}
.projeto h2{font-size:clamp(34px,4vw,54px);margin:6px 0 16px}
.projeto p{font-size:clamp(15px,1.2vw,17px);max-width:30em}
.projeto p + p{margin-top:12px}
.projeto-cta{margin-top:28px}
.projeto .pilulas{margin:20px 0 26px}

/* ---------- gabi indica: topo vermelho com a cadeira (como se a gente estivesse conversando) ---------- */
.i-hero{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:32px;min-height:min(70svh,640px)}
.i-hero h1{font-size:clamp(56px,8.6vw,132px);line-height:.92;margin-bottom:22px}
.i-hero .sub{max-width:30em}
.i-hero-cadeira{position:relative;justify-self:center;width:min(100%,300px)}
.i-hero-cadeira svg{width:100%;fill:none;stroke:var(--branco);stroke-width:1.6;transition:transform .8s cubic-bezier(.3,1.4,.5,1);transform-origin:50% 92%}
.i-hero-cadeira:hover svg{transform:rotate(-7deg)}
.i-hero-cadeira .estrela-sentada{position:absolute;width:34%;left:40%;top:16%;fill:var(--branco);animation:gira 40s linear infinite}
.aviso-parceria{display:inline-flex;gap:10px;align-items:center;margin-top:26px;font-size:13px;padding:8px 16px;border-radius:999px;
                box-shadow:inset 0 0 0 1.2px rgba(252,250,247,.6)}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filtros button{border:0;background:none;box-shadow:inset 0 0 0 1.5px currentColor;border-radius:999px;padding:9px 18px;font-weight:500;font-size:14px}
.filtros button[aria-pressed="true"]{background:var(--marrom);color:var(--branco);box-shadow:none}
.marrom .filtros button[aria-pressed="true"]{background:var(--branco);color:var(--marrom)}

/* cartões de indicação: o cupom é um "canhoto" destacável, com picote e recortes laterais */
.indicacoes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
.ind{position:relative;border-radius:24px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:12px;transition:transform .3s}
.ind:hover{transform:translateY(-4px)}
/* padrão dos cartões: fundo branco quente com contorno (marrom ou vermelho) */
.ind-0,.ind-1{box-shadow:inset 0 0 0 1.5px var(--marrom)}
.ind-2{box-shadow:inset 0 0 0 1.5px var(--vermelho)}
.ind-topo{display:flex;align-items:center;gap:8px}
.ind-topo .etiqueta{margin:0}
.ind-relacao{background:var(--vermelho) !important;color:var(--branco)}
.ind-estrela{margin-left:auto;width:28px;fill:var(--vermelho);transition:transform .8s}
.ind:hover .ind-estrela{transform:rotate(72deg)}
.ind h3{font-size:clamp(30px,3vw,42px);margin-top:6px}
.ind-desc{font-size:15px;max-width:34em}
.cupom{position:relative;margin:12px -28px 2px;padding:20px 28px 6px;border-top:2px dashed var(--linha);
       display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap}
.cupom::before,.cupom::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--branco)}
.cupom::before{left:-12px} .cupom::after{right:-12px}
.cupom-info{display:grid;gap:2px}
.cupom-rotulo{font-size:11px;font-weight:600;letter-spacing:.14em;opacity:.7}
.cupom-codigo{font-family:var(--texto);font-weight:600;font-size:clamp(21px,1.9vw,27px);letter-spacing:.07em;line-height:1.2}
.cupom-beneficio{font-size:14px;font-weight:600;color:var(--vermelho)}
.cupom-copiar{border:0;border-radius:999px;padding:12px 20px;font-weight:600;font-size:14px;background:var(--marrom);color:var(--branco);
              min-width:150px;transition:background .2s,color .2s}
.cupom-copiar.copiado{background:var(--vermelho);color:var(--branco)}
.ind-cond{font-size:12.5px;opacity:.75}
.ind-links{display:flex;flex-wrap:wrap;gap:10px;padding-top:10px}
.ind-links .btn{font-size:14px;padding:12px 20px}
.btn-linha{background:none;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-off{opacity:.5;cursor:default}
.btn-off:hover{transform:none}
.btn-off small{font-size:12px;font-weight:400}
.nota-indica{margin-top:56px !important;font-size:13px;opacity:.65}

/* ---------- ateliê: o canto mais livre ---------- */
.a-hero{padding:clamp(40px,8vh,96px) var(--lateral) clamp(56px,9vh,104px);position:relative;overflow:clip}
.a-hero > *{max-width:var(--largura);margin-left:auto;margin-right:auto}
.a-titulo{position:relative;font-size:clamp(96px,21vw,300px);line-height:.8;letter-spacing:.005em;color:var(--marrom)}
.a-titulo svg{display:inline-block;width:.3em;vertical-align:top;margin:-.06em 0 0 .04em;fill:var(--vermelho);animation:gira 40s linear infinite}
.a-intro{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:start;margin-top:clamp(28px,5vh,56px)}
.a-intro .etiqueta-psi{position:static;justify-self:start;align-self:start;transform:rotate(-3deg)}
.a-intro p{font-size:clamp(16px,1.4vw,20px);font-weight:300;max-width:34em}
.a-intro p + p{margin-top:12px}
.a-intro .p-lead{font-size:clamp(26px,2.6vw,36px);font-weight:400;margin-bottom:16px}
.a-indice{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;list-style:none}
.a-indice a{font-family:var(--titulo);font-size:clamp(22px,2vw,28px);letter-spacing:.03em;text-decoration:none;border-bottom:2px solid var(--vermelho)}
.a-redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.rede{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;font-size:14px;font-weight:500;
      text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--marrom);transition:background .2s,color .2s}
.rede svg{width:18px;height:18px;fill:var(--vermelho)}
a.rede[href]:hover{background:var(--marrom);color:var(--branco)}
a.rede[href]:hover svg{fill:var(--branco)}

/* plaquinha de museu (repertório e criações) */
.placa{background:var(--branco);color:var(--marrom);padding:12px 14px 13px;border-radius:3px;display:grid;gap:3px;font-size:12px;line-height:1.45}
.placa h3{font-size:19px;letter-spacing:.03em}
.placa p{font-size:12.5px;opacity:.8}
.placa-num{font-size:10.5px;font-weight:600;letter-spacing:.12em;opacity:.6}
.provisorio{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--vermelho)}
.olho.sala{letter-spacing:.22em}

/* criações: grade de 2 colunas, todas as molduras do mesmo tamanho; a obra aparece inteira (sem cortar nem distorcer)
   dentro do passe-partout. entrada suave ao rolar e leve movimento ao passar o cursor ou tocar. */
.criacoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(18px,3vw,40px);max-width:880px !important}
.obra{margin:0}
.obra-moldura{background:var(--branco);padding:clamp(14px,1.6vw,22px);border:clamp(8px,.9vw,12px) solid var(--marrom);
              box-shadow:0 26px 40px -26px rgba(74,41,38,.6);transition:transform .35s}
.obra:nth-child(3n+2) .obra-moldura{border-color:var(--vermelho)}
.obra:nth-child(3n) .obra-moldura{border-color:#e9dfda;box-shadow:inset 0 0 0 1.5px var(--marrom),0 26px 40px -26px rgba(74,41,38,.35)}
.obra-moldura{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.obra:hover .obra-moldura,.obra.tocada .obra-moldura{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 34px 46px -26px rgba(74,41,38,.6)}
.obra:nth-child(even):hover .obra-moldura,.obra.tocada:nth-child(even) .obra-moldura{transform:translateY(-6px) rotate(.8deg)}
.obra-arte{position:relative;display:grid;place-content:center;justify-items:center;gap:10px;background:#e9dfda;color:var(--marrom)}
.obra-arte svg{width:22%;fill:#d3c4be}
/* com imagem real, a obra mantém a proporção original (sem cortar) */
.obra-arte.com-imagem{aspect-ratio:4/5 !important;display:block;overflow:hidden;background:var(--branco)}
.obra-arte.com-imagem img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.obra:hover .obra-arte img,.obra.tocada .obra-arte img{transform:scale(1.03)}
.obra .placa{margin-top:16px;max-width:240px;padding:0 0 0 12px;border-left:3px solid var(--vermelho);border-radius:0;background:none}
.obra .placa b{font-family:var(--titulo);font-weight:400;font-size:20px;letter-spacing:.03em;display:block}


/* projetos: índice no topo */
.p-indice{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px}
.p-indice a{display:flex;align-items:baseline;gap:10px;font-family:var(--titulo);font-size:clamp(20px,1.8vw,26px);letter-spacing:.03em;
            text-decoration:none;border-bottom:2px solid var(--vermelho);padding-bottom:4px}
.p-indice span{font-size:.7em;color:var(--vermelho)}
.projeto{scroll-margin-top:calc(var(--topo) + 24px)}
.projeto-capa::after{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.projeto-figura:hover .projeto-capa::after{transform:translate(8px,8px)}
.projeto:nth-child(even) .projeto-figura:hover .projeto-capa::after{transform:translate(-8px,8px)}

/* sala 01 · repertório: coleção com formatos por tipo — livro (capa com lombada), música (disco), série (tela) */
.colecao{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:48px 34px}
.peca{display:flex;flex-direction:column;gap:14px;margin:0}
.peca-livro{width:210px} .peca-musica{width:200px} .peca-serie{width:min(100%,380px)}
.peca-arte{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
           box-shadow:0 24px 36px -22px rgba(0,0,0,.65);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.peca:hover .peca-arte{transform:translateY(-6px) rotate(-1.2deg)}
.peca-titulo{font-family:var(--titulo);letter-spacing:.03em;line-height:1.02}
.peca-autoria{font-size:12px;font-weight:500;letter-spacing:.06em;opacity:.75}
.peca-arte.com-imagem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* livro com capa real: a capa inteira aparece, com a proporção dela (a lombada vermelha continua) */
.peca-livro .peca-arte.com-imagem{aspect-ratio:auto;padding:0;background:var(--branco)}
.peca-livro .peca-arte.com-imagem img{position:static;display:block;height:auto}
/* série com logotipo: a "tela" ganha fundo e o logotipo aparece inteiro */
.peca-arte.logo-claro{background:var(--branco)}
.peca-arte.logo-escuro{background:#1f1311}
.peca-arte[class*="logo-"] img{object-fit:contain;padding:12% 10%}
.credito{font-size:10.5px;letter-spacing:.04em;opacity:.6;text-underline-offset:3px;margin-top:2px}
.credito:hover{opacity:1}
.peca-livro .peca-arte{aspect-ratio:2/3;padding:22px 18px 18px 26px;border-radius:3px 12px 12px 3px;background:var(--branco);color:var(--marrom);
                       border-left:10px solid var(--vermelho)}
.peca-livro:nth-of-type(even) .peca-arte{background:#e9dfda}
.peca-livro .peca-titulo{font-size:26px}
.peca-musica .peca-arte{aspect-ratio:1;border-radius:50%;align-items:center;justify-content:center;text-align:center;padding:28px;
                        background:radial-gradient(circle,var(--marrom) 0 7%,transparent 7.5%),var(--vermelho);color:var(--branco)}
.peca-musica:nth-of-type(even) .peca-arte{background:radial-gradient(circle,var(--vermelho) 0 7%,transparent 7.5%),var(--branco);color:var(--marrom)}
.peca-musica .peca-titulo{font-size:22px;margin-bottom:34%}
.peca-serie .peca-arte{aspect-ratio:16/10;padding:22px 24px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(252,250,247,.6),0 24px 36px -22px rgba(0,0,0,.65);color:var(--branco)}
.peca-serie .peca-titulo{font-size:34px}
.peca .placa h3{font-size:18px}
.placa-autoria{font-weight:500}
.peca[hidden]{display:none}

/* sala vazia: em vez de exemplos fictícios, uma parede em montagem */
.sala-vazia{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sala-vazia-moldura{width:min(220px,50vw);aspect-ratio:4/5;border:1.5px dashed var(--linha);display:grid;place-items:center}
.sala-vazia-moldura svg{width:28%;fill:rgba(74,41,38,.14)}
.sala-vazia .placa{padding:0 0 0 12px;border-left:3px solid var(--vermelho);background:none;font-size:14px}
.criacoes.vazia,.mural.vazia{display:block;columns:auto}

/* sala 03 · frases soltas: mural com alfinetes de estrela, inclinações variadas e uma flutuação lenta.
   ao passar o cursor (ou tocar), a nota se endireita e o alfinete gira. o texto nunca se move enquanto é lido de perto. */
.mural{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px 28px;align-items:start;padding-top:14px}
.nota{position:relative;margin:0;padding:28px 24px 22px;border-radius:18px;display:flex;flex-direction:column;gap:12px;
      transition:rotate .6s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;
      animation:flutua 7s ease-in-out infinite alternate}
.nota:nth-child(3n+2){margin-top:46px;animation-delay:-2.3s}
.nota:nth-child(3n){margin-top:16px;animation-delay:-4.6s}
@keyframes flutua{from{translate:0 0}to{translate:0 -7px}}
.nota::before{content:"";position:absolute;top:-13px;left:50%;width:28px;height:28px;margin-left:-14px;background:var(--vermelho);
              clip-path:var(--estrela-poligono);transition:rotate .8s cubic-bezier(.2,1.4,.5,1)}
.nota:hover,.nota.tocada{rotate:0deg !important;scale:1.03;box-shadow:0 26px 40px -24px rgba(74,41,38,.5)}
.nota:hover::before,.nota.tocada::before{rotate:144deg}
.nota img{width:100%;height:auto;border-radius:10px}
.nota blockquote{font-size:17px;line-height:1.6}
.nota figcaption{font-size:12px;letter-spacing:.06em;opacity:.65}
.nota-0{box-shadow:inset 0 0 0 1.5px var(--marrom);rotate:-2deg}
.nota-0 blockquote{font-family:var(--titulo);font-size:26px;line-height:1.1;letter-spacing:.02em}
.nota-1{background:var(--vermelho);color:var(--branco);rotate:1.5deg}
.nota-1::before{background:var(--marrom)}
.nota-1 blockquote{font-family:var(--titulo);font-size:24px;line-height:1.1;letter-spacing:.02em}
.nota-2{background:var(--marrom);color:var(--branco);rotate:-1deg;border-radius:18px 18px 70px 18px}
.nota-3{padding-left:0;border-top:3px solid var(--vermelho);border-radius:0;rotate:.8deg}
.nota-3 blockquote{font-family:var(--titulo);font-size:28px;line-height:1.08;letter-spacing:.02em}
.nota-4{box-shadow:inset 0 0 0 1.5px var(--vermelho);border-radius:18px 18px 18px 60px;rotate:-.6deg}
/* entrada ao rolar (obras e notas), ativada pelo script; sem "reduzir movimento" */
.revela{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--atraso,0s)}
.revela.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.p-hero-simbolo,.i-hero-cadeira .estrela-sentada,.a-titulo svg,.nota{animation:none}}

@media (max-width:960px){
  .p-hero,.i-hero{grid-template-columns:1fr}
  .p-hero .campo{width:100%;bottom:120px;border-bottom-right-radius:140px}
  .p-hero-simbolo{width:180px;justify-self:end;margin-top:-20px}
  .i-hero-cadeira{width:150px;justify-self:end;order:-1;margin-bottom:-24px}
  .projeto{grid-template-columns:1fr}
  .projeto:nth-child(even) .projeto-figura{order:0}
  .a-intro{grid-template-columns:1fr}
}
@media (max-width:720px){
  .p-hero{padding-top:36px;min-height:0}
  .p-hero h1,.i-hero h1{font-size:clamp(48px,14vw,72px)}
  .projeto-figura{max-width:290px;justify-self:start}
  .indicacoes{grid-template-columns:1fr}
  .ind{padding:24px 22px 22px}
  .cupom{margin:10px -22px 2px;padding:18px 22px 4px}
  .colecao{gap:36px 16px;justify-content:space-between}
  .peca-livro,.peca-musica{width:calc(50% - 8px)}
  .peca-serie{width:100%}
  .peca-livro .peca-titulo{font-size:21px}
  .peca-musica .peca-titulo{font-size:19px}
  .criacoes{gap:28px 14px}
  .obra-moldura{padding:8px;border-width:6px}
  .obra .placa{font-size:11px}
  .mural{grid-template-columns:1fr;gap:36px}
  .nota:nth-child(n){margin-top:0}
  .obra .placa b{font-size:17px}

}